lingji-work-fe/src/components/xt-chat/chat-view/useChatHandler.tsx

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;

    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,
  };
}