From bba5d8a004c47a19e2187560a3ce0ca411c49322 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Fri, 20 Dec 2024 13:22:35 +0700
Subject: [PATCH 1/7] fix: update scroll issue and copywritting

---
 web/containers/ModelDropdown/index.tsx        |  4 +-
 .../ChatBody/EmptyThread/index.tsx            |  4 +-
 .../ThreadCenterPanel/ChatBody/index.tsx      | 62 +++++++++++++------
 3 files changed, 47 insertions(+), 23 deletions(-)

diff --git a/web/containers/ModelDropdown/index.tsx b/web/containers/ModelDropdown/index.tsx
index 09240845d3..f5ad55ad51 100644
--- a/web/containers/ModelDropdown/index.tsx
+++ b/web/containers/ModelDropdown/index.tsx
@@ -378,14 +378,14 @@ const ModelDropdown = ({
                 !selectedModel && 'text-[hsla(var(--text-tertiary))]'
               )}
             >
-              {selectedModel?.name || 'Select Model'}
+              {selectedModel?.name || 'Select a model'}
             </span>
           </Badge>
         ) : (
           <Input
             value={selectedModel?.name || ''}
             className="cursor-pointer"
-            placeholder="Select Model"
+            placeholder="Select a model"
             disabled={disabled}
             readOnly
             suffixIcon={
diff --git a/web/screens/Thread/ThreadCenterPanel/ChatBody/EmptyThread/index.tsx b/web/screens/Thread/ThreadCenterPanel/ChatBody/EmptyThread/index.tsx
index 403370ade3..57d9298e60 100644
--- a/web/screens/Thread/ThreadCenterPanel/ChatBody/EmptyThread/index.tsx
+++ b/web/screens/Thread/ThreadCenterPanel/ChatBody/EmptyThread/index.tsx
@@ -23,9 +23,7 @@ const EmptyThread = () => {
       <LogoMark className="mx-auto mb-2 animate-wave" width={32} height={32} />
       {showOnboardingStep ? (
         <>
-          <p className="mt-1 font-medium">
-            {`You don't have a local model yet.`}
-          </p>
+          <p className="mt-1 font-medium">{`You don't have any model`}</p>
           <Button
             onClick={() => setMainViewState(MainViewState.Hub)}
             variant="soft"
diff --git a/web/screens/Thread/ThreadCenterPanel/ChatBody/index.tsx b/web/screens/Thread/ThreadCenterPanel/ChatBody/index.tsx
index c2f7935f6b..f100701abd 100644
--- a/web/screens/Thread/ThreadCenterPanel/ChatBody/index.tsx
+++ b/web/screens/Thread/ThreadCenterPanel/ChatBody/index.tsx
@@ -14,7 +14,11 @@ import LoadModelError from '../LoadModelError'
 import EmptyThread from './EmptyThread'
 
 import { getCurrentChatMessagesAtom } from '@/helpers/atoms/ChatMessage.atom'
-import { activeThreadAtom } from '@/helpers/atoms/Thread.atom'
+import {
+  activeThreadAtom,
+  isGeneratingResponseAtom,
+  threadStatesAtom,
+} from '@/helpers/atoms/Thread.atom'
 
 const ChatConfigurator = memo(() => {
   const messages = useAtomValue(getCurrentChatMessagesAtom)
@@ -61,6 +65,12 @@ const ChatBody = memo(
     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(
       () => (messages?.length ?? 0) + (loadModelError ? 1 : 0),
@@ -75,9 +85,22 @@ const ChatBody = memo(
       overscan: 5,
     })
 
+    useEffect(() => {
+      // Delay the scroll until the DOM is updated
+      if (parentRef.current && isGeneratingResponse) {
+        requestAnimationFrame(() => {
+          if (parentRef.current) {
+            parentRef.current.scrollTo({ top: parentRef.current.scrollHeight })
+            virtualizer.scrollToIndex(count - 1)
+          }
+        })
+      }
+    }, [count, virtualizer, isGeneratingResponse])
+
     useEffect(() => {
       // Delay the scroll until the DOM is updated
       if (parentRef.current) {
+        isUserManuallyScrollingUp.current = false
         requestAnimationFrame(() => {
           if (parentRef.current) {
             parentRef.current.scrollTo({ top: parentRef.current.scrollHeight })
@@ -101,27 +124,30 @@ const ChatBody = memo(
       )
     }
 
-    const handleScroll = useCallback((event: React.UIEvent<HTMLElement>) => {
-      const currentScrollTop = event.currentTarget.scrollTop
-
-      if (prevScrollTop.current > currentScrollTop) {
-        isUserManuallyScrollingUp.current = true
-      } else {
+    const handleScroll = useCallback(
+      (event: React.UIEvent<HTMLElement>) => {
         const currentScrollTop = event.currentTarget.scrollTop
-        const scrollHeight = event.currentTarget.scrollHeight
-        const clientHeight = event.currentTarget.clientHeight
 
-        if (currentScrollTop + clientHeight >= scrollHeight) {
-          isUserManuallyScrollingUp.current = false
+        if (prevScrollTop.current > currentScrollTop && isStreamingResponse) {
+          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
-    }, [])
+        if (isUserManuallyScrollingUp.current === true) {
+          event.preventDefault()
+          event.stopPropagation()
+        }
+        prevScrollTop.current = currentScrollTop
+      },
+      [isStreamingResponse]
+    )
 
     return (
       <div className="flex h-full w-full flex-col overflow-x-hidden">

From fc4b5aa69781fe85f09dcd76a162d2c3fa98476d Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Fri, 20 Dec 2024 13:47:04 +0700
Subject: [PATCH 2/7] chore: fix trigger scroll backward

---
 .../ThreadCenterPanel/ChatBody/index.tsx      | 49 ++++++++++---------
 1 file changed, 27 insertions(+), 22 deletions(-)

diff --git a/web/screens/Thread/ThreadCenterPanel/ChatBody/index.tsx b/web/screens/Thread/ThreadCenterPanel/ChatBody/index.tsx
index f100701abd..a4d3dd761f 100644
--- a/web/screens/Thread/ThreadCenterPanel/ChatBody/index.tsx
+++ b/web/screens/Thread/ThreadCenterPanel/ChatBody/index.tsx
@@ -91,7 +91,6 @@ const ChatBody = memo(
         requestAnimationFrame(() => {
           if (parentRef.current) {
             parentRef.current.scrollTo({ top: parentRef.current.scrollHeight })
-            virtualizer.scrollToIndex(count - 1)
           }
         })
       }
@@ -99,35 +98,41 @@ const ChatBody = memo(
 
     useEffect(() => {
       // Delay the scroll until the DOM is updated
-      if (parentRef.current) {
-        isUserManuallyScrollingUp.current = false
-        requestAnimationFrame(() => {
-          if (parentRef.current) {
-            parentRef.current.scrollTo({ top: parentRef.current.scrollHeight })
-            virtualizer.scrollToIndex(count - 1)
+      isUserManuallyScrollingUp.current = false
+      requestAnimationFrame(() => {
+        if (parentRef.current) {
+          parentRef.current.scrollTo({ top: parentRef.current.scrollHeight })
+          virtualizer.scrollToIndex(count - 1)
+
+          virtualizer.shouldAdjustScrollPositionOnItemSizeChange = (
+            item,
+            _,
+            instance
+          ) => {
+            if (
+              isUserManuallyScrollingUp.current === true &&
+              isStreamingResponse
+            )
+              return false
+            return (
+              // item.start < (instance.scrollOffset ?? 0) &&
+              instance.scrollDirection !== 'backward'
+            )
           }
-        })
-      }
-    }, [count, currentThread?.id, virtualizer])
+        }
+      })
+    }, [count, currentThread?.id, isStreamingResponse, virtualizer])
 
     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 (!isStreamingResponse) {
+          isUserManuallyScrollingUp.current = false
+        }
+
         if (prevScrollTop.current > currentScrollTop && isStreamingResponse) {
           isUserManuallyScrollingUp.current = true
         } else {

From 1ec6520faada83f89826c5f2e364e711a131ceb7 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Fri, 20 Dec 2024 13:55:40 +0700
Subject: [PATCH 3/7] fix: manual scroll when isgenerating state

---
 .../ThreadCenterPanel/ChatBody/index.tsx      | 45 +++++++++----------
 1 file changed, 20 insertions(+), 25 deletions(-)

diff --git a/web/screens/Thread/ThreadCenterPanel/ChatBody/index.tsx b/web/screens/Thread/ThreadCenterPanel/ChatBody/index.tsx
index a4d3dd761f..2dad023828 100644
--- a/web/screens/Thread/ThreadCenterPanel/ChatBody/index.tsx
+++ b/web/screens/Thread/ThreadCenterPanel/ChatBody/index.tsx
@@ -103,28 +103,25 @@ const ChatBody = memo(
         if (parentRef.current) {
           parentRef.current.scrollTo({ top: parentRef.current.scrollHeight })
           virtualizer.scrollToIndex(count - 1)
-
-          virtualizer.shouldAdjustScrollPositionOnItemSizeChange = (
-            item,
-            _,
-            instance
-          ) => {
-            if (
-              isUserManuallyScrollingUp.current === true &&
-              isStreamingResponse
-            )
-              return false
-            return (
-              // item.start < (instance.scrollOffset ?? 0) &&
-              instance.scrollDirection !== 'backward'
-            )
-          }
         }
       })
-    }, [count, currentThread?.id, isStreamingResponse, virtualizer])
+    }, [count, currentThread?.id, virtualizer])
 
     const items = virtualizer.getVirtualItems()
 
+    virtualizer.shouldAdjustScrollPositionOnItemSizeChange = (
+      item,
+      _,
+      instance
+    ) => {
+      if (isUserManuallyScrollingUp.current === true && isStreamingResponse)
+        return false
+      return (
+        // item.start < (instance.scrollOffset ?? 0) &&
+        instance.scrollDirection !== 'backward'
+      )
+    }
+
     const handleScroll = useCallback(
       (event: React.UIEvent<HTMLElement>) => {
         const currentScrollTop = event.currentTarget.scrollTop
@@ -133,16 +130,14 @@ const ChatBody = memo(
           isUserManuallyScrollingUp.current = false
         }
 
+        if (isGeneratingResponse) {
+          isUserManuallyScrollingUp.current = false
+        }
+
         if (prevScrollTop.current > currentScrollTop && isStreamingResponse) {
           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
-          }
+          isUserManuallyScrollingUp.current = false
         }
 
         if (isUserManuallyScrollingUp.current === true) {
@@ -151,7 +146,7 @@ const ChatBody = memo(
         }
         prevScrollTop.current = currentScrollTop
       },
-      [isStreamingResponse]
+      [isStreamingResponse, isGeneratingResponse]
     )
 
     return (

From 3e62be62dd8a3294ca574ee1d021329ba7ea66e9 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Fri, 20 Dec 2024 14:00:16 +0700
Subject: [PATCH 4/7] fix: useEffect state'

---
 web/screens/Thread/ThreadCenterPanel/ChatBody/index.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/web/screens/Thread/ThreadCenterPanel/ChatBody/index.tsx b/web/screens/Thread/ThreadCenterPanel/ChatBody/index.tsx
index 2dad023828..d4296a890c 100644
--- a/web/screens/Thread/ThreadCenterPanel/ChatBody/index.tsx
+++ b/web/screens/Thread/ThreadCenterPanel/ChatBody/index.tsx
@@ -98,14 +98,16 @@ const ChatBody = memo(
 
     useEffect(() => {
       // Delay the scroll until the DOM is updated
-      isUserManuallyScrollingUp.current = false
+      if (isStreamingResponse) {
+        isUserManuallyScrollingUp.current = false
+      }
       requestAnimationFrame(() => {
         if (parentRef.current) {
           parentRef.current.scrollTo({ top: parentRef.current.scrollHeight })
           virtualizer.scrollToIndex(count - 1)
         }
       })
-    }, [count, currentThread?.id, virtualizer])
+    }, [count, currentThread?.id, virtualizer, isStreamingResponse])
 
     const items = virtualizer.getVirtualItems()
 

From d22a08e9a8ba0117ab9ef2c5f75d17530747e6d3 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Fri, 20 Dec 2024 14:01:23 +0700
Subject: [PATCH 5/7] fix: scroll state

---
 web/screens/Thread/ThreadCenterPanel/ChatBody/index.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/web/screens/Thread/ThreadCenterPanel/ChatBody/index.tsx b/web/screens/Thread/ThreadCenterPanel/ChatBody/index.tsx
index d4296a890c..eb7e50cbc9 100644
--- a/web/screens/Thread/ThreadCenterPanel/ChatBody/index.tsx
+++ b/web/screens/Thread/ThreadCenterPanel/ChatBody/index.tsx
@@ -98,9 +98,8 @@ const ChatBody = memo(
 
     useEffect(() => {
       // Delay the scroll until the DOM is updated
-      if (isStreamingResponse) {
-        isUserManuallyScrollingUp.current = false
-      }
+
+      isUserManuallyScrollingUp.current = false
       requestAnimationFrame(() => {
         if (parentRef.current) {
           parentRef.current.scrollTo({ top: parentRef.current.scrollHeight })

From ab3f792a311dce029c173ba70b9e1724050b224e Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Fri, 20 Dec 2024 14:01:37 +0700
Subject: [PATCH 6/7] chore: fix trigger scroll backward

---
 web/screens/Thread/ThreadCenterPanel/ChatBody/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/screens/Thread/ThreadCenterPanel/ChatBody/index.tsx b/web/screens/Thread/ThreadCenterPanel/ChatBody/index.tsx
index eb7e50cbc9..af565d549e 100644
--- a/web/screens/Thread/ThreadCenterPanel/ChatBody/index.tsx
+++ b/web/screens/Thread/ThreadCenterPanel/ChatBody/index.tsx
@@ -106,7 +106,7 @@ const ChatBody = memo(
           virtualizer.scrollToIndex(count - 1)
         }
       })
-    }, [count, currentThread?.id, virtualizer, isStreamingResponse])
+    }, [count, currentThread?.id, virtualizer])
 
     const items = virtualizer.getVirtualItems()
 

From e6d6433b4ec15e4dd87f260212d9be6099fe19b7 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Fri, 20 Dec 2024 14:04:04 +0700
Subject: [PATCH 7/7] fix: calculate scroll and client hight

---
 web/screens/Thread/ThreadCenterPanel/ChatBody/index.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/web/screens/Thread/ThreadCenterPanel/ChatBody/index.tsx b/web/screens/Thread/ThreadCenterPanel/ChatBody/index.tsx
index af565d549e..4c44ec488c 100644
--- a/web/screens/Thread/ThreadCenterPanel/ChatBody/index.tsx
+++ b/web/screens/Thread/ThreadCenterPanel/ChatBody/index.tsx
@@ -141,6 +141,13 @@ const ChatBody = memo(
           isUserManuallyScrollingUp.current = false
         }
 
+        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()