@assistant-ui/react 0.15.16 → 0.15.17

package/src/primitives/threadListItem/ThreadListItemTrigger.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { forwardRef } from "react";
-import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { useComposedRefs } from "radix-ui/internal";
 import {
   type ActionButtonElement,
   type ActionButtonProps,

package/src/primitives/threadListItemMore/ThreadListItemMoreContent.tsx

@@ -6,7 +6,7 @@ import {
   forwardRef,
 } from "react";
 import { Direction, DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
-import { composeEventHandlers } from "@radix-ui/primitive";
+import { composeEventHandlers } from "radix-ui/internal";
 import type { WithRenderPropProps } from "../../utils/Primitive";
 import { DropdownMenuRenderContent } from "../dropdownMenuRenderPrimitives";
 import { useThreadListItemFocus } from "../threadListFocusGroup";

package/src/primitives/threadListItemMore/ThreadListItemMoreRoot.tsx

@@ -8,7 +8,7 @@ import {
   useContext,
 } from "react";
 import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
-import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { useControllableState } from "radix-ui/internal";
 import { type ScopedProps, useDropdownMenuScope } from "./scope";
 
 const ThreadListItemMoreSetOpenContext = createContext<

package/src/primitives/threadListItemMore/ThreadListItemMoreTrigger.tsx

@@ -5,8 +5,8 @@ import {
   Direction,
   type DropdownMenu as DropdownMenuPrimitive,
 } from "radix-ui";
-import { useComposedRefs } from "@radix-ui/react-compose-refs";
-import { composeEventHandlers } from "@radix-ui/primitive";
+import { useComposedRefs } from "radix-ui/internal";
+import { composeEventHandlers } from "radix-ui/internal";
 import type { WithRenderPropProps } from "../../utils/Primitive";
 import { DropdownMenuRenderTrigger } from "../dropdownMenuRenderPrimitives";
 import { useThreadListItemFocus } from "../threadListFocusGroup";

package/src/primitives/threadListItemMore/scope.ts

@@ -1,8 +1,8 @@
 import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
-import type { Scope } from "@radix-ui/react-context";
+import type { Context } from "radix-ui/internal";
 
 export const useDropdownMenuScope: ReturnType<
   typeof DropdownMenuPrimitive.createDropdownMenuScope
 > = DropdownMenuPrimitive.createDropdownMenuScope();
 
-export type ScopedProps<P> = P & { __scopeThreadListItemMore?: Scope };
+export type ScopedProps<P> = P & { __scopeThreadListItemMore?: Context.Scope };

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";
 
@@ -318,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,6 +1,12 @@
 "use client";
 
-import { type CSSProperties, useEffect, useRef, useState } from "react";
+import {
+  type CSSProperties,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
 import {
   type RenderedFrame,
   SafeContentFrame,
@@ -81,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;

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";
@@ -230,6 +231,64 @@ describe("unstable_useLiveCompletionAdapter", () => {
     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) => {

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/smooth/useSmooth.ts

@@ -8,7 +8,7 @@ import type {
   TextMessagePart,
   MessagePartState,
 } from "@assistant-ui/core";
-import { useCallbackRef } from "@radix-ui/react-use-callback-ref";
+import { useCallbackRef } from "radix-ui/internal";
 import { useMediaQuery } from "../hooks/useMediaQuery";
 import { useSmoothStatusStore } from "./SmoothContext";
 import { writableStore } from "../../context/ReadonlyStore";

package/dist/legacy-runtime/runtime/MessagePartRuntime.d.ts

@@ -1,3 +0,0 @@
-import { MessagePartRuntime, MessagePartState } from "@assistant-ui/core";
-import { MessagePartRuntimeImpl } from "@assistant-ui/core/internal";
-export { type MessagePartRuntime, MessagePartRuntimeImpl, type MessagePartState };

package/dist/legacy-runtime/runtime/MessagePartRuntime.js

@@ -1,2 +0,0 @@
-import { MessagePartRuntimeImpl } from "@assistant-ui/core/internal";
-export { MessagePartRuntimeImpl };

package/dist/legacy-runtime/runtime/MessageRuntime.d.ts

@@ -1,3 +0,0 @@
-import { MessageRuntime, MessageState } from "@assistant-ui/core";
-import { MessageRuntimeImpl, MessageStateBinding } from "@assistant-ui/core/internal";
-export { type MessageRuntime, MessageRuntimeImpl, type MessageState, type MessageStateBinding };

package/dist/legacy-runtime/runtime/MessageRuntime.js

@@ -1,2 +0,0 @@
-import { MessageRuntimeImpl } from "@assistant-ui/core/internal";
-export { MessageRuntimeImpl };

package/dist/legacy-runtime/runtime/ThreadListRuntime.d.ts

@@ -1,3 +0,0 @@
-import { ThreadListRuntime, ThreadListState } from "@assistant-ui/core";
-import { ThreadListRuntimeCoreBinding, ThreadListRuntimeImpl } from "@assistant-ui/core/internal";
-export { type ThreadListRuntime, type ThreadListRuntimeCoreBinding, ThreadListRuntimeImpl, type ThreadListState };

package/dist/legacy-runtime/runtime/ThreadListRuntime.js

@@ -1,2 +0,0 @@
-import { ThreadListRuntimeImpl } from "@assistant-ui/core/internal";
-export { ThreadListRuntimeImpl };

package/src/legacy-runtime/runtime/MessagePartRuntime.ts

@@ -1,2 +0,0 @@
-export type { MessagePartState, MessagePartRuntime } from "@assistant-ui/core";
-export { MessagePartRuntimeImpl } from "@assistant-ui/core/internal";

package/src/legacy-runtime/runtime/MessageRuntime.ts

@@ -1,3 +0,0 @@
-export type { MessageState, MessageRuntime } from "@assistant-ui/core";
-export type { MessageStateBinding } from "@assistant-ui/core/internal";
-export { MessageRuntimeImpl } from "@assistant-ui/core/internal";

package/src/legacy-runtime/runtime/ThreadListRuntime.ts

@@ -1,4 +0,0 @@
-export type { ThreadListState, ThreadListRuntime } from "@assistant-ui/core";
-
-export type { ThreadListRuntimeCoreBinding } from "@assistant-ui/core/internal";
-export { ThreadListRuntimeImpl } from "@assistant-ui/core/internal";