prevent auto scrolling down to bottom when user already scrolled up (#…

…2813)
langgenius · Mar 15, 2024 · 8a40157 · 8a40157
1 parent 156345c
commit 8a40157
Showing 1 changed file with 21 additions and 7 deletions.
diff --git a/web/app/components/base/chat/chat/index.tsx b/web/app/components/base/chat/chat/index.tsx
@@ -4,6 +4,7 @@ import type {
 } from 'react'
 import {
   memo,
+  useCallback,
   useEffect,
   useRef,
 } from 'react'
@@ -76,19 +77,20 @@ const Chat: FC<ChatProps> = ({
   const chatContainerInnerRef = useRef<HTMLDivElement>(null)
   const chatFooterRef = useRef<HTMLDivElement>(null)
   const chatFooterInnerRef = useRef<HTMLDivElement>(null)
+  const userScrolledRef = useRef(false)
 
-  const handleScrolltoBottom = () => {
-    if (chatContainerRef.current)
+  const handleScrolltoBottom = useCallback(() => {
+    if (chatContainerRef.current && !userScrolledRef.current)
       chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight
-  }
+  }, [])
 
-  const handleWindowResize = () => {
+  const handleWindowResize = useCallback(() => {
     if (chatContainerRef.current && chatFooterRef.current)
       chatFooterRef.current.style.width = `${chatContainerRef.current.clientWidth}px`
 
     if (chatContainerInnerRef.current && chatFooterInnerRef.current)
       chatFooterInnerRef.current.style.width = `${chatContainerInnerRef.current.clientWidth}px`
-  }
+  }, [])
 
   useThrottleEffect(() => {
     handleScrolltoBottom()
@@ -98,7 +100,7 @@ const Chat: FC<ChatProps> = ({
   useEffect(() => {
     window.addEventListener('resize', debounce(handleWindowResize))
     return () => window.removeEventListener('resize', handleWindowResize)
-  }, [])
+  }, [handleWindowResize])
 
   useEffect(() => {
     if (chatFooterRef.current && chatContainerRef.current) {
@@ -117,7 +119,19 @@ const Chat: FC<ChatProps> = ({
         resizeObserver.disconnect()
       }
     }
-  }, [chatFooterRef, chatContainerRef])
+  }, [handleScrolltoBottom])
+
+  useEffect(() => {
+    const chatContainer = chatContainerRef.current
+    if (chatContainer) {
+      const setUserScrolled = () => {
+        if (chatContainer)
+          userScrolledRef.current = chatContainer.scrollHeight - chatContainer.scrollTop >= chatContainer.clientHeight + 300
+      }
+      chatContainer.addEventListener('scroll', setUserScrolled)
+      return () => chatContainer.removeEventListener('scroll', setUserScrolled)
+    }
+  }, [])
 
   const hasTryToAsk = config?.suggested_questions_after_answer?.enabled && !!suggestedQuestions?.length && onSend