fix: stop auto scroll if user manually scrolling up (#2874)

Co-authored-by: James <james@jan.ai>

web/containers/ListContainer/index.tsx

@@ -1,25 +1,49 @@
-import { ReactNode, useEffect, useRef } from 'react'
+import { ReactNode, useCallback, useEffect, useRef } from 'react'
 
 type Props = {
   children: ReactNode
 }
 
 const ListContainer: React.FC<Props> = ({ children }) => {
   const listRef = useRef<HTMLDivElement>(null)
+  const prevScrollTop = useRef(0)
+  const isUserManuallyScrollingUp = useRef(false)
+
+  const handleScroll = useCallback((event: React.UIEvent<HTMLElement>) => {
+    const currentScrollTop = event.currentTarget.scrollTop
+
+    if (prevScrollTop.current > currentScrollTop) {
+      console.debug('User is manually scrolling up')
+      isUserManuallyScrollingUp.current = true
+    } else {
+      const currentScrollTop = event.currentTarget.scrollTop
+      const scrollHeight = event.currentTarget.scrollHeight
+      const clientHeight = event.currentTarget.clientHeight
+
+      if (currentScrollTop + clientHeight >= scrollHeight) {
+        console.debug('Scrolled to the bottom')
+        isUserManuallyScrollingUp.current = false
+      }
+    }
+
+    prevScrollTop.current = currentScrollTop
+  }, [])
 
   useEffect(() => {
-    const scrollHeight = listRef.current?.scrollHeight ?? 0
+    if (isUserManuallyScrollingUp.current === true) return
 
+    const scrollHeight = listRef.current?.scrollHeight ?? 0
     listRef.current?.scrollTo({
       top: scrollHeight,
       behavior: 'instant',
     })
-  })
+  }, [listRef.current?.scrollHeight, isUserManuallyScrollingUp])
 
   return (
     <div
       ref={listRef}
       className="flex h-full w-full flex-col overflow-y-scroll"
+      onScroll={handleScroll}
     >
       {children}
     </div>

web/screens/Chat/ChatBody/index.tsx

@@ -22,8 +22,8 @@ const ChatBody: React.FC = () => {
   const downloadedModels = useAtomValue(downloadedModelsAtom)
   const loadModelError = useAtomValue(loadModelErrorAtom)
 
-  if (downloadedModels.length === 0) return <EmptyModel />
-  if (messages.length === 0) return <EmptyThread />
+  if (!downloadedModels.length) return <EmptyModel />
+  if (!messages.length) return <EmptyThread />
 
   return (
     <ListContainer>