@assistant-ui/react 0.15.17 → 0.15.18

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,
@@ -125,7 +125,12 @@ export function createMcpAppBridge(
   };
 
   const reportError = (error: Error) => {
-    invokeCallbackSafely(() => handlers.onError?.(error), "MCP App onError");
+    invokeUserCallback(
+      "assistant-ui",
+      "MCP App onError",
+      handlers.onError?.bind(handlers),
+      error,
+    );
   };
 
   const handleRequest = async (req: McpAppJsonRpcRequest) => {

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/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 = {

package/src/primitives/composer/trigger/TriggerPopoverBehavior.test.tsx

@@ -0,0 +1,109 @@
+// @vitest-environment jsdom
+
+import { Suspense, type ReactNode } from "react";
+import { render, waitFor } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import type { Unstable_TriggerItem } from "@assistant-ui/core";
+import type { TriggerBehavior } from "./triggerSelectionResource";
+
+const mocks = vi.hoisted(() => ({ register: vi.fn() }));
+
+vi.mock("./TriggerPopover", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("./TriggerPopover")>()),
+  useTriggerBehaviorRegistration: () => ({ register: mocks.register }),
+}));
+
+import { ComposerPrimitiveTriggerPopoverAction } from "./TriggerPopoverAction";
+import { ComposerPrimitiveTriggerPopoverDirective } from "./TriggerPopoverDirective";
+
+const item: Unstable_TriggerItem = {
+  id: "item-1",
+  type: "test",
+  label: "Item",
+};
+
+const verifyCommittedCallback = async (
+  renderBehavior: (callback: (item: Unstable_TriggerItem) => void) => ReactNode,
+  invoke: (behavior: TriggerBehavior) => void,
+) => {
+  let behavior: TriggerBehavior | undefined;
+  mocks.register.mockImplementation((next: TriggerBehavior) => {
+    behavior = next;
+    return () => {};
+  });
+
+  let suspend = false;
+  const suspended = new Promise<never>(() => {});
+  const renderProbe = vi.fn();
+  const Suspender = () => {
+    if (suspend) throw suspended;
+    return null;
+  };
+  const Probe = () => {
+    renderProbe();
+    return null;
+  };
+  const View = ({
+    callback,
+  }: {
+    callback: (item: Unstable_TriggerItem) => void;
+  }) => (
+    <Suspense fallback={null}>
+      {renderBehavior(callback)}
+      <Probe />
+      <Suspender />
+    </Suspense>
+  );
+
+  const committed = vi.fn();
+  const abandoned = vi.fn();
+  const view = render(<View callback={committed} />);
+
+  await waitFor(() => expect(behavior).toBeDefined());
+  renderProbe.mockClear();
+
+  suspend = true;
+  view.rerender(<View callback={abandoned} />);
+  await waitFor(() => expect(renderProbe).toHaveBeenCalled());
+
+  invoke(behavior!);
+  expect(committed).toHaveBeenCalledExactlyOnceWith(item);
+  expect(abandoned).not.toHaveBeenCalled();
+
+  suspend = false;
+  view.rerender(<View callback={abandoned} />);
+  invoke(behavior!);
+  expect(abandoned).toHaveBeenCalledExactlyOnceWith(item);
+};
+
+describe("TriggerPopover behavior callbacks", () => {
+  beforeEach(() => {
+    mocks.register.mockReset();
+  });
+
+  it("keeps the committed action callback during abandoned renders", async () => {
+    await verifyCommittedCallback(
+      (onExecute) => (
+        <ComposerPrimitiveTriggerPopoverAction onExecute={onExecute} />
+      ),
+      (behavior) => {
+        if (behavior.kind !== "action") throw new Error("Expected action");
+        behavior.onExecute(item);
+      },
+    );
+  });
+
+  it("keeps the committed directive callback during abandoned renders", async () => {
+    await verifyCommittedCallback(
+      (onInserted) => (
+        <ComposerPrimitiveTriggerPopoverDirective onInserted={onInserted} />
+      ),
+      (behavior) => {
+        if (behavior.kind !== "directive") {
+          throw new Error("Expected directive");
+        }
+        behavior.onInserted?.(item);
+      },
+    );
+  });
+});

package/src/primitives/composer/trigger/TriggerPopoverDirective.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";
 
@@ -39,7 +39,9 @@ export const ComposerPrimitiveTriggerPopoverDirective: FC<
 > = ({ formatter, onInserted }) => {
   const { register } = useTriggerBehaviorRegistration();
   const onInsertedRef = useRef(onInserted);
-  onInsertedRef.current = onInserted;
+  useInsertionEffect(() => {
+    onInsertedRef.current = onInserted;
+  }, [onInserted]);
 
   useEffect(() => {
     const behavior: TriggerBehavior = {

package/src/primitives/composer/trigger/matchesTriggerItemQuery.test.ts

@@ -0,0 +1,52 @@
+import { describe, it, expect } from "vitest";
+import { matchesTriggerItemQuery } from "./matchesTriggerItemQuery";
+import type { Unstable_TriggerItem } from "@assistant-ui/core";
+
+const item = (
+  overrides: Partial<Unstable_TriggerItem>,
+): Unstable_TriggerItem => ({
+  id: "summarize",
+  type: "command",
+  label: "Summarize",
+  ...overrides,
+});
+
+describe("matchesTriggerItemQuery", () => {
+  it("matches every item on an empty query", () => {
+    expect(matchesTriggerItemQuery(item({}), "")).toBe(true);
+  });
+
+  it("matches case-insensitively against the id", () => {
+    expect(
+      matchesTriggerItemQuery(item({ id: "SummArize", label: "y" }), "marize"),
+    ).toBe(true);
+  });
+
+  it("matches case-insensitively against the label", () => {
+    expect(
+      matchesTriggerItemQuery(
+        item({ id: "x", label: "Translate Text" }),
+        "late",
+      ),
+    ).toBe(true);
+  });
+
+  it("matches against the description when present", () => {
+    expect(
+      matchesTriggerItemQuery(
+        item({ id: "x", label: "y", description: "Condense the thread" }),
+        "condense",
+      ),
+    ).toBe(true);
+  });
+
+  it("does not match when no field contains the query", () => {
+    expect(
+      matchesTriggerItemQuery(item({ description: "nothing here" }), "zzz"),
+    ).toBe(false);
+  });
+
+  it("does not throw on items without a description", () => {
+    expect(matchesTriggerItemQuery(item({}), "zzz")).toBe(false);
+  });
+});

package/src/primitives/composer/trigger/matchesTriggerItemQuery.ts

@@ -0,0 +1,13 @@
+import type { Unstable_TriggerItem } from "@assistant-ui/core";
+
+export function matchesTriggerItemQuery(
+  item: Unstable_TriggerItem,
+  lowerQuery: string,
+): boolean {
+  if (!lowerQuery) return true;
+  return (
+    item.id.toLowerCase().includes(lowerQuery) ||
+    item.label.toLowerCase().includes(lowerQuery) ||
+    (item.description?.toLowerCase().includes(lowerQuery) ?? false)
+  );
+}

package/src/primitives/composer/trigger/triggerNavigationResource.ts

@@ -5,14 +5,7 @@ import type {
   Unstable_TriggerCategory,
   Unstable_TriggerItem,
 } from "@assistant-ui/core";
-
-function matchesQuery(item: Unstable_TriggerItem, lower: string): boolean {
-  return (
-    item.id.toLowerCase().includes(lower) ||
-    item.label.toLowerCase().includes(lower) ||
-    (item.description?.toLowerCase().includes(lower) ?? false)
-  );
-}
+import { matchesTriggerItemQuery } from "./matchesTriggerItemQuery";
 
 export type TriggerNavigationResourceOutput = {
   /** Filtered categories visible in the list (empty in search mode). */
@@ -76,7 +69,7 @@ const useTriggerNavigationResource = ({
     const lower = query.toLowerCase();
     for (const cat of categories) {
       for (const item of adapter.categoryItems(cat.id)) {
-        if (matchesQuery(item, lower)) {
+        if (matchesTriggerItemQuery(item, lower)) {
           all.push(item);
         }
       }
@@ -97,7 +90,7 @@ const useTriggerNavigationResource = ({
     if (isSearchMode) return searchResults ?? [];
     if (!query) return allItems;
     const lower = query.toLowerCase();
-    return allItems.filter((item) => matchesQuery(item, lower));
+    return allItems.filter((item) => matchesTriggerItemQuery(item, lower));
   }, [allItems, query, isSearchMode, searchResults]);
 
   const navigableList = useMemo(() => {

package/src/primitives/thread/useThreadViewportAutoScroll.ts

@@ -3,7 +3,11 @@
 import { useComposedRefs } from "radix-ui/internal";
 import { useCallback, useLayoutEffect, useRef, type RefCallback } from "react";
 import { useAuiEvent, useAuiState } from "@assistant-ui/store";
-import { isUserScrollUp } from "@assistant-ui/store/client";
+import {
+  isUserScrollUp,
+  isViewportAtBottom,
+  viewportOverflows,
+} from "@assistant-ui/store/client";
 import { useOnResizeContent } from "../../utils/hooks/useOnResizeContent";
 import { useOnScrollToBottom } from "../../utils/hooks/useOnScrollToBottom";
 import { useManagedRef } from "../../utils/hooks/useManagedRef";
@@ -114,9 +118,7 @@ export const useThreadViewportAutoScroll = <TElement extends HTMLElement>({
     if (!div) return;
 
     const isAtBottom = threadViewportStore.getState().isAtBottom;
-    const newIsAtBottom =
-      Math.abs(div.scrollHeight - div.scrollTop - div.clientHeight) <= 1 ||
-      div.scrollHeight <= div.clientHeight;
+    const newIsAtBottom = isViewportAtBottom(div);
 
     const isInFlightDownwardScroll =
       !newIsAtBottom && lastScrollTop.current < div.scrollTop;
@@ -135,8 +137,7 @@ export const useThreadViewportAutoScroll = <TElement extends HTMLElement>({
       if (newIsAtBottom) {
         // newIsAtBottom is ambiguous when the viewport doesn't overflow —
         // keep intent alive until content can actually scroll
-        const viewportOverflows = div.scrollHeight > div.clientHeight + 1;
-        if (viewportOverflows) {
+        if (viewportOverflows(div)) {
           scrollingToBottomBehaviorRef.current = null;
         }
         if (autoScroll) followBottomRef.current = true;

package/src/sandbox-host/SandboxHost.test.tsx

@@ -5,7 +5,8 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
 const { renderHtmlMock } = vi.hoisted(() => ({ renderHtmlMock: vi.fn() }));
 
-vi.mock("safe-content-frame", () => ({
+vi.mock("safe-content-frame", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("safe-content-frame")>()),
   SafeContentFrame: class {
     renderHtml = renderHtmlMock;
   },
@@ -34,7 +35,7 @@ function fakeRendered() {
     origin: "https://fake.scf.test",
     sendMessage: vi.fn(),
     dispose: vi.fn(),
-    fullyLoadedPromiseWithTimeout: vi.fn(),
+    fullyLoadedPromiseWithTimeout: vi.fn(() => new Promise<void>(() => {})),
   };
 }
 
@@ -140,6 +141,123 @@ describe("SandboxHost", () => {
     expect(onMessage).toHaveBeenCalledTimes(1);
   });
 
+  it("reports a frame that never finishes loading through onError", async () => {
+    const rendered = fakeRendered();
+    rendered.fullyLoadedPromiseWithTimeout.mockImplementation(() =>
+      Promise.reject(
+        Object.assign(new Error("Failed to load shim: https://fake.scf.test"), {
+          code: "shim-unavailable",
+        }),
+      ),
+    );
+    renderHtmlMock.mockResolvedValue(rendered);
+    const onError = vi.fn();
+
+    await act(async () => {
+      root.render(
+        <SandboxHost
+          content={{ html: "" }}
+          contentKey="k"
+          createBridge={() => ({ onMessage: vi.fn(), dispose: vi.fn() })}
+          onError={onError}
+        />,
+      );
+    });
+    await flush();
+
+    expect(onError).toHaveBeenCalledTimes(1);
+    expect(onError.mock.calls[0]![0]).toBeInstanceOf(Error);
+    expect(onError.mock.calls[0]![0]).toMatchObject({
+      code: "shim-unavailable",
+      message: "Failed to load shim: https://fake.scf.test",
+    });
+    expect(rendered.dispose).not.toHaveBeenCalled();
+  });
+
+  it("stays silent when the shim started and the render is merely slow", async () => {
+    const rendered = fakeRendered();
+    rendered.fullyLoadedPromiseWithTimeout.mockImplementation(() =>
+      Promise.reject(
+        Object.assign(new Error("Timeout"), { code: "render-timeout" }),
+      ),
+    );
+    renderHtmlMock.mockResolvedValue(rendered);
+    const onError = vi.fn();
+
+    await act(async () => {
+      root.render(
+        <SandboxHost
+          content={{ html: "" }}
+          contentKey="k"
+          createBridge={() => ({ onMessage: vi.fn(), dispose: vi.fn() })}
+          onError={onError}
+        />,
+      );
+    });
+    await flush();
+
+    expect(rendered.fullyLoadedPromiseWithTimeout).toHaveBeenCalled();
+    expect(onError).not.toHaveBeenCalled();
+    expect(rendered.dispose).not.toHaveBeenCalled();
+  });
+
+  it("reports a load failure that carries no shim code", async () => {
+    const rendered = fakeRendered();
+    rendered.fullyLoadedPromiseWithTimeout.mockImplementation(() =>
+      Promise.reject(new Error("Failed to load iframe")),
+    );
+    renderHtmlMock.mockResolvedValue(rendered);
+    const onError = vi.fn();
+
+    await act(async () => {
+      root.render(
+        <SandboxHost
+          content={{ html: "" }}
+          contentKey="k"
+          createBridge={() => ({ onMessage: vi.fn(), dispose: vi.fn() })}
+          onError={onError}
+        />,
+      );
+    });
+    await flush();
+
+    expect(onError).toHaveBeenCalledTimes(1);
+    expect(onError.mock.calls[0]![0].message).toBe("Failed to load iframe");
+  });
+
+  it("does not report a load failure after unmount", async () => {
+    const rendered = fakeRendered();
+    let rejectLoad: (error: Error) => void;
+    rendered.fullyLoadedPromiseWithTimeout.mockReturnValue(
+      new Promise<void>((_, reject) => {
+        rejectLoad = reject;
+      }),
+    );
+    renderHtmlMock.mockResolvedValue(rendered);
+    const onError = vi.fn();
+
+    await act(async () => {
+      root.render(
+        <SandboxHost
+          content={{ html: "" }}
+          contentKey="k"
+          createBridge={() => ({ onMessage: vi.fn(), dispose: vi.fn() })}
+          onError={onError}
+        />,
+      );
+    });
+    await flush();
+
+    await act(async () => {
+      root.unmount();
+    });
+    rejectLoad!(new Error("Timeout"));
+    await flush();
+
+    expect(rendered.fullyLoadedPromiseWithTimeout).toHaveBeenCalled();
+    expect(onError).not.toHaveBeenCalled();
+  });
+
   it("clamps the bridge-reported height to maxHeight and ignores invalid values", async () => {
     const rendered = fakeRendered();
     renderHtmlMock.mockResolvedValue(rendered);

package/src/sandbox-host/SandboxHost.tsx

@@ -8,14 +8,16 @@ import {
   useState,
 } from "react";
 import {
+  isShimLoadError,
   type RenderedFrame,
   SafeContentFrame,
   type SandboxOption,
 } from "safe-content-frame";
-import { invokeCallbackSafely } from "../utils/invokeCallbackSafely";
+import { invokeUserCallback } from "@assistant-ui/core/internal";
 
 const DEFAULT_PRODUCT = "assistant-ui-sandbox";
 const DEFAULT_MAX_HEIGHT = 800;
+const LOAD_TIMEOUT_MS = 10_000;
 
 export type SandboxHostConfig = {
   sandbox?: SandboxOption[];
@@ -108,6 +110,16 @@ export function SandboxHost({
 
     const { content: liveContent, sandbox: sb } = liveRef.current;
 
+    const reportError = (err: unknown) => {
+      const error = err instanceof Error ? err : new Error(String(err));
+      invokeUserCallback(
+        "assistant-ui",
+        "SandboxHost onError",
+        liveRef.current.onError?.bind(liveRef.current),
+        error,
+      );
+    };
+
     const scf = new SafeContentFrame(sb?.product ?? DEFAULT_PRODUCT, {
       ...(sb?.sandbox !== undefined && { sandbox: sb.sandbox }),
       ...(sb?.useShadowDom !== undefined && { useShadowDom: sb.useShadowDom }),
@@ -159,16 +171,24 @@ export function SandboxHost({
           bridge?.onMessage(event);
         };
         window.addEventListener("message", onMessage);
+
+        // renderHtml resolves at iframe load, which a shim that was never
+        // served also reaches, so a completed render is only known once the
+        // frame says so. render-timeout is excluded because the shim is
+        // running and the guest may still paint, and reporting it would leave
+        // a host that renders an error state showing one over a frame that
+        // recovers.
+        rendered.fullyLoadedPromiseWithTimeout(LOAD_TIMEOUT_MS).catch((err) => {
+          if (cancelled) return;
+          if (isShimLoadError(err) && err.code === "render-timeout") return;
+          reportError(err);
+        });
       })
       .catch((err) => {
         if (cancelled) return;
         frame?.dispose();
         frame = null;
-        const error = err instanceof Error ? err : new Error(String(err));
-        invokeCallbackSafely(
-          () => liveRef.current.onError?.(error),
-          "SandboxHost onError",
-        );
+        reportError(err);
       });
 
     return () => {

package/src/unstable/useComposerInputHistory.test.tsx

@@ -23,7 +23,8 @@ vi.mock("@assistant-ui/store", () => ({
     },
   }),
 }));
-vi.mock("@assistant-ui/tap", () => ({
+vi.mock("@assistant-ui/tap", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@assistant-ui/tap")>()),
   flushTapSync: (fn: () => void) => fn(),
 }));
 vi.mock("../primitives/composer/trigger/TriggerPopoverRootContext", () => ({