From 9576edf26f82952eb3d29021f9cb954ad3d73965 Mon Sep 17 00:00:00 2001
From: acongee <71998166+acongee@users.noreply.github.com>
Date: Thu, 9 Mar 2023 18:15:13 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E6=89=93=E5=AD=97?=
 =?UTF-8?q?=E6=9C=BA=E6=A8=A1=E5=BC=8F=E6=98=BE=E7=A4=BA=E6=96=B0=E5=86=85?=
 =?UTF-8?q?=E5=AE=B9=E7=9A=84=E9=80=BB=E8=BE=91=20(#394)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

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

* feat: 内容输出结束时也根据滚动条位置判断是否滚动至底部
---
 src/views/chat/hooks/useScroll.ts | 13 +++++++++++++
 src/views/chat/index.vue          |  6 +++---
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/views/chat/hooks/useScroll.ts b/src/views/chat/hooks/useScroll.ts
index 009698883e..9edddbf53b 100644
--- a/src/views/chat/hooks/useScroll.ts
+++ b/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,
   }
 }
diff --git a/src/views/chat/index.vue b/src/views/chat/index.vue
index 9930a12c9c..b837a2ffd7 100644
--- a/src/views/chat/index.vue
+++ b/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')