| | |
| | | :loading="chatListLoading" |
| | | :more-is-loading="moreIsLoading" |
| | | :is-share-page="isSharePage" |
| | | :chat-width="chatWidth" |
| | | ref="containerRef" |
| | | @autoSendMessage="autoSendMessage" |
| | | > |
| | | <!-- 消息列表 --> |
| | | <template #message-list> |
| | |
| | | :msgList="computedMessageList" |
| | | :isTalking="isTalking" |
| | | @shareClick="shareClick" |
| | | @setCommonQuestionClick="setCommonQuestionClick" |
| | | @setCommonQuestionClick="setCommonPhraseClick" |
| | | @sendChatMessage="sendChatMessage" |
| | | @stopGenClick="stopGenClick" |
| | | @askMoreClick="askMoreClick" |
| | | /> |
| | | <el-empty v-else-if="isSharePage && !chatListLoading" :image-size="200"> |
| | |
| | | |
| | | <!-- 输入区域 --> |
| | | <template #input-area> |
| | | <PlayBar |
| | | v-model:voicePageIsShow="voicePageIsShow" |
| | | :isTalking="isTalking" |
| | | :isHome="false" |
| | | v-model="messageContent.values" |
| | | @sendClick="sendClick" |
| | | @showUpChatClick="showUpChatClick" |
| | | @stopGenClick="stopGenClick" |
| | | @showDownChatClick="showDownChatClick" |
| | | :style="{ width: chatWidth }" |
| | | :setCommonQuestionInfo="setCommonQuestionInfo" |
| | | /> |
| | | <div class="w-full"> |
| | | <PlayBar |
| | | ref="playBarRef" |
| | | v-model:voicePageIsShow="voicePageIsShow" |
| | | :isTalking="isTalking" |
| | | :isHome="false" |
| | | :msgList="computedMessageList" |
| | | v-model="messageContent.values" |
| | | @sendClick="sendClick" |
| | | @stopGenClick="stopGenClick" |
| | | :style="{ width: chatWidth }" |
| | | class="mx-auto" |
| | | /> |
| | | </div> |
| | | </template> |
| | | |
| | | <!-- 抽屉 --> |
| | |
| | | <script setup lang="ts"> |
| | | import type { CancelTokenSource } from 'axios'; |
| | | import axios from 'axios'; |
| | | import { orderBy } from 'lodash-es'; |
| | | import { ElMessage } from 'element-plus'; |
| | | import moment from 'moment'; |
| | | import { computed, onActivated, onMounted, ref } from 'vue'; |
| | | import { v4 as uuidv4 } from 'uuid'; |
| | | import { computed, nextTick, onActivated, onMounted, ref } from 'vue'; |
| | | import { loadAmisSource } from '../amis/load'; |
| | | import { convertProcessItem, convertProcessToStep, formatShowTimeYear, useScrollLoad } from './hooks/useScrollLoad'; |
| | | import ChatContainer from './components/ChatContainer.vue'; |
| | | import { getKnowledgePlainText } from './components/playBar/hook/useDigitalHuman'; |
| | | import ShareLinkDlg from './components/shareLink/index.vue'; |
| | | import type { SendMsg } from './hooks/types'; |
| | | import { useLoadData } from './hooks/useLoadData'; |
| | | import { useScrollLoad } from './hooks/useScrollLoad'; |
| | | import { useSyncMsg } from './hooks/useSyncMsg'; |
| | | import MessageList from './messageList/index.vue'; |
| | | import type { ChatContent } from './model/types'; |
| | | import { AnswerState, AnswerType, RoleEnum, type ChatMessage } from './model/types'; |
| | | import type { QuestionLifecycle } from './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 ChatContainer from './components/ChatContainer.vue'; |
| | | import ShareLinkDlg from './components/shareLink/index.vue'; |
| | | import router from '/@/router'; |
| | | import MessageList from './messageList/index.vue'; |
| | | import { |
| | | activeChatRoom, |
| | | activeGroupType, |
| | |
| | | isSharePage, |
| | | roomConfig, |
| | | } from '/@/stores/chatRoom'; |
| | | import { ParentRegister } from '/@/stores/global'; |
| | | import emitter from '/@/utils/mitt'; |
| | | import { deepClone } from '/@/utils/other'; |
| | | import { useCompRef } from '/@/utils/types'; |
| | | import { toMyFixed } from '/@/utils/util'; |
| | | import { toFormData, toMyFixed } from '/@/utils/util'; |
| | | |
| | | const containerRef = useCompRef(ChatContainer); |
| | | const chatListDom = computed(() => containerRef.value?.chatListDom); |
| | | const chatWidth = '75%'; |
| | | |
| | | const scrollToBottom = () => { |
| | | containerRef.value?.scrollToBottom(); |
| | | }; |
| | | const { |
| | | loadReplyData, |
| | | parseContent, |
| | | parseExtraContent, |
| | | convertProcessItem, |
| | | convertProcessToStep, |
| | | convertAttach, |
| | | formatShowTimeYear, |
| | | getStepGroupList, |
| | | } = useLoadData(); |
| | | const voicePageIsShow = ref(false); |
| | | let isTalking = ref(false); |
| | | |
| | | const chatWidth = computed(() => containerRef.value?.chatWidth); |
| | | let messageContent = ref<ChatContent>({ |
| | | type: AnswerType.Text, |
| | | values: '', |
| | |
| | | return messageList.value.filter((v) => !!v); |
| | | }); |
| | | |
| | | const parseExtraContent = (res) => { |
| | | if (!res) return {}; |
| | | const askMoreList = orderBy(res.context_history, [(item) => Number(item.radio)], ['desc']); |
| | | const errCode = res?.err_code; |
| | | const errMsg = res?.json_msg; |
| | | const origin = res; |
| | | |
| | | return { |
| | | askMoreList, |
| | | errCode, |
| | | errMsg, |
| | | origin, |
| | | }; |
| | | }; |
| | | |
| | | const parseContent = (res, reportIsShow = false, extraContent?) => { |
| | | if (!res) return null; |
| | | let content: ChatContent = { |
| | | type: AnswerType.Text, |
| | | values: '解析失败!', |
| | | }; |
| | | if (res.type) { |
| | | res.answer_type = res.type; |
| | | } |
| | | const curExtraContent = parseExtraContent(res); |
| | | |
| | | switch (res.answer_type) { |
| | | case AnswerType.RecordSet: |
| | | content = { |
| | | type: AnswerType.RecordSet, |
| | | values: res.values, |
| | | }; |
| | | break; |
| | | case AnswerType.Text: |
| | | content = { |
| | | type: AnswerType.Text, |
| | | values: res.values ?? res.answer, |
| | | }; |
| | | break; |
| | | case AnswerType.Script: |
| | | content = { |
| | | type: AnswerType.Script, |
| | | values: res, |
| | | }; |
| | | break; |
| | | |
| | | case AnswerType.Knowledge: |
| | | content = { |
| | | type: AnswerType.Knowledge, |
| | | values: res.knowledge, |
| | | }; |
| | | |
| | | break; |
| | | case AnswerType.Report: |
| | | content = { |
| | | type: AnswerType.Report, |
| | | values: (res?.reports ?? []).map((item) => ({ |
| | | content: parseContent(item, reportIsShow, { origin: item, conclusion: item.conclusion ?? [] }), |
| | | })), |
| | | }; |
| | | break; |
| | | |
| | | case AnswerType.Summary: |
| | | content = { |
| | | type: AnswerType.Summary, |
| | | values: res.summary?.map((item) => { |
| | | item.reportIsShow = reportIsShow; |
| | | return item; |
| | | }), |
| | | }; |
| | | break; |
| | | case AnswerType.Url: |
| | | content = { |
| | | type: AnswerType.Url, |
| | | values: res.url, |
| | | }; |
| | | break; |
| | | case AnswerType.Map: |
| | | content = { |
| | | type: AnswerType.Map, |
| | | values: res.values, |
| | | }; |
| | | break; |
| | | default: |
| | | content = { |
| | | type: AnswerType.Text, |
| | | values: '解析失败!', |
| | | }; |
| | | break; |
| | | } |
| | | if (!extraContent) { |
| | | content = { |
| | | ...content, |
| | | ...curExtraContent, |
| | | }; |
| | | } else { |
| | | content = { |
| | | ...content, |
| | | ...extraContent, |
| | | }; |
| | | } |
| | | |
| | | return content; |
| | | }; |
| | | |
| | | let questionRes = null; |
| | | let position = null; |
| | | const preQuestion = ref(null); |
| | | |
| | | let lastAxiosSource: CancelTokenSource = null; |
| | | const questionAi = async (text) => { |
| | | |
| | | // 通过修改 isTalking 来触发更新 |
| | | const triggerRefresh = () => { |
| | | isTalking.value = !isTalking.value; |
| | | |
| | | nextTick(() => { |
| | | isTalking.value = !isTalking.value; |
| | | }); |
| | | }; |
| | | |
| | | const enableCallback = ref(false); |
| | | |
| | | let streamOutputIsStart = false; |
| | | let position: Position = null; |
| | | |
| | | const questionAi = async (text: string, lifecycleCall?: QuestionLifecycle) => { |
| | | let judgeParams = null; |
| | | if (!preQuestion.value) { |
| | | judgeParams = {}; |
| | |
| | | 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(','); |
| | | const tableList = attachList.value.filter((item) => item.type === 'table').map((item) => item.model); |
| | | if (tableList?.length > 0) { |
| | | params.tables = JSON.stringify(tableList); |
| | | } |
| | | |
| | | const metricList = attachList.value.filter((item) => item.type === 'metric').map((item) => item.model); |
| | | if (metricList?.length > 0) { |
| | | params.metrics = JSON.stringify(metricList); |
| | | } |
| | | // if (!position) { |
| | | // const loadingInstance = ElLoadingService({ |
| | | // text: '获取位置中...', |
| | | // target: '.layout-parent', |
| | | // fullscreen:false, |
| | | // }); |
| | | // position = await getCurrentPosition().finally(() => { |
| | | // loadingInstance.close(); |
| | | // }); |
| | | // } |
| | | |
| | | // if (position) { |
| | | // const { latitude, longitude } = position; |
| | | // params.cur_pos = [longitude, latitude].join(','); |
| | | // } |
| | | |
| | | if (activeGroupType.value) { |
| | | params.group_type = activeGroupType.value; |
| | |
| | | params.sample_id = currentSampleId; |
| | | currentSampleId = ''; |
| | | } |
| | | |
| | | const formDataParams = toFormData(params); |
| | | const fileList = attachList.value.filter((item) => item.type === 'file').map((item) => item.model); |
| | | for (const item of fileList) { |
| | | formDataParams.append('files', item.file); |
| | | } |
| | | // clearAttach(); |
| | | let lastTimestamp = new Date().getTime(); |
| | | questionRes = {}; |
| | | let lastIsResult = false; |
| | |
| | | }; |
| | | const checkReportEmpty = () => { |
| | | const isEmpty = !questionRes?.reports || questionRes?.reports?.length === 0; |
| | | |
| | | return isEmpty; |
| | | }; |
| | | questionStreamByPost( |
| | | params, |
| | | formDataParams, |
| | | (chunkRes) => { |
| | | Logger.info('chunk response:\n\n' + JSON.stringify(chunkRes)); |
| | | |
| | | if (chunkRes.mode === 'result') { |
| | | lastIsResult = true; |
| | | const res = chunkRes.value; |
| | | |
| | | if (chunkRes.value?.answer_type === 'knowledge') { |
| | | lifecycleCall?.receiveText?.(getKnowledgePlainText(chunkRes.value)); |
| | | } |
| | | if (checkReportEmpty()) { |
| | | const resReport = getResReport(); |
| | | resReport.reports.push(res); |
| | | questionRes = resReport; |
| | | // resReport.reports = resReport.reports.concat([]); |
| | | resolve(resReport); |
| | | } else { |
| | | const lastMsg = computedMessageList.value.at(-1); |
| | | |
| | | // lastMsg.content.values = lastMsg.content.values.concat([]); |
| | | // 已经解析过一次 reports |
| | | if (!lastMsg.content.values) { |
| | | lastMsg.content.values = []; |
| | | } |
| | | |
| | | lastMsg.content.values.push({ |
| | | content: parseContent(res, true, { |
| | | origin: res, |
| | | }), |
| | | }); |
| | | } |
| | | triggerRefresh(); |
| | | return; |
| | | // chunkRes.value = '准备数据分析'; |
| | | } |
| | | |
| | | if (chunkRes.mode === 'main_frame') { |
| | | const jsonObj = JSON.parse(chunkRes.value); |
| | | if (!enableCallback.value) { |
| | | return; |
| | | } |
| | | |
| | | ParentRegister.notify?.({ |
| | | type: 'main_frame', |
| | | value: jsonObj, |
| | | }); |
| | | return; |
| | | } |
| | | |
| | | if (chunkRes.mode === 'create_work_order') { |
| | | const lastMsg = computedMessageList.value.at(-1); |
| | | lastMsg.modeContent = chunkRes; |
| | | triggerRefresh(); |
| | | return; |
| | | } |
| | | |
| | | if (chunkRes.mode === 'summary') { |
| | |
| | | |
| | | if (chunkRes.mode === 'conclusion') { |
| | | const lastReport = computedMessageList.value.at(-1)?.content?.values?.at(-1); |
| | | |
| | | if (lastReport) { |
| | | lastReport.conclusion = chunkRes.value; |
| | | chunkRes.value = '分析结束'; |
| | | } |
| | | chunkRes.value = '分析结束'; |
| | | } |
| | | const getLastGroup = () => { |
| | | const lastGroup = computedMessageList.value.at(-1).stepGroup[0]; |
| | | return lastGroup; |
| | | }; |
| | | const getLastStepList = () => { |
| | | const stepList = getLastGroup()?.value ?? []; |
| | | return stepList; |
| | | }; |
| | | const getLastStepItem = () => { |
| | | const stepList = getLastStepList(); |
| | | const lastStepItem = stepList.at(-1); |
| | | return lastStepItem; |
| | | }; |
| | | |
| | | const checkStepItem = (stepItem) => { |
| | | if (!stepItem.subStep) { |
| | | stepItem.subStep = []; |
| | | } |
| | | }; |
| | | |
| | | if (chunkRes.mode === 'question') { |
| | | const lastGroup = computedMessageList.value.at(-1).stepGroup.at(-1); |
| | | const stepList = lastGroup?.value ?? []; |
| | | const lastStepItem = stepList.at(-1); |
| | | if (!lastStepItem.subStep) { |
| | | lastStepItem.subStep = []; |
| | | } |
| | | const lastStepItem = getLastStepItem(); |
| | | checkStepItem(lastStepItem); |
| | | lastStepItem.subStep.push({ |
| | | type: chunkRes.value.type, |
| | | data: chunkRes.value, |
| | |
| | | scrollToBottom(); |
| | | return; |
| | | } |
| | | // 暂时不考虑多个 report情况 |
| | | |
| | | // if (lastIsResult && chunkRes.mode !== 'finish') { |
| | | // // 开始增加新的 stepGroup |
| | | // computedMessageList.value.at(-1).stepGroup.push({ |
| | | // value: [], |
| | | // isShow: true, |
| | | // }); |
| | | // lastIsResult = false; |
| | | // } |
| | | const lastGroup = computedMessageList.value.at(-1).stepGroup.at(-1); |
| | | // 暂时不考虑多个 report 情况 |
| | | |
| | | if (lastIsResult && chunkRes.mode !== 'finish') { |
| | | // const lastTow = computedMessageList.value.at(-1); |
| | | // lastTow.stepGroup.at(-1).value.at(-1).finishLoading = true; |
| | | // lastTow.content.values = lastTow.content.values.concat([]); |
| | | |
| | | // 开始增加新的 stepGroup,后续的 stepGroup 并没有实际作用,只是为了做迭代用,迭代出组件,屎山代码实在太难改了!!! |
| | | computedMessageList.value.at(-1).stepGroup.push({ |
| | | value: [], |
| | | isShow: true, |
| | | }); |
| | | lastIsResult = false; |
| | | } |
| | | const lastGroup = getLastGroup(); |
| | | const stepList = lastGroup?.value ?? []; |
| | | const currentTimeStamp = new Date().getTime(); |
| | | const ms = toMyFixed(currentTimeStamp - lastTimestamp, 2) + ' ms'; |
| | | if (chunkRes.mode === 'finish') { |
| | | const ms = toMyFixed(currentTimeStamp - lastTimestamp, 2) + ' ms'; |
| | | stepList.at(-1).ms = ms; |
| | | isTalking.value = false; |
| | | |
| | | streamOutputIsStart = false; |
| | | lifecycleCall?.finish?.(); |
| | | return; |
| | | } |
| | | |
| | | if (stepList?.length >= 1) { |
| | | if (stepList?.length >= 1 && !streamOutputIsStart) { |
| | | const ms = toMyFixed(currentTimeStamp - lastTimestamp, 2) + ' ms'; |
| | | |
| | | stepList.at(-1).ms = ms; |
| | | } |
| | | |
| | | if (!streamOutputIsStart) { |
| | | lastTimestamp = currentTimeStamp; |
| | | } |
| | | if (!streamOutputIsStart) { |
| | | const stepItem = convertProcessItem(chunkRes); |
| | | stepList.push(stepItem); |
| | | } else { |
| | | const stepGroup = computedMessageList.value.at(-1).stepGroup; |
| | | if (stepGroup.length > 1) { |
| | | const lastStepList = stepGroup.at(-2).value; |
| | | lastStepList.at(-1).ms = ms; |
| | | const lastItem = stepList.at(-1); |
| | | if (lastItem) { |
| | | lastItem.title += chunkRes.value ?? ''; |
| | | } |
| | | } |
| | | lastTimestamp = currentTimeStamp; |
| | | const stepItem = convertProcessItem(chunkRes); |
| | | |
| | | stepList.push(stepItem); |
| | | if (chunkRes.mode === 'begin_stream') { |
| | | streamOutputIsStart = true; |
| | | lastTimestamp = currentTimeStamp; |
| | | } |
| | | if (chunkRes.mode === 'end_stream') { |
| | | streamOutputIsStart = false; |
| | | } |
| | | |
| | | // 强制触发更新 |
| | | |
| | | scrollToBottom(); |
| | |
| | | const content = parseContent(questionRes, true); |
| | | return content; |
| | | }; |
| | | |
| | | const clearMessageContent = () => |
| | | (messageContent.value = { |
| | | const playBarRef = useCompRef(PlayBar); |
| | | const attachList = computed(() => playBarRef.value?.attachList ?? []); |
| | | const clearMessageContent = () => { |
| | | messageContent.value = { |
| | | type: AnswerType.Text, |
| | | values: '', |
| | | }); |
| | | }; |
| | | }; |
| | | |
| | | let currentSampleId = ''; |
| | | |
| | | let currentLLMId = null; |
| | | |
| | | const stopGenClick = () => { |
| | | const resetTalking = () => { |
| | | lastAxiosSource?.cancel(); |
| | | isTalking.value = false; |
| | | chatListLoading.value = false; |
| | | streamOutputIsStart = false; |
| | | }; |
| | | |
| | | const stopGenClick = () => { |
| | | resetTalking(); |
| | | if (isFrontQuestion) { |
| | | ParentRegister.notify?.({ |
| | | type: 'msg_stop', |
| | | }); |
| | | } |
| | | |
| | | computedMessageList.value.at(-1).isStopMsg = true; |
| | | }; |
| | | |
| | | const finishFrontQuestion = () => { |
| | | resetTalking(); |
| | | ParentRegister.updateChildCallObj('sendMsg', null); |
| | | }; |
| | | |
| | | const checkCanSend = (content: ChatContent = messageContent.value) => { |
| | |
| | | |
| | | const addChatItem = (content: ChatContent) => { |
| | | isTalking.value = true; |
| | | const userItem: ChatMessage = { role: RoleEnum.user, content, isChecked: false } as any; |
| | | const userItem: ChatMessage = { role: RoleEnum.user, content, isChecked: false, attachList: deepClone(attachList.value) } as any; |
| | | const assistantItem: ChatMessage = { |
| | | role: RoleEnum.assistant, |
| | | content: { |
| | | type: AnswerType.Report, |
| | | values: [], |
| | | }, |
| | | state: AnswerState.Null, |
| | | stepGroup: [ |
| | |
| | | isShow: true, |
| | | }, |
| | | ], |
| | | |
| | | isStopMsg: false, |
| | | isChecked: false, |
| | | } as any; |
| | |
| | | return [userItem, assistantItem]; |
| | | }; |
| | | |
| | | const sendChatMessage = async (content: ChatContent = messageContent.value) => { |
| | | /** |
| | | * 清除附件 |
| | | */ |
| | | const clearAttach = () => { |
| | | playBarRef.value?.clearAttach(); |
| | | }; |
| | | |
| | | const updateUserInfo = (userItem: ChatMessage, other: { historyId: string; question: string }) => { |
| | | userItem.historyId = other.historyId; |
| | | const current = moment().format('YYYY-MM-DD HH:mm:ss'); |
| | | userItem.createTime = current; |
| | | userItem.content.values = other.question ?? userItem.content.values; |
| | | }; |
| | | |
| | | const updateAssistantInfo = ( |
| | | assistantItem: ChatMessage, |
| | | resMsgContent: ChatContent, |
| | | other: { historyId: string; question: string } |
| | | ) => { |
| | | const current = moment().format('YYYY-MM-DD HH:mm:ss'); |
| | | |
| | | assistantItem.historyId = other.historyId; |
| | | const currentTime = formatShowTimeYear(current); |
| | | assistantItem.createTime = currentTime; |
| | | assistantItem.content = resMsgContent; |
| | | }; |
| | | |
| | | const updateInfo = ( |
| | | userItem: ChatMessage, |
| | | assistantItem: ChatMessage, |
| | | resMsgContent: ChatContent, |
| | | other: { |
| | | historyId: string; |
| | | question: string; |
| | | } |
| | | ) => { |
| | | updateUserInfo(userItem, other); |
| | | updateAssistantInfo(assistantItem, resMsgContent, other); |
| | | }; |
| | | |
| | | const handleAfterQuestion = ( |
| | | userItem: ChatMessage, |
| | | assistantItem: ChatMessage, |
| | | resMsgContent: ChatContent, |
| | | other: { historyId: string; question: string } |
| | | ) => { |
| | | updateLoadIndex(); |
| | | updateInfo(userItem, assistantItem, resMsgContent, other); |
| | | setTimeout(() => { |
| | | // 收到回复,继续滚 |
| | | scrollToBottom(); |
| | | }, 300); |
| | | }; |
| | | const sendChatMessage = async (content: ChatContent = messageContent.value, lifecycleCall?: QuestionLifecycle) => { |
| | | if (!checkCanSend(content)) { |
| | | return; |
| | | } |
| | | isFrontQuestion = false; |
| | | const isNewChat = messageList.value.length === 0; |
| | | if (isNewChat) { |
| | | if (activeSampleId.value) { |
| | |
| | | |
| | | try { |
| | | const [userItem, assistantItem] = addChatItem(content); |
| | | |
| | | resMsgContent = await questionAi(content.values); |
| | | |
| | | updateLoadIndex(); |
| | | |
| | | userItem.historyId = questionRes?.history_id; |
| | | userItem.content.values = questionRes?.question ?? userItem.content.values; |
| | | assistantItem.historyId = questionRes?.history_id; |
| | | const currentTime = formatShowTimeYear(moment().format('YYYY-MM-DD HH:mm:ss')); |
| | | assistantItem.createTime = currentTime; |
| | | assistantItem.content = resMsgContent; |
| | | setTimeout(() => { |
| | | // 收到回复,继续滚 |
| | | scrollToBottom(); |
| | | }, 300); |
| | | resMsgContent = await questionAi(content.values, lifecycleCall); |
| | | handleAfterQuestion(userItem, assistantItem, resMsgContent, { |
| | | historyId: questionRes?.history_id, |
| | | question: questionRes?.question, |
| | | }); |
| | | } catch (error: any) {} |
| | | }; |
| | | let isFrontQuestion = false; |
| | | const sendFrontChatMessage = async (content: ChatContent = messageContent.value): Promise<any> => { |
| | | isFrontQuestion = true; |
| | | const [userItem, assistantItem] = addChatItem(content); |
| | | const promise = new Promise((resolve, reject) => { |
| | | const receiveMsg = (msg: SendMsg) => { |
| | | console.log('receiveMsg', msg); |
| | | if (!assistantItem.content?.values) { |
| | | assistantItem.content.values = []; |
| | | } |
| | | switch (msg.type) { |
| | | case 'text': |
| | | // 开始增加新的 stepGroup,后续的 stepGroup 并没有实际作用,只是为了做迭代用,迭代出组件,屎山代码实在太难改了!!! |
| | | assistantItem.stepGroup.push({ |
| | | value: [], |
| | | isShow: true, |
| | | }); |
| | | |
| | | assistantItem.content.values.push({ |
| | | content: { |
| | | type: 'knowledge', |
| | | values: [ |
| | | { |
| | | answer: msg.value, |
| | | }, |
| | | ], |
| | | }, |
| | | }); |
| | | break; |
| | | |
| | | case 'select': |
| | | case 'confirm': |
| | | case 'input': |
| | | // 开始增加新的 stepGroup,后续的 stepGroup 并没有实际作用,只是为了做迭代用,迭代出组件,屎山代码实在太难改了!!! |
| | | assistantItem.stepGroup.push({ |
| | | value: [], |
| | | isShow: true, |
| | | }); |
| | | assistantItem.content.values.push({ |
| | | content: { |
| | | type: 'content_cb', |
| | | values: msg, |
| | | }, |
| | | }); |
| | | break; |
| | | case 'info': |
| | | if (msg.value === 'finish') { |
| | | finishFrontQuestion(); |
| | | return resolve({ userItem, assistantItem, resMsgContent: assistantItem.content }); |
| | | } |
| | | break; |
| | | default: |
| | | break; |
| | | } |
| | | scrollToBottom(); |
| | | |
| | | triggerRefresh(); |
| | | }; |
| | | ParentRegister.updateChildCallObj('sendMsg', receiveMsg); |
| | | }); |
| | | return promise; |
| | | }; |
| | | |
| | | const questionSelf = (content: string) => { |
| | | const myContent = { type: AnswerType.Text, values: content }; |
| | | |
| | | if (!checkCanSend(myContent)) { |
| | | return false; |
| | | } |
| | | sendFrontChatMessage(myContent).then(({ userItem, assistantItem, resMsgContent }) => { |
| | | handleAfterQuestion(userItem, assistantItem, resMsgContent, { |
| | | historyId: uuidv4(), |
| | | question: content, |
| | | }); |
| | | }); |
| | | return true; |
| | | }; |
| | | |
| | | const backQuestion = (content: { question: string; data: any }) => { |
| | | sendChatMessage({ type: AnswerType.Text, values: content.question }); |
| | | }; |
| | | |
| | | ParentRegister.updateChildCallObj('frontQuestion', questionSelf); |
| | | ParentRegister.updateChildCallObj('backQuestion', backQuestion); |
| | | |
| | | const sendClick = () => { |
| | | sendChatMessage(messageContent.value); |
| | | }; |
| | | |
| | | const autoSendMessage = (question: string, lifecycleCall?: QuestionLifecycle) => { |
| | | messageContent.value.values = question; |
| | | sendChatMessage(messageContent.value, lifecycleCall); |
| | | }; |
| | | |
| | | const { loadRangeData, onChatListScroll, moreIsLoading, updateLoadIndex } = useScrollLoad({ |
| | | container: chatListDom, |
| | | historyGroupId: currentRouteId, |
| | | messageList, |
| | | parseAnswerContent: parseContent, |
| | | loadReplyData, |
| | | }); |
| | | |
| | | useSyncMsg({ |
| | | msgList: messageList, |
| | | updateLoadIndex, |
| | | historyGroupId: currentRouteId, |
| | | checkCanSync: (data) => { |
| | | return !isTalking.value && !moreIsLoading.value; |
| | | }, |
| | | showTip: (data) => { |
| | | playBarRef.value.showSyncTip(data); |
| | | }, |
| | | loadReplyData, |
| | | scrollToBottom, |
| | | }); |
| | | const chatListLoading = ref(true); |
| | | |
| | | onActivated(() => { |
| | |
| | | values: activeChatRoom.value?.title, |
| | | }; |
| | | sendChatMessage(); |
| | | }; |
| | | const scrollToBottom = () => { |
| | | containerRef.value?.scrollToBottom(); |
| | | }; |
| | | |
| | | const initHistoryChat = () => { |
| | |
| | | type: AnswerType.Text, |
| | | values: msgValue.question, |
| | | }, |
| | | attachList: convertAttach(msgValue), |
| | | isChecked: false, |
| | | }; |
| | | |
| | |
| | | historyId: msgValue.history_id, |
| | | role: RoleEnum.assistant, |
| | | content: parseContent(msgValue), |
| | | stepGroup: (msgValue?.reports ?? []).map((item) => ({ |
| | | value: convertProcessToStep(item?.exec_process), |
| | | isShow: false, |
| | | })), |
| | | stepGroup: getStepGroupList(msgValue?.reports ?? []), |
| | | |
| | | isStopMsg: false, |
| | | |
| | | conclusion: msgValue.conclusion ?? [], |
| | |
| | | loadAmisSource(); |
| | | }); |
| | | |
| | | //#region ====================== 光标输入上下箭头显示历史消息 ====================== |
| | | const currentIndex = ref(null); |
| | | const history_data = computed(() => { |
| | | return computedMessageList.value.filter((item) => item.role === RoleEnum.user); |
| | | }); |
| | | //显示上一条消息 |
| | | const showUpChatClick = () => { |
| | | if (computedMessageList.value.length === 0) return; |
| | | 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; |
| | | } |
| | | messageContent.value.values = history_data.value[currentIndex.value].content.values; |
| | | }; |
| | | //显示下一条消息 |
| | | 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 { |
| | | currentIndex.value = (currentIndex.value + 1) % history_data.value.length; |
| | | } |
| | | messageContent.value.values = history_data.value[currentIndex.value].content.values; |
| | | }; |
| | | //#endregion |
| | | 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 }); |
| | |
| | | messageContent.value.values = content; |
| | | }; |
| | | //#endregion |
| | | //#region ====================== 用户询问的问题设置为常用语 ====================== |
| | | const setCommonQuestionInfo = ref({}); |
| | | |
| | | //用户问题设置为常用语 |
| | | const setCommonQuestionClick = (item) => { |
| | | setCommonQuestionInfo.value = item; |
| | | const setCommonPhraseClick = (item) => { |
| | | playBarRef.value.addPhrase(item); |
| | | }; |
| | | //#endregion |
| | | |
| | | //#region ====================== 分享 ====================== |
| | | |
| | |
| | | </script> |
| | | |
| | | <style scoped lang="scss"> |
| | | pre { |
| | | font-family: -apple-system, 'Noto Sans', 'Helvetica Neue', Helvetica, 'Nimbus Sans L', Arial, 'Liberation Sans', 'PingFang SC', |
| | | 'Hiragino Sans GB', 'Noto Sans CJK SC', 'Source Han Sans SC', 'Source Han Sans CN', 'Microsoft YaHei', 'Wenquanyi Micro Hei', |
| | | 'WenQuanYi Zen Hei', 'ST Heiti', SimHei, 'WenQuanYi Zen Hei Sharp', sans-serif; |
| | | } |
| | | |
| | | .more-loading { |
| | | :deep(.el-loading-spinner) { |
| | | --loading-size: 35px; |
| | | margin-top: 0; |
| | | .circular { |
| | | width: var(--loading-size); |
| | | height: var(--loading-size); |
| | | } |
| | | } |
| | | } |
| | | |
| | | :deep(.el-step__icon.is-text) { |
| | | --radius-size: 24px; |
| | | width: var(--radius-size); |
| | | height: var((--radius-size)); |
| | | } |
| | | |
| | | :deep(.el-step__icon-inner) { |
| | | font-size: 16px !important; |
| | | } |
| | | :deep(.el-step__description) { |
| | | min-height: 20px; |
| | | } |
| | | |
| | | :deep(.el-step:last-of-type .el-step__description) { |
| | | // display: none; |
| | | } |
| | | @import './index.scss'; |
| | | </style> |