From 5c5c54eff5c014846bc9b9e3ebc47177d1465bb8 Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期三, 25 十二月 2024 17:57:58 +0800
Subject: [PATCH] userInfoKey
---
src/components/chat/Chat.vue | 426 ++++++++++++++++++++++++++++++++--------------------
1 files changed, 260 insertions(+), 166 deletions(-)
diff --git a/src/components/chat/Chat.vue b/src/components/chat/Chat.vue
index 9280743..70de705 100644
--- a/src/components/chat/Chat.vue
+++ b/src/components/chat/Chat.vue
@@ -33,140 +33,170 @@
<div class="inline-flex flex-col" :class="{ 'w-full': item.role === RoleEnum.assistant }">
<div class="w-full">
<div class="rounded-[6px] p-4 leading-relaxed bg-white">
- <!-- #region ====================== 鎰忓浘鍒嗘瀽 ======================-->
- <div class="flex flex-col" v-if="item?.stepList?.length > 0">
- <!-- #region ====================== 鎰忓浘鍒嗘瀽 ======================-->
- <div class="flex items-center">
- <span class="mr-2">鎰忓浘鍒嗘瀽锛�</span>
- <div
- @click="toggleStepList(item)"
- class="cursor-pointer border border-gray-300 border-solid w-fit px-2 flex items-center space-x-2 rounded-lg hover:bg-gray-100 active:bg-gray-200"
- >
- <span>
- {{ toggleStepLabel(item) }}
- </span>
- <span class="ywifont" :class="{ 'ywicon-unfold': !item.stepIsShow, 'ywicon-fold': item.stepIsShow }"></span>
+ <!-- #region ====================== 娑堟伅鍐呭 ======================-->
+ <!-- <template v-if="item.content?.values"> -->
+ <!-- #region ====================== 鎶ラ敊淇℃伅 ======================-->
+ <div v-if="item.content?.errCode === ErrorCode.Message" class="flex-column w-full">
+ <p class="text-red-500">
+ {{ item.content.errMsg }}
+ </p>
+ <div class="mt-3 flex" v-if="showFixQuestion(item)">
+ <div class="text-gray-600 flex-0 mb-auto py-3">
+ {{ '鐚滀綘鎯抽棶锛�' }}
+ </div>
+ <div class="flex-auto space-x-2 space-y-1 inline-flex flex-wrap items-center">
+ <div
+ v-for="fixItem in item.content.origin?.sample_question"
+ :key="fixItem"
+ class="bg-gray-200 p-3 hover:bg-[#c5e0ff] hover:text-[#1c86ff] cursor-pointer rounded-lg first-of-type:ml-2 first-of-type:mt-1"
+ @click="fixQuestionClick(fixItem, item.content.origin)"
+ >
+ {{ fixItem }}
+ </div>
</div>
</div>
- <!-- #endregion -->
-
- <!-- #region ====================== 杩囩▼杈撳嚭 ======================-->
- <el-steps v-show="item.stepIsShow" class="mt-3" direction="vertical" :active="activeStep">
- <el-step
- :key="`template-${index}`"
- v-for="(subItem, index) in item.stepList"
- :title="subItem.title"
- :status="stepEnumMap[subItem.status]"
- >
- <template
- #icon
- v-if="index + 1 === item.stepList.length && isTalking && msgIndex === computedMessageList.length - 1"
- >
- <span class="ywifont ywicon-loading1 animate-spin !text-[24px]"></span>
- </template>
- <template #title>
- <span class="">
- {{ subItem.title }}
-
- <span v-if="subItem.ms" class="text-green-600">{{ `锛�${subItem.ms}锛塦 }}</span></span
- >
- </template>
-
- <template #description v-if="subItem?.subStep?.length > 0">
- <div class="my-1 flex flex-col gap-1 text-[14px]">
- <div
- :key="`${item.historyId}-${index + 1}-${multiChatIndex + 1}`"
- v-for="(multiChatItem, multiChatIndex) in subItem.subStep"
- >
- <component
- v-if="multiChatItem.type === MultiChatType.Select"
- :order="`${index + 1}-${multiChatIndex + 1}`"
- :item="multiChatItem"
- :is="multiChatTypeMapCom[multiChatItem.type]"
- :disabled="
- !(index + 1 === item.stepList.length && isTalking && msgIndex === computedMessageList.length - 1)
- "
- />
- <component
- v-else-if="multiChatItem.type === MultiChatType.Result"
- :is="answerTypeMapCom['summary']"
- :data="multiChatItem.data.content.values"
- :originData="multiChatItem.data"
- />
- <div v-else-if="multiChatItem.type === MultiChatType.Summary" class="ml-4 mt-5 pb-10">
- <div class="text-gray-600 mb-5">浣犲彲浠ョ户缁棶鎴戯細</div>
- <div class="space-y-2 inline-flex flex-col">
- <div
- v-for="item in multiChatItem.data.content.askMoreList"
- :key="item.history_id"
- class="bg-white p-3 hover:bg-[#c5e0ff] hover:text-[#1c86ff] cursor-pointer rounded-lg"
- @click="askMoreClick(item)"
- >
- {{ item.question }}
- </div>
- </div>
- </div>
- </div>
- </div>
- </template>
- </el-step>
- </el-steps>
- <!-- #endregion -->
</div>
<!-- #endregion -->
-
- <!-- #region ====================== 娑堟伅鍐呭 ======================-->
- <template v-if="item.content?.values">
- <!-- #region ====================== 鎶ラ敊淇℃伅 ======================-->
- <div v-if="item.content.errCode === ErrorCode.Message" class="flex-column w-full">
- <p class="text-red-500">
- {{ item.content.errMsg }}
- </p>
- <div class="mt-3 flex" v-if="showFixQuestion(item)">
- <div class="text-gray-600 flex-0 mb-auto py-3">
- {{ '鐚滀綘鎯抽棶锛�' }}
- </div>
- <div class="flex-auto space-x-2 space-y-1 inline-flex flex-wrap items-center">
- <div
- v-for="fixItem in item.content.origin?.sample_question"
- :key="fixItem"
- class="bg-gray-200 p-3 hover:bg-[#c5e0ff] hover:text-[#1c86ff] cursor-pointer rounded-lg first-of-type:ml-2 first-of-type:mt-1"
- @click="fixQuestionClick(fixItem, item.content.origin)"
- >
- {{ fixItem }}
+ <!-- #region ====================== 鍥炵瓟缁勪欢 ======================-->
+ <template v-else>
+ <template v-if="item.content.type === AnswerType.Report">
+ <div v-for="(num, index) in item?.stepGroup?.length" :key="index">
+ <!-- #region ====================== 鎰忓浘鍒嗘瀽 ======================-->
+ <div class="flex flex-col" v-if="item?.stepGroup?.[index]?.value?.length > 0">
+ <!-- #region ====================== 鎰忓浘鍒嗘瀽 ======================-->
+ <div class="flex items-center">
+ <span class="mr-2">鎰忓浘鍒嗘瀽锛�</span>
+ <div
+ @click="toggleStepList(item?.stepGroup?.[index])"
+ class="cursor-pointer border border-gray-300 border-solid w-fit px-2 flex items-center space-x-2 rounded-lg hover:bg-gray-100 active:bg-gray-200"
+ >
+ <span>
+ {{ toggleStepLabel(item?.stepGroup?.[index]) }}
+ </span>
+ <span
+ class="ywifont"
+ :class="{
+ 'ywicon-unfold': !item?.stepGroup?.[index].isShow,
+ 'ywicon-fold': item?.stepGroup?.[index].isShow,
+ }"
+ ></span>
+ </div>
</div>
+ <!-- #endregion -->
+
+ <!-- #region ====================== 杩囩▼杈撳嚭 ======================-->
+ <el-steps v-show="item?.stepGroup?.[index].isShow" class="mt-3" direction="vertical" :active="activeStep">
+ <el-step
+ :key="`template-${stepIndex}`"
+ v-for="(subItem, stepIndex) in item?.stepGroup?.[index].value"
+ :title="subItem.title"
+ :status="stepEnumMap[subItem.status]"
+ >
+ <template
+ #icon
+ v-if="
+ stepIndex + 1 === item?.stepGroup?.[index].value.length &&
+ isTalking &&
+ msgIndex === computedMessageList.length - 1
+ "
+ >
+ <span class="ywifont ywicon-loading1 animate-spin !text-[24px]"></span>
+ </template>
+ <template #title>
+ <span class="">
+ {{ subItem.title }}
+
+ <span v-if="subItem.ms" class="text-green-600">{{ `锛�${subItem.ms}锛塦 }}</span></span
+ >
+ </template>
+
+ <template #description v-if="subItem?.subStep?.length > 0">
+ <div class="my-1 flex flex-col gap-1 text-[14px]">
+ <div
+ :key="`${item.historyId}-${stepIndex + 1}-${multiChatIndex + 1}`"
+ v-for="(multiChatItem, multiChatIndex) in subItem.subStep"
+ >
+ <component
+ v-if="multiChatItem.type === MultiChatType.Select"
+ :order="`${stepIndex + 1}-${multiChatIndex + 1}`"
+ :item="multiChatItem"
+ :is="multiChatTypeMapCom[multiChatItem.type]"
+ :disabled="
+ !(
+ stepIndex + 1 === item?.stepGroup?.[index].value.length &&
+ isTalking &&
+ msgIndex === computedMessageList.length - 1
+ )
+ "
+ />
+ <component
+ v-else-if="multiChatItem.type === MultiChatType.Result"
+ :is="answerTypeMapCom['summary']"
+ :data="multiChatItem.data.content.values"
+ :originData="multiChatItem.data"
+ />
+ <div v-else-if="multiChatItem.type === MultiChatType.Summary" class="ml-4 mt-5 pb-10">
+ <div class="text-gray-600 mb-5">浣犲彲浠ョ户缁棶鎴戯細</div>
+ <div class="space-y-2 inline-flex flex-col">
+ <div
+ v-for="item in multiChatItem.data.content.askMoreList"
+ :key="item.history_id"
+ class="bg-white p-3 hover:bg-[#c5e0ff] hover:text-[#1c86ff] cursor-pointer rounded-lg"
+ @click="askMoreClick(item)"
+ >
+ {{ item.question }}
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </template>
+ </el-step>
+ </el-steps>
+ <!-- #endregion -->
+ </div>
+ <!-- #endregion -->
+
+ <component
+ v-if="item.content?.values?.[index]"
+ :reportIndex="index"
+ :conclusion="item.content.values[index].conclusion"
+ :is="answerTypeMapCom[item.content.values[index].content.type]"
+ :data="item.content.values[index].content.values"
+ :originData="item.content.values[index]"
+ :historyId="item.historyId"
+ :isTalking="isTalking && msgIndex === computedMessageList.length - 1"
+ />
+ </div>
+ </template>
+ <component
+ v-else
+ :historyId="item.historyId"
+ :conclusion="item.conclusion"
+ :is="answerTypeMapCom[item.content.type]"
+ :data="item.content.values"
+ :originData="item"
+ :isTalking="isTalking && msgIndex === computedMessageList.length - 1"
+ />
+ <div
+ v-if="item.role === RoleEnum.assistant && item.content.origin?.ext_call_list"
+ class="flex font-bold items-center mt-6"
+ >
+ <div class="flex-0 mb-auto -mr-4">鍏宠仈鍔熻兘锛�</div>
+ <div class="space-x-5 flex flex-wrap">
+ <div
+ v-for="callItem in item.content.origin?.ext_call_list"
+ :key="callItem.call_ext_id"
+ @click="relativeQueryClick(callItem)"
+ class="cursor-pointer hover:underline first-of-type:ml-5"
+ >
+ {{ callItem.question }}
</div>
</div>
</div>
- <!-- #endregion -->
- <!-- #region ====================== 鍥炵瓟缁勪欢 ======================-->
- <template v-else>
- <component
- :conclusion="item.conclusion"
- :is="answerTypeMapCom[item.content.type]"
- :data="item.content.values"
- :originData="item"
- :isTalking="isTalking && msgIndex === computedMessageList.length - 1"
- />
- <div
- v-if="item.role === RoleEnum.assistant && item.content.origin?.ext_call_list"
- class="flex font-bold items-center mt-6"
- >
- <div class="flex-0 mb-auto -mr-4">鍏宠仈鍔熻兘锛�</div>
- <div class="space-x-5 flex flex-wrap">
- <div
- v-for="callItem in item.content.origin?.ext_call_list"
- :key="callItem.call_ext_id"
- @click="relativeQueryClick(callItem)"
- class="cursor-pointer hover:underline first-of-type:ml-5"
- >
- {{ callItem.question }}
- </div>
- </div>
- </div>
- </template>
- <!-- #endregion -->
</template>
+ <!-- #endregion -->
+ <!-- </template> -->
<!-- #endregion -->
<!-- #region ====================== 闄勫姞鍐呭 ======================-->
@@ -380,12 +410,14 @@
};
};
-const parseContent = (res, reportIsShow = false) => {
+const parseContent = (res, reportIsShow = false, extraContent?) => {
if (!res) return null;
let content: ChatContent = {
type: AnswerType.Text,
values: '瑙ｆ瀽澶辫触锛�',
};
+
+ const curExtraContent = parseExtraContent(res);
switch (res.answer_type) {
case AnswerType.RecordSet:
@@ -409,21 +441,22 @@
break;
case AnswerType.Report:
+ content = {
+ type: AnswerType.Report,
+ values: (res?.reports ?? []).map((item) => ({
+ content: parseContent(item, reportIsShow, { origin: item }),
+ })),
+ };
+ break;
+
case AnswerType.Summary:
- if (res.answer_type === AnswerType.Report) {
- content = {
- type: AnswerType.Summary,
- values: res.reports?.[0]?.summary,
- };
- } else {
- content = {
- type: AnswerType.Summary,
- values: res.summary?.map((item) => {
- item.reportIsShow = reportIsShow;
- return item;
- }),
- };
- }
+ content = {
+ type: AnswerType.Summary,
+ values: res.summary?.map((item) => {
+ item.reportIsShow = reportIsShow;
+ return item;
+ }),
+ };
break;
case AnswerType.Url:
content = {
@@ -444,10 +477,18 @@
};
break;
}
- content.askMoreList = orderBy(res.context_history, [(item) => Number(item.radio)], ['desc']);
- content.errCode = res?.err_code;
- content.errMsg = res?.json_msg;
- content.origin = res;
+ if (!extraContent) {
+ content = {
+ ...content,
+ ...curExtraContent,
+ };
+ } else {
+ content = {
+ ...content,
+ ...extraContent,
+ };
+ }
+
return content;
};
@@ -458,9 +499,9 @@
activeStep.value = -1;
};
-const toggleStepLabel = (item: ChatMessage) => (item.stepIsShow ? '鏀惰捣' : '灞曞紑');
-const toggleStepList = (item: ChatMessage) => {
- item.stepIsShow = !item.stepIsShow;
+const toggleStepLabel = (item: any) => (item.isShow ? '鏀惰捣' : '灞曞紑');
+const toggleStepList = (item: any) => {
+ item.isShow = !item.isShow;
};
//#endregion
@@ -518,7 +559,7 @@
resetStep();
let lastTimestamp = new Date().getTime();
questionRes = {};
-
+ let lastIsResult = false;
const resultP = new Promise((resolve, reject) => {
const currentSource = axios.CancelToken.source();
lastAxiosSource = currentSource;
@@ -526,19 +567,37 @@
params,
(chunkRes) => {
Logger.info('chunk response锛歕n\n' + JSON.stringify(chunkRes));
+
if (chunkRes.mode === 'result') {
+ lastIsResult = true;
const res = chunkRes.value;
- questionRes = res;
- resolve(res);
- chunkRes.value = '鍑嗗鏁版嵁鍒嗘瀽';
+
+ if (!questionRes?.reports || questionRes?.reports?.length === 0) {
+ const resReport = {
+ answer_type: AnswerType.Report,
+ reports: [res],
+ };
+ questionRes = resReport;
+ resolve(resReport);
+ } else {
+ const lastMsg = computedMessageList.value.at(-1);
+
+ // 宸茬粡瑙ｆ瀽杩囦竴娆� reports
+ lastMsg.content.values.push({
+ content: parseContent(res, true, {
+ origin: res,
+ }),
+ });
+ }
+ return;
+ // chunkRes.value = '鍑嗗鏁版嵁鍒嗘瀽';
}
if (chunkRes.mode === 'summary') {
const lastMsg = computedMessageList.value.at(-1);
const extraContent = parseExtraContent(chunkRes.value);
-
- // 姝ゅ璇濆凡缁忓亣濡傚埌瀵硅瘽鍒楄〃
- if (lastMsg.content && extraContent) {
+ // 姝ゅ璇濆凡缁忓姞鍏ュ埌瀵硅瘽鍒楄〃
+ if (lastMsg.content?.values && extraContent) {
for (const key in extraContent) {
if (Object.prototype.hasOwnProperty.call(extraContent, key)) {
const value = extraContent[key];
@@ -547,10 +606,19 @@
}
}
}
+
+ lastMsg.historyId = chunkRes.value.history_id;
+ const userMsg = computedMessageList.value.at(-2);
+ userMsg.historyId = chunkRes.value.history_id;
+ userMsg.content.values = chunkRes.value.question;
}
- // 姝ゅ璇濊繕鏈亣濡傚埌瀵硅瘽鍒楄〃
- if (!lastMsg.content && questionRes) {
+ if (Object.keys(questionRes).length === 0) {
+ questionRes = chunkRes.value;
+ }
+
+ // 姝ゅ璇濊繕鏈姞鍏ュ埌瀵硅瘽鍒楄〃
+ if (!lastMsg.content?.values && questionRes) {
questionRes = {
...questionRes,
...chunkRes.value,
@@ -566,9 +634,10 @@
computedMessageList.value.at(-1).conclusion = chunkRes.value;
chunkRes.value = '鍒嗘瀽缁撴潫';
}
-
+
if (chunkRes.mode === 'question') {
- const stepList = computedMessageList.value.at(-1).stepList;
+ const lastGroup = computedMessageList.value.at(-1).stepGroup.at(-1);
+ const stepList = lastGroup?.value ?? [];
const lastStepItem = stepList.at(-1);
if (!lastStepItem.subStep) {
lastStepItem.subStep = [];
@@ -580,26 +649,42 @@
scrollToBottom();
return;
}
- const stepList = computedMessageList.value.at(-1).stepList;
+
+ if (lastIsResult && chunkRes.mode !== 'finish') {
+ // 寮�濮嬪鍔犳柊鐨� stepGroup
+ computedMessageList.value.at(-1).stepGroup.push({
+ value: [],
+ isShow: true,
+ });
+ lastIsResult = false;
+ }
+ const lastGroup = computedMessageList.value.at(-1).stepGroup.at(-1);
+ const stepList = lastGroup?.value ?? [];
const currentTimeStamp = new Date().getTime();
const ms = toMyFixed(currentTimeStamp - lastTimestamp, 2) + ' ms';
if (chunkRes.mode === 'finish') {
stepList.at(-1).ms = ms;
+ isTalking.value = false;
return;
}
if (stepList?.length >= 1) {
stepList.at(-1).ms = ms;
+ } else {
+ const stepGroup = computedMessageList.value.at(-1).stepGroup;
+ if (stepGroup.length > 1) {
+ const lastStepList = stepGroup.at(-2).value;
+ lastStepList.at(-1).ms = ms;
+ }
}
lastTimestamp = currentTimeStamp;
const stepItem = convertProcessItem(chunkRes);
stepList.push(stepItem);
+ // 寮哄埗瑙﹀彂鏇存柊
- if (chunkRes.mode !== 'result') {
- scrollToBottom();
- }
+ scrollToBottom();
},
{
cancelToken: currentSource.token,
@@ -610,7 +695,10 @@
})
.finally(() => {
isTalking.value = false;
- computedMessageList.value.at(-1).stepIsShow = false;
+ // 鏀惰捣鎵�鏈� stepGroup
+ computedMessageList.value.at(-1).stepGroup.forEach((item) => {
+ item.isShow = false;
+ });
resetStep();
});
@@ -665,10 +753,16 @@
const userItem: ChatMessage = { role: RoleEnum.user, content, isChecked: false } as any;
const assistantItem: ChatMessage = {
role: RoleEnum.assistant,
- content: null,
+ content: {
+ type: AnswerType.Report,
+ },
state: AnswerState.Null,
- stepList: [],
- stepIsShow: true,
+ stepGroup: [
+ {
+ value: [],
+ isShow: true,
+ },
+ ],
isStopMsg: false,
isChecked: false,
} as any;
--
Gitblit v1.9.3