| | |
| | | :loading="chatListLoading" |
| | | :more-is-loading="moreIsLoading" |
| | | :is-share-page="isSharePage" |
| | | :is-share-check="isShareCheck" |
| | | :chat-width="chatWidth" |
| | | ref="containerRef" |
| | | > |
| | |
| | | :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> |
| | | <!-- #endregion --> |
| | | <!-- </template> --> |
| | |
| | | import { loadAmisSource } from '../amis/load'; |
| | | import FeedbackPanel from './components/FeedbackPanel.vue'; |
| | | import { useAssistantContentOpt } from './hooks/useAssistantContentOpt'; |
| | | import { convertProcessItem, useScrollLoad } from './hooks/useScrollLoad'; |
| | | import { useScrollToBottom } from './hooks/useScrollToBottom'; |
| | | import { convertProcessItem, convertProcessToStep, formatShowTimeYear, useScrollLoad } from './hooks/useScrollLoad'; |
| | | import type { ChatContent } from './model/types'; |
| | | import { |
| | | AnswerState, |
| | |
| | | stepEnumMap, |
| | | type ChatMessage, |
| | | } from './model/types'; |
| | | import { extCallQuery, questionStreamByPost } from '/@/api/ai/chat'; |
| | | import { extCallQuery, 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'; |
| | |
| | | activeLLMId, |
| | | activeRoomId, |
| | | activeSampleId, |
| | | activeSectionAId, |
| | | getRoomConfig, |
| | | isSharePage, |
| | | roomConfig, |
| | | } from '/@/stores/chatRoom'; |
| | |
| | | import { ErrorCode } from '/@/utils/request'; |
| | | import { useCompRef } from '/@/utils/types'; |
| | | import { toMyFixed } from '/@/utils/util'; |
| | | const containerRef = ref(); |
| | | const containerRef = useCompRef(ChatContainer); |
| | | const chatListDom = computed(() => containerRef.value?.chatListDom); |
| | | const chatWidth = '75%'; |
| | | const voicePageIsShow = ref(false); |
| | |
| | | content = { |
| | | type: AnswerType.Report, |
| | | values: (res?.reports ?? []).map((item) => ({ |
| | | content: parseContent(item, reportIsShow, { origin: item }), |
| | | content: parseContent(item, reportIsShow, { origin: item, conclusion: item.conclusion ?? [] }), |
| | | })), |
| | | }; |
| | | break; |
| | |
| | | |
| | | //#endregion |
| | | |
| | | const DEFAULT_SECTION_A_ID = 'knowledge_base'; |
| | | let questionRes = null; |
| | | let position = null; |
| | | let finalCalcSectionAId = null; |
| | | |
| | | let lastAxiosSource: CancelTokenSource = null; |
| | | const questionAi = async (text) => { |
| | |
| | | prev_question: preQuestion.value, |
| | | }; |
| | | } |
| | | let currentSectionAId = ''; |
| | | if (activeSectionAId.value) { |
| | | currentSectionAId = activeSectionAId.value; |
| | | activeSectionAId.value = ''; |
| | | } else { |
| | | const lastSectionAItem = findLast( |
| | | computedMessageList.value as any, |
| | | (item) => item.role === RoleEnum.assistant && !!item.sectionAId |
| | | ); |
| | | currentSectionAId = lastSectionAItem?.sectionAId ?? DEFAULT_SECTION_A_ID; |
| | | } |
| | | finalCalcSectionAId = currentSectionAId; |
| | | |
| | | const params = { |
| | | question: text, |
| | |
| | | } |
| | | |
| | | if (chunkRes.mode === 'conclusion') { |
| | | computedMessageList.value.at(-1).conclusion = chunkRes.value; |
| | | chunkRes.value = '分析结束'; |
| | | const lastReport = computedMessageList.value.at(-1)?.content?.values?.at(-1); |
| | | if (lastReport) { |
| | | lastReport.conclusion = chunkRes.value; |
| | | chunkRes.value = '分析结束'; |
| | | } |
| | | } |
| | | |
| | | if (chunkRes.mode === 'question') { |
| | |
| | | scrollToBottom(); |
| | | return; |
| | | } |
| | | // 暂时不考虑多个 report情况 |
| | | |
| | | if (lastIsResult && chunkRes.mode !== 'finish') { |
| | | // 开始增加新的 stepGroup |
| | | computedMessageList.value.at(-1).stepGroup.push({ |
| | | value: [], |
| | | isShow: true, |
| | | }); |
| | | lastIsResult = false; |
| | | } |
| | | // 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); |
| | | const stepList = lastGroup?.value ?? []; |
| | | const currentTimeStamp = new Date().getTime(); |
| | |
| | | computedMessageList.value.at(-1).isStopMsg = true; |
| | | }; |
| | | |
| | | const sendChatMessage = async (content: ChatContent = messageContent.value, cb?: any, isCallExtParams?: any) => { |
| | | const checkCanSend = (content: ChatContent = messageContent.value) => { |
| | | if (!content?.values) { |
| | | return; |
| | | return false; |
| | | } |
| | | if (isTalking.value || chatListLoading.value) { |
| | | ElMessage.warning('ai 正在回复中,请稍后尝试提问'); |
| | | return false; |
| | | } |
| | | return true; |
| | | }; |
| | | |
| | | const addChatItem = (content: ChatContent) => { |
| | | isTalking.value = true; |
| | | const userItem: ChatMessage = { role: RoleEnum.user, content, isChecked: false } as any; |
| | | const assistantItem: ChatMessage = { |
| | | role: RoleEnum.assistant, |
| | | content: { |
| | | type: AnswerType.Report, |
| | | }, |
| | | state: AnswerState.Null, |
| | | stepGroup: [ |
| | | { |
| | | value: [], |
| | | isShow: true, |
| | | }, |
| | | ], |
| | | isStopMsg: false, |
| | | isChecked: false, |
| | | } as any; |
| | | messageList.value.push(userItem); |
| | | clearMessageContent(); |
| | | |
| | | messageList.value.push(assistantItem); |
| | | scrollToBottom(); |
| | | return [userItem, assistantItem]; |
| | | }; |
| | | |
| | | const sendChatMessage = async (content: ChatContent = messageContent.value) => { |
| | | if (!checkCanSend(content)) { |
| | | return; |
| | | } |
| | | |
| | | const isNewChat = messageList.value.length === 0; |
| | | if (isNewChat) { |
| | | if (activeSampleId.value) { |
| | |
| | | let resMsgContent: ChatContent = null; |
| | | |
| | | try { |
| | | isTalking.value = true; |
| | | const userItem: ChatMessage = { role: RoleEnum.user, content, isChecked: false } as any; |
| | | const assistantItem: ChatMessage = { |
| | | role: RoleEnum.assistant, |
| | | content: { |
| | | type: AnswerType.Report, |
| | | }, |
| | | state: AnswerState.Null, |
| | | stepGroup: [ |
| | | { |
| | | value: [], |
| | | isShow: true, |
| | | }, |
| | | ], |
| | | isStopMsg: false, |
| | | isChecked: false, |
| | | } as any; |
| | | messageList.value.push(userItem); |
| | | clearMessageContent(); |
| | | const [userItem, assistantItem] = addChatItem(content); |
| | | |
| | | messageList.value.push(assistantItem); |
| | | scrollToBottom(); |
| | | resMsgContent = await questionAi(content.values); |
| | | |
| | | if (isCallExtParams) { |
| | | const extRes = await extCallQuery(isCallExtParams); |
| | | questionRes = extRes; |
| | | resMsgContent = parseContent(extRes, true); |
| | | } else { |
| | | resMsgContent = await questionAi(content.values); |
| | | } |
| | | nextUserMsgEndIndex.value++; |
| | | if (isNewChat) { |
| | | const firstResCb = getRoomConfig(currentRouteId, 'firstResCb'); |
| | | firstResCb?.(resMsgContent); |
| | | } else { |
| | | cb?.(resMsgContent); |
| | | } |
| | | updateLoadIndex(); |
| | | |
| | | userItem.historyId = questionRes?.history_id; |
| | | userItem.content.values = questionRes?.question ?? userItem.content.values; |
| | | assistantItem.historyId = questionRes?.history_id; |
| | | assistantItem.sectionAId = finalCalcSectionAId; |
| | | appendLastMessageContent(resMsgContent); |
| | | const currentTime = formatShowTimeYear(moment().format('YYYY-MM-DD HH:mm:ss')); |
| | | assistantItem.createTime = currentTime; |
| | | assistantItem.content = resMsgContent; |
| | | setTimeout(() => { |
| | | // 收到回复,继续滚 |
| | | scrollToBottom(); |
| | |
| | | } catch (error: any) {} |
| | | }; |
| | | |
| | | const sendClick = (cb) => { |
| | | sendChatMessage(messageContent.value, cb); |
| | | }; |
| | | const appendLastMessageContent = (content: ChatContent) => { |
| | | const currentTime = moment().format('MM月DD日 HH:mm:ss'); |
| | | if (messageList.value.at(-1)) { |
| | | messageList.value.at(-1).content = content; |
| | | messageList.value.at(-1).createTime = currentTime; |
| | | } |
| | | const sendClick = () => { |
| | | sendChatMessage(messageContent.value); |
| | | }; |
| | | |
| | | const { loadRangeData, onChatListScroll, moreIsLoading, nextUserMsgEndIndex } = useScrollLoad({ |
| | | const { loadRangeData, onChatListScroll, moreIsLoading, updateLoadIndex } = useScrollLoad({ |
| | | container: chatListDom, |
| | | historyGroupId: currentRouteId, |
| | | messageList, |
| | |
| | | |
| | | const chatListLoading = ref(true); |
| | | |
| | | const { scrollToBottom, scrollToTop, isBottom } = useScrollToBottom({ |
| | | chatListDom: chatListDom, |
| | | }); |
| | | |
| | | onActivated(() => { |
| | | emitter.emit('updateHeaderTitle', activeChatRoom.value?.title ?? ''); |
| | | }); |
| | | |
| | | const initNewChat = () => { |
| | | messageContent.value = { |
| | | type: AnswerType.Text, |
| | | values: activeChatRoom.value?.title, |
| | | }; |
| | | sendChatMessage(); |
| | | }; |
| | | const scrollToBottom = () => { |
| | | containerRef.value?.scrollToBottom(); |
| | | }; |
| | | |
| | | const initHistoryChat = () => { |
| | | // 初始状态滚一下 |
| | | scrollToBottom(); |
| | | |
| | | setTimeout(() => { |
| | | chatListDom.value.addEventListener('scroll', onChatListScroll); |
| | | }, 300); |
| | | }; |
| | | |
| | | /** |
| | | * 加载分享数据 |
| | | */ |
| | | const loadShareData = async () => { |
| | | const res = await getShareChatJsonByPost({ |
| | | share_id: router.currentRoute.value.query.id as string, |
| | | }); |
| | | |
| | | const msgValue = res?.values; |
| | | if (!msgValue) { |
| | | messageList.value = []; |
| | | return; |
| | | } |
| | | const userMsg: ChatMessage = { |
| | | historyId: msgValue.history_id, |
| | | role: RoleEnum.user, |
| | | content: { |
| | | type: AnswerType.Text, |
| | | values: msgValue.question, |
| | | }, |
| | | isChecked: false, |
| | | }; |
| | | |
| | | const assistantMsg: ChatMessage = { |
| | | historyId: msgValue.history_id, |
| | | role: RoleEnum.assistant, |
| | | content: parseContent(msgValue), |
| | | stepGroup: (msgValue?.reports ?? []).map((item) => ({ |
| | | value: convertProcessToStep(item?.exec_process), |
| | | isShow: false, |
| | | })), |
| | | isStopMsg: false, |
| | | |
| | | conclusion: msgValue.conclusion ?? [], |
| | | isChecked: false, |
| | | }; |
| | | messageList.value = [userMsg, assistantMsg]; |
| | | }; |
| | | |
| | | onMounted(async () => { |
| | | messageList.value = []; |
| | | chatListLoading.value = true; |
| | | await loadRangeData().finally(() => { |
| | | chatListLoading.value = false; |
| | | }); |
| | | if (isSharePage.value) { |
| | | await loadShareData().finally(() => { |
| | | chatListLoading.value = false; |
| | | }); |
| | | } else { |
| | | await loadRangeData().finally(() => { |
| | | chatListLoading.value = false; |
| | | }); |
| | | } |
| | | setTimeout(() => { |
| | | emitter.emit('updateHeaderTitle', activeChatRoom.value?.title ?? ''); |
| | | }, 300); |
| | | |
| | | if (messageList.value.length === 0) { |
| | | messageContent.value = { |
| | | type: AnswerType.Text, |
| | | values: activeChatRoom.value?.title, |
| | | }; |
| | | |
| | | sendChatMessage(); |
| | | initNewChat(); |
| | | } else { |
| | | if (isSharePage.value) { |
| | | // setTimeout(() => { |
| | | // // 滚动到顶部 |
| | | // scrollToTop(); |
| | | // }, 300); |
| | | } else { |
| | | if (!isSharePage.value) { |
| | | setTimeout(() => { |
| | | // 初始状态滚一下 |
| | | scrollToBottom(); |
| | | |
| | | setTimeout(() => { |
| | | chatListDom.value.addEventListener('scroll', onChatListScroll); |
| | | }, 300); |
| | | initHistoryChat(); |
| | | }, 300); |
| | | } |
| | | } |
| | | loadAmisSource(); |
| | | }); |
| | | //#region ====================== 关联查询 ====================== |
| | | const relativeQueryClick = async (val) => { |
| | | sendChatMessage( |
| | | { |
| | | type: AnswerType.Text, |
| | | values: val.question, |
| | | }, |
| | | undefined, |
| | | { |
| | | history_group_id: currentRouteId, |
| | | question: val.question, |
| | | call_ext_id: val.call_ext_id, |
| | | call_ext_args: val.agrs ? JSON.stringify(val.agrs) : null, |
| | | } |
| | | ); |
| | | }; |
| | | //#endregion |
| | | |
| | | //#region ====================== 光标输入上下箭头显示历史消息 ====================== |
| | | const currentIndex = ref(null); |
| | | const history_data = computed(() => { |
| | |
| | | //#endregion |
| | | //#region ====================== 用户询问的问题设置为常用语 ====================== |
| | | const setCommonQuestionInfo = ref({}); |
| | | const { toClipboard } = useClipboard(); |
| | | |
| | | //用户复制问题 |
| | | const copyUserClick = (item) => { |
| | | const text = item.content.values; |
| | | ElMessage.success('复制成功'); |
| | | toClipboard(text); |
| | | }; |
| | | //用户问题设置为常用语 |
| | | const setCommonQuestionClick = (item) => { |
| | | setCommonQuestionInfo.value = item; |