@assistant-ui/react 0.15.26 → 0.15.28

package/src/mcp-apps/bridge.test.ts

@@ -197,6 +197,160 @@ describe("createMcpAppBridge", () => {
     bridge.dispose();
   });
 
+  it("passes view initialization metadata to onInitialized", () => {
+    const { frame } = makeFrame();
+    const onInitialized = vi.fn();
+    const bridge = createMcpAppBridge({ frame, handlers: { onInitialized } });
+    const params = {
+      protocolVersion: "2026-01-26",
+      appInfo: { name: "example-app", version: "1.2.3" },
+      appCapabilities: {
+        availableDisplayModes: ["inline", "fullscreen"],
+        tools: { listChanged: true },
+      },
+    };
+
+    deliver(bridge, {
+      jsonrpc: "2.0",
+      id: 1,
+      method: "ui/initialize",
+      params,
+    });
+    expect(onInitialized).not.toHaveBeenCalled();
+    deliver(bridge, {
+      jsonrpc: "2.0",
+      method: "notifications/initialized",
+    });
+
+    expect(onInitialized).toHaveBeenCalledOnce();
+    expect(onInitialized).toHaveBeenCalledWith(params);
+    bridge.dispose();
+  });
+
+  it("omits malformed initialization fields and keeps the protocol fallback", async () => {
+    const { frame, captured } = makeFrame();
+    const onInitialized = vi.fn();
+    const bridge = createMcpAppBridge({ frame, handlers: { onInitialized } });
+
+    deliver(bridge, {
+      jsonrpc: "2.0",
+      id: 1,
+      method: "ui/initialize",
+      params: {
+        protocolVersion: 1,
+        appInfo: { name: "malformed" },
+        appCapabilities: { availableDisplayModes: "fullscreen" },
+      },
+    });
+    deliver(bridge, {
+      jsonrpc: "2.0",
+      method: "notifications/initialized",
+    });
+    await flush();
+
+    expect(onInitialized).toHaveBeenCalledOnce();
+    expect(onInitialized).toHaveBeenCalledWith({
+      appCapabilities: {},
+    });
+    expect((captured[0] as McpAppJsonRpcResponse).result).toMatchObject({
+      protocolVersion: MCP_APP_PROTOCOL_VERSION,
+    });
+    bridge.dispose();
+  });
+
+  it("keeps only the display modes the host recognizes", () => {
+    const { frame } = makeFrame();
+    const onInitialized = vi.fn();
+    const bridge = createMcpAppBridge({ frame, handlers: { onInitialized } });
+
+    deliver(bridge, {
+      jsonrpc: "2.0",
+      id: 1,
+      method: "ui/initialize",
+      params: {
+        appCapabilities: { availableDisplayModes: ["inline", "sidebar"] },
+      },
+    });
+    deliver(bridge, {
+      jsonrpc: "2.0",
+      method: "notifications/initialized",
+    });
+
+    expect(onInitialized).toHaveBeenCalledWith({
+      appCapabilities: { availableDisplayModes: ["inline"] },
+    });
+    bridge.dispose();
+  });
+
+  it("reads a sparse display mode list without walking its length", () => {
+    const { frame } = makeFrame();
+    const onInitialized = vi.fn();
+    const bridge = createMcpAppBridge({ frame, handlers: { onInitialized } });
+    const availableDisplayModes = ["inline"];
+    availableDisplayModes.length = 2 ** 32 - 1;
+
+    deliver(bridge, {
+      jsonrpc: "2.0",
+      id: 1,
+      method: "ui/initialize",
+      params: { appCapabilities: { availableDisplayModes } },
+    });
+    deliver(bridge, {
+      jsonrpc: "2.0",
+      method: "notifications/initialized",
+    });
+
+    expect(onInitialized).toHaveBeenCalledWith({
+      appCapabilities: { availableDisplayModes: ["inline"] },
+    });
+    bridge.dispose();
+  });
+
+  it("initializes when the display mode list carries its own methods", async () => {
+    const { frame, captured } = makeFrame();
+    const onInitialized = vi.fn();
+    const bridge = createMcpAppBridge({ frame, handlers: { onInitialized } });
+
+    deliver(bridge, {
+      jsonrpc: "2.0",
+      id: 1,
+      method: "ui/initialize",
+      params: {
+        appCapabilities: {
+          availableDisplayModes: Object.assign(["inline", "pip"], {
+            filter: 0,
+            constructor: 0,
+          }),
+        },
+      },
+    });
+    deliver(bridge, {
+      jsonrpc: "2.0",
+      method: "notifications/initialized",
+    });
+    await flush();
+
+    expect((captured[0] as McpAppJsonRpcResponse).error).toBeUndefined();
+    expect(onInitialized).toHaveBeenCalledWith({
+      appCapabilities: { availableDisplayModes: ["inline", "pip"] },
+    });
+    bridge.dispose();
+  });
+
+  it("calls onInitialized with empty params when ui/initialize never arrived", () => {
+    const { frame } = makeFrame();
+    const onInitialized = vi.fn();
+    const bridge = createMcpAppBridge({ frame, handlers: { onInitialized } });
+
+    deliver(bridge, {
+      jsonrpc: "2.0",
+      method: "notifications/initialized",
+    });
+
+    expect(onInitialized).toHaveBeenCalledWith({});
+    bridge.dispose();
+  });
+
   it("routes tools/call to handler", async () => {
     const { frame, captured } = makeFrame();
     const callTool = vi.fn().mockResolvedValue({ ok: true });

package/src/mcp-apps/bridge.ts

@@ -6,6 +6,7 @@ import {
   type McpAppDisplayMode,
   type McpAppHostContext,
   type McpAppHostInfo,
+  type McpAppInitializeParams,
   type McpAppJsonRpcMessage,
   type McpAppJsonRpcNotification,
   type McpAppJsonRpcRequest,
@@ -19,6 +20,50 @@ const VALID_DISPLAY_MODES = [
   "pip",
 ] as const satisfies readonly McpAppDisplayMode[];
 
+function isMcpAppDisplayMode(value: unknown): value is McpAppDisplayMode {
+  return VALID_DISPLAY_MODES.some((mode) => mode === value);
+}
+
+function isAppInfo(
+  value: unknown,
+): value is NonNullable<McpAppInitializeParams["appInfo"]> {
+  return (
+    isRecord(value) &&
+    typeof value.name === "string" &&
+    typeof value.version === "string"
+  );
+}
+
+function getAppCapabilities(
+  value: unknown,
+): McpAppInitializeParams["appCapabilities"] {
+  if (!isRecord(value)) return undefined;
+  const { availableDisplayModes, ...rest } = value;
+  return {
+    ...rest,
+    // Object.values reads only the entries present, so a sparse list claiming a huge length stays cheap, and the list's own methods are never called.
+    ...(Array.isArray(availableDisplayModes)
+      ? {
+          availableDisplayModes: Object.values(availableDisplayModes).filter(
+            isMcpAppDisplayMode,
+          ),
+        }
+      : {}),
+  };
+}
+
+function getInitializeParams(params: unknown): McpAppInitializeParams {
+  if (!isRecord(params)) return {};
+  const appCapabilities = getAppCapabilities(params.appCapabilities);
+  return {
+    ...(isAppInfo(params.appInfo) ? { appInfo: params.appInfo } : {}),
+    ...(appCapabilities ? { appCapabilities } : {}),
+    ...(typeof params.protocolVersion === "string"
+      ? { protocolVersion: params.protocolVersion }
+      : {}),
+  };
+}
+
 export type McpAppBridgeFrame = SandboxHostFrame;
 
 export type CreateMcpAppBridgeOptions = {
@@ -91,6 +136,7 @@ export function createMcpAppBridge(
     hostContext = {},
   } = opts;
   let disposed = false;
+  let initializeParams: McpAppInitializeParams = {};
 
   const post = (msg: McpAppJsonRpcMessage) => {
     if (disposed) return;
@@ -142,10 +188,9 @@ export function createMcpAppBridge(
 
       switch (normalizeMethod(req.method)) {
         case "ui/initialize": {
+          initializeParams = getInitializeParams(params);
           const requestedProtocolVersion =
-            isRecord(params) && typeof params.protocolVersion === "string"
-              ? params.protocolVersion
-              : MCP_APP_PROTOCOL_VERSION;
+            initializeParams.protocolVersion ?? MCP_APP_PROTOCOL_VERSION;
           respond(req.id, {
             result: {
               protocolVersion: requestedProtocolVersion,
@@ -360,10 +405,7 @@ export function createMcpAppBridge(
             return;
           }
           const modeParams = (params ?? {}) as { mode?: unknown };
-          if (
-            typeof modeParams.mode !== "string" ||
-            !VALID_DISPLAY_MODES.includes(modeParams.mode as McpAppDisplayMode)
-          ) {
+          if (!isMcpAppDisplayMode(modeParams.mode)) {
             errorResponse(
               req.id,
               JSONRPC_ERROR.invalidParams,
@@ -373,7 +415,7 @@ export function createMcpAppBridge(
           }
           respond(req.id, {
             result: await handlers.requestDisplayMode({
-              mode: modeParams.mode as McpAppDisplayMode,
+              mode: modeParams.mode,
             }),
           });
           return;
@@ -398,7 +440,7 @@ export function createMcpAppBridge(
     try {
       switch (normalizeMethod(note.method)) {
         case "notifications/initialized": {
-          handlers.onInitialized?.();
+          handlers.onInitialized?.(initializeParams);
           return;
         }
         case "notifications/size_changed": {

package/src/mcp-apps/index.ts

@@ -17,6 +17,7 @@ export type {
   McpAppsHost,
   McpAppsRemoteHostOptions,
   McpAppToolCallParams,
+  McpAppInitializeParams,
   McpAppBridgeHandlers,
   ToolCallMessagePartMcpMetadata,
 } from "./types";

package/src/mcp-apps/types.ts

@@ -87,6 +87,20 @@ export type McpAppToolCallParams = {
   arguments?: Record<string, unknown>;
 };
 
+/**
+ * The params of the app's `ui/initialize` request, as `onInitialized`
+ * receives them. A field that fails validation is omitted, and
+ * `availableDisplayModes` keeps only the modes the bridge recognizes.
+ */
+export type McpAppInitializeParams = {
+  appInfo?: { name: string; version: string; [k: string]: unknown };
+  appCapabilities?: {
+    availableDisplayModes?: McpAppDisplayMode[];
+    [k: string]: unknown;
+  };
+  protocolVersion?: string;
+};
+
 export type McpAppBridgeHandlers = {
   allowedTools?: readonly string[];
   callTool?: (params: McpAppToolCallParams) => Promise<unknown> | unknown;
@@ -99,7 +113,7 @@ export type McpAppBridgeHandlers = {
     mode: McpAppDisplayMode;
   }) => Promise<{ mode: McpAppDisplayMode }> | { mode: McpAppDisplayMode };
   onSizeChange?: (params: { width?: number; height?: number }) => void;
-  onInitialized?: () => void;
+  onInitialized?: (params: McpAppInitializeParams) => void;
   onRequestTeardown?: (params: unknown) => void;
   onLog?: (params: unknown) => void;
   onError?: (error: Error) => void;

package/src/primitives/composer/ComposerAttachmentDropzone.test.tsx

@@ -6,9 +6,10 @@ import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { ComposerPrimitiveAttachmentDropzone } from "./ComposerAttachmentDropzone";
 
-const { addAttachment, threadCapabilities } = vi.hoisted(() => ({
+const { addAttachment, threadCapabilities, threadState } = vi.hoisted(() => ({
   addAttachment: vi.fn<(file: File) => Promise<void>>(),
   threadCapabilities: { attachments: true },
+  threadState: { isDisabled: false },
 }));
 
 (globalThis as Record<string, unknown>).IS_REACT_ACT_ENVIRONMENT = true;
@@ -25,6 +26,9 @@ vi.mock("@assistant-ui/store", async (importOriginal) => {
         getState: () => ({ capabilities: threadCapabilities }),
       },
     }),
+    useAuiState: (
+      selector: (state: { thread: typeof threadState }) => unknown,
+    ) => selector({ thread: threadState }),
   };
 });
 
@@ -53,6 +57,7 @@ describe("ComposerPrimitiveAttachmentDropzone", () => {
   beforeEach(async () => {
     addAttachment.mockReset();
     threadCapabilities.attachments = true;
+    threadState.isDisabled = false;
     container = document.createElement("div");
     document.body.appendChild(container);
     root = createRoot(container);
@@ -250,6 +255,32 @@ describe("ComposerPrimitiveAttachmentDropzone", () => {
     expect(dropzone.hasAttribute("data-dragging")).toBe(false);
   });
 
+  it("blocks file drops when the thread is disabled", async () => {
+    threadState.isDisabled = true;
+    await act(async () => {
+      root.render(
+        <ComposerPrimitiveAttachmentDropzone data-testid="dropzone">
+          <div>dropzone</div>
+        </ComposerPrimitiveAttachmentDropzone>,
+      );
+    });
+    const dropzone = container.querySelector("[data-testid='dropzone']")!;
+    const over = createDragEvent("dragover", ["Files"]);
+    const drop = createDropEvent([
+      new File(["file"], "photo.png", { type: "image/png" }),
+    ]);
+
+    await act(async () => {
+      dropzone.dispatchEvent(over);
+      dropzone.dispatchEvent(drop);
+    });
+
+    expect(over.defaultPrevented).toBe(true);
+    expect(drop.defaultPrevented).toBe(true);
+    expect(addAttachment).not.toHaveBeenCalled();
+    expect(dropzone.hasAttribute("data-dragging")).toBe(false);
+  });
+
   it("ignores non-file drags", async () => {
     const dropzone = container.querySelector("[data-testid='dropzone']");
     expect(dropzone).not.toBeNull();

package/src/primitives/composer/ComposerAttachmentDropzone.tsx

@@ -12,7 +12,7 @@ import {
 import { composeEventHandlers } from "radix-ui/internal";
 import { Slot } from "radix-ui";
 import type React from "react";
-import { useAui } from "@assistant-ui/store";
+import { useAui, useAuiState } from "@assistant-ui/store";
 import { renderSlot } from "../../utils/Primitive";
 
 export namespace ComposerPrimitiveAttachmentDropzone {
@@ -30,13 +30,15 @@ export const ComposerPrimitiveAttachmentDropzone = forwardRef<
 >(({ disabled, asChild = false, render, children, ...rest }, ref) => {
   const [isDragging, setIsDragging] = useState(false);
   const aui = useAui();
+  const disabledByThread = useAuiState((s) => s.thread.isDisabled);
+  const isDisabled = disabled || disabledByThread;
 
   useEffect(() => {
-    if (!disabled) return;
+    if (!isDisabled) return;
     // Disabled handlers cannot clear the latch, so reset it when the enabled period ends.
     // eslint-disable-next-line react-hooks/set-state-in-effect
     setIsDragging(false);
-  }, [disabled]);
+  }, [isDisabled]);
 
   // An unprevented file drop navigates the tab to the file, so file drags are
   // claimed via preventDefault even when the runtime does not support attachments.
@@ -44,31 +46,31 @@ export const ComposerPrimitiveAttachmentDropzone = forwardRef<
     (e: React.DragEvent) => {
       if (!e.dataTransfer.types.includes("Files")) return;
       e.preventDefault();
-      if (disabled || !aui.thread.getState().capabilities.attachments) {
+      if (isDisabled || !aui.thread.getState().capabilities.attachments) {
         e.dataTransfer.dropEffect = "none";
         return;
       }
       setIsDragging(true);
     },
-    [disabled, aui],
+    [isDisabled, aui],
   );
 
   const handleDragOverCapture = useCallback(
     (e: React.DragEvent) => {
       if (!e.dataTransfer.types.includes("Files")) return;
       e.preventDefault();
-      if (disabled || !aui.thread.getState().capabilities.attachments) {
+      if (isDisabled || !aui.thread.getState().capabilities.attachments) {
         e.dataTransfer.dropEffect = "none";
         return;
       }
       if (!isDragging) setIsDragging(true);
     },
-    [disabled, isDragging, aui],
+    [isDisabled, isDragging, aui],
   );
 
   const handleDragLeaveCapture = useCallback(
     (e: React.DragEvent) => {
-      if (disabled) return;
+      if (isDisabled) return;
       e.preventDefault();
       const next = e.relatedTarget as Node | null;
       if (next && e.currentTarget.contains(next)) {
@@ -76,7 +78,7 @@ export const ComposerPrimitiveAttachmentDropzone = forwardRef<
       }
       setIsDragging(false);
     },
-    [disabled],
+    [isDisabled],
   );
 
   const handleDrop = useCallback(
@@ -84,7 +86,7 @@ export const ComposerPrimitiveAttachmentDropzone = forwardRef<
       setIsDragging(false);
       if (!e.dataTransfer.types.includes("Files")) return;
       e.preventDefault();
-      if (disabled) return;
+      if (isDisabled) return;
       const files = Array.from(e.dataTransfer.files);
       if (!aui.thread.getState().capabilities.attachments || files.length === 0)
         return;
@@ -99,11 +101,11 @@ export const ComposerPrimitiveAttachmentDropzone = forwardRef<
         }),
       );
     },
-    [disabled, aui],
+    [isDisabled, aui],
   );
 
   const mergedProps = {
-    ...(isDragging && !disabled ? { "data-dragging": "true" } : null),
+    ...(isDragging && !isDisabled ? { "data-dragging": "true" } : null),
     ...rest,
     onDragEnterCapture: composeEventHandlers(
       rest.onDragEnterCapture,

package/src/primitives/composer/ComposerDisabledThread.test.tsx

@@ -0,0 +1,121 @@
+/** @vitest-environment jsdom */
+import {
+  act,
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+} from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+  AssistantRuntimeProvider,
+  useExternalStoreRuntime,
+} from "@assistant-ui/core/react";
+import type { AttachmentAdapter, ThreadMessage } from "@assistant-ui/core";
+import { ComposerPrimitiveAddAttachment } from "./ComposerAddAttachment";
+import { ComposerPrimitiveInput } from "./ComposerInput";
+import { ComposerPrimitiveRoot } from "./ComposerRoot";
+import { ComposerPrimitiveSend } from "./ComposerSend";
+import { ThreadPrimitiveViewportProvider } from "../../context/providers/ThreadViewportProvider";
+
+const makeAttachmentAdapter = () => {
+  const add = vi.fn(async ({ file }: { file: File }) => ({
+    id: file.name,
+    type: "file" as const,
+    name: file.name,
+    contentType: file.type,
+    file,
+    status: {
+      type: "requires-action" as const,
+      reason: "composer-send" as const,
+    },
+  }));
+  const adapter: AttachmentAdapter = {
+    accept: "*",
+    add,
+    remove: async () => {},
+    send: async (attachment) => ({
+      ...attachment,
+      status: { type: "complete" },
+      content: [{ type: "text", text: "file body" }],
+    }),
+  };
+  return { adapter, add };
+};
+
+const App = ({
+  isDisabled,
+  onNew,
+  attachments,
+}: {
+  isDisabled: boolean;
+  onNew: () => Promise<void>;
+  attachments: AttachmentAdapter;
+}) => {
+  const runtime = useExternalStoreRuntime<ThreadMessage>({
+    messages: [],
+    isDisabled,
+    onNew,
+    adapters: { attachments },
+  });
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      <ThreadPrimitiveViewportProvider>
+        <ComposerPrimitiveRoot>
+          <ComposerPrimitiveInput aria-label="input" />
+          <ComposerPrimitiveAddAttachment>
+            attach
+          </ComposerPrimitiveAddAttachment>
+          <ComposerPrimitiveSend>send</ComposerPrimitiveSend>
+        </ComposerPrimitiveRoot>
+      </ThreadPrimitiveViewportProvider>
+    </AssistantRuntimeProvider>
+  );
+};
+
+const button = (name: string) =>
+  screen.getByRole("button", { name }) as HTMLButtonElement;
+
+const settle = () =>
+  act(async () => {
+    await new Promise((resolve) => setTimeout(resolve, 0));
+  });
+
+afterEach(() => {
+  cleanup();
+  document.body.querySelectorAll('input[type="file"]').forEach((input) => {
+    input.remove();
+  });
+});
+
+describe("composer on a disabled thread", () => {
+  it("blocks sending a draft that was entered before the thread was disabled", async () => {
+    const onNew = vi.fn(async () => {});
+    const { adapter } = makeAttachmentAdapter();
+    const view = render(
+      <App isDisabled={false} onNew={onNew} attachments={adapter} />,
+    );
+    fireEvent.change(screen.getByRole("textbox", { name: "input" }), {
+      target: { value: "hello" },
+    });
+
+    view.rerender(<App isDisabled onNew={onNew} attachments={adapter} />);
+    await settle();
+
+    expect(button("send").disabled).toBe(true);
+    fireEvent.click(button("send"));
+    await settle();
+    expect(onNew).not.toHaveBeenCalled();
+  });
+
+  it("disables attachment selection", () => {
+    const onNew = vi.fn(async () => {});
+    const { adapter, add } = makeAttachmentAdapter();
+    render(<App isDisabled onNew={onNew} attachments={adapter} />);
+
+    expect(button("attach").disabled).toBe(true);
+    fireEvent.click(button("attach"));
+    expect(document.body.querySelector('input[type="file"]')).toBeNull();
+    expect(add).not.toHaveBeenCalled();
+  });
+});

package/src/primitives/composer/ComposerRoot.test.tsx

@@ -1,5 +1,5 @@
 /** @vitest-environment jsdom */
-import { act } from "react";
+import { act, version } from "react";
 import type { MouseEvent, ReactNode } from "react";
 import { createPortal } from "react-dom";
 import { createRoot } from "react-dom/client";
@@ -12,6 +12,8 @@ import { useComposerCompactContextOptional } from "./ComposerCompactContext";
 import type { ComposerCompactContextValue } from "./ComposerCompactContext";
 import { ComposerPrimitiveRoot } from "./ComposerRoot";
 
+const onReact18 = version.startsWith("18.");
+
 type StoreState = {
   composer: {
     attachments: object[];
@@ -77,6 +79,24 @@ describe("ComposerPrimitiveRoot click-to-focus", () => {
     };
   };
 
+  it("forwards the inert attribute and removes it when disabled", () => {
+    const { container, rerender } = render(<ComposerPrimitiveRoot inert />);
+    const form = container.querySelector("form");
+
+    expect(form?.hasAttribute("inert")).toBe(true);
+
+    rerender(<ComposerPrimitiveRoot inert={false} />);
+    expect(form?.hasAttribute("inert")).toBe(false);
+  });
+
+  it.skipIf(!onReact18)("keeps a string inert on React 18", () => {
+    const { container } = render(
+      <ComposerPrimitiveRoot inert={"" as unknown as boolean} />,
+    );
+
+    expect(container.querySelector("form")?.hasAttribute("inert")).toBe(true);
+  });
+
   it("focuses the textarea when primary-button mousedown starts on blank form space", () => {
     const { blankSpace, textarea } = setupComposer();
 

package/src/primitives/composer/ComposerRoot.tsx

@@ -11,6 +11,7 @@ import {
   type MouseEvent,
   useMemo,
   useState,
+  version,
 } from "react";
 import { useComposerSend } from "./ComposerSend";
 import { ComposerCompactContext } from "./ComposerCompactContext";
@@ -56,6 +57,9 @@ export namespace ComposerPrimitiveRoot {
   };
 }
 
+// React 18 drops a boolean `inert`, so it receives the attribute's string form.
+const isReact18 = version.startsWith("18.");
+
 /**
  * The root form container for message composition.
  *
@@ -79,7 +83,7 @@ export namespace ComposerPrimitiveRoot {
 export const ComposerPrimitiveRoot = forwardRef<
   ComposerPrimitiveRoot.Element,
   ComposerPrimitiveRoot.Props
->(({ onSubmit, onMouseDown, compact, ...rest }, forwardedRef) => {
+>(({ onSubmit, onMouseDown, compact, inert, ...rest }, forwardedRef) => {
   const send = useComposerSend();
   const composerType = useAuiState((s) => s.composer.type);
 
@@ -95,6 +99,8 @@ export const ComposerPrimitiveRoot = forwardRef<
       : false,
   );
   const isCompact = stateAllowsCompact && !multiline;
+  const inertAttribute =
+    isReact18 && typeof inert === "boolean" ? (inert ? "" : undefined) : inert;
 
   const handleSubmit = (e: FormEvent) => {
     e.preventDefault();
@@ -126,6 +132,7 @@ export const ComposerPrimitiveRoot = forwardRef<
     <ComposerCompactContext.Provider value={compact ? compactContext : null}>
       <Primitive.form
         {...rest}
+        inert={inertAttribute as boolean | undefined}
         data-aui-composer-type={composerType}
         data-compact={isCompact ? "" : undefined}
         ref={forwardedRef}

package/src/unstable/useComposerInput.ts

@@ -68,6 +68,8 @@ export type Unstable_ComposerInput = {
  *   disabled={isDisabled}
  *   onChange={(e) => setText(e.target.value)}
  *   onKeyDown={(e) => {
+ *     if (e.nativeEvent.isComposing || e.keyCode === 229) return;
+ *
  *     if (e.key === "Enter" && !e.shiftKey && canSend) {
  *       e.preventDefault();
  *       send();