zoujing/YGChatCS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 长文本组件的调试

Browse Source
This commit is contained in:
zoujing
2026-03-26 00:10:53 +08:00
parent 00c58d47b9
commit e72531cfb7
4 changed files with 100 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/pages.json
View File

@@ -33,6 +33,16 @@
"navigationBarTextStyle": "black"
}
}
,
{
"path": "pages/long-answer/index",
"style": {
"navigationStyle": "custom",
"backgroundColor": "#FFFFFF",
"navigationBarBackgroundColor": "#FFFFFF",
"navigationBarTextStyle": "black"
}
}
],
"subPackages": [
{

84
src/pages/index/components/chat/ChatMainList/index.vue
View File

@@ -19,31 +19,31 @@
<template #content v-if="item.toolCall || item.componentName">
<AnswerComponent v-if="
item.componentName === CompName.longTextCard
" :answer-text="item.msg" />
" :answer-text="item.msg" :title="item.title" />
<QuickBookingComponent v-if="
item.toolCall.componentName === CompName.quickBookingCard
item.toolCall && item.toolCall.componentName === CompName.quickBookingCard
" />
<DiscoveryCardComponent v-else-if="
item.toolCall.componentName === CompName.discoveryCard
item.toolCall && item.toolCall.componentName === CompName.discoveryCard
" />
<CreateServiceOrder v-else-if="
item.toolCall.componentName === CompName.callServiceCard
item.toolCall && item.toolCall.componentName === CompName.callServiceCard
" :toolCall="item.toolCall" />
<OpenMapComponent v-else-if="
item.toolCall.componentName === CompName.openMapCard
item.toolCall && item.toolCall.componentName === CompName.openMapCard
" />
<Feedback v-else-if="
item.toolCall.componentName === CompName.feedbackCard
item.toolCall && item.toolCall.componentName === CompName.feedbackCard
" :toolCall="item.toolCall" />
<DetailCardCompontent v-else-if="
item.toolCall.componentName === CompName.pictureAndCommodityCard
item.toolCall && item.toolCall.componentName === CompName.pictureAndCommodityCard
" :toolCall="item.toolCall" />
<AddCarCrad v-else-if="
item.toolCall.componentName === CompName.enterLicensePlateCard
item.toolCall && item.toolCall.componentName === CompName.enterLicensePlateCard
" :toolCall="item.toolCall" />
<SurveyQuestionnaire v-else-if="
item.toolCall.componentName === CompName.callSurveyQuestionnaire
item.toolCall && item.toolCall.componentName === CompName.callSurveyQuestionnaire
" :toolCall="item.toolCall" />
</template>
@@ -473,25 +473,32 @@ const handleWebSocketMessage = (data) => {
return;
}
// 确保消息内容是字符串类型
if (data.content && typeof data.content !== "string") {
try {
data.content = JSON.stringify(data.content);
} catch (e) {
data.content = String(data.content);
}
}
// 优先使用 messageId 进行匹配
const msgId = data.messageId || data.id || data.msgId || data.replyMessageId;
let aiMsgIndex = -1;
if (msgId && pendingMap.has(msgId)) {
aiMsgIndex = pendingMap.get(msgId);
} else if (!msgId && currentSessionMessageId && pendingMap.has(currentSessionMessageId)) {
// 服务端未返回 messageId 的场景：优先使用当前会话的 messageId 映射
if (currentSessionMessageId && pendingMap.has(currentSessionMessageId)) {
aiMsgIndex = pendingMap.get(currentSessionMessageId);
if (aiMsgIndex >= 0 && aiMsgIndex < chatMsgList.value.length) {
const item = chatMsgList.value[aiMsgIndex];
if (item && item.msgType === MessageRole.AI &&
item.replyMessageId.length > 0 && data.replyMessageId &&
item.replyMessageId !== data.replyMessageId) {
// 已经存在对应的AI消息项，继续使用
const aiMsg = {
msgId: `msg_${chatMsgList.value.length}`,
msgType: MessageRole.AI,
msg: "",
isLoading: false,
messageId: currentSessionMessageId,
replyMessageId: '',
componentName: "",
title: "",
finish: false,
};
chatMsgList.value.push(aiMsg);
aiMsgIndex = chatMsgList.value.length - 1;
}
}
} else {
// 向后搜索最近的 AI 消息
// 向后搜索最近的 AI 消息（回退逻辑）
for (let i = chatMsgList.value.length - 1; i >= 0; i--) {
if (chatMsgList.value[i] && chatMsgList.value[i].msgType === MessageRole.AI) {
aiMsgIndex = i;
@@ -504,6 +511,20 @@ const handleWebSocketMessage = (data) => {
}
}
// replyMessageId
if(data.replyMessageId) {
chatMsgList.value[aiMsgIndex].replyMessageId = data.replyMessageId;
}
// 确保消息内容是字符串类型
if (data.content && typeof data.content !== "string") {
try {
data.content = JSON.stringify(data.content);
} catch (e) {
data.content = String(data.content);
}
}
// 直接拼接内容到对应 AI 消息
if (data.content) {
if (chatMsgList.value[aiMsgIndex].isLoading) {
@@ -522,15 +543,18 @@ const handleWebSocketMessage = (data) => {
chatMsgList.value[aiMsgIndex].finish = true;
const msg = chatMsgList.value[aiMsgIndex].msg;
if (!msg || chatMsgList.value[aiMsgIndex].isLoading) {
chatMsgList.value[aiMsgIndex].msg = "未获取到内容，请重试";
chatMsgList.value[aiMsgIndex].isLoading = false;
if (data.toolCall) {
// 如果服务器返回了 componentName 或 toolCall，应保留空消息以供组件渲染；否则显示错误占位
if (data.toolCall || data.componentName) {
chatMsgList.value[aiMsgIndex].msg = "";
} else {
chatMsgList.value[aiMsgIndex].msg = "未获取到内容，请重试";
}
chatMsgList.value[aiMsgIndex].isLoading = false;
}
// 处理组件调用
if (data.componentName) {
chatMsgList.value[aiMsgIndex].title = data.content;
chatMsgList.value[aiMsgIndex].componentName = data.componentName;
}
@@ -558,6 +582,8 @@ const handleWebSocketMessage = (data) => {
isSessionActive.value = false;
// 清理当前会话的 messageId，避免保留陈旧 id
resetMessageState();
nextTick(() => scrollToBottom());
}
};
@@ -763,7 +789,9 @@ const sendChat = async (message, isInstruct = false) => {
msg: "加载中",
isLoading: true,
messageId: currentSessionMessageId,
replyMessageId: '',
componentName: "",
title: "",
finish: false,
};
chatMsgList.value.push(aiMsg);

21
src/pages/index/components/module/AnswerComponent/index.vue
View File

@@ -5,15 +5,15 @@
<view class="flex flex-col p-16 border-box">
<view class="flex flex-row flex-items-center justify-center">
<uni-icons class="icon-active" type="fire-filled" size="18" color="opacity" />
<text class="font-size-16 font-500 text-color-900 ml-6">游玩划重点</text>
<text class="font-size-16 font-500 text-color-900 ml-6">{{ title }}</text>
</view>
<!-- 文字内容，最多显示3行 -->
<view class="answer-content font-size-12 font-color-600 mt-8">
{{ answerText }}
<ChatMarkdown :text="answerText" />
</view>
<!-- 超过3行时显示...提示 -->
<view class="fles flex-row mt-8" v-if="isOverflow">
<text class="font-size-12 font-400 theme-color-500 mr-4">查看完整攻略</text>
<view class="fles flex-row mt-8" v-if="isOverflow" @click="lookDetailAction">
<text class="font-size-12 font-400 theme-color-500 mr-4">查看详情</text>
<uni-icons class="icon-active" type="right" size="14" color="opacity"></uni-icons>
</view>
</view>
@@ -22,12 +22,17 @@
</template>
<script setup>
import { ref } from 'vue'
import { ref, defineProps } from 'vue'
import ChatMarkdown from "../../chat/ChatMarkdown/index.vue";
const isOverflow = ref(true)
// 直接根据文字长度判断，超过约100个字符认为会溢出（约3行）
const props = defineProps({
title: {
type: String,
default: "",
},
answerText: {
type: String,
default: "",
@@ -37,6 +42,12 @@ const props = defineProps({
// 简单判断：12号字体3行约100个字符
isOverflow.value = props.answerText.length > 100
const lookDetailAction = () => {
uni.navigateTo({
url: `/pages/long-answer/index?message=${props.answerText}`,
});
}
</script>
<style scoped lang="scss">

18
src/pages/long-answer/index.vue Normal file
View File

@@ -0,0 +1,18 @@
<template>
<ChatMarkdown :text="answerText" />
</template>
<script setup>
import ChatMarkdown from "../index/components/chat/ChatMarkdown/index.vue";
const props = defineProps({
answerText: {
type: String,
default: "",
}
});
onLoad(({ message = "" }) => {
props.answerText = message;
});
</script>