@assistant-ui/react 0.15.20 → 0.15.22

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

@@ -182,6 +182,16 @@ const Thread = ({
     >
       <ThreadPrimitiveMessages components={{ Message }} />
       <AtBottom />
+      {/* The canonical Thread renders its composer inside the viewport, so
+          composer keystrokes bubble to the viewport's keydown listener. */}
+      <textarea data-testid="composer" />
+      {/* An input that activates on a key, and a `contenteditable="false"`
+          element in message content, both act on content rather than accept
+          text. Neither is a text-entry surface. */}
+      <input type="checkbox" data-testid="checkbox" />
+      <span contentEditable={false} data-testid="readonly-island" tabIndex={0}>
+        tool call
+      </span>
     </ThreadPrimitiveViewport>
   </ThreadPrimitiveRoot>
 );
@@ -410,6 +420,218 @@ describe("useThreadViewportAutoScroll", () => {
     expect(screen.getByTestId("is-at-bottom").textContent).toBe("true");
   });
 
+  it.each([
+    { label: "pointerdown", make: () => new Event("pointerdown") },
+    {
+      label: "Enter keydown",
+      make: () => new KeyboardEvent("keydown", { key: "Enter" }),
+    },
+    {
+      label: "Space keydown",
+      make: () => new KeyboardEvent("keydown", { key: " " }),
+    },
+  ])(
+    "drops pending bottom-scroll intent after a $label in a thread that cannot scroll",
+    async ({ make }) => {
+      // the viewport never overflows, so handleScroll keeps the intent alive
+      forceShortViewportMeasurement = true;
+
+      render(
+        <AsyncRuntimeProvider>
+          <Thread />
+        </AsyncRuntimeProvider>,
+      );
+
+      await waitFor(() => {
+        expect(screen.getAllByTestId("thread-message")).toHaveLength(
+          messages.length,
+        );
+      });
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      expect(getViewport().scrollTop).toBe(0);
+
+      // the user activates something in the thread, e.g. a collapsible tool call
+      act(() => {
+        getViewport().dispatchEvent(make());
+      });
+
+      // that activation grows the content
+      forceShortViewportMeasurement = false;
+      act(notifyResizeObservers);
+
+      expect(getViewport().scrollTop).toBe(0);
+    },
+  );
+
+  it.each([
+    { label: "pointerdown", make: () => new Event("pointerdown") },
+    {
+      label: "Enter keydown",
+      make: () => new KeyboardEvent("keydown", { key: "Enter" }),
+    },
+    {
+      label: "Space keydown",
+      make: () => new KeyboardEvent("keydown", { key: " " }),
+    },
+  ])(
+    "cancels the frame a pending bottom scroll queued when a $label arrives first",
+    async ({ make }) => {
+      let nextFrameId = 0;
+      let pendingFrame: {
+        id: number;
+        callback: FrameRequestCallback;
+      } | null = null;
+      const originalRequestAnimationFrame = globalThis.requestAnimationFrame;
+      const originalCancelAnimationFrame = globalThis.cancelAnimationFrame;
+
+      vi.stubGlobal(
+        "requestAnimationFrame",
+        (callback: FrameRequestCallback) => {
+          const id = ++nextFrameId;
+          pendingFrame = { id, callback };
+          return id;
+        },
+      );
+      vi.stubGlobal(
+        "cancelAnimationFrame",
+        vi.fn((id: number) => {
+          if (pendingFrame?.id === id) pendingFrame = null;
+        }),
+      );
+
+      try {
+        render(
+          <SyncRuntimeProvider>
+            <BottomAnchorThread />
+          </SyncRuntimeProvider>,
+        );
+
+        const viewport = getViewport();
+        await waitFor(() => {
+          expect(screen.getAllByTestId("thread-message")).toHaveLength(
+            messages.length,
+          );
+          expect(pendingFrame).not.toBeNull();
+        });
+
+        // the gesture lands before the queued frame runs
+        act(() => {
+          viewport.dispatchEvent(make());
+        });
+
+        // clearing the ref alone would leave this frame to re-plant the intent
+        expect(pendingFrame).toBeNull();
+      } finally {
+        vi.stubGlobal("requestAnimationFrame", originalRequestAnimationFrame);
+        vi.stubGlobal("cancelAnimationFrame", originalCancelAnimationFrame);
+      }
+    },
+  );
+
+  it.each([
+    "Shift",
+    "Control",
+    "Meta",
+    "Tab",
+    "ArrowDown",
+    "PageDown",
+    "Escape",
+    "a",
+  ])("keeps pending bottom-scroll intent through a %s press", async (key) => {
+    forceShortViewportMeasurement = true;
+
+    render(
+      <AsyncRuntimeProvider>
+        <Thread />
+      </AsyncRuntimeProvider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getAllByTestId("thread-message")).toHaveLength(
+        messages.length,
+      );
+    });
+    await new Promise((resolve) => setTimeout(resolve, 0));
+
+    // neither an activation key nor consumed by a text field
+    act(() => {
+      getViewport().dispatchEvent(new KeyboardEvent("keydown", { key }));
+    });
+
+    forceShortViewportMeasurement = false;
+    act(notifyResizeObservers);
+
+    expect(getViewport().scrollTop).toBe(getMaxScrollTop(getViewport()));
+  });
+
+  it("keeps pending bottom-scroll intent while the user types in the composer", async () => {
+    forceShortViewportMeasurement = true;
+
+    render(
+      <AsyncRuntimeProvider>
+        <Thread />
+      </AsyncRuntimeProvider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getAllByTestId("thread-message")).toHaveLength(
+        messages.length,
+      );
+    });
+    await new Promise((resolve) => setTimeout(resolve, 0));
+
+    act(() => {
+      screen
+        .getByTestId("composer")
+        // Space is an activation key, so this reaches the text-entry check
+        // instead of short-circuiting on the allowlist
+        .dispatchEvent(
+          new KeyboardEvent("keydown", { key: " ", bubbles: true }),
+        );
+    });
+
+    forceShortViewportMeasurement = false;
+    act(notifyResizeObservers);
+
+    expect(getViewport().scrollTop).toBe(getMaxScrollTop(getViewport()));
+  });
+
+  it.each([
+    { label: "a checkbox", testid: "checkbox" },
+    { label: "a non-editable element", testid: "readonly-island" },
+  ])(
+    "drops pending bottom-scroll intent when a key activates $label",
+    async ({ testid }) => {
+      forceShortViewportMeasurement = true;
+
+      render(
+        <AsyncRuntimeProvider>
+          <Thread />
+        </AsyncRuntimeProvider>,
+      );
+
+      await waitFor(() => {
+        expect(screen.getAllByTestId("thread-message")).toHaveLength(
+          messages.length,
+        );
+      });
+      await new Promise((resolve) => setTimeout(resolve, 0));
+
+      act(() => {
+        screen
+          .getByTestId(testid)
+          .dispatchEvent(
+            new KeyboardEvent("keydown", { key: " ", bubbles: true }),
+          );
+      });
+
+      forceShortViewportMeasurement = false;
+      act(notifyResizeObservers);
+
+      expect(getViewport().scrollTop).toBe(0);
+    },
+  );
+
   it("cancels a queued bottom scroll when the user scrolls up", async () => {
     let nextFrameId = 0;
     let pendingFrame: {
@@ -498,6 +720,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

@@ -14,6 +14,25 @@ import { useManagedRef } from "../../utils/hooks/useManagedRef";
 import { writableStore } from "../../context/ReadonlyStore";
 import { useThreadViewportStore } from "../../context/react/ThreadViewportContext";
 
+// Enter and Space activate a focused control, which is how a collapsible tool
+// call expands without a pointer event ever firing. No other key changes thread
+// content: the keys that scroll the viewport reach handleScroll, which already
+// clears the intent when the user scrolls up.
+const ACTIVATION_KEYS = new Set(["Enter", " "]);
+
+// A control that consumes the activation key itself instead of acting on thread
+// content. `contenteditable="false"` marks a non-editable island inside an
+// editable tree, so it is excluded the way ComposerRoot already excludes it;
+// the input types left out are the ones a key activates rather than fills.
+const TEXT_ENTRY_SELECTOR = [
+  "textarea",
+  "select",
+  "[contenteditable]:not([contenteditable='false'])",
+  "input:not([type='checkbox']):not([type='radio']):not([type='button'])" +
+    ":not([type='submit']):not([type='reset']):not([type='image'])" +
+    ":not([type='range']):not([type='file']):not([type='color'])",
+].join(", ");
+
 export namespace useThreadViewportAutoScroll {
   export type Options = {
     /**
@@ -74,6 +93,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;
@@ -193,17 +222,33 @@ export const useThreadViewportAutoScroll = <TElement extends HTMLElement>({
   });
 
   const scrollRef = useManagedRef<HTMLElement>((el) => {
-    // A pointer gesture invalidates pending bottom-scroll intent; otherwise an
+    // A user gesture invalidates pending bottom-scroll intent; otherwise an
     // intent kept alive by a non-overflowing thread (see handleScroll) hijacks
-    // the next content growth, e.g. expanding a collapsible tool call.
+    // the next content growth, e.g. expanding a collapsible tool call. Keyboard
+    // activation reaches that same content without ever emitting a pointer
+    // event, so it has to cancel the intent too.
     const cancelPendingScrollToBottom = () => {
+      // A scheduled frame re-plants the intent when it runs, so clearing the
+      // ref alone leaves the gesture undone.
+      cancelScheduledFrame();
       scrollingToBottomBehaviorRef.current = null;
     };
+    // The composer renders inside the viewport, so its keystrokes bubble here;
+    // only an activation key aimed at something other than a text field is a
+    // gesture on thread content.
+    const cancelOnKeyDown = (event: KeyboardEvent) => {
+      if (!ACTIVATION_KEYS.has(event.key)) return;
+      const target = event.target as Element | null;
+      if (target?.closest?.(TEXT_ENTRY_SELECTOR)) return;
+      cancelPendingScrollToBottom();
+    };
     el.addEventListener("scroll", handleScroll);
     el.addEventListener("pointerdown", cancelPendingScrollToBottom);
+    el.addEventListener("keydown", cancelOnKeyDown);
     return () => {
       el.removeEventListener("scroll", handleScroll);
       el.removeEventListener("pointerdown", cancelPendingScrollToBottom);
+      el.removeEventListener("keydown", cancelOnKeyDown);
     };
   });
 

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/augmentations.test.ts

@@ -2,6 +2,7 @@ import { describe, expectTypeOf, it } from "vitest";
 import type { UserCommands, UserExternalState } from "../augmentations";
 import type {
   AssistantTransportCommand,
+  SendCommandsRequestBody,
   useAssistantTransportRuntime,
   useAssistantTransportSendCommand,
   useAssistantTransportState,
@@ -85,4 +86,10 @@ describe("Assistant augmentations", () => {
       >[0]["commands"][number]
     >();
   });
+
+  it("the react request body keeps the core request fields", () => {
+    expectTypeOf<Pick<SendCommandsRequestBody, "threadId">>().toEqualTypeOf<{
+      threadId?: string;
+    }>();
+  });
 });

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 () => {},

package/src/unstable/useMentionAdapter.test.tsx

@@ -82,20 +82,21 @@ describe("unstable_useMentionAdapter", () => {
 
   it("does not expose flat items when the last category is removed", () => {
     const items = [{ id: "alice", type: "person", label: "Alice" }];
+    const initialOptions: Unstable_UseMentionAdapterOptions = {
+      items,
+      categories: [
+        {
+          id: "people",
+          label: "People",
+          items: [{ id: "bob", type: "person", label: "Bob" }],
+        },
+      ],
+    };
     const { result, rerender } = renderHook(
       (options: Unstable_UseMentionAdapterOptions) =>
         unstable_useMentionAdapter(options),
       {
-        initialProps: {
-          items,
-          categories: [
-            {
-              id: "people",
-              label: "People",
-              items: [{ id: "bob", type: "person", label: "Bob" }],
-            },
-          ],
-        },
+        initialProps: initialOptions,
       },
     );
 
@@ -334,23 +335,16 @@ describe("unstable_useMentionAdapter", () => {
       createIssue: { description: "Create an issue" },
     };
 
+    const initialOptions: Unstable_UseMentionAdapterOptions = { items: [] };
     const { result, rerender } = renderHook(
-      ({
-        items,
-      }: {
-        items: readonly {
-          id: string;
-          type: string;
-          label: string;
-        }[];
-      }) =>
+      ({ items }: Unstable_UseMentionAdapterOptions) =>
         unstable_useMentionAdapter({
-          items,
+          ...(items === undefined ? {} : { items }),
           includeModelContextTools: {
             category: { id: "actions", label: "Actions" },
           },
         }),
-      { initialProps: { items: [] } },
+      { initialProps: initialOptions },
     );
 
     expect(result.current.adapter.categories()).toEqual([]);

package/src/unstable/useModelContextSnapshot.test.tsx

@@ -15,6 +15,7 @@ const createSource = (
   overrides: Partial<
     ModelContextSnapshotSource<Readonly<Record<string, string>>>
   > = {},
+  includeIsEqual = true,
 ) => {
   const listeners = new Set<() => void>();
   const state = { tools: EMPTY as Record<string, string> };
@@ -29,7 +30,7 @@ const createSource = (
         unsubscribe();
       };
     }),
-    isEqual: shallowEqualRecords,
+    ...(includeIsEqual ? { isEqual: shallowEqualRecords } : {}),
     ...overrides,
   };
   return {
@@ -90,7 +91,7 @@ describe("useModelContextSnapshot", () => {
   });
 
   it("takes every notification when the source omits isEqual", () => {
-    const { source, state, notify } = createSource({ isEqual: undefined });
+    const { source, state, notify } = createSource({}, false);
     state.tools = { a: "1" };
 
     const { result } = renderHook(() =>