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, Timeline } from 'ant-design-vue';
import { IconFile, IconCaretUp, IconDownload, IconRefresh, IconCopy } 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,
  INTELLECTUAL_THINKING_ROLE,
  FILE_ROLE,
  LOADING_ROLE,
  THOUGHT_ROLE,
  ROLE_STYLE,
  EnumTeamRunStatus,
} from './constants';
import type { UseChatHandlerReturn } from './constants';

/**
 * 聊天处理器Hook
 * @returns 包含角色配置、消息处理函数和对话列表的对象
 */
export default function useChatHandler({ initSse }): UseChatHandlerReturn {
  // 在内部定义对话列表
  const { copy } = useClipboard();

  const senderRef = ref(null);
  const conversationList = ref<any[]>([]);
  const generateLoading = ref<boolean>(false);
  const currentTaskId = ref<string | null>(null);
  const showRightView = ref(false);
  const rightViewInfo = ref<any>({});

  // 初始化markdown
  const md = markdownit({
    html: true,
    breaks: true,
    linkify: true,
    typographer: true,
  });

  // 定义角色配置
  const roles: BubbleListProps['roles'] = {
    [LOADING_ROLE]: {
      placement: 'start',
      variant: 'borderless',
      style: { ...ROLE_STYLE, paddingLeft: '12px' },
    },
    [INTELLECTUAL_THINKING_ROLE]: {
      placement: 'start',
      variant: 'borderless',
      typing: { step: 2, interval: 100 },
      style: ROLE_STYLE,
    },
    [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 = () => {
    console.log('onDownload', rightViewInfo.value);
  };

  const onCopy = (content: string) => {
    copy(content);
    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 = (data: MESSAGE.Answer) => {
    const { run_id, output } = data;

    showRightView.value = true;

    // const _files = output?.files;
    // rightViewInfo.value = _files?.[0]?.content || '';

    // 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 isLastAnswer = nonQuestionElements[nonQuestionElements.length - 1]?.id === item.id;
    //   },
    // });
  };

  // 重置生成状态
  const resetGenerateStatus = () => {
    generateLoading.value = false;
  };

  // // 错误处理
  // const handleError = () => {
  //   resetGenerateStatus();
  //   antdMessage.error('连接服务器失败');
  // };

  const handleTaskStart = (data: MESSAGE.Answer) => {
    const { run_id } = data;
    currentTaskId.value = run_id;
    conversationList.value.push({
      run_id,
      content: data,
      output: data.output,
      role: ANSWER_ROLE,
      messageRender: (data: MESSAGE.Answer) => {
        let outputEleClass: string = `thought-chain-output border-l-#E6E6E8 border-l-1px  pl-12px relative left-6px mb-4px`;
        !isLastAnswer(data) && (outputEleClass += ' hasLine pb-12px pt-4px');
        return (
          <>
            <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>
            <div class="relative thought-chain-item">
              <div class="flex items-center mb-4px">
                <img src={icon2} width={13} height={13} class="mr-4px" />
                <div>{data.node}</div>
              </div>
              <div v-html={md.render(data.output ?? '')} class={outputEleClass} />
            </div>
          </>
        );
      },
    });
  };

  const onRefresh = (run_id: string) => {
    generateLoading.value = true;
    conversationList.value = conversationList.value.filter((item) => item.run_id !== run_id);
    initSse({ message: senderRef.value?.searchValue });
  };

  const isLastAnswer = (data: MESSAGE.Answer) => {
    const { run_id } = data;
    const nonQuestionElements = conversationList.value.filter(
      (item) => item.role === ANSWER_ROLE && item.run_id === run_id,
    );
    return nonQuestionElements[nonQuestionElements.length - 1]?.run_id === run_id;
  };

  const isLastTask = (data: MESSAGE.Answer) => {
    const { run_id } = data;
    const lastElement = conversationList.value[conversationList.value.length - 1];
    return lastElement && lastElement.run_id === run_id;
  };

  // 节点更新处理
  const handleTaskUpdate = (data: MESSAGE.Answer) => {
    const { run_id, output } = data;

    const existingItemIndex = conversationList.value.findIndex((item) => item.run_id === run_id);

    if (existingItemIndex !== -1 && output) {
      const existingItem = conversationList.value[existingItemIndex];
      existingItem.content.output += output;
    }
  };

  const handleTaskEnd = (data: MESSAGE.Answer) => {
    const { run_id, output, team_session_state } = data;

    const existingItem = conversationList.value.find((item) => item.run_id === run_id);
    resetGenerateStatus();

    if (existingItem) {
      existingItem.content.output += output;
      existingItem.footer = ({ item: any }) => {
        return (
          <div class="flex items-center">
            <Tooltip title="复制" onClick={() => onCopy(existingItem.content.output)}>
              <IconCopy size={16} class="color-#737478 cursor-pointer mr-12px" />
            </Tooltip>
            <Tooltip title="下载" onClick={onDownload}>
              <IconDownload size={16} class="color-#737478 cursor-pointer mr-12px" />
            </Tooltip>
            {isLastTask(data) && (
              <Tooltip title="重新生成" onClick={() => onRefresh(run_id)}>
                <IconRefresh size={16} class="color-#737478 cursor-pointer" />
              </Tooltip>
            )}
          </div>
        );
      };
    }

    if (team_session_state) {
      handleFileReview(data);
    }
  };
  // 消息处理主函数
  const handleMessage = (parsedData: { event: string; data: MESSAGE.Answer }) => {
    const { data } = parsedData;
    const { status } = data;
    switch (status) {
      case EnumTeamRunStatus.TeamRunStarted:
        handleTaskStart(data);
        break;
      case EnumTeamRunStatus.TeamRunResponseContent:
        handleTaskUpdate(data);
        break;
      case EnumTeamRunStatus.TeamRunCompleted:
        handleTaskEnd(data);
        break;
      default:
        break;
    }
  };

  return {
    roles,
    senderRef,
    currentTaskId,
    handleMessage,
    handleOpen,
    generateLoading,
    conversationList,
    showRightView,
    rightViewInfo,
  };
}