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