chore:用户提问和客服回答可以看见了
This commit is contained in:
@@ -1,12 +1,23 @@
|
||||
<template>
|
||||
<view class="ai-chat-container">
|
||||
<!-- 聊天消息列表 -->
|
||||
<!-- #ifdef H5 -->
|
||||
<scroll-view
|
||||
class="chat-messages"
|
||||
scroll-y
|
||||
:scroll-into-view="scrollIntoViewId"
|
||||
:scroll-with-animation="true"
|
||||
@scroll="onScroll">
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<scroll-view
|
||||
class="chat-messages"
|
||||
scroll-y
|
||||
:scroll-top="scrollTop"
|
||||
@scroll="onScroll"
|
||||
:scroll-with-animation="false">
|
||||
:scroll-with-animation="true"
|
||||
@scroll="onScroll">
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- 加载更多历史消息 -->
|
||||
<view class="load-more" v-if="hasMoreHistory">
|
||||
@@ -17,6 +28,7 @@
|
||||
<view
|
||||
v-for="(message, index) in messages.filter(msg => msg.content && msg.content.trim() !== '')"
|
||||
:key="`msg-${message.id || message.timestamp}-${index}`"
|
||||
:id="`msg-${message.id || message.timestamp}-${index}`"
|
||||
class="message-item"
|
||||
:class="[message.role, { 'first-message': index === 0 }]">
|
||||
|
||||
@@ -166,7 +178,13 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #ifdef H5 -->
|
||||
</scroll-view>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
</scroll-view>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- 输入区域 -->
|
||||
<view class="input-area">
|
||||
@@ -380,6 +398,7 @@ export default {
|
||||
messages: [],
|
||||
inputText: '',
|
||||
scrollTop: 0,
|
||||
scrollIntoViewId: null,
|
||||
hasMoreHistory: false,
|
||||
loadingText: '加载更多历史消息',
|
||||
voiceInputing: false,
|
||||
@@ -466,11 +485,9 @@ export default {
|
||||
messages: {
|
||||
handler() {
|
||||
this.$nextTick(() => {
|
||||
// 仅当不是加载历史、且需要滚底时,才执行滚底
|
||||
if (!this.isLoadingHistory && this.shouldScrollToBottom) {
|
||||
// 仅当不是加载历史时,执行滚底
|
||||
if (!this.isLoadingHistory) {
|
||||
this.scrollToBottom()
|
||||
// 滚底后重置状态,避免重复触发
|
||||
this.shouldScrollToBottom = false
|
||||
}
|
||||
})
|
||||
},
|
||||
@@ -878,10 +895,11 @@ async loadChatHistoryIfExist() {
|
||||
await aiService.sendHttpStream(
|
||||
userMessage,
|
||||
(chunk) => {
|
||||
// 实时更新内容
|
||||
streamMessage.content += chunk;
|
||||
this.$forceUpdate(); // 强制更新视图
|
||||
},
|
||||
// 实时更新内容
|
||||
streamMessage.content += chunk;
|
||||
this.$forceUpdate(); // 强制更新视图
|
||||
this.scrollToBottom(); // 滚动到底部
|
||||
},
|
||||
(completeResult) => {
|
||||
// 流结束回调
|
||||
let convId = '';
|
||||
@@ -923,10 +941,11 @@ async loadChatHistoryIfExist() {
|
||||
await aiService.sendStreamMessage(
|
||||
userMessage,
|
||||
(chunk) => {
|
||||
// 实时更新内容
|
||||
streamMessage.content += chunk;
|
||||
this.$forceUpdate();
|
||||
},
|
||||
// 实时更新内容
|
||||
streamMessage.content += chunk;
|
||||
this.$forceUpdate();
|
||||
this.scrollToBottom(); // 滚动到底部
|
||||
},
|
||||
(completeResult) => {
|
||||
// 流结束回调
|
||||
let convId = completeResult?.conversation_id || '';
|
||||
@@ -1045,9 +1064,34 @@ async loadChatHistoryIfExist() {
|
||||
|
||||
// 滚动到底部
|
||||
scrollToBottom() {
|
||||
setTimeout(() => {
|
||||
this.scrollTop = 999999
|
||||
}, 100)
|
||||
if (this.scrollTimer) {
|
||||
clearTimeout(this.scrollTimer);
|
||||
}
|
||||
this.scrollTimer = setTimeout(() => {
|
||||
// #ifdef H5
|
||||
if (this.messages.length > 0) {
|
||||
const filteredMessages = this.messages.filter(msg => msg.content && msg.content.trim() !== '');
|
||||
if (filteredMessages.length > 0) {
|
||||
const lastMessage = filteredMessages[filteredMessages.length - 1];
|
||||
const lastIndex = this.messages.indexOf(lastMessage);
|
||||
this.scrollIntoViewId = `msg-${lastMessage.id || lastMessage.timestamp}-${lastIndex}`;
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.scrollIntoViewId = null;
|
||||
}, 100);
|
||||
});
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
// 先重置为0,再设置大值,确保视图更新
|
||||
this.scrollTop = 0;
|
||||
this.$nextTick(() => {
|
||||
this.scrollTop = 9999999;
|
||||
});
|
||||
// #endif
|
||||
}, 50);
|
||||
},
|
||||
|
||||
// 加载更多历史消息
|
||||
|
||||
Reference in New Issue
Block a user