Defer chat auto-scroll to animation frame

- Queue tail-to-bottom scrolling with `requestAnimationFrame` to avoid redundant scroll calls - Preserve user scroll position by checking auto-scroll intent before running - Cancel any pending frame on unmount to prevent stale callbacks

Julius Marminge committed 8 months ago

Commit 01accc01 parent 0d9c2681 file · +19 −2Browse files

Unified · Split

apps/web/src/components/ChatView.tsx+19−2

   >(() => readLastInvokedScriptByProjectFromStorage());
   const messagesScrollRef = useRef<HTMLDivElement>(null);
   const shouldAutoScrollRef = useRef(true);
+  const pendingAutoScrollFrameRef = useRef<number | null>(null);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const composerCommandInputRef = useRef<HTMLInputElement>(null);
   const composerImagesRef = useRef<ComposerImageAttachment[]>([]);
     scrollContainer.scrollTo({ top: scrollContainer.scrollHeight, behavior });
     shouldAutoScrollRef.current = true;
   }, []);
+  const requestAutoTailToBottom = useCallback(() => {
+    if (pendingAutoScrollFrameRef.current !== null) return;
+    pendingAutoScrollFrameRef.current = window.requestAnimationFrame(() => {
+      pendingAutoScrollFrameRef.current = null;
+      if (!shouldAutoScrollRef.current) return;
+      scrollMessagesToBottom();
+    });
+  }, [scrollMessagesToBottom]);
   const onMessagesScroll = useCallback(() => {
     const scrollContainer = messagesScrollRef.current;
     if (!scrollContainer) return;
   }, [activeThread?.id, scrollMessagesToBottom]);
   useLayoutEffect(() => {
     if (!shouldAutoScrollRef.current) return;
-    scrollMessagesToBottom();
+    requestAutoTailToBottom();
-  }, [activeThread?.messages, workLogCount, scrollMessagesToBottom]);
+  }, [activeThread?.messages, workLogCount, requestAutoTailToBottom]);
+  useEffect(
+    () => () => {
+      if (pendingAutoScrollFrameRef.current === null) return;
+      window.cancelAnimationFrame(pendingAutoScrollFrameRef.current);
+      pendingAutoScrollFrameRef.current = null;
+    },
+    [],
+  );
   useEffect(() => {
     setExpandedWorkGroups({});