@carlonicora/nextjs-jsonapi 1.106.2 → 1.107.1

package/src/components/editors/BlockNoteEditor.tsx

@@ -1,21 +1,49 @@
 "use client";
 
-import { BlockNoteSchema, defaultInlineContentSpecs, PartialBlock } from "@blocknote/core";
+import { BlockNoteSchema, defaultInlineContentSpecs, filterSuggestionItems, PartialBlock } from "@blocknote/core";
+import { en as coreEn } from "@blocknote/core/locales";
 import {
   createReactInlineContentSpec,
   DefaultReactSuggestionItem,
+  getDefaultReactSlashMenuItems,
+  SuggestionMenuController,
   SuggestionMenuProps,
+  useBlockNoteEditor,
   useCreateBlockNote,
+  useExtension,
+  useExtensionState,
 } from "@blocknote/react";
 import { BlockNoteView } from "@blocknote/shadcn";
 import "@blocknote/shadcn/style.css";
-import { CheckIcon, XIcon } from "lucide-react";
+import {
+  AIExtension,
+  AIMenuController,
+  getAISlashMenuItems,
+  getDefaultAIMenuItems,
+  PromptSuggestionMenu,
+  useAIDictionary,
+} from "@blocknote/xl-ai";
+import { en as aiEn } from "@blocknote/xl-ai/locales";
+import "@blocknote/xl-ai/style.css";
+import { DefaultChatTransport } from "ai";
+import {
+  CheckIcon,
+  LanguagesIcon,
+  LayoutTemplateIcon,
+  SparklesIcon,
+  TypeIcon,
+  WandSparklesIcon,
+  XIcon,
+} from "lucide-react";
 import { useTranslations } from "next-intl";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { getPublicApiUrl } from "../../client/config";
+import { getClientToken } from "../../client/token";
 import { useCurrentUserContext } from "../../contexts";
 import { S3Interface } from "../../features/s3/data";
 import { S3Service } from "../../features/s3/data/s3.service";
 import { UserInterface } from "../../features/user/data";
+import { useI18nLocale } from "../../i18n/config";
 import { Button } from "../../shadcnui";
 import { BlockNoteDiffUtil, BlockNoteWordDiffRendererUtil, cn } from "../../utils";
 import { errorToast } from "../errors";
@@ -28,6 +56,12 @@ import {
 } from "./BlockNoteEditorMentionInlineContent";
 import { BlockNoteEditorMentionSuggestionMenu } from "./BlockNoteEditorSuggestionMenuController";
 
+export type BlockNoteAiConfig = {
+  endpoint: string;
+  entityType: string;
+  entityId?: string;
+};
+
 export type BlockNoteEditorProps = {
   id: string;
   type: string;
@@ -52,6 +86,12 @@ export type BlockNoteEditorProps = {
   suggestionMenuComponent?: React.FC<SuggestionMenuProps<DefaultReactSuggestionItem>>;
   mentionNameResolver?: MentionNameResolver;
   onWarmMentions?: (blocks: PartialBlock[]) => void;
+  aiConfig?: BlockNoteAiConfig;
+  // When the editor is inside a bounded flex column (parent gives it a real
+  // height via flex-1+min-h-0), set this so `.bn-container` shrinks to that
+  // height and scrolls internally. Without it the editor grows to fit its
+  // content and pushes the surrounding form to scroll instead.
+  stretch?: boolean;
 };
 
 function isBlockEmpty(block: any): boolean {
@@ -128,6 +168,222 @@ const createDiffActionsInlineContentSpec = (
   );
 };
 
+/**
+ * Custom AI menu wrapper. Surfaces our backend-driven action items
+ * (Improve Writing, Fix Spelling) above the free-form prompt input.
+ *
+ * Why a custom wrapper instead of `<AIMenu items={…}>` with the BlockNote
+ * defaults: BlockNote's `PromptSuggestionMenu` hijacks Enter to pick the
+ * highlighted item whenever `items.length > 0`. We gate items on
+ *   - status === "user-input"
+ *   - editor has a selection
+ *   - prompt input is empty
+ * so the moment the user types, items disappear and Enter falls back to
+ * free-form submission. Outside `user-input` (review / error states) we
+ * keep BlockNote's default review buttons (accept/revert/retry/cancel).
+ *
+ * Each custom item passes a `type` discriminator on `chatRequestOptions.body`.
+ * That field flows through `chat.sendMessage(msg, opts)` to the transport's
+ * `prepareSendMessagesRequest({messages, body})` (see types.ts in
+ * `@blocknote/xl-ai` — `ChatRequestOptions = Parameters<Chat["sendMessage"]>[1]`).
+ * The backend dispatcher reads `body.type` and routes to a per-type handler
+ * with its own canonical prompt. NO prompt text lives in this file.
+ */
+function NarrAIMenu() {
+  const editor = useBlockNoteEditor();
+  const ai = useExtension(AIExtension);
+  const dict = useAIDictionary();
+  const status = useExtensionState(AIExtension, {
+    selector: (s) => (s.aiMenuState !== "closed" ? s.aiMenuState.status : "closed"),
+  });
+  const [prompt, setPrompt] = useState("");
+  // Set by items that pre-fill the input (Translate) so handleSubmit knows
+  // which `type` to attach when the user submits the captured text. Cleared
+  // after submit or on status change.
+  const pendingTypeRef = useRef<string | null>(null);
+
+  useEffect(() => {
+    if (status === "ai-writing" || status === "user-reviewing" || status === "error" || status === "closed") {
+      setPrompt("");
+      pendingTypeRef.current = null;
+    }
+  }, [status]);
+
+  // Selection-edit ops operate per-block. If the user's selection only
+  // covers part of a block (cursor mid-paragraph dragged to mid-next), the
+  // rewrite would silently replace the WHOLE containing blocks — beyond
+  // what the user highlighted. Expand the selection to whole-block bounds
+  // BEFORE invokeAI so the user sees exactly what will be rewritten.
+  const expandSelectionToBlocks = useCallback(() => {
+    const sel = editor.getSelection?.();
+    const blocks = (sel as any)?.blocks;
+    if (!Array.isArray(blocks) || blocks.length === 0) return;
+    const first = blocks[0];
+    const last = blocks[blocks.length - 1];
+    try {
+      (editor as any).setSelection?.(first, last);
+    } catch {
+      // If BlockNote's setSelection signature changes, fail silently — the
+      // backend still operates per-block, so we just lose the visual hint.
+    }
+  }, [editor]);
+
+  const items = useMemo(() => {
+    // Outside user-input (reviewing / error), use BlockNote's default
+    // review buttons (accept/revert/retry/cancel). Need to wrap onItemClick
+    // because the default items expect a setPrompt argument.
+    if (status !== "user-input") {
+      return getDefaultAIMenuItems(editor, status).map((item) => ({
+        ...item,
+        onItemClick: () => item.onItemClick(setPrompt),
+      }));
+    }
+    const hasSelection = editor.getSelection() !== undefined;
+    const hasTyped = prompt.trim().length > 0;
+    // Once the user starts typing, hide all items so Enter submits the
+    // free-form (or pending-type) prompt instead of being hijacked.
+    if (hasTyped) return [];
+
+    // Generate from Template is shown in BOTH contexts (with and without
+    // selection) because it operates on the whole document — it ignores any
+    // active selection and runs the per-section template-fill flow. Listed
+    // first so it's the default-highlighted item.
+    const generateFromTemplate = {
+      key: "generate_from_template",
+      title: "Generate from Template",
+      aliases: ["generate", "template", "fill"],
+      icon: <LayoutTemplateIcon size={18} />,
+      size: "small" as const,
+      onItemClick: () => {
+        void ai.invokeAI({
+          userPrompt: "fill-template",
+          useSelection: false,
+          chatRequestOptions: { body: { type: "fill-template" } },
+        });
+      },
+    };
+
+    if (hasSelection) {
+      // Selection-edit items + the always-available Generate from Template.
+      // Each selection item invokes ai.invokeAI with chatRequestOptions
+      // carrying the `type` body field. The userPrompt is a short tag — the
+      // backend ignores it and uses the canonical prompt for the type instead.
+      return [
+        generateFromTemplate,
+        {
+          key: "improve_writing",
+          title: "Improve Writing",
+          aliases: ["improve", "rewrite", "polish"],
+          icon: <SparklesIcon size={18} />,
+          size: "small" as const,
+          onItemClick: () => {
+            expandSelectionToBlocks();
+            void ai.invokeAI({
+              userPrompt: "improve-writing",
+              useSelection: true,
+              chatRequestOptions: { body: { type: "improve-writing" } },
+            });
+          },
+        },
+        {
+          key: "fix_spelling",
+          title: "Fix Spelling",
+          aliases: ["spelling", "grammar", "typo"],
+          icon: <TypeIcon size={18} />,
+          size: "small" as const,
+          onItemClick: () => {
+            expandSelectionToBlocks();
+            void ai.invokeAI({
+              userPrompt: "fix-spelling",
+              useSelection: true,
+              chatRequestOptions: { body: { type: "fix-spelling" } },
+            });
+          },
+        },
+        {
+          key: "translate",
+          title: "Translate…",
+          aliases: ["translate", "language"],
+          icon: <LanguagesIcon size={18} />,
+          size: "small" as const,
+          // Pre-fills the input with a placeholder. User appends/replaces
+          // with the target language and submits via Enter. handleSubmit
+          // reads pendingTypeRef and forwards `type: "translate"`. We
+          // expand the selection now so the user sees the scope before
+          // typing the language — handleSubmit doesn't re-expand.
+          onItemClick: () => {
+            expandSelectionToBlocks();
+            pendingTypeRef.current = "translate";
+            setPrompt("Translate to ");
+          },
+        },
+        {
+          key: "simplify",
+          title: "Simplify",
+          aliases: ["simplify", "easier", "plain"],
+          icon: <WandSparklesIcon size={18} />,
+          size: "small" as const,
+          onItemClick: () => {
+            expandSelectionToBlocks();
+            void ai.invokeAI({
+              userPrompt: "simplify",
+              useSelection: true,
+              chatRequestOptions: { body: { type: "simplify" } },
+            });
+          },
+        },
+      ];
+    }
+
+    // No selection (the /ai slash menu path): just Generate from Template.
+    // Free-form typing still works — once the user types, items hide and
+    // Enter submits with no type (backend defaults to fill-template).
+    return [generateFromTemplate];
+  }, [editor, status, prompt, ai, expandSelectionToBlocks]);
+
+  const handleSubmit = useCallback(
+    async (userPrompt: string) => {
+      if (!userPrompt.trim()) return;
+      const pendingType = pendingTypeRef.current;
+      pendingTypeRef.current = null;
+      const body = pendingType ? { type: pendingType } : undefined;
+      await ai.invokeAI({
+        userPrompt,
+        useSelection: editor.getSelection() !== undefined,
+        ...(body ? { chatRequestOptions: { body } } : {}),
+      });
+    },
+    [ai, editor],
+  );
+
+  const placeholder =
+    status === "thinking"
+      ? dict.ai_menu.status.thinking
+      : status === "ai-writing"
+        ? dict.ai_menu.status.editing
+        : status === "error"
+          ? dict.ai_menu.status.error
+          : dict.ai_menu.input_placeholder;
+
+  const disabled = status === "thinking" || status === "ai-writing";
+
+  return (
+    <PromptSuggestionMenu
+      items={items}
+      onManualPromptSubmit={handleSubmit}
+      promptText={prompt}
+      onPromptTextChange={setPrompt}
+      placeholder={placeholder}
+      disabled={disabled}
+      icon={
+        <div className="bn-combobox-icon">
+          <SparklesIcon size={16} />
+        </div>
+      }
+    />
+  );
+}
+
 export default function BlockNoteEditor({
   id,
   type,
@@ -149,8 +405,11 @@ export default function BlockNoteEditor({
   suggestionMenuComponent,
   mentionNameResolver,
   onWarmMentions,
+  aiConfig,
+  stretch,
 }: BlockNoteEditorProps): React.JSX.Element {
   const t = useTranslations();
+  const locale = useI18nLocale();
   const { company } = useCurrentUserContext<UserInterface>();
 
   const [acceptedChanges, setAcceptedChanges] = useState<Set<string>>(new Set());
@@ -214,6 +473,57 @@ export default function BlockNoteEditor({
     [DiffActionsInlineContent, mentionSpec, inlineContentSpecs],
   );
 
+  const docRef = useRef<{ getDoc: () => any[] }>({ getDoc: () => [] });
+  // Selection getter used by the AI transport to attach `selectionBlocks` to
+  // the outgoing request metadata. Populated in a useEffect once the editor
+  // instance exists; reads the current BlockNote selection on every send.
+  const selectionRef = useRef<{ getSelectedBlocks: () => any[] }>({ getSelectedBlocks: () => [] });
+
+  const companyId = company?.id;
+  const aiExtension = useMemo(() => {
+    if (!aiConfig) return undefined;
+    const base = getPublicApiUrl();
+    const url = new URL(aiConfig.endpoint, base.endsWith("/") ? base : base + "/").toString();
+    return AIExtension({
+      transport: new DefaultChatTransport({
+        api: url,
+        credentials: "include",
+        headers: async () => {
+          const headers: Record<string, string> = { "x-language": locale };
+          const token = await getClientToken();
+          if (token) headers["Authorization"] = `Bearer ${token}`;
+          if (companyId) headers["x-companyid"] = companyId;
+          return headers;
+        },
+        prepareSendMessagesRequest: ({ messages, body }: any) => {
+          let lastUserIdx = -1;
+          for (let i = messages.length - 1; i >= 0; i--) {
+            if (messages[i]?.role === "user") {
+              lastUserIdx = i;
+              break;
+            }
+          }
+          const selectedBlocks = selectionRef.current.getSelectedBlocks();
+          const augmented = messages.map((m: any, i: number) =>
+            i === lastUserIdx
+              ? {
+                  ...m,
+                  metadata: {
+                    ...(m.metadata ?? {}),
+                    entityType: aiConfig.entityType,
+                    entityId: aiConfig.entityId,
+                    blocks: docRef.current.getDoc(),
+                    selectionBlocks: selectedBlocks,
+                  },
+                }
+              : m,
+          );
+          return { body: { ...(body ?? {}), messages: augmented } };
+        },
+      }),
+    });
+  }, [aiConfig, companyId, locale]);
+
   const uploadImage = useCallback(
     async (file: File): Promise<string> => {
       if (!company) {
@@ -341,8 +651,10 @@ export default function BlockNoteEditor({
         schema,
         initialContent: validatedInitialContent,
         uploadFile: uploadImage,
+        extensions: aiExtension ? [aiExtension] : undefined,
+        dictionary: aiExtension ? { ...coreEn, ai: aiEn } : undefined,
       }),
-      [placeholder, t, schema, validatedInitialContent, uploadImage],
+      [placeholder, t, schema, validatedInitialContent, uploadImage, aiExtension],
     ),
   );
 
@@ -461,6 +773,15 @@ export default function BlockNoteEditor({
     onWarmMentions(initialContent);
   }, [onWarmMentions, initialContent]);
 
+  useEffect(() => {
+    docRef.current.getDoc = () => editor?.document ?? [];
+    selectionRef.current.getSelectedBlocks = () => {
+      const sel = editor?.getSelection?.();
+      const blocks = (sel as any)?.blocks;
+      return Array.isArray(blocks) ? blocks : [];
+    };
+  }, [editor]);
+
   // Handle audio received from whisper transcription
   const _handleAudioReceived = useCallback(
     (message: string) => {
@@ -497,6 +818,12 @@ export default function BlockNoteEditor({
       className={cn(
         bordered ? "rounded-md border border-input bg-input/20 dark:bg-input/30" : "",
         "flex flex-col w-full",
+        // Pin BlockNote's font-size so it doesn't jump from 14→16px when the
+        // xl-ai AIMenu mounts. The shadcn theme sets `.bn-default-styles {
+        // font-size: 16px }` explicitly; outside AI mode the form's text-sm
+        // wins via cascade, but ForkYDocExtension re-evaluates the style
+        // context on AI activation and the explicit 16px takes over.
+        "[&_.bn-default-styles]:!text-sm",
         className,
       )}
     >
@@ -505,10 +832,25 @@ export default function BlockNoteEditor({
         onChange={handleChange}
         editable={onChange !== undefined}
         formattingToolbar={false}
+        slashMenu={!aiConfig}
         theme="light"
-        className={cn(`BlockNoteView flex-1 ${onChange ? "p-4" : ""}`, size === "sm" && "small")}
+        // `className` is applied by BlockNote to both the main `.bn-container`
+        // AND `editor.portalElement` (the floating-UI portal root). Gate `p-4`
+        // on `.bn-container` so it doesn't add padding to the empty portal
+        // element and produce a phantom scrollbar on the wrapper.
+        className={cn(
+          "BlockNoteView flex-1",
+          onChange && "[&.bn-container]:p-4",
+          // In stretch mode the parent chain caps our height via flex; without
+          // these two classes the `.bn-container` keeps `min-height: auto`
+          // (its content's intrinsic height) and pushes the bordered wrapper
+          // — and the surrounding EditorSheet form — to scroll instead of
+          // scrolling internally.
+          onChange && stretch && "[&.bn-container]:min-h-0 [&.bn-container]:overflow-y-auto",
+          size === "sm" && "small",
+        )}
       >
-        <BlockNoteEditorFormattingToolbar />
+        <BlockNoteEditorFormattingToolbar showAI={!!aiConfig} />
         {enableMentions && mentionSearchFn && (
           <BlockNoteEditorMentionSuggestionMenu
             editor={editor}
@@ -521,6 +863,15 @@ export default function BlockNoteEditor({
         {enableMentions && mentionResolveFn && (
           <BlockNoteEditorMentionHoverCard containerRef={editorRef} mentionResolveFn={mentionResolveFn} />
         )}
+        {aiConfig && (
+          <SuggestionMenuController
+            triggerCharacter="/"
+            getItems={async (query: string) =>
+              filterSuggestionItems([...getDefaultReactSlashMenuItems(editor), ...getAISlashMenuItems(editor)], query)
+            }
+          />
+        )}
+        {aiConfig && <AIMenuController aiMenu={() => <NarrAIMenu />} />}
       </BlockNoteView>
     </div>
   );

package/src/components/editors/BlockNoteEditorFormattingToolbar.tsx

@@ -10,8 +10,9 @@ import {
   FormattingToolbarController,
   TextAlignButton,
 } from "@blocknote/react";
+import { AIToolbarButton } from "@blocknote/xl-ai";
 
-export function BlockNoteEditorFormattingToolbar() {
+export function BlockNoteEditorFormattingToolbar({ showAI = false }: { showAI?: boolean }) {
   return (
     <FormattingToolbarController
       formattingToolbar={() => (
@@ -31,6 +32,8 @@ export function BlockNoteEditorFormattingToolbar() {
           <TextAlignButton textAlignment={"right"} key={"textAlignRightButton"} />
 
           <CreateLinkButton key={"createLinkButton"} />
+
+          {showAI ? <AIToolbarButton key={"aiToolbarButton"} /> : null}
         </FormattingToolbar>
       )}
     />

package/src/components/editors/BlockNoteEditorMentionInlineContent.tsx

@@ -36,11 +36,30 @@ export const mentionDataAttrs = (p: MentionRenderProps) => ({
   "data-mention-alias": p.alias,
 });
 
+export const parseMentionElement = (
+  element: HTMLElement,
+): { id: string; entityType: string; alias: string } | undefined => {
+  const id = element.getAttribute("data-mention-id");
+  const entityType = element.getAttribute("data-mention-type");
+  const alias = element.getAttribute("data-mention-alias");
+  if (!id || !entityType || !alias) return undefined;
+  return { id, entityType, alias };
+};
+
 export const createMentionInlineContentSpec = (
   resolveFn?: MentionResolveFn,
   disableMention?: boolean,
   nameResolver?: MentionNameResolver,
 ) => {
+  const MentionExternalHTML = (props: MentionRenderProps) => {
+    const displayName = nameResolver?.(props.id, props.entityType, props.alias) ?? props.alias;
+    return (
+      <span data-mention-id={props.id} data-mention-type={props.entityType} data-mention-alias={props.alias}>
+        @{displayName}
+      </span>
+    );
+  };
+
   const Mention = React.memo(function Mention(props: MentionRenderProps) {
     const displayName = nameResolver?.(props.id, props.entityType, props.alias) ?? props.alias;
 
@@ -93,6 +112,14 @@ export const createMentionInlineContentSpec = (
           alias={props.inlineContent.props.alias}
         />
       ),
+      toExternalHTML: (props) => (
+        <MentionExternalHTML
+          id={props.inlineContent.props.id}
+          entityType={props.inlineContent.props.entityType}
+          alias={props.inlineContent.props.alias}
+        />
+      ),
+      parse: (element) => parseMentionElement(element),
     },
   );
 };

package/src/components/editors/__tests__/BlockNoteEditorMentionInlineContent.test.ts

@@ -0,0 +1,97 @@
+import { describe, it, expect } from "vitest";
+
+import { parseMentionElement } from "../BlockNoteEditorMentionInlineContent";
+
+describe("parseMentionElement", () => {
+  const makeSpan = (attrs: Record<string, string>): HTMLElement => {
+    const span = document.createElement("span");
+    Object.entries(attrs).forEach(([k, v]) => span.setAttribute(k, v));
+    return span;
+  };
+
+  it("returns the mention props when all three data attributes are present and non-empty", () => {
+    const el = makeSpan({
+      "data-mention-id": "id-1",
+      "data-mention-type": "type-x",
+      "data-mention-alias": "Alias One",
+    });
+
+    expect(parseMentionElement(el)).toEqual({
+      id: "id-1",
+      entityType: "type-x",
+      alias: "Alias One",
+    });
+  });
+
+  it("returns undefined when data-mention-id is missing", () => {
+    const el = makeSpan({
+      "data-mention-type": "type-x",
+      "data-mention-alias": "Alias One",
+    });
+
+    expect(parseMentionElement(el)).toBeUndefined();
+  });
+
+  it("returns undefined when data-mention-type is missing", () => {
+    const el = makeSpan({
+      "data-mention-id": "id-1",
+      "data-mention-alias": "Alias One",
+    });
+
+    expect(parseMentionElement(el)).toBeUndefined();
+  });
+
+  it("returns undefined when data-mention-alias is missing", () => {
+    const el = makeSpan({
+      "data-mention-id": "id-1",
+      "data-mention-type": "type-x",
+    });
+
+    expect(parseMentionElement(el)).toBeUndefined();
+  });
+
+  it("returns undefined when data-mention-id is an empty string", () => {
+    const el = makeSpan({
+      "data-mention-id": "",
+      "data-mention-type": "type-x",
+      "data-mention-alias": "Alias One",
+    });
+
+    expect(parseMentionElement(el)).toBeUndefined();
+  });
+
+  it("returns undefined when data-mention-type is an empty string", () => {
+    const el = makeSpan({
+      "data-mention-id": "id-1",
+      "data-mention-type": "",
+      "data-mention-alias": "Alias One",
+    });
+
+    expect(parseMentionElement(el)).toBeUndefined();
+  });
+
+  it("returns undefined when data-mention-alias is an empty string", () => {
+    const el = makeSpan({
+      "data-mention-id": "id-1",
+      "data-mention-type": "type-x",
+      "data-mention-alias": "",
+    });
+
+    expect(parseMentionElement(el)).toBeUndefined();
+  });
+
+  it("ignores unrelated data-* attributes", () => {
+    const el = makeSpan({
+      "data-mention-id": "id-1",
+      "data-mention-type": "type-x",
+      "data-mention-alias": "Alias One",
+      "data-foo": "bar",
+    });
+
+    expect(parseMentionElement(el)).toEqual({
+      id: "id-1",
+      entityType: "type-x",
+      alias: "Alias One",
+    });
+  });
+});

package/src/components/editors/index.ts

@@ -2,3 +2,4 @@ export * from "./BlockNoteEditorContainer";
 export * from "./BlockNoteEditorMentionHoverCard";
 export * from "./BlockNoteEditorMentionInlineContent";
 export * from "./BlockNoteEditorSuggestionMenuController";
+export type { BlockNoteAiConfig, BlockNoteEditorProps } from "./BlockNoteEditor";

package/src/components/forms/FormBlockNote.tsx

@@ -28,6 +28,7 @@ export function FormBlockNote({
   suggestionMenuComponent,
   mentionNameResolver,
   onWarmMentions,
+  aiConfig,
 }: {
   form: any;
   id: string;
@@ -56,6 +57,7 @@ export function FormBlockNote({
   suggestionMenuComponent?: React.FC<SuggestionMenuProps<DefaultReactSuggestionItem>>;
   mentionNameResolver?: MentionNameResolver;
   onWarmMentions?: (blocks: any[]) => void;
+  aiConfig?: import("../editors/BlockNoteEditor").BlockNoteAiConfig;
 }) {
   const initialContentRef = useRef<any>(null);
   const lastEditorContentRef = useRef<any>(undefined);
@@ -105,6 +107,8 @@ export function FormBlockNote({
               suggestionMenuComponent={suggestionMenuComponent}
               mentionNameResolver={mentionNameResolver}
               onWarmMentions={onWarmMentions}
+              aiConfig={aiConfig}
+              stretch={stretch}
               className={cn(stretch && "min-h-0 flex-1")}
             />
           );