fix(chat): keep message list anchored to bottom

2026-07-15 10:25:08 +08:00
parent 836ae95940
commit f60daf061d
4 changed files with 261 additions and 39 deletions
@@ -0,0 +1,180 @@
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import type { UiMessage } from "@/data/dto/chat";
+
+import { ChatArea } from "../chat-area";
+
+vi.mock("../message-bubble", () => ({
+  MessageBubble: ({ content }: { content: string }) => <div>{content}</div>,
+}));
+
+let scrollHeight = 0;
+let clientHeight = 0;
+let resizeObservers: MockResizeObserver[] = [];
+
+class MockResizeObserver {
+  readonly callback: ResizeObserverCallback;
+
+  constructor(callback: ResizeObserverCallback) {
+    this.callback = callback;
+    resizeObservers.push(this);
+  }
+
+  observe(): void {}
+  disconnect(): void {}
+
+  trigger(): void {
+    this.callback([], this as unknown as ResizeObserver);
+  }
+}
+
+describe("ChatArea scrolling", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    (globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean })
+      .IS_REACT_ACT_ENVIRONMENT = true;
+    scrollHeight = 0;
+    clientHeight = 0;
+    resizeObservers = [];
+    vi.stubGlobal("ResizeObserver", MockResizeObserver);
+    vi.stubGlobal("requestAnimationFrame", vi.fn(() => 1));
+    vi.stubGlobal("cancelAnimationFrame", vi.fn());
+    vi.spyOn(HTMLElement.prototype, "scrollHeight", "get").mockImplementation(
+      function (this: HTMLElement) {
+        return this.getAttribute("aria-label") === "Chat messages"
+          ? scrollHeight
+          : 0;
+      },
+    );
+    vi.spyOn(HTMLElement.prototype, "clientHeight", "get").mockImplementation(
+      function (this: HTMLElement) {
+        return this.getAttribute("aria-label") === "Chat messages"
+          ? clientHeight
+          : 0;
+      },
+    );
+
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    vi.restoreAllMocks();
+    vi.unstubAllGlobals();
+  });
+
+  it("lands at the bottom on a normal entry", () => {
+    scrollHeight = 900;
+    clientHeight = 300;
+
+    renderChatArea(root, [createMessage("history-1")], true);
+
+    expect(getScrollNode(container).scrollTop).toBe(600);
+  });
+
+  it("waits for promotion bootstrap before settling at the final bottom", () => {
+    scrollHeight = 800;
+    clientHeight = 300;
+    const history = [createMessage("history-1")];
+
+    renderChatArea(root, history, false);
+    expect(getScrollNode(container).scrollTop).toBe(0);
+
+    scrollHeight = 1_200;
+    renderChatArea(
+      root,
+      [...history, createMessage("promotion-1")],
+      true,
+    );
+
+    expect(getScrollNode(container).scrollTop).toBe(900);
+  });
+
+  it("keeps the list bottom-anchored when rendered content grows", () => {
+    scrollHeight = 1_000;
+    clientHeight = 300;
+    renderChatArea(root, [createMessage("history-1")], true);
+    expect(getScrollNode(container).scrollTop).toBe(700);
+
+    scrollHeight = 1_400;
+    act(() => resizeObservers.forEach((observer) => observer.trigger()));
+
+    expect(getScrollNode(container).scrollTop).toBe(1_100);
+  });
+
+  it("follows new messages when the user remains near the bottom", () => {
+    scrollHeight = 1_000;
+    clientHeight = 300;
+    const history = [createMessage("history-1")];
+    renderChatArea(root, history, true);
+    const scrollNode = getScrollNode(container);
+    const scrollTo = vi.fn();
+    Object.defineProperty(scrollNode, "scrollTo", { value: scrollTo });
+
+    scrollNode.scrollTop = 650;
+    act(() => scrollNode.dispatchEvent(new Event("scroll", { bubbles: true })));
+
+    scrollHeight = 1_400;
+    renderChatArea(root, [...history, createMessage("reply-1")], true);
+
+    expect(scrollNode.scrollTop).toBe(1_100);
+    expect(scrollTo).not.toHaveBeenCalled();
+  });
+
+  it("preserves position after the user intentionally scrolls upward", () => {
+    scrollHeight = 1_000;
+    clientHeight = 300;
+    const history = [createMessage("history-1")];
+    renderChatArea(root, history, true);
+    const scrollNode = getScrollNode(container);
+
+    scrollNode.scrollTop = 100;
+    act(() => scrollNode.dispatchEvent(new Event("scroll", { bubbles: true })));
+
+    scrollHeight = 1_400;
+    act(() => resizeObservers.forEach((observer) => observer.trigger()));
+    renderChatArea(root, [...history, createMessage("reply-1")], true);
+
+    expect(scrollNode.scrollTop).toBe(100);
+  });
+});
+
+function renderChatArea(
+  root: Root,
+  messages: readonly UiMessage[],
+  initialScrollReady: boolean,
+): void {
+  act(() => {
+    root.render(
+      <ChatArea
+        messages={messages}
+        isReplyingAI={false}
+        initialScrollReady={initialScrollReady}
+      />,
+    );
+  });
+}
+
+function createMessage(id: string): UiMessage {
+  return {
+    id,
+    content: `Message ${id}`,
+    isFromAI: true,
+    date: "2026-07-15",
+  };
+}
+
+function getScrollNode(container: HTMLElement): HTMLElement {
+  const node = container.querySelector<HTMLElement>(
+    '[aria-label="Chat messages"]',
+  );
+  if (!node) throw new Error("Chat scroll container was not rendered");
+  return node;
+}