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

feat: 深度思考过程调整

Browse Source
This commit is contained in:
rd
2025-09-10 11:37:23 +08:00
parent 0fc6a5f6e3
commit f14e95aa1f
1 changed files with 159 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -18,6 +18,8 @@ import { genRandomId, exactFormatTime } from '@/utils/tools';
import icon1 from '@/assets/img/agent/icon-end.png';
import icon2 from '@/assets/img/agent/icon-loading.png';
import icon3 from '@/assets/img/agent/icon-unfold.png';
import icon4 from '@/assets/img/agent/icon-fold.png';
import { useClipboard } from '@vueuse/core';
import {
@ -64,7 +66,7 @@ export default function useChatHandler(options: UseChatHandlerOptions): UseChatH
[LOADING_ROLE]: {
placement: 'start',
variant: 'borderless',
style: { ...ROLE_STYLE, paddingLeft: '20px' },
style: ROLE_STYLE,
},
[INTELLECTUAL_THINKING_ROLE]: {
placement: 'start',
@ -76,9 +78,6 @@ export default function useChatHandler(options: UseChatHandlerOptions): UseChatH
placement: 'start',
variant: 'borderless',
typing: { step: 2, interval: 100 },
// onTypingComplete: () => {
// generateTeamRunTaskId.value = null;
// },
style: ROLE_STYLE,
},
[QUESTION_ROLE]: {
@ -108,7 +107,7 @@ export default function useChatHandler(options: UseChatHandlerOptions): UseChatH
},
footer: (params) => {
const { content, item } = params as { content: string; item: MESSAGE.Answer };
const isShow = conversationList.value[conversationList.value.length - 1].run_id === item.run_id;
const isLastRunTask = conversationList.value[conversationList.value.length - 1].run_id === item.run_id;
return (
<div class="flex items-center">
<Tooltip title="复制" onClick={() => onCopy(content)} align={{ offset: [0, 4] }}>
@ -116,7 +115,7 @@ export default function useChatHandler(options: UseChatHandlerOptions): UseChatH
<IconCopy size={16} class="color-#737478" />
</div>
</Tooltip>
{isShow && (
{isLastRunTask && (
<Tooltip title="重新生成" onClick={() => handleRemoteRefresh(item)} align={{ offset: [0, 4] }}>
<div class="action-box ml-12px">
<IconRefresh size={16} class="color-#737478 " />
@ -157,145 +156,137 @@ export default function useChatHandler(options: UseChatHandlerOptions): UseChatH
initSse({ message });
};
const onRefresh = (run_id: string) => {
const onRefresh = (teamRunTaskId: string) => {
generateLoading.value = true;
const targetIndex = conversationList.value.findIndex((v) => v.teamRunTaskId === run_id);
conversationList.value = conversationList.value.filter((item) => item.teamRunTaskId !== run_id);
const targetIndex = conversationList.value.findIndex((v) => v.teamRunTaskId === teamRunTaskId);
conversationList.value = conversationList.value.filter((item) => item.teamRunTaskId !== teamRunTaskId);
const message = conversationList.value[targetIndex - 1]?.content;
initSse({ message });
};
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 getAllTeamRunTask = (teamRunTaskId: string) => {
return conversationList.value.filter((item) => item.role === ANSWER_ROLE && item.teamRunTaskId === teamRunTaskId);
};
// 设置当前对话所有思考过程任务展开收起状态
const setRunTaskCollapse = (teamRunTaskId: string, isCollapse: boolean) => {
getAllRunTask(teamRunTaskId).forEach((item) => {
item.content.isCollapse = isCollapse;
const setRunTaskCollapse = (teamRunTaskId: string, isExpand: boolean) => {
getAllTeamRunTask(teamRunTaskId).forEach((item) => {
item.content.isExpand = isExpand;
});
};
// 获取同一个对话下的最后一个run_task
const getLastRunTask = (teamRunTaskId: string) => {
const allRunTask = getAllRunTask(teamRunTaskId);
return allRunTask[allRunTask.length - 1] ?? {};
};
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): boolean => {
const { teamRunTaskId, run_id } = data;
return getLastRunTask(teamRunTaskId).run_id === run_id;
};
const isFirstRunTask = (data: MESSAGE.Answer): boolean => {
const { teamRunTaskId, run_id } = data;
return getFirstRunTask(teamRunTaskId).run_id === run_id;
};
// 过程节点开始
const handleRunTaskStart = (data: MESSAGE.Answer) => {
const { run_id } = data;
// generateTeamRunTaskId.value = run_id;
conversationList.value.push({
run_id,
key: run_id,
teamRunTaskId: generateTeamRunTaskId.value,
content: { ...data, runStatus: EnumTeamRunStatus.RunStarted, teamRunTaskId: generateTeamRunTaskId.value },
output: data.output,
role: ANSWER_ROLE,
messageRender: (data: MESSAGE.Answer) => {
const { node, output, runStatus, isCollapse = true, customRender, teamRunTaskId } = data;
const _intelligentThinkingData = getTeamRunTask(generateTeamRunTaskId.value)?.content?.intelligentThinkingData;
const _target = _intelligentThinkingData?.find((item: MESSAGE.Answer) => item.run_id === run_id);
if (!_target) {
_intelligentThinkingData?.push(data);
}
};
// 过程节点更新
const handleRunTaskUpdate = (data: MESSAGE.Answer) => {
const { run_id, output } = data;
const _intelligentThinkingData = getTeamRunTask(generateTeamRunTaskId.value)?.content?.intelligentThinkingData;
const _target = _intelligentThinkingData?.find((item: MESSAGE.Answer) => item.run_id === run_id);
if (_target) {
_target.runStatus = EnumTeamRunStatus.RunResponseContent;
_target.output += output;
}
};
// 过程节点结束
const handleRunTaskEnd = (data: MESSAGE.Answer) => {
const { run_id, output } = data;
const _intelligentThinkingData = getTeamRunTask(generateTeamRunTaskId.value)?.content?.intelligentThinkingData;
const _target = _intelligentThinkingData?.find((item: MESSAGE.Answer) => item.run_id === run_id);
if (_target) {
_target.runStatus = EnumTeamRunStatus.RunCompleted;
_target.output += output;
}
};
const renderThoughtChain = (data: MESSAGE.Answer, index: number, messageData: MESSAGE.Answer) => {
const { node, output, runStatus } = data;
const isRulCompleted = runStatus === EnumTeamRunStatus.RunCompleted;
let outputEleClass: string = `thought-chain-output border-l-#E6E6E8 border-l-1px pl-12px relative left-8px mb-4px markdown-wrap`;
!isLastRunTask(data) && (outputEleClass += ' hasLine pb-12px pt-4px');
index === messageData.intelligentThinkingData.length - 1 && (outputEleClass += ' hasLine pb-12px pt-4px');
return (
<>
{isFirstRunTask(data) && (
<div
class="flex items-center mb-8px cursor-pointer"
onClick={() => setRunTaskCollapse(teamRunTaskId, !isCollapse)}
>
<span class="font-family-medium color-#211F24 text-14px font-400 lh-22px mr-4px">智能思考</span>
{isCollapse ? (
<IconCaretUp size={12} class="color-#211F24 " />
) : (
<IconCaretDown size={12} class="color-#211F24" />
)}
</div>
)}
<div class="relative thought-chain-item" style={{ display: isCollapse ? 'block' : 'none' }}>
<div class="relative thought-chain-item">
<div class="flex items-center mb-4px">
<img src={isRulCompleted ? icon1 : icon2} width={16} height={16} class="mr-4px" />
<div class="color-#211F24 !lh-20px">{node}</div>
</div>
<div v-html={md.render(output)} class={outputEleClass} />
</div>
);
};
// 任务开始
const handleTeamRunTaskStart = (data: MESSAGE.Answer) => {
const { run_id: teamRunTaskId, output } = data;
generateTeamRunTaskId.value = teamRunTaskId;
conversationList.value.push({
teamRunTaskId,
key: teamRunTaskId,
output,
role: ANSWER_ROLE,
content: {
...data,
teamRunStatus: EnumTeamRunStatus.TeamRunStarted,
teamRunTaskId,
intelligentThinkingData: [], // 智能思考过程数据
isExpand: true, // 是否展开思考过程
},
messageRender: (messageData: MESSAGE.Answer) => {
const { output, isExpand, teamRunTaskId, intelligentThinkingData, customRender, teamRunStatus } = messageData;
const isEnd = teamRunStatus === EnumTeamRunStatus.TeamRunCompleted;
const hasIntelligentThinking = intelligentThinkingData.length > 0;
return (
<>
<section
class={`intelligent-thinking-wrap mb-8px flex-col ${
hasIntelligentThinking && !isEnd ? 'max-h-160px overflow-hidden' : ''
}`}
style={{ display: hasIntelligentThinking ? 'flex' : 'none' }}
>
<div class="intelligent-thinking-header flex justify-between">
<span class="cts font-family-regular color-#8A70FE">深度思考中</span>
<img
src={isExpand ? icon4 : icon3}
class="cursor-pointer"
width={24}
height={24}
onClick={() => setRunTaskCollapse(teamRunTaskId, !isExpand)}
/>
</div>
<div
class="intelligent-thinking-content px-16px flex-1 overflow-y-auto"
style={{ display: isExpand ? 'block' : 'none' }}
>
{intelligentThinkingData.map((item: MESSAGE.Answer, index: number) =>
renderThoughtChain(item, index, messageData),
)}
</div>
</section>
<div v-html={md.render(output ?? '')} class="markdown-wrap" />
{customRender?.()}
</>
);
},
});
};
// 过程节点更新
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;
existingItem.content.runStatus = EnumTeamRunStatus.RunResponseContent;
}
};
// 过程节点结束
const handleRunTaskEnd = (data: MESSAGE.Answer) => {
const { output } = data;
const existingItem = getRunTask(data.run_id);
if (existingItem) {
existingItem.content.output += output;
existingItem.content.runStatus = EnumTeamRunStatus.RunCompleted;
}
};
// 任务开始
const handleTeamRunTaskStart = (data: MESSAGE.Answer) => {
const { run_id } = data;
generateTeamRunTaskId.value = run_id;
conversationList.value.push({
run_id,
isTeamRunTask: true,
teamRunTaskId: generateTeamRunTaskId.value,
key: run_id,
content: { ...data, teamRunStatus: EnumTeamRunStatus.TeamRunStarted, teamRunTaskId: run_id },
output: data.output,
role: ANSWER_ROLE,
messageRender: (data: MESSAGE.Answer) => {
return <div v-html={md.render(data.output ?? '')} class="markdown-wrap" />;
},
});
};
// 任务更新
const handleTeamRunTaskUpdate = (data: MESSAGE.Answer) => {
const { run_id, output } = data;
const existingItem = conversationList.value.find((item) => item.run_id === run_id);
if (existingItem && output) {
const { run_id: teamRunTaskId, output } = data;
const existingItem = conversationList.value.find((item) => item.teamRunTaskId === teamRunTaskId);
if (existingItem) {
existingItem.content.output += output;
existingItem.content.teamRunStatus = EnumTeamRunStatus.TeamRunResponseContent;
}
@ -305,15 +296,13 @@ export default function useChatHandler(options: UseChatHandlerOptions): UseChatH
resetGenerateStatus();
const { run_id: teamRunTaskId, extra_data, output } = data;
const existingItem = conversationList.value.find((item) => item.teamRunTaskId === teamRunTaskId);
if (existingItem) {
existingItem.content.extra_data = extra_data;
existingItem.content.output += output;
existingItem.content.teamRunStatus = EnumTeamRunStatus.TeamRunCompleted;
const _hasRunTask = hasRunTask(teamRunTaskId);
const _targetTask = _hasRunTask ? getLastRunTask(teamRunTaskId) : getTeamRunTask(teamRunTaskId);
if (isEmpty(_targetTask)) {
return;
}
// 含有思考过程，折叠思考过程，展示结果
const _hasRunTask = existingItem.content.intelligentThinkingData.length > 0;
if (_hasRunTask) {
setRunTaskCollapse(teamRunTaskId, false);
const _targetData = extra_data?.data?.find((item: any) => item.task_type === '任务管理');
@ -323,10 +312,9 @@ export default function useChatHandler(options: UseChatHandlerOptions): UseChatH
rightPreviewData.value = _targetData;
}
_targetTask.content.customRender = () => {
existingItem.content.customRender = () => {
return (
<>
<div v-html={md.render(output)} class="markdown-wrap" />
{_targetData && (
<div class="file-card mt-10px">
<IconFile class="w-24px h-24px mr-16px color-#6D4CFE" />
@ -344,12 +332,10 @@ export default function useChatHandler(options: UseChatHandlerOptions): UseChatH
</>
);
};
} else {
_targetTask.content.teamRunStatus = EnumTeamRunStatus.TeamRunCompleted;
}
_targetTask.footer = () => {
const isShow = conversationList.value[conversationList.value.length - 1].teamRunTaskId === teamRunTaskId;
existingItem.footer = () => {
const isLastRunTask = conversationList.value[conversationList.value.length - 1].teamRunTaskId === teamRunTaskId;
return (
<div class="flex items-center">
{!extra_data && (
@ -360,13 +346,13 @@ export default function useChatHandler(options: UseChatHandlerOptions): UseChatH
// </div>
// </Tooltip>
// ) :
<Tooltip title="复制" onClick={() => onCopy(_targetTask.content.output)} align={{ offset: [0, 4] }}>
<Tooltip title="复制" onClick={() => onCopy(existingItem.content.output)} align={{ offset: [0, 4] }}>
<div class="action-box">
<IconCopy size={16} class="color-#737478" />
</div>
</Tooltip>
)}
{isShow && (
{isLastRunTask && (
<Tooltip title="重新生成" onClick={() => onRefresh(teamRunTaskId)} align={{ offset: [0, 4] }}>
<div class="action-box ml-12px">
<IconRefresh size={16} class="color-#737478 " />
@ -376,6 +362,7 @@ export default function useChatHandler(options: UseChatHandlerOptions): UseChatH
</div>
);
};
}
};
// 消息处理主函数