From 768a63bdae68f9440d4b7f5768c3ea7f9308f2ab Mon Sep 17 00:00:00 2001 From: wujingjing <gersonwu@qq.com> Date: 星期三, 06 十一月 2024 14:08:58 +0800 Subject: [PATCH] 流更改 --- src/components/chat/Chat.vue | 86 ++++++++++++++++++++++++++++++------------ 1 files changed, 61 insertions(+), 25 deletions(-) diff --git a/src/components/chat/Chat.vue b/src/components/chat/Chat.vue index 2e98bfd..05b6846 100644 --- a/src/components/chat/Chat.vue +++ b/src/components/chat/Chat.vue @@ -10,7 +10,7 @@ <div class="group flex px-4 py-6 hover:bg-slate-100 rounded-lg relative" :class="{ 'flex-row-reverse': item.role === RoleEnum.user }" - v-for="(item, index) of computedMessageList" + v-for="(item, msgIndex) of computedMessageList" :key="`${item.historyId}_${item.role}`" > <div class="absolute top-0 left-[72px] text-[#8d8e99]">{{ item?.createTime }}</div> @@ -51,7 +51,7 @@ > <template #icon - v-if="index + 1 === item.stepList.length && isTalking && index === computedMessageList.length - 1" + v-if="index + 1 === item.stepList.length && isTalking && msgIndex === computedMessageList.length - 1" > <span class="ywifont ywicon-loading1 animate-spin !text-[24px]"></span> </template> @@ -84,7 +84,12 @@ </div> </div> <template v-else> - <component :is="answerTypeMapCom[item.content.type]" :data="item.content.values" :originData="item" /> + <component + :conclusion="item.conclusion" + :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" @@ -109,12 +114,12 @@ v-if="item.role === RoleEnum.user && item.content?.values" class="absolute flex items-center right-0 mr-4 space-x-2" > - <!-- <div class="flex items-center justify-center size-[20px]"> + <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] hover:!text-[18px]" @click="copyUserClick(item)" /> - </div> --> + </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] hover:!text-[18px]" @@ -217,19 +222,18 @@ <script setup lang="ts"> import _ from 'lodash'; import moment from 'moment'; -import { v4 as uuidv4 } from 'uuid'; import { computed, onMounted, ref } 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 { convertProcessItem, useScrollLoad } from './hooks/useScrollLoad'; import { useScrollToBottom } from './hooks/useScrollToBottom'; import type { ChatContent, StepItem } from './model/types'; -import { AnswerState, AnswerType, RoleEnum, answerTypeMapCom, roleImageMap, type ChatMessage, stepEnumMap } from './model/types'; -import { QuestionAi, extCallQuery, questionStreamByPost } from '/@/api/ai/chat'; +import { AnswerState, AnswerType, RoleEnum, answerTypeMapCom, roleImageMap, stepEnumMap, type ChatMessage } 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 { Logger } from '/@/model/logger/Logger'; import router from '/@/router'; import { activeChatRoom, @@ -242,7 +246,8 @@ roomConfig, } from '/@/stores/chatRoom'; import { ErrorCode } from '/@/utils/request'; -import { Logger } from '/@/model/logger/Logger'; +import { ElMessage } from 'element-plus'; +import useClipboard from 'vue-clipboard3'; const chatWidth = '75%'; const voicePageIsShow = ref(false); let isTalking = ref(false); @@ -412,20 +417,42 @@ // queryProcess(); resetStep(); let res = null; - await questionStreamByPost(params, (chunkRes) => { - Logger.info('chunk response锛歕n\n' + JSON.stringify(chunkRes)); - if (chunkRes.mode === 'result') { - res = chunkRes.value; - } else { + + const resultP = new Promise(async (resolve, reject) => { + await questionStreamByPost(params, (chunkRes) => { + Logger.info('chunk response锛歕n\n' + JSON.stringify(chunkRes)); + if (chunkRes.mode === 'result') { + res = chunkRes.value; + resolve(res); + chunkRes.value = '鍑嗗鏁版嵁鍒嗘瀽'; + } + + if (chunkRes.mode === 'conclusion') { + computedMessageList.value.at(-1).conclusion = chunkRes.value; + chunkRes.value = '鍒嗘瀽缁撴潫'; + } + + if (chunkRes.mode === 'finish') { + isTalking.value = false; + return; + } + const stepItem = convertProcessItem(chunkRes); computedMessageList.value.at(-1).stepList.push(stepItem); scrollToBottom(); - } - }).finally(() => { - computedMessageList.value.at(-1).stepIsShow = false; - resetStep(); + }) + .catch((err) => { + throw err; + }) + .finally(() => { + isTalking.value = false; + + computedMessageList.value.at(-1).stepIsShow = false; + resetStep(); + }); }); - questionRes = res; + + questionRes = await resultP; const content = parseContent(res); return content; }; @@ -502,8 +529,6 @@ // type: AnswerType.Text, // values: '鍙戠敓閿欒锛�', // }); - } finally { - isTalking.value = false; } }; @@ -581,8 +606,9 @@ //鏄剧ず涓婁竴鏉℃秷鎭� const showUpChatClick = () => { if (computedMessageList.value.length === 0) return; - if (currentIndex.value === null) { - currentIndex.value = history_data.value.length - 1; + if (currentIndex.value == 0) { + messageContent.value.values = history_data.value[currentIndex.value].content.values; + return; } else { currentIndex.value = (currentIndex.value + history_data.value.length - 1) % history_data.value.length; } @@ -591,6 +617,10 @@ //鏄剧ず涓嬩竴鏉℃秷鎭� const showDownChatClick = () => { if (computedMessageList.value.length === 0) return; + if (currentIndex.value == history_data.value.length - 1) { + messageContent.value.values = history_data.value[currentIndex.value].content.values; + return; + } if (currentIndex.value === null) { currentIndex.value = 0; } else { @@ -628,8 +658,14 @@ //#endregion //#region ====================== 鐢ㄦ埛璇㈤棶鐨勯棶棰樿缃负甯哥敤璇� ====================== const setCommonQuestionInfo = ref({}); +const { toClipboard } = useClipboard(); + //鐢ㄦ埛澶嶅埗闂 -const copyUserClick = () => {}; +const copyUserClick = (item) => { + const text = item.content.values; + ElMessage.success('澶嶅埗鎴愬姛'); + toClipboard(text); +}; //鐢ㄦ埛闂璁剧疆涓哄父鐢ㄨ const setCommonQuestionClick = (item) => { setCommonQuestionInfo.value = item; -- Gitblit v1.9.3