@assistant-ui/react 0.15.19 → 0.15.21

package/dist/utils/hooks/useManagedRef.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useManagedRef.d.ts","names":[],"sources":["../../../src/utils/hooks/useManagedRef.ts"],"mappings":";cAEa,gBAAiB,OAC5B,WAAW,MAAM,wCAAkC,IAK5C"}
+{"version":3,"file":"useManagedRef.d.ts","names":[],"sources":["../../../src/utils/hooks/useManagedRef.ts"],"mappings":";qBAEa,gBAAiB,OAC5B,WAAW,MAAM,wCAAkC,IAK5C"}

package/dist/utils/hooks/useMediaQuery.d.ts

@@ -1,5 +1,4 @@
 //#region src/utils/hooks/useMediaQuery.d.ts
-declare const useMediaQuery: (query: string | null) => boolean;
+export declare const useMediaQuery: (query: string | null) => boolean;
 //#endregion
-export { useMediaQuery };
 //# sourceMappingURL=useMediaQuery.d.ts.map

package/dist/utils/hooks/useMediaQuery.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useMediaQuery.d.ts","names":[],"sources":["../../../src/utils/hooks/useMediaQuery.ts"],"mappings":";cAOa,gBAAiB"}
+{"version":3,"file":"useMediaQuery.d.ts","names":[],"sources":["../../../src/utils/hooks/useMediaQuery.ts"],"mappings":";qBAOa,gBAAiB"}

package/dist/utils/hooks/useOnResizeContent.d.ts

@@ -1,5 +1,4 @@
 //#region src/utils/hooks/useOnResizeContent.d.ts
-declare const useOnResizeContent: (callback: () => void) => (el: HTMLElement | null) => void;
+export declare const useOnResizeContent: (callback: () => void) => (el: HTMLElement | null) => void;
 //#endregion
-export { useOnResizeContent };
 //# sourceMappingURL=useOnResizeContent.d.ts.map

package/dist/utils/hooks/useOnResizeContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useOnResizeContent.d.ts","names":[],"sources":["../../../src/utils/hooks/useOnResizeContent.ts"],"mappings":";cAIa,qBAAsB,0BAAoB,IAAA"}
+{"version":3,"file":"useOnResizeContent.d.ts","names":[],"sources":["../../../src/utils/hooks/useOnResizeContent.ts"],"mappings":";qBAIa,qBAAsB,0BAAoB,IAAA"}

package/dist/utils/hooks/useOnScrollToBottom.d.ts

@@ -1,7 +1,6 @@
 //#region src/utils/hooks/useOnScrollToBottom.d.ts
-declare const useOnScrollToBottom: (callback: (config: {
+export declare const useOnScrollToBottom: (callback: (config: {
   behavior: ScrollBehavior;
 }) => void) => void;
 //#endregion
-export { useOnScrollToBottom };
 //# sourceMappingURL=useOnScrollToBottom.d.ts.map

package/dist/utils/hooks/useOnScrollToBottom.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useOnScrollToBottom.d.ts","names":[],"sources":["../../../src/utils/hooks/useOnScrollToBottom.ts"],"mappings":";cAMa,sBACX,WAAW;EAAU,UAAU"}
+{"version":3,"file":"useOnScrollToBottom.d.ts","names":[],"sources":["../../../src/utils/hooks/useOnScrollToBottom.ts"],"mappings":";qBAMa,sBACX,WAAW;EAAU,UAAU"}

package/dist/utils/hooks/useSizeHandle.d.ts

@@ -8,7 +8,6 @@ import { SizeHandle } from "../../context/stores/ThreadViewport.js";
  * @param getHeight - Optional function to compute height (defaults to el.offsetHeight)
  * @returns A ref callback to attach to the element
  */
-declare const useSizeHandle: (register: (() => SizeHandle) | null | undefined, getHeight?: (el: HTMLElement) => number) => (el: HTMLElement | null) => void;
+export declare const useSizeHandle: (register: (() => SizeHandle) | null | undefined, getHeight?: (el: HTMLElement) => number) => (el: HTMLElement | null) => void;
 //#endregion
-export { useSizeHandle };
 //# sourceMappingURL=useSizeHandle.d.ts.map

package/dist/utils/hooks/useSizeHandle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSizeHandle.d.ts","names":[],"sources":["../../../src/utils/hooks/useSizeHandle.ts"],"mappings":";;;;;;;;;;cAca,gBACX,iBAAiB,gCACjB,aAAa,IAAI,4BAAsB,IAAA"}
+{"version":3,"file":"useSizeHandle.d.ts","names":[],"sources":["../../../src/utils/hooks/useSizeHandle.ts"],"mappings":";;;;;;;;;;qBAca,gBACX,iBAAiB,gCACjB,aAAa,IAAI,4BAAsB,IAAA"}

package/dist/utils/smooth/SmoothContext.d.ts

@@ -1,9 +1,9 @@
 import { ReadonlyStore } from "../../context/ReadonlyStore.js";
 import { ComponentType, FC, PropsWithChildren } from "react";
 //#region src/utils/smooth/SmoothContext.d.ts
-declare const SmoothContextProvider: FC<PropsWithChildren>;
-declare const withSmoothContextProvider: <C extends ComponentType<any>>(Component: C) => C;
-declare const useSmoothStatus: {
+export declare const SmoothContextProvider: FC<PropsWithChildren>;
+export declare const withSmoothContextProvider: <C extends ComponentType<any>>(Component: C) => C;
+export declare const useSmoothStatus: {
   (): {
     readonly type: "running";
   } | {
@@ -110,5 +110,4 @@ declare const useSmoothStatus: {
   }> | null;
 };
 //#endregion
-export { SmoothContextProvider, useSmoothStatus, useSmoothStatusStore, withSmoothContextProvider };
 //# sourceMappingURL=SmoothContext.d.ts.map

package/dist/utils/smooth/SmoothContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SmoothContext.d.ts","names":[],"sources":["../../../src/utils/smooth/SmoothContext.tsx"],"mappings":";;;cAmCa,uBAAuB,GAAG;cAgB1B,4BAA6B,UAAU,oBAClD,WAAW,MACV;cA2BY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAAiB"}
+{"version":3,"file":"SmoothContext.d.ts","names":[],"sources":["../../../src/utils/smooth/SmoothContext.tsx"],"mappings":";;;qBAmCa,uBAAuB,GAAG;qBAgB1B,4BAA6B,UAAU,oBAClD,WAAW,MACV;qBA2BY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAAiB"}

package/dist/utils/smooth/useSmooth.d.ts

@@ -3,7 +3,7 @@ import { MessagePartState, ReasoningMessagePart, TextMessagePart } from "@assist
 /**
  * Tuning options for the smooth text streaming animation.
  */
-type SmoothOptions = {
+export type SmoothOptions = {
   /**
    * Target time in milliseconds to drain the backlog of unrevealed
    * characters. Larger values reveal long backlogs more gradually.
@@ -53,7 +53,6 @@ type SmoothOptions = {
  * });
  * ```
  */
-declare const useSmooth: (state: MessagePartState & (TextMessagePart | ReasoningMessagePart), smooth?: boolean | SmoothOptions) => MessagePartState & (TextMessagePart | ReasoningMessagePart);
+export declare const useSmooth: (state: MessagePartState & (TextMessagePart | ReasoningMessagePart), smooth?: boolean | SmoothOptions) => MessagePartState & (TextMessagePart | ReasoningMessagePart);
 //#endregion
-export { SmoothOptions, useSmooth };
 //# sourceMappingURL=useSmooth.d.ts.map

package/dist/utils/smooth/useSmooth.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSmooth.d.ts","names":[],"sources":["../../../src/utils/smooth/useSmooth.ts"],"mappings":";;;;;KAkBY;;;;;;EAMV;;;;;;EAMA;;;;;EAKA;;;;;;;;EAQA;;;;;;;;;;;;;;;;;;;;;;;;;cAgHW,YACX,OAAO,oBAAoB,kBAAkB,uBAC7C,mBAAkB,kBACjB,oBAAoB,kBAAkB"}
+{"version":3,"file":"useSmooth.d.ts","names":[],"sources":["../../../src/utils/smooth/useSmooth.ts"],"mappings":";;;;;YAkBY;;;;;;EAMV;;;;;;EAMA;;;;;EAKA;;;;;;;;EAQA;;;;;;;;;;;;;;;;;;;;;;;;;qBAgHW,YACX,OAAO,oBAAoB,kBAAkB,uBAC7C,mBAAkB,kBACjB,oBAAoB,kBAAkB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@assistant-ui/react",
-  "version": "0.15.19",
+  "version": "0.15.21",
   "description": "Open-source TypeScript/React library for building production-grade AI chat experiences",
   "keywords": [
     "ai",
@@ -55,15 +55,15 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@assistant-ui/core": "^0.3.18",
-    "@assistant-ui/store": "^0.3.13",
-    "@assistant-ui/tap": "^0.9.17",
-    "assistant-cloud": "^0.2.0",
-    "assistant-stream": "^0.3.42",
+    "@assistant-ui/core": "^0.3.20",
+    "@assistant-ui/store": "^0.3.14",
+    "@assistant-ui/tap": "^0.9.18",
+    "assistant-cloud": "^0.2.2",
+    "assistant-stream": "^0.3.44",
     "radix-ui": "^1.6.7",
     "react-textarea-autosize": "^8.5.9",
-    "safe-content-frame": "^0.0.30",
-    "zod": "^4.5.4",
+    "safe-content-frame": "^0.0.31",
+    "zod": "^4.6.5",
     "zustand": "^5.0.15"
   },
   "peerDependencies": {
@@ -81,17 +81,17 @@
     }
   },
   "devDependencies": {
-    "@assistant-ui/vite": "0.0.17",
-    "@assistant-ui/x-buildutils": "0.0.26",
+    "@assistant-ui/vite": "0.0.18",
+    "@assistant-ui/x-buildutils": "0.0.28",
     "@testing-library/react": "^16.3.3",
     "@types/json-schema": "^7.0.15",
-    "@types/node": "^26.4.1",
-    "@types/react": "^19.2.18",
-    "@types/react-dom": "^19.2.7",
+    "@types/node": "^26.5.1",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
     "jsdom": "^30.0.1",
-    "react": "^19.2.8",
-    "react-dom": "^19.2.8",
-    "vitest": "^4.1.11"
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "vitest": "^5.0.1"
   },
   "publishConfig": {
     "access": "public",
@@ -109,6 +109,7 @@
   "scripts": {
     "build": "aui-build",
     "test": "vitest run",
+    "typecheck": "tsc --noEmit",
     "test:watch": "vitest"
   }
 }

package/src/context/stores/ThreadViewport.test.ts

@@ -0,0 +1,29 @@
+import { describe, expect, it, onTestFinished, vi } from "vitest";
+import { makeThreadViewportStore } from "./ThreadViewport";
+
+describe("makeThreadViewportStore", () => {
+  it("notifies every scroll listener when one throws", () => {
+    const store = makeThreadViewportStore();
+    const listenerError = new Error("scroll listener failed");
+    const consoleError = vi
+      .spyOn(console, "error")
+      .mockImplementation(() => {});
+    onTestFinished(() => consoleError.mockRestore());
+    const laterListener = vi.fn();
+
+    store.getState().onScrollToBottom(() => {
+      throw listenerError;
+    });
+    store.getState().onScrollToBottom((config) => {
+      config.behavior = "smooth";
+    });
+    store.getState().onScrollToBottom(laterListener);
+
+    expect(() => store.getState().scrollToBottom()).not.toThrow();
+    expect(laterListener).toHaveBeenCalledWith({ behavior: "auto" });
+    expect(consoleError).toHaveBeenCalledWith(
+      expect.stringContaining("Thread viewport"),
+      listenerError,
+    );
+  });
+});

package/src/context/stores/ThreadViewport.ts

@@ -2,6 +2,7 @@
 
 import { create } from "zustand";
 import type { Unsubscribe } from "@assistant-ui/core";
+import { notifyEventListeners } from "@assistant-ui/core/internal";
 
 export type SizeHandle = {
   /** Update the height */
@@ -184,9 +185,11 @@ export const makeThreadViewportStore = (
   const store = create<ThreadViewportState>(() => ({
     isAtBottom: true,
     scrollToBottom: ({ behavior = "auto" } = {}) => {
-      for (const listener of scrollToBottomListeners) {
-        listener({ behavior });
-      }
+      notifyEventListeners(
+        scrollToBottomListeners,
+        () => ({ behavior }),
+        "Thread viewport",
+      );
     },
     onScrollToBottom: (callback) => {
       scrollToBottomListeners.add(callback);

package/src/index.ts

@@ -159,6 +159,8 @@ export { useExternalStoreSharedOptions } from "@assistant-ui/core/react";
 export {
   useExternalMessageConverter,
   convertExternalMessages as unstable_convertExternalMessages,
+  createExternalMessageConversionCache as unstable_createExternalMessageConversionCache,
+  type ExternalMessageConversionCache as Unstable_ExternalMessageConversionCache,
 } from "./legacy-runtime/runtime-cores/external-store/external-message-converter";
 export { createMessageConverter as unstable_createMessageConverter } from "./legacy-runtime/runtime-cores/external-store/createMessageConverter";
 
@@ -278,6 +280,8 @@ export { tool } from "@assistant-ui/core";
 export { Suggestions, type SuggestionConfig } from "@assistant-ui/core/store";
 export type {
   QueueItemState,
+  TaskState,
+  TaskMethods,
   QueueItemMethods,
 } from "@assistant-ui/core/store";
 export type { ComposerSendOptions } from "@assistant-ui/core/store";
@@ -374,6 +378,7 @@ export type {
   MessagePartStreamStatus,
   ToolCallMessagePartStatus,
   MessageTiming,
+  MessageModality,
   ThreadUserMessagePart,
   ThreadAssistantMessagePart,
   ThreadSystemMessage,

package/src/legacy-runtime/runtime-cores/external-store/external-message-converter.ts

@@ -2,4 +2,6 @@
 export {
   useExternalMessageConverter,
   convertExternalMessages,
+  createExternalMessageConversionCache,
+  type ExternalMessageConversionCache,
 } from "@assistant-ui/core/react";

package/src/mcp-apps/McpAppRenderer.test.tsx

@@ -70,8 +70,7 @@ const createPart = (
 });
 
 const createPartWithoutApp = (): ToolCallMessagePartProps => {
-  const part = createPart();
-  delete part.mcp;
+  const { mcp: _mcp, ...part } = createPart();
   return part;
 };
 

package/src/mcp-apps/app-frame.test.tsx

@@ -29,7 +29,6 @@ import { McpAppFrame } from "./app-frame";
 describe("McpAppFrame", () => {
   afterEach(() => {
     cleanup();
-    vi.clearAllMocks();
   });
 
   it("keeps bridge options scoped to committed renders", async () => {

package/src/model-context/frame/useAssistantFrameHost.test.tsx

@@ -0,0 +1,42 @@
+// @vitest-environment jsdom
+
+import { renderHook } from "@testing-library/react";
+import { AssistantFrameHost } from "@assistant-ui/core";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { useAssistantFrameHost } from "./useAssistantFrameHost";
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+describe("useAssistantFrameHost", () => {
+  it("unregisters the host when disposal throws", () => {
+    const disposalError = new Error("tool cancellation failed");
+    const unregistrationError = new Error("unregistration failed");
+    vi.spyOn(AssistantFrameHost.prototype, "dispose").mockImplementation(() => {
+      throw disposalError;
+    });
+    const consoleError = vi
+      .spyOn(console, "error")
+      .mockImplementation(() => undefined);
+    const unsubscribe = vi.fn(() => {
+      throw unregistrationError;
+    });
+    const register = vi.fn(() => unsubscribe);
+    const iframeRef = {
+      current: {
+        contentWindow: { postMessage: vi.fn() } as unknown as Window,
+      } as HTMLIFrameElement,
+    };
+    const { unmount } = renderHook(() =>
+      useAssistantFrameHost({ iframeRef, register }),
+    );
+
+    expect(() => unmount()).toThrow(disposalError);
+    expect(unsubscribe).toHaveBeenCalledOnce();
+    expect(consoleError).toHaveBeenCalledWith(
+      "[assistant-ui] AssistantFrameHost unregistration failed.",
+      unregistrationError,
+    );
+  });
+});

package/src/model-context/frame/useAssistantFrameHost.ts

@@ -41,8 +41,31 @@ export const useAssistantFrameHost = ({
     const unsubscribe = register(frameHost);
 
     return () => {
-      frameHost.dispose();
-      unsubscribe();
+      let cleanupFailed = false;
+      let cleanupError: unknown;
+
+      try {
+        frameHost.dispose();
+      } catch (error) {
+        cleanupFailed = true;
+        cleanupError = error;
+      }
+
+      try {
+        unsubscribe();
+      } catch (error) {
+        if (cleanupFailed) {
+          console.error(
+            "[assistant-ui] AssistantFrameHost unregistration failed.",
+            error,
+          );
+        } else {
+          cleanupFailed = true;
+          cleanupError = error;
+        }
+      }
+
+      if (cleanupFailed) throw cleanupError;
     };
   }, [iframeRef, targetOrigin, register]);
 };

package/src/primitives/composer/ComposerAddAttachment.test.tsx

@@ -78,14 +78,16 @@ describe("ComposerPrimitiveAddAttachment", () => {
 
     const button = container.querySelector("button");
     expect(button).not.toBeNull();
+    if (!button) throw new Error("Attachment button was not rendered");
 
     await act(async () => {
-      button!.click();
+      button.click();
     });
 
     const input =
       document.querySelector<HTMLInputElement>('input[type="file"]');
     expect(input).not.toBeNull();
+    if (!input) throw new Error("File input was not rendered");
 
     const files = [
       new File(["a"], "unsupported.bin"),
@@ -96,13 +98,13 @@ describe("ComposerPrimitiveAddAttachment", () => {
       value: files,
     });
 
-    const result = input!.onchange?.call(input, {
-      target: input,
-    } as unknown as Event);
+    const event = new Event("change");
+    Object.defineProperty(event, "target", { value: input });
+    const result = input.onchange?.call(input, event);
 
     await expect(Promise.resolve(result)).resolves.toBeUndefined();
     expect(addAttachment).toHaveBeenCalledTimes(2);
     expect(errorSpy).not.toHaveBeenCalled();
-    expect(input!.isConnected).toBe(false);
+    expect(input.isConnected).toBe(false);
   });
 });

package/src/primitives/composer/ComposerRoot.test.tsx

@@ -354,9 +354,11 @@ describe("ComposerPrimitiveRoot compact mode", () => {
   );
 
   it("updates compact mode when the compact context multiline latch changes", async () => {
-    let compactContext: ComposerCompactContextValue | null = null;
+    const compactContext: { current: ComposerCompactContextValue | null } = {
+      current: null,
+    };
     const Probe = () => {
-      compactContext = useComposerCompactContextOptional();
+      compactContext.current = useComposerCompactContextOptional();
       return null;
     };
 
@@ -364,7 +366,7 @@ describe("ComposerPrimitiveRoot compact mode", () => {
       compact: true,
       children: <Probe />,
     });
-    const context = compactContext;
+    const context = compactContext.current;
     expect(context).not.toBeNull();
     if (!context) throw new Error("Composer compact context was not provided");
     expect(form.hasAttribute("data-compact")).toBe(true);

package/src/primitives/selectionToolbar/SelectionToolbarRoot.test.tsx

@@ -72,3 +72,47 @@ describe("SelectionToolbarPrimitiveRoot onMouseDown composition", () => {
     expect(notPrevented).toBe(false);
   });
 });
+
+describe("SelectionToolbarPrimitiveRoot frame cleanup", () => {
+  // Defer the frame instead of running it inline, so the window between the
+  // selection event and the frame is observable.
+  const deferFrames = () => {
+    const frames: FrameRequestCallback[] = [];
+    let nextHandle = 1;
+    vi.spyOn(window, "requestAnimationFrame").mockImplementation((cb) => {
+      frames.push(cb);
+      return nextHandle++;
+    });
+    const cancelAnimationFrame = vi
+      .spyOn(window, "cancelAnimationFrame")
+      .mockImplementation(() => {});
+    return { frames, cancelAnimationFrame };
+  };
+
+  it("cancels a queued selection frame when the toolbar unmounts", () => {
+    const { frames, cancelAnimationFrame } = deferFrames();
+    const { unmount } = render(<SelectionToolbarPrimitiveRoot />);
+
+    fireEvent.mouseUp(document);
+    expect(frames).toHaveLength(1);
+
+    unmount();
+
+    expect(cancelAnimationFrame).toHaveBeenCalledWith(1);
+  });
+
+  it("cancels the previous frame when another selection event arrives", () => {
+    const { frames, cancelAnimationFrame } = deferFrames();
+    const { unmount } = render(<SelectionToolbarPrimitiveRoot />);
+
+    fireEvent.mouseUp(document);
+    fireEvent.keyUp(document);
+    expect(frames).toHaveLength(2);
+    expect(cancelAnimationFrame).toHaveBeenCalledWith(1);
+
+    unmount();
+
+    expect(cancelAnimationFrame).toHaveBeenCalledTimes(2);
+    expect(cancelAnimationFrame).toHaveBeenLastCalledWith(2);
+  });
+});

package/src/primitives/selectionToolbar/SelectionToolbarRoot.tsx

@@ -51,8 +51,13 @@ export const SelectionToolbarPrimitiveRoot = forwardRef<
   const [info, setInfo] = useState<SelectionInfo | null>(null);
 
   useEffect(() => {
+    // Read the selection on the next frame so the browser has settled it.
+    let pendingFrame: number | null = null;
+
     const checkSelection = () => {
-      requestAnimationFrame(() => {
+      if (pendingFrame !== null) cancelAnimationFrame(pendingFrame);
+      pendingFrame = requestAnimationFrame(() => {
+        pendingFrame = null;
         const sel = window.getSelection();
         if (!sel || sel.isCollapsed) {
           setInfo(null);
@@ -94,6 +99,7 @@ export const SelectionToolbarPrimitiveRoot = forwardRef<
     document.addEventListener("scroll", handleScroll, true);
 
     return () => {
+      if (pendingFrame !== null) cancelAnimationFrame(pendingFrame);
       document.removeEventListener("mouseup", checkSelection);
       document.removeEventListener("keyup", checkSelection);
       document.removeEventListener("selectionchange", handleSelectionCollapse);

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

@@ -498,6 +498,101 @@ describe("useThreadViewportAutoScroll", () => {
     expect(screen.getByTestId("is-at-bottom").textContent).toBe("false");
   });
 
+  it("starts following when auto-scroll is enabled at the bottom", async () => {
+    const view = render(
+      <SyncRuntimeProvider>
+        <Thread autoScroll={false} scrollToBottomOnInitialize={false} />
+      </SyncRuntimeProvider>,
+    );
+
+    const viewport = getViewport();
+    await waitFor(() => {
+      expect(screen.getAllByTestId("thread-message")).toHaveLength(
+        messages.length,
+      );
+    });
+
+    act(() => {
+      viewport.scrollTop = getMaxScrollTop(viewport);
+      viewport.dispatchEvent(new Event("scroll"));
+    });
+
+    view.rerender(
+      <SyncRuntimeProvider>
+        <Thread autoScroll scrollToBottomOnInitialize={false} />
+      </SyncRuntimeProvider>,
+    );
+
+    viewportMeasurementOffset += 200;
+    act(notifyResizeObservers);
+
+    expect(viewport.scrollTop).toBe(getMaxScrollTop(viewport));
+  });
+
+  it("preserves bottom follow on initial mount when initialize scrolling is disabled", async () => {
+    render(
+      <SyncRuntimeProvider>
+        <ThreadPrimitiveRoot>
+          <ThreadPrimitiveViewport
+            autoScroll
+            data-testid="viewport"
+            scrollToBottomOnInitialize={false}
+            turnAnchor="top"
+          >
+            {messages.map((_, index) => (
+              <div key={index} data-testid="thread-message" />
+            ))}
+          </ThreadPrimitiveViewport>
+        </ThreadPrimitiveRoot>
+      </SyncRuntimeProvider>,
+    );
+
+    const viewport = getViewport();
+    await waitFor(() => {
+      expect(screen.getAllByTestId("thread-message")).toHaveLength(
+        messages.length,
+      );
+    });
+
+    viewportMeasurementOffset += 200;
+    act(notifyResizeObservers);
+
+    expect(viewport.scrollTop).toBe(getMaxScrollTop(viewport));
+  });
+
+  it("does not jump down when auto-scroll is enabled away from the bottom", async () => {
+    const view = render(
+      <SyncRuntimeProvider>
+        <Thread autoScroll={false} scrollToBottomOnInitialize={false} />
+      </SyncRuntimeProvider>,
+    );
+
+    const viewport = getViewport();
+    await waitFor(() => {
+      expect(screen.getAllByTestId("thread-message")).toHaveLength(
+        messages.length,
+      );
+    });
+
+    act(() => {
+      viewport.scrollTop = getMaxScrollTop(viewport) - 80;
+      viewport.dispatchEvent(new Event("scroll"));
+    });
+    const scrollTopBeforeEnable = viewport.scrollTop;
+
+    view.rerender(
+      <SyncRuntimeProvider>
+        <Thread autoScroll scrollToBottomOnInitialize={false} />
+      </SyncRuntimeProvider>,
+    );
+
+    viewportMeasurementOffset += 200;
+    act(notifyResizeObservers);
+
+    expect(viewport.scrollTop).toBe(scrollTopBeforeEnable);
+    expect(viewport.scrollTop).toBeLessThan(getMaxScrollTop(viewport));
+  });
+
   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) => {

package/src/primitives/thread/useThreadViewportAutoScroll.ts

@@ -74,6 +74,16 @@ export const useThreadViewportAutoScroll = <TElement extends HTMLElement>({
   // user actively scrolls up while content size is stable.
   const scrollingToBottomBehaviorRef = useRef<ScrollBehavior | null>(null);
   const followBottomRef = useRef(autoScroll);
+  const previousAutoScrollRef = useRef(autoScroll);
+
+  useLayoutEffect(() => {
+    const previousAutoScroll = previousAutoScrollRef.current;
+    previousAutoScrollRef.current = autoScroll;
+    if (previousAutoScroll || !autoScroll) return;
+
+    const div = divRef.current;
+    followBottomRef.current = div !== null && isViewportAtBottom(div);
+  }, [autoScroll]);
 
   const scrollToBottom = useCallback((behavior: ScrollBehavior) => {
     const div = divRef.current;

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

@@ -3,10 +3,8 @@
 import { act, render, waitFor } from "@testing-library/react";
 import { type FC, useEffect } from "react";
 import { describe, expect, it } from "vitest";
-import {
-  useRemoteThreadListRuntime,
-  type AssistantRuntime,
-} from "@assistant-ui/core/react";
+import type { AssistantRuntime } from "@assistant-ui/core";
+import { useRemoteThreadListRuntime } from "@assistant-ui/core/react";
 import { makeAdapter } from "./remote-thread-list-test-helpers";
 import { useLocalRuntime } from "../legacy-runtime/runtime-cores/local/useLocalRuntime";
 import { AssistantRuntimeProvider } from "../context";

package/src/tests/threadListItemIsRunning.test.tsx

@@ -3,6 +3,7 @@
 import { act, render, screen, waitFor } from "@testing-library/react";
 import { type FC, useEffect, useReducer } from "react";
 import { describe, expect, it } from "vitest";
+import type { ThreadMessage } from "@assistant-ui/core";
 import { useRemoteThreadListRuntime } from "@assistant-ui/core/react";
 import { makeAdapter } from "./remote-thread-list-test-helpers";
 import { AssistantRuntimeProvider } from "../context";
@@ -79,7 +80,7 @@ describe("threadListItem.isRunning", () => {
 
   it("reports the run of a single-thread runtime that cannot observe background threads", async () => {
     const Inner: FC<{ isRunning: boolean }> = ({ isRunning }) => {
-      const runtime = useExternalStoreRuntime({
+      const runtime = useExternalStoreRuntime<ThreadMessage>({
         messages: [],
         isRunning,
         onNew: async () => {},
@@ -126,7 +127,7 @@ describe("threadListItem.isRunning", () => {
         };
       }, []);
 
-      return useExternalStoreRuntime({
+      return useExternalStoreRuntime<ThreadMessage>({
         messages: [],
         isRunning: running.get(threadId) ?? false,
         onNew: async () => {},