@assistant-ui/react 0.15.15 → 0.15.17

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

@@ -1,5 +1,5 @@
 // @vitest-environment jsdom
-import { act } from "react";
+import { act, startTransition, Suspense } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
@@ -229,6 +229,67 @@ describe("SandboxHost", () => {
     expect(onError.mock.calls[0]![0].message).toBe("boom");
   });
 
+  it("does not report render failures after unmount", async () => {
+    let rejectRender!: (error: Error) => void;
+    renderHtmlMock.mockReturnValue(
+      new Promise((_, reject) => {
+        rejectRender = reject;
+      }),
+    );
+    const onError = vi.fn();
+
+    await act(async () => {
+      root.render(
+        <SandboxHost
+          content={{ html: "" }}
+          contentKey="k"
+          createBridge={() => ({ onMessage: vi.fn(), dispose: vi.fn() })}
+          onError={onError}
+        />,
+      );
+    });
+
+    await act(async () => {
+      root.unmount();
+    });
+    rejectRender(new Error("late failure"));
+    await flush();
+
+    expect(onError).not.toHaveBeenCalled();
+  });
+
+  it("contains failures thrown by onError", async () => {
+    const renderError = new Error("render failed");
+    const callbackError = new Error("error callback failed");
+    renderHtmlMock.mockRejectedValue(renderError);
+    const consoleError = vi
+      .spyOn(console, "error")
+      .mockImplementation(() => {});
+
+    try {
+      await act(async () => {
+        root.render(
+          <SandboxHost
+            content={{ html: "" }}
+            contentKey="k"
+            createBridge={() => ({ onMessage: vi.fn(), dispose: vi.fn() })}
+            onError={() => {
+              throw callbackError;
+            }}
+          />,
+        );
+      });
+      await flush();
+
+      expect(consoleError).toHaveBeenCalledWith(
+        "[assistant-ui] SandboxHost onError callback threw an error",
+        callbackError,
+      );
+    } finally {
+      consoleError.mockRestore();
+    }
+  });
+
   it("disposes the rendered frame when bridge creation fails", async () => {
     const rendered = fakeRendered();
     renderHtmlMock.mockResolvedValue(rendered);
@@ -257,4 +318,48 @@ describe("SandboxHost", () => {
     });
     expect(rendered.dispose).toHaveBeenCalledTimes(1);
   });
+
+  it("keeps bridge options scoped to committed renders", async () => {
+    let resolveRender!: (frame: ReturnType<typeof fakeRendered>) => void;
+    renderHtmlMock.mockReturnValue(
+      new Promise((resolve) => {
+        resolveRender = resolve;
+      }),
+    );
+    const rendered = fakeRendered();
+    const bridge = { onMessage: vi.fn(), dispose: vi.fn() };
+    const createBridgeA = vi.fn(() => bridge);
+    const createBridgeB = vi.fn(() => bridge);
+    const interruptedRender = vi.fn();
+    const pending = new Promise<never>(() => {});
+    const Block = () => {
+      interruptedRender();
+      throw pending;
+    };
+    const view = (createBridge: typeof createBridgeA, blocked: boolean) => (
+      <Suspense fallback={null}>
+        <SandboxHost
+          content={{ html: "" }}
+          contentKey="k"
+          createBridge={createBridge}
+        />
+        {blocked ? <Block /> : null}
+      </Suspense>
+    );
+
+    await act(async () => {
+      root.render(view(createBridgeA, false));
+    });
+    act(() => {
+      startTransition(() => root.render(view(createBridgeB, true)));
+    });
+    await vi.waitFor(() => expect(interruptedRender).toHaveBeenCalled());
+    await act(async () => {
+      resolveRender(rendered);
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+
+    expect(createBridgeA).toHaveBeenCalledTimes(1);
+    expect(createBridgeB).not.toHaveBeenCalled();
+  });
 });

package/src/sandbox-host/SandboxHost.tsx

@@ -1,11 +1,18 @@
 "use client";
 
-import { type CSSProperties, useEffect, useRef, useState } from "react";
+import {
+  type CSSProperties,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
 import {
   type RenderedFrame,
   SafeContentFrame,
   type SandboxOption,
 } from "safe-content-frame";
+import { invokeCallbackSafely } from "../utils/invokeCallbackSafely";
 
 const DEFAULT_PRODUCT = "assistant-ui-sandbox";
 const DEFAULT_MAX_HEIGHT = 800;
@@ -80,8 +87,15 @@ export function SandboxHost({
     undefined,
   );
 
-  const liveRef = useRef<LiveSnapshot>(null!);
-  liveRef.current = { content, sandbox, createBridge, onError };
+  const liveRef = useRef<LiveSnapshot>({
+    content,
+    sandbox,
+    createBridge,
+    onError,
+  });
+  useLayoutEffect(() => {
+    liveRef.current = { content, sandbox, createBridge, onError };
+  }, [content, sandbox, createBridge, onError]);
 
   useEffect(() => {
     const container = containerRef.current;
@@ -147,10 +161,13 @@ export function SandboxHost({
         window.addEventListener("message", onMessage);
       })
       .catch((err) => {
+        if (cancelled) return;
         frame?.dispose();
         frame = null;
-        liveRef.current.onError?.(
-          err instanceof Error ? err : new Error(String(err)),
+        const error = err instanceof Error ? err : new Error(String(err));
+        invokeCallbackSafely(
+          () => liveRef.current.onError?.(error),
+          "SandboxHost onError",
         );
       });
 

package/src/tests/RemoteThreadListRuntime.adapterProvider.test.tsx

@@ -1,7 +1,7 @@
 // @vitest-environment jsdom
 
 import { act, render, waitFor } from "@testing-library/react";
-import type { FC, PropsWithChildren } from "react";
+import { useState, type FC, type PropsWithChildren } from "react";
 import { describe, expect, it } from "vitest";
 import {
   RuntimeAdapterProvider,
@@ -107,6 +107,36 @@ describe("RemoteThreadListAdapter.unstable_Provider", () => {
     expect(capture.adapters?.history).toBe(dummyHistory);
   });
 
+  it("picks up a post-mount useAdapters bag", async () => {
+    const capture: { adapters: CapturedAdapters } = { adapters: null };
+    const firstHistory: ThreadHistoryAdapter = {
+      load: async () => ({ messages: [] }),
+      append: async () => {},
+    };
+    const secondHistory: ThreadHistoryAdapter = {
+      load: async () => ({ messages: [] }),
+      append: async () => {},
+    };
+
+    let bump: (() => void) | undefined;
+    const adapter = makeAdapter({
+      unstable_useAdapters: function useTestAdapters() {
+        const [swapped, setSwapped] = useState(false);
+        bump = () => setSwapped(true);
+        return { history: swapped ? secondHistory : firstHistory };
+      },
+    });
+
+    await renderAndWaitForBinder(adapter, capture);
+    expect(capture.adapters?.history).toBe(firstHistory);
+
+    await act(async () => {
+      bump!();
+    });
+
+    expect(capture.adapters?.history).toBe(secondHistory);
+  });
+
   it("picks up a swapped Provider on re-render", async () => {
     const capture: { adapters: CapturedAdapters } = { adapters: null };
     const firstHistory: ThreadHistoryAdapter = {

package/src/unstable/useLiveCompletionAdapter.test.tsx

@@ -1,5 +1,6 @@
 /** @vitest-environment jsdom */
-import { act, renderHook } from "@testing-library/react";
+import { startTransition, Suspense } from "react";
+import { act, render, renderHook } from "@testing-library/react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import type { Unstable_TriggerItem } from "@assistant-ui/core";
 import { unstable_useLiveCompletionAdapter } from "./useLiveCompletionAdapter";
@@ -203,6 +204,121 @@ describe("unstable_useLiveCompletionAdapter", () => {
     ]);
   });
 
+  it("keeps cached results when only the fetcher identity changes", async () => {
+    const first = vi.fn(async () => [item("alice")]);
+    const second = vi.fn(async () => [item("bob")]);
+    const { result, rerender } = renderHook(
+      ({ fetcher }) =>
+        unstable_useLiveCompletionAdapter({
+          fetcher,
+          cacheKey: "workspace-a",
+          debounceMs: 0,
+        }),
+      { initialProps: { fetcher: first } },
+    );
+
+    await act(async () => {
+      result.current.adapter.search!("alice");
+      await vi.advanceTimersByTimeAsync(0);
+    });
+    expect(result.current.adapter.search!("alice")).toEqual([item("alice")]);
+
+    await act(async () => {
+      rerender({ fetcher: second });
+      await vi.advanceTimersByTimeAsync(0);
+    });
+    expect(second).not.toHaveBeenCalled();
+    expect(result.current.adapter.search!("alice")).toEqual([item("alice")]);
+  });
+
+  it("keeps pending queries scoped to the committed fetcher", async () => {
+    const fetcherA = vi.fn(async () => [item("workspace-a")]);
+    const fetcherB = vi.fn(async () => [item("workspace-b")]);
+    const interruptedRender = vi.fn();
+    const pending = new Promise<never>(() => {});
+    let adapter!: ReturnType<
+      typeof unstable_useLiveCompletionAdapter
+    >["adapter"];
+    const Harness = ({
+      fetcher,
+      cacheKey,
+      blocked,
+    }: {
+      fetcher: typeof fetcherA;
+      cacheKey: string;
+      blocked: boolean;
+    }) => {
+      const result = unstable_useLiveCompletionAdapter({
+        fetcher,
+        cacheKey,
+        debounceMs: 50,
+      });
+      if (blocked) {
+        interruptedRender();
+        throw pending;
+      }
+      adapter = result.adapter;
+      return null;
+    };
+    const view = (
+      fetcher: typeof fetcherA,
+      cacheKey: string,
+      blocked: boolean,
+    ) => (
+      <Suspense fallback={null}>
+        <Harness fetcher={fetcher} cacheKey={cacheKey} blocked={blocked} />
+      </Suspense>
+    );
+    const rendered = render(view(fetcherA, "workspace-a", false));
+
+    await act(async () => {
+      adapter.search!("alice");
+      await vi.advanceTimersByTimeAsync(0);
+    });
+    act(() => {
+      startTransition(() =>
+        rendered.rerender(view(fetcherB, "workspace-b", true)),
+      );
+    });
+    expect(interruptedRender).toHaveBeenCalled();
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(50);
+    });
+
+    expect(fetcherA).toHaveBeenCalledOnce();
+    expect(fetcherB).not.toHaveBeenCalled();
+  });
+
+  it("drops a pending result when only the cache key changes", async () => {
+    let resolveFirst!: (items: readonly Unstable_TriggerItem[]) => void;
+    const first = new Promise<readonly Unstable_TriggerItem[]>((resolve) => {
+      resolveFirst = resolve;
+    });
+    const fetcher = vi.fn(() => first);
+    const { result, rerender } = renderHook(
+      ({ cacheKey }) =>
+        unstable_useLiveCompletionAdapter({ fetcher, cacheKey, debounceMs: 0 }),
+      { initialProps: { cacheKey: "workspace-a" } },
+    );
+
+    await act(async () => {
+      result.current.adapter.search!("alice");
+      await vi.advanceTimersByTimeAsync(0);
+    });
+    expect(fetcher).toHaveBeenCalledTimes(1);
+
+    await act(async () => {
+      rerender({ cacheKey: "workspace-b" });
+    });
+    await act(async () => {
+      resolveFirst([item("workspace-a")]);
+    });
+
+    expect(result.current.isLoading).toBe(false);
+    expect(fetcher).toHaveBeenCalledTimes(1);
+    expect(result.current.adapter.search!("alice")).toEqual([]);
+  });
+
   it("allows a failed query to be retried", async () => {
     const fetcher = vi
       .fn<(query: string) => Promise<readonly Unstable_TriggerItem[]>>()

package/src/unstable/useLiveCompletionAdapter.ts

@@ -74,7 +74,10 @@ export function unstable_useLiveCompletionAdapter(
   const [isLoading, setIsLoading] = useState(false);
 
   const fetcherRef = useRef(fetcher);
-  fetcherRef.current = fetcher;
+  // The debounce timer must only observe fetchers from committed renders.
+  useLayoutEffect(() => {
+    fetcherRef.current = fetcher;
+  }, [fetcher]);
 
   const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const tokenRef = useRef(0);

package/src/unstable/useSlashCommandAdapter.test.tsx

@@ -0,0 +1,141 @@
+// @vitest-environment jsdom
+
+import { act, renderHook } from "@testing-library/react";
+import { startTransition, Suspense, type PropsWithChildren } from "react";
+import { describe, expect, it, vi } from "vitest";
+import {
+  unstable_useSlashCommandAdapter,
+  type Unstable_SlashCommand,
+} from "./useSlashCommandAdapter";
+
+const command = (
+  label: string,
+  execute: () => void,
+): Unstable_SlashCommand => ({
+  id: "run",
+  label,
+  execute,
+});
+
+describe("unstable_useSlashCommandAdapter", () => {
+  it("keeps commands scoped to committed renders", () => {
+    const executeA = vi.fn();
+    const executeB = vi.fn();
+    const commandsA = [command("Workspace A", executeA)];
+    const commandsB = [command("Workspace B", executeB)];
+    const renderedLabel = vi.fn();
+    const interruptedRender = vi.fn();
+    const pending = new Promise<never>(() => {});
+    let blocked = false;
+
+    const Blocker = () => {
+      if (blocked) {
+        interruptedRender();
+        throw pending;
+      }
+      return null;
+    };
+    const Wrapper = ({ children }: PropsWithChildren) => (
+      <Suspense fallback={null}>
+        {children}
+        <Blocker />
+      </Suspense>
+    );
+
+    const { result, rerender } = renderHook(
+      ({ commands }) => {
+        renderedLabel(commands[0]?.label);
+        return unstable_useSlashCommandAdapter({ commands });
+      },
+      {
+        initialProps: { commands: commandsA },
+        wrapper: Wrapper,
+      },
+    );
+
+    act(() => {
+      blocked = true;
+      startTransition(() => rerender({ commands: commandsB }));
+    });
+
+    expect(interruptedRender).toHaveBeenCalled();
+    expect(renderedLabel).toHaveBeenCalledWith("Workspace B");
+    expect(result.current.adapter.search?.("")).toEqual([
+      { id: "run", type: "command", label: "Workspace A" },
+    ]);
+
+    result.current.action.onExecute({
+      id: "run",
+      type: "command",
+      label: "Workspace A",
+    });
+    expect(executeA).toHaveBeenCalledOnce();
+    expect(executeB).not.toHaveBeenCalled();
+  });
+
+  it("updates search while keeping actions stable after commands commit", () => {
+    const executeA = vi.fn();
+    const executeB = vi.fn();
+    const commandsA = [command("Workspace A", executeA)];
+    const commandsB = [command("Workspace B", executeB)];
+    const { result, rerender } = renderHook(
+      ({ commands }) => unstable_useSlashCommandAdapter({ commands }),
+      { initialProps: { commands: commandsA } },
+    );
+    const initial = result.current;
+
+    rerender({ commands: commandsB });
+
+    expect(result.current.adapter).not.toBe(initial.adapter);
+    expect(result.current.action).toBe(initial.action);
+    expect(result.current.adapter.search?.("")).toEqual([
+      { id: "run", type: "command", label: "Workspace B" },
+    ]);
+
+    result.current.action.onExecute({
+      id: "run",
+      type: "command",
+      label: "Workspace B",
+    });
+    expect(executeA).not.toHaveBeenCalled();
+    expect(executeB).toHaveBeenCalledOnce();
+  });
+
+  it("matches the displayed label for a command with no explicit label", () => {
+    const { result } = renderHook(() =>
+      unstable_useSlashCommandAdapter({
+        commands: [{ id: "summarize", execute: vi.fn() }],
+      }),
+    );
+
+    expect(result.current.adapter.search?.("/")).toEqual([
+      { id: "summarize", type: "command", label: "/summarize" },
+    ]);
+    expect(result.current.adapter.search?.("sum")).toEqual([
+      { id: "summarize", type: "command", label: "/summarize" },
+    ]);
+    expect(result.current.adapter.search?.("nope")).toEqual([]);
+  });
+
+  it("keeps the adapter stable for equivalent inline commands", () => {
+    const executeA = vi.fn();
+    const executeB = vi.fn();
+    const { result, rerender } = renderHook(
+      ({ execute }) =>
+        unstable_useSlashCommandAdapter({
+          commands: [{ id: "run", label: "Run", execute }],
+        }),
+      { initialProps: { execute: executeA } },
+    );
+    const initialAdapter = result.current.adapter;
+
+    rerender({ execute: executeB });
+
+    expect(result.current.adapter).toBe(initialAdapter);
+    act(() =>
+      result.current.action.onExecute(result.current.adapter.search!("")[0]!),
+    );
+    expect(executeA).not.toHaveBeenCalled();
+    expect(executeB).toHaveBeenCalledOnce();
+  });
+});

package/src/unstable/useSlashCommandAdapter.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { useMemo, useRef } from "react";
+import { useLayoutEffect, useMemo, useRef } from "react";
 import type {
   Unstable_TriggerAdapter,
   Unstable_TriggerItem,
@@ -61,34 +61,51 @@ export function unstable_useSlashCommandAdapter(
   const { commands, removeOnExecute } = options;
 
   const commandsRef = useRef(commands);
-  commandsRef.current = commands;
+  const committedItemsRef = useRef<readonly Unstable_TriggerItem[]>(undefined);
+  const nextItems = commands.map(toItem);
+  // A referential cache, never state: `items` is always structurally equal to
+  // `nextItems`, so the render-time read cannot change what the adapter shows.
+  const items = areTriggerItemsEqual(committedItemsRef.current, nextItems)
+    ? committedItemsRef.current
+    : nextItems;
 
-  return useMemo(() => {
-    const adapter: Unstable_TriggerAdapter = {
+  // The adapter's callbacks must only observe commands from committed renders.
+  useLayoutEffect(() => {
+    commandsRef.current = commands;
+    committedItemsRef.current = items;
+  }, [commands, items]);
+
+  const adapter = useMemo<Unstable_TriggerAdapter>(
+    () => ({
       categories: () => [],
       categoryItems: () => [],
       search: (query: string) => {
         const lower = query.toLowerCase();
-        return commandsRef.current
-          .filter((c) => matchesQuery(c, lower))
-          .map(toItem);
+        return items.filter((item) => matchesQuery(item, lower));
       },
-    };
+    }),
+    [items],
+  );
 
-    const action: Unstable_SlashCommandAction = {
+  const action = useMemo<Unstable_SlashCommandAction>(
+    () => ({
       onExecute: (item) => {
         commandsRef.current.find((c) => c.id === item.id)?.execute();
       },
       ...(removeOnExecute !== undefined ? { removeOnExecute } : {}),
-    };
+    }),
+    [removeOnExecute],
+  );
 
-    return {
+  return useMemo(
+    () => ({
       adapter,
       action,
       ...(options.iconMap ? { iconMap: options.iconMap } : {}),
       ...(options.fallbackIcon ? { fallbackIcon: options.fallbackIcon } : {}),
-    };
-  }, [removeOnExecute, options.iconMap, options.fallbackIcon]);
+    }),
+    [adapter, action, options.iconMap, options.fallbackIcon],
+  );
 }
 
 function toItem(cmd: Unstable_SlashCommand): Unstable_TriggerItem {
@@ -101,10 +118,28 @@ function toItem(cmd: Unstable_SlashCommand): Unstable_TriggerItem {
   };
 }
 
-function matchesQuery(cmd: Unstable_SlashCommand, lower: string): boolean {
+function matchesQuery(item: Unstable_TriggerItem, lower: string): boolean {
   if (!lower) return true;
-  if (cmd.id.toLowerCase().includes(lower)) return true;
-  if (cmd.label?.toLowerCase().includes(lower)) return true;
-  if (cmd.description?.toLowerCase().includes(lower)) return true;
+  if (item.id.toLowerCase().includes(lower)) return true;
+  if (item.label.toLowerCase().includes(lower)) return true;
+  if (item.description?.toLowerCase().includes(lower)) return true;
   return false;
 }
+
+function areTriggerItemsEqual(
+  previous: readonly Unstable_TriggerItem[] | undefined,
+  next: readonly Unstable_TriggerItem[],
+): previous is readonly Unstable_TriggerItem[] {
+  if (!previous || previous.length !== next.length) return false;
+
+  return previous.every((item, index) => {
+    const nextItem = next[index];
+    return (
+      nextItem !== undefined &&
+      item.id === nextItem.id &&
+      item.label === nextItem.label &&
+      item.description === nextItem.description &&
+      item.metadata?.icon === nextItem.metadata?.icon
+    );
+  });
+}

package/src/utils/Primitive.tsx

@@ -11,10 +11,10 @@ import {
   forwardRef,
   isValidElement,
 } from "react";
-import { Primitive as RadixPrimitive } from "@radix-ui/react-primitive";
+import { Primitive as RadixPrimitive } from "radix-ui/internal";
 
 /**
- * Thin wrapper around `@radix-ui/react-primitive` that adds `render` prop support.
+ * Thin wrapper around Radix `Primitive` that adds `render` prop support.
  *
  * When `render` is provided, it is converted to the equivalent `asChild` pattern:
  *   render={<Comp props />} + children  →  asChild + <Comp props>{children}</Comp>

package/src/utils/createActionButton.tsx

@@ -5,7 +5,7 @@ import {
   type MouseEventHandler,
 } from "react";
 import { Primitive } from "./Primitive";
-import { composeEventHandlers } from "@radix-ui/primitive";
+import { composeEventHandlers } from "radix-ui/internal";
 
 type ActionButtonCallback<TProps> = (
   props: TProps,

package/src/utils/hooks/useOnResizeContent.ts

@@ -1,4 +1,4 @@
-import { useCallbackRef } from "@radix-ui/react-use-callback-ref";
+import { useCallbackRef } from "radix-ui/internal";
 import { useCallback } from "react";
 import { useManagedRef } from "./useManagedRef";
 

package/src/utils/hooks/useOnScrollToBottom.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallbackRef } from "@radix-ui/react-use-callback-ref";
+import { useCallbackRef } from "radix-ui/internal";
 import { useEffect } from "react";
 import { useThreadViewport } from "../../context/react/ThreadViewportContext";
 

package/src/utils/invokeCallbackSafely.ts

@@ -0,0 +1,11 @@
+export const invokeCallbackSafely = (invoke: () => unknown, name: string) => {
+  const reportFailure = (error: unknown) => {
+    console.error(`[assistant-ui] ${name} callback threw an error`, error);
+  };
+
+  try {
+    void Promise.resolve(invoke()).catch(reportFailure);
+  } catch (error) {
+    reportFailure(error);
+  }
+};