feat: 优化打字机模式显示新内容的逻辑 (Chanzhaoyu#394)

* 添加为打字机模式优化的滚动至底部函数

* feat: 优化打字机模式始终显示最新内容的逻辑

* feat: 内容输出结束时也根据滚动条位置判断是否滚动至底部

src/views/chat/hooks/useScroll.ts

@@ -7,6 +7,7 @@ interface ScrollReturn {
   scrollRef: Ref<ScrollElement>
   scrollToBottom: () => Promise<void>
   scrollToTop: () => Promise<void>
+	scrollToBottomIfAtBottom: () => Promise<void>
 }
 
 export function useScroll(): ScrollReturn {
@@ -24,9 +25,21 @@ export function useScroll(): ScrollReturn {
       scrollRef.value.scrollTop = 0
   }
 
+  const scrollToBottomIfAtBottom = async () => {
+		await nextTick()
+    if (scrollRef.value) {
+      const threshold = 50 // 阈值，表示滚动条到底部的距离阈值
+      const distanceToBottom = scrollRef.value.scrollHeight - scrollRef.value.scrollTop - scrollRef.value.clientHeight
+      if (distanceToBottom <= threshold) {
+        scrollRef.value.scrollTop = scrollRef.value.scrollHeight
+      }
+    }
+  }
+
   return {
     scrollRef,
     scrollToBottom,
     scrollToTop,
+		scrollToBottomIfAtBottom,
   }
 }

src/views/chat/index.vue

@@ -24,7 +24,7 @@ const chatStore = useChatStore()
 useCopyCode()
 const { isMobile } = useBasicLayout()
 const { addChat, updateChat, updateChatSome, getChatByUuidAndIndex } = useChat()
-const { scrollRef, scrollToBottom } = useScroll()
+const { scrollRef, scrollToBottom, scrollToBottomIfAtBottom } = useScroll()
 
 const { uuid } = route.params as { uuid: string }
 
@@ -113,14 +113,14 @@ async function onConversation() {
               requestOptions: { prompt: message, options: { ...options } },
             },
           )
-          scrollToBottom()
+          scrollToBottomIfAtBottom()
         }
         catch (error) {
           //
         }
       },
     })
-    scrollToBottom()
+    scrollToBottomIfAtBottom()
   }
   catch (error: any) {
     const errorMessage = error?.message ?? t('common.wrong')