fix: scroll bottom when generation text

web/screens/Thread/ThreadCenterPanel/ChatBody/index.tsx

@@ -21,30 +21,30 @@
 } from '@/helpers/atoms/Thread.atom'
 
 const ChatConfigurator = memo(() => {
   const messages = useAtomValue(getCurrentChatMessagesAtom)
   const currentThread = useAtomValue(activeThreadAtom)
 
   const [current, setCurrent] = useState<ThreadMessage[]>([])
   const loadModelError = useAtomValue(loadModelErrorAtom)
 
   const isMessagesIdentificial = (
     arr1: ThreadMessage[],
     arr2: ThreadMessage[]
   ): boolean => {
     if (arr1.length !== arr2.length) return false
     return arr1.every((item, index) => item.id === arr2[index].id)
   }
 
   useEffect(() => {
     if (
       !isMessagesIdentificial(messages, current) ||
       messages.some((e) => e.thread_id !== currentThread?.id)
     ) {
       setCurrent(messages)
     }
   }, [messages, current, loadModelError, currentThread])
 
   if (!messages.length) return <EmptyThread />
   return (
     <div className="flex h-full w-full flex-col">
       <ChatBody loadModelError={loadModelError} messages={current} />
@@ -61,15 +61,15 @@
     loadModelError?: string
   }) => {
     // The scrollable element for your list
     const parentRef = useRef<HTMLDivElement>(null)
     const prevScrollTop = useRef(0)
     const isUserManuallyScrollingUp = useRef(false)
     const currentThread = useAtomValue(activeThreadAtom)
     const threadStates = useAtomValue(threadStatesAtom)
     const isGeneratingResponse = useAtomValue(isGeneratingResponseAtom)
 
     const isStreamingResponse = Object.values(threadStates).some(
       (threadState) => threadState.waitingForResponse
     )
 
     const count = useMemo(
@@ -85,24 +85,33 @@
       overscan: 5,
     })
 
+    useEffect(() => {
+      if (parentRef.current) {
+        parentRef.current.scrollTo({ top: parentRef.current.scrollHeight })
+        virtualizer.scrollToIndex(count - 1)
+      }
+    }, [count, virtualizer])
+
     useEffect(() => {
       if (parentRef.current && isGeneratingResponse) {
-        requestAnimationFrame(() => {
-          if (parentRef.current) {
-            parentRef.current.scrollTo({ top: parentRef.current.scrollHeight })
-          }
-        })
+        parentRef.current.scrollTo({ top: parentRef.current.scrollHeight })
+        virtualizer.scrollToIndex(count - 1)
       }
     }, [count, virtualizer, isGeneratingResponse])
 
+    useEffect(() => {
+      if (parentRef.current && isGeneratingResponse) {
+        parentRef.current.scrollTo({ top: parentRef.current.scrollHeight })
+        virtualizer.scrollToIndex(count - 1)
+      }
+    }, [count, virtualizer, isGeneratingResponse, currentThread?.id])
+
     useEffect(() => {
       isUserManuallyScrollingUp.current = false
-      requestAnimationFrame(() => {
-        if (parentRef.current) {
-          parentRef.current.scrollTo({ top: parentRef.current.scrollHeight })
-          virtualizer.scrollToIndex(count - 1)
-        }
-      })
+      if (parentRef.current) {
+        parentRef.current.scrollTo({ top: parentRef.current.scrollHeight })
+        virtualizer.scrollToIndex(count - 1)
+      }
     }, [count, currentThread?.id, virtualizer])
 
     const items = virtualizer.getVirtualItems()