renxiaodong/lingji-work-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: 渲染逻辑处理

Browse Source
This commit is contained in:
rd
2025-08-27 17:18:47 +08:00
parent 6e7bf7f9e4
commit 1360717647
6 changed files with 262 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

171
src/components/xt-chat/chat-view/useChatHandler.tsx
View File

@ -3,7 +3,14 @@ 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 {
IconFile,
IconCaretUp,
IconDownload,
IconCaretDown,
IconRefresh,
IconCopy,
} from '@arco-design/web-vue/es/icon';
import { Tooltip } from 'ant-design-vue';
import TextOverTips from '@/components/text-over-tips/index.vue';
@ -131,13 +138,12 @@ export default function useChatHandler({ initSse }): UseChatHandlerReturn {
};
// 最终结果处理
const handleFileReview = (data: MESSAGE.Answer) => {
const { run_id, output } = data;
const handleFileReview = (extra_data: { type: string; data: any }) => {
console.log('handleFileReview', extra_data);
const { type, data } = extra_data;
showRightView.value = true;
// const _files = output?.files;
// rightViewInfo.value = _files?.[0]?.content || '';
rightViewInfo.value = data?.[0] ?? {};
// conversationList.value.push({
// run_id,
@ -168,28 +174,45 @@ export default function useChatHandler({ initSse }): UseChatHandlerReturn {
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,
const getAllRunTask = (teamRunTaskId: string) => {
return conversationList.value.filter(
(item) => item.role === ANSWER_ROLE && item.teamRunTaskId === teamRunTaskId && !item.isTeamRunTask,
);
};
const getRunTask = (run_id: string) => {
return conversationList.value.find((item) => item.run_id === run_id && !item.isTeamRunTask);
};
// 设置当前对话所有过程任务展开收起状态
const setRunTaskCollapse = (teamRunTaskId: string, isCollapse: boolean) => {
getAllRunTask(teamRunTaskId).forEach((item) => {
item.content.isCollapse = isCollapse;
});
};
// 获取同一个对话下的最后一个run_task
const getLastRunTask = (teamRunTaskId: string) => {
const allRunTask = getAllRunTask(teamRunTaskId);
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,
);
const getFirstRunTask = (teamRunTaskId: string) => {
const allRunTask = getAllRunTask(teamRunTaskId);
return allRunTask[0] ?? {};
};
// 判断当前对话是否含有过程任务
const hasRunTask = (teamRunTaskId: string) => {
return conversationList.value.some((item) => item.teamRunTaskId === teamRunTaskId && !item.isTeamRunTask);
};
const getTeamRunTask = (teamRunTaskId: string) => {
return conversationList.value.find((item) => item.teamRunTaskId === teamRunTaskId);
};
const isLastRunTask = (data: MESSAGE.Answer, teamRunTaskId: string): boolean => {
const { run_id } = data;
return getLastRunTask(data, teamRunTaskId).run_id === run_id;
return getLastRunTask(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;
return getFirstRunTask(teamRunTaskId).run_id === run_id;
};
const isLastTeamRunTask = (data: MESSAGE.Answer) => {
const { run_id } = data;
const lastElement = conversationList.value[conversationList.value.length - 1];
@ -203,28 +226,47 @@ export default function useChatHandler({ initSse }): UseChatHandlerReturn {
conversationList.value.push({
run_id,
key: run_id,
team_run_id: lastTeamRunTaskId.value,
content: data,
teamRunTaskId: lastTeamRunTaskId.value,
content: { ...data, runStatus: EnumTeamRunStatus.RunStarted },
output: data.output,
role: ANSWER_ROLE,
messageRender: (data: MESSAGE.Answer) => {
const { node, output, runStatus, isCollapse = true } = data;
const isRulCompleted = runStatus === EnumTeamRunStatus.RunCompleted;
// console.log('messageRender', isCollapse);
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) && (
<div class="flex items-center">
<span class="font-family-medium color-#211F24 text-14px font-400 lh-22px mr-4px">智能思考</span>
<IconCaretUp size={16} class="color-#211F24" />
{isCollapse ? (
<IconCaretUp
size={16}
class="color-#211F24 cursor-pointer"
onClick={() => setRunTaskCollapse(lastTeamRunTaskId.value, false)}
/>
) : (
<IconCaretDown
size={16}
class="color-#211F24 cursor-pointer"
onClick={() => setRunTaskCollapse(lastTeamRunTaskId.value, true)}
/>
)}
</div>
)}
<div class="relative thought-chain-item">
<div class="flex items-center mb-4px">
<img src={icon2} width={13} height={13} class="mr-4px" />
<div>{data.node}</div>
{isCollapse && (
<div class="relative thought-chain-item">
<div class="flex items-center mb-4px">
<img src={isRulCompleted ? icon1 : icon2} width={13} height={13} class="mr-4px" />
<div>{node}</div>
</div>
<div v-html={md.render(output)} class={outputEleClass} />
</div>
<div v-html={md.render(data.output ?? '')} class={outputEleClass} />
</div>
)}
</>
);
},
@ -237,31 +279,32 @@ export default function useChatHandler({ initSse }): UseChatHandlerReturn {
const existingItem = conversationList.value.find((item) => item.run_id === run_id);
if (existingItem && output) {
existingItem.content.output += output;
existingItem.content.runStatus = EnumTeamRunStatus.RunResponseContent;
}
};
// 过程节点结束
const handleRunTaskEnd = (data: MESSAGE.Answer) => {
const { run_id, output } = data;
const { output } = data;
const existingItem = conversationList.value.find((item) => item.run_id === run_id);
const existingItem = getRunTask(data.run_id);
if (existingItem) {
existingItem.content.output += output;
existingItem.content.runStatus = EnumTeamRunStatus.RunCompleted;
}
};
// 任务开始
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,
teamRunTaskId: lastTeamRunTaskId.value,
key: run_id,
content: data,
content: { ...data, teamRunStatus: EnumTeamRunStatus.TeamRunStarted },
output: data.output,
role: ANSWER_ROLE,
messageRender: (data: MESSAGE.Answer) => {
@ -275,42 +318,52 @@ export default function useChatHandler({ initSse }): UseChatHandlerReturn {
const existingItem = conversationList.value.find((item) => item.run_id === run_id);
if (existingItem && output) {
existingItem.content.output += output;
existingItem.content.teamRunStatus = EnumTeamRunStatus.TeamRunResponseContent;
}
};
// 任务结束
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 (
<div class="flex items-center">
<Tooltip title="复制" onClick={() => onCopy(lastRunTask.content.output)}>
const { run_id, extra_data } = data;
const _hasRunTask = hasRunTask(lastTeamRunTaskId.value);
const _targetTask = _hasRunTask ? getLastRunTask(run_id) : getTeamRunTask(lastTeamRunTaskId.value);
if (isEmpty(_targetTask)) {
return;
}
if (_hasRunTask) {
setRunTaskCollapse(lastTeamRunTaskId.value, false);
} else {
_targetTask.content.teamRunStatus = EnumTeamRunStatus.TeamRunCompleted;
}
if (extra_data) {
handleFileReview(extra_data);
}
_targetTask.footer = () => {
return (
<div class="flex items-center">
{!extra_data
// ? (
// <Tooltip title="下载" onClick={onDownload}>
// <IconDownload size={16} class="color-#737478 cursor-pointer mr-12px" />
// </Tooltip>
// ) :
&& (
<Tooltip title="复制" onClick={() => onCopy(_targetTask.content.output)}>
<IconCopy size={16} class="color-#737478 cursor-pointer mr-12px" />
</Tooltip>
{team_session_state && (
<Tooltip title="下载" onClick={onDownload}>
<IconDownload size={16} class="color-#737478 cursor-pointer mr-12px" />
</Tooltip>
)}
{isLastTeamRunTask(data) && (
<Tooltip title="重新生成" onClick={() => onRefresh(run_id)}>
<IconRefresh size={16} class="color-#737478 cursor-pointer" />
</Tooltip>
)}
</div>
);
};
}
if (team_session_state) {
handleFileReview(data);
}
)}
{isLastTeamRunTask(data) && (
<Tooltip title="重新生成" onClick={() => onRefresh(run_id)}>
<IconRefresh size={16} class="color-#737478 cursor-pointer" />
</Tooltip>
)}
</div>
);
};
};
// 消息处理主函数