update

TabbyML · May 23, 2024 · f27891f · f27891f
1 parent bf681ae
commit f27891f
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 14 deletions.
diff --git a/ee/tabby-ui/components/chat/chat-scroll-anchor.tsx b/ee/tabby-ui/components/chat/chat-scroll-anchor.tsx
@@ -13,12 +13,13 @@ interface ChatScrollAnchorProps {
 
 export function ChatScrollAnchor({ trackVisibility }: ChatScrollAnchorProps) {
   const { container } = React.useContext(ChatContext)
-  const isAtBottom = useAtBottom(0, container)
+  const isAtBottom = useAtBottom(150, container)
 
   const { ref, entry, inView } = useInView({
     trackVisibility,
     delay: 100,
-    rootMargin: '0px 0px -150px 0px'
+    rootMargin: '0px 0px -150px 0px',
+    root: container
   })
 
   React.useEffect(() => {

diff --git a/ee/tabby-ui/components/chat/chat.tsx b/ee/tabby-ui/components/chat/chat.tsx
@@ -20,6 +20,7 @@ import { EmptyScreen } from './empty-screen'
 import { QuestionAnswerList } from './question-answer'
 import { useTabbyAnswer } from './use-tabby-answer'
 import { useLatest } from '@/lib/hooks/use-latest'
+import { useDebounceCallback } from '@/lib/hooks/use-debounce'
 
 type ChatContextValue = {
   isLoading: boolean
@@ -228,20 +229,24 @@ function ChatRenderer(
     })
   }, [answer, isLoading])
 
+  const scrollToBottom = useDebounceCallback(() => {
+    if (container) {
+      container.scrollTo({
+        top: container.scrollHeight,
+        behavior: 'smooth'
+      })
+    } else {
+      window.scrollTo({
+        top: document.body.offsetHeight,
+        behavior: 'smooth'
+      })
+    }
+  }, 100)
+
   React.useLayoutEffect(() => {
     // scroll to bottom when a request is sent
     if (isLoading) {
-      if (container) {
-        container.scrollTo({
-          top: container.scrollHeight,
-          behavior: 'smooth'
-        })
-      } else {
-        window.scrollTo({
-          top: document.body.offsetHeight,
-          behavior: 'smooth'
-        })
-      }
+      scrollToBottom.run()
     }
   }, [isLoading])
 

diff --git a/ee/tabby-ui/lib/hooks/use-at-bottom.tsx b/ee/tabby-ui/lib/hooks/use-at-bottom.tsx
@@ -34,7 +34,7 @@ export function useAtBottom(offset = 0, container?: HTMLDivElement) {
     const handleScroll = throttle(
       () => {
         const { scrollTop, clientHeight, scrollHeight } = container
-        setIsAtBottom(scrollTop + clientHeight >= scrollHeight)
+        setIsAtBottom(scrollTop + clientHeight >= scrollHeight - offset)
       },
       100,
       { leading: true }