From 7385b6c2b3ba3b4a1a2e6482db9ff63be0c235c8 Mon Sep 17 00:00:00 2001 From: wujingjing <gersonwu@qq.com> Date: 星期五, 22 十一月 2024 10:31:36 +0800 Subject: [PATCH] 经纬度 --- src/components/chat/Chat.vue | 481 ++++++++++++++++++++++++++++------------------------- 1 files changed, 254 insertions(+), 227 deletions(-) diff --git a/src/components/chat/Chat.vue b/src/components/chat/Chat.vue index d584d27..2e6bd2a 100644 --- a/src/components/chat/Chat.vue +++ b/src/components/chat/Chat.vue @@ -7,228 +7,239 @@ v-loading="moreIsLoading" ></span> <div class="h-full relative" v-loading="chatListLoading" :style="{ width: chatWidth }"> - <div - class="flex px-4 py-6 rounded-lg relative" - :class="{ 'flex-row-reverse': item.role === RoleEnum.user, 'px-10': isShareCheck }" - v-for="(item, msgIndex) of computedMessageList" - :key="`${item.historyId}_${item.role}`" - > - <div class="absolute top-0 left-[72px] text-[#8d8e99]">{{ item?.createTime }}</div> - <!-- :class="{ 'top-[30px]': item.role === RoleEnum.user, 'top-[30px]': item.role === RoleEnum.assistant }" --> + <template v-if="computedMessageList?.length > 0"> + <div + class="flex px-4 py-6 rounded-lg relative" + :class="{ 'flex-row-reverse': item.role === RoleEnum.user, 'px-10': isShareCheck }" + v-for="(item, msgIndex) of computedMessageList" + :key="`${item.historyId}_${item.role}`" + > + <div class="absolute top-0 left-[72px] text-[#8d8e99]">{{ item?.createTime }}</div> + <!-- :class="{ 'top-[30px]': item.role === RoleEnum.user, 'top-[30px]': item.role === RoleEnum.assistant }" --> - <el-checkbox - v-if="isShareCheck" - class="absolute left-0 top-[28px]" - size="large" - v-model="item.isChecked" - @change="(isChecked) => shareCheckChange(isChecked as boolean, item)" - ></el-checkbox> - <img - class="rounded-full size-12 flex-0" - :class="{ 'mr-4': item.role === RoleEnum.assistant, 'ml-4': item.role === RoleEnum.user }" - :src="roleImageMap[item.role]" - alt="" - srcset="" - /> - <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"> - <div - class="text-sm rounded-[6px] p-4 leading-relaxed" - :style="{ backgroundColor: item.role === RoleEnum.user ? 'rgb(197 224 255)' : 'white' }" - :class="{ group: item.role === RoleEnum.user }" - > - <div class="flex flex-col" v-if="item?.stepList?.length > 0"> - <div class="flex items-center mb-3"> - <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> + <el-checkbox + v-if="isShareCheck" + class="absolute left-0 top-[28px]" + size="large" + v-model="item.isChecked" + @change="(isChecked) => shareCheckChange(isChecked as boolean, item)" + ></el-checkbox> + <img + class="rounded-full size-12 flex-0" + :class="{ 'mr-4': item.role === RoleEnum.assistant, 'ml-4': item.role === RoleEnum.user }" + :src="roleImageMap[item.role]" + alt="" + srcset="" + /> + <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"> + <div + class="text-sm rounded-[6px] p-4 leading-relaxed" + :style="{ backgroundColor: item.role === RoleEnum.user ? 'rgb(197 224 255)' : 'white' }" + :class="{ group: item.role === RoleEnum.user }" + > + <div class="flex flex-col" v-if="item?.stepList?.length > 0"> + <div class="flex items-center mb-3"> + <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> + </div> </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 + 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="text-sm" + >{{ subItem.title + }}<span v-if="subItem.ms" class="text-green-600">{{ `锛�${subItem.ms}锛塦 }}</span></span + > + </template> + </el-step> + </el-steps> </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]" + <div + v-if="item.role === RoleEnum.user && item.content?.values && !isSharePage && !isShareCheck" + class="absolute flex items-center bottom-0 group invisible" + > + <div + class="bg-[#fff] flex items-center mr-4 space-x-2 flex-nowrap rounded-[6px] py-2 px-2 group-hover:visible" > - <template - #icon - v-if="index + 1 === item.stepList.length && isTalking && msgIndex === computedMessageList.length - 1" + <el-tooltip effect="dark" content="澶嶅埗" placement="top"> + <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> + </el-tooltip> + <el-tooltip effect="dark" content="璁句负甯哥敤璇�" placement="top"> + <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]" + @click="setCommonQuestionClick(item)" + /> + </div> + </el-tooltip> + <el-tooltip effect="dark" content="鍒嗕韩" placement="top"> + <div class="flex items-center justify-center size-[15px]"> + <i + :class="{ 'text-[#0284ff]': item.state === AnswerState.Unlike }" + class="p-2 ywifont ywicon-fenxiang cursor-pointer hover:text-[#0284ff] !text-[15px] hover:!text-[18px]" + @click="shareClick(item)" + /> + </div> + </el-tooltip> + </div> + </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-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> + </div> + <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" > - <span class="ywifont ywicon-loading1 animate-spin !text-[24px]"></span> - </template> - <template #title> - <span class="text-sm" - >{{ subItem.title }}<span v-if="subItem.ms" class="text-green-600">{{ `锛�${subItem.ms}锛塦 }}</span></span - > - </template> - </el-step> - </el-steps> + <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.user && item.content?.values && !isSharePage && !isShareCheck" - class="absolute flex items-center bottom-0 group invisible" + v-if="item.role === RoleEnum.assistant && item.content?.values && !isSharePage && !isShareCheck" + class="absolute flex items-center right-0 mr-4 mt-2 space-x-2" > - <div class="bg-[#fff] flex items-center mr-4 space-x-2 flex-nowrap rounded-[6px] py-2 px-2 group-hover:visible"> - <el-tooltip effect="dark" content="澶嶅埗" placement="top"> - <div class="flex items-center justify-center size-[20px]"> + <div + class="flex items-center justify-center size-[15px]" + v-if="item.content?.type === AnswerType.Text || item.content?.type === AnswerType.Knowledge" + > + <i + class="p-2 ywifont ywicon-copy cursor-pointer hover:text-[#0284ff] hover:!text-[18px]" + @click="copyClick(item)" + /> + </div> + <template v-if="item.content.errCode !== ErrorCode.Message"> + <el-tooltip effect="dark" content="鐐硅禐" placement="top"> + <div class="flex items-center justify-center size-[15px]"> <i - class="p-2 ywifont ywicon-copy cursor-pointer hover:text-[#0284ff] font-medium !text-[15px] hover:!text-[18px]" - @click="copyUserClick(item)" + :class="{ 'text-[#0284ff]': item.state === AnswerState.Like }" + class="p-2 ywifont ywicon-dianzan cursor-pointer hover:text-[#0284ff] font-medium hover:!text-[18px]" + @click="likeClick(item)" /> </div> </el-tooltip> - <el-tooltip effect="dark" content="璁句负甯哥敤璇�" placement="top"> - <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]" - @click="setCommonQuestionClick(item)" - /> - </div> - </el-tooltip> - <el-tooltip effect="dark" content="鍒嗕韩" placement="top"> + <el-tooltip effect="dark" content="鐐硅俯" placement="top"> <div class="flex items-center justify-center size-[15px]"> <i :class="{ 'text-[#0284ff]': item.state === AnswerState.Unlike }" - class="p-2 ywifont ywicon-fenxiang cursor-pointer hover:text-[#0284ff] !text-[15px] hover:!text-[18px]" - @click="shareClick(item)" + class="p-2 ywifont ywicon-buzan cursor-pointer hover:text-[#0284ff] !text-[13px] hover:!text-[15px]" + @click="unLikeClick(item)" /> </div> </el-tooltip> - </div> - </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 - :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> - </template> - </div> - <!-- 鎿嶄綔 --> - </div> - <div - v-if="item.role === RoleEnum.assistant && item.content?.values && !isSharePage && !isShareCheck" - 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" - > - <i - class="p-2 ywifont ywicon-copy cursor-pointer hover:text-[#0284ff] hover:!text-[18px]" - @click="copyClick(item)" - /> + <el-tooltip effect="dark" content="鍒嗕韩" placement="top"> + <div class="flex items-center justify-center size-[15px]"> + <i + class="p-2 ywifont ywicon-fenxiang cursor-pointer hover:text-[#0284ff] !text-[15px] hover:!text-[18px]" + @click="shareClick(item)" + /> + </div> + </el-tooltip> + <el-tooltip effect="dark" content="鍙嶉" placement="top"> + <div class="flex items-center justify-center size-[15px] relative"> + <i + class="p-2 ywifont ywicon-wentifankui cursor-pointer hover:text-[#0284ff] !text-[13px] hover:!text-[15px]" + @click=" + ($event) => + feedbackClick( + $event, + item, + computedMessageList + .filter((v) => v.role === RoleEnum.assistant) + .findIndex((v) => v.historyId === item.historyId) + ) + " + /> + <FeedbackPanel + v-show="feedbackIsShow && currentFeedbackMapItem === item" + ref="feedbackPanelRef" + v-model:isShow="feedbackIsShow" + v-model:content="feedbackContent" + :chatItem="currentFeedbackMapItem" + :position="feedbackPosition" + /> + </div> + </el-tooltip> </div> - <template v-if="item.content.errCode !== ErrorCode.Message"> - <el-tooltip effect="dark" content="鐐硅禐" placement="top"> - <div class="flex items-center justify-center size-[15px]"> - <i - :class="{ 'text-[#0284ff]': item.state === AnswerState.Like }" - class="p-2 ywifont ywicon-dianzan cursor-pointer hover:text-[#0284ff] font-medium hover:!text-[18px]" - @click="likeClick(item)" - /> - </div> - </el-tooltip> - <el-tooltip effect="dark" content="鐐硅俯" placement="top"> - <div class="flex items-center justify-center size-[15px]"> - <i - :class="{ 'text-[#0284ff]': item.state === AnswerState.Unlike }" - class="p-2 ywifont ywicon-buzan cursor-pointer hover:text-[#0284ff] !text-[13px] hover:!text-[15px]" - @click="unLikeClick(item)" - /> - </div> - </el-tooltip> - </template> - <el-tooltip effect="dark" content="鍒嗕韩" placement="top"> - <div class="flex items-center justify-center size-[15px]"> - <i - :class="{ 'text-[#0284ff]': item.state === AnswerState.Unlike }" - class="p-2 ywifont ywicon-fenxiang cursor-pointer hover:text-[#0284ff] !text-[15px] hover:!text-[18px]" - @click="shareClick(item)" - /> - </div> - </el-tooltip> - <el-tooltip effect="dark" content="鍙嶉" placement="top"> - <div class="flex items-center justify-center size-[15px] relative"> - <i - class="p-2 ywifont ywicon-wentifankui cursor-pointer hover:text-[#0284ff] !text-[13px] hover:!text-[15px]" - @click=" - ($event) => - feedbackClick( - $event, - item, - computedMessageList - .filter((v) => v.role === RoleEnum.assistant) - .findIndex((v) => v.historyId === item.historyId) - ) - " - /> - <FeedbackPanel - v-show="feedbackIsShow && currentFeedbackMapItem === item" - ref="feedbackPanelRef" - v-model:isShow="feedbackIsShow" - v-model:content="feedbackContent" - :chatItem="currentFeedbackMapItem" - :position="feedbackPosition" - /> - </div> - </el-tooltip> </div> </div> </div> </div> - </div> - <div v-if="showAskMore && !isShareCheck" class="ml-4 mt-5 text-sm pb-10"> + </template> + <el-empty v-else-if="isSharePage && !chatListLoading" :image-size="200"> + <template #description> + <span class="text-[15px]"> 鍒嗕韩鐨勫璇濅笉瀛樺湪鎴栧凡澶辨晥 </span> + </template> + </el-empty> + <div v-if="showAskMore" class="ml-4 mt-5 text-sm pb-10"> <div class="text-gray-600 mb-5">浣犲彲浠ョ户缁棶鎴戯細</div> <div class="space-y-2 inline-flex flex-col"> <div @@ -244,10 +255,7 @@ </div> </div> - <div - class="sticky bottom-0 w-full p-6 bg-[rgb(247,248,250)] flex justify-center" - v-if="!isSharePage && !isShareCheck" - > + <div class="sticky bottom-0 w-full p-6 bg-[rgb(247,248,250)] flex justify-center" v-if="!isSharePage && !isShareCheck"> <PlayBar v-model:voicePageIsShow="voicePageIsShow" :isTalking="isTalking" @@ -268,9 +276,8 @@ <script setup lang="ts"> import { ElMessage } from 'element-plus'; -import _ from 'lodash'; import moment from 'moment'; -import { computed, onMounted, ref } from 'vue'; +import { computed, onActivated, onMounted, ref } from 'vue'; import useClipboard from 'vue-clipboard3'; import FeedbackPanel from './components/FeedbackPanel.vue'; import { useAssistantContentOpt } from './hooks/useAssistantContentOpt'; @@ -282,22 +289,25 @@ import { extCallQuery, questionStreamByPost, shareChatHistoryByPost } from '/@/api/ai/chat'; import PlayBar from '/@/components/chat/components/playBar/PlayBar.vue'; import CustomDrawer from '/@/components/drawer/CustomDrawer.vue'; -import { SERVE_URL } from '/@/constants'; +import { SHARE_URL } from '/@/constants'; import { Logger } from '/@/model/logger/Logger'; import router from '/@/router'; import { -activeChatRoom, -activeGroupType, -activeLLMId, -activeRoomId, -activeSampleId, -activeSectionAId, -getRoomConfig, -isSharePage, -roomConfig, + activeChatRoom, + activeGroupType, + activeLLMId, + activeRoomId, + activeSampleId, + activeSectionAId, + getRoomConfig, + isSharePage, + roomConfig, } from '/@/stores/chatRoom'; +import emitter from '/@/utils/mitt'; import { ErrorCode } from '/@/utils/request'; import { toMyFixed } from '/@/utils/util'; +import { findLast, orderBy } from 'lodash-es'; +import { getCurrentPosition } from '/@/utils/brower'; const chatWidth = '75%'; const voicePageIsShow = ref(false); let isTalking = ref(false); @@ -370,7 +380,7 @@ }; break; } - content.askMoreList = _.orderBy(res.context_history, [(item) => Number(item.radio)], ['desc']); + content.askMoreList = orderBy(res.context_history, [(item) => Number(item.radio)], ['desc']); content.errCode = res?.err_code; content.errMsg = res?.json_msg; content.origin = res; @@ -413,7 +423,7 @@ const DEFAULT_SECTION_A_ID = 'knowledge_base'; let questionRes = null; - +let position = null; let finalCalcSectionAId = null; const questionAi = async (text) => { let judgeParams = null; @@ -437,7 +447,7 @@ currentSectionAId = activeSectionAId.value; activeSectionAId.value = ''; } else { - const lastSectionAItem = _.findLast( + const lastSectionAItem = findLast( computedMessageList.value as any, (item) => item.role === RoleEnum.assistant && !!item.sectionAId ); @@ -454,6 +464,12 @@ raw_mode: roomConfig.value?.[currentRouteId]?.isAnswerByLLM ?? false, ...judgeParams, } as any; + + if (position) { + const longitude = position.coords.longitude; + const latitude = position.coords.latitude; + params.cur_pos = [longitude, latitude].join(','); + } if (activeGroupType.value) { params.group_type = activeGroupType.value; @@ -531,7 +547,15 @@ let currentLLMId = null; const sendChatMessage = async (content: ChatContent = messageContent.value, cb?: any, isCallExtParams?: any) => { - if (!content?.values || isTalking.value || chatListLoading.value) return; + if (!content?.values) { + return; + } + if (isTalking.value || chatListLoading.value) { + ElMessage.warning('ai 姝e湪鍥炲涓紝璇风◢鍚庡皾璇曟彁闂�'); + return; + } + position = position ?? (await getCurrentPosition()); + const isNewChat = messageList.value.length === 0; if (isNewChat) { if (activeSampleId.value) { @@ -607,30 +631,34 @@ } }; - const { loadRangeData, onChatListScroll, moreIsLoading, nextUserMsgEndIndex } = useScrollLoad({ - isSharePage: isSharePage, container: chatListDom, historyGroupId: currentRouteId, messageList, parseAnswerContent: parseContent, }); -const chatListLoading = ref(false); +const chatListLoading = ref(true); const { scrollToBottom, scrollToTop } = useScrollToBottom({ chatListDom: chatListDom, }); -onMounted(async () => { +onActivated(() => { + emitter.emit('updateHeaderTitle', activeChatRoom.value?.title ?? ''); +}); +onMounted(async () => { messageList.value = []; // 鍔犺浇鍒濆鏁版嵁 chatListLoading.value = true; - await loadRangeData().finally(() => { chatListLoading.value = false; }); + setTimeout(() => { + emitter.emit('updateHeaderTitle', activeChatRoom.value?.title ?? ''); + }, 300); + if (messageList.value.length === 0) { messageContent.value = { type: AnswerType.Text, @@ -640,10 +668,10 @@ sendChatMessage(); } else { if (isSharePage.value) { - setTimeout(() => { - // 婊氬姩鍒伴《閮� - scrollToTop(); - }, 300); + // setTimeout(() => { + // // 婊氬姩鍒伴《閮� + // scrollToTop(); + // }, 300); } else { setTimeout(() => { // 鍒濆鐘舵�佹粴涓�涓� @@ -795,8 +823,7 @@ if (!res.values) return; const shareId = Object.values(res.values)[0]; if (!shareId) return; - const relativeHref = router.resolve(`share?id=${shareId}`).href; - const shareLink = `${SERVE_URL}${relativeHref}`; + const shareLink = `${SHARE_URL}?id=${shareId}`; return shareLink; }; -- Gitblit v1.9.3