feat: chat首页渲染优化

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

@@ -0,0 +1,228 @@
+import { ref, } from 'vue';
+
+import type { BubbleListProps } from '@/components/xt-chat/xt-bubble/types';
+import markdownit from 'markdown-it';
+import { message as antdMessage } from 'ant-design-vue';
+import { IconFile, IconCaretUp, IconDownload, IconRefresh } 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, FILE_ROLE, THOUGHT_ROLE, ROLE_STYLE, ANSWER_STYLE } from './constants';
+import type { UseChatHandlerReturn } from "./constants"
+
+/** 
+ * 聊天处理器Hook 
+ * @returns 包含角色配置、消息处理函数和对话列表的对象 
+ */
+export default function useChatHandler(): UseChatHandlerReturn {
+  // 在内部定义对话列表
+  const { copy } = useClipboard();
+
+  const conversationList = ref<any[]>([]);
+  const generateLoading = ref<Boolean>(false);
+  const currentTaskId = ref<string | null>(null);
+  const showRightView = ref(false);
+  const rightViewContent = ref('');
+
+  // 初始化markdown 
+  const md = markdownit({
+    html: true,
+    breaks: true,
+    linkify: true,
+    typographer: true,
+  });
+
+  // 定义角色配置 
+  const roles: BubbleListProps['roles'] = {
+    [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) => (
+          <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',
+      style: ROLE_STYLE
+    },
+    [QUESTION_ROLE]: {
+      placement: 'end',
+      shape: 'round',
+      style: ROLE_STYLE
+    },
+  };
+
+  // 下载处理 
+  const onDownload = (content: string) => {
+    console.log('onDownload', content);
+    // 这里可以添加实际的下载逻辑 
+  };
+
+  const onCopy = (content: string) => {
+    copy(content);
+    antdMessage.success('复制成功！');
+  };
+
+  // 开始处理 
+  const handleStart = (data: any) => {
+    const { run_id } = data;
+    conversationList.value.push({
+      run_id,
+      role: ANSWER_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 handleNodeUpdate = (data: any) => {
+    const { run_id, status, output } = data;
+
+    switch (status) {
+      case 'TeamRunResponseContent':
+        conversationList.value.push({
+          run_id,
+          content: data,
+          role: ANSWER_ROLE,
+          messageRender: (item) => (
+            <div class='flex items-center'>
+              <img src={icon2} width={13} height={13} class="mr-4px" />
+              <span>{item.message}</span>
+            </div>
+          )
+        });
+        break;
+      case 'TeamRunCompleted':
+        conversationList.value.push({
+          run_id,
+          content: output,
+          role: ANSWER_ROLE,
+          messageRender: (content: string) => <div v-html={md.render(content)}></div>,
+          style: ANSWER_STYLE
+        });
+        break;
+    }
+  };
+
+  // 最终结果处理 
+  const handleFinalResult = (data: any) => {
+    const { run_id, output } = data;
+
+    if (showRightView) {
+      showRightView.value = true;
+    }
+    const _files = output?.files;
+    rightViewContent.value = _files?.[0]?.content || '';
+
+    conversationList.value.push({
+      run_id,
+      id: currentTaskId.value,
+      role: FILE_ROLE,
+      content: _files,
+      style: ANSWER_STYLE,
+      footer: ({ item }: { item: any }) => {
+        const nonQuestionElements = conversationList.value.filter((item) => item.role !== QUESTION_ROLE);
+        const isLastAnswer = nonQuestionElements[nonQuestionElements.length - 1]?.id === item.id;
+
+        // return (
+        //   <div class="flex items-center">
+        //     <Tooltip title="下载" onClick={() => onDownload(rightViewContent?.value || '')}>
+        //       <IconDownload size={16} class="color-#737478 cursor-pointer" />
+        //     </Tooltip>
+        //     {isLastAnswer && onRefresh && (
+        //       <Tooltip title="重新生成" onClick={() => onRefresh(currentTaskId.value!, conversationList.value.length)}>
+        //         <IconRefresh size={16} class="color-#737478 cursor-pointer" />
+        //       </Tooltip>
+        //     )}
+        //   </div>
+        // );
+      },
+    });
+  };
+
+  // 重置生成状态 
+  const resetGenerateStatus = () => {
+    generateLoading.value = false;
+  };
+
+  // 错误处理 
+  const handleError = () => {
+    resetGenerateStatus();
+    antdMessage.error('连接服务器失败');
+  };
+
+  const onRefresh = (tempId: string, tempIndex: number) => {
+    generateLoading.value = true;
+    conversationList.value.splice(tempIndex, 1, {
+      id: tempId,
+      loading: true,
+    });
+  };
+
+  // 消息处理主函数 
+  const handleMessage = (parsedData: { event: string; data: any }) => {
+    const { event, data } = parsedData;
+    switch (event) {
+      case 'start':
+        handleStart(data);
+        break;
+      case 'node_update':
+        handleNodeUpdate(data);
+        break;
+      case 'final_result':
+        handleFinalResult(data);
+        break;
+      case 'end':
+        resetGenerateStatus();
+        break;
+      case 'error':
+        handleError();
+        break;
+      default:
+        break;
+    }
+  };
+
+  return {
+    roles,
+    currentTaskId,
+    handleMessage,
+    generateLoading,
+    conversationList,
+    showRightView,
+    rightViewContent,
+  };
+}