@assistant-ui/react 0.15.17 → 0.15.19

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

@@ -37,6 +37,104 @@ async function flush() {
 }
 
 describe("createMcpAppBridge", () => {
+  it("ignores requests and notifications after disposal", async () => {
+    const { frame, captured } = makeFrame();
+    const callTool = vi.fn().mockResolvedValue({ ok: true });
+    const onInitialized = vi.fn();
+    const bridge = createMcpAppBridge({
+      frame,
+      handlers: { callTool, onInitialized },
+    });
+
+    bridge.dispose();
+    expect(() => bridge.dispose()).not.toThrow();
+
+    deliver(bridge, {
+      jsonrpc: "2.0",
+      id: 1,
+      method: "tools/call",
+      params: { name: "search" },
+    });
+    deliver(bridge, {
+      jsonrpc: "2.0",
+      method: "notifications/initialized",
+    });
+    await flush();
+
+    expect(callTool).not.toHaveBeenCalled();
+    expect(onInitialized).not.toHaveBeenCalled();
+    expect(captured).toEqual([]);
+  });
+
+  it("does not send a response after disposal", async () => {
+    const { frame, captured } = makeFrame();
+    let resolveCall!: (value: unknown) => void;
+    const callTool = vi.fn(
+      () =>
+        new Promise((resolve) => {
+          resolveCall = resolve;
+        }),
+    );
+    const bridge = createMcpAppBridge({ frame, handlers: { callTool } });
+
+    deliver(bridge, {
+      jsonrpc: "2.0",
+      id: 1,
+      method: "tools/call",
+      params: { name: "search" },
+    });
+    expect(callTool).toHaveBeenCalledOnce();
+
+    bridge.dispose();
+    resolveCall({ ok: true });
+    await flush();
+
+    expect(captured).toEqual([]);
+  });
+
+  it("does not report an async error after disposal", async () => {
+    const { frame, captured } = makeFrame();
+    let rejectCall!: (reason?: unknown) => void;
+    const callTool = vi.fn(
+      () =>
+        new Promise((_resolve, reject) => {
+          rejectCall = reject;
+        }),
+    );
+    const onError = vi.fn();
+    const bridge = createMcpAppBridge({
+      frame,
+      handlers: { callTool, onError },
+    });
+
+    deliver(bridge, {
+      jsonrpc: "2.0",
+      id: 1,
+      method: "tools/call",
+      params: { name: "search" },
+    });
+    expect(callTool).toHaveBeenCalledOnce();
+
+    bridge.dispose();
+    rejectCall(new Error("tool failed"));
+    await flush();
+
+    expect(onError).not.toHaveBeenCalled();
+    expect(captured).toEqual([]);
+  });
+
+  it("does not send host notifications after disposal", () => {
+    const { frame, captured } = makeFrame();
+    const bridge = createMcpAppBridge({ frame });
+
+    bridge.dispose();
+    bridge.notifyToolInput({ query: "hello" });
+    bridge.notifyToolResult({ answer: "world" });
+    bridge.notifyHostContextChanged({ theme: "dark" });
+
+    expect(captured).toEqual([]);
+  });
+
   it("responds to ui/initialize with host info, version, and capabilities", async () => {
     const { frame, captured } = makeFrame();
     const bridge = createMcpAppBridge({

package/src/mcp-apps/bridge.ts

@@ -1,5 +1,5 @@
 import type { SandboxHostFrame } from "../sandbox-host/SandboxHost";
-import { invokeCallbackSafely } from "../utils/invokeCallbackSafely";
+import { invokeUserCallback } from "@assistant-ui/core/internal";
 import {
   MCP_APP_PROTOCOL_VERSION,
   type McpAppBridgeHandlers,
@@ -90,8 +90,10 @@ export function createMcpAppBridge(
     hostInfo = DEFAULT_HOST_INFO,
     hostContext = {},
   } = opts;
+  let disposed = false;
 
   const post = (msg: McpAppJsonRpcMessage) => {
+    if (disposed) return;
     frame.sendMessage(msg);
   };
 
@@ -125,7 +127,13 @@ export function createMcpAppBridge(
   };
 
   const reportError = (error: Error) => {
-    invokeCallbackSafely(() => handlers.onError?.(error), "MCP App onError");
+    if (disposed) return;
+    invokeUserCallback(
+      "assistant-ui",
+      "MCP App onError",
+      handlers.onError?.bind(handlers),
+      error,
+    );
   };
 
   const handleRequest = async (req: McpAppJsonRpcRequest) => {
@@ -430,6 +438,7 @@ export function createMcpAppBridge(
   // The host applies the cross-origin guard before delegating; this only
   // validates the JSON-RPC envelope.
   const onMessage = (event: MessageEvent) => {
+    if (disposed) return;
     if (!isJsonRpcMessage(event.data)) return;
 
     const msg = event.data;
@@ -442,7 +451,9 @@ export function createMcpAppBridge(
 
   return {
     onMessage,
-    dispose: () => {},
+    dispose: () => {
+      disposed = true;
+    },
     notifyToolInput: (input: unknown) => {
       post({
         jsonrpc: "2.0",

package/src/mcp-apps/index.ts

@@ -1,4 +1,8 @@
-export { McpAppRenderer, type McpAppRendererOptions } from "./McpAppRenderer";
+export {
+  McpAppRenderer,
+  type McpAppPartOptions,
+  type McpAppRendererOptions,
+} from "./McpAppRenderer";
 export { McpAppsRemoteHost } from "./McpAppsRemoteHost";
 export { getMcpAppFromToolPart } from "./utils";
 export type {

package/src/primitives/assistantModal/AssistantModalRoot.test.tsx

@@ -0,0 +1,123 @@
+// @vitest-environment jsdom
+
+import {
+  act,
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+} from "@testing-library/react";
+import { useState } from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { AssistantRuntimeProvider } from "../../context";
+import { useLocalRuntime } from "../../legacy-runtime/runtime-cores/local/useLocalRuntime";
+import { AssistantModalPrimitiveContent } from "./AssistantModalContent";
+import { AssistantModalPrimitiveRoot } from "./AssistantModalRoot";
+import { AssistantModalPrimitiveTrigger } from "./AssistantModalTrigger";
+
+const adapter = {
+  async *run() {
+    yield { content: [{ type: "text" as const, text: "Hello" }] };
+  },
+};
+
+const Modal = ({
+  controlled = true,
+  onOpenChange,
+  ...props
+}: AssistantModalPrimitiveRoot.Props & { controlled?: boolean }) => {
+  const runtime = useLocalRuntime(adapter);
+  const [open, setOpen] = useState(false);
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      <button onClick={() => runtime.thread.append("Hello")}>Start run</button>
+      <AssistantModalPrimitiveRoot
+        {...(controlled ? { open } : {})}
+        onOpenChange={(value) => {
+          setOpen(value);
+          onOpenChange?.(value);
+        }}
+        {...props}
+      >
+        <AssistantModalPrimitiveTrigger>
+          Toggle chat
+        </AssistantModalPrimitiveTrigger>
+        <AssistantModalPrimitiveContent aria-label="Chat">
+          Response
+        </AssistantModalPrimitiveContent>
+      </AssistantModalPrimitiveRoot>
+    </AssistantRuntimeProvider>
+  );
+};
+
+afterEach(cleanup);
+
+describe("AssistantModalPrimitiveRoot run start", () => {
+  it.each([true, false])(
+    "opens on run start and closes through the trigger (controlled: %s)",
+    async (controlled) => {
+      const onOpenChange = vi.fn();
+      render(<Modal controlled={controlled} onOpenChange={onOpenChange} />);
+      expect(screen.queryByRole("dialog")).toBeNull();
+
+      await act(async () => {
+        fireEvent.click(screen.getByRole("button", { name: "Start run" }));
+      });
+      expect(await screen.findByRole("dialog", { name: "Chat" })).toBeDefined();
+      expect(onOpenChange).toHaveBeenCalledExactlyOnceWith(true);
+
+      await act(async () => {
+        fireEvent.click(screen.getByRole("button", { name: "Start run" }));
+      });
+      expect(onOpenChange).toHaveBeenCalledExactlyOnceWith(true);
+
+      fireEvent.click(screen.getByRole("button", { name: "Toggle chat" }));
+      expect(screen.queryByRole("dialog")).toBeNull();
+    },
+  );
+
+  it.each([{ open: true }, { controlled: false, defaultOpen: true }])(
+    "does not request opening when already open (%o)",
+    async (props) => {
+      const onOpenChange = vi.fn();
+      render(<Modal {...props} onOpenChange={onOpenChange} />);
+      expect(screen.getByRole("dialog", { name: "Chat" })).toBeDefined();
+
+      await act(async () => {
+        fireEvent.click(screen.getByRole("button", { name: "Start run" }));
+      });
+
+      expect(onOpenChange).not.toHaveBeenCalled();
+      expect(screen.getByRole("dialog", { name: "Chat" })).toBeDefined();
+    },
+  );
+
+  it("notifies the current owner without overriding its controlled value", async () => {
+    const previous = vi.fn();
+    const current = vi.fn();
+    const view = render(<Modal open={false} onOpenChange={previous} />);
+    view.rerender(<Modal open={false} onOpenChange={current} />);
+
+    await act(async () => {
+      fireEvent.click(screen.getByRole("button", { name: "Start run" }));
+    });
+
+    expect(current).toHaveBeenCalledExactlyOnceWith(true);
+    expect(previous).not.toHaveBeenCalled();
+    expect(screen.queryByRole("dialog")).toBeNull();
+  });
+
+  it("does not request opening when auto-open is disabled", async () => {
+    const onOpenChange = vi.fn();
+    render(
+      <Modal unstable_openOnRunStart={false} onOpenChange={onOpenChange} />,
+    );
+
+    await act(async () => {
+      fireEvent.click(screen.getByRole("button", { name: "Start run" }));
+    });
+
+    expect(onOpenChange).not.toHaveBeenCalled();
+    expect(screen.queryByRole("dialog")).toBeNull();
+  });
+});

package/src/primitives/assistantModal/AssistantModalRoot.tsx

@@ -1,9 +1,9 @@
 "use client";
 
-import { type FC, useEffect, useState } from "react";
+import { type FC, useState } from "react";
 import { Popover as PopoverPrimitive } from "radix-ui";
 import { type ScopedProps, usePopoverScope } from "./scope";
-import { useAui } from "@assistant-ui/store";
+import { useAuiEvent } from "@assistant-ui/store";
 
 export namespace AssistantModalPrimitiveRoot {
   export type Props = PopoverPrimitive.PopoverProps & {
@@ -11,54 +11,34 @@ export namespace AssistantModalPrimitiveRoot {
   };
 }
 
-const useAssistantModalOpenState = ({
-  defaultOpen = false,
-  unstable_openOnRunStart = true,
-}: {
-  defaultOpen?: boolean | undefined;
-  unstable_openOnRunStart?: boolean | undefined;
-}) => {
-  const state = useState(defaultOpen);
-
-  const [, setOpen] = state;
-  const aui = useAui();
-  useEffect(() => {
-    if (!unstable_openOnRunStart) return undefined;
-
-    return aui.on("thread.runStart", () => {
-      setOpen(true);
-    });
-  }, [unstable_openOnRunStart, aui, setOpen]);
-
-  return state;
-};
-
 export const AssistantModalPrimitiveRoot: FC<
   AssistantModalPrimitiveRoot.Props
 > = ({
   __scopeAssistantModal,
-  defaultOpen,
-  unstable_openOnRunStart,
+  defaultOpen = false,
+  unstable_openOnRunStart = true,
   open,
   onOpenChange,
   ...rest
 }: ScopedProps<AssistantModalPrimitiveRoot.Props>) => {
   const scope = usePopoverScope(__scopeAssistantModal);
 
-  const [modalOpen, setOpen] = useAssistantModalOpenState({
-    defaultOpen,
-    unstable_openOnRunStart,
-  });
+  const [modalOpen, setOpen] = useState(defaultOpen);
+  const isOpen = open ?? modalOpen;
 
   const openChangeHandler = (open: boolean) => {
     onOpenChange?.(open);
     setOpen(open);
   };
 
+  useAuiEvent("thread.runStart", () => {
+    if (unstable_openOnRunStart && !isOpen) openChangeHandler(true);
+  });
+
   return (
     <PopoverPrimitive.Root
       {...scope}
-      open={open === undefined ? modalOpen : open}
+      open={isOpen}
       onOpenChange={openChangeHandler}
       {...rest}
     />

package/src/primitives/assistantModal/AssistantModalTrigger.test.tsx

@@ -1,7 +1,6 @@
 import { renderToStaticMarkup } from "react-dom/server";
 import { describe, expect, it, vi } from "vitest";
 import { AssistantModalPrimitiveAnchor } from "./AssistantModalAnchor";
-import { AssistantModalPrimitiveContent } from "./AssistantModalContent";
 import { AssistantModalPrimitiveRoot } from "./AssistantModalRoot";
 import { AssistantModalPrimitiveTrigger } from "./AssistantModalTrigger";
 
@@ -9,9 +8,7 @@ vi.mock("@assistant-ui/store", async (importOriginal) => {
   const actual = await importOriginal<typeof import("@assistant-ui/store")>();
   return {
     ...actual,
-    useAui: () => ({
-      on: () => () => {},
-    }),
+    useAuiEvent: () => {},
   };
 });
 
@@ -65,16 +62,4 @@ describe("AssistantModalPrimitive render props", () => {
     expect(renderHtml).toContain('class="anchor"');
     expect(renderHtml).toContain("Anchor");
   });
-
-  it("accepts render on Trigger, Anchor, and Content", () => {
-    const tree = (
-      <AssistantModalPrimitiveRoot open>
-        <AssistantModalPrimitiveTrigger render={<button type="button" />} />
-        <AssistantModalPrimitiveAnchor render={<div />} />
-        <AssistantModalPrimitiveContent render={<div />} />
-      </AssistantModalPrimitiveRoot>
-    );
-
-    expect(tree).toBeTruthy();
-  });
 });

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

@@ -74,6 +74,49 @@ describe("ComposerPrimitiveAttachmentDropzone", () => {
     vi.restoreAllMocks();
   });
 
+  it("composes a render element and keeps the drag props attached", async () => {
+    await act(async () => {
+      root.render(
+        <ComposerPrimitiveAttachmentDropzone
+          data-testid="dropzone"
+          render={<section className="child" />}
+          className="parent"
+        >
+          <div>outer</div>
+        </ComposerPrimitiveAttachmentDropzone>,
+      );
+    });
+
+    const dropzone = container.querySelector(
+      "section[data-testid='dropzone']",
+    ) as HTMLElement;
+    expect(dropzone).not.toBeNull();
+    expect(dropzone.textContent).toBe("outer");
+    expect(dropzone.className).toContain("parent");
+    expect(dropzone.className).toContain("child");
+
+    await act(async () => {
+      dropzone.dispatchEvent(createDragEvent("dragenter", ["Files"]));
+    });
+
+    expect(dropzone.getAttribute("data-dragging")).toBe("true");
+  });
+
+  it("falls back to the render element's own children", async () => {
+    await act(async () => {
+      root.render(
+        <ComposerPrimitiveAttachmentDropzone
+          data-testid="dropzone"
+          render={<section>fallback</section>}
+        />,
+      );
+    });
+
+    expect(
+      container.querySelector("section[data-testid='dropzone']")?.textContent,
+    ).toBe("fallback");
+  });
+
   it("starts all dropped attachments before awaiting completion", async () => {
     const resolvers: Array<() => void> = [];
     addAttachment.mockImplementation(

package/src/primitives/composer/ComposerAttachmentDropzone.tsx

@@ -5,7 +5,6 @@ import {
   useCallback,
   useState,
   type ReactElement,
-  cloneElement,
   isValidElement,
 } from "react";
 
@@ -13,6 +12,7 @@ import { composeEventHandlers } from "radix-ui/internal";
 import { Slot } from "radix-ui";
 import type React from "react";
 import { useAui } from "@assistant-ui/store";
+import { renderSlot } from "../../utils/Primitive";
 
 export namespace ComposerPrimitiveAttachmentDropzone {
   export type Element = HTMLDivElement;
@@ -116,15 +116,7 @@ export const ComposerPrimitiveAttachmentDropzone = forwardRef<
   };
 
   if (render && isValidElement(render)) {
-    const renderChildren =
-      children !== undefined
-        ? children
-        : (render.props as Record<string, unknown>).children;
-    return (
-      <Slot.Root {...mergedProps}>
-        {cloneElement(render, undefined, renderChildren as React.ReactNode)}
-      </Slot.Root>
-    );
+    return renderSlot(render, children, mergedProps);
   }
 
   const Comp = asChild ? Slot.Root : "div";

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

@@ -240,6 +240,28 @@ describe("ComposerPrimitiveInput", () => {
     return textarea;
   };
 
+  it("composes a render element with the computed input props", async () => {
+    await act(async () => {
+      root.render(
+        <form>
+          <ComposerPrimitiveInput
+            render={<textarea data-testid="custom" className="child" />}
+            className="parent"
+          />
+        </form>,
+      );
+    });
+
+    const textarea = container.querySelector(
+      "textarea[data-testid='custom']",
+    ) as HTMLTextAreaElement;
+    expect(textarea).not.toBeNull();
+    expect(textarea.className).toContain("parent");
+    expect(textarea.className).toContain("child");
+    expect(textarea.name).toBe("input");
+    expect(textarea.hasAttribute("render")).toBe(false);
+  });
+
   it("syncs setText during active composition so React 19 cannot reset the textarea", async () => {
     const textarea = await mount();
 

package/src/primitives/composer/ComposerInput.tsx

@@ -12,7 +12,6 @@ import {
   useCallback,
   useEffect,
   useRef,
-  cloneElement,
   isValidElement,
 } from "react";
 import TextareaAutosize, {
@@ -22,6 +21,7 @@ import TextareaAutosize, {
 import { useEscapeKeydown } from "radix-ui/internal";
 import { useOnScrollToBottom } from "../../utils/hooks/useOnScrollToBottom";
 import { useMediaQuery } from "../../utils/hooks/useMediaQuery";
+import { renderSlot } from "../../utils/Primitive";
 import { useAui } from "@assistant-ui/store";
 import { flushTapSync } from "@assistant-ui/tap";
 import { useComposerInputPluginRegistryOptional } from "./ComposerInputPluginContext";
@@ -434,14 +434,10 @@ export const ComposerPrimitiveInput = forwardRef<
     };
 
     if (render && isValidElement(render)) {
-      const renderChildren =
-        (rest as any).children !== undefined
-          ? ((rest as any).children as ReactNode)
-          : ((render.props as Record<string, unknown>).children as ReactNode);
-      return (
-        <Slot.Root {...inputProps}>
-          {cloneElement(render, undefined, renderChildren)}
-        </Slot.Root>
+      return renderSlot(
+        render,
+        (rest as { children?: ReactNode }).children,
+        inputProps,
       );
     }
 

package/src/primitives/composer/ComposerInputPluginContext.tsx

@@ -51,16 +51,6 @@ export type ComposerInputPluginRegistry = {
 const ComposerInputPluginRegistryContext =
   createContext<ComposerInputPluginRegistry | null>(null);
 
-export const useComposerInputPluginRegistry =
-  (): ComposerInputPluginRegistry => {
-    const ctx = useContext(ComposerInputPluginRegistryContext);
-    if (!ctx)
-      throw new Error(
-        "useComposerInputPluginRegistry must be used within a ComposerInputPluginProvider",
-      );
-    return ctx;
-  };
-
 export const useComposerInputPluginRegistryOptional =
   (): ComposerInputPluginRegistry | null => {
     return useContext(ComposerInputPluginRegistryContext);

package/src/primitives/composer/trigger/TriggerPopoverAction.tsx

@@ -5,7 +5,7 @@ import type {
   Unstable_TriggerItem,
 } from "@assistant-ui/core";
 import { unstable_defaultDirectiveFormatter } from "@assistant-ui/core";
-import { useEffect, useRef, type FC } from "react";
+import { useEffect, useInsertionEffect, useRef, type FC } from "react";
 import { useTriggerBehaviorRegistration } from "./TriggerPopover";
 import type { TriggerBehavior } from "./triggerSelectionResource";
 
@@ -42,7 +42,9 @@ export const ComposerPrimitiveTriggerPopoverAction: FC<
 > = ({ formatter, onExecute, removeOnExecute }) => {
   const { register } = useTriggerBehaviorRegistration();
   const onExecuteRef = useRef(onExecute);
-  onExecuteRef.current = onExecute;
+  useInsertionEffect(() => {
+    onExecuteRef.current = onExecute;
+  }, [onExecute]);
 
   useEffect(() => {
     const behavior: TriggerBehavior = {