From cae799bb286c2d5f146e17d95f918e1b94e2458d Mon Sep 17 00:00:00 2001
From: Daniel Riccio <ricciodaniel98@gmail.com>
Date: Wed, 6 Aug 2025 18:53:34 -0500
Subject: [PATCH] fix: Replace scrollToIndex with scrollTo to fix scroll jitter

The scrollToIndex method causes jitter during streaming because it tries
to calculate and jump to specific message indices while content is
rapidly changing. Using scrollTo with Number.MAX_SAFE_INTEGER simply
scrolls to the bottom without tracking specific indices, eliminating
the jitter while keeping all memory optimizations from PR #6697.
---
 webview-ui/src/components/chat/ChatView.tsx | 35 ++++++---------------
 1 file changed, 9 insertions(+), 26 deletions(-)

diff --git a/webview-ui/src/components/chat/ChatView.tsx b/webview-ui/src/components/chat/ChatView.tsx
index e73ac677019..9b8c96dea1d 100644
--- a/webview-ui/src/components/chat/ChatView.tsx
+++ b/webview-ui/src/components/chat/ChatView.tsx
@@ -1334,23 +1334,10 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 
 	const scrollToBottomSmooth = useMemo(
 		() =>
-			debounce(
-				() => {
-					const lastIndex = groupedMessages.length - 1
-					if (lastIndex >= 0) {
-						virtuosoRef.current?.scrollToIndex({
-							index: lastIndex,
-							behavior: "smooth",
-							align: "end",
-						})
-					}
-				},
-				10,
-				{
-					immediate: true,
-				},
-			),
-		[groupedMessages.length],
+			debounce(() => virtuosoRef.current?.scrollTo({ top: Number.MAX_SAFE_INTEGER, behavior: "smooth" }), 10, {
+				immediate: true,
+			}),
+		[],
 	)
 
 	useEffect(() => {
@@ -1362,15 +1349,11 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 	}, [scrollToBottomSmooth])
 
 	const scrollToBottomAuto = useCallback(() => {
-		const lastIndex = groupedMessages.length - 1
-		if (lastIndex >= 0) {
-			virtuosoRef.current?.scrollToIndex({
-				index: lastIndex,
-				behavior: "auto", // Instant causes crash.
-				align: "end",
-			})
-		}
-	}, [groupedMessages.length])
+		virtuosoRef.current?.scrollTo({
+			top: Number.MAX_SAFE_INTEGER,
+			behavior: "auto", // Instant causes crash.
+		})
+	}, [])
 
 	const handleSetExpandedRow = useCallback(
 		(ts: number, expand?: boolean) => {