chore:H5的智能客服聊天正常
This commit is contained in:
@@ -496,13 +496,13 @@ export default {
|
|||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
messages: {
|
messages: {
|
||||||
handler() {
|
handler(newVal, oldVal) {
|
||||||
this.$nextTick(() => {
|
// 仅在新增消息时触发滚动,流式响应时由手动控制
|
||||||
// 仅当不是加载历史时,执行滚底
|
if (!this.isLoadingHistory && !this.isStreaming && newVal.length !== oldVal.length) {
|
||||||
if (!this.isLoadingHistory) {
|
this.$nextTick(() => {
|
||||||
this.scrollToBottom()
|
this.scrollToBottom()
|
||||||
}
|
})
|
||||||
})
|
}
|
||||||
},
|
},
|
||||||
deep: true
|
deep: true
|
||||||
}
|
}
|
||||||
@@ -901,6 +901,11 @@ async loadChatHistoryIfExist() {
|
|||||||
this.messages = this.messages.filter(msg => msg.type !== 'loading');
|
this.messages = this.messages.filter(msg => msg.type !== 'loading');
|
||||||
this.shouldScrollToBottom = true;
|
this.shouldScrollToBottom = true;
|
||||||
this.messages.push(streamMessage);
|
this.messages.push(streamMessage);
|
||||||
|
|
||||||
|
// 添加消息后立即滚动一次
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.scrollToBottom();
|
||||||
|
});
|
||||||
|
|
||||||
try {
|
try {
|
||||||
// #ifdef H5
|
// #ifdef H5
|
||||||
@@ -908,10 +913,8 @@ async loadChatHistoryIfExist() {
|
|||||||
await aiService.sendHttpStream(
|
await aiService.sendHttpStream(
|
||||||
userMessage,
|
userMessage,
|
||||||
(chunk) => {
|
(chunk) => {
|
||||||
// 实时更新内容
|
// 实时更新内容(不频繁滚动)
|
||||||
streamMessage.content += chunk;
|
streamMessage.content += chunk;
|
||||||
this.$forceUpdate(); // 强制更新视图
|
|
||||||
this.scrollToBottom(); // 滚动到底部
|
|
||||||
},
|
},
|
||||||
(completeResult) => {
|
(completeResult) => {
|
||||||
// 流结束回调
|
// 流结束回调
|
||||||
@@ -930,30 +933,31 @@ async loadChatHistoryIfExist() {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// 保存会话 ID
|
// 保存会话 ID
|
||||||
if (convId) {
|
if (convId) {
|
||||||
this.currentConversationId = convId;
|
this.currentConversationId = convId;
|
||||||
aiService.setConversationId(convId);
|
aiService.setConversationId(convId);
|
||||||
this.saveConversationIdToLocal(convId);
|
this.saveConversationIdToLocal(convId);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 流结束后再滚动到底部
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.scrollToBottom();
|
||||||
|
});
|
||||||
|
|
||||||
// 触发事件
|
// 触发事件
|
||||||
this.$emit('ai-response', streamMessage);
|
this.$emit('ai-response', streamMessage);
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
// #endif
|
// #endif
|
||||||
|
|
||||||
// #ifdef MP-WEIXIN
|
// #ifdef MP-WEIXIN
|
||||||
// ===== 微信小程序: 使用 WebSocket =====
|
// ===== 微信小程序: 使用 WebSocket =====
|
||||||
await aiService.sendStreamMessage(
|
await aiService.sendStreamMessage(
|
||||||
userMessage,
|
userMessage,
|
||||||
(chunk) => {
|
(chunk) => {
|
||||||
// 实时更新内容
|
// 实时更新内容(不频繁滚动)
|
||||||
streamMessage.content += chunk;
|
streamMessage.content += chunk;
|
||||||
this.$forceUpdate();
|
|
||||||
this.scrollToBottom(); // 滚动到底部
|
|
||||||
},
|
},
|
||||||
(completeResult) => {
|
(completeResult) => {
|
||||||
// 流结束回调
|
// 流结束回调
|
||||||
@@ -968,14 +972,17 @@ async loadChatHistoryIfExist() {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// 保存会话 ID
|
// 保存会话 ID
|
||||||
if (convId) {
|
if (convId) {
|
||||||
this.currentConversationId = convId;
|
this.currentConversationId = convId;
|
||||||
aiService.setConversationId(convId);
|
aiService.setConversationId(convId);
|
||||||
this.saveConversationIdToLocal(convId);
|
this.saveConversationIdToLocal(convId);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 流结束后再滚动到底部
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.scrollToBottom();
|
||||||
|
});
|
||||||
|
|
||||||
// 触发事件
|
// 触发事件
|
||||||
this.$emit('ai-response', streamMessage);
|
this.$emit('ai-response', streamMessage);
|
||||||
@@ -1080,23 +1087,18 @@ async loadChatHistoryIfExist() {
|
|||||||
const lastMessage = filteredMessages[filteredMessages.length - 1];
|
const lastMessage = filteredMessages[filteredMessages.length - 1];
|
||||||
const lastIndex = this.messages.indexOf(lastMessage);
|
const lastIndex = this.messages.indexOf(lastMessage);
|
||||||
this.scrollIntoViewId = `msg-${lastMessage.id || lastMessage.timestamp}-${lastIndex}`;
|
this.scrollIntoViewId = `msg-${lastMessage.id || lastMessage.timestamp}-${lastIndex}`;
|
||||||
this.$nextTick(() => {
|
// 保持 scrollIntoViewId 不清除,避免频繁切换
|
||||||
setTimeout(() => {
|
|
||||||
this.scrollIntoViewId = null;
|
|
||||||
}, 100);
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// #endif
|
// #endif
|
||||||
|
|
||||||
// #ifdef MP-WEIXIN
|
// #ifdef MP-WEIXIN
|
||||||
// 先重置为0,再设置大值,确保视图更新
|
// 直接设置大值滚动到底部,不要重置为0
|
||||||
this.scrollTop = 0;
|
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.scrollTop = 9999999;
|
this.scrollTop = 9999999;
|
||||||
});
|
});
|
||||||
// #endif
|
// #endif
|
||||||
}, 50);
|
}, 100);
|
||||||
},
|
},
|
||||||
|
|
||||||
// 加载更多历史消息
|
// 加载更多历史消息
|
||||||
|
|||||||
Reference in New Issue
Block a user