fix: auto scrolling to bottom

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

@@ -1,4 +1,4 @@
-import { memo, useEffect, useMemo, useRef, useState } from 'react'
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
 import { ThreadMessage } from '@janhq/core'
 import { useVirtualizer } from '@tanstack/react-virtual'
@@ -17,30 +17,30 @@
 import { activeThreadAtom } 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} />
@@ -57,10 +57,12 @@
     loadModelError?: string
   }) => {
     // The scrollable element for your list
     const parentRef = useRef(null)
+    const prevScrollTop = useRef(0)
+    const isUserManuallyScrollingUp = useRef(false)
 
     const count = useMemo(
       () => (messages?.length ?? 0) + (loadModelError ? 1 : 0),
       [messages, loadModelError]
     )
 
@@ -72,27 +74,61 @@
       overscan: 5,
     })
     useEffect(() => {
+      if (isUserManuallyScrollingUp.current === true || !parentRef.current)
+        return
+
       if (count > 0 && messages && virtualizer) {
         virtualizer.scrollToIndex(count - 1)
       }
-    }, [count, virtualizer, messages, loadModelError])
+    }, [
+      count,
+      virtualizer,
+      messages,
+      loadModelError,
+      isUserManuallyScrollingUp,
+    ])
 
     const items = virtualizer.getVirtualItems()
+
     virtualizer.shouldAdjustScrollPositionOnItemSizeChange = (
       item,
       _,
       instance
     ) => {
+      if (isUserManuallyScrollingUp.current === true) return false
       return (
         // item.start < (instance.scrollOffset ?? 0) &&
         instance.scrollDirection !== 'backward'
       )
     }
 
+    const handleScroll = useCallback((event: React.UIEvent<HTMLElement>) => {
+      const currentScrollTop = event.currentTarget.scrollTop
+
+      if (prevScrollTop.current > currentScrollTop) {
+        isUserManuallyScrollingUp.current = true
+      } else {
+        const currentScrollTop = event.currentTarget.scrollTop
+        const scrollHeight = event.currentTarget.scrollHeight
+        const clientHeight = event.currentTarget.clientHeight
+
+        if (currentScrollTop + clientHeight >= scrollHeight) {
+          isUserManuallyScrollingUp.current = false
+        }
+      }
+
+      if (isUserManuallyScrollingUp.current === true) {
+        event.preventDefault()
+        event.stopPropagation()
+      }
+      prevScrollTop.current = currentScrollTop
+    }, [])
+
     return (
       <div className="flex h-full w-full flex-col overflow-x-hidden">
         <div
           ref={parentRef}
+          onScroll={handleScroll}
           className="List"
           style={{
             flex: 1,