From b4765f6b33aa6af7ca58ccdb32ac668b8bea75d1 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 16 Jan 2026 18:09:46 +0000
Subject: [PATCH] fix: ensure chat scrolls to bottom on initial message load

Add effect that programmatically scrolls to bottom when messages first
load asynchronously. The initialTopMostItemIndex prop only works on
first render - this handles the case where messages arrive after mount.

- Track scroll state per conversation with ref
- Reset tracking when conversation changes
- Use requestAnimationFrame to ensure DOM is ready before scrolling
---
 src/components/ChatViewer.tsx | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/src/components/ChatViewer.tsx b/src/components/ChatViewer.tsx
index 72b8161..4fd79a7 100644
--- a/src/components/ChatViewer.tsx
+++ b/src/components/ChatViewer.tsx
@@ -583,6 +583,34 @@ export function ChatViewer({
   // Ref to Virtuoso for programmatic scrolling
   const virtuosoRef = useRef<VirtuosoHandle>(null);
 
+  // Track if we've done initial scroll to bottom for this conversation
+  const hasScrolledToBottomRef = useRef(false);
+
+  // Reset scroll tracking when conversation changes
+  useEffect(() => {
+    hasScrolledToBottomRef.current = false;
+  }, [conversation?.id]);
+
+  // Scroll to bottom when messages first load (handles async loading)
+  useEffect(() => {
+    if (
+      messagesWithMarkers &&
+      messagesWithMarkers.length > 0 &&
+      !hasScrolledToBottomRef.current &&
+      virtuosoRef.current
+    ) {
+      // Use requestAnimationFrame to ensure DOM is ready
+      requestAnimationFrame(() => {
+        virtuosoRef.current?.scrollToIndex({
+          index: messagesWithMarkers.length - 1,
+          align: "end",
+          behavior: "auto",
+        });
+        hasScrolledToBottomRef.current = true;
+      });
+    }
+  }, [messagesWithMarkers]);
+
   // State for send in progress (prevents double-sends)
   const [isSending, setIsSending] = useState(false);