From 4eb38b646ea064450208d28f94ee1e348a7d10d9 Mon Sep 17 00:00:00 2001
From: yangyin <1850366751@qq.com>
Date: 星期一, 04 十一月 2024 16:28:13 +0800
Subject: [PATCH] 提交代码
---
src/components/chat/Chat.vue | 236 ++++++++++++++++++++++++++++++-----------------------------
1 files changed, 120 insertions(+), 116 deletions(-)
diff --git a/src/components/chat/Chat.vue b/src/components/chat/Chat.vue
index 22c8727..2caf1e6 100644
--- a/src/components/chat/Chat.vue
+++ b/src/components/chat/Chat.vue
@@ -23,98 +23,88 @@
/>
<div class="flex-auto flex" :class="{ 'justify-end': item.role === RoleEnum.user }">
<div class="inline-flex flex-col" :class="{ 'w-full': item.role === RoleEnum.assistant }">
- <div class="w-full" v-if="isTalking && index === computedMessageList.length - 1">
- <div class="text-sm rounded-[6px] p-4 leading-relaxed bg-white" v-if="item.role === RoleEnum.assistant">
- <!-- 杩囩▼杈撳嚭 -->
- <el-steps direction="vertical" :active="activeStep">
- <!-- <el-step title="process" status="process" />
- <el-step title="success" status="success" />
- <el-step title="wait" status="wait" />
- <el-step title="finish" status="finish" />
- <el-steps title="error" status="error" /> -->
-
- <el-step v-for="item in stepList" :title="item.title" :status="stepEnumMap[item.status]" />
- </el-steps>
- </div>
- </div>
- <div class="w-full" v-if="item.content?.values">
+ <div class="w-full">
<div
class="text-sm rounded-[6px] p-4 leading-relaxed"
:style="{ backgroundColor: item.role === RoleEnum.user ? 'rgb(197 224 255)' : 'white' }"
>
- <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-5 flex items-center" v-if="showFixQuestion(item)">
- <div class="text-gray-600 flex-0">
- {{ item.content.origin.err_json.fix_question.title + '锛�' }}
- </div>
- <div class="ml-1 space-x-2 inline-flex flex-wrap">
- <div
- v-for="fixItem in item.content.origin.err_json.fix_question?.values"
- :key="fixItem"
- class="bg-gray-200 p-3 hover:bg-[#c5e0ff] hover:text-[#1c86ff] cursor-pointer rounded-lg"
- @click="fixQuestionClick(fixItem, item.content.origin)"
- >
- {{ fixItem.title }}
- </div>
- </div>
- </div>
- </div>
- <template v-else>
- <el-popover placement="bottom-start" trigger="hover" :popper-style="{ minWidth: '70px' }" :width="70">
- <template #default>
- <div class="action" v-if="item.role === RoleEnum.user">
- <div class="flex items-center justify-center size-[20px]">
- <i
- class="p-2 ywifont ywicon-copy cursor-pointer hover:text-[#0284ff] font-medium !text-[15px]"
- @click="copyUserClick(item)"
- />
- </div>
- <div class="flex items-center justify-center size-[20px]">
- <i
- class="p-2 ywifont ywicon-cubelifangti cursor-pointer hover:text-[#0284ff] text-[#000] font-[590] !text-[15px]"
- @click="setCommonQuestionClick(item)"
- />
- </div>
- </div>
- </template>
- <template #reference>
- <component
- :is="answerTypeMapCom[item.content.type]"
- v-if="item.role === RoleEnum.user"
- :data="item.content.values"
- :originData="item"
- />
- </template>
- </el-popover>
- <component
- :is="answerTypeMapCom[item.content.type]"
- v-if="item.role !== RoleEnum.user"
- :data="item.content.values"
- :originData="item"
- />
+ <div class="flex flex-col" v-if="item?.stepList?.length > 0">
<div
- v-if="item.role === RoleEnum.assistant && item.content.origin?.ext_call_list"
- class="flex font-bold items-center mt-6"
+ @click="toggleStepList(item)"
+ class="cursor-pointer border border-gray-300 border-solid w-fit px-2 flex items-center space-x-2 rounded-lg mb-3 hover:bg-gray-100 active:bg-gray-200"
>
- <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 }}
+ <span >
+ {{ toggleStepLabel(item) }}
+ </span>
+ <span class="ywifont" :class="{ 'ywicon-unfold': !item.stepIsShow, 'ywicon-fold': item.stepIsShow }"></span>
+ </div>
+
+ <!-- 杩囩▼杈撳嚭 -->
+ <el-steps v-show="item.stepIsShow" direction="vertical" :active="activeStep">
+ <el-step
+ v-for="(subItem, index) in item.stepList"
+ :title="subItem.title"
+ :status="stepEnumMap[subItem.status]"
+ >
+ <!-- <template #icon>
+ <span v-if="subItem.status === StepEnum.Loading" class="ywifont ywicon-loading animate-spin"></span>
+ <span v-else class="ywifont ywicon-loading1 animate-spin"></span>
+ </template> -->
+ <template #title>
+ <span class="text-sm">{{ subItem.title }}</span>
+ </template>
+ </el-step>
+ </el-steps>
+ </div>
+
+ <template v-if="item.content?.values">
+ <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-5 flex items-center" v-if="showFixQuestion(item)">
+ <div class="text-gray-600 flex-0">
+ {{ item.content.origin.err_json.fix_question.title + '锛�' }}
+ </div>
+ <div class="ml-1 space-x-2 inline-flex flex-wrap">
+ <div
+ v-for="fixItem in item.content.origin.err_json.fix_question?.values"
+ :key="fixItem"
+ class="bg-gray-200 p-3 hover:bg-[#c5e0ff] hover:text-[#1c86ff] cursor-pointer rounded-lg"
+ @click="fixQuestionClick(fixItem, item.content.origin)"
+ >
+ {{ fixItem.title }}
+ </div>
</div>
</div>
</div>
+ <template v-else>
+ <component :is="answerTypeMapCom[item.content.type]" :data="item.content.values" :originData="item" />
+
+ <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>
</template>
</div>
<!-- 鎿嶄綔 -->
- <div v-if="item.role === RoleEnum.assistant" class="absolute flex items-center right-0 mr-4 mt-2 space-x-2">
+ <div
+ v-if="item.role === RoleEnum.assistant && item.content?.values"
+ class="absolute flex items-center right-0 mr-4 mt-2 space-x-2"
+ >
<div
class="flex items-center justify-center size-[15px]"
v-if="item.content?.type === AnswerType.Text || item.content?.type === AnswerType.Knowledge"
@@ -205,14 +195,23 @@
<script setup lang="ts">
import _ from 'lodash';
import moment from 'moment';
-import { computed, onMounted, ref } from 'vue';
+import { computed, onMounted, ref, triggerRef } from 'vue';
import FeedbackPanel from './components/FeedbackPanel.vue';
import { useAssistantContentOpt } from './hooks/useAssistantContentOpt';
import { useQueryProcess } from './hooks/useQueryProcess';
-import { useScrollLoad } from './hooks/useScrollLoad';
+import { convertProcessItem, useScrollLoad } from './hooks/useScrollLoad';
import { useScrollToBottom } from './hooks/useScrollToBottom';
-import type { ChatContent } from './model/types';
-import { AnswerState, AnswerType, RoleEnum, answerTypeMapCom, roleImageMap, type ChatMessage } from './model/types';
+import type { ChatContent, StepItem } from './model/types';
+import {
+ AnswerState,
+ AnswerType,
+ RoleEnum,
+ answerTypeMapCom,
+ roleImageMap,
+ type ChatMessage,
+ StepEnum,
+ stepEnumMap,
+} from './model/types';
import { extCallQuery, questionStreamByPost } from '/@/api/ai/chat';
import PlayBar from '/@/components/chat/components/playBar/PlayBar.vue';
import CustomDrawer from '/@/components/drawer/CustomDrawer.vue';
@@ -227,6 +226,7 @@
getRoomConfig,
roomConfig,
} from '/@/stores/chatRoom';
+import { deepClone } from '/@/utils/other';
import { ErrorCode } from '/@/utils/request';
const chatWidth = '75%';
@@ -306,35 +306,43 @@
const { clearQueryProcess, process, processId, queryProcess } = useQueryProcess();
//#region ====================== 姝ラ step ======================
-const enum StepEnum {
- Loading,
- Success,
- Error,
-}
-const stepEnumMap = {
- [StepEnum.Loading]: 'process',
- [StepEnum.Success]: 'success',
- [StepEnum.Error]: 'error',
-};
-
-type StepItem = {
- title: string;
- status: StepEnum;
-};
const activeStep = ref(-1);
-const stepList = ref<StepItem[]>([]);
+const stepList = ref<StepItem[]>([
+ {
+ title: '鎰忓浘鍒嗘瀽涓�...',
+ status: 0,
+ },
+ {
+ title: '鎰忓浘鍒嗘瀽瀹屾垚',
+ status: 1,
+ },
+ {
+ title: '鎬濊�冨浣曟墽琛�:鎸囨爣鏄庣粏鏌ヨ',
+ status: 1,
+ },
+ {
+ title: '鎸囨爣鏄庣粏鏌ヨ瀹屾垚',
+ status: 1,
+ },
+]);
const resetStep = () => {
activeStep.value = -1;
stepList.value = [];
};
+
+const toggleStepLabel = (item: ChatMessage) => (item.stepIsShow ? '鏀惰捣' : '灞曞紑');
+const toggleStepList = (item: ChatMessage) => {
+ item.stepIsShow = !item.stepIsShow;
+};
+
//#endregion
const DEFAULT_SECTION_A_ID = 'knowledge_base';
let questionRes = null;
let finalCalcSectionAId = null;
-const questionAi = async (text) => {
+const questionAi = async (text, assistantMsg: ChatMessage) => {
// processId.value = uuidv4();
let judgeParams = null;
if (!preQuestion.value) {
@@ -395,22 +403,12 @@
if (chunkRes.mode === 'result') {
res = chunkRes.value;
} else {
- switch (chunkRes.mode) {
- case 'begin':
- break;
- case 'end':
- break;
- }
-
- stepList.value.push({
- title: chunkRes.value,
- status: StepEnum.Success,
- });
+ const stepItem = convertProcessItem(chunkRes);
+ computedMessageList.value.at(-1).stepList.push(stepItem);
scrollToBottom();
-
- // process.value = chunkRes.value;
}
}).finally(() => {
+ computedMessageList.value.at(-1).stepIsShow = false;
resetStep();
});
questionRes = res;
@@ -445,7 +443,13 @@
try {
isTalking.value = true;
const userItem: ChatMessage = { role: RoleEnum.user, content } as any;
- const assistantItem: ChatMessage = { role: RoleEnum.assistant, content: null, state: AnswerState.Null } as any;
+ const assistantItem: ChatMessage = {
+ role: RoleEnum.assistant,
+ content: null,
+ state: AnswerState.Null,
+ stepList: [],
+ stepIsShow: true,
+ } as any;
// 鍙戦�佸綋鍓�
messageList.value.push(userItem);
// 娓呯┖杈撳叆妗�
@@ -461,7 +465,7 @@
questionRes = extRes;
resMsgContent = parseContent(extRes);
} else {
- resMsgContent = await questionAi(content.values);
+ resMsgContent = await questionAi(content.values, assistantItem);
}
nextUserMsgEndIndex.value++;
if (isNewChat) {
--
Gitblit v1.9.3