<template>
|
<ChatContainer :loading="chatListLoading" :more-is-loading="moreIsLoading" :is-share-page="isSharePage" ref="containerRef">
|
<!-- 消息列表 -->
|
<template #message-list>
|
<MessageList
|
v-if="computedMessageList?.length > 0"
|
:msgList="computedMessageList"
|
:isTalking="isTalking"
|
@shareClick="shareClick"
|
@setCommonQuestionClick="setCommonPhraseClick"
|
@sendChatMessage="sendChatMessage"
|
@stopGenClick="stopGenClick"
|
@askMoreClick="askMoreClick"
|
/>
|
<el-empty v-else-if="isSharePage && !chatListLoading" :image-size="200">
|
<template #description>
|
<span class="text-[15px]">分享的对话不存在或已失效</span>
|
</template>
|
</el-empty>
|
</template>
|
|
<!-- 输入区域 -->
|
<template #input-area>
|
<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>
|
|
<!-- 抽屉 -->
|
<template #drawer>
|
<CustomDrawer v-model:isShow="drawerIsShow" @updateChatInput="updateChatInput" />
|
<ShareLinkDlg ref="shareLinkDlgRef" />
|
</template>
|
</ChatContainer>
|
</template>
|
|
<script setup lang="ts">
|
import type { CancelTokenSource } from 'axios';
|
import axios from 'axios';
|
import { orderBy } from 'lodash-es';
|
import moment from 'moment';
|
import { computed, nextTick, onActivated, onMounted, ref } from 'vue';
|
import { loadAmisSource } from '../amis/load';
|
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 { 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';
|
import MessageList from './messageList/index.vue';
|
import {
|
activeChatRoom,
|
activeGroupType,
|
activeLLMId,
|
activeRoomId,
|
activeSampleId,
|
isSharePage,
|
roomConfig,
|
} from '/@/stores/chatRoom';
|
import emitter from '/@/utils/mitt';
|
import { useCompRef } from '/@/utils/types';
|
import { toFormData, toMyFixed } from '/@/utils/util';
|
import { useLoadData } from './hooks/useLoadData';
|
import { useSyncMsg } from './hooks/useSyncMsg';
|
import { getCurrentPosition } from '/@/utils/brower';
|
import { deepClone } from '/@/utils/other';
|
const containerRef = useCompRef(ChatContainer);
|
const chatListDom = computed(() => containerRef.value?.chatListDom);
|
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: '',
|
});
|
const currentRoute = router.currentRoute;
|
const currentRouteId = currentRoute.value.query.id as string;
|
activeRoomId.value = currentRouteId;
|
const messageList = ref<ChatMessage[]>([]);
|
const computedMessageList = computed(() => {
|
return messageList.value.filter((v) => !!v);
|
});
|
|
let questionRes = 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) {
|
judgeParams = {};
|
} else {
|
judgeParams = {
|
prev_question: preQuestion.value,
|
};
|
}
|
|
const params = {
|
question: text,
|
history_group_id: currentRouteId,
|
raw_mode: roomConfig.value?.[currentRouteId]?.isAnswerByLLM ?? false,
|
...judgeParams,
|
} as any;
|
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;
|
}
|
|
if (currentSampleId) {
|
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 resultP = new Promise((resolve, reject) => {
|
const currentSource = axios.CancelToken.source();
|
lastAxiosSource = currentSource;
|
|
const getResReport = () => {
|
const resReport = {
|
answer_type: AnswerType.Report,
|
reports: [],
|
};
|
return resReport;
|
};
|
const checkReportEmpty = () => {
|
const isEmpty = !questionRes?.reports || questionRes?.reports?.length === 0;
|
return isEmpty;
|
};
|
questionStreamByPost(
|
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 = '准备数据分析';
|
}
|
|
if (chunkRes.mode === 'create_work_order') {
|
const lastMsg = computedMessageList.value.at(-1);
|
lastMsg.modeContent = chunkRes;
|
triggerRefresh();
|
return;
|
}
|
|
if (chunkRes.mode === 'summary') {
|
const lastMsg = computedMessageList.value.at(-1);
|
const extraContent = parseExtraContent(chunkRes.value);
|
const isReportEmpty = checkReportEmpty();
|
// 没有经过 result 报告还没初始化
|
if (isReportEmpty) {
|
const resReport = getResReport();
|
questionRes = resReport;
|
}
|
// 此对话已经加入到对话列表
|
if (lastMsg.content?.values && extraContent) {
|
for (const key in extraContent) {
|
if (Object.prototype.hasOwnProperty.call(extraContent, key)) {
|
const value = extraContent[key];
|
if (!lastMsg.content[key] || (Array.isArray(lastMsg.content[key]) && lastMsg.content[key].length === 0)) {
|
lastMsg.content[key] = value;
|
}
|
}
|
}
|
|
lastMsg.historyId = chunkRes.value.history_id;
|
const userMsg = computedMessageList.value.at(-2);
|
userMsg.historyId = chunkRes.value.history_id;
|
userMsg.content.values = chunkRes.value.question;
|
}
|
|
if (Object.keys(questionRes).length === 0) {
|
questionRes = chunkRes.value;
|
}
|
|
// 此对话还未加入到对话列表
|
if (!lastMsg.content?.values && questionRes) {
|
questionRes = {
|
...questionRes,
|
...chunkRes.value,
|
};
|
}
|
|
if (isReportEmpty) {
|
resolve(questionRes);
|
}
|
// computedMessageList.value[computedMessageList.value.length - 1] = finalMsg;
|
scrollToBottom();
|
// chunkRes.value = '你可以继续问我';
|
return;
|
}
|
|
if (chunkRes.mode === 'conclusion') {
|
const lastReport = computedMessageList.value.at(-1)?.content?.values?.at(-1);
|
|
if (lastReport) {
|
lastReport.conclusion = 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 lastStepItem = getLastStepItem();
|
checkStepItem(lastStepItem);
|
lastStepItem.subStep.push({
|
type: chunkRes.value.type,
|
data: chunkRes.value,
|
});
|
scrollToBottom();
|
return;
|
}
|
|
// 暂时不考虑多个 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();
|
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 && !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 lastItem = stepList.at(-1);
|
if (lastItem) {
|
lastItem.title += chunkRes.value ?? '';
|
}
|
}
|
|
if (chunkRes.mode === 'begin_stream') {
|
streamOutputIsStart = true;
|
lastTimestamp = currentTimeStamp;
|
}
|
if (chunkRes.mode === 'end_stream') {
|
streamOutputIsStart = false;
|
}
|
|
// 强制触发更新
|
|
scrollToBottom();
|
},
|
{
|
cancelToken: currentSource.token,
|
}
|
)
|
.catch((err) => {
|
throw err;
|
})
|
.finally(() => {
|
isTalking.value = false;
|
// 收起所有 stepGroup
|
computedMessageList.value.at(-1).stepGroup.forEach((item) => {
|
item.isShow = false;
|
});
|
});
|
});
|
|
await resultP;
|
const content = parseContent(questionRes, true);
|
return content;
|
};
|
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 = () => {
|
lastAxiosSource?.cancel();
|
isTalking.value = false;
|
chatListLoading.value = false;
|
streamOutputIsStart = false;
|
computedMessageList.value.at(-1).isStopMsg = true;
|
};
|
|
const checkCanSend = (content: ChatContent = messageContent.value) => {
|
if (!content?.values) {
|
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, attachList: deepClone(attachList.value) } 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 clearAttach = () => {
|
playBarRef.value?.clearAttach();
|
};
|
|
const sendChatMessage = async (content: ChatContent = messageContent.value) => {
|
if (!checkCanSend(content)) {
|
return;
|
}
|
const isNewChat = messageList.value.length === 0;
|
if (isNewChat) {
|
if (activeSampleId.value) {
|
currentSampleId = activeSampleId.value;
|
}
|
|
if (activeLLMId.value) {
|
currentLLMId = activeLLMId.value;
|
}
|
}
|
let resMsgContent: ChatContent = null;
|
|
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(current);
|
assistantItem.createTime = currentTime;
|
assistantItem.content = resMsgContent;
|
setTimeout(() => {
|
// 收到回复，继续滚
|
scrollToBottom();
|
}, 300);
|
} catch (error: any) {}
|
};
|
|
const sendClick = () => {
|
sendChatMessage(messageContent.value);
|
};
|
|
const { loadRangeData, onChatListScroll, moreIsLoading, updateLoadIndex } = useScrollLoad({
|
container: chatListDom,
|
historyGroupId: currentRouteId,
|
messageList,
|
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(() => {
|
emitter.emit('updateHeaderTitle', activeChatRoom.value?.title ?? '');
|
});
|
|
const initNewChat = () => {
|
messageContent.value = {
|
type: AnswerType.Text,
|
values: activeChatRoom.value?.title,
|
};
|
sendChatMessage();
|
};
|
|
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,
|
},
|
attachList: convertAttach(msgValue),
|
isChecked: false,
|
};
|
|
const assistantMsg: ChatMessage = {
|
historyId: msgValue.history_id,
|
role: RoleEnum.assistant,
|
content: parseContent(msgValue),
|
stepGroup: getStepGroupList(msgValue?.reports ?? []),
|
|
isStopMsg: false,
|
|
conclusion: msgValue.conclusion ?? [],
|
isChecked: false,
|
};
|
messageList.value = [userMsg, assistantMsg];
|
};
|
|
onMounted(async () => {
|
messageList.value = [];
|
chatListLoading.value = true;
|
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) {
|
initNewChat();
|
} else {
|
if (!isSharePage.value) {
|
setTimeout(() => {
|
initHistoryChat();
|
}, 300);
|
}
|
}
|
loadAmisSource();
|
});
|
|
const askMoreClick = (item) => {
|
if (!item.question) return;
|
sendChatMessage({ type: AnswerType.Text, values: item.question });
|
};
|
|
//#region ====================== 侧边栏drawer ======================
|
const drawerIsShow = ref(false);
|
|
const updateChatInput = (content) => {
|
messageContent.value.values = content;
|
};
|
//#endregion
|
//用户问题设置为常用语
|
const setCommonPhraseClick = (item) => {
|
playBarRef.value.addPhrase(item);
|
};
|
|
//#region ====================== 分享 ======================
|
|
const shareLinkDlgRef = useCompRef(ShareLinkDlg);
|
|
const shareClick = async (item: ChatMessage) => {
|
shareLinkDlgRef.value.openShare(item);
|
};
|
//#endregion
|
</script>
|
|
<style scoped lang="scss">
|
@import './index.scss';
|
</style>
|
