Fix session switch chat scroll

Author: iancaoo

apps/web/src/app/data-tasks/__tests__/chat-scroll.test.ts

@@ -11,24 +11,27 @@ function createScrollFixture() {
     parentElement: null as HTMLElement | null,
   } as unknown as HTMLElement;
 
+  const scrollCalls: ScrollToOptions[] = [];
   const scroll = {
-    style: { overflowY: "auto" },
+    style: { overflowY: "auto", scrollBehavior: "" },
     scrollTop: 0,
     scrollHeight: 400,
-    scrollTo({ top }: ScrollToOptions) {
+    scrollTo(options: ScrollToOptions) {
+      scrollCalls.push(options);
+      const { top } = options;
       this.scrollTop = top ?? 0;
     },
     parentElement: null,
   } as unknown as HTMLElement;
 
   content.parentElement = scroll;
   const root = {
-    querySelector(selector: string) {
-      return selector === '[data-testid="copilot-scroll-content"]' ? content : null;
+    querySelectorAll(selector: string) {
+      return selector === '[data-testid="copilot-scroll-content"]' ? [content] : [];
     },
   } as unknown as ParentNode;
 
-  return { root, scroll };
+  return { root, scroll, scrollCalls };
 }
 
 describe("chat scroll helpers", () => {
@@ -43,6 +46,67 @@ describe("chat scroll helpers", () => {
     expect(scroll.scrollTop).toBe(scroll.scrollHeight);
   });
 
+  it("uses instant scroll even when the container has smooth scroll behavior", () => {
+    const { root, scroll, scrollCalls } = createScrollFixture();
+    scroll.style.scrollBehavior = "smooth";
+
+    expect(scrollCopilotChatToBottom(root)).toBe(true);
+    expect(scroll.scrollTop).toBe(scroll.scrollHeight);
+    expect(scrollCalls).toEqual([{ top: scroll.scrollHeight, behavior: "auto" }]);
+    expect(scroll.style.scrollBehavior).toBe("smooth");
+  });
+
+  it("skips hidden chat sessions when finding the active scroll container", () => {
+    const hiddenContent = {
+      dataset: { testid: "copilot-scroll-content" },
+      parentElement: null as HTMLElement | null,
+    } as unknown as HTMLElement;
+    const hiddenScroll = {
+      style: { overflowY: "auto", display: "none" },
+      parentElement: null,
+    } as unknown as HTMLElement;
+    hiddenContent.parentElement = hiddenScroll;
+
+    const { scroll, root } = createScrollFixture();
+    const scopedRoot = {
+      querySelectorAll(selector: string) {
+        return selector === '[data-testid="copilot-scroll-content"]'
+          ? [hiddenContent, ...(root.querySelectorAll(selector) as unknown as HTMLElement[])]
+          : [];
+      },
+    } as unknown as ParentNode;
+
+    expect(findCopilotChatScrollContainer(scopedRoot)).toBe(scroll);
+  });
+
+  it("prefers the ancestor that actually scrolls over a non-scrolling overflow wrapper", () => {
+    const content = {
+      dataset: { testid: "copilot-scroll-content" },
+      parentElement: null as HTMLElement | null,
+    } as unknown as HTMLElement;
+    const innerOverflow = {
+      style: { overflowY: "auto" },
+      scrollHeight: 800,
+      clientHeight: 800,
+      parentElement: null as HTMLElement | null,
+    } as unknown as HTMLElement;
+    const scrollViewport = {
+      style: { overflowY: "auto" },
+      scrollHeight: 800,
+      clientHeight: 300,
+      parentElement: null,
+    } as unknown as HTMLElement;
+    content.parentElement = innerOverflow;
+    innerOverflow.parentElement = scrollViewport;
+    const root = {
+      querySelectorAll(selector: string) {
+        return selector === '[data-testid="copilot-scroll-content"]' ? [content] : [];
+      },
+    } as unknown as ParentNode;
+
+    expect(findCopilotChatScrollContainer(root)).toBe(scrollViewport);
+  });
+
   it("retries scrolling until attempts are exhausted", () => {
     const { root, scroll } = createScrollFixture();
     const calls: number[] = [];

apps/web/src/app/data-tasks/chat-scroll.ts

@@ -13,20 +13,54 @@ function readOverflowY(element: HTMLElement): string {
   return "";
 }
 
+function isRendered(element: HTMLElement): boolean {
+  let current: HTMLElement | null = element;
+  while (current) {
+    if (current.style?.display === "none") {
+      return false;
+    }
+    if (typeof getComputedStyle === "function") {
+      const style = getComputedStyle(current);
+      if (style.display === "none" || style.visibility === "hidden") {
+        return false;
+      }
+    }
+    current = current.parentElement;
+  }
+  return true;
+}
+
+function findScrollableAncestor(element: HTMLElement): HTMLElement | null {
+  let current = element.parentElement;
+  let fallback: HTMLElement | null = null;
+  while (current) {
+    if (isScrollableOverflow(readOverflowY(current))) {
+      fallback ??= current;
+      if (current.scrollHeight > current.clientHeight) {
+        return current;
+      }
+    }
+    current = current.parentElement;
+  }
+  return fallback;
+}
+
 export function findCopilotChatScrollContainer(
   root: ParentNode = document,
 ): HTMLElement | null {
-  const content = root.querySelector('[data-testid="copilot-scroll-content"]');
-  if (!content || typeof content !== "object" || !("parentElement" in content)) {
-    return null;
-  }
-
-  let element = (content as HTMLElement).parentElement;
-  while (element) {
-    if (isScrollableOverflow(readOverflowY(element))) {
-      return element;
+  const contents = root.querySelectorAll('[data-testid="copilot-scroll-content"]');
+  for (const content of contents) {
+    if (typeof content !== "object" || !("parentElement" in content)) {
+      continue;
+    }
+    const element = content as HTMLElement;
+    if (!isRendered(element)) {
+      continue;
+    }
+    const scrollContainer = findScrollableAncestor(element);
+    if (scrollContainer) {
+      return scrollContainer;
     }
-    element = element.parentElement;
   }
 
   return null;
@@ -41,10 +75,18 @@ export function scrollCopilotChatToBottom(
     return false;
   }
 
+  const previousScrollBehavior = container.style.scrollBehavior;
+  if (behavior === "auto") {
+    container.style.scrollBehavior = "auto";
+  }
+  container.scrollTop = container.scrollHeight;
   container.scrollTo({
     top: container.scrollHeight,
     behavior,
   });
+  if (behavior === "auto") {
+    container.style.scrollBehavior = previousScrollBehavior;
+  }
   return true;
 }