@assistant-ui/react 0.15.17 → 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/primitives/thread/useThreadViewportAutoScroll.ts

@@ -3,7 +3,11 @@
 import { useComposedRefs } from "radix-ui/internal";
 import { useCallback, useLayoutEffect, useRef, type RefCallback } from "react";
 import { useAuiEvent, useAuiState } from "@assistant-ui/store";
-import { isUserScrollUp } from "@assistant-ui/store/client";
+import {
+  isUserScrollUp,
+  isViewportAtBottom,
+  viewportOverflows,
+} from "@assistant-ui/store/client";
 import { useOnResizeContent } from "../../utils/hooks/useOnResizeContent";
 import { useOnScrollToBottom } from "../../utils/hooks/useOnScrollToBottom";
 import { useManagedRef } from "../../utils/hooks/useManagedRef";
@@ -114,9 +118,7 @@ export const useThreadViewportAutoScroll = <TElement extends HTMLElement>({
     if (!div) return;
 
     const isAtBottom = threadViewportStore.getState().isAtBottom;
-    const newIsAtBottom =
-      Math.abs(div.scrollHeight - div.scrollTop - div.clientHeight) <= 1 ||
-      div.scrollHeight <= div.clientHeight;
+    const newIsAtBottom = isViewportAtBottom(div);
 
     const isInFlightDownwardScroll =
       !newIsAtBottom && lastScrollTop.current < div.scrollTop;
@@ -135,8 +137,7 @@ export const useThreadViewportAutoScroll = <TElement extends HTMLElement>({
       if (newIsAtBottom) {
         // newIsAtBottom is ambiguous when the viewport doesn't overflow —
         // keep intent alive until content can actually scroll
-        const viewportOverflows = div.scrollHeight > div.clientHeight + 1;
-        if (viewportOverflows) {
+        if (viewportOverflows(div)) {
           scrollingToBottomBehaviorRef.current = null;
         }
         if (autoScroll) followBottomRef.current = true;

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

@@ -5,7 +5,8 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
 const { renderHtmlMock } = vi.hoisted(() => ({ renderHtmlMock: vi.fn() }));
 
-vi.mock("safe-content-frame", () => ({
+vi.mock("safe-content-frame", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("safe-content-frame")>()),
   SafeContentFrame: class {
     renderHtml = renderHtmlMock;
   },
@@ -34,7 +35,7 @@ function fakeRendered() {
     origin: "https://fake.scf.test",
     sendMessage: vi.fn(),
     dispose: vi.fn(),
-    fullyLoadedPromiseWithTimeout: vi.fn(),
+    fullyLoadedPromiseWithTimeout: vi.fn(() => new Promise<void>(() => {})),
   };
 }
 
@@ -140,6 +141,123 @@ describe("SandboxHost", () => {
     expect(onMessage).toHaveBeenCalledTimes(1);
   });
 
+  it("reports a frame that never finishes loading through onError", async () => {
+    const rendered = fakeRendered();
+    rendered.fullyLoadedPromiseWithTimeout.mockImplementation(() =>
+      Promise.reject(
+        Object.assign(new Error("Failed to load shim: https://fake.scf.test"), {
+          code: "shim-unavailable",
+        }),
+      ),
+    );
+    renderHtmlMock.mockResolvedValue(rendered);
+    const onError = vi.fn();
+
+    await act(async () => {
+      root.render(
+        <SandboxHost
+          content={{ html: "" }}
+          contentKey="k"
+          createBridge={() => ({ onMessage: vi.fn(), dispose: vi.fn() })}
+          onError={onError}
+        />,
+      );
+    });
+    await flush();
+
+    expect(onError).toHaveBeenCalledTimes(1);
+    expect(onError.mock.calls[0]![0]).toBeInstanceOf(Error);
+    expect(onError.mock.calls[0]![0]).toMatchObject({
+      code: "shim-unavailable",
+      message: "Failed to load shim: https://fake.scf.test",
+    });
+    expect(rendered.dispose).not.toHaveBeenCalled();
+  });
+
+  it("stays silent when the shim started and the render is merely slow", async () => {
+    const rendered = fakeRendered();
+    rendered.fullyLoadedPromiseWithTimeout.mockImplementation(() =>
+      Promise.reject(
+        Object.assign(new Error("Timeout"), { code: "render-timeout" }),
+      ),
+    );
+    renderHtmlMock.mockResolvedValue(rendered);
+    const onError = vi.fn();
+
+    await act(async () => {
+      root.render(
+        <SandboxHost
+          content={{ html: "" }}
+          contentKey="k"
+          createBridge={() => ({ onMessage: vi.fn(), dispose: vi.fn() })}
+          onError={onError}
+        />,
+      );
+    });
+    await flush();
+
+    expect(rendered.fullyLoadedPromiseWithTimeout).toHaveBeenCalled();
+    expect(onError).not.toHaveBeenCalled();
+    expect(rendered.dispose).not.toHaveBeenCalled();
+  });
+
+  it("reports a load failure that carries no shim code", async () => {
+    const rendered = fakeRendered();
+    rendered.fullyLoadedPromiseWithTimeout.mockImplementation(() =>
+      Promise.reject(new Error("Failed to load iframe")),
+    );
+    renderHtmlMock.mockResolvedValue(rendered);
+    const onError = vi.fn();
+
+    await act(async () => {
+      root.render(
+        <SandboxHost
+          content={{ html: "" }}
+          contentKey="k"
+          createBridge={() => ({ onMessage: vi.fn(), dispose: vi.fn() })}
+          onError={onError}
+        />,
+      );
+    });
+    await flush();
+
+    expect(onError).toHaveBeenCalledTimes(1);
+    expect(onError.mock.calls[0]![0].message).toBe("Failed to load iframe");
+  });
+
+  it("does not report a load failure after unmount", async () => {
+    const rendered = fakeRendered();
+    let rejectLoad: (error: Error) => void;
+    rendered.fullyLoadedPromiseWithTimeout.mockReturnValue(
+      new Promise<void>((_, reject) => {
+        rejectLoad = reject;
+      }),
+    );
+    renderHtmlMock.mockResolvedValue(rendered);
+    const onError = vi.fn();
+
+    await act(async () => {
+      root.render(
+        <SandboxHost
+          content={{ html: "" }}
+          contentKey="k"
+          createBridge={() => ({ onMessage: vi.fn(), dispose: vi.fn() })}
+          onError={onError}
+        />,
+      );
+    });
+    await flush();
+
+    await act(async () => {
+      root.unmount();
+    });
+    rejectLoad!(new Error("Timeout"));
+    await flush();
+
+    expect(rendered.fullyLoadedPromiseWithTimeout).toHaveBeenCalled();
+    expect(onError).not.toHaveBeenCalled();
+  });
+
   it("clamps the bridge-reported height to maxHeight and ignores invalid values", async () => {
     const rendered = fakeRendered();
     renderHtmlMock.mockResolvedValue(rendered);
@@ -209,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

@@ -8,14 +8,16 @@ import {
   useState,
 } from "react";
 import {
+  isShimLoadError,
   type RenderedFrame,
   SafeContentFrame,
   type SandboxOption,
 } from "safe-content-frame";
-import { invokeCallbackSafely } from "../utils/invokeCallbackSafely";
+import { invokeUserCallback } from "@assistant-ui/core/internal";
 
 const DEFAULT_PRODUCT = "assistant-ui-sandbox";
 const DEFAULT_MAX_HEIGHT = 800;
+const LOAD_TIMEOUT_MS = 10_000;
 
 export type SandboxHostConfig = {
   sandbox?: SandboxOption[];
@@ -108,6 +110,16 @@ export function SandboxHost({
 
     const { content: liveContent, sandbox: sb } = liveRef.current;
 
+    const reportError = (err: unknown) => {
+      const error = err instanceof Error ? err : new Error(String(err));
+      invokeUserCallback(
+        "assistant-ui",
+        "SandboxHost onError",
+        liveRef.current.onError?.bind(liveRef.current),
+        error,
+      );
+    };
+
     const scf = new SafeContentFrame(sb?.product ?? DEFAULT_PRODUCT, {
       ...(sb?.sandbox !== undefined && { sandbox: sb.sandbox }),
       ...(sb?.useShadowDom !== undefined && { useShadowDom: sb.useShadowDom }),
@@ -159,29 +171,57 @@ export function SandboxHost({
           bridge?.onMessage(event);
         };
         window.addEventListener("message", onMessage);
+
+        // renderHtml resolves at iframe load, which a shim that was never
+        // served also reaches, so a completed render is only known once the
+        // frame says so. render-timeout is excluded because the shim is
+        // running and the guest may still paint, and reporting it would leave
+        // a host that renders an error state showing one over a frame that
+        // recovers.
+        rendered.fullyLoadedPromiseWithTimeout(LOAD_TIMEOUT_MS).catch((err) => {
+          if (cancelled) return;
+          if (isShimLoadError(err) && err.code === "render-timeout") return;
+          reportError(err);
+        });
       })
       .catch((err) => {
         if (cancelled) return;
         frame?.dispose();
         frame = null;
-        const error = err instanceof Error ? err : new Error(String(err));
-        invokeCallbackSafely(
-          () => liveRef.current.onError?.(error),
-          "SandboxHost onError",
-        );
+        reportError(err);
       });
 
     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",
+    );
+  });
+});