| | |
| | | <template> |
| | | <ChatContainer |
| | | :loading="chatListLoading" |
| | | :more-is-loading="moreIsLoading" |
| | | :is-share-page="isSharePage" |
| | | ref="containerRef" |
| | | > |
| | | <ChatContainer :loading="chatListLoading" :more-is-loading="moreIsLoading" :is-share-page="isSharePage" ref="containerRef"> |
| | | <!-- 消息列表 --> |
| | | <template #message-list> |
| | | <MessageList |
| | |
| | | |
| | | <!-- 输入区域 --> |
| | | <template #input-area> |
| | | <PlayBar |
| | | ref="playBarRef" |
| | | v-model:voicePageIsShow="voicePageIsShow" |
| | | :isTalking="isTalking" |
| | | :isHome="false" |
| | | :msgList="computedMessageList" |
| | | v-model="messageContent.values" |
| | | @sendClick="sendClick" |
| | | @stopGenClick="stopGenClick" |
| | | :style="{ width: chatWidth }" |
| | | /> |
| | | <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> |
| | | |
| | | <!-- 抽屉 --> |
| | |
| | | import axios from 'axios'; |
| | | import { orderBy } from 'lodash-es'; |
| | | import moment from 'moment'; |
| | | import { computed, onActivated, onMounted, ref } from 'vue'; |
| | | import { computed, nextTick, onActivated, onMounted, ref } from 'vue'; |
| | | import { loadAmisSource } from '../amis/load'; |
| | | import { convertProcessItem, convertProcessToStep, formatShowTimeYear, useScrollLoad } from './hooks/useScrollLoad'; |
| | | import { useScrollLoad } from './hooks/useScrollLoad'; |
| | | import type { ChatContent } from './model/types'; |
| | | 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 { triggerRef } from 'vue'; |
| | | import { ElLoadingService, ElMessage } from 'element-plus'; |
| | | import ChatContainer from './components/ChatContainer.vue'; |
| | | import ShareLinkDlg from './components/shareLink/index.vue'; |
| | | import router from '/@/router'; |
| | |
| | | } from '/@/stores/chatRoom'; |
| | | import emitter from '/@/utils/mitt'; |
| | | import { useCompRef } from '/@/utils/types'; |
| | | import { toMyFixed } from '/@/utils/util'; |
| | | import { toFormData, toMyFixed } from '/@/utils/util'; |
| | | import { useLoadData } from './hooks/useLoadData'; |
| | | import { useSyncMsg } from './hooks/useSyncMsg'; |
| | | import { getCurrentPosition } from '/@/utils/brower'; |
| | | const containerRef = useCompRef(ChatContainer); |
| | | const chatListDom = computed(() => containerRef.value?.chatListDom); |
| | | |
| | | const scrollToBottom = () => { |
| | | containerRef.value?.scrollToBottom(); |
| | | }; |
| | | const { |
| | | loadReplyData, |
| | | parseContent, |
| | | parseExtraContent, |
| | | convertProcessItem, |
| | | convertProcessToStep, |
| | | formatShowTimeYear, |
| | | getStepGroupList, |
| | | } = useLoadData(); |
| | | const voicePageIsShow = ref(false); |
| | | let isTalking = ref(false); |
| | | const chatWidth = computed(() => containerRef.value?.chatWidth); |
| | |
| | | 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; |
| | | |
| | | // 通过修改 isTalking 来触发更新 |
| | | const triggerRefresh = () => { |
| | | isTalking.value = !isTalking.value; |
| | | |
| | | nextTick(() => { |
| | | isTalking.value = !isTalking.value; |
| | | }); |
| | | }; |
| | | |
| | | let streamOutputIsStart = false; |
| | | let position: Position = null; |
| | | const questionAi = async (text) => { |
| | | let judgeParams = null; |
| | | if (!preQuestion.value) { |
| | |
| | | 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); |
| | | } |
| | | |
| | | // 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 (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 = '准备数据分析'; |
| | | } |
| | |
| | | } |
| | | } |
| | | const getLastGroup = () => { |
| | | const lastGroup = computedMessageList.value.at(-1).stepGroup.at(-1); |
| | | const lastGroup = computedMessageList.value.at(-1).stepGroup[0]; |
| | | return lastGroup; |
| | | } |
| | | }; |
| | | const getLastStepList = () => { |
| | | const stepList = getLastGroup()?.value ?? []; |
| | | return stepList; |
| | |
| | | scrollToBottom(); |
| | | return; |
| | | } |
| | | |
| | | |
| | | |
| | | // 暂时不考虑多个 report情况 |
| | | // 暂时不考虑多个 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); |
| | | 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; |
| | | 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 = ''; |
| | | |
| | |
| | | return [userItem, assistantItem]; |
| | | }; |
| | | |
| | | /** |
| | | * 清除附件 |
| | | */ |
| | | const clearAttach = () => { |
| | | playBarRef.value?.clearAttach(); |
| | | }; |
| | | |
| | | const sendChatMessage = async (content: ChatContent = messageContent.value) => { |
| | | if (!checkCanSend(content)) { |
| | | return; |
| | |
| | | |
| | | try { |
| | | const [userItem, assistantItem] = addChatItem(content); |
| | | |
| | | resMsgContent = await questionAi(content.values); |
| | | |
| | | updateLoadIndex(); |
| | | |
| | | userItem.historyId = questionRes?.history_id; |
| | | const current = moment().format('YYYY-MM-DD HH:mm:ss'); |
| | | userItem.createTime = current; |
| | | userItem.content.values = questionRes?.question ?? userItem.content.values; |
| | | assistantItem.historyId = questionRes?.history_id; |
| | | const currentTime = formatShowTimeYear(moment().format('YYYY-MM-DD HH:mm:ss')); |
| | | const currentTime = formatShowTimeYear(current); |
| | | assistantItem.createTime = currentTime; |
| | | assistantItem.content = resMsgContent; |
| | | setTimeout(() => { |
| | |
| | | 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 = () => { |
| | |
| | | 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(); |
| | | }); |
| | | |
| | | |
| | | |
| | | const askMoreClick = (item) => { |
| | | if (!item.question) return; |
| | | sendChatMessage({ type: AnswerType.Text, values: item.question }); |
| | |
| | | messageContent.value.values = content; |
| | | }; |
| | | //#endregion |
| | | const playBarRef = useCompRef(PlayBar); |
| | | //用户问题设置为常用语 |
| | | const setCommonPhraseClick = (item) => { |
| | | playBarRef.value.addPhrase(item); |