fix(stage-ui): improved the policy and strategy for chat history auto scrolling

Close #1568

Co-authored-by-agent: Codex <267193182+codex@users.noreply.github.com>

Author: nekomeowww

packages/stage-ui/src/components/scenarios/chat/components/history.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import type { ChatAssistantMessage, ChatHistoryItem, ContextMessage } from '../../../../types/chat'
 
-import { computed, onMounted, provide, ref, watch } from 'vue'
+import { computed, provide, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import ChatAssistantItem from './assistant-item.vue'
 import ChatErrorItem from './error-item.vue'
 import ChatUserItem from './user-item.vue'
 
+import { useChatHistoryScroll } from '../composables/use-chat-history-scroll'
 import { chatScrollContainerKey } from '../constants'
 import { getChatHistoryItemKey } from '../utils'
 
@@ -39,21 +40,6 @@ const labels = computed(() => ({
   error: props.errorLabel ?? t('stage.chat.message.character-name.core-system'),
 }))
 
-function scrollToBottom() {
-  requestAnimationFrame(() => {
-    requestAnimationFrame(() => {
-      if (!chatHistoryRef.value)
-        return
-
-      chatHistoryRef.value.scrollTop = chatHistoryRef.value.scrollHeight
-    })
-  })
-}
-
-watch([() => props.messages, () => props.streamingMessage], scrollToBottom, { deep: true, flush: 'post' })
-watch(() => props.sending, scrollToBottom, { flush: 'post' })
-onMounted(scrollToBottom)
-
 const streaming = computed<ChatAssistantMessage & { context?: ContextMessage } & { createdAt?: number }>(() => props.streamingMessage ?? { role: 'assistant', content: '', slices: [], tool_results: [], createdAt: Date.now() })
 const showStreamingPlaceholder = computed(() => (streaming.value.slices?.length ?? 0) === 0 && !streaming.value.content)
 const streamingTs = computed(() => streaming.value?.createdAt)
@@ -79,6 +65,12 @@ const renderMessages = computed<ChatHistoryItem[]>(() => {
   return [...props.messages, streaming.value]
 })
 
+useChatHistoryScroll({
+  containerRef: chatHistoryRef,
+  messages: renderMessages,
+  getKey: getChatHistoryItemKey,
+})
+
 function emitCopyMessage(message: ChatHistoryItem, index: number) {
   emit('copyMessage', {
     message,
@@ -99,30 +91,31 @@ function emitDeleteMessage(message: ChatHistoryItem, index: number) {
 <template>
   <div ref="chatHistoryRef" v-auto-animate flex="~ col" relative h-full w-full overflow-y-auto rounded-xl px="<sm:2" py="<sm:2" :class="variant === 'mobile' ? 'gap-1' : 'gap-2'">
     <template v-for="(message, index) in renderMessages" :key="getChatHistoryItemKey(message, index)">
-      <div v-if="message.role === 'error'">
+      <div
+        :data-chat-message-index="index"
+        :data-chat-message-key="String(getChatHistoryItemKey(message, index))"
+        :data-chat-message-role="message.role"
+      >
         <ChatErrorItem
+          v-if="message.role === 'error'"
           :message="message"
           :label="labels.error"
           :show-placeholder="sending && index === renderMessages.length - 1"
           :variant="variant"
           @copy="emitCopyMessage(message, index)"
           @delete="emitDeleteMessage(message, index)"
         />
-      </div>
-
-      <div v-else-if="message.role === 'assistant'">
         <ChatAssistantItem
+          v-else-if="message.role === 'assistant'"
           :message="message"
           :label="labels.assistant"
           :show-placeholder="shouldShowPlaceholder(message) && showStreamingPlaceholder"
           :variant="variant"
           @copy="emitCopyMessage(message, index)"
           @delete="emitDeleteMessage(message, index)"
         />
-      </div>
-
-      <div v-else-if="message.role === 'user'">
         <ChatUserItem
+          v-else-if="message.role === 'user'"
           :message="message"
           :label="labels.user"
           :variant="variant"