@assistant-ui/react 0.15.25 → 0.15.27

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

@@ -20,7 +20,10 @@ import {
 import { useEffect, useState, type FC, type PropsWithChildren } from "react";
 import { useAuiState } from "@assistant-ui/store";
 import { AssistantRuntimeProvider } from "../../context";
-import { useThreadViewport } from "../../context/react/ThreadViewportContext";
+import {
+  useThreadViewport,
+  useThreadViewportStore,
+} from "../../context/react/ThreadViewportContext";
 import * as MessagePrimitive from "../message";
 import { ThreadPrimitiveMessages } from "./ThreadMessages";
 import { ThreadPrimitiveRoot } from "./ThreadRoot";
@@ -53,7 +56,7 @@ const getMaxScrollTop = (element: Element) =>
 let forceShortViewportMeasurement = false;
 let viewportMeasurementOffset = 0;
 const messageHeights = new Map<string, number>();
-const resizeObserverCallbacks = new Set<ResizeObserverCallback>();
+const resizeObservers = new Set<TestResizeObserver>();
 
 const messageRows = () => [
   ...document.querySelectorAll<HTMLElement>('[data-testid="thread-message"]'),
@@ -66,22 +69,37 @@ const rowsHeight = (rows: readonly Element[]) =>
   rows.reduce((height, row) => height + rowHeight(row), 0);
 
 class TestResizeObserver {
-  private callback: ResizeObserverCallback;
+  readonly targets = new Set<Element>();
+  readonly callback: ResizeObserverCallback;
 
   constructor(callback: ResizeObserverCallback) {
     this.callback = callback;
-    resizeObserverCallbacks.add(callback);
+    resizeObservers.add(this);
   }
 
-  observe() {}
+  observe(target: Element) {
+    this.targets.add(target);
+  }
+  unobserve(target: Element) {
+    this.targets.delete(target);
+  }
   disconnect() {
-    resizeObserverCallbacks.delete(this.callback);
+    resizeObservers.delete(this);
   }
 }
 
 const notifyResizeObservers = () => {
-  for (const callback of resizeObserverCallbacks) {
-    callback([], {} as ResizeObserver);
+  for (const observer of resizeObservers) {
+    observer.callback([], {} as ResizeObserver);
+  }
+};
+
+/** Resizes only `target`, as a child growing without a DOM mutation does. */
+const notifyResizeOf = (target: Element) => {
+  for (const observer of resizeObservers) {
+    if (observer.targets.has(target)) {
+      observer.callback([], {} as ResizeObserver);
+    }
   }
 };
 
@@ -176,7 +194,7 @@ afterEach(() => {
   forceShortViewportMeasurement = false;
   viewportMeasurementOffset = 0;
   messageHeights.clear();
-  resizeObserverCallbacks.clear();
+  resizeObservers.clear();
   cleanup();
 });
 
@@ -201,6 +219,16 @@ const AtBottom: FC = () => {
   return <output data-testid="is-at-bottom">{String(isAtBottom)}</output>;
 };
 
+const RequestSmoothScrollToBottom: FC = () => {
+  const threadViewportStore = useThreadViewportStore();
+
+  useEffect(() => {
+    threadViewportStore.getState().scrollToBottom({ behavior: "smooth" });
+  }, [threadViewportStore]);
+
+  return null;
+};
+
 const Thread = ({
   autoScroll,
   scrollToBottomOnInitialize,
@@ -298,6 +326,50 @@ const DelayedThread = ({
 };
 
 describe("useThreadViewportAutoScroll", () => {
+  it("keeps viewport listeners and observers across rerenders", () => {
+    const view = render(
+      <SyncRuntimeProvider>
+        <Thread autoScroll={false} scrollToBottomOnInitialize={false} />
+      </SyncRuntimeProvider>,
+    );
+    const observe = vi.spyOn(TestResizeObserver.prototype, "observe");
+    const disconnect = vi.spyOn(TestResizeObserver.prototype, "disconnect");
+    const observeMutations = vi.spyOn(MutationObserver.prototype, "observe");
+    const disconnectMutations = vi.spyOn(
+      MutationObserver.prototype,
+      "disconnect",
+    );
+    const viewport = getViewport();
+    const addListenerSpy = vi.spyOn(viewport, "addEventListener");
+    const removeListenerSpy = vi.spyOn(viewport, "removeEventListener");
+    try {
+      view.rerender(
+        <SyncRuntimeProvider>
+          <Thread autoScroll={false} scrollToBottomOnInitialize={false} />
+        </SyncRuntimeProvider>,
+      );
+
+      expect(observe).not.toHaveBeenCalled();
+      expect(disconnect).not.toHaveBeenCalled();
+      expect(observeMutations).not.toHaveBeenCalled();
+      expect(disconnectMutations).not.toHaveBeenCalled();
+      expect(addListenerSpy).not.toHaveBeenCalled();
+      expect(removeListenerSpy).not.toHaveBeenCalled();
+
+      view.unmount();
+      expect(disconnect).toHaveBeenCalled();
+      expect(disconnectMutations).toHaveBeenCalled();
+      expect(removeListenerSpy).toHaveBeenCalled();
+    } finally {
+      observe.mockRestore();
+      disconnect.mockRestore();
+      observeMutations.mockRestore();
+      disconnectMutations.mockRestore();
+      addListenerSpy.mockRestore();
+      removeListenerSpy.mockRestore();
+    }
+  });
+
   it("preserves smooth scrolling from a control outside the viewport", async () => {
     render(
       <SyncRuntimeProvider>
@@ -327,6 +399,144 @@ describe("useThreadViewportAutoScroll", () => {
     }
   });
 
+  it("updates isAtBottom when a wheel interrupts a smooth scroll short of the bottom", async () => {
+    const view = render(
+      <SyncRuntimeProvider>
+        <Thread autoScroll={false} scrollToBottomOnInitialize={false} />
+        <ThreadPrimitiveScrollToBottom behavior="smooth">
+          Scroll to bottom
+        </ThreadPrimitiveScrollToBottom>
+      </SyncRuntimeProvider>,
+    );
+
+    const viewport = getViewport();
+    await waitFor(() => {
+      expect(screen.getAllByTestId("thread-message")).toHaveLength(
+        messages.length,
+      );
+    });
+
+    act(() => {
+      viewport.scrollTop = getMaxScrollTop(viewport);
+      viewport.dispatchEvent(new Event("scroll"));
+    });
+    expect(screen.getByTestId("is-at-bottom").textContent).toBe("true");
+    viewportMeasurementOffset += 200;
+
+    const scrollToSpy = vi
+      .spyOn(viewport, "scrollTo")
+      .mockImplementation(() => {});
+    try {
+      view.rerender(
+        <SyncRuntimeProvider>
+          <Thread autoScroll={false} scrollToBottomOnInitialize={false} />
+          <ThreadPrimitiveScrollToBottom behavior="smooth">
+            Scroll to bottom
+          </ThreadPrimitiveScrollToBottom>
+          <RequestSmoothScrollToBottom />
+        </SyncRuntimeProvider>,
+      );
+
+      await waitFor(() => {
+        expect(scrollToSpy).toHaveBeenCalledWith({
+          top: viewport.scrollHeight,
+          behavior: "smooth",
+        });
+      });
+
+      act(() => {
+        viewport.scrollTop += 100;
+        viewport.dispatchEvent(new Event("scroll"));
+      });
+      expect(screen.getByTestId("is-at-bottom").textContent).toBe("true");
+      expect(
+        (
+          screen.getByRole("button", {
+            name: "Scroll to bottom",
+          }) as HTMLButtonElement
+        ).disabled,
+      ).toBe(true);
+
+      act(() => {
+        viewport.dispatchEvent(new WheelEvent("wheel"));
+      });
+
+      expect(screen.getByTestId("is-at-bottom").textContent).toBe("false");
+      expect(
+        (
+          screen.getByRole("button", {
+            name: "Scroll to bottom",
+          }) as HTMLButtonElement
+        ).disabled,
+      ).toBe(false);
+    } finally {
+      scrollToSpy.mockRestore();
+    }
+  });
+
+  it("keeps a coalesced user scroll-up after a programmatic bottom scroll", async () => {
+    render(
+      <SyncRuntimeProvider>
+        <Thread autoScroll={false} scrollToBottomOnInitialize={false} />
+        <ThreadPrimitiveScrollToBottom behavior="instant">
+          Scroll to bottom
+        </ThreadPrimitiveScrollToBottom>
+      </SyncRuntimeProvider>,
+    );
+
+    const viewport = getViewport();
+    await waitFor(() => {
+      expect(screen.getAllByTestId("thread-message")).toHaveLength(
+        messages.length,
+      );
+    });
+
+    act(() => {
+      viewport.scrollTop = 0;
+      viewport.dispatchEvent(new Event("scroll"));
+    });
+    await waitFor(() => {
+      expect(
+        screen
+          .getByRole("button", { name: "Scroll to bottom" })
+          .hasAttribute("disabled"),
+      ).toBe(false);
+    });
+
+    const scrollToDescriptor = Object.getOwnPropertyDescriptor(
+      viewport,
+      "scrollTo",
+    );
+    Object.defineProperty(viewport, "scrollTo", {
+      configurable: true,
+      value: ({ top = 0 }: ScrollToOptions) => {
+        viewport.scrollTop = Math.min(Number(top), getMaxScrollTop(viewport));
+      },
+    });
+    try {
+      fireEvent.click(screen.getByRole("button", { name: "Scroll to bottom" }));
+
+      act(() => {
+        viewport.scrollTop -= 80;
+        viewport.dispatchEvent(new Event("scroll"));
+      });
+
+      const scrollTopAfterLeave = viewport.scrollTop;
+      viewportMeasurementOffset += 200;
+      act(notifyResizeObservers);
+
+      expect(viewport.scrollTop).toBe(scrollTopAfterLeave);
+      expect(viewport.scrollTop).toBeLessThan(getMaxScrollTop(viewport));
+      expect(screen.getByTestId("is-at-bottom").textContent).toBe("false");
+    } finally {
+      if (scrollToDescriptor) {
+        Object.defineProperty(viewport, "scrollTo", scrollToDescriptor);
+      } else {
+        Reflect.deleteProperty(viewport, "scrollTo");
+      }
+    }
+  });
+
   it("scrolls sync initialMessages to the bottom when the viewport mounts after initialization", async () => {
     render(
       <SyncRuntimeProvider>
@@ -436,6 +646,47 @@ describe("useThreadViewportAutoScroll", () => {
     expect(screen.getByTestId("is-at-bottom").textContent).toBe("true");
   });
 
+  it("follows a message that grows without a DOM mutation", async () => {
+    render(
+      <SyncRuntimeProvider>
+        <BottomAnchorThread />
+      </SyncRuntimeProvider>,
+    );
+
+    const viewport = getViewport();
+    await waitFor(() => {
+      expect(viewport.scrollTop).toBe(getMaxScrollTop(viewport));
+    });
+
+    const lastRow = messageRows().at(-1)!;
+    messageHeights.set(lastRow.getAttribute("data-message-id")!, 280);
+    act(() => notifyResizeOf(lastRow));
+
+    expect(viewport.scrollTop).toBe(getMaxScrollTop(viewport));
+    expect(screen.getByTestId("is-at-bottom").textContent).toBe("true");
+  });
+
+  it("reports leaving the bottom when a message grows without a DOM mutation", async () => {
+    render(
+      <SyncRuntimeProvider>
+        <Thread />
+      </SyncRuntimeProvider>,
+    );
+
+    const viewport = getViewport();
+    await waitFor(() => {
+      expect(viewport.scrollTop).toBe(getMaxScrollTop(viewport));
+      expect(screen.getByTestId("is-at-bottom").textContent).toBe("true");
+    });
+
+    const lastRow = messageRows().at(-1)!;
+    messageHeights.set(lastRow.getAttribute("data-message-id")!, 280);
+    act(() => notifyResizeOf(lastRow));
+
+    expect(viewport.scrollTop).toBeLessThan(getMaxScrollTop(viewport));
+    expect(screen.getByTestId("is-at-bottom").textContent).toBe("false");
+  });
+
   it("keeps following after a pointerdown that does not scroll the viewport", async () => {
     render(
       <SyncRuntimeProvider>
@@ -458,8 +709,355 @@ describe("useThreadViewportAutoScroll", () => {
     expect(screen.getByTestId("is-at-bottom").textContent).toBe("true");
   });
 
+  describe("disclosures in a message", () => {
+    const renderPinned = async () => {
+      render(
+        <SyncRuntimeProvider>
+          <BottomAnchorThread />
+        </SyncRuntimeProvider>,
+      );
+      const viewport = getViewport();
+      await waitFor(() => {
+        expect(viewport.scrollTop).toBe(getMaxScrollTop(viewport));
+      });
+      return viewport;
+    };
+    const growContent = () => {
+      viewportMeasurementOffset += 200;
+      act(notifyResizeObservers);
+    };
+    const lastMessage = () => screen.getAllByTestId("thread-message").at(-1)!;
+    const addTrigger = (
+      attributes: Record<string, string>,
+      parent: Element = lastMessage(),
+    ) => {
+      const trigger = document.createElement("button");
+      for (const [name, value] of Object.entries(attributes))
+        trigger.setAttribute(name, value);
+      parent.append(trigger);
+      return trigger;
+    };
+    const click = (target: Element) => {
+      act(() => {
+        target.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+      });
+    };
+
+    it("stops following after a click expands a collapsed trigger", async () => {
+      const viewport = await renderPinned();
+      const scrollTop = viewport.scrollTop;
+
+      click(addTrigger({ "aria-expanded": "false" }));
+      growContent();
+
+      expect(viewport.scrollTop).toBe(scrollTop);
+      expect(screen.getByTestId("is-at-bottom").textContent).toBe("false");
+    });
+
+    it("stops following after opening a closed details summary", async () => {
+      const viewport = await renderPinned();
+      const scrollTop = viewport.scrollTop;
+      const details = document.createElement("details");
+      const summary = document.createElement("summary");
+      details.append(summary);
+      lastMessage().append(details);
+
+      click(summary);
+      growContent();
+
+      expect(viewport.scrollTop).toBe(scrollTop);
+    });
+
+    it("keeps the pause through a resize while the thread still fits", async () => {
+      forceShortViewportMeasurement = true;
+      const viewport = await renderPinned();
+
+      click(addTrigger({ "aria-expanded": "false" }));
+      act(notifyResizeObservers);
+      forceShortViewportMeasurement = false;
+      growContent();
+
+      expect(viewport.scrollTop).toBe(0);
+      expect(getMaxScrollTop(viewport)).toBeGreaterThan(0);
+    });
+
+    it("follows again after the reader scrolls back to the bottom", async () => {
+      const viewport = await renderPinned();
+
+      click(addTrigger({ "aria-expanded": "false" }));
+      growContent();
+      act(() => {
+        viewport.dispatchEvent(new WheelEvent("wheel"));
+        viewport.scrollTop = getMaxScrollTop(viewport);
+        viewport.dispatchEvent(new Event("scroll"));
+      });
+      growContent();
+
+      expect(viewport.scrollTop).toBe(getMaxScrollTop(viewport));
+    });
+
+    it.each([
+      { label: "an expanded trigger", attributes: { "aria-expanded": "true" } },
+      {
+        label: "a dialog trigger",
+        attributes: { "aria-expanded": "false", "aria-haspopup": "dialog" },
+      },
+      {
+        label: "a menu trigger",
+        attributes: { "aria-expanded": "false", "aria-haspopup": "menu" },
+      },
+      {
+        label: "a combobox",
+        attributes: { "aria-expanded": "false", role: "combobox" },
+      },
+      { label: "a plain control", attributes: {} },
+    ])("keeps following after clicking $label", async ({ attributes }) => {
+      const viewport = await renderPinned();
+
+      click(addTrigger(attributes));
+      growContent();
+
+      expect(viewport.scrollTop).toBe(getMaxScrollTop(viewport));
+    });
+
+    it("keeps following after a press on a collapsed trigger that never clicks", async () => {
+      const viewport = await renderPinned();
+
+      act(() => {
+        addTrigger({ "aria-expanded": "false" }).dispatchEvent(
+          new Event("pointerdown", { bubbles: true }),
+        );
+      });
+      growContent();
+
+      expect(viewport.scrollTop).toBe(getMaxScrollTop(viewport));
+    });
+
+    it("keeps following after expanding a trigger outside the messages", async () => {
+      const viewport = await renderPinned();
+
+      click(addTrigger({ "aria-expanded": "false" }, viewport));
+      growContent();
+
+      expect(viewport.scrollTop).toBe(getMaxScrollTop(viewport));
+    });
+    it.each([
+      {
+        label: "flips its state natively",
+        listen: (trigger: HTMLElement) =>
+          trigger.addEventListener("click", () =>
+            trigger.setAttribute("aria-expanded", "true"),
+          ),
+      },
+      {
+        label: "stops the event",
+        listen: (trigger: HTMLElement) =>
+          trigger.addEventListener("click", (event) => event.stopPropagation()),
+      },
+    ])("stops following when the trigger $label", async ({ listen }) => {
+      const viewport = await renderPinned();
+      const scrollTop = viewport.scrollTop;
+      const trigger = addTrigger({ "aria-expanded": "false" });
+      listen(trigger);
+
+      click(trigger);
+      growContent();
+
+      expect(viewport.scrollTop).toBe(scrollTop);
+    });
+
+    it("keeps the pause when a scroll gesture stops short of the bottom and the thread then fits", async () => {
+      const viewport = await renderPinned();
+
+      click(addTrigger({ "aria-expanded": "false" }));
+      growContent();
+      act(() => {
+        viewport.dispatchEvent(new WheelEvent("wheel"));
+        viewport.scrollTop = getMaxScrollTop(viewport) - 50;
+        viewport.dispatchEvent(new Event("scroll"));
+      });
+      forceShortViewportMeasurement = true;
+      act(notifyResizeObservers);
+      forceShortViewportMeasurement = false;
+      const scrollTop = viewport.scrollTop;
+      growContent();
+
+      expect(viewport.scrollTop).toBe(scrollTop);
+    });
+
+    it("treats aria-haspopup=false as a disclosure", async () => {
+      const viewport = await renderPinned();
+      const scrollTop = viewport.scrollTop;
+
+      click(addTrigger({ "aria-expanded": "false", "aria-haspopup": "false" }));
+      growContent();
+
+      expect(viewport.scrollTop).toBe(scrollTop);
+    });
+
+    it("follows again after the reader pages back to the bottom with Space", async () => {
+      const viewport = await renderPinned();
+
+      click(addTrigger({ "aria-expanded": "false" }));
+      growContent();
+      act(() => {
+        viewport.dispatchEvent(
+          new KeyboardEvent("keydown", { key: " ", bubbles: true }),
+        );
+        viewport.scrollTop = getMaxScrollTop(viewport);
+        viewport.dispatchEvent(new Event("scroll"));
+      });
+      growContent();
+
+      expect(viewport.scrollTop).toBe(getMaxScrollTop(viewport));
+    });
+
+    it("keeps following after a non-activating key on a collapsed trigger", async () => {
+      const viewport = await renderPinned();
+
+      act(() => {
+        addTrigger({ "aria-expanded": "false" }).dispatchEvent(
+          new KeyboardEvent("keydown", { key: "Tab", bubbles: true }),
+        );
+      });
+      growContent();
+
+      expect(viewport.scrollTop).toBe(getMaxScrollTop(viewport));
+    });
+
+    const renderWithoutRunStartScroll = async () => {
+      let runtime: ReturnType<typeof useLocalRuntime> | null = null;
+      const Harness: FC = () => {
+        runtime = useLocalRuntime(adapter, { initialMessages: messages });
+        return (
+          <AssistantRuntimeProvider runtime={runtime}>
+            <ThreadPrimitiveRoot>
+              <ThreadPrimitiveViewport
+                data-testid="viewport"
+                scrollToBottomOnRunStart={false}
+              >
+                <ThreadPrimitiveMessages components={{ Message }} />
+                <AtBottom />
+              </ThreadPrimitiveViewport>
+            </ThreadPrimitiveRoot>
+          </AssistantRuntimeProvider>
+        );
+      };
+      render(<Harness />);
+      const viewport = getViewport();
+      await waitFor(() => {
+        expect(viewport.scrollTop).toBe(getMaxScrollTop(viewport));
+      });
+      const startRun = () =>
+        act(async () => {
+          runtime!.thread.append({
+            role: "user",
+            content: [{ type: "text", text: "next" }],
+          });
+        });
+      return { viewport, startRun };
+    };
+
+    it("clears the pause when a run starts, even when run start does not scroll", async () => {
+      const { viewport, startRun } = await renderWithoutRunStartScroll();
+
+      click(addTrigger({ "aria-expanded": "false" }));
+      await startRun();
+      growContent();
+
+      expect(viewport.scrollTop).toBe(getMaxScrollTop(viewport));
+    });
+
+    it("follows again after a run starts even when the expansion moved the reader off the bottom", async () => {
+      const { viewport, startRun } = await renderWithoutRunStartScroll();
+
+      click(addTrigger({ "aria-expanded": "false" }));
+      growContent();
+      expect(viewport.scrollTop).toBeLessThan(getMaxScrollTop(viewport));
+      await startRun();
+      growContent();
+
+      expect(viewport.scrollTop).toBe(getMaxScrollTop(viewport));
+    });
+
+    it("keeps the reader's place after a run starts when they scrolled up during the pause", async () => {
+      const { viewport, startRun } = await renderWithoutRunStartScroll();
+
+      click(addTrigger({ "aria-expanded": "false" }));
+      act(() => {
+        viewport.dispatchEvent(new WheelEvent("wheel"));
+        viewport.scrollTop = getMaxScrollTop(viewport) - 50;
+        viewport.dispatchEvent(new Event("scroll"));
+      });
+      const scrollTop = viewport.scrollTop;
+      await startRun();
+      growContent();
+
+      expect(viewport.scrollTop).toBe(scrollTop);
+    });
+
+    it("clears the pause on a thread switch, even when the switch does not scroll", async () => {
+      const SwitchingThread = () => {
+        const [thread, setThread] = useState({ id: "a", messages });
+        const runtime = useExternalStoreRuntime<ThreadMessageLike>({
+          messages: thread.messages,
+          convertMessage: (message) => message,
+          onNew: async () => {},
+          adapters: {
+            threadList: {
+              threadId: thread.id,
+              threads: [
+                { id: "a", status: "regular" },
+                { id: "b", status: "regular" },
+              ],
+            },
+          },
+        });
+        return (
+          <AssistantRuntimeProvider runtime={runtime}>
+            <Thread autoScroll scrollToBottomOnThreadSwitch={false} />
+            <button
+              type="button"
+              data-testid="switch"
+              onClick={() =>
+                setThread({
+                  id: "b",
+                  messages: messages.map((message, index) => ({
+                    ...message,
+                    content: [{ type: "text", text: `Reply ${index + 1}` }],
+                  })),
+                })
+              }
+            />
+          </AssistantRuntimeProvider>
+        );
+      };
+      render(<SwitchingThread />);
+      const viewport = getViewport();
+      await waitFor(() =>
+        expect(screen.getAllByTestId("thread-message")).toHaveLength(
+          messages.length,
+        ),
+      );
+      act(() => {
+        viewport.scrollTop = getMaxScrollTop(viewport);
+        fireEvent.scroll(viewport);
+      });
+
+      click(addTrigger({ "aria-expanded": "false" }));
+      await act(async () => {
+        fireEvent.click(screen.getByTestId("switch"));
+      });
+      growContent();
+
+      expect(viewport.scrollTop).toBe(getMaxScrollTop(viewport));
+    });
+  });
+
   it.each([
     { label: "pointerdown", make: () => new Event("pointerdown") },
+    { label: "wheel", make: () => new WheelEvent("wheel") },
+    { label: "touchstart", make: () => new Event("touchstart") },
     {
       label: "Enter keydown",
       make: () => new KeyboardEvent("keydown", { key: "Enter" }),
@@ -468,6 +1066,12 @@ describe("useThreadViewportAutoScroll", () => {
       label: "Space keydown",
       make: () => new KeyboardEvent("keydown", { key: " " }),
     },
+    ...["ArrowUp", "ArrowDown", "PageUp", "PageDown", "Home", "End"].map(
+      (key) => ({
+        label: `${key} keydown`,
+        make: () => new KeyboardEvent("keydown", { key }),
+      }),
+    ),
   ])(
     "drops pending bottom-scroll intent after a $label in a thread that cannot scroll",
     async ({ make }) => {
@@ -503,6 +1107,8 @@ describe("useThreadViewportAutoScroll", () => {
 
   it.each([
     { label: "pointerdown", make: () => new Event("pointerdown") },
+    { label: "wheel", make: () => new WheelEvent("wheel") },
+    { label: "touchstart", make: () => new Event("touchstart") },
     {
       label: "Enter keydown",
       make: () => new KeyboardEvent("keydown", { key: "Enter" }),
@@ -511,6 +1117,10 @@ describe("useThreadViewportAutoScroll", () => {
       label: "Space keydown",
       make: () => new KeyboardEvent("keydown", { key: " " }),
     },
+    {
+      label: "ArrowDown keydown",
+      make: () => new KeyboardEvent("keydown", { key: "ArrowDown" }),
+    },
   ])(
     "cancels the frame a pending bottom scroll queued when a $label arrives first",
     async ({ make }) => {
@@ -566,73 +1176,66 @@ describe("useThreadViewportAutoScroll", () => {
     },
   );
 
-  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>,
-    );
+  it.each(["Shift", "Control", "Meta", "Tab", "Escape", "a"])(
+    "keeps pending bottom-scroll intent through a %s press",
+    async (key) => {
+      forceShortViewportMeasurement = true;
 
-    await waitFor(() => {
-      expect(screen.getAllByTestId("thread-message")).toHaveLength(
-        messages.length,
+      render(
+        <AsyncRuntimeProvider>
+          <Thread />
+        </AsyncRuntimeProvider>,
       );
-    });
-    await new Promise((resolve) => setTimeout(resolve, 0));
 
-    // neither an activation key nor consumed by a text field
-    act(() => {
-      getViewport().dispatchEvent(new KeyboardEvent("keydown", { key }));
-    });
+      await waitFor(() => {
+        expect(screen.getAllByTestId("thread-message")).toHaveLength(
+          messages.length,
+        );
+      });
+      await new Promise((resolve) => setTimeout(resolve, 0));
 
-    forceShortViewportMeasurement = false;
-    act(notifyResizeObservers);
+      // neither an activation key nor consumed by a text field
+      act(() => {
+        getViewport().dispatchEvent(new KeyboardEvent("keydown", { key }));
+      });
 
-    expect(getViewport().scrollTop).toBe(getMaxScrollTop(getViewport()));
-  });
+      forceShortViewportMeasurement = false;
+      act(notifyResizeObservers);
 
-  it("keeps pending bottom-scroll intent while the user types in the composer", async () => {
-    forceShortViewportMeasurement = true;
+      expect(getViewport().scrollTop).toBe(getMaxScrollTop(getViewport()));
+    },
+  );
 
-    render(
-      <AsyncRuntimeProvider>
-        <Thread />
-      </AsyncRuntimeProvider>,
-    );
+  it.each([" ", "ArrowDown"])(
+    "keeps pending bottom-scroll intent through a %s press in the composer",
+    async (key) => {
+      forceShortViewportMeasurement = true;
 
-    await waitFor(() => {
-      expect(screen.getAllByTestId("thread-message")).toHaveLength(
-        messages.length,
+      render(
+        <AsyncRuntimeProvider>
+          <Thread />
+        </AsyncRuntimeProvider>,
       );
-    });
-    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 }),
+      await waitFor(() => {
+        expect(screen.getAllByTestId("thread-message")).toHaveLength(
+          messages.length,
         );
-    });
+      });
+      await new Promise((resolve) => setTimeout(resolve, 0));
 
-    forceShortViewportMeasurement = false;
-    act(notifyResizeObservers);
+      act(() => {
+        screen
+          .getByTestId("composer")
+          .dispatchEvent(new KeyboardEvent("keydown", { key, bubbles: true }));
+      });
 
-    expect(getViewport().scrollTop).toBe(getMaxScrollTop(getViewport()));
-  });
+      forceShortViewportMeasurement = false;
+      act(notifyResizeObservers);
+
+      expect(getViewport().scrollTop).toBe(getMaxScrollTop(getViewport()));
+    },
+  );
 
   it.each([
     { label: "a checkbox", testid: "checkbox" },