feat: 长文本组件调整
This commit is contained in:
@@ -26,7 +26,7 @@ export const CompName = {
|
|||||||
// 打开地图卡片
|
// 打开地图卡片
|
||||||
openMapCard: "openMapCard",
|
openMapCard: "openMapCard",
|
||||||
// 回答卡片
|
// 回答卡片
|
||||||
answerCard: "answerCard",
|
longTextCard: "longTextCard",
|
||||||
};
|
};
|
||||||
|
|
||||||
/// 发送的指令类型
|
/// 发送的指令类型
|
||||||
|
|||||||
@@ -15,9 +15,15 @@
|
|||||||
<view class="area-msg-list-content" v-for="item in chatMsgList" :key="item.msgId" :id="item.msgId">
|
<view class="area-msg-list-content" v-for="item in chatMsgList" :key="item.msgId" :id="item.msgId">
|
||||||
<template v-if="item.msgType === MessageRole.AI">
|
<template v-if="item.msgType === MessageRole.AI">
|
||||||
<ChatCardAI class="flex flex-justify-start" :key="`ai-${item.msgId}-${item.msg ? item.msg.length : 0}`"
|
<ChatCardAI class="flex flex-justify-start" :key="`ai-${item.msgId}-${item.msg ? item.msg.length : 0}`"
|
||||||
:text="item.msg || ''" :isLoading="item.isLoading">
|
:text="item.finish && item.componentName ? '' : item.msg || ''" :isLoading="item.isLoading">
|
||||||
<template #content v-if="item.toolCall">
|
<template #content v-if="item.toolCall || item.componentName">
|
||||||
<QuickBookingComponent v-if="item.toolCall.componentName === CompName.quickBookingCard" />
|
<AnswerComponent v-if="
|
||||||
|
item.componentName === CompName.longTextCard
|
||||||
|
" :answer-text="item.msg" />
|
||||||
|
|
||||||
|
<QuickBookingComponent v-if="
|
||||||
|
item.toolCall.componentName === CompName.quickBookingCard
|
||||||
|
" />
|
||||||
<DiscoveryCardComponent v-else-if="
|
<DiscoveryCardComponent v-else-if="
|
||||||
item.toolCall.componentName === CompName.discoveryCard
|
item.toolCall.componentName === CompName.discoveryCard
|
||||||
" />
|
" />
|
||||||
@@ -27,15 +33,11 @@
|
|||||||
<OpenMapComponent v-else-if="
|
<OpenMapComponent v-else-if="
|
||||||
item.toolCall.componentName === CompName.openMapCard
|
item.toolCall.componentName === CompName.openMapCard
|
||||||
" />
|
" />
|
||||||
<AnswerComponent v-else-if="
|
|
||||||
item.toolCall.componentName === CompName.answerCard
|
|
||||||
" />
|
|
||||||
<Feedback v-else-if="
|
<Feedback v-else-if="
|
||||||
item.toolCall.componentName === CompName.feedbackCard
|
item.toolCall.componentName === CompName.feedbackCard
|
||||||
" :toolCall="item.toolCall" />
|
" :toolCall="item.toolCall" />
|
||||||
<DetailCardCompontent v-else-if="
|
<DetailCardCompontent v-else-if="
|
||||||
item.toolCall.componentName ===
|
item.toolCall.componentName === CompName.pictureAndCommodityCard
|
||||||
CompName.pictureAndCommodityCard
|
|
||||||
" :toolCall="item.toolCall" />
|
" :toolCall="item.toolCall" />
|
||||||
<AddCarCrad v-else-if="
|
<AddCarCrad v-else-if="
|
||||||
item.toolCall.componentName === CompName.enterLicensePlateCard
|
item.toolCall.componentName === CompName.enterLicensePlateCard
|
||||||
@@ -481,7 +483,7 @@ const handleWebSocketMessage = (data) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 优先使用 messageId 进行匹配
|
// 优先使用 messageId 进行匹配
|
||||||
const msgId = data.messageId || data.id || data.msgId;
|
const msgId = data.messageId || data.id || data.msgId || data.replyMessageId;
|
||||||
let aiMsgIndex = -1;
|
let aiMsgIndex = -1;
|
||||||
if (msgId && pendingMap.has(msgId)) {
|
if (msgId && pendingMap.has(msgId)) {
|
||||||
aiMsgIndex = pendingMap.get(msgId);
|
aiMsgIndex = pendingMap.get(msgId);
|
||||||
@@ -517,6 +519,7 @@ const handleWebSocketMessage = (data) => {
|
|||||||
|
|
||||||
// 处理完成状态
|
// 处理完成状态
|
||||||
if (data.finish) {
|
if (data.finish) {
|
||||||
|
chatMsgList.value[aiMsgIndex].finish = true;
|
||||||
const msg = chatMsgList.value[aiMsgIndex].msg;
|
const msg = chatMsgList.value[aiMsgIndex].msg;
|
||||||
if (!msg || chatMsgList.value[aiMsgIndex].isLoading) {
|
if (!msg || chatMsgList.value[aiMsgIndex].isLoading) {
|
||||||
chatMsgList.value[aiMsgIndex].msg = "未获取到内容,请重试";
|
chatMsgList.value[aiMsgIndex].msg = "未获取到内容,请重试";
|
||||||
@@ -526,6 +529,11 @@ const handleWebSocketMessage = (data) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 处理组件调用
|
||||||
|
if (data.componentName) {
|
||||||
|
chatMsgList.value[aiMsgIndex].componentName = data.componentName;
|
||||||
|
}
|
||||||
|
|
||||||
// 处理toolCall
|
// 处理toolCall
|
||||||
if (data.toolCall) {
|
if (data.toolCall) {
|
||||||
chatMsgList.value[aiMsgIndex].toolCall = data.toolCall;
|
chatMsgList.value[aiMsgIndex].toolCall = data.toolCall;
|
||||||
@@ -755,6 +763,8 @@ const sendChat = async (message, isInstruct = false) => {
|
|||||||
msg: "加载中",
|
msg: "加载中",
|
||||||
isLoading: true,
|
isLoading: true,
|
||||||
messageId: currentSessionMessageId,
|
messageId: currentSessionMessageId,
|
||||||
|
componentName: "",
|
||||||
|
finish: false,
|
||||||
};
|
};
|
||||||
chatMsgList.value.push(aiMsg);
|
chatMsgList.value.push(aiMsg);
|
||||||
// 添加AI消息后滚动到底部
|
// 添加AI消息后滚动到底部
|
||||||
|
|||||||
@@ -27,10 +27,15 @@ import { ref } from 'vue'
|
|||||||
const isOverflow = ref(true)
|
const isOverflow = ref(true)
|
||||||
|
|
||||||
// 直接根据文字长度判断,超过约100个字符认为会溢出(约3行)
|
// 直接根据文字长度判断,超过约100个字符认为会溢出(约3行)
|
||||||
const answerText = '建议一定要去「东华门」看角楼夕阳,那里是摄影师的私藏机位。御花园目前的玉兰花开得正好,别忘了抬头看看红墙上的猫。建议一定要去「东华门」看角楼夕阳,那里是摄影师的私藏机位。御花园目前的玉兰花开得正好,别忘了抬头看看红墙上的猫。'
|
const props = defineProps({
|
||||||
|
answerText: {
|
||||||
|
type: String,
|
||||||
|
default: "",
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
// 简单判断:12号字体3行约100个字符
|
// 简单判断:12号字体3行约100个字符
|
||||||
isOverflow.value = answerText.length > 100
|
isOverflow.value = props.answerText.length > 100
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -313,7 +313,7 @@ export default {
|
|||||||
border:none;
|
border:none;
|
||||||
text-align:center;
|
text-align:center;
|
||||||
background-image:linear-gradient(to right,rgba(248,57,41,0),${themeColor},rgba(248,57,41,0));
|
background-image:linear-gradient(to right,rgba(248,57,41,0),${themeColor},rgba(248,57,41,0));
|
||||||
margin:4px 0;
|
margin:10px 0;
|
||||||
`,
|
`,
|
||||||
// 表格
|
// 表格
|
||||||
table: `
|
table: `
|
||||||
|
|||||||
@@ -215,7 +215,7 @@ export class WebSocketManager {
|
|||||||
if (typeof messageData === "string") {
|
if (typeof messageData === "string") {
|
||||||
// 处理心跳响应
|
// 处理心跳响应
|
||||||
if (MessageUtils.isPongMessage(messageData)) {
|
if (MessageUtils.isPongMessage(messageData)) {
|
||||||
console.log("收到心跳响应:", messageData);
|
// console.log("收到心跳响应:", messageData);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -399,7 +399,7 @@ export class WebSocketManager {
|
|||||||
};
|
};
|
||||||
|
|
||||||
this.sendMessage(heartbeatMessage);
|
this.sendMessage(heartbeatMessage);
|
||||||
console.log("心跳消息已发送:", heartbeatMessage);
|
// console.log("心跳消息已发送:", heartbeatMessage);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("发送心跳失败:", error);
|
console.error("发送心跳失败:", error);
|
||||||
this.handleError(error);
|
this.handleError(error);
|
||||||
|
|||||||
Reference in New Issue
Block a user