| | |
| | | <template> |
| | | <div class="flex flex-col h-full"> |
| | | <div class="h-full flex flex-col items-center overflow-y-auto"> |
| | | <div ref="chatListDom" class="h-full" :style="{width:chatWidth}"> |
| | | <div ref="chatListDom" class="h-full" :style="{ width: chatWidth }"> |
| | | <div |
| | | class="group flex px-4 py-6 hover:bg-slate-100 rounded-lg" |
| | | :class="{ 'flex-row-reverse': item.role === RoleEnum.user }" |
| | |
| | | srcset="" |
| | | /> |
| | | |
| | | <div class="flex" :class="{ 'w-full': item.role === RoleEnum.assistant }"> |
| | | <div class="inline-flex flex-col" :class="{ 'w-full': item.role === RoleEnum.assistant }"> |
| | | <div class="relative w-full" v-if="item.content?.values"> |
| | | <div |
| | | class="text-sm rounded-[6px] p-4 leading-relaxed " |
| | | :style="{backgroundColor:item.role ===RoleEnum.user? 'rgb(197 224 255)':'white'}" |
| | | class="text-sm rounded-[6px] p-4 leading-relaxed" |
| | | :style="{ backgroundColor: item.role === RoleEnum.user ? 'rgb(197 224 255)' : 'white' }" |
| | | > |
| | | <component :is="answerTypeMapCom[item.content.type]" :data="item.content.values" :error="item.content.error" /> |
| | | <div v-if="item.content.errCode === ErrorCode.Message" class="text-red-500 w-full">{{ item.content.msg }}</div> |
| | | <component v-else :is="answerTypeMapCom[item.content.type]" :data="item.content.values" /> |
| | | </div> |
| | | |
| | | <div v-if="item.role === RoleEnum.assistant" class="absolute flex items-center right-0 mr-2 mt-2 space-x-2"> |
| | |
| | | </div> |
| | | </div> |
| | | |
| | | <Loding v-else :process="process" /> |
| | | <Loding v-else class="w-12" :process="process" /> |
| | | </div> |
| | | </div> |
| | | <div v-if="showAskMore" class="ml-4 mt-5 text-sm"> |
| | | <div class="text-gray-600 mb-5">你可以继续问我:</div> |
| | | <div class="space-y-2 inline-flex flex-col"> |
| | | <div |
| | | v-for="item in computedMessageList.at(-1).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> |
| | | |
| | | <div class="sticky bottom-0 w-full p-6 pb-8 bg-[rgb(247,248,250)] flex justify-center"> |
| | | <PlayBar :isTalking="isTalking" v-model="messageContent.values" @sendClick="sendChatMessage" :style="{width:chatWidth}"></PlayBar> |
| | | <PlayBar |
| | | :isTalking="isTalking" |
| | | v-model="messageContent.values" |
| | | @sendClick="sendChatMessage" |
| | | :style="{ width: chatWidth }" |
| | | ></PlayBar> |
| | | </div> |
| | | </div> |
| | | </template> |
| | |
| | | import router from '/@/router'; |
| | | import { activeChatRoom, activeLLMId, activeRoomId, activeSampleId, activeSectionAId, roomConfig } from '/@/stores/chatRoom'; |
| | | import { v4 as uuidv4 } from 'uuid'; |
| | | import _ from 'lodash'; |
| | | import { ErrorCode } from '/@/utils/request'; |
| | | |
| | | const chatWidth = '75%'; |
| | | |
| | |
| | | return messageList.value.filter((v) => v.role !== RoleEnum.system); |
| | | }); |
| | | |
| | | 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; |
| | | return isShow; |
| | | }); |
| | | |
| | | const parseContent = (res) => { |
| | | let content: ChatContent = { |
| | | type: AnswerType.Text, |
| | | values: '发生错误!', |
| | | values: '解析失败!', |
| | | }; |
| | | |
| | | switch (res.answer_type) { |
| | | case AnswerType.RecordSet: |
| | | content = { |
| | |
| | | content = { |
| | | type: AnswerType.Summary, |
| | | values: res.summary, |
| | | error: res.error ?? res.json_msg, |
| | | }; |
| | | break; |
| | | case AnswerType.Url: |
| | |
| | | default: |
| | | content = { |
| | | type: AnswerType.Text, |
| | | values: '发生错误!', |
| | | values: '解析失败!', |
| | | }; |
| | | break; |
| | | } |
| | | content.askMoreList = _.orderBy(res.context_history, [(item) => Number(item.radio)], ['desc']); |
| | | content.errCode = res?.err_code; |
| | | content.msg = res?.json_msg; |
| | | return content; |
| | | }; |
| | | //#region ====================== 查询进度 ====================== |
| | |
| | | }; |
| | | |
| | | const sendChatMessage = async (content: ChatContent = messageContent.value) => { |
| | | if (!messageContent.value?.values) return; |
| | | if (!content?.values) return; |
| | | if (messageList.value.length === 0) { |
| | | if (activeSampleId.value) { |
| | | currentSampleId = activeSampleId.value; |
| | |
| | | } |
| | | }; |
| | | |
| | | const askMoreClick = (item) => { |
| | | if (!item.question) return; |
| | | sendChatMessage({ type: AnswerType.Text, values: item.question }); |
| | | }; |
| | | |
| | | onMounted(async () => { |
| | | const res = await QueryHistoryDetail({ |
| | | history_group_id: currentRouteId, |