@carlonicora/nextjs-jsonapi 6.9.0 → 6.10.1

package/dist/features/tokenusage/index.mjs

@@ -41,7 +41,7 @@ import {
   TooltipContent,
   TooltipTrigger,
   usePageUrlGenerator
-} from "../../chunk-Q4XLE3QO.mjs";
+} from "../../chunk-THZAK7S3.mjs";
 import "../../chunk-AWLTSKMM.mjs";
 import "../../chunk-PW42LRSL.mjs";
 import {

package/messages/en.json

@@ -782,7 +782,7 @@
       },
       "proration": {
         "net_due_today": "Net Due Today",
-        "next_invoice": "Next invoice on {date} for {amount}",
+        "next_invoice": "Charged today: {amount}",
         "title": "Proration Breakdown"
       },
       "subscription": {
@@ -859,6 +859,7 @@
           "amount_off": "{amount} off",
           "card_on_file": "{brand} ending in {last4}",
           "charge_now": "Amount to charge now:",
+          "credit_now": "Credit to your account:",
           "confirm_change": "Confirm Plan Change",
           "due_now": "Amount due now:",
           "interval_monthly": "monthly",
@@ -870,7 +871,8 @@
           "percent_off": "{value}% off",
           "processing": "Processing...",
           "promotion_code": "Promotion Code",
-          "proration_description": "Your next charge will be adjusted to account for the plan change.",
+          "proration_credit_description": "The unused time becomes account credit, used on your next invoices.",
+          "proration_description": "The difference is charged today on a new invoice.",
           "proration_summary": "Proration Summary",
           "selected_plan": "Selected Plan",
           "subscribe_now": "Subscribe Now",

package/messages/it.json

@@ -782,7 +782,7 @@
       },
       "proration": {
         "net_due_today": "Netto dovuto oggi",
-        "next_invoice": "Prossima fattura il {date} di {amount}",
+        "next_invoice": "Addebito oggi: {amount}",
         "title": "Dettaglio del conguaglio"
       },
       "subscription": {
@@ -859,6 +859,7 @@
           "amount_off": "{amount} di sconto",
           "card_on_file": "{brand} che termina con {last4}",
           "charge_now": "Importo da addebitare ora:",
+          "credit_now": "Credito sul tuo account:",
           "confirm_change": "Conferma il cambio di piano",
           "due_now": "Importo dovuto ora:",
           "interval_monthly": "mensile",
@@ -870,7 +871,8 @@
           "percent_off": "{value}% di sconto",
           "processing": "Elaborazione...",
           "promotion_code": "Codice promozionale",
-          "proration_description": "Il tuo prossimo addebito verrà adeguato per tenere conto del cambio di piano.",
+          "proration_credit_description": "Il tempo non usato diventa credito sul tuo account, usato nelle prossime fatture.",
+          "proration_description": "La differenza viene addebitata oggi con una nuova fattura.",
           "proration_summary": "Riepilogo del conguaglio",
           "selected_plan": "Piano selezionato",
           "subscribe_now": "Abbonati ora",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carlonicora/nextjs-jsonapi",
-  "version": "6.9.0",
+  "version": "6.10.1",
   "description": "Next.js JSON:API client with server/client support and caching",
   "author": "Carlo Nicora",
   "license": "GPL-3.0-or-later",

package/src/components/editors/BlockNoteEditor.tsx

@@ -106,8 +106,10 @@ export type BlockNoteEditorProps = {
   stretch?: boolean;
   // Gates AI on top of `aiConfig` (credit availability, etc.). Defaults to
   // true so existing callers that only pass `aiConfig` are unaffected. When
-  // false, no AI extension is created, the AI toolbar button and AI slash
-  // items are hidden, and the editor falls back to the plain slash menu.
+  // false, the AI toolbar button and AI slash items are hidden, the editor
+  // falls back to the plain slash menu, an open AI menu or run is closed, and
+  // no AI request is sent. The AI extension itself stays: toggling this never
+  // rebuilds the editor, so unsaved text survives credits running out.
   aiEnabled?: boolean;
   // Filled with a {@link BlockNoteAiHandle} while the editor is mounted and AI
   // is on, so a control outside the editor can run a whole-document AI action.
@@ -508,11 +510,22 @@ export default function BlockNoteEditor({
   // instance exists; reads the current BlockNote selection on every send.
   const selectionRef = useRef<{ getSelectedBlocks: () => any[] }>({ getSelectedBlocks: () => [] });
 
-  const companyId = company?.id;
+  // Callers pass `aiConfig` as an inline object, the company arrives after the
+  // first render and `aiEnabled` flips with credits, so none of them may key
+  // the AI extension: every new extension means a new editor, which restarts
+  // from `initialContent` and drops unsaved text. The transport and the outside
+  // handle read them through this ref at send time.
+  const aiRequestRef = useRef({ aiConfig, companyId: company?.id, aiEnabled });
+  useEffect(() => {
+    aiRequestRef.current = { aiConfig, companyId: company?.id, aiEnabled };
+  });
+
+  const hasAiConfig = !!aiConfig;
+  const aiEndpoint = aiConfig?.endpoint;
   const aiExtension = useMemo(() => {
-    if (!aiConfig || !aiEnabled) return undefined;
+    if (!hasAiConfig || !aiEndpoint) return undefined;
     const base = getPublicApiUrl();
-    const url = new URL(aiConfig.endpoint, base.endsWith("/") ? base : base + "/").toString();
+    const url = new URL(aiEndpoint, base.endsWith("/") ? base : base + "/").toString();
     return AIExtension({
       transport: new DefaultChatTransport({
         api: url,
@@ -521,10 +534,16 @@ export default function BlockNoteEditor({
           const headers: Record<string, string> = { "x-language": locale };
           const token = await getClientToken();
           if (token) headers["Authorization"] = `Bearer ${token}`;
+          const companyId = aiRequestRef.current.companyId;
           if (companyId) headers["x-companyid"] = companyId;
           return headers;
         },
         prepareSendMessagesRequest: ({ messages, body }: any) => {
+          // Last guard before the network: AI switched off while a request was
+          // being started never reaches the endpoint. Throwing here puts the
+          // AI menu in its error state instead of sending.
+          if (!aiRequestRef.current.aiEnabled) throw new Error("AI is disabled");
+          const latestAiConfig = aiRequestRef.current.aiConfig;
           let lastUserIdx = -1;
           for (let i = messages.length - 1; i >= 0; i--) {
             if (messages[i]?.role === "user") {
@@ -539,8 +558,8 @@ export default function BlockNoteEditor({
                   ...m,
                   metadata: {
                     ...(m.metadata ?? {}),
-                    entityType: aiConfig.entityType,
-                    entityId: aiConfig.entityId,
+                    entityType: latestAiConfig?.entityType,
+                    entityId: latestAiConfig?.entityId,
                     blocks: docRef.current.getDoc(),
                     selectionBlocks: selectedBlocks,
                   },
@@ -551,7 +570,7 @@ export default function BlockNoteEditor({
         },
       }),
     });
-  }, [aiConfig, aiEnabled, companyId, locale]);
+  }, [hasAiConfig, aiEndpoint, locale]);
 
   const uploadImage = useCallback(
     async (file: File): Promise<string> => {
@@ -697,8 +716,42 @@ export default function BlockNoteEditor({
       }),
       [placeholder, t, schema, validatedInitialContent, uploadImage, aiExtension, coreDictionary, aiDictionary],
     ),
+    // useCreateBlockNote memoises on THIS list, not on the options' identity
+    // (@blocknote/react: useMemo(() => BlockNoteEditor.create(options), deps),
+    // deps defaulting to []). Without it the editor keeps the extensions of its
+    // first render: AI config arriving later (user loaded after mount)
+    // rendered the AI UI over an editor with no AIExtension, and BlockNote's
+    // useExtension threw "Extension not found". The other options keep their
+    // first-render values, as before. `aiEnabled` is deliberately not here.
+    [aiExtension],
   );
 
+  // Every AI surface keys off the editor actually rendered, never off the
+  // props: those can disagree with the options that editor was created with.
+  // `aiEnabled` then hides that UI without touching the editor.
+  const hasAiExtension = !!editor.getExtension(AIExtension);
+  const aiActive = hasAiExtension && aiEnabled;
+
+  // AI switched off while its menu is open or a run is streaming: hiding the
+  // AIMenuController alone would leave the editor read-only (openAIMenuAtBlock
+  // sets isEditable = false) and the AI suggestions in the document. Stop the
+  // request, then reject the suggestions, or just close an idle prompt menu.
+  useEffect(() => {
+    if (aiEnabled || !hasAiExtension) return;
+    const ai = editor.getExtension(AIExtension);
+    if (!ai) return;
+    const dismiss = async () => {
+      const menu = ai.store.state.aiMenuState;
+      if (menu === "closed") return;
+      if (menu.status === "thinking" || menu.status === "ai-writing") await ai.abort("AI disabled");
+      const after = ai.store.state.aiMenuState;
+      if (after === "closed") return;
+      if (after.status === "user-input") ai.closeAIMenu();
+      else ai.rejectChanges();
+    };
+    dismiss().catch((error) => console.error("Closing the AI menu failed:", error));
+  }, [aiEnabled, hasAiExtension, editor]);
+
   // Publish the outside-the-editor AI trigger. `editor.getExtension(AIExtension)`
   // is BlockNote 0.54's documented lookup by extension factory (core's
   // `getExtension` resolves a function argument through `extensionFactories`),
@@ -709,12 +762,14 @@ export default function BlockNoteEditor({
   // the request runs but the accept / reject UI never appears.
   useEffect(() => {
     if (!aiHandleRef) return;
-    if (!aiConfig || !aiEnabled) {
+    if (!aiActive) {
       aiHandleRef.current = null;
       return;
     }
     aiHandleRef.current = {
       invokeAi: (type: BlockNoteAiGenerateAction) => {
+        // A caller may hold the handle across the render that turns AI off.
+        if (!aiRequestRef.current.aiEnabled) return;
         const ai = editor.getExtension(AIExtension);
         if (!ai) return;
         editor.focus();
@@ -731,7 +786,7 @@ export default function BlockNoteEditor({
     return () => {
       aiHandleRef.current = null;
     };
-  }, [aiHandleRef, aiConfig, aiEnabled, editor]);
+  }, [aiHandleRef, aiActive, editor]);
 
   // Tracks the hash of the document the editor itself just emitted via onChange.
   // The sync effect below uses it to skip replaceBlocks when the parent's
@@ -912,7 +967,7 @@ export default function BlockNoteEditor({
         onChange={handleChange}
         editable={onChange !== undefined}
         formattingToolbar={false}
-        slashMenu={!aiConfig || !aiEnabled}
+        slashMenu={!aiActive}
         // Follow the app theme: hardcoding "light" leaves dark (light-theme)
         // text on the dark card, which is nearly unreadable in dark mode.
         theme={resolvedTheme === "dark" ? "dark" : "light"}
@@ -939,7 +994,7 @@ export default function BlockNoteEditor({
           size === "sm" && "small",
         )}
       >
-        <BlockNoteEditorFormattingToolbar showAI={!!aiConfig && aiEnabled} />
+        <BlockNoteEditorFormattingToolbar showAI={aiActive} />
         {enableMentions && mentionSearchFn && (
           <BlockNoteEditorMentionSuggestionMenu
             editor={editor}
@@ -952,7 +1007,7 @@ export default function BlockNoteEditor({
         {enableMentions && mentionResolveFn && (
           <BlockNoteEditorMentionHoverCard containerRef={editorRef} mentionResolveFn={mentionResolveFn} />
         )}
-        {aiConfig && aiEnabled && (
+        {aiActive && (
           <SuggestionMenuController
             triggerCharacter="/"
             getItems={async (query: string) =>
@@ -960,7 +1015,7 @@ export default function BlockNoteEditor({
             }
           />
         )}
-        {aiConfig && aiEnabled && <AIMenuController aiMenu={() => <NarrAIMenu actions={aiConfig.actions} />} />}
+        {aiActive && <AIMenuController aiMenu={() => <NarrAIMenu actions={aiConfig?.actions} />} />}
       </BlockNoteView>
     </div>
   );

package/src/components/editors/__tests__/BlockNoteEditor.ai.spec.tsx

@@ -0,0 +1,295 @@
+import { render, screen } from "@testing-library/react";
+import React from "react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+/**
+ * The AI menu, AI toolbar button and AI slash items call BlockNote's
+ * useExtension(AIExtension), which throws "Extension not found" when the
+ * editor in context was created without the extension. These stubs keep that
+ * contract: useCreateBlockNote memoises on its deps exactly like
+ * @blocknote/react 0.55 (useMemo(() => BlockNoteEditor.create(options), deps)),
+ * and the AI controllers throw the same error BlockNote throws.
+ */
+const h = vi.hoisted(() => {
+  const AIExtension = vi.fn((options: unknown) => ({ aiFactory: true, options }));
+  return {
+    AIExtension,
+    editorsCreated: 0,
+    company: undefined as { id: string } | undefined,
+    // The last editor useCreateBlockNote built, and its AI extension instance.
+    editor: undefined as any,
+    ai: undefined as any,
+    // Config the editor handed to DefaultChatTransport (the AI request path).
+    transportConfig: undefined as any,
+  };
+});
+
+vi.mock("next-intl", () => ({ useTranslations: () => (key: string) => key }));
+vi.mock("next-themes", () => ({ useTheme: () => ({ resolvedTheme: "light" }) }));
+vi.mock("../../../i18n/config", () => ({ useI18nLocale: () => "en" }));
+vi.mock("../../../client/config", () => ({ getPublicApiUrl: () => "http://api.test/" }));
+vi.mock("../../../client/token", () => ({ getClientToken: async () => "token" }));
+vi.mock("../../../contexts", () => ({
+  useCurrentUserContextOptional: () => (h.company ? { company: h.company } : undefined),
+}));
+
+vi.mock("@blocknote/react", async () => {
+  const React = await import("react");
+  const EditorContext = React.createContext<any>(null);
+  const useBlockNoteEditor = () => React.useContext(EditorContext);
+  const requireAI = (editor: any) => {
+    if (!editor?.getExtension(h.AIExtension)) throw new Error("Extension not found");
+  };
+  return {
+    EditorContext,
+    createReactInlineContentSpec: (config: unknown) => ({ config }),
+    getDefaultReactSlashMenuItems: () => [],
+    SuggestionMenuController: () => null,
+    useBlockNoteEditor,
+    useExtension: () => {
+      const editor = useBlockNoteEditor();
+      requireAI(editor);
+      return editor.getExtension(h.AIExtension);
+    },
+    useExtensionState: () => "closed",
+    useCreateBlockNote: (options: any, deps: React.DependencyList = []) =>
+      React.useMemo(() => {
+        h.editorsCreated += 1;
+        const extensions: any[] = options?.extensions ?? [];
+        // Mirrors xl-ai 0.55: a store holding aiMenuState, and the calls that
+        // move it back to "closed".
+        const store = { state: { aiMenuState: "closed" as any } };
+        const ai = {
+          store,
+          invokeAI: vi.fn(),
+          openAIMenuAtBlock: vi.fn((blockId: string) => {
+            store.state.aiMenuState = { blockId, status: "user-input" };
+          }),
+          abort: vi.fn(async () => {
+            const menu = store.state.aiMenuState;
+            if (menu !== "closed") store.state.aiMenuState = { ...menu, status: "user-reviewing" };
+          }),
+          closeAIMenu: vi.fn(() => {
+            store.state.aiMenuState = "closed";
+          }),
+          rejectChanges: vi.fn(() => {
+            store.state.aiMenuState = "closed";
+          }),
+        };
+        const hasAI = extensions.some((e) => e?.aiFactory);
+        const editor = {
+          document: [] as any[],
+          focus: () => undefined,
+          getSelection: () => undefined,
+          getExtension: (factory: unknown) => (factory === h.AIExtension && hasAI ? ai : undefined),
+        };
+        h.editor = editor;
+        h.ai = hasAI ? ai : undefined;
+        return editor;
+      }, deps),
+    BasicTextStyleButton: () => null,
+    BlockTypeSelect: () => null,
+    CreateLinkButton: () => null,
+    FileCaptionButton: () => null,
+    FileReplaceButton: () => null,
+    TextAlignButton: () => null,
+    FormattingToolbar: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+    FormattingToolbarController: ({ formattingToolbar }: { formattingToolbar: () => React.ReactNode }) => (
+      <>{formattingToolbar()}</>
+    ),
+    // Shared with the xl-ai stubs below.
+    __requireAI: requireAI,
+  };
+});
+
+vi.mock("@blocknote/shadcn", async () => {
+  const { EditorContext } = (await import("@blocknote/react")) as any;
+  return {
+    BlockNoteView: ({ editor, children }: { editor: unknown; children: React.ReactNode }) => (
+      <EditorContext.Provider value={editor}>{children}</EditorContext.Provider>
+    ),
+  };
+});
+
+vi.mock("@blocknote/xl-ai", async () => {
+  const { useBlockNoteEditor, __requireAI } = (await import("@blocknote/react")) as any;
+  return {
+    AIExtension: h.AIExtension,
+    AIMenuController: () => {
+      __requireAI(useBlockNoteEditor());
+      return <div data-testid="ai-menu" />;
+    },
+    AIToolbarButton: () => {
+      __requireAI(useBlockNoteEditor());
+      return <div data-testid="ai-toolbar-button" />;
+    },
+    getAISlashMenuItems: () => [],
+    getDefaultAIMenuItems: () => [],
+    PromptSuggestionMenu: () => null,
+    useAIDictionary: () => ({}),
+  };
+});
+
+vi.mock("ai", () => ({
+  DefaultChatTransport: function (this: any, config: unknown) {
+    h.transportConfig = config;
+  },
+}));
+vi.mock("@blocknote/core", () => ({
+  BlockNoteSchema: { create: (config: unknown) => ({ config }) },
+  defaultInlineContentSpecs: {},
+  filterSuggestionItems: (items: unknown[]) => items,
+}));
+vi.mock("@blocknote/core/locales", () => ({ en: { core: "en" } }));
+vi.mock("@blocknote/xl-ai/locales", () => ({ en: { ai: "en" } }));
+vi.mock("@blocknote/shadcn/style.css", () => ({}));
+vi.mock("@blocknote/xl-ai/style.css", () => ({}));
+vi.mock("../BlockNoteEditorMentionInlineContent", () => ({ createMentionInlineContentSpec: () => ({}) }));
+
+import BlockNoteEditor, { type BlockNoteAiHandle } from "../BlockNoteEditor";
+
+const onChange = vi.fn();
+
+// Callers write aiConfig inline, so every parent render passes a new object.
+const renderEditor = (
+  aiEnabled: boolean,
+  opts: { withConfig?: boolean; aiHandleRef?: React.MutableRefObject<BlockNoteAiHandle | null> } = {},
+) => (
+  <BlockNoteEditor
+    id="npc-1"
+    type="npcs"
+    onChange={onChange}
+    aiEnabled={aiEnabled}
+    aiHandleRef={opts.aiHandleRef}
+    aiConfig={
+      opts.withConfig === false
+        ? undefined
+        : { endpoint: "text-generation/blocknote", entityType: "npcs", actions: ["fill-template"] }
+    }
+  />
+);
+
+const flush = () => new Promise((resolve) => setTimeout(resolve, 0));
+
+describe("BlockNoteEditor AI wiring", () => {
+  beforeEach(() => {
+    h.AIExtension.mockClear();
+    h.editorsCreated = 0;
+    h.company = { id: "company-1" };
+  });
+
+  it("does not rebuild the AI extension or the editor when a new but equal aiConfig object arrives", () => {
+    const { rerender } = render(renderEditor(true));
+    rerender(renderEditor(true));
+    rerender(renderEditor(true));
+
+    expect(h.AIExtension).toHaveBeenCalledTimes(1);
+    expect(h.editorsCreated).toBe(1);
+    expect(screen.getByTestId("ai-menu")).toBeInTheDocument();
+  });
+
+  it("does not rebuild the AI extension when only the company loads", () => {
+    h.company = undefined;
+    const { rerender } = render(renderEditor(true));
+    h.company = { id: "company-1" };
+    rerender(renderEditor(true));
+
+    expect(h.AIExtension).toHaveBeenCalledTimes(1);
+    expect(h.editorsCreated).toBe(1);
+  });
+
+  it("renders no AI UI while the editor has no AI config", () => {
+    render(renderEditor(true, { withConfig: false }));
+
+    expect(h.AIExtension).not.toHaveBeenCalled();
+    expect(screen.queryByTestId("ai-menu")).not.toBeInTheDocument();
+  });
+
+  it("builds the AI extension but renders no AI UI while AI is disabled", () => {
+    render(renderEditor(false));
+
+    expect(h.AIExtension).toHaveBeenCalledTimes(1);
+    expect(screen.queryByTestId("ai-menu")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("ai-toolbar-button")).not.toBeInTheDocument();
+  });
+
+  it("does not crash when the AI config arrives after mount, and then shows the AI menu", () => {
+    h.company = undefined;
+    const { rerender } = render(renderEditor(true, { withConfig: false }));
+    expect(screen.queryByTestId("ai-menu")).not.toBeInTheDocument();
+
+    h.company = { id: "company-1" };
+    expect(() => rerender(renderEditor(true))).not.toThrow();
+    expect(screen.getByTestId("ai-menu")).toBeInTheDocument();
+    expect(h.AIExtension).toHaveBeenCalledTimes(1);
+    expect(h.editorsCreated).toBe(2);
+  });
+
+  it("never rebuilds the editor when aiEnabled toggles, keeps typed content, and hides/shows the AI UI", () => {
+    const { rerender } = render(renderEditor(true));
+    const editor = h.editor;
+    expect(screen.getByTestId("ai-menu")).toBeInTheDocument();
+
+    // Text typed before credits run out.
+    editor.document.push({ type: "paragraph", content: "unsaved draft" });
+
+    rerender(renderEditor(false));
+    expect(screen.queryByTestId("ai-menu")).not.toBeInTheDocument();
+
+    rerender(renderEditor(true));
+    expect(screen.getByTestId("ai-menu")).toBeInTheDocument();
+
+    expect(h.editorsCreated).toBe(1);
+    expect(h.AIExtension).toHaveBeenCalledTimes(1);
+    expect(h.editor).toBe(editor);
+    expect(h.editor.document).toEqual([{ type: "paragraph", content: "unsaved draft" }]);
+  });
+
+  it("closes an open AI prompt menu without throwing when AI turns off", async () => {
+    const { rerender } = render(renderEditor(true));
+    const ai = h.ai;
+    ai.openAIMenuAtBlock("block-1");
+
+    expect(() => rerender(renderEditor(false))).not.toThrow();
+    await flush();
+
+    expect(ai.closeAIMenu).toHaveBeenCalledTimes(1);
+    expect(ai.rejectChanges).not.toHaveBeenCalled();
+    expect(ai.store.state.aiMenuState).toBe("closed");
+  });
+
+  it("aborts a running AI request and rejects its changes when AI turns off", async () => {
+    const { rerender } = render(renderEditor(true));
+    const ai = h.ai;
+    ai.store.state.aiMenuState = { blockId: "block-1", status: "ai-writing" };
+
+    expect(() => rerender(renderEditor(false))).not.toThrow();
+    await flush();
+
+    expect(ai.abort).toHaveBeenCalledTimes(1);
+    expect(ai.rejectChanges).toHaveBeenCalledTimes(1);
+    expect(ai.store.state.aiMenuState).toBe("closed");
+  });
+
+  it("sends no AI request while AI is disabled", () => {
+    const aiHandleRef: React.MutableRefObject<BlockNoteAiHandle | null> = { current: null };
+    const { rerender } = render(renderEditor(true, { aiHandleRef }));
+    const heldHandle = aiHandleRef.current;
+    expect(heldHandle).not.toBeNull();
+
+    rerender(renderEditor(false, { aiHandleRef }));
+    expect(aiHandleRef.current).toBeNull();
+
+    // A handle kept across the toggle does nothing.
+    heldHandle!.invokeAi("fill-template");
+    expect(h.ai.invokeAI).not.toHaveBeenCalled();
+
+    // The transport refuses to build a request.
+    const prepare = h.transportConfig.prepareSendMessagesRequest;
+    expect(() => prepare({ messages: [{ role: "user", parts: [] }], body: {} })).toThrow("AI is disabled");
+
+    rerender(renderEditor(true, { aiHandleRef }));
+    const prepared = prepare({ messages: [{ role: "user", parts: [] }], body: {} });
+    expect(prepared.body.messages[0].metadata.entityType).toBe("npcs");
+  });
+});

package/src/features/assistant/components/containers/AssistantPageContainer.tsx

@@ -37,6 +37,12 @@ interface Props {
    * disable, never replacing it.
    */
   disabled?: boolean;
+  /**
+   * Rendered in place of the composer: the threads stay readable and no
+   * message can be sent — the suggested questions render disabled too (e.g.
+   * the consuming app's plan gate). Omitted, the composer renders as before.
+   */
+  composerNotice?: React.ReactNode;
 }
 
 /**
@@ -54,6 +60,7 @@ export function AssistantPageContainer({
   detailsTitle,
   detailsIcon,
   disabled,
+  composerNotice,
 }: Props) {
   const t = useTranslations();
   const ctx = useAssistantContext();
@@ -98,7 +105,7 @@ export function AssistantPageContainer({
               messages={ctx.messages}
               sending={ctx.sending}
               status={ctx.status}
-              onSelectFollowUp={ctx.sendMessage}
+              onSelectFollowUp={composerNotice ? undefined : ctx.sendMessage}
               failedMessageIds={ctx.failedMessageIds}
               onRetry={ctx.retrySend}
               renderApprovalAction={renderApprovalAction}
@@ -116,14 +123,18 @@ export function AssistantPageContainer({
             </div>
           </div>
         )}
-        <AssistantBlockNoteComposer
-          onSend={(content, opts) => ctx.sendMessage(content, { contentBlocks: opts.contentBlocks })}
-          disabled={ctx.sending || disabled}
-          mentionSearchFn={mentionSearchFn}
-          mentionSearchParams={mentionSearchParams}
-          mentionResolveFn={mentionResolveFn}
-          suggestionMenuComponent={suggestionMenuComponent}
-        />
+        {composerNotice ? (
+          <div className="border-t p-4">{composerNotice}</div>
+        ) : (
+          <AssistantBlockNoteComposer
+            onSend={(content, opts) => ctx.sendMessage(content, { contentBlocks: opts.contentBlocks })}
+            disabled={ctx.sending || disabled}
+            mentionSearchFn={mentionSearchFn}
+            mentionSearchParams={mentionSearchParams}
+            mentionResolveFn={mentionResolveFn}
+            suggestionMenuComponent={suggestionMenuComponent}
+          />
+        )}
       </div>
     </RoundPageContainer>
   );