@assistant-ui/core 0.2.20 → 0.2.22

package/src/react/primitive-hooks/useActionBarCopy.test.ts

@@ -0,0 +1,79 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+const mocks = vi.hoisted(() => {
+  const setIsCopied = vi.fn();
+
+  return {
+    setIsCopied,
+    state: {
+      message: {
+        role: "assistant",
+        status: { type: "complete", reason: "stop" },
+        parts: [{ type: "text", text: "Hello" }],
+        isCopied: false,
+      },
+      composer: {
+        isEditing: false,
+        text: "",
+      },
+    },
+    aui: {
+      message: () => ({
+        getCopyText: () => "Hello",
+        setIsCopied,
+      }),
+    },
+  };
+});
+
+vi.mock("react", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("react")>()),
+  useCallback: ((callback: unknown) =>
+    callback) as typeof import("react").useCallback,
+}));
+
+vi.mock("@assistant-ui/store", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@assistant-ui/store")>()),
+  useAui: () => mocks.aui,
+  useAuiState: ((selector: (state: typeof mocks.state) => unknown) =>
+    selector(mocks.state)) as typeof import("@assistant-ui/store").useAuiState,
+}));
+
+import { useActionBarCopy } from "./useActionBarCopy";
+
+afterEach(() => {
+  vi.clearAllMocks();
+});
+
+describe("useActionBarCopy", () => {
+  it("does not report copy success without a clipboard handler", async () => {
+    const { copy, disabled } = useActionBarCopy();
+
+    copy();
+    await Promise.resolve();
+
+    expect(disabled).toBe(true);
+    expect(mocks.setIsCopied).not.toHaveBeenCalled();
+  });
+
+  it("reports copy success after the clipboard handler resolves", async () => {
+    const copyToClipboard = vi.fn();
+    const { copy } = useActionBarCopy({ copyToClipboard });
+
+    copy();
+    await Promise.resolve();
+
+    expect(copyToClipboard).toHaveBeenCalledWith("Hello");
+    expect(mocks.setIsCopied).toHaveBeenCalledWith(true);
+  });
+
+  it("does not report copy success when the clipboard handler rejects", async () => {
+    const copyToClipboard = vi.fn().mockRejectedValue(new Error("denied"));
+    const { copy } = useActionBarCopy({ copyToClipboard });
+
+    copy();
+    await Promise.resolve();
+
+    expect(mocks.setIsCopied).not.toHaveBeenCalled();
+  });
+});

package/src/react/primitive-hooks/useActionBarCopy.ts

@@ -23,13 +23,14 @@ export const useActionBarCopy = ({
   const composerValue = useAuiState((s) => s.composer.text);
 
   const copy = useCallback(() => {
+    if (!copyToClipboard) return;
+
     const valueToCopy = isEditing ? composerValue : aui.message().getCopyText();
     if (!valueToCopy) return;
 
-    const write = copyToClipboard ?? (() => {});
     // The rejection handler swallows clipboard write failures (permission denied,
     // API unavailable) so they don't surface as unhandled promise rejections.
-    Promise.resolve(write(valueToCopy)).then(
+    Promise.resolve(copyToClipboard(valueToCopy)).then(
       () => {
         aui.message().setIsCopied(true);
         setTimeout(() => aui.message().setIsCopied(false), copiedDuration);
@@ -38,5 +39,5 @@ export const useActionBarCopy = ({
     );
   }, [aui, isEditing, composerValue, copiedDuration, copyToClipboard]);
 
-  return { copy, disabled, isCopied };
+  return { copy, disabled: disabled || !copyToClipboard, isCopied };
 };

package/src/react/primitive-hooks/useMessageError.test.ts

@@ -0,0 +1,64 @@
+import { describe, it, expect, vi } from "vitest";
+
+const { mockUseAuiState } = vi.hoisted(() => ({ mockUseAuiState: vi.fn() }));
+
+vi.mock("@assistant-ui/store", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@assistant-ui/store")>()),
+  useAuiState: ((selector: (s: unknown) => unknown) =>
+    mockUseAuiState(
+      selector,
+    )) as typeof import("@assistant-ui/store").useAuiState,
+}));
+
+import { useMessageError } from "./useMessageError";
+
+const against = (message: unknown) =>
+  mockUseAuiState.mockImplementationOnce((selector: (s: unknown) => unknown) =>
+    selector({ message }),
+  );
+
+describe("useMessageError", () => {
+  it("returns the message from a structured AssistantError", () => {
+    against({
+      status: {
+        type: "incomplete",
+        reason: "error",
+        error: { code: "network", message: "offline" },
+      },
+    });
+    expect(useMessageError()).toBe("offline");
+  });
+
+  it("passes a legacy string error through", () => {
+    against({
+      status: {
+        type: "incomplete",
+        reason: "error",
+        error: "legacy failure",
+      },
+    });
+    expect(useMessageError()).toBe("legacy failure");
+  });
+
+  it("returns message from an object that fails the full guard", () => {
+    against({
+      status: {
+        type: "incomplete",
+        reason: "error",
+        error: {
+          code: "unknown",
+          message: "foreign severity stream",
+          severity: "fatal",
+        },
+      },
+    });
+    expect(useMessageError()).toBe("foreign severity stream");
+  });
+
+  it("returns undefined when there is no error status", () => {
+    against({
+      status: { type: "complete", reason: "stop" },
+    });
+    expect(useMessageError()).toBeUndefined();
+  });
+});

package/src/react/primitive-hooks/useMessageError.ts

@@ -1,10 +1,23 @@
 import { useAuiState } from "@assistant-ui/store";
 
 export const useMessageError = () => {
-  return useAuiState((s) =>
-    s.message.status?.type === "incomplete" &&
-    s.message.status.reason === "error"
-      ? (s.message.status.error ?? "An error occurred")
-      : undefined,
-  );
+  return useAuiState((s) => {
+    if (
+      s.message.status?.type !== "incomplete" ||
+      s.message.status.reason !== "error"
+    ) {
+      return undefined;
+    }
+    const error = s.message.status.error;
+    if (typeof error === "string") return error;
+    if (
+      typeof error === "object" &&
+      error !== null &&
+      "message" in error &&
+      typeof error.message === "string"
+    ) {
+      return error.message;
+    }
+    return error ?? "An error occurred";
+  });
 };

package/src/react/primitives/chainOfThought/ChainOfThoughtParts.tsx

@@ -51,9 +51,7 @@ const ChainOfThoughtPrimitivePartsInner: FC<{
       Array.from({ length: partsLength }, (_, index) => (
         <ChainOfThoughtPartByIndexProvider key={index} index={index}>
           <RenderChildrenWithAccessor
-            getItemState={(aui) =>
-              aui.chainOfThought().part({ index }).getState()
-            }
+            getItemState={(aui) => aui.part().getState()}
           >
             {(getItem) =>
               children({

package/src/react/primitives/message/MessageParts.tsx

@@ -728,50 +728,63 @@ const EMPTY_RUNNING_TEXT_PART: Extract<EnrichedPartState, { type: "text" }> =
  * `<MessagePrimitive.GroupedParts>`. Returns whatever `children`
  * returns — callers decide how to handle a `null` return.
  */
-export const MessagePartChildren: FC<{
+type MessagePartChildrenProps = {
   index: number;
   children: (value: { part: EnrichedPartState }) => ReactNode;
-}> = ({ index, children }) => {
+};
+
+const MessagePartChildrenInner: FC<
+  Pick<MessagePartChildrenProps, "children">
+> = ({ children }) => {
   const aui = useAui();
   // Subscribed (not snapshotted like `tools`) so fallbacks registered
   // after the first render trigger a re-render and `hasUI` re-evaluates.
   const dataRenderers = useAuiState((s) => s.dataRenderers);
 
+  return (
+    <RenderChildrenWithAccessor
+      getItemState={(client) => client.part().getState()}
+    >
+      {(getItem) =>
+        children({
+          get part() {
+            const state = getItem();
+            if (state.type === "tool-call") {
+              const toolsState = aui.tools().getState();
+              const hasUI = resolveToolRender(toolsState, state) !== null;
+              const partMethods = aui.part();
+              return {
+                ...state,
+                toolUI: hasUI ? <RegisteredToolUI /> : null,
+                addResult: partMethods.addToolResult,
+                resume: partMethods.resumeToolCall,
+                respondToApproval: partMethods.respondToToolApproval,
+              };
+            }
+            if (state.type === "data") {
+              const hasUI =
+                getDataRenderer(dataRenderers, state.name, undefined) !==
+                undefined;
+              return {
+                ...state,
+                dataRendererUI: hasUI ? <RegisteredDataRendererUI /> : null,
+              };
+            }
+            return state;
+          },
+        })
+      }
+    </RenderChildrenWithAccessor>
+  );
+};
+
+export const MessagePartChildren: FC<MessagePartChildrenProps> = ({
+  index,
+  children,
+}) => {
   return (
     <PartByIndexProvider index={index}>
-      <RenderChildrenWithAccessor
-        getItemState={(aui) => aui.message().part({ index }).getState()}
-      >
-        {(getItem) =>
-          children({
-            get part() {
-              const state = getItem();
-              if (state.type === "tool-call") {
-                const toolsState = aui.tools().getState();
-                const hasUI = resolveToolRender(toolsState, state) !== null;
-                const partMethods = aui.message().part({ index });
-                return {
-                  ...state,
-                  toolUI: hasUI ? <RegisteredToolUI /> : null,
-                  addResult: partMethods.addToolResult,
-                  resume: partMethods.resumeToolCall,
-                  respondToApproval: partMethods.respondToToolApproval,
-                };
-              }
-              if (state.type === "data") {
-                const hasUI =
-                  getDataRenderer(dataRenderers, state.name, undefined) !==
-                  undefined;
-                return {
-                  ...state,
-                  dataRendererUI: hasUI ? <RegisteredDataRendererUI /> : null,
-                };
-              }
-              return state;
-            },
-          })
-        }
-      </RenderChildrenWithAccessor>
+      <MessagePartChildrenInner>{children}</MessagePartChildrenInner>
     </PartByIndexProvider>
   );
 };

package/src/react/providers/ChainOfThoughtPartByIndexProvider.tsx

@@ -1,16 +1,33 @@
-import type { FC, PropsWithChildren } from "react";
+import { useMemo, type FC, type PropsWithChildren } from "react";
 import { useAui, AuiProvider, Derived } from "@assistant-ui/store";
+import type { PartMethods } from "../../store/scopes/part";
 
 export const ChainOfThoughtPartByIndexProvider: FC<
   PropsWithChildren<{
     index: number;
   }>
 > = ({ index, children }) => {
+  const lastPartRef = useMemo(
+    () => ({ index, current: null as PartMethods | null }),
+    [index],
+  );
   const aui = useAui({
     part: Derived({
       source: "chainOfThought",
       query: { type: "index", index },
-      get: (aui) => aui.chainOfThought().part({ index }),
+      get: (aui) => {
+        const chainOfThought = aui.chainOfThought();
+        if (
+          index >= chainOfThought.getState().parts.length &&
+          lastPartRef.current
+        ) {
+          return lastPartRef.current;
+        }
+
+        const part = chainOfThought.part({ index });
+        lastPartRef.current = part;
+        return part;
+      },
     }),
   });
 

package/src/react/providers/PartByIndexProvider.tsx

@@ -1,16 +1,30 @@
-import type { FC, PropsWithChildren } from "react";
+import { useMemo, type FC, type PropsWithChildren } from "react";
 import { useAui, AuiProvider, Derived } from "@assistant-ui/store";
+import type { PartMethods } from "../../store/scopes/part";
 
 export const PartByIndexProvider: FC<
   PropsWithChildren<{
     index: number;
   }>
 > = ({ index, children }) => {
+  const lastPartRef = useMemo(
+    () => ({ index, current: null as PartMethods | null }),
+    [index],
+  );
   const aui = useAui({
     part: Derived({
       source: "message",
       query: { type: "index", index },
-      get: (aui) => aui.message().part({ index }),
+      get: (aui) => {
+        const message = aui.message();
+        if (index >= message.getState().parts.length && lastPartRef.current) {
+          return lastPartRef.current;
+        }
+
+        const part = message.part({ index });
+        lastPartRef.current = part;
+        return part;
+      },
     }),
   });
 

package/src/react/runtimes/RemoteThreadListHookInstanceManager.test.tsx

@@ -0,0 +1,18 @@
+import { describe, expect, it } from "vitest";
+import type { ThreadListRuntimeCore } from "../../runtime/interfaces/thread-list-runtime-core";
+import { RemoteThreadListHookInstanceManager } from "./RemoteThreadListHookInstanceManager";
+
+describe("RemoteThreadListHookInstanceManager", () => {
+  it("rejects a pending start when the thread runtime is stopped", async () => {
+    const manager = new RemoteThreadListHookInstanceManager(() => {
+      throw new Error("Runtime hook should not render during this test");
+    }, {} as ThreadListRuntimeCore);
+
+    const startPromise = manager.startThreadRuntime("thread-1");
+    manager.stopThreadRuntime("thread-1");
+
+    await expect(startPromise).rejects.toThrow(
+      "Thread was deleted before runtime was started",
+    );
+  });
+});

package/src/react/runtimes/RemoteThreadListHookInstanceManager.tsx

@@ -85,6 +85,7 @@ export class RemoteThreadListHookInstanceManager extends BaseSubscribable {
   public stopThreadRuntime(threadId: string) {
     this.instances.delete(threadId);
     this.useAliveThreadsKeysChanged.setState({}, true);
+    this._notifySubscribers();
   }
 
   public setRuntimeHook(newRuntimeHook: RemoteThreadListHook) {
@@ -109,7 +110,9 @@ export class RemoteThreadListHookInstanceManager extends BaseSubscribable {
     const updateRuntime = useCallback(() => {
       const aliveThread = this.instances.get(threadId);
       if (!aliveThread)
-        throw new Error("Thread not found. This is a bug in assistant-ui.");
+        throw new Error(
+          `Thread "${threadId}" runtime binding not found. This is a bug in assistant-ui.`,
+        );
 
       aliveThread.runtime = threadBinding.getState();
       this._notifySubscribers();

package/src/react/runtimes/RemoteThreadListThreadListRuntimeCore.tsx

@@ -22,6 +22,18 @@ import { AssistantMessageStream } from "assistant-stream";
 import type { ModelContextProvider } from "../../model-context/types";
 import { RuntimeAdapterProvider } from "./RuntimeAdapterProvider";
 
+const threadNotFoundError = (threadIdOrRemoteId: string, action: string) =>
+  new Error(`Thread "${threadIdOrRemoteId}" not found while ${action}.`);
+
+const threadStatusError = (
+  threadIdOrRemoteId: string,
+  status: RemoteThreadData["status"],
+  action: string,
+) =>
+  new Error(
+    `Thread "${threadIdOrRemoteId}" has status "${status}", so it cannot ${action}.`,
+  );
+
 export class RemoteThreadListThreadListRuntimeCore
   extends BaseSubscribable
   implements ThreadListRuntimeCore
@@ -32,6 +44,8 @@ export class RemoteThreadListThreadListRuntimeCore
   private _loadThreadsPromise: Promise<void> | undefined;
   private _loadMorePromise: Promise<void> | undefined;
   private _loadGeneration = 0;
+  private _switchGeneration = 0;
+  private _switchTask: Promise<void> | undefined;
 
   private _mainThreadId!: string;
   private readonly _state = new OptimisticState<RemoteThreadState>({
@@ -280,10 +294,14 @@ export class RemoteThreadListThreadListRuntimeCore
 
   public getThreadRuntimeCore(threadIdOrRemoteId: string) {
     const data = this.getItemById(threadIdOrRemoteId);
-    if (!data) throw new Error("Thread not found");
+    if (!data)
+      throw threadNotFoundError(threadIdOrRemoteId, "getting its runtime");
 
     const result = this._hookManager.getThreadRuntimeCore(data.id);
-    if (!result) throw new Error("Thread not found");
+    if (!result)
+      throw new Error(
+        `Runtime for thread "${threadIdOrRemoteId}" not found while getting its runtime.`,
+      );
     return result;
   }
 
@@ -291,15 +309,28 @@ export class RemoteThreadListThreadListRuntimeCore
     return getThreadData(this._state.value, threadIdOrRemoteId);
   }
 
-  public async switchToThread(
+  public switchToThread(
     threadIdOrRemoteId: string,
     options?: { unarchive?: boolean },
+  ): Promise<void> {
+    const generation = ++this._switchGeneration;
+    const task = this._switchToThread(threadIdOrRemoteId, options, generation);
+    this._switchTask = task;
+    return task;
+  }
+
+  private async _switchToThread(
+    threadIdOrRemoteId: string,
+    options: { unarchive?: boolean } | undefined,
+    generation: number,
   ): Promise<void> {
     let data = this.getItemById(threadIdOrRemoteId);
 
     if (!data) {
       const remoteMetadata =
         await this._options.adapter.fetch(threadIdOrRemoteId);
+      if (generation !== this._switchGeneration) return;
+
       const state = this._state.value;
       const mappingId = createThreadMappingId(remoteMetadata.remoteId);
 
@@ -354,7 +385,7 @@ export class RemoteThreadListThreadListRuntimeCore
       data = this.getItemById(threadIdOrRemoteId);
     }
 
-    if (!data) throw new Error("Thread not found");
+    if (!data) throw threadNotFoundError(threadIdOrRemoteId, "switching to it");
     if (this._mainThreadId === data.id) return;
 
     const task = this._hookManager.startThreadRuntime(data.id);
@@ -364,8 +395,11 @@ export class RemoteThreadListThreadListRuntimeCore
       task.then(() => this._notifySubscribers());
     }
 
+    if (generation !== this._switchGeneration) return;
+
     if (data.status === "archived" && options?.unarchive !== false) {
       await this.unarchive(data.id);
+      if (generation !== this._switchGeneration) return;
     }
     this._mainThreadId = data.id;
 
@@ -373,13 +407,21 @@ export class RemoteThreadListThreadListRuntimeCore
     this._notifyThreadIdChange();
   }
 
-  public async switchToNewThread(): Promise<void> {
+  public switchToNewThread(): Promise<void> {
+    const generation = ++this._switchGeneration;
+    const task = this._switchToNewThread(generation);
+    this._switchTask = task;
+    return task;
+  }
+
+  private async _switchToNewThread(generation: number): Promise<void> {
     // an initialization transaction is in progress, wait for it to settle
     while (
       this._state.baseValue.newThreadId !== undefined &&
       this._state.value.newThreadId === undefined
     ) {
       await this._state.waitForUpdate();
+      if (generation !== this._switchGeneration) return;
     }
 
     const state = this._state.value;
@@ -411,18 +453,20 @@ export class RemoteThreadListThreadListRuntimeCore
       });
     }
 
-    return this.switchToThread(id);
+    return this._switchToThread(id, undefined, generation);
   }
 
   public initialize = async (threadId: string) => {
     if (this._state.value.newThreadId !== threadId) {
       const data = this.getItemById(threadId);
-      if (!data) throw new Error("Thread not found");
-      if (data.status === "new") throw new Error("Unexpected new state");
-      return data.initializeTask;
+      if (!data) throw threadNotFoundError(threadId, "initializing it");
+      if (data.status === "new")
+        throw threadStatusError(threadId, data.status, "be initialized here");
+      const { remoteId, externalId } = await data.initializeTask;
+      return { remoteId, externalId };
     }
 
-    return this._state.optimisticUpdate({
+    const { remoteId, externalId } = await this._state.optimisticUpdate({
       execute: () => {
         return this._options.adapter.initialize(threadId);
       },
@@ -465,12 +509,14 @@ export class RemoteThreadListThreadListRuntimeCore
         };
       },
     });
+    return { remoteId, externalId };
   };
 
   public generateTitle = async (threadId: string) => {
     const data = this.getItemById(threadId);
-    if (!data) throw new Error("Thread not found");
-    if (data.status === "new") throw new Error("Thread is not yet initialized");
+    if (!data) throw threadNotFoundError(threadId, "generating its title");
+    if (data.status === "new")
+      throw threadStatusError(threadId, data.status, "generate a title");
 
     const { remoteId } = await data.initializeTask;
 
@@ -503,8 +549,9 @@ export class RemoteThreadListThreadListRuntimeCore
 
   public rename(threadIdOrRemoteId: string, newTitle: string): Promise<void> {
     const data = this.getItemById(threadIdOrRemoteId);
-    if (!data) throw new Error("Thread not found");
-    if (data.status === "new") throw new Error("Thread is not yet initialized");
+    if (!data) throw threadNotFoundError(threadIdOrRemoteId, "renaming it");
+    if (data.status === "new")
+      throw threadStatusError(threadIdOrRemoteId, data.status, "be renamed");
 
     return this._state.optimisticUpdate({
       execute: async () => {
@@ -534,8 +581,17 @@ export class RemoteThreadListThreadListRuntimeCore
     custom: Record<string, unknown> | undefined,
   ): Promise<void> {
     const data = this.getItemById(threadIdOrRemoteId);
-    if (!data) throw new Error("Thread not found");
-    if (data.status === "new") throw new Error("Thread is not yet initialized");
+    if (!data)
+      throw threadNotFoundError(
+        threadIdOrRemoteId,
+        "updating its custom metadata",
+      );
+    if (data.status === "new")
+      throw threadStatusError(
+        threadIdOrRemoteId,
+        data.status,
+        "update custom metadata",
+      );
 
     if (!this._options.adapter.updateCustom) {
       throw new Error(
@@ -576,16 +632,29 @@ export class RemoteThreadListThreadListRuntimeCore
     if (threadId === this.newThreadId)
       throw new Error("Cannot ensure new thread is not main");
 
-    if (threadId === this._mainThreadId) {
-      await this.switchToNewThread();
+    let lastAwaitedTask: Promise<void> | undefined;
+
+    while (threadId === this._mainThreadId) {
+      let switchTask = this._switchTask;
+      const startedFallback = !switchTask || switchTask === lastAwaitedTask;
+      if (startedFallback) switchTask = this.switchToNewThread();
+      lastAwaitedTask = switchTask;
+
+      try {
+        await switchTask;
+      } catch (error) {
+        if (startedFallback && this._switchTask === switchTask) {
+          throw error;
+        }
+      }
     }
   }
 
   public async archive(threadIdOrRemoteId: string) {
     const data = this.getItemById(threadIdOrRemoteId);
-    if (!data) throw new Error("Thread not found");
+    if (!data) throw threadNotFoundError(threadIdOrRemoteId, "archiving it");
     if (data.status !== "regular")
-      throw new Error("Thread is not yet initialized or already archived");
+      throw threadStatusError(threadIdOrRemoteId, data.status, "be archived");
 
     await this._ensureThreadIsNotMain(data.id);
 
@@ -602,8 +671,9 @@ export class RemoteThreadListThreadListRuntimeCore
 
   public unarchive(threadIdOrRemoteId: string): Promise<void> {
     const data = this.getItemById(threadIdOrRemoteId);
-    if (!data) throw new Error("Thread not found");
-    if (data.status !== "archived") throw new Error("Thread is not archived");
+    if (!data) throw threadNotFoundError(threadIdOrRemoteId, "unarchiving it");
+    if (data.status !== "archived")
+      throw threadStatusError(threadIdOrRemoteId, data.status, "be unarchived");
 
     return this._state.optimisticUpdate({
       execute: async () => {
@@ -623,9 +693,9 @@ export class RemoteThreadListThreadListRuntimeCore
 
   public async delete(threadIdOrRemoteId: string) {
     const data = this.getItemById(threadIdOrRemoteId);
-    if (!data) throw new Error("Thread not found");
+    if (!data) throw threadNotFoundError(threadIdOrRemoteId, "deleting it");
     if (data.status !== "regular" && data.status !== "archived")
-      throw new Error("Thread is not yet initialized");
+      throw threadStatusError(threadIdOrRemoteId, data.status, "be deleted");
 
     await this._ensureThreadIsNotMain(data.id);
     this._hookManager.stopThreadRuntime(data.id);
@@ -643,9 +713,9 @@ export class RemoteThreadListThreadListRuntimeCore
 
   public async detach(threadIdOrRemoteId: string): Promise<void> {
     const data = this.getItemById(threadIdOrRemoteId);
-    if (!data) throw new Error("Thread not found");
+    if (!data) throw threadNotFoundError(threadIdOrRemoteId, "detaching it");
     if (data.status !== "regular" && data.status !== "archived")
-      throw new Error("Thread is not yet initialized");
+      throw threadStatusError(threadIdOrRemoteId, data.status, "be detached");
 
     await this._ensureThreadIsNotMain(data.id);
     this._hookManager.stopThreadRuntime(data.id);