@assistant-ui/react 0.14.26 → 0.14.28

package/src/primitives/thread/useThreadViewportAutoScroll.test.tsx

@@ -11,6 +11,7 @@ import {
   vi,
 } from "vitest";
 import { useEffect, useState, type FC, type PropsWithChildren } from "react";
+import { useAuiState } from "@assistant-ui/store";
 import { AssistantRuntimeProvider } from "../../context";
 import * as MessagePrimitive from "../message";
 import { ThreadPrimitiveMessages } from "./ThreadMessages";
@@ -39,6 +40,7 @@ const getMaxScrollTop = (element: Element) =>
   Math.max(0, element.scrollHeight - element.clientHeight);
 
 let forceShortViewportMeasurement = false;
+let viewportMeasurementOffset = 0;
 const resizeObserverCallbacks = new Set<ResizeObserverCallback>();
 
 class TestResizeObserver {
@@ -111,7 +113,9 @@ beforeAll(() => {
       if (this.getAttribute("data-testid") !== "viewport") return 0;
       if (forceShortViewportMeasurement) return this.clientHeight;
       return (
-        document.querySelectorAll('[data-testid="thread-message"]').length * 80
+        document.querySelectorAll('[data-testid="thread-message"]').length *
+          80 +
+        viewportMeasurementOffset
       );
     },
   });
@@ -127,6 +131,7 @@ beforeAll(() => {
 
 afterEach(() => {
   forceShortViewportMeasurement = false;
+  viewportMeasurementOffset = 0;
   resizeObserverCallbacks.clear();
   cleanup();
 });
@@ -174,6 +179,11 @@ const BottomAnchorThread = () => (
   </ThreadPrimitiveRoot>
 );
 
+const RunState = () => {
+  const isRunning = useAuiState((s) => s.thread.isRunning);
+  return <output data-testid="run-state">{String(isRunning)}</output>;
+};
+
 const SyncRuntimeProvider: FC<PropsWithChildren> = ({ children }) => {
   const runtime = useLocalRuntime(adapter, { initialMessages: messages });
 
@@ -302,6 +312,81 @@ describe("useThreadViewportAutoScroll", () => {
     scrollToSpy.mockRestore();
   });
 
+  it("defers auto-scroll to an active top anchor only while the run is active", async () => {
+    let releaseRun!: () => void;
+    const runGate = new Promise<void>((resolve) => {
+      releaseRun = resolve;
+    });
+    const deferredAdapter: ChatModelAdapter = {
+      async *run() {
+        await runGate;
+        yield { content: [{ type: "text", text: "done" }] };
+      },
+    };
+    const scrollToSpy = vi.spyOn(HTMLElement.prototype, "scrollTo");
+
+    let runtime: ReturnType<typeof useLocalRuntime> | null = null;
+    const Harness: FC = () => {
+      runtime = useLocalRuntime(deferredAdapter, { initialMessages: messages });
+      return (
+        <AssistantRuntimeProvider runtime={runtime}>
+          <Thread autoScroll scrollToBottomOnInitialize={false} />
+          <RunState />
+        </AssistantRuntimeProvider>
+      );
+    };
+
+    render(<Harness />);
+
+    act(() => {
+      void runtime!.thread.append({
+        role: "user",
+        content: [{ type: "text", text: "hello" }],
+      });
+    });
+
+    await waitFor(() => {
+      expect(
+        document.querySelector("[data-aui-top-anchor-user]"),
+      ).not.toBeNull();
+    });
+
+    scrollToSpy.mockClear();
+    viewportMeasurementOffset = 1;
+    act(notifyResizeObservers);
+
+    expect(
+      scrollToSpy.mock.calls.map(
+        (call) => (call[0] as ScrollToOptions).behavior,
+      ),
+    ).not.toContain("instant");
+
+    await act(async () => {
+      releaseRun();
+    });
+    await waitFor(() => {
+      expect(screen.getByTestId("run-state").textContent).toBe("false");
+    });
+    expect(document.querySelector("[data-aui-top-anchor-user]")).not.toBeNull();
+
+    const viewport = getViewport();
+    act(() => {
+      viewport.scrollTop = getMaxScrollTop(viewport);
+      viewport.dispatchEvent(new Event("scroll"));
+    });
+    scrollToSpy.mockClear();
+    viewportMeasurementOffset = 2;
+    act(notifyResizeObservers);
+
+    expect(
+      scrollToSpy.mock.calls.map(
+        (call) => (call[0] as ScrollToOptions).behavior,
+      ),
+    ).toContain("instant");
+
+    scrollToSpy.mockRestore();
+  });
+
   it("does not scroll initial messages when initialize scrolling is disabled", async () => {
     render(
       <SyncRuntimeProvider>

package/src/primitives/thread/useThreadViewportAutoScroll.ts

@@ -50,6 +50,7 @@ export const useThreadViewportAutoScroll = <TElement extends HTMLElement>({
 }: useThreadViewportAutoScroll.Options): RefCallback<TElement> => {
   const divRef = useRef<TElement>(null);
   const hasMessages = useAuiState((s) => s.thread.messages.length > 0);
+  const isRunning = useAuiState((s) => s.thread.isRunning);
   const initializeScrollRequestedRef = useRef(false);
   const scheduledFrameRef = useRef<number | null>(null);
 
@@ -172,7 +173,11 @@ export const useThreadViewportAutoScroll = <TElement extends HTMLElement>({
       scrollingToBottomBehaviorRef.current = null;
     } else if (scrollBehavior) {
       scrollToBottom(scrollBehavior);
-    } else if (autoScroll && threadViewportStore.getState().isAtBottom) {
+    } else if (
+      autoScroll &&
+      !(isRunning && hasActiveTopAnchor()) &&
+      threadViewportStore.getState().isAtBottom
+    ) {
       scrollToBottom("instant");
     }
 

package/src/tests/BaseComposerRuntimeCore.test.ts

@@ -540,11 +540,15 @@ describe("BaseComposerRuntimeCore", () => {
         ).rejects.toThrow(/is not accepted/);
       });
 
-      it("does not fire attachmentAddError when an attachmentAdd subscriber throws", async () => {
+      it("isolates a throwing attachmentAdd subscriber without firing attachmentAddError", async () => {
         composer.setAttachmentAdapter(makeImageAdapter());
+        const listenerError = new Error("add subscriber boom");
+        const consoleError = vi
+          .spyOn(console, "error")
+          .mockImplementation(() => {});
         const onError = vi.fn();
         composer.unstable_on("attachmentAdd", () => {
-          throw new Error("add subscriber boom");
+          throw listenerError;
         });
         composer.unstable_on("attachmentAddError", onError);
 
@@ -555,10 +559,15 @@ describe("BaseComposerRuntimeCore", () => {
               contentType: "image/png",
             }),
           ),
-        ).rejects.toThrow("add subscriber boom");
+        ).resolves.toBeUndefined();
 
         expect(composer.attachments).toHaveLength(1);
         expect(onError).not.toHaveBeenCalled();
+        expect(consoleError).toHaveBeenCalledWith(
+          '[assistant-ui] Composer runtime "attachmentAdd" listener threw an error',
+          listenerError,
+        );
+        consoleError.mockRestore();
       });
 
       it("does not fire attachmentAddError when a state subscriber throws on add", async () => {

package/src/tests/LocalThreadRuntimeCore.test.ts

@@ -161,7 +161,10 @@ describe("LocalThreadRuntimeCore", () => {
     expect(assistant.status!.type).toBe("incomplete");
     if (assistant.status!.type === "incomplete") {
       expect(assistant.status!.reason).toBe("error");
-      expect(assistant.status!.error).toBe("Model unavailable");
+      expect(assistant.status!.error).toEqual({
+        code: "unknown",
+        message: "Model unavailable",
+      });
     }
   });
 

package/src/tests/auiV0Encode.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from "vitest";
-import { auiV0Encode } from "../legacy-runtime/cloud/auiV0";
+import { auiV0Decode, auiV0Encode } from "../legacy-runtime/cloud/auiV0";
 
 describe("auiV0Encode", () => {
   it("preserves document source parts in the legacy cloud encoder", () => {
@@ -52,4 +52,137 @@ describe("auiV0Encode", () => {
       },
     ]);
   });
+
+  it("preserves user attachments in the legacy cloud encoder", () => {
+    const encoded = auiV0Encode({
+      id: "m1",
+      createdAt: new Date("2026-03-15T00:00:00.000Z"),
+      role: "user",
+      metadata: { custom: {} },
+      content: [{ type: "text", text: "please review this" }],
+      attachments: [
+        {
+          id: "att-1",
+          type: "document",
+          name: "proposal.pdf",
+          contentType: "application/pdf",
+          status: { type: "complete" },
+          content: [
+            {
+              type: "file",
+              data: "data:application/pdf;base64,JVBERi0xLjQ=",
+              mimeType: "application/pdf",
+              filename: "proposal.pdf",
+            },
+          ],
+        },
+      ],
+    });
+
+    expect(encoded.attachments).toEqual([
+      {
+        id: "att-1",
+        type: "document",
+        name: "proposal.pdf",
+        contentType: "application/pdf",
+        status: { type: "complete" },
+        content: [
+          {
+            type: "file",
+            data: "data:application/pdf;base64,JVBERi0xLjQ=",
+            mimeType: "application/pdf",
+            filename: "proposal.pdf",
+          },
+        ],
+      },
+    ]);
+  });
+
+  it("omits missing attachment contentType in the legacy cloud encoder", () => {
+    const encoded = auiV0Encode({
+      id: "m1",
+      createdAt: new Date("2026-03-15T00:00:00.000Z"),
+      role: "user",
+      metadata: { custom: {} },
+      content: [{ type: "text", text: "please review this" }],
+      attachments: [
+        {
+          id: "att-1",
+          type: "document",
+          name: "notes.txt",
+          status: { type: "complete" },
+          content: [{ type: "text", text: "notes" }],
+        },
+      ],
+    });
+
+    expect(encoded.attachments).toEqual([
+      {
+        id: "att-1",
+        type: "document",
+        name: "notes.txt",
+        status: { type: "complete" },
+        content: [{ type: "text", text: "notes" }],
+      },
+    ]);
+  });
+});
+
+describe("auiV0Decode", () => {
+  it("restores user attachments from legacy cloud history", () => {
+    const content = auiV0Encode({
+      id: "local",
+      createdAt: new Date("2026-03-15T00:00:00.000Z"),
+      role: "user",
+      metadata: { custom: {} },
+      content: [{ type: "text", text: "please review this" }],
+      attachments: [
+        {
+          id: "att-1",
+          type: "document",
+          name: "proposal.pdf",
+          contentType: "application/pdf",
+          status: { type: "complete" },
+          content: [
+            {
+              type: "file",
+              data: "data:application/pdf;base64,JVBERi0xLjQ=",
+              mimeType: "application/pdf",
+              filename: "proposal.pdf",
+            },
+          ],
+        },
+      ],
+    });
+
+    const decoded = auiV0Decode({
+      id: "cloud",
+      parent_id: null,
+      height: 0,
+      created_at: new Date("2026-03-15T00:00:00.000Z"),
+      updated_at: new Date("2026-03-15T00:00:00.000Z"),
+      format: "aui/v0",
+      content: content as never,
+    });
+
+    expect(decoded.message.role).toBe("user");
+    if (decoded.message.role !== "user") throw new Error("expected user");
+    expect(decoded.message.attachments).toEqual([
+      {
+        id: "att-1",
+        type: "document",
+        name: "proposal.pdf",
+        contentType: "application/pdf",
+        status: { type: "complete" },
+        content: [
+          {
+            type: "file",
+            data: "data:application/pdf;base64,JVBERi0xLjQ=",
+            mimeType: "application/pdf",
+            filename: "proposal.pdf",
+          },
+        ],
+      },
+    ]);
+  });
 });

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

@@ -0,0 +1,81 @@
+// @vitest-environment jsdom
+
+import { act, render, waitFor } from "@testing-library/react";
+import type { FC } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { AuiProvider, useAui } from "@assistant-ui/store";
+import { ExternalThread } from "../client/ExternalThread";
+
+const renderThread = () => {
+  const captured: { aui?: ReturnType<typeof useAui> } = {};
+  const Capture: FC = () => {
+    captured.aui = useAui();
+    return null;
+  };
+  const App: FC = () => {
+    const aui = useAui({
+      thread: ExternalThread({ messages: [], isRunning: false }),
+    });
+    return (
+      <AuiProvider value={aui}>
+        <Capture />
+      </AuiProvider>
+    );
+  };
+
+  render(<App />);
+  return () => captured.aui!;
+};
+
+describe("ExternalThread attachments", () => {
+  it("adds prepared attachments when File is unavailable", async () => {
+    const aui = renderThread();
+    const fileConstructor = globalThis.File;
+    vi.stubGlobal("File", undefined);
+
+    try {
+      await act(async () => {
+        await aui()
+          .thread()
+          .composer()
+          .addAttachment({
+            name: "notes.txt",
+            contentType: "text/plain",
+            content: [{ type: "text", text: "hello" }],
+          });
+      });
+    } finally {
+      vi.stubGlobal("File", fileConstructor);
+    }
+
+    await waitFor(() => {
+      expect(aui().thread().composer().getState().attachments[0]).toMatchObject(
+        {
+          type: "document",
+          name: "notes.txt",
+          contentType: "text/plain",
+          content: [{ type: "text", text: "hello" }],
+        },
+      );
+    });
+  });
+
+  it("preserves foreign files that expose content", async () => {
+    const aui = renderThread();
+    const foreignFile = {
+      name: "photo.png",
+      type: "image/png",
+      lastModified: 0,
+      content: [{ type: "text", text: "implementation detail" }],
+    } as File;
+
+    await act(() => aui().thread().composer().addAttachment(foreignFile));
+
+    expect(aui().thread().composer().getState().attachments[0]).toMatchObject({
+      type: "file",
+      name: "photo.png",
+      contentType: "image/png",
+      file: foreignFile,
+    });
+  });
+});

package/src/tests/messagePartSwitchRace.test.tsx

@@ -0,0 +1,158 @@
+// @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 } 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 = () => {
+  useAuiState((s) => s.part.type);
+  return null;
+};
+
+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 (#5118)", () => {
+  it("an out-of-band flushSync re-render during the swap window does not crash", 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("still rejects an index that was never valid", async () => {
+    await expect(
+      act(async () => {
+        render(<App MessageComponent={InvalidPartMessage} />);
+      }),
+    ).rejects.toThrow("useClientLookup: Index 2 out of bounds (length: 2)");
+  });
+});