feat: TeamRunCompleted状态处理

src/components/xt-chat/chat-view/constants.ts

@@ -23,15 +23,15 @@ export const ANSWER_STYLE = {
 };
 
 export interface UseChatHandlerReturn {
-  roles: BubbleListProps['roles'];
+  roles?: BubbleListProps['roles'];
-  currentTaskId: Ref<string | null>;
+  currentTaskId?: Ref<string | null>;
-  handleMessage: (parsedData: { event: string; data: MESSAGE.Answer }) => void;
+  handleMessage?: (parsedData: { event: string; data: MESSAGE.Answer }) => void;
-  handleOpen: (data: Response) => void;
+  handleOpen?: (data: Response) => void;
-  generateLoading: Ref<boolean>;
+  generateLoading?: Ref<boolean>;
-  conversationList: Ref<any[]>;
+  conversationList?: Ref<any[]>;
-  showRightView: Ref<boolean>;
+  showRightView?: Ref<boolean>;
-  rightViewInfo: Ref<any>;
+  rightViewInfo?: Ref<any>;
-  senderRef: Ref<null>
+  senderRef?: Ref<null>
 }
 export enum EnumTeamRunStatus {
   TeamRunStarted = 'TeamRunStarted', // 对话开始

src/components/xt-chat/chat-view/index.vue

@@ -2,7 +2,6 @@
 import { message as antdMessage, Tooltip } from 'ant-design-vue';
 import { BubbleList } from '@/components/xt-chat/xt-bubble';
 import SenderInput from './components/sender-input/index.vue';
-import { Typography } from 'ant-design-vue';
 import RightView from './components/right-view/index.vue';
 
 import { useRoute } from 'vue-router';
@@ -27,7 +26,6 @@ export default {
     const rightViewRef = ref(null);
     const bubbleListRef = ref<any>(null);
     const sseController = ref<any>(null);
-    const searchValue = ref('');
 
     const conversationId = computed(() => {
       return route.params.conversationId;
@@ -76,7 +74,6 @@ export default {
         sseController.value = querySSE({
           method: 'POST',
           handleMessage,
-          handleOpen,
           body: JSON.stringify({
             content: message,
             session_id: conversationId.value,
@@ -96,7 +93,6 @@ export default {
       rightViewInfo,
       currentTaskId,
       handleMessage,
-      handleOpen,
       conversationList,
       generateLoading,
       senderRef,

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

@@ -2,7 +2,7 @@ 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 { message as antdMessage } from 'ant-design-vue';
 import {
   IconFile,
   IconCaretUp,
@@ -14,7 +14,7 @@ import {
 
 import { Tooltip } from 'ant-design-vue';
 import TextOverTips from '@/components/text-over-tips/index.vue';
-import { genRandomId } from '@/utils/tools';
+import { genRandomId, exactFormatTime } from '@/utils/tools';
 
 import icon1 from '@/assets/img/agent/icon-end.png';
 import icon2 from '@/assets/img/agent/icon-loading.png';
@@ -29,6 +29,7 @@ import {
   THOUGHT_ROLE,
   ROLE_STYLE,
   EnumTeamRunStatus,
+  FILE_TYPE_MAP,
 } from './constants';
 import type { UseChatHandlerReturn } from './constants';
 
@@ -78,26 +79,6 @@ export default function useChatHandler({ initSse }): UseChatHandlerReturn {
       },
       style: ROLE_STYLE,
     },
-    [FILE_ROLE]: {
-      placement: 'start',
-      variant: 'borderless',
-      typing: { step: 2, interval: 100 },
-      messageRender: (items) => {
-        return items.map((item) => (
-          <div class="file-card">
-            <IconFile class="w-24px h-24px mr-20px color-#6D4CFE" />
-            <div>
-              <TextOverTips
-                context={item.name}
-                class="font-family-medium color-#211F24 text-14px font-400 lh-22px mb-4px"
-              />
-              <span class="color-#939499 font-family-regular text-12px font-400 lh-22px">创建时间：08-04 12:40</span>
-            </div>
-          </div>
-        ));
-      },
-      style: ROLE_STYLE,
-    },
     [THOUGHT_ROLE]: {
       placement: 'start',
       variant: 'borderless',
@@ -120,54 +101,11 @@ export default function useChatHandler({ initSse }): UseChatHandlerReturn {
     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: (
-    //     <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" />
-    //     </div>
-    //   ),
-    // });
-  };
-
-  // 最终结果处理
-  const handleFileReview = (extra_data: { type: string; data: any }) => {
-    console.log('handleFileReview', extra_data);
-    const { type, data } = extra_data;
-
-    showRightView.value = true;
-    rightViewInfo.value = data?.[0] ?? {};
-
-    // 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);
@@ -205,13 +143,11 @@ export default function useChatHandler({ initSse }): UseChatHandlerReturn {
   const getTeamRunTask = (teamRunTaskId: string) => {
     return conversationList.value.find((item) => item.teamRunTaskId === teamRunTaskId);
   };
-  const isLastRunTask = (data: MESSAGE.Answer, teamRunTaskId: string): boolean => {
+  const isLastRunTask = (run_id: string): boolean => {
-    const { run_id } = data;
+    return getLastRunTask(lastTeamRunTaskId.value).run_id === run_id;
-    return getLastRunTask(teamRunTaskId).run_id === run_id;
   };
-  const isFirstRunTask = (data: MESSAGE.Answer, teamRunTaskId: string): boolean => {
+  const isFirstRunTask = (run_id: string): boolean => {
-    const { run_id } = data;
+    return getFirstRunTask(lastTeamRunTaskId.value).run_id === run_id;
-    return getFirstRunTask(teamRunTaskId).run_id === run_id;
   };
   const isLastTeamRunTask = (data: MESSAGE.Answer) => {
     const { run_id } = data;
@@ -231,16 +167,15 @@ export default function useChatHandler({ initSse }): UseChatHandlerReturn {
       output: data.output,
       role: ANSWER_ROLE,
       messageRender: (data: MESSAGE.Answer) => {
-        const { node, output, runStatus, isCollapse = true } = data;
+        const { node, output, runStatus, isCollapse = true, customRender } = 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');
+        !isLastRunTask(run_id) && (outputEleClass += ' hasLine pb-12px pt-4px');
 
         return (
           <>
-            {isFirstRunTask(data, lastTeamRunTaskId.value) && (
+            {isFirstRunTask(run_id) && (
               <div class="flex items-center">
                 <span class="font-family-medium color-#211F24 text-14px font-400 lh-22px mr-4px">智能思考</span>
                 {isCollapse ? (
@@ -258,7 +193,7 @@ export default function useChatHandler({ initSse }): UseChatHandlerReturn {
                 )}
               </div>
             )}
-            {isCollapse && (
+            {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" />
@@ -266,6 +201,8 @@ export default function useChatHandler({ initSse }): UseChatHandlerReturn {
                 </div>
                 <div v-html={md.render(output)} class={outputEleClass} />
               </div>
+            ) : (
+              customRender?.()
             )}
           </>
         );
@@ -325,7 +262,7 @@ export default function useChatHandler({ initSse }): UseChatHandlerReturn {
   const handleTeamRunTaskEnd = (data: MESSAGE.Answer) => {
     resetGenerateStatus();
 
-    const { run_id, extra_data } = data;
+    const { run_id, extra_data, output } = data;
     const _hasRunTask = hasRunTask(lastTeamRunTaskId.value);
     const _targetTask = _hasRunTask ? getLastRunTask(run_id) : getTeamRunTask(lastTeamRunTaskId.value);
 
@@ -339,19 +276,38 @@ export default function useChatHandler({ initSse }): UseChatHandlerReturn {
       _targetTask.content.teamRunStatus = EnumTeamRunStatus.TeamRunCompleted;
     }
 
+    // 含有文档，右侧展示预览区域
     if (extra_data) {
-      handleFileReview(extra_data);
+      showRightView.value = true;
+      rightViewInfo.value = extra_data.data?.[0] ?? {};
+      _targetTask.content.customRender = () => (
+        <>
+          <div v-html={md.render(output)} />
+          <div class="file-card mt-10px">
+            <IconFile class="w-24px h-24px mr-16px color-#6D4CFE" />
+            <div>
+              <TextOverTips
+                context={FILE_TYPE_MAP?.[extra_data.data?.file_type] ?? '-'}
+                class="font-family-medium color-#211F24 text-14px font-400 lh-22px mb-4px"
+              />
+              <span class="color-#939499 font-family-regular text-12px font-400 lh-22px">
+                创建时间：{exactFormatTime(dayjs().unix())}
+              </span>
+            </div>
+          </div>
+        </>
+      );
     }
+    
     _targetTask.footer = () => {
       return (
         <div class="flex items-center">
-          {!extra_data 
+          {!extra_data && (
-          // ? (
+            // ? (
-          //   <Tooltip title="下载" onClick={onDownload}>
+            //   <Tooltip title="下载" onClick={onDownload}>
-          //     <IconDownload size={16} class="color-#737478 cursor-pointer mr-12px" />
+            //     <IconDownload size={16} class="color-#737478 cursor-pointer mr-12px" />
-          //   </Tooltip>
+            //   </Tooltip>
-          // ) : 
+            // ) :
-          && (
             <Tooltip title="复制" onClick={() => onCopy(_targetTask.content.output)}>
               <IconCopy size={16} class="color-#737478 cursor-pointer mr-12px" />
             </Tooltip>
@@ -399,7 +355,6 @@ export default function useChatHandler({ initSse }): UseChatHandlerReturn {
     senderRef,
     currentTaskId,
     handleMessage,
-    handleOpen,
     generateLoading,
     conversationList,
     showRightView,

src/types/message.ts

@@ -13,6 +13,8 @@ declare global {
       status?: RUN_TASK_STATUS | TEAM_RUN_TASK_STATUS;
       runStatus?: RUN_TASK_STATUS;
       teamRunStatus?: TEAM_RUN_TASK_STATUS;
+      fileInfo?: Record<string, any>;
+      customRender?: () => Node;
       extra_data?: {
         type: string;
         data: Record<string, any>;