@assistant-ui/react 0.15.18 → 0.15.19

package/src/primitives/reasoning/useScrollLock.test.tsx

@@ -0,0 +1,129 @@
+// @vitest-environment jsdom
+
+import { renderHook } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { useScrollLock } from "./useScrollLock";
+
+afterEach(() => {
+  vi.useRealTimers();
+  vi.unstubAllGlobals();
+  document.documentElement.removeAttribute("style");
+  document.body.removeAttribute("style");
+  document.body.replaceChildren();
+});
+
+/** jsdom reports zero for every box, so the widths a real browser would measure
+ * are stubbed on the element under test. */
+function stubWidths(
+  element: HTMLElement,
+  { offsetWidth, clientWidth }: { offsetWidth: number; clientWidth: number },
+) {
+  Object.defineProperty(element, "offsetWidth", {
+    configurable: true,
+    value: offsetWidth,
+  });
+  Object.defineProperty(element, "clientWidth", {
+    configurable: true,
+    value: clientWidth,
+  });
+}
+
+function lockWithin(container: HTMLElement) {
+  const animated = document.createElement("div");
+  container.appendChild(animated);
+  const ref = { current: animated };
+  const { result } = renderHook(() => useScrollLock(ref, 200));
+  return result.current;
+}
+
+describe("useScrollLock", () => {
+  it("compensates for the scrollbar it hides on an element scroller", () => {
+    const scroller = document.createElement("div");
+    scroller.style.overflowY = "auto";
+    scroller.style.borderWidth = "0px";
+    scroller.style.paddingRight = "4px";
+    document.body.appendChild(scroller);
+    stubWidths(scroller, { offsetWidth: 306, clientWidth: 300 });
+
+    lockWithin(scroller)();
+
+    expect(scroller.style.scrollbarWidth).toBe("none");
+    expect(scroller.style.paddingRight).toBe("10px");
+  });
+
+  // The root element's offsetWidth already excludes the viewport scrollbar, so
+  // the element formula reports zero for it; without this the page's centered
+  // content shifts sideways for the length of the animation.
+  it("compensates when the scroller is the root element", () => {
+    const root = document.documentElement;
+    root.style.overflowY = "auto";
+    stubWidths(root, { offsetWidth: 1599, clientWidth: 1599 });
+    vi.stubGlobal("innerWidth", 1605);
+
+    lockWithin(document.body)();
+
+    expect(root.style.scrollbarWidth).toBe("none");
+    expect(root.style.paddingRight).toBe("6px");
+  });
+
+  // With `html { overflow: hidden }` the body scrolls on its own, so the
+  // viewport measure reports nothing and only the element formula sees the bar.
+  it("compensates when the body is the scroller rather than the viewport", () => {
+    const root = document.documentElement;
+    stubWidths(root, { offsetWidth: 1600, clientWidth: 1600 });
+    vi.stubGlobal("innerWidth", 1600);
+    const body = document.body;
+    body.style.overflowY = "auto";
+    body.style.borderWidth = "0px";
+    stubWidths(body, { offsetWidth: 1606, clientWidth: 1600 });
+
+    lockWithin(body)();
+
+    expect(body.style.paddingRight).toBe("6px");
+  });
+
+  // Both can scroll at once, and the padding lands on the body, so it is the
+  // body's own gutter that has to be replaced rather than the viewport's.
+  it("pads a scrolling body by its own gutter, not the viewport's", () => {
+    const root = document.documentElement;
+    stubWidths(root, { offsetWidth: 1585, clientWidth: 1585 });
+    vi.stubGlobal("innerWidth", 1600);
+    const body = document.body;
+    body.style.overflowY = "auto";
+    body.style.borderWidth = "0px";
+    stubWidths(body, { offsetWidth: 1591, clientWidth: 1585 });
+
+    lockWithin(body)();
+
+    expect(body.style.paddingRight).toBe("6px");
+  });
+
+  it("restores the padding it added once the animation is over", () => {
+    vi.useFakeTimers();
+    const scroller = document.createElement("div");
+    scroller.style.overflowY = "auto";
+    scroller.style.borderWidth = "0px";
+    document.body.appendChild(scroller);
+    stubWidths(scroller, { offsetWidth: 306, clientWidth: 300 });
+
+    lockWithin(scroller)();
+    expect(scroller.style.paddingRight).toBe("6px");
+
+    vi.advanceTimersByTime(200);
+
+    expect(scroller.style.paddingRight).toBe("");
+    expect(scroller.style.scrollbarWidth).toBe("");
+  });
+
+  it("leaves the padding alone when no scrollbar takes space", () => {
+    const scroller = document.createElement("div");
+    scroller.style.overflowY = "auto";
+    scroller.style.borderWidth = "0px";
+    document.body.appendChild(scroller);
+    stubWidths(scroller, { offsetWidth: 300, clientWidth: 300 });
+
+    lockWithin(scroller)();
+
+    expect(scroller.style.paddingRight).toBe("");
+  });
+});

package/src/primitives/reasoning/useScrollLock.ts

@@ -71,11 +71,25 @@ export const useScrollLock = <T extends HTMLElement = HTMLElement>(
     const paddingSide =
       computed.direction === "rtl" ? "paddingLeft" : "paddingRight";
     const previousPadding = scrollContainer.style[paddingSide];
-    const scrollbarSize =
+    const elementScrollbarSize =
       scrollContainer.offsetWidth -
       scrollContainer.clientWidth -
       parseFloat(computed.borderLeftWidth) -
       parseFloat(computed.borderRightWidth);
+    // A root element's offsetWidth already excludes the viewport scrollbar, so
+    // the element formula reports zero once the scroll propagates to the
+    // viewport, and only then does the viewport measure apply. A body that
+    // scrolls in its own right is measured by the element formula like any
+    // other scroller, whether or not the viewport is scrolling too.
+    const ownerDocument = scrollContainer.ownerDocument;
+    const isRootScroller =
+      scrollContainer === ownerDocument.documentElement ||
+      scrollContainer === ownerDocument.body;
+    const scrollbarSize =
+      isRootScroller && elementScrollbarSize <= 0
+        ? (ownerDocument.defaultView?.innerWidth ?? 0) -
+          ownerDocument.documentElement.clientWidth
+        : elementScrollbarSize;
 
     scrollContainer.style.scrollbarWidth = "none";
     if (scrollbarSize > 0) {

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

@@ -1,6 +1,13 @@
 // @vitest-environment jsdom
 
-import { act, cleanup, render, screen, waitFor } from "@testing-library/react";
+import {
+  act,
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
 import {
   afterAll,
   afterEach,
@@ -17,6 +24,7 @@ import { useThreadViewport } from "../../context/react/ThreadViewportContext";
 import * as MessagePrimitive from "../message";
 import { ThreadPrimitiveMessages } from "./ThreadMessages";
 import { ThreadPrimitiveRoot } from "./ThreadRoot";
+import { ThreadPrimitiveScrollToBottom } from "./ThreadScrollToBottom";
 import { ThreadPrimitiveViewport } from "./ThreadViewport";
 import {
   ExportedMessageRepository,
@@ -242,6 +250,35 @@ const DelayedThread = ({
 };
 
 describe("useThreadViewportAutoScroll", () => {
+  it("preserves smooth scrolling from a control outside the viewport", async () => {
+    render(
+      <SyncRuntimeProvider>
+        <Thread autoScroll={false} scrollToBottomOnInitialize={false} />
+        <ThreadPrimitiveScrollToBottom behavior="smooth">
+          Scroll to bottom
+        </ThreadPrimitiveScrollToBottom>
+      </SyncRuntimeProvider>,
+    );
+
+    const viewport = getViewport();
+    act(() => {
+      viewport.dispatchEvent(new Event("scroll"));
+    });
+    const button = screen.getByRole("button", { name: "Scroll to bottom" });
+    await waitFor(() => expect(button.hasAttribute("disabled")).toBe(false));
+
+    const scrollToSpy = vi.spyOn(viewport, "scrollTo");
+    try {
+      fireEvent.click(button);
+      expect(scrollToSpy).toHaveBeenCalledWith({
+        top: viewport.scrollHeight,
+        behavior: "smooth",
+      });
+    } finally {
+      scrollToSpy.mockRestore();
+    }
+  });
+
   it("scrolls sync initialMessages to the bottom when the viewport mounts after initialization", async () => {
     render(
       <SyncRuntimeProvider>

package/src/sandbox-host/SandboxHost.test.tsx

@@ -327,6 +327,46 @@ describe("SandboxHost", () => {
     expect(onMessage).not.toHaveBeenCalled();
   });
 
+  it("disposes the frame when bridge cleanup throws", async () => {
+    const rendered = fakeRendered();
+    renderHtmlMock.mockResolvedValue(rendered);
+    const cleanupError = new Error("bridge cleanup failed");
+    const onMessage = vi.fn();
+    const bridge: SandboxBridge = {
+      onMessage,
+      dispose: vi.fn(() => {
+        throw cleanupError;
+      }),
+    };
+
+    await act(async () => {
+      root.render(
+        <SandboxHost
+          content={{ html: "" }}
+          contentKey="k"
+          createBridge={() => bridge}
+        />,
+      );
+    });
+    await flush();
+
+    expect(() => {
+      act(() => root.unmount());
+    }).toThrow(cleanupError);
+
+    expect(bridge.dispose).toHaveBeenCalledOnce();
+    expect(rendered.dispose).toHaveBeenCalledOnce();
+
+    window.dispatchEvent(
+      new MessageEvent("message", {
+        data: validData,
+        origin: rendered.origin,
+        source: rendered.iframe.contentWindow,
+      }),
+    );
+    expect(onMessage).not.toHaveBeenCalled();
+  });
+
   it("calls onError when rendering rejects", async () => {
     renderHtmlMock.mockRejectedValue(new Error("boom"));
     const onError = vi.fn();

package/src/sandbox-host/SandboxHost.tsx

@@ -193,15 +193,35 @@ export function SandboxHost({
 
     return () => {
       cancelled = true;
+      let cleanupFailed = false;
+      let cleanupError: unknown;
+      const runCleanup = (cleanup: () => void) => {
+        try {
+          cleanup();
+        } catch (error) {
+          if (cleanupFailed) {
+            console.error(error);
+          } else {
+            cleanupFailed = true;
+            cleanupError = error;
+          }
+        }
+      };
+
       if (onMessage) {
-        window.removeEventListener("message", onMessage);
+        const listener = onMessage;
         onMessage = null;
+        runCleanup(() => window.removeEventListener("message", listener));
       }
-      bridge?.dispose();
+      const bridgeToDispose = bridge;
       bridge = null;
-      frame?.dispose();
+      if (bridgeToDispose) runCleanup(() => bridgeToDispose.dispose());
+      const frameToDispose = frame;
       frame = null;
-      setContentHeight(undefined);
+      if (frameToDispose) runCleanup(() => frameToDispose.dispose());
+      runCleanup(() => setContentHeight(undefined));
+
+      if (cleanupFailed) throw cleanupError;
     };
     // oxlint-disable-next-line react/exhaustive-deps -- re-init only on contentKey change; live values flow through liveRef
   }, [contentKey]);

package/src/tests/MessageParts.rendererOptions.test.tsx

@@ -0,0 +1,117 @@
+// @vitest-environment jsdom
+
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import {
+  AssistantRuntimeProvider,
+  MessageByIndexProvider,
+  useExternalStoreRuntime,
+} from "@assistant-ui/core/react";
+import type { ThreadMessageLike } from "@assistant-ui/core";
+import { MessagePrimitiveParts } from "../primitives/message/MessageParts";
+
+(globalThis as Record<string, unknown>).IS_REACT_ACT_ENVIRONMENT = true;
+
+const messages: ThreadMessageLike[] = [
+  {
+    role: "assistant",
+    content: [
+      { type: "text", text: "Answer" },
+      { type: "reasoning", text: "Thinking" },
+      {
+        type: "generative-ui",
+        spec: {
+          root: [
+            { component: "Card", props: { title: "Result" } },
+            { component: "Unknown" },
+          ],
+        },
+      },
+      { type: "data", name: "chart", data: 42 },
+      { type: "data", name: "other", data: 7 },
+    ],
+  },
+];
+
+const components = {
+  generativeUI: {
+    components: {
+      Card: ({ title }: { title: string }) => <span>{title}</span>,
+    },
+    Fallback: ({ component }: { component: string }) => (
+      <span>Unavailable: {component}</span>
+    ),
+  },
+  data: {
+    by_name: {
+      chart: ({ data }: { data: unknown }) => (
+        <span>Chart: {String(data)}</span>
+      ),
+    },
+    Fallback: ({ data }: { data: unknown }) => (
+      <span>Data: {String(data)}</span>
+    ),
+  },
+};
+
+const App = (props: MessagePrimitiveParts.Props) => {
+  const runtime = useExternalStoreRuntime({
+    messages,
+    convertMessage: (message) => message,
+    onNew: async () => {
+      throw new Error("This thread is read-only");
+    },
+  });
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      <MessageByIndexProvider index={0}>
+        <MessagePrimitiveParts {...props} />
+      </MessageByIndexProvider>
+    </AssistantRuntimeProvider>
+  );
+};
+
+const ChainOfThought = () => <span>Thought group</span>;
+
+describe("MessagePrimitiveParts", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(async () => {
+    await act(async () => root.unmount());
+    container.remove();
+  });
+
+  it("renders generative UI and its fallback beside web text", async () => {
+    await act(async () => root.render(<App components={components} />));
+    expect(container.textContent).toBe(
+      "AnswerResultUnavailable: UnknownChart: 42Data: 7",
+    );
+  });
+
+  it("keeps data and generative UI when chain-of-thought grouping changes", async () => {
+    await act(async () => root.render(<App components={components} />));
+    expect(container.textContent).toBe(
+      "AnswerResultUnavailable: UnknownChart: 42Data: 7",
+    );
+
+    await act(async () =>
+      root.render(<App components={{ ...components, ChainOfThought }} />),
+    );
+    expect(container.textContent).toBe(
+      "AnswerThought groupResultUnavailable: UnknownChart: 42Data: 7",
+    );
+
+    await act(async () => root.render(<App components={components} />));
+    expect(container.textContent).toBe(
+      "AnswerResultUnavailable: UnknownChart: 42Data: 7",
+    );
+  });
+});

package/src/tests/toolCallTiming.test.tsx

@@ -7,8 +7,10 @@ import { AssistantRuntimeProvider } from "../context";
 import * as MessagePrimitive from "../primitives/message";
 import * as ThreadPrimitive from "../primitives/thread";
 import { useLocalRuntime } from "../legacy-runtime/runtime-cores/local/useLocalRuntime";
-import type { ChatModelAdapter, ThreadMessageLike } from "../index";
 import {
+  type ChatModelAdapter,
+  type ThreadMessageLike,
+  useExternalStoreRuntime,
   useToolCallElapsed,
   unstable_useMessageStallDetection,
 } from "../index";
@@ -60,6 +62,22 @@ const RuntimeProvider: FC<
   );
 };
 
+const ExternalRuntimeProvider: FC<
+  PropsWithChildren<{ messages: ThreadMessageLike[] }>
+> = ({ messages, children }) => {
+  const runtime = useExternalStoreRuntime({
+    messages,
+    isRunning: true,
+    convertMessage: (message) => message,
+    onNew: async () => {},
+  });
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      {children}
+    </AssistantRuntimeProvider>
+  );
+};
+
 const renderHarness = async (messages: ThreadMessageLike[], probe: FC) => {
   render(<Harness messages={messages} probe={probe} />);
   // Flush the runtime's deferred initialization, which fake timers hold back.
@@ -83,6 +101,19 @@ const Harness: FC<{ messages: ThreadMessageLike[]; probe: FC }> = ({
   </RuntimeProvider>
 );
 
+const ExternalHarness: FC<{
+  messages: ThreadMessageLike[];
+  probe: FC;
+}> = ({ messages, probe: Probe }) => (
+  <ExternalRuntimeProvider messages={messages}>
+    <ThreadPrimitive.Messages
+      components={{
+        Message: () => <MessagePrimitive.Parts components={{ Text: Probe }} />,
+      }}
+    />
+  </ExternalRuntimeProvider>
+);
+
 describe("useToolCallElapsed", () => {
   beforeEach(() => {
     vi.useFakeTimers();
@@ -218,4 +249,27 @@ describe("unstable_useMessageStallDetection", () => {
 
     expect(screen.getByTestId("stalled").textContent).toBe("false");
   });
+
+  it("resets the timer for equal-length content changes", async () => {
+    const message = (text: string): ThreadMessageLike => ({
+      role: "assistant",
+      content: [{ type: "text", text }],
+      status: { type: "running" },
+    });
+    const view = render(
+      <ExternalHarness messages={[message("first")]} probe={StallProbe} />,
+    );
+    await act(async () => vi.advanceTimersByTimeAsync(0));
+
+    await act(async () => vi.advanceTimersByTimeAsync(1500));
+    view.rerender(
+      <ExternalHarness messages={[message("other")]} probe={StallProbe} />,
+    );
+    await act(async () => vi.advanceTimersByTimeAsync(1000));
+
+    expect(screen.getByTestId("stalled").textContent).toBe("false");
+
+    await act(async () => vi.advanceTimersByTimeAsync(1000));
+    expect(screen.getByTestId("stalled").textContent).toBe("true");
+  });
 });