From ed93702dc38b7e7b0cabb9c6c4d030122e542366 Mon Sep 17 00:00:00 2001
From: yyhhyyyyyy <yyhhyyyyyy8@gmail.com>
Date: Wed, 27 Aug 2025 19:48:47 +0800
Subject: [PATCH] fix: improve auto scroll behavior for fast AI responses

---
 src/renderer/src/components/ChatView.vue       |  8 +++++++-
 .../src/components/message/MessageList.vue     | 18 +++++++++++-------
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/renderer/src/components/ChatView.vue b/src/renderer/src/components/ChatView.vue
index c9b9922d2..81eb679e8 100644
--- a/src/renderer/src/components/ChatView.vue
+++ b/src/renderer/src/components/ChatView.vue
@@ -21,7 +21,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch, computed } from 'vue'
+import { ref, onMounted, onUnmounted, watch, computed, nextTick } from 'vue'
 import MessageList from './message/MessageList.vue'
 import ChatInput from './ChatInput.vue'
 import { useRoute } from 'vue-router'
@@ -67,6 +67,12 @@ onMounted(async () => {
 
   window.electron.ipcRenderer.on(STREAM_EVENTS.END, (_, msg) => {
     chatStore.handleStreamEnd(msg)
+    // 当用户没有主动向上滚动时才自动滚动到底部
+    nextTick(() => {
+      if (messageList.value && !messageList.value.aboveThreshold) {
+        scrollToBottom(false)
+      }
+    })
     setTimeout(() => {
       chatInput.value?.restoreFocus()
     }, 200)
diff --git a/src/renderer/src/components/message/MessageList.vue b/src/renderer/src/components/message/MessageList.vue
index b99747948..58b0fc197 100644
--- a/src/renderer/src/components/message/MessageList.vue
+++ b/src/renderer/src/components/message/MessageList.vue
@@ -76,7 +76,7 @@
               variant="outline"
               size="icon"
               class="w-8 h-8 shrink-0 rounded-lg relative z-10"
-              @click="scrollToBottom"
+              @click="() => scrollToBottom(true)"
             >
               <Icon icon="lucide:arrow-down" class="w-5 h-5 text-muted-foreground" />
             </Button>
@@ -278,12 +278,14 @@ const handleCopyImage = async (
   }
 }
 
-const scrollToBottom = () => {
+const scrollToBottom = (smooth = false) => {
   nextTick(() => {
-    scrollAnchor.value?.scrollIntoView({
-      behavior: 'instant',
-      block: 'end'
-    })
+    if (scrollAnchor.value) {
+      scrollAnchor.value.scrollIntoView({
+        behavior: smooth ? 'smooth' : 'instant',
+        block: 'end'
+      })
+    }
   })
 }
 
@@ -328,7 +330,9 @@ onMounted(() => {
     () => {
       const lastMessage = props.messages[props.messages.length - 1]
       if (lastMessage?.status === 'pending' && !aboveThreshold.value) {
-        scrollToBottom()
+        nextTick(() => {
+          scrollToBottom()
+        })
       }
     }
   )