feat: 深度思考过程调整

src/components/xt-chat/chat-view/useChatHandler.tsx

@@ -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);
+    const targetIndex = conversationList.value.findIndex((v) => v.teamRunTaskId === teamRunTaskId);
-    conversationList.value = conversationList.value.filter((item) => item.teamRunTaskId !== run_id);
+    conversationList.value = conversationList.value.filter((item) => item.teamRunTaskId !== teamRunTaskId);
     const message = conversationList.value[targetIndex - 1]?.content;
     initSse({ message });
   };
 
-  const getAllRunTask = (teamRunTaskId: string) => {
+  const getAllTeamRunTask = (teamRunTaskId: string) => {
-    return conversationList.value.filter(
+    return conversationList.value.filter((item) => item.role === ANSWER_ROLE && item.teamRunTaskId === teamRunTaskId);
-      (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) => {
+  const setRunTaskCollapse = (teamRunTaskId: string, isExpand: boolean) => {
-    getAllRunTask(teamRunTaskId).forEach((item) => {
+    getAllTeamRunTask(teamRunTaskId).forEach((item) => {
-      item.content.isCollapse = isCollapse;
+      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;
+    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`;
+    index === messageData.intelligentThinkingData.length - 1 && (outputEleClass += ' hasLine pb-12px pt-4px');
+
+    return (
+      <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({
-      run_id,
+      teamRunTaskId,
-      key: run_id,
+      key: teamRunTaskId,
-      teamRunTaskId: generateTeamRunTaskId.value,
+      output,
-      content: { ...data, runStatus: EnumTeamRunStatus.RunStarted, teamRunTaskId: generateTeamRunTaskId.value },
-      output: data.output,
       role: ANSWER_ROLE,
-      messageRender: (data: MESSAGE.Answer) => {
+      content: {
-        const { node, output, runStatus, isCollapse = true, customRender, teamRunTaskId } = data;
+        ...data,
-        const isRulCompleted = runStatus === EnumTeamRunStatus.RunCompleted;
+        teamRunStatus: EnumTeamRunStatus.TeamRunStarted,
-
+        teamRunTaskId,
-        let outputEleClass: string = `thought-chain-output border-l-#E6E6E8 border-l-1px  pl-12px relative left-8px mb-4px markdown-wrap`;
+        intelligentThinkingData: [], // 智能思考过程数据
-        !isLastRunTask(data) && (outputEleClass += ' hasLine pb-12px pt-4px');
+        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 (
           <>
-            {isFirstRunTask(data) && (
+            <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="flex items-center mb-8px cursor-pointer"
+                class="intelligent-thinking-content px-16px flex-1 overflow-y-auto"
-                onClick={() => setRunTaskCollapse(teamRunTaskId, !isCollapse)}
+                style={{ display: isExpand ? 'block' : 'none' }}
               >
-                <span class="font-family-medium color-#211F24 text-14px font-400 lh-22px mr-4px">智能思考</span>
+                {intelligentThinkingData.map((item: MESSAGE.Answer, index: number) =>
-                {isCollapse ? (
+                  renderThoughtChain(item, index, messageData),
-                  <IconCaretUp size={12} class="color-#211F24 " />
-                ) : (
-                  <IconCaretDown size={12} class="color-#211F24" />
                 )}
               </div>
-            )}
+            </section>
-            <div class="relative thought-chain-item" style={{ display: isCollapse ? 'block' : 'none' }}>
+            <div v-html={md.render(output ?? '')} class="markdown-wrap" />
-              <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>
             {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 { run_id: teamRunTaskId, output } = data;
-    const existingItem = conversationList.value.find((item) => item.run_id === run_id);
+    const existingItem = conversationList.value.find((item) => item.teamRunTaskId === teamRunTaskId);
-    if (existingItem && output) {
+    if (existingItem) {
       existingItem.content.output += output;
       existingItem.content.teamRunStatus = EnumTeamRunStatus.TeamRunResponseContent;
     }
@@ -305,77 +296,73 @@ 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 _hasRunTask = existingItem.content.intelligentThinkingData.length > 0;
-    const _targetTask = _hasRunTask ? getLastRunTask(teamRunTaskId) : getTeamRunTask(teamRunTaskId);
+      if (_hasRunTask) {
+        setRunTaskCollapse(teamRunTaskId, false);
+        const _targetData = extra_data?.data?.find((item: any) => item.task_type === '任务管理');
+        if (_targetData) {
+          showRightView.value = true;
+          rightViewDataSource.value = extra_data.data;
+          rightPreviewData.value = _targetData;
+        }
 
-    if (isEmpty(_targetTask)) {
+        existingItem.content.customRender = () => {
-      return;
+          return (
-    }
+            <>
-
+              {_targetData && (
-    // 含有思考过程，折叠思考过程，展示结果
+                <div class="file-card mt-10px">
-    if (_hasRunTask) {
+                  <IconFile class="w-24px h-24px mr-16px color-#6D4CFE" />
-      setRunTaskCollapse(teamRunTaskId, false);
+                  <div>
-      const _targetData = extra_data?.data?.find((item: any) => item.task_type === '任务管理');
+                    <TextOverTips
-      if (_targetData) {
+                      context={FILE_TYPE_MAP?.[_targetData.file_type] ?? '-'}
-        showRightView.value = true;
+                      class="font-family-medium color-#211F24 text-14px font-400 lh-22px mb-4px"
-        rightViewDataSource.value = extra_data.data;
+                    />
-        rightPreviewData.value = _targetData;
+                    <span class="color-#939499 font-family-regular text-12px font-400 lh-22px">
+                      创建时间：{exactFormatTime(dayjs().unix())}
+                    </span>
+                  </div>
+                </div>
+              )}
+            </>
+          );
+        };
       }
 
-      _targetTask.content.customRender = () => {
+      existingItem.footer = () => {
+        const isLastRunTask = conversationList.value[conversationList.value.length - 1].teamRunTaskId === teamRunTaskId;
         return (
-          <>
+          <div class="flex items-center">
-            <div v-html={md.render(output)} class="markdown-wrap" />
+            {!extra_data && (
-            {_targetData && (
+              // ? (
-              <div class="file-card mt-10px">
+              // <Tooltip title="下载" onClick={onDownload} align={{ offset: [0, 4] }}>
-                <IconFile class="w-24px h-24px mr-16px color-#6D4CFE" />
+              //   <div class="action-box">
-                <div>
+              //     <IconDownload size={16} class="color-#737478 mr-12px" />
-                  <TextOverTips
+              //   </div>
-                    context={FILE_TYPE_MAP?.[_targetData.file_type] ?? '-'}
+              // </Tooltip>
-                    class="font-family-medium color-#211F24 text-14px font-400 lh-22px mb-4px"
+              // ) :
-                  />
+              <Tooltip title="复制" onClick={() => onCopy(existingItem.content.output)} align={{ offset: [0, 4] }}>
-                  <span class="color-#939499 font-family-regular text-12px font-400 lh-22px">
+                <div class="action-box">
-                    创建时间：{exactFormatTime(dayjs().unix())}
+                  <IconCopy size={16} class="color-#737478" />
-                  </span>
                 </div>
-              </div>
+              </Tooltip>
             )}
-          </>
+            {isLastRunTask && (
+              <Tooltip title="重新生成" onClick={() => onRefresh(teamRunTaskId)} align={{ offset: [0, 4] }}>
+                <div class="action-box ml-12px">
+                  <IconRefresh size={16} class="color-#737478 " />
+                </div>
+              </Tooltip>
+            )}
+          </div>
         );
       };
-    } else {
-      _targetTask.content.teamRunStatus = EnumTeamRunStatus.TeamRunCompleted;
     }
-
-    _targetTask.footer = () => {
-      const isShow = conversationList.value[conversationList.value.length - 1].teamRunTaskId === teamRunTaskId;
-      return (
-        <div class="flex items-center">
-          {!extra_data && (
-            // ? (
-            // <Tooltip title="下载" onClick={onDownload} align={{ offset: [0, 4] }}>
-            //   <div class="action-box">
-            //     <IconDownload size={16} class="color-#737478 mr-12px" />
-            //   </div>
-            // </Tooltip>
-            // ) :
-            <Tooltip title="复制" onClick={() => onCopy(_targetTask.content.output)} align={{ offset: [0, 4] }}>
-              <div class="action-box">
-                <IconCopy size={16} class="color-#737478" />
-              </div>
-            </Tooltip>
-          )}
-          {isShow && (
-            <Tooltip title="重新生成" onClick={() => onRefresh(teamRunTaskId)} align={{ offset: [0, 4] }}>
-              <div class="action-box ml-12px">
-                <IconRefresh size={16} class="color-#737478 " />
-              </div>
-            </Tooltip>
-          )}
-        </div>
-      );
-    };
   };
 
   // 消息处理主函数