| | |
|---|
| | | <div v-for="(item, msgIndex) of computedMessageList" :key="`${item.historyId}_${item.role}`"> |
|---|
| | | <UserMsg |
|---|
| | | :msg="item" |
|---|
| | | @copyMsg="copyClick" |
|---|
| | | @shareClick="shareClick" |
|---|
| | | @setCommonQuestion="setCommonQuestionClick" |
|---|
| | | v-if="item.role === RoleEnum.user" |
|---|
| | | ></UserMsg> |
|---|
| | | |
|---|
| | | <div v-else class="flex px-4 py-6 rounded-lg relative" :class="{ 'px-10': isShareCheck }"> |
|---|
| | | <div class="absolute top-0 left-[72px] text-[#8d8e99]">{{ item?.createTime }}</div> |
|---|
| | | |
|---|
| | | <img |
|---|
| | | class="rounded-full size-12 flex-0" |
|---|
| | | :class="{ 'mr-4': item.role === RoleEnum.assistant }" |
|---|
| | | :src="roleImageMap[item.role]" |
|---|
| | | alt="" |
|---|
| | | srcset="" |
|---|
| | | /> |
|---|
| | | <div class="flex-auto flex"> |
|---|
| | | <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 ====================== 消息内容 ======================--> |
|---|
| | | <!-- <template v-if="item.content?.values"> --> |
|---|
| | | <!-- #region ====================== 报错信息 ======================--> |
|---|
| | | <div v-if="item.content?.errCode === ErrorCode.Message" class="flex-column w-full"> |
|---|
| | | <p class="text-danger"> |
|---|
| | | {{ 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> |
|---|
| | | <!-- #endregion --> |
|---|
| | | <!-- #region ====================== 回答组件 ======================--> |
|---|
| | | <template v-else> |
|---|
| | | <template v-if="item.content.type === AnswerType.Report"> |
|---|
| | | <template v-if="item?.stepGroup?.length > 0"> |
|---|
| | | <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> |
|---|
| | | <p v-else class="text-info">暂无内容，请重试</p> |
|---|
| | | </template> |
|---|
| | | <component |
|---|
| | | <AssistantMsg |
|---|
| | | 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" |
|---|
| | | :msg="item" |
|---|
| | | :msgList="computedMessageList" |
|---|
| | | :isLast="msgIndex === computedMessageList.length - 1" |
|---|
| | | @sendChatMessage="sendChatMessage" |
|---|
| | | @shareMsg="shareClick" |
|---|
| | | :isTalking="isTalking" |
|---|
| | | /> |
|---|
| | | </template> |
|---|
| | | <!-- #endregion --> |
|---|
| | | <!-- </template> --> |
|---|
| | | |
|---|
| | | <!-- #endregion --> |
|---|
| | | <!-- #region ====================== 附加内容 ======================--> |
|---|
| | | <!-- #region ====================== 停止 ======================--> |
|---|
| | | <span v-if="item.isStopMsg && item?.role === RoleEnum.assistant" class="text-gray-400 text-[12px]" |
|---|
| | | >（已停止）</span |
|---|
| | | > |
|---|
| | | <!-- parseContent 返回为 null --> |
|---|
| | | <p v-if="!item.content && !isTalking && !item.isStopMsg" class="text-red-500">暂无数据</p> |
|---|
| | | <!-- #endregion --> |
|---|
| | | <!-- #endregion --> |
|---|
| | | </div> |
|---|
| | | <!-- #region ====================== ai 消息操作 ======================--> |
|---|
| | | <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)" |
|---|
| | | /> |
|---|
| | | </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="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> |
|---|
| | | <!-- #endregion --> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div v-if="showAskMore" class="ml-4 mt-5 pb-10"> |
|---|
| | | <div class="text-gray-600 mb-5">你可以继续问我：</div> |
|---|
| | |
|---|
| | | <script setup lang="ts"> |
|---|
| | | import type { CancelTokenSource } from 'axios'; |
|---|
| | | import axios from 'axios'; |
|---|
| | | import { findLast, orderBy } from 'lodash-es'; |
|---|
| | | import { orderBy } from 'lodash-es'; |
|---|
| | | import moment from 'moment'; |
|---|
| | | import { computed, onActivated, onMounted, ref } from 'vue'; |
|---|
| | | import useClipboard from 'vue-clipboard3'; |
|---|
| | | import { loadAmisSource } from '../amis/load'; |
|---|
| | | import FeedbackPanel from './components/FeedbackPanel.vue'; |
|---|
| | | import { useAssistantContentOpt } from './hooks/useAssistantContentOpt'; |
|---|
| | | import { convertProcessItem, convertProcessToStep, formatShowTimeYear, useScrollLoad } from './hooks/useScrollLoad'; |
|---|
| | | import type { ChatContent } from './model/types'; |
|---|
| | | import { |
|---|
| | | AnswerState, |
|---|
| | | AnswerType, |
|---|
| | | MultiChatType, |
|---|
| | | RoleEnum, |
|---|
| | | answerTypeMapCom, |
|---|
| | | roleImageMap, |
|---|
| | | stepEnumMap, |
|---|
| | | type ChatMessage, |
|---|
| | | } from './model/types'; |
|---|
| | | import { extCallQuery, getShareChatJsonByPost, questionStreamByPost } from '/@/api/ai/chat'; |
|---|
| | | import { AnswerState, AnswerType, RoleEnum, type ChatMessage } from './model/types'; |
|---|
| | | import { getShareChatJsonByPost, 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 { ElMessage } from 'element-plus'; |
|---|
| | | import AssistantMsg from './assistant/index.vue'; |
|---|
| | | import ChatContainer from './components/ChatContainer.vue'; |
|---|
| | | import ShareLinkDlg from './components/shareLink/index.vue'; |
|---|
| | | import UserMsg from './user/index.vue'; |
|---|
| | | import { multiChatTypeMapCom } from '/@/components/chat/chatComponents/multiChat'; |
|---|
| | | import router from '/@/router'; |
|---|
| | | import { |
|---|
| | | activeChatRoom, |
|---|
| | |
|---|
| | | roomConfig, |
|---|
| | | } from '/@/stores/chatRoom'; |
|---|
| | | import emitter from '/@/utils/mitt'; |
|---|
| | | import { ErrorCode } from '/@/utils/request'; |
|---|
| | | import { useCompRef } from '/@/utils/types'; |
|---|
| | | import { toMyFixed } from '/@/utils/util'; |
|---|
| | | const containerRef = useCompRef(ChatContainer); |
|---|
| | |
|---|
| | | return content; |
|---|
| | | }; |
|---|
| | | |
|---|
| | | //#region ====================== 步骤 step ====================== |
|---|
| | | const activeStep = ref(-1); |
|---|
| | | |
|---|
| | | const resetStep = () => { |
|---|
| | | activeStep.value = -1; |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const toggleStepLabel = (item: any) => (item.isShow ? '收起' : '展开'); |
|---|
| | | const toggleStepList = (item: any) => { |
|---|
| | | item.isShow = !item.isShow; |
|---|
| | | }; |
|---|
| | | |
|---|
| | | //#endregion |
|---|
| | | |
|---|
| | | let questionRes = null; |
|---|
| | | let position = null; |
|---|
| | | const preQuestion = ref(null); |
|---|
| | | |
|---|
| | | let lastAxiosSource: CancelTokenSource = null; |
|---|
| | | const questionAi = async (text) => { |
|---|
| | |
|---|
| | | currentSampleId = ''; |
|---|
| | | } |
|---|
| | | |
|---|
| | | resetStep(); |
|---|
| | | let lastTimestamp = new Date().getTime(); |
|---|
| | | questionRes = {}; |
|---|
| | | let lastIsResult = false; |
|---|
| | |
|---|
| | | computedMessageList.value.at(-1).stepGroup.forEach((item) => { |
|---|
| | | item.isShow = false; |
|---|
| | | }); |
|---|
| | | |
|---|
| | | resetStep(); |
|---|
| | | }); |
|---|
| | | }); |
|---|
| | | |
|---|
| | |
|---|
| | | lastAxiosSource?.cancel(); |
|---|
| | | isTalking.value = false; |
|---|
| | | chatListLoading.value = false; |
|---|
| | | resetStep(); |
|---|
| | | |
|---|
| | | computedMessageList.value.at(-1).isStopMsg = true; |
|---|
| | | }; |
|---|
| | | |
|---|
| | |
|---|
| | | messageContent.value.values = history_data.value[currentIndex.value].content.values; |
|---|
| | | }; |
|---|
| | | //#endregion |
|---|
| | | const { |
|---|
| | | copyClick, |
|---|
| | | likeClick, |
|---|
| | | unLikeClick, |
|---|
| | | feedbackPosition, |
|---|
| | | feedbackIsShow, |
|---|
| | | feedbackContent, |
|---|
| | | feedbackPanelRef, |
|---|
| | | currentFeedbackMapItem, |
|---|
| | | feedbackClick, |
|---|
| | | askMoreClick, |
|---|
| | | fixQuestionClick, |
|---|
| | | preQuestion, |
|---|
| | | showFixQuestion, |
|---|
| | | showAskMore, |
|---|
| | | } = useAssistantContentOpt({ |
|---|
| | | sendChatMessage, |
|---|
| | | displayMessageList: computedMessageList, |
|---|
| | | const showAskMore = computed(() => { |
|---|
| | | if (!computedMessageList.value || computedMessageList.value.length === 0) return false; |
|---|
| | | const last = computedMessageList.value.at(-1); |
|---|
| | | const isShow = last?.role === RoleEnum.assistant && last?.content?.values && last.content?.askMoreList?.length > 0; |
|---|
| | | const result = isShow && !isSharePage.value; |
|---|
| | | return result; |
|---|
| | | }); |
|---|
| | | const askMoreClick = (item) => { |
|---|
| | | if (!item.question) return; |
|---|
| | | sendChatMessage({ type: AnswerType.Text, values: item.question }); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | //#region ====================== 侧边栏drawer ====================== |
|---|
| | | const drawerIsShow = ref(false); |
|---|
| | |
|---|
| | | //#region ====================== 分享 ====================== |
|---|
| | | |
|---|
| | | const shareLinkDlgRef = useCompRef(ShareLinkDlg); |
|---|
| | | const isShareCheck = ref(false); |
|---|
| | | |
|---|
| | | const shareClick = async (item: ChatMessage) => { |
|---|
| | | shareLinkDlgRef.value.openShare(item); |
|---|
