@assistant-ui/react 0.14.27 → 0.14.29

package/src/tests/external-thread-parity.test.tsx

@@ -0,0 +1,232 @@
+// @vitest-environment jsdom
+
+// Legacy-runtime parity: part statuses derive from the message status, and
+// imperative composer call sequences observe writes before React re-renders.
+
+import { render, waitFor } from "@testing-library/react";
+import type { FC } from "react";
+import { describe, it, expect, vi } from "vitest";
+import { useAui, AuiProvider } from "@assistant-ui/store";
+import type { ThreadMessage } from "@assistant-ui/core";
+import {
+  ExternalThread,
+  type ExternalThreadProps,
+  type ExternalThreadMessage,
+} from "../client/ExternalThread";
+
+const renderThread = (props: ExternalThreadProps) => {
+  const captured: { aui?: ReturnType<typeof useAui> } = {};
+  const Capture: FC = () => {
+    captured.aui = useAui();
+    return null;
+  };
+  const App: FC<{ threadProps: ExternalThreadProps }> = ({ threadProps }) => {
+    const aui = useAui({ thread: ExternalThread(threadProps) });
+    return (
+      <AuiProvider value={aui}>
+        <Capture />
+      </AuiProvider>
+    );
+  };
+  const utils = render(<App threadProps={props} />);
+  return {
+    aui: () => captured.aui!,
+    rerender: (next: ExternalThreadProps) =>
+      utils.rerender(<App threadProps={next} />),
+  };
+};
+
+const assistantMessage = (
+  status: ThreadMessage["status"],
+  result?: string,
+): ExternalThreadMessage =>
+  ({
+    id: "a1",
+    role: "assistant",
+    content: [
+      { type: "text", text: "let me check" },
+      {
+        type: "tool-call",
+        toolCallId: "tc1",
+        toolName: "probe_tool",
+        args: {},
+        argsText: "{}",
+        ...(result !== undefined && { result }),
+      },
+    ],
+    createdAt: new Date(0),
+    status,
+    metadata: { custom: {} },
+  }) as unknown as ExternalThreadMessage;
+
+describe("ExternalThread part status", () => {
+  it("gives an unresolved tool call its message's status", () => {
+    const { aui } = renderThread({
+      messages: [assistantMessage({ type: "running" })],
+      isRunning: true,
+    });
+    const part = (toolCallId: string) =>
+      aui().thread().message({ id: "a1" }).part({ toolCallId }).getState();
+    expect(part("tc1").status).toEqual({ type: "running" });
+  });
+
+  it("marks a resolved tool call complete and streams only the last part", () => {
+    const { aui } = renderThread({
+      messages: [assistantMessage({ type: "running" }, "ok")],
+      isRunning: true,
+    });
+    const state = aui().thread().message({ id: "a1" }).getState();
+    expect(state.parts[0]!.status).toEqual({ type: "complete" });
+    expect(state.parts[1]!.status).toEqual({ type: "complete" });
+  });
+
+  it("keeps parts complete on requires-action and user messages", () => {
+    const { aui } = renderThread({
+      messages: [
+        {
+          id: "u1",
+          role: "user",
+          content: [{ type: "text", text: "hi" }],
+          createdAt: new Date(0),
+          attachments: [],
+          metadata: { custom: {} },
+        } as unknown as ExternalThreadMessage,
+        assistantMessage({ type: "requires-action", reason: "tool-calls" }),
+      ],
+      isRunning: false,
+    });
+    expect(
+      aui().thread().message({ id: "u1" }).part({ index: 0 }).getState().status,
+    ).toEqual({ type: "complete" });
+    expect(
+      aui()
+        .thread()
+        .message({ id: "a1" })
+        .part({ toolCallId: "tc1" })
+        .getState().status,
+    ).toEqual({ type: "requires-action", reason: "tool-calls" });
+    expect(
+      aui().thread().message({ id: "a1" }).part({ index: 0 }).getState().status,
+    ).toEqual({ type: "complete" });
+  });
+});
+
+describe("ExternalThread unset optional callbacks", () => {
+  it("throws a capability error when the callback prop is not set", () => {
+    const { aui } = renderThread({
+      messages: [
+        assistantMessage({ type: "requires-action", reason: "tool-calls" }),
+      ],
+      isRunning: false,
+    });
+    const part = () =>
+      aui().thread().message({ id: "a1" }).part({ toolCallId: "tc1" });
+
+    expect(() => part().addToolResult("ok")).toThrow(
+      "Runtime does not support tool results (onAddToolResult is not set).",
+    );
+    expect(() => part().resumeToolCall(undefined)).toThrow(
+      "Runtime does not support resuming tool calls (onResumeToolCall is not set).",
+    );
+    expect(() => aui().thread().resumeRun()).toThrow(
+      "Runtime does not support resuming runs (onResume is not set).",
+    );
+    expect(() => aui().thread().importExternalState({})).toThrow(
+      "Runtime does not support importing external states (onLoadExternalState is not set).",
+    );
+  });
+});
+
+describe("ExternalThread composer", () => {
+  it("dispatches a synchronous setText + send sequence", async () => {
+    const onNew = vi.fn();
+    const { aui } = renderThread({ messages: [], isRunning: false, onNew });
+
+    aui().thread().composer().setText("hello");
+    aui().thread().composer().send();
+
+    await waitFor(() => expect(onNew).toHaveBeenCalledTimes(1));
+    expect(onNew.mock.calls[0]![0].content).toEqual([
+      { type: "text", text: "hello" },
+    ]);
+    await waitFor(() =>
+      expect(aui().thread().getState().composer.text).toBe(""),
+    );
+  });
+
+  it("stamps the thread head as parentId on queue-adapter sends", async () => {
+    const enqueue = vi.fn();
+    const { aui } = renderThread({
+      messages: [
+        {
+          id: "u1",
+          role: "user",
+          content: [{ type: "text", text: "hi" }],
+          createdAt: new Date(0),
+          attachments: [],
+          metadata: { custom: {} },
+        } as unknown as ExternalThreadMessage,
+      ],
+      isRunning: true,
+      queue: {
+        items: [],
+        enqueue,
+        steer: vi.fn(),
+        remove: vi.fn(),
+        clear: vi.fn(),
+      },
+    });
+
+    aui().thread().composer().setText("queued");
+    aui().thread().composer().send();
+
+    await waitFor(() => expect(enqueue).toHaveBeenCalledTimes(1));
+    expect(enqueue.mock.calls[0]![0].parentId).toBe("u1");
+  });
+
+  it("still refuses to send an empty composer synchronously after a send", async () => {
+    const onNew = vi.fn();
+    const { aui } = renderThread({ messages: [], isRunning: false, onNew });
+
+    aui().thread().composer().send();
+    aui().thread().composer().setText("first");
+    aui().thread().composer().send();
+    aui().thread().composer().send();
+
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(onNew).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe("ExternalThread duplicate message ids", () => {
+  const userMessage = (id: string, text: string): ExternalThreadMessage =>
+    ({
+      id,
+      role: "user",
+      content: [{ type: "text", text }],
+      createdAt: new Date(0),
+      metadata: { custom: {} },
+    }) as unknown as ExternalThreadMessage;
+
+  it("warns and keeps the last occurrence instead of throwing on a duplicate id", () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    try {
+      const { aui } = renderThread({
+        messages: [
+          userMessage("u1", "hi"),
+          userMessage("dup", "stale"),
+          userMessage("dup", "fresh"),
+        ],
+      });
+
+      const state = aui().thread().getState();
+      expect(state.messages.map((m) => m.id)).toEqual(["u1", "dup"]);
+
+      const dup = aui().thread().message({ id: "dup" }).getState();
+      expect(dup.parts[0]).toMatchObject({ type: "text", text: "fresh" });
+      expect(warn).toHaveBeenCalledWith(expect.stringContaining('"dup"'));
+    } finally {
+      warn.mockRestore();
+    }
+  });
+});

package/src/tests/generative-ui.test.tsx

@@ -66,37 +66,6 @@ describe("MessagePrimitive.GenerativeUI (same-realm renderer)", () => {
     expect(out).toContain("hello world");
   });
 
-  it("throws GenerativeUIRenderError for unknown components", () => {
-    const spec: GenerativeUISpec = {
-      root: { component: "NotAllowed", props: {} },
-    };
-
-    expect(() =>
-      renderToStaticMarkup(
-        <GenerativeUIRender spec={spec} components={{ Card }} />,
-      ),
-    ).toThrow(GenerativeUIRenderError);
-  });
-
-  it("uses Fallback when provided for unknown components", () => {
-    const spec: GenerativeUISpec = {
-      root: { component: "NotAllowed", props: { foo: 1 } },
-    };
-    const Fallback = ({ component }: any) => (
-      <span data-fallback={component}>missing</span>
-    );
-
-    const out = renderToStaticMarkup(
-      <GenerativeUIRender
-        spec={spec}
-        components={{ Card }}
-        Fallback={Fallback}
-      />,
-    );
-    expect(out).toContain('data-fallback="NotAllowed"');
-    expect(out).toContain("missing");
-  });
-
   it("handles empty / partial specs gracefully (stream-friendly)", () => {
     const out1 = renderToStaticMarkup(
       <GenerativeUIRender spec={{ root: [] }} components={{ Card }} />,
@@ -133,21 +102,7 @@ describe("MessagePrimitive.GenerativeUI (same-realm renderer)", () => {
     }
   });
 
-  it("respects user-provided keys", () => {
-    const spec: GenerativeUISpec = {
-      root: [
-        { component: "Card", props: { title: "x" }, key: "stable-1" },
-        { component: "Card", props: { title: "y" }, key: "stable-2" },
-      ],
-    };
-    expect(() =>
-      renderToStaticMarkup(
-        <GenerativeUIRender spec={spec} components={{ Card }} />,
-      ),
-    ).not.toThrow();
-  });
-
-  it("is a typed error subclass with the offending component name", () => {
+  it("throws a typed error naming the offending unknown component", () => {
     try {
       renderToStaticMarkup(
         <GenerativeUIRender

package/src/tests/messagePartSwitchRace.test.tsx

@@ -0,0 +1,172 @@
+// @vitest-environment jsdom
+
+import { act, cleanup, render, waitFor } from "@testing-library/react";
+import { flushSync } from "react-dom";
+import { useEffect, useState, type FC } from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { useAui, useAuiState } from "@assistant-ui/store";
+import { AssistantRuntimeProvider, PartByIndexProvider } from "../context";
+import { useLocalRuntime } from "../legacy-runtime/runtime-cores/local/useLocalRuntime";
+import type { ChatModelAdapter } from "../legacy-runtime/runtime-cores/local/ChatModelAdapter";
+import * as ThreadPrimitive from "../primitives/thread";
+import * as MessagePrimitive from "../primitives/message";
+import { useMessagePartText } from "../primitives/messagePart/useMessagePartText";
+import type { AssistantRuntime, ThreadMessageLike } from "../index";
+
+const noOpAdapter: ChatModelAdapter = {
+  async *run() {},
+};
+
+const textMessages: readonly ThreadMessageLike[] = [
+  {
+    role: "assistant",
+    content: [
+      { type: "text", text: "hello" },
+      { type: "text", text: "world" },
+    ],
+  },
+];
+
+const toolMessages: readonly ThreadMessageLike[] = [
+  {
+    role: "assistant",
+    content: [
+      { type: "tool-call", toolCallId: "tc-1", toolName: "search", args: {} },
+      { type: "tool-call", toolCallId: "tc-2", toolName: "search", args: {} },
+    ],
+  },
+];
+
+const shorterTextMessages: readonly ThreadMessageLike[] = [
+  {
+    role: "assistant",
+    content: [{ type: "text", text: "shorter" }],
+  },
+];
+
+// Re-renders a mounted text-part leaf via flushSync from a store subscriber,
+// mimicking a popup library or state mirror flushing synchronously inside the
+// thread-switch window, before reconciliation has unmounted the stale leaf.
+const harness: {
+  bump: (() => void) | null;
+  runtime: AssistantRuntime | null;
+} = { bump: null, runtime: null };
+
+const TextLeaf: FC = () => {
+  const [, setTick] = useState(0);
+  harness.bump = () => setTick((t) => t + 1);
+  const part = useMessagePartText();
+  const aui = useAui();
+  useEffect(
+    () =>
+      aui.subscribe(() => {
+        flushSync(() => harness.bump?.());
+      }),
+    [aui],
+  );
+  return <p data-testid="text">{part.text}</p>;
+};
+
+const Message: FC = () => (
+  <MessagePrimitive.Parts
+    components={{
+      Text: TextLeaf,
+      tools: { Fallback: () => <div data-testid="tool" /> },
+    }}
+  />
+);
+
+const ChildrenMessage: FC = () => (
+  <MessagePrimitive.Parts>
+    {({ part }) => (part.type === "text" ? <TextLeaf /> : null)}
+  </MessagePrimitive.Parts>
+);
+
+const InvalidPartReader: FC = () => {
+  const part = useAuiState((s) => s.part);
+  return (
+    <p data-testid="clamped-part">
+      {part.type === "text" ? part.text : part.type}
+    </p>
+  );
+};
+
+const InvalidPartMessage: FC = () => (
+  <PartByIndexProvider index={2}>
+    <InvalidPartReader />
+  </PartByIndexProvider>
+);
+
+const App: FC<{ MessageComponent?: FC }> = ({ MessageComponent = Message }) => {
+  const runtime = useLocalRuntime(noOpAdapter, {
+    initialMessages: textMessages,
+  });
+  harness.runtime = runtime;
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      <ThreadPrimitive.Messages components={{ Message: MessageComponent }} />
+    </AssistantRuntimeProvider>
+  );
+};
+
+afterEach(() => {
+  cleanup();
+  harness.bump = null;
+  harness.runtime = null;
+});
+
+describe("part hooks under a thread-switch race", () => {
+  it("swaps every part when the incoming message has different part types", async () => {
+    let view!: ReturnType<typeof render>;
+    await act(async () => {
+      view = render(<App />);
+    });
+    await waitFor(() => expect(view.getAllByTestId("text")).toHaveLength(2));
+
+    await act(async () => {
+      harness.runtime!.thread.reset(toolMessages);
+    });
+
+    await waitFor(() => expect(view.getAllByTestId("tool")).toHaveLength(2));
+    expect(view.queryAllByTestId("text")).toHaveLength(0);
+  });
+
+  it.each([
+    ["components API", Message],
+    ["children API", ChildrenMessage],
+  ])(
+    "does not crash when the incoming message has fewer parts with the %s",
+    async (_label, MessageComponent) => {
+      let view!: ReturnType<typeof render>;
+      await act(async () => {
+        view = render(<App MessageComponent={MessageComponent} />);
+      });
+      await waitFor(() => expect(view.getAllByTestId("text")).toHaveLength(2));
+
+      await act(async () => {
+        harness.runtime!.thread.reset(shorterTextMessages);
+      });
+
+      await waitFor(() => expect(view.getAllByTestId("text")).toHaveLength(1));
+      expect(view.getByTestId("text").textContent).toBe("shorter");
+    },
+  );
+
+  it("warns and clamps an index that was never valid", async () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    try {
+      let view!: ReturnType<typeof render>;
+      await act(async () => {
+        view = render(<App MessageComponent={InvalidPartMessage} />);
+      });
+      expect(warn).toHaveBeenCalledWith(
+        expect.stringContaining(
+          "useClientLookup: Clamped stale index 2 to 1 (length: 2)",
+        ),
+      );
+      expect(view.getByTestId("clamped-part").textContent).toBe("world");
+    } finally {
+      warn.mockRestore();
+    }
+  });
+});

package/src/tests/messagePartTypeMismatch.test.tsx

@@ -0,0 +1,146 @@
+// @vitest-environment jsdom
+
+import { type FC, type PropsWithChildren, type ReactNode } from "react";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { AssistantRuntimeProvider } from "../context";
+import * as MessagePartPrimitive from "../primitives/messagePart";
+import * as MessagePrimitive from "../primitives/message";
+import * as ThreadPrimitive from "../primitives/thread";
+import { useLocalRuntime } from "../legacy-runtime/runtime-cores/local/useLocalRuntime";
+import {
+  useMessagePartReasoning,
+  useMessagePartSource,
+  useMessagePartFile,
+  type ChatModelAdapter,
+  type ThreadMessageLike,
+} from "../index";
+
+const noOpAdapter: ChatModelAdapter = {
+  async *run() {},
+};
+
+// A thread whose only assistant message has a single tool-call part at index 0.
+// During a thread switch, a still-mounted text/image/reasoning/source/file
+// consumer at (0, 0) re-resolves its index-derived part scope against the new
+// thread and reads this tool-call part, so its selector must not throw inside
+// useSyncExternalStore's getSnapshot (#5118).
+const toolCallOnly: ThreadMessageLike[] = [
+  {
+    role: "assistant",
+    content: [
+      {
+        type: "tool-call",
+        toolCallId: "tc-1",
+        toolName: "search",
+        args: {},
+        argsText: "{}",
+      },
+    ],
+    status: { type: "complete", reason: "stop" },
+  },
+];
+
+const RuntimeProvider: FC<
+  PropsWithChildren<{ messages: ThreadMessageLike[] }>
+> = ({ messages, children }) => {
+  const runtime = useLocalRuntime(noOpAdapter, { initialMessages: messages });
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      {children}
+    </AssistantRuntimeProvider>
+  );
+};
+
+// Renders a part consumer under a Message whose parts always render it,
+// regardless of the part type. This mounts the consumer inside the part scope
+// at index 0, where it reads the tool-call part — the transient state a
+// thread switch produces for a still-mounted consumer.
+const MessageWith: FC<{ renderPart: () => ReactNode }> = ({ renderPart }) => (
+  <MessagePrimitive.Parts>{() => renderPart()}</MessagePrimitive.Parts>
+);
+
+const renderToolCallMessage = (renderPart: () => ReactNode) => {
+  const Message: FC = () => <MessageWith renderPart={renderPart} />;
+  render(
+    <RuntimeProvider messages={toolCallOnly}>
+      <ThreadPrimitive.Messages components={{ Message }} />
+    </RuntimeProvider>,
+  );
+};
+
+describe("part hooks tolerate a transient part-type mismatch", () => {
+  it("MessagePartPrimitive.Text renders empty when the part is a tool-call", async () => {
+    renderToolCallMessage(() => (
+      <MessagePartPrimitive.Text data-testid="text" />
+    ));
+
+    const text = await screen.findByTestId("text");
+    expect(text.textContent).toBe("");
+  });
+
+  it("MessagePartPrimitive.Image renders an empty image when the part is a tool-call", async () => {
+    renderToolCallMessage(() => (
+      <MessagePartPrimitive.Image data-testid="image" alt="" />
+    ));
+
+    const image = await screen.findByTestId("image");
+    expect(image.tagName).toBe("IMG");
+  });
+
+  it("useMessagePartReasoning returns an empty reasoning part when the part is a tool-call", async () => {
+    const Reader: FC = () => {
+      const part = useMessagePartReasoning();
+      return <span data-testid="reasoning">{part.text}</span>;
+    };
+    renderToolCallMessage(() => <Reader />);
+
+    const reasoning = await screen.findByTestId("reasoning");
+    expect(reasoning.textContent).toBe("");
+  });
+
+  it("useMessagePartSource returns an empty source part when the part is a tool-call", async () => {
+    const Reader: FC = () => {
+      const part = useMessagePartSource();
+      return <span data-testid="source">{part.sourceType}</span>;
+    };
+    renderToolCallMessage(() => <Reader />);
+
+    const source = await screen.findByTestId("source");
+    expect(source.textContent).toBe("url");
+  });
+
+  it("useMessagePartFile returns an empty file part when the part is a tool-call", async () => {
+    const Reader: FC = () => {
+      const part = useMessagePartFile();
+      return <span data-testid="file">{part.mimeType}</span>;
+    };
+    renderToolCallMessage(() => <Reader />);
+
+    const file = await screen.findByTestId("file");
+    expect(file.textContent).toBe("");
+  });
+
+  it("a real text part still renders its text", async () => {
+    const textMessage: ThreadMessageLike[] = [
+      {
+        role: "assistant",
+        content: [{ type: "text", text: "hello" }],
+        status: { type: "complete", reason: "stop" },
+      },
+    ];
+    const Message: FC = () => (
+      <MessageWith
+        renderPart={() => <MessagePartPrimitive.Text data-testid="text" />}
+      />
+    );
+    render(
+      <RuntimeProvider messages={textMessage}>
+        <ThreadPrimitive.Messages components={{ Message }} />
+      </RuntimeProvider>,
+    );
+
+    const text = await screen.findByTestId("text");
+    expect(text.textContent).toBe("hello");
+  });
+});

package/src/tests/threadMessageById.test.tsx

@@ -215,10 +215,3 @@ describe("ThreadPrimitive.Unstable_MessageById", () => {
     expect(screen.getByTestId("by-id").textContent).toBe("first");
   });
 });
-
-describe("exports", () => {
-  it("exposes the unstable id-keyed surface", () => {
-    expect(typeof unstable_useThreadMessageIds).toBe("function");
-    expect(ThreadPrimitive.Unstable_MessageById).toBeDefined();
-  });
-});

package/src/utils/smooth/useSmooth.ts

@@ -58,10 +58,13 @@ class TextStreamAnimator {
   public maxCharsPerFrame: number = Infinity;
   public minCommitMs: number = 0;
 
-  constructor(
-    public currentText: string,
-    private setText: (newText: string) => void,
-  ) {}
+  public currentText: string;
+  private setText: (newText: string) => void;
+
+  constructor(currentText: string, setText: (newText: string) => void) {
+    this.currentText = currentText;
+    this.setText = setText;
+  }
 
   start() {
     if (this.animationFrameId !== null) return;