-
- {label}
-
-
+
+ {icon}
+
+ {label && (
+
+ {label}
+
+ )}
+
+ {rightSection}
);
});
diff --git a/packages/shadcn/src/style.css b/packages/shadcn/src/style.css
index 00c52b6180..00707adb6b 100644
--- a/packages/shadcn/src/style.css
+++ b/packages/shadcn/src/style.css
@@ -189,3 +189,8 @@
font-size: 14px;
font-style: italic;
}
+
+.bn-shadcn .bn-combobox-error {
+ color: var(--bn-colors-highlights-red-background);
+ font-weight: bold;
+}
diff --git a/packages/shadcn/src/suggestionMenu/SuggestionMenuLoader.tsx b/packages/shadcn/src/suggestionMenu/SuggestionMenuLoader.tsx
index ff43ed5ea8..b8ef2013b2 100644
--- a/packages/shadcn/src/suggestionMenu/SuggestionMenuLoader.tsx
+++ b/packages/shadcn/src/suggestionMenu/SuggestionMenuLoader.tsx
@@ -2,17 +2,28 @@ import { assertEmpty } from "@blocknote/core";
import { ComponentProps } from "@blocknote/react";
import { forwardRef } from "react";
+import { cn } from "../lib/utils.js";
+
export const SuggestionMenuLoader = forwardRef<
HTMLDivElement,
ComponentProps["SuggestionMenu"]["Loader"]
>((props, ref) => {
- const { className, children, ...rest } = props;
+ const { className, ...rest } = props;
assertEmpty(rest);
return (
-
- {children}
+
+ {/* Taken from Google Material Icons */}
+ {/* https://fonts.google.com/icons?selected=Material+Symbols+Rounded:progress_activity:FILL@0;wght@400;GRAD@0;opsz@24&icon.query=load&icon.size=24&icon.color=%23e8eaed&icon.set=Material+Symbols&icon.style=Rounded&icon.platform=web */}
+
+
);
});
diff --git a/packages/xl-ai-server/README.md b/packages/xl-ai-server/README.md
index 852eea310b..ca6c275232 100644
--- a/packages/xl-ai-server/README.md
+++ b/packages/xl-ai-server/README.md
@@ -17,7 +17,7 @@ Configure your environment variables according to `.env.example`.
## Running (dev mode):
mkcert localhost
- npm run dev
+ pnpm run dev
## Client Usage
diff --git a/packages/xl-ai/src/components/AIMenu/AIMenu.tsx b/packages/xl-ai/src/components/AIMenu/AIMenu.tsx
index 544fa4dd74..2a071faa2a 100644
--- a/packages/xl-ai/src/components/AIMenu/AIMenu.tsx
+++ b/packages/xl-ai/src/components/AIMenu/AIMenu.tsx
@@ -1,8 +1,9 @@
-import { useBlockNoteEditor } from "@blocknote/react";
-import { useCallback, useEffect, useMemo, useState } from "react";
-// import { useAIDictionary } from "../../i18n/useAIDictionary";
import { BlockNoteEditor } from "@blocknote/core";
+import { useBlockNoteEditor, useComponentsContext } from "@blocknote/react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { RiSparkling2Fill } from "react-icons/ri";
import { useStore } from "zustand";
+
import { getAIExtension } from "../../AIExtension.js";
import { useAIDictionary } from "../../i18n/useAIDictionary.js";
import { PromptSuggestionMenu } from "./PromptSuggestionMenu.js";
@@ -22,7 +23,7 @@ export const AIMenu = (props: {
| "ai-writing"
| "error"
| "user-reviewing"
- | "closed"
+ | "closed",
) => AIMenuSuggestionItem[];
onManualPromptSubmit?: (userPrompt: string) => void;
}) => {
@@ -30,10 +31,12 @@ export const AIMenu = (props: {
const [prompt, setPrompt] = useState("");
const dict = useAIDictionary();
+ const Components = useComponentsContext()!;
+
const ai = getAIExtension(editor);
const aiResponseStatus = useStore(ai.store, (state) =>
- state.aiMenuState !== "closed" ? state.aiMenuState.status : "closed"
+ state.aiMenuState !== "closed" ? state.aiMenuState.status : "closed",
);
const { items: externalItems } = props;
@@ -72,7 +75,7 @@ export const AIMenu = (props: {
useSelection: editor.getSelection() !== undefined,
});
},
- [ai, editor]
+ [ai, editor],
);
useEffect(() => {
@@ -82,6 +85,45 @@ export const AIMenu = (props: {
}
}, [aiResponseStatus]);
+ const placeholder = useMemo(() => {
+ if (aiResponseStatus === "thinking") {
+ return dict.formatting_toolbar.ai.thinking;
+ } else if (aiResponseStatus === "ai-writing") {
+ return dict.formatting_toolbar.ai.editing;
+ } else if (aiResponseStatus === "error") {
+ return dict.formatting_toolbar.ai.error;
+ }
+
+ return dict.formatting_toolbar.ai.input_placeholder;
+ }, [aiResponseStatus, dict]);
+
+ const rightSection = useMemo(() => {
+ if (aiResponseStatus === "thinking" || aiResponseStatus === "ai-writing") {
+ return (
+
+ );
+ } else if (aiResponseStatus === "error") {
+ return (
+
+ {/* Taken from Google Material Icons */}
+ {/* https://fonts.google.com/icons?selected=Material+Symbols+Rounded:error:FILL@0;wght@400;GRAD@0;opsz@24&icon.query=error&icon.size=24&icon.color=%23e8eaed&icon.set=Material+Symbols&icon.style=Rounded&icon.platform=web */}
+
+
+
+ );
+ }
+
+ return undefined;
+ }, [Components, aiResponseStatus]);
+
return (
+
}
+ rightSection={rightSection}
/>
);
};
diff --git a/packages/xl-ai/src/components/AIMenu/PromptSuggestionMenu.tsx b/packages/xl-ai/src/components/AIMenu/PromptSuggestionMenu.tsx
index 605de5e77a..b18e423a8a 100644
--- a/packages/xl-ai/src/components/AIMenu/PromptSuggestionMenu.tsx
+++ b/packages/xl-ai/src/components/AIMenu/PromptSuggestionMenu.tsx
@@ -7,23 +7,22 @@ import {
import {
ChangeEvent,
KeyboardEvent,
+ ReactNode,
useCallback,
useEffect,
useMemo,
useState,
} from "react";
-import { RiSparkling2Fill } from "react-icons/ri";
-
export type PromptSuggestionMenuProps = {
items: DefaultReactSuggestionItem[];
onManualPromptSubmit: (userPrompt: string) => void;
promptText?: string;
onPromptTextChange?: (userPrompt: string) => void;
+ icon?: ReactNode;
+ rightSection?: ReactNode;
placeholder?: string;
disabled?: boolean;
- loading?: boolean;
- error?: string;
};
export const PromptSuggestionMenu = (props: PromptSuggestionMenuProps) => {
@@ -99,7 +98,7 @@ export const PromptSuggestionMenu = (props: PromptSuggestionMenuProps) => {
className={"bn-combobox-input"}
name={"ai-prompt"}
variant={"large"}
- icon={
}
+ icon={props.icon}
value={promptTextToUse || ""}
autoFocus={true}
placeholder={props.placeholder}
@@ -107,8 +106,7 @@ export const PromptSuggestionMenu = (props: PromptSuggestionMenuProps) => {
onKeyDown={handleKeyDown}
onChange={handleChange}
autoComplete={"off"}
- // TODO: loader or error
- // rightSection={props.loading ?
: props.error}
+ rightSection={props.rightSection}
/>
.bn-combobox-input,
-div:not(.bn-popover-content) > .bn-combobox-items:not(:empty) {
- background-color: var(--bn-colors-menu-background);
- border: var(--bn-border);
- border-radius: var(--bn-border-radius-medium);
- box-shadow: var(--bn-shadow-medium);
- color: var(--bn-colors-menu-text);
- gap: 4px;
- min-width: 145px;
- padding: 2px;
-}
-
.bn-combobox-items {
max-width: 50%;
}
+.bn-combobox-items:empty {
+ display: none;
+}
+
div[data-type="modification"] {
display: inline;
}