WJB
/
ai-manus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

解决消息体窗口抖动

This commit is contained in:
WangJing 2025-07-29 17:57:22 +08:00
parent 6b0b97d0a6
commit acaf8c3086
1 changed files with 14 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
chat-client/src/views/chatweb/components/ChatBox.vue
View File

@ -385,6 +385,7 @@ import VabChart from '@/plugins/VabChart/index.vue'
import { sendChatMessage, type ChatMessageResponse, type ChatMessageSendRequest, stopMessagesStream, getFilePathList, type TraceFile, type TraceData } from '@/api/chat' import { sendChatMessage, type ChatMessageResponse, type ChatMessageSendRequest, stopMessagesStream, getFilePathList, type TraceFile, type TraceData } from '@/api/chat'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { throttle } from 'lodash'
const { t, locale } = useI18n() const { t, locale } = useI18n()
// Props 定义 // Props 定义
@ -800,8 +801,10 @@ const sendMessage = async () => {
currentTaskId.value = data.taskId currentTaskId.value = data.taskId
} }
messages.value = [...messages.value] // messages.value = [...messages.value]
await scrollToBottom() // botMessage.text += data.answer
// await scrollToBottom()
throttledScrollToBottom()
} }
} catch (e) { } catch (e) {
console.error('解析错误:', e) console.error('解析错误:', e)
@ -821,7 +824,7 @@ const sendMessage = async () => {
const formatted = await formatAnswer(parseThink(botMessage.text).answer) const formatted = await formatAnswer(parseThink(botMessage.text).answer)
botMessage.formattedText = formatted.html botMessage.formattedText = formatted.html
botMessage.echarts = formatted.echarts botMessage.echarts = formatted.echarts
messages.value = [...messages.value] // messages.value = [...messages.value]
if (data.conversationId) { if (data.conversationId) {
newConversationId = data.conversationId newConversationId = data.conversationId
@ -849,7 +852,7 @@ const sendMessage = async () => {
botMessage.sources = data botMessage.sources = data
botMessage.conversationId = newConversationId botMessage.conversationId = newConversationId
botMessage.messageId = newMessageId botMessage.messageId = newMessageId
messages.value = [...messages.value] // messages.value = [...messages.value]
} }
} catch (error) { } catch (error) {
console.log('获取文件来源失败:', error) console.log('获取文件来源失败:', error)
@ -893,6 +896,10 @@ const scrollToBottom = async () => {
} }
} }
const throttledScrollToBottom = throttle(() => {
scrollToBottom()
}, 150)
// 解析方法 // 解析方法
const parseThink = (text: string) => { const parseThink = (text: string) => {
const thinkRegex = /<think>(.*?)<\/think>/s const thinkRegex = /<think>(.*?)<\/think>/s
@ -1280,7 +1287,7 @@ const regenerateResponse = async (userQuery: string) => {
currentTaskId.value = data.taskId currentTaskId.value = data.taskId
} }
messages.value = [...messages.value] // messages.value = [...messages.value]
await scrollToBottom() await scrollToBottom()
} }
} catch (e) { } catch (e) {
@ -1301,7 +1308,7 @@ const regenerateResponse = async (userQuery: string) => {
const formatted = await formatAnswer(parseThink(botMessage.text).answer) const formatted = await formatAnswer(parseThink(botMessage.text).answer)
botMessage.formattedText = formatted.html botMessage.formattedText = formatted.html
botMessage.echarts = formatted.echarts botMessage.echarts = formatted.echarts
messages.value = [...messages.value] // messages.value = [...messages.value]
if (data.conversationId) { if (data.conversationId) {
newConversationId = data.conversationId newConversationId = data.conversationId
@ -1329,7 +1336,7 @@ const regenerateResponse = async (userQuery: string) => {
botMessage.sources = data botMessage.sources = data
botMessage.conversationId = newConversationId botMessage.conversationId = newConversationId
botMessage.messageId = newMessageId botMessage.messageId = newMessageId
messages.value = [...messages.value] // messages.value = [...messages.value]
} }
} catch (error) { } catch (error) {
console.log('获取文件来源失败:', error) console.log('获取文件来源失败:', error)