import { ref } from 'vue'; import type { BubbleListProps } from '@/components/xt-chat/xt-bubble/types'; import markdownit from 'markdown-it'; import { message as antdMessage, Timeline } from 'ant-design-vue'; import { IconFile, IconCaretUp, IconDownload, IconRefresh, IconCopy } from '@arco-design/web-vue/es/icon'; import { Tooltip } from 'ant-design-vue'; import TextOverTips from '@/components/text-over-tips/index.vue'; import { genRandomId } from '@/utils/tools'; import icon1 from '@/assets/img/agent/icon-end.png'; import icon2 from '@/assets/img/agent/icon-loading.png'; import { useClipboard } from '@vueuse/core'; import { QUESTION_ROLE, ANSWER_ROLE, INTELLECTUAL_THINKING_ROLE, FILE_ROLE, LOADING_ROLE, THOUGHT_ROLE, ROLE_STYLE, EnumTeamRunStatus, } from './constants'; import type { UseChatHandlerReturn } from './constants'; /** * 聊天处理器Hook * @returns 包含角色配置、消息处理函数和对话列表的对象 */ export default function useChatHandler({ initSse }): UseChatHandlerReturn { // 在内部定义对话列表 const { copy } = useClipboard(); const senderRef = ref(null); const conversationList = ref([]); const generateLoading = ref(false); const currentTaskId = ref(null); const showRightView = ref(false); const rightViewInfo = ref({}); const lastTeamRunTaskId = ref(null); // 最近一个对话的id // 初始化markdown const md = markdownit({ html: true, breaks: true, linkify: true, typographer: true, }); // 定义角色配置 const roles: BubbleListProps['roles'] = { [LOADING_ROLE]: { placement: 'start', variant: 'borderless', style: { ...ROLE_STYLE, paddingLeft: '12px' }, }, [INTELLECTUAL_THINKING_ROLE]: { placement: 'start', variant: 'borderless', typing: { step: 2, interval: 100 }, style: ROLE_STYLE, }, [ANSWER_ROLE]: { placement: 'start', variant: 'borderless', typing: { step: 2, interval: 100 }, onTypingComplete: () => { currentTaskId.value = null; }, style: ROLE_STYLE, }, [FILE_ROLE]: { placement: 'start', variant: 'borderless', typing: { step: 2, interval: 100 }, messageRender: (items) => { return items.map((item) => (
创建时间:08-04 12:40
)); }, style: ROLE_STYLE, }, [THOUGHT_ROLE]: { placement: 'start', variant: 'borderless', style: ROLE_STYLE, }, [QUESTION_ROLE]: { placement: 'end', shape: 'round', style: ROLE_STYLE, }, }; // 下载处理 const onDownload = () => { console.log('onDownload', rightViewInfo.value); }; const onCopy = (content: string) => { copy(content); antdMessage.success('复制成功!'); }; // 开始处理 const handleOpen = (data: any): void => { // const { run_id } = data; // currentTaskId.value = run_id; // conversationList.value.push({ // key: run_id, // run_id, // role: INTELLECTUAL_THINKING_ROLE, // content: ( //
// 智能思考 // //
// ), // }); }; // 最终结果处理 const handleFileReview = (data: MESSAGE.Answer) => { const { run_id, output } = data; showRightView.value = true; // const _files = output?.files; // rightViewInfo.value = _files?.[0]?.content || ''; // conversationList.value.push({ // run_id, // role: FILE_ROLE, // content: _files, // style: ANSWER_STYLE, // footer: ({ item }: { item: any }) => { // const nonQuestionElements = conversationList.value.filter((item) => item.role !== QUESTION_ROLE); // const isLastRunTask = nonQuestionElements[nonQuestionElements.length - 1]?.id === item.id; // }, // }); }; // 重置生成状态 const resetGenerateStatus = () => { generateLoading.value = false; }; // // 错误处理 // const handleError = () => { // resetGenerateStatus(); // antdMessage.error('连接服务器失败'); // }; const onRefresh = (run_id: string) => { generateLoading.value = true; conversationList.value = conversationList.value.filter((item) => item.run_id !== run_id); initSse({ message: senderRef.value?.searchValue }); }; // 获取同一个对话下的最后一个run_task const getLastRunTask = (data: MESSAGE.Answer, teamRunTaskId: string) => { const allRunTask = conversationList.value.filter( (item) => item.role === ANSWER_ROLE && item.team_run_id === teamRunTaskId && !item.isTeamRunTask, ); return allRunTask[allRunTask.length - 1] ?? {}; }; const getFirstRunTask = (data: MESSAGE.Answer, teamRunTaskId: string) => { const allRunTask = conversationList.value.filter( (item) => item.role === ANSWER_ROLE && item.team_run_id === teamRunTaskId && !item.isTeamRunTask, ); return allRunTask[0] ?? {}; }; const isLastRunTask = (data: MESSAGE.Answer, teamRunTaskId: string): boolean => { const { run_id } = data; return getLastRunTask(data, teamRunTaskId).run_id === run_id; }; const isFirstRunTask = (data: MESSAGE.Answer, teamRunTaskId: string): boolean => { const { run_id } = data; return getFirstRunTask(data, teamRunTaskId).run_id === run_id; }; const isLastTeamRunTask = (data: MESSAGE.Answer) => { const { run_id } = data; const lastElement = conversationList.value[conversationList.value.length - 1]; return lastElement && lastElement.run_id === run_id; }; // 过程节点开始 const handleRunTaskStart = (data: MESSAGE.Answer) => { const { run_id } = data; currentTaskId.value = run_id; conversationList.value.push({ run_id, key: run_id, team_run_id: lastTeamRunTaskId.value, content: data, output: data.output, role: ANSWER_ROLE, messageRender: (data: MESSAGE.Answer) => { let outputEleClass: string = `thought-chain-output border-l-#E6E6E8 border-l-1px pl-12px relative left-6px mb-4px`; !isLastRunTask(data, lastTeamRunTaskId.value) && (outputEleClass += ' hasLine pb-12px pt-4px'); return ( <> {isFirstRunTask(data, lastTeamRunTaskId.value) && (
智能思考
)}
{data.node}
); }, }); }; // 过程节点更新 const handleRunTaskUpdate = (data: MESSAGE.Answer) => { const { run_id, output } = data; const existingItem = conversationList.value.find((item) => item.run_id === run_id); if (existingItem && output) { existingItem.content.output += output; } }; // 过程节点结束 const handleRunTaskEnd = (data: MESSAGE.Answer) => { const { run_id, output } = data; const existingItem = conversationList.value.find((item) => item.run_id === run_id); if (existingItem) { existingItem.content.output += output; } }; // 任务开始 const handleTeamRunTaskStart = (data: MESSAGE.Answer) => { // console.log('handleRunTaskStart'); const { run_id } = data; lastTeamRunTaskId.value = run_id; currentTaskId.value = run_id; conversationList.value.push({ run_id, isTeamRunTask: true, team_run_id: lastTeamRunTaskId.value, key: run_id, content: data, output: data.output, role: ANSWER_ROLE, messageRender: (data: MESSAGE.Answer) => { return
; }, }); }; // 任务更新 const handleTeamRunTaskUpdate = (data: MESSAGE.Answer) => { const { run_id, output } = data; const existingItem = conversationList.value.find((item) => item.run_id === run_id); if (existingItem && output) { existingItem.content.output += output; } }; // 任务结束 const handleTeamRunTaskEnd = (data: MESSAGE.Answer) => { const { run_id, team_session_state } = data; const lastRunTask = getLastRunTask(data, lastTeamRunTaskId.value); resetGenerateStatus(); console.log('handleTeamRunTaskEnd', { data }, { lastRunTask }); if (lastRunTask) { lastRunTask.footer = () => { return (
onCopy(lastRunTask.content.output)}> {team_session_state && ( )} {isLastTeamRunTask(data) && ( onRefresh(run_id)}> )}
); }; } if (team_session_state) { handleFileReview(data); } }; // 消息处理主函数 const handleMessage = (parsedData: { event: string; data: MESSAGE.Answer }) => { const { data } = parsedData; const { status } = data; switch (status) { case EnumTeamRunStatus.RunStarted: handleRunTaskStart(data); break; case EnumTeamRunStatus.RunResponseContent: handleRunTaskUpdate(data); break; case EnumTeamRunStatus.RunCompleted: handleRunTaskEnd(data); break; case EnumTeamRunStatus.TeamRunStarted: handleTeamRunTaskStart(data); break; case EnumTeamRunStatus.TeamRunResponseContent: handleTeamRunTaskUpdate(data); break; case EnumTeamRunStatus.TeamRunCompleted: handleTeamRunTaskEnd(data); break; default: break; } }; return { roles, senderRef, currentTaskId, handleMessage, handleOpen, generateLoading, conversationList, showRightView, rightViewInfo, }; }