From 8663a7e4bfe9106004da5281d5ff5094b170ff7a Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Thu, 19 Dec 2024 11:35:00 +0800
Subject: [PATCH] fix: scroll to bottom issue (#4289)

---
 .../ThreadCenterPanel/ChatBody/index.tsx      | 25 +++++++++----------
 1 file changed, 12 insertions(+), 13 deletions(-)

diff --git a/web/screens/Thread/ThreadCenterPanel/ChatBody/index.tsx b/web/screens/Thread/ThreadCenterPanel/ChatBody/index.tsx
index de99ee4138..c2f7935f6b 100644
--- a/web/screens/Thread/ThreadCenterPanel/ChatBody/index.tsx
+++ b/web/screens/Thread/ThreadCenterPanel/ChatBody/index.tsx
@@ -57,9 +57,10 @@ const ChatBody = memo(
     loadModelError?: string
   }) => {
     // The scrollable element for your list
-    const parentRef = useRef(null)
+    const parentRef = useRef<HTMLDivElement>(null)
     const prevScrollTop = useRef(0)
     const isUserManuallyScrollingUp = useRef(false)
+    const currentThread = useAtomValue(activeThreadAtom)
 
     const count = useMemo(
       () => (messages?.length ?? 0) + (loadModelError ? 1 : 0),
@@ -73,20 +74,18 @@ const ChatBody = memo(
       estimateSize: () => 35,
       overscan: 5,
     })
-    useEffect(() => {
-      if (isUserManuallyScrollingUp.current === true || !parentRef.current)
-        return
 
-      if (count > 0 && messages && virtualizer) {
-        virtualizer.scrollToIndex(count - 1)
+    useEffect(() => {
+      // Delay the scroll until the DOM is updated
+      if (parentRef.current) {
+        requestAnimationFrame(() => {
+          if (parentRef.current) {
+            parentRef.current.scrollTo({ top: parentRef.current.scrollHeight })
+            virtualizer.scrollToIndex(count - 1)
+          }
+        })
       }
-    }, [
-      count,
-      virtualizer,
-      messages,
-      loadModelError,
-      isUserManuallyScrollingUp,
-    ])
+    }, [count, currentThread?.id, virtualizer])
 
     const items = virtualizer.getVirtualItems()