fix: update scroll issue and copywritting

web/containers/ModelDropdown/index.tsx

@@ -116,14 +116,14 @@
 
   const handleChangeStateOpen = useCallback(
     (state: boolean) => {
       setOpen(state)
       setModelDropdownState(state)
     },
     [setModelDropdownState]
   )
 
   const isModelSupportRagAndTools = useCallback((model: Model) => {
     return (
       model?.engine === InferenceEngine.openai ||
       isLocalEngine(model?.engine as InferenceEngine)
     )
@@ -134,7 +134,7 @@
       configuredModels
         .concat(
           downloadedModels.filter(
             (e) => !configuredModels.some((x) => x.id === e.id)
           )
         )
         .filter((e) =>
@@ -144,24 +144,24 @@
           if (searchFilter === 'local') {
             return isLocalEngine(e.engine)
           }
           if (searchFilter === 'remote') {
             return !isLocalEngine(e.engine)
           }
         })
         .sort((a, b) => a.name.localeCompare(b.name))
         .sort((a, b) => {
           const aInDownloadedModels = downloadedModels.some(
             (item) => item.id === a.id
           )
           const bInDownloadedModels = downloadedModels.some(
             (item) => item.id === b.id
           )
           if (aInDownloadedModels && !bInDownloadedModels) {
             return -1
           } else if (!aInDownloadedModels && bInDownloadedModels) {
             return 1
           } else {
             return 0
           }
         }),
     [configuredModels, searchText, searchFilter, downloadedModels]
@@ -198,10 +198,10 @@
 
   const onClickModelItem = useCallback(
     async (modelId: string) => {
       if (!activeAssistant) return
       const model = downloadedModels.find((m) => m.id === modelId)
       setSelectedModel(model)
       setOpen(false)
 
       if (activeThread) {
         // Change assistand tools based on model support RAG
@@ -378,14 +378,14 @@
                 !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={

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"

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),
@@ -77,14 +87,25 @@ const ChatBody = memo(
 
     useEffect(() => {
       // Delay the scroll until the DOM is updated
-      if (parentRef.current) {
+      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
+
+      isUserManuallyScrollingUp.current = false
+      requestAnimationFrame(() => {
+        if (parentRef.current) {
+          parentRef.current.scrollTo({ top: parentRef.current.scrollHeight })
+          virtualizer.scrollToIndex(count - 1)
+        }
+      })
     }, [count, currentThread?.id, virtualizer])
 
     const items = virtualizer.getVirtualItems()
@@ -94,34 +115,47 @@ const ChatBody = memo(
       _,
       instance
     ) => {
-      if (isUserManuallyScrollingUp.current === true) return false
+      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
-
-      if (prevScrollTop.current > currentScrollTop) {
-        isUserManuallyScrollingUp.current = true
-      } else {
+    const handleScroll = useCallback(
+      (event: React.UIEvent<HTMLElement>) => {
         const currentScrollTop = event.currentTarget.scrollTop
+
+        if (!isStreamingResponse) {
+          isUserManuallyScrollingUp.current = false
+        }
+
+        if (isGeneratingResponse) {
+          isUserManuallyScrollingUp.current = false
+        }
+
+        if (prevScrollTop.current > currentScrollTop && isStreamingResponse) {
+          isUserManuallyScrollingUp.current = true
+        } else {
+          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()
-      }
-      prevScrollTop.current = currentScrollTop
-    }, [])
+        if (isUserManuallyScrollingUp.current === true) {
+          event.preventDefault()
+          event.stopPropagation()
+        }
+        prevScrollTop.current = currentScrollTop
+      },
+      [isStreamingResponse, isGeneratingResponse]
+    )
 
     return (
       <div className="flex h-full w-full flex-col overflow-x-hidden">