@assistant-ui/react 0.15.25 → 0.15.27

package/src/mcp-apps/csp.ts

@@ -0,0 +1,124 @@
+import type { McpAppResourceCSP } from "./types";
+
+const isAllowedOrigin = (value: string, allowWebSocket: boolean): boolean => {
+  const scheme = allowWebSocket ? /^(?:https?|wss?):\/\//i : /^https?:\/\//i;
+  if (!scheme.test(value) || /[\s;'"`,]/.test(value)) {
+    return false;
+  }
+
+  try {
+    const url = new URL(value.replace("://*.", "://wildcard."));
+    return (
+      url.username === "" &&
+      url.password === "" &&
+      url.pathname === "/" &&
+      url.search === "" &&
+      url.hash === ""
+    );
+  } catch {
+    return false;
+  }
+};
+
+const getAllowedOrigins = (
+  values: unknown,
+  allowWebSocket = false,
+): string[] =>
+  Array.isArray(values)
+    ? [
+        ...new Set(
+          values.filter(
+            (value): value is string =>
+              typeof value === "string" &&
+              isAllowedOrigin(value, allowWebSocket),
+          ),
+        ),
+      ]
+    : [];
+
+const directive = (name: string, values: readonly string[]) =>
+  `${name} ${values.join(" ")}`;
+
+export const buildMcpAppCsp = (csp?: McpAppResourceCSP): string => {
+  const connectDomains = getAllowedOrigins(csp?.connectDomains, true);
+  const resourceDomains = getAllowedOrigins(csp?.resourceDomains);
+  const frameDomains = getAllowedOrigins(csp?.frameDomains);
+  const baseUriDomains = getAllowedOrigins(csp?.baseUriDomains);
+
+  return [
+    "default-src 'none'",
+    directive("script-src", ["'self'", "'unsafe-inline'", ...resourceDomains]),
+    directive("style-src", ["'self'", "'unsafe-inline'", ...resourceDomains]),
+    directive(
+      "connect-src",
+      connectDomains.length > 0 ? ["'self'", ...connectDomains] : ["'none'"],
+    ),
+    directive("img-src", ["'self'", "data:", ...resourceDomains]),
+    directive("font-src", ["'self'", ...resourceDomains]),
+    directive("media-src", ["'self'", "data:", ...resourceDomains]),
+    directive("frame-src", frameDomains.length > 0 ? frameDomains : ["'none'"]),
+    directive(
+      "base-uri",
+      baseUriDomains.length > 0 ? baseUriDomains : ["'self'"],
+    ),
+    "object-src 'none'",
+    "form-action 'none'",
+  ].join("; ");
+};
+
+const findDoctypeEnd = (html: string): number => {
+  let offset = 0;
+
+  while (offset < html.length) {
+    const whitespace = html.slice(offset).match(/^[\t\n\f\r ]+/)?.[0];
+    if (whitespace) {
+      offset += whitespace.length;
+      continue;
+    }
+    if (html.startsWith("<!--", offset)) {
+      if (html.startsWith("<!-->", offset)) {
+        offset += 5;
+        continue;
+      }
+      if (html.startsWith("<!--->", offset)) {
+        offset += 6;
+        continue;
+      }
+      const commentEnd = html.indexOf("-->", offset + 4);
+      const bangCommentEnd = html.indexOf("--!>", offset + 4);
+      if (commentEnd === -1 && bangCommentEnd === -1) return 0;
+      offset =
+        bangCommentEnd !== -1 &&
+        (commentEnd === -1 || bangCommentEnd < commentEnd)
+          ? bangCommentEnd + 4
+          : commentEnd + 3;
+      continue;
+    }
+    if (html.slice(offset, offset + 9).toLowerCase() === "<!doctype") {
+      break;
+    }
+    if (html.startsWith("<?", offset) || html.startsWith("<!", offset)) {
+      const bogusCommentEnd = html.indexOf(">", offset + 2);
+      if (bogusCommentEnd === -1) return 0;
+      offset = bogusCommentEnd + 1;
+      continue;
+    }
+    break;
+  }
+
+  if (html.slice(offset, offset + 9).toLowerCase() !== "<!doctype") {
+    return offset;
+  }
+  const end = html.indexOf(">", offset + 9);
+  return end === -1 ? 0 : end + 1;
+};
+
+export const applyMcpAppCsp = (
+  html: string,
+  csp?: McpAppResourceCSP,
+): string => {
+  const normalizedHtml = html.charCodeAt(0) === 0xfeff ? html.slice(1) : html;
+  const meta = `<meta http-equiv="Content-Security-Policy" content="${buildMcpAppCsp(csp)}">`;
+  const insertionPoint = findDoctypeEnd(normalizedHtml);
+  return `${normalizedHtml.slice(0, insertionPoint)}${meta}${normalizedHtml.slice(insertionPoint)}`;
+};

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

@@ -14,6 +14,7 @@ export type McpAppResourceCSP = {
   connectDomains?: string[];
   resourceDomains?: string[];
   frameDomains?: string[];
+  baseUriDomains?: string[];
   [k: string]: unknown;
 };
 
@@ -86,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;
@@ -98,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/model-context/frame/AssistantFrame.test.ts

@@ -237,6 +237,51 @@ describe("AssistantFrame Integration", () => {
     unsubscribe();
   });
 
+  it("rejects a tool call the frame drops while it is disposed", async () => {
+    vi.mocked(iframeWindow.postMessage).mockImplementation((data: any) => {
+      Promise.resolve().then(() => {
+        messageHandlers.get("iframe")?.({
+          data,
+          source: parentWindow,
+          origin: window.location.origin,
+        } as MessageEvent);
+      });
+    });
+    vi.mocked(window.removeEventListener).mockImplementation(
+      (event: string, handler: any) => {
+        if (event === "message" && messageHandlers.get("iframe") === handler) {
+          messageHandlers.delete("iframe");
+        }
+      },
+    );
+    const registry = new ModelContextRegistry();
+    const toolExecute = vi.fn().mockResolvedValue("result");
+    registry.addTool({
+      toolName: "search",
+      parameters: z.object({}),
+      execute: toolExecute,
+    });
+    AssistantFrameProvider.addModelContextProvider(registry);
+    const host = new AssistantFrameHost(iframeWindow);
+    await vi.waitFor(() => {
+      expect(host.getModelContext().tools?.search).toBeDefined();
+    });
+
+    const result = host.getModelContext().tools!.search!.execute!(
+      {},
+      {} as any,
+    );
+    AssistantFrameProvider.dispose();
+
+    await expect(result).rejects.toThrow(
+      "AssistantFrameProvider has been disposed",
+    );
+    expect(toolExecute).not.toHaveBeenCalled();
+    expect(host.getModelContext().tools).toBeUndefined();
+
+    host.dispose();
+  });
+
   it("should handle multiple providers", async () => {
     // Setup multiple providers
     const registry1 = new ModelContextRegistry();

package/src/model-context/frame/SPEC_AssistantFrame.md

@@ -78,6 +78,7 @@ All messages are wrapped with a channel identifier to avoid conflicts with other
 2. **Tool Execution**
    - `tool-call`: Parent requests tool execution in iframe (where tools are defined)
    - `tool-result`: Iframe returns execution result or error to parent
+   - `provider-disposed`: Iframe tells the parent it was disposed, so the parent rejects tool calls the iframe will not answer
 
 #### Serialization
 

package/src/primitives/assistantModal/AssistantModalRoot.tsx

@@ -7,6 +7,7 @@ import { useAuiEvent } from "@assistant-ui/store";
 
 export namespace AssistantModalPrimitiveRoot {
   export type Props = PopoverPrimitive.PopoverProps & {
+    /** @deprecated Experimental since 2024-10-12. Not scheduled for removal; the API may change in any release. */
     unstable_openOnRunStart?: boolean | undefined;
   };
 }

package/src/primitives/attachment.ts

@@ -1,4 +1,7 @@
 export { AttachmentPrimitiveRoot as Root } from "./attachment/AttachmentRoot";
-export { AttachmentPrimitiveThumb as unstable_Thumb } from "./attachment/AttachmentThumb";
+export {
+  /** @deprecated Experimental since 2024-10-10. Not scheduled for removal; the API may change in any release. */
+  AttachmentPrimitiveThumb as unstable_Thumb,
+} from "./attachment/AttachmentThumb";
 export { AttachmentPrimitiveName as Name } from "./attachment/AttachmentName";
 export { AttachmentPrimitiveRemove as Remove } from "./attachment/AttachmentRemove";

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,