From 3e52ec41322cd3bbb96f8d1492dc9b69cebd6661 Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期一, 04 十一月 2024 15:34:50 +0800
Subject: [PATCH] 字体 ，超时
---
src/components/chat/Chat.vue | 226 ++++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 170 insertions(+), 56 deletions(-)
diff --git a/src/components/chat/Chat.vue b/src/components/chat/Chat.vue
index d1aa808..6827430 100644
--- a/src/components/chat/Chat.vue
+++ b/src/components/chat/Chat.vue
@@ -23,55 +23,89 @@
/>
<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="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>
- <component :is="answerTypeMapCom[item.content.type]" :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"
@@ -123,8 +157,6 @@
</div>
</div>
</div>
-
- <Loding v-if="isTalking && index === computedMessageList.length - 1" class="w-fit" :process="process" />
</div>
</div>
</div>
@@ -165,17 +197,24 @@
<script setup lang="ts">
import _ from 'lodash';
import moment from 'moment';
-import { v4 as uuidv4 } from 'uuid';
-import { computed, onMounted, ref } from 'vue';
+import { computed, onMounted, ref, triggerRef } from 'vue';
import FeedbackPanel from './components/FeedbackPanel.vue';
-import Loding from './components/Loding.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 { QuestionAi, extCallQuery } from '/@/api/ai/chat';
+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';
import router from '/@/router';
@@ -189,6 +228,7 @@
getRoomConfig,
roomConfig,
} from '/@/stores/chatRoom';
+import { deepClone } from '/@/utils/other';
import { ErrorCode } from '/@/utils/request';
const chatWidth = '75%';
@@ -266,12 +306,46 @@
return content;
};
const { clearQueryProcess, process, processId, queryProcess } = useQueryProcess();
+
+//#region ====================== 姝ラ step ======================
+const activeStep = ref(-1);
+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) => {
- processId.value = uuidv4();
+const questionAi = async (text, assistantMsg: ChatMessage) => {
+ // processId.value = uuidv4();
let judgeParams = null;
if (!preQuestion.value) {
// const aiContent = computedMessageList.value.filter((item) => item.role === RoleEnum.assistant);
@@ -302,7 +376,7 @@
finalCalcSectionAId = currentSectionAId;
const params = {
- process_id: processId.value,
+ // process_id: processId.value,
question: text,
// FIXME: 鏆傛椂杩欐牱
// section_a_id: currentSectionAId,
@@ -323,10 +397,21 @@
// if (currentLLMId) {
// params.llm_id = currentLLMId;
// }
- clearQueryProcess();
- queryProcess();
- const res = await QuestionAi(params).finally(() => {
- clearQueryProcess();
+ // clearQueryProcess();
+ // queryProcess();
+ resetStep();
+ let res = null;
+ await questionStreamByPost(params, (chunkRes) => {
+ if (chunkRes.mode === 'result') {
+ res = chunkRes.value;
+ } else {
+ const stepItem = convertProcessItem(chunkRes);
+ computedMessageList.value.at(-1).stepList.push(stepItem);
+ scrollToBottom();
+ }
+ }).finally(() => {
+ computedMessageList.value.at(-1).stepIsShow = false;
+ resetStep();
});
questionRes = res;
const content = parseContent(res);
@@ -360,7 +445,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);
// 娓呯┖杈撳叆妗�
@@ -376,7 +467,7 @@
questionRes = extRes;
resMsgContent = parseContent(extRes);
} else {
- resMsgContent = await questionAi(content.values);
+ resMsgContent = await questionAi(content.values, assistantItem);
}
nextUserMsgEndIndex.value++;
if (isNewChat) {
@@ -484,7 +575,6 @@
currentIndex.value = (currentIndex.value + history_data.value.length - 1) % history_data.value.length;
}
messageContent.value.values = history_data.value[currentIndex.value].content.values;
- scrollToBottom();
};
//鏄剧ず涓嬩竴鏉℃秷鎭�
const showDownChatClick = () => {
@@ -495,7 +585,6 @@
currentIndex.value = (currentIndex.value + 1) % history_data.value.length;
}
messageContent.value.values = history_data.value[currentIndex.value].content.values;
- scrollToBottom();
};
//#endregion
const {
@@ -544,4 +633,29 @@
}
}
}
+
+.el-step.is-horizontal.stepActive {
+ .el-step__head.is-finish {
+ .el-step__line {
+ // 褰撳墠姝ラ鏁版í绾挎牱寮忚缃�
+ .el-step__line-inner {
+ width: 50% !important;
+ border-width: 1px !important;
+ }
+ }
+
+ // 褰撳墠姝ラ鏁板渾鍦堟牱寮忚缃�
+ .el-step__icon.is-text {
+ // background: #409eff;
+ color: #fff;
+ }
+ }
+}
+
+:deep(.el-step__icon-inner) {
+ font-size: 16px !important;
+}
+:deep(.el-step__description) {
+ height: 20px;
+}
</style>
--
Gitblit v1.9.3