完善数字人

wujingjing

2025-04-09 28706df7da34b8854cdce96ad89c035eaded6ea9

 src/components/chat/messageList/index.vue

@@ -1,6 +1,6 @@
<template>
   <div class="message-list">
      <div v-for="(item, msgIndex) of msgList" :key="`${item.historyId}_${item.role}`">
   <div class="message-list pb-10">
      <div v-for="(item, msgIndex) of msgList" :key="`${item.historyId ?? msgIndex}_${item.role}`">
         <UserMsg
            :msg="item"
            @shareClick="shareClick"
@@ -15,10 +15,11 @@
            :isLast="msgIndex === msgList.length - 1"
            @sendChatMessage="sendChatMessage"
            @shareMsg="shareClick"
            @stopGenClick="stopGenClick"
            :isTalking="isTalking"
         />
      </div>
      <div v-if="showAskMore" class="ml-4 mt-5 pb-10">
      <div v-if="showAskMore" class="ml-4 mt-5 ">
         <div class="text-gray-600 mb-5">你可以继续问我：</div>
         <div class="space-y-2 inline-flex flex-col">
            <div
@@ -35,468 +36,30 @@
</template>

<script setup lang="ts" name="MessageList">
import type { CancelTokenSource } from 'axios';
import axios from 'axios';
import { orderBy } from 'lodash-es';
import moment from 'moment';
import { computed, ref } from 'vue';
import { convertProcessItem, formatShowTimeYear, useScrollLoad } from '../hooks/useScrollLoad';
import type { ChatContent } from '../model/types';
import { AnswerState, AnswerType, RoleEnum, type ChatMessage } from '../model/types';
import { questionStreamByPost } from '/@/api/ai/chat';
import { Logger } from '/@/model/logger/Logger';

import { ElMessage } from 'element-plus';
import { computed, defineProps, type PropType } from 'vue';
import AssistantMsg from '../assistant/index.vue';
import ChatContainer from '../components/ChatContainer.vue';
import ShareLinkDlg from '../components/shareLink/index.vue';
import type { ChatContent, ChatMessage, ContextHistory } from '../model/types';
import { RoleEnum } from '../model/types';
import UserMsg from '../user/index.vue';
import router from '/@/router';
import { activeGroupType, activeLLMId, activeRoomId, activeSampleId, isSharePage, roomConfig } from '/@/stores/chatRoom';
import { useCompRef } from '/@/utils/types';
import { toMyFixed } from '/@/utils/util';
const props = defineProps<{
   msgList: Array<ChatMessage>;
}>();
const containerRef = useCompRef(ChatContainer);
const chatListDom = computed(() => containerRef.value?.chatListDom);
import { isSharePage } from '/@/stores/chatRoom';

let isTalking = ref(false);

let messageContent = ref<ChatContent>({
   type: AnswerType.Text,
   values: '',
});
const currentRoute = router.currentRoute;
const currentRouteId = currentRoute.value.query.id as string;
activeRoomId.value = currentRouteId;
const messageList = ref<ChatMessage[]>([]);
const preQuestion = ref(null);

const parseExtraContent = (res) => {
   if (!res) return {};
   const askMoreList = orderBy(res.context_history, [(item) => Number(item.radio)], ['desc']);
   const errCode = res?.err_code;
   const errMsg = res?.json_msg;
   const origin = res;

   return {
      askMoreList,
      errCode,
      errMsg,
      origin,
   };
};

const parseContent = (res, reportIsShow = false, extraContent?) => {
   if (!res) return null;
   let content: ChatContent = {
      type: AnswerType.Text,
      values: '解析失败！',
   };
   if (res.type) {
      res.answer_type = res.type;
   }
   const curExtraContent = parseExtraContent(res);

   switch (res.answer_type) {
      case AnswerType.RecordSet:
         content = {
            type: AnswerType.RecordSet,
            values: res.values,
         };
         break;
      case AnswerType.Text:
         content = {
            type: AnswerType.Text,
            values: res.values ?? res.answer,
         };
         break;
      case AnswerType.Script:
         content = {
            type: AnswerType.Script,
            values: res,
         };
         break;

      case AnswerType.Knowledge:
         content = {
            type: AnswerType.Knowledge,
            values: res.knowledge,
         };

         break;
      case AnswerType.Report:
         content = {
            type: AnswerType.Report,
            values: (res?.reports ?? []).map((item) => ({
               content: parseContent(item, reportIsShow, { origin: item, conclusion: item.conclusion ?? [] }),
            })),
         };
         break;

      case AnswerType.Summary:
         content = {
            type: AnswerType.Summary,
            values: res.summary?.map((item) => {
               item.reportIsShow = reportIsShow;
               return item;
            }),
         };
         break;
      case AnswerType.Url:
         content = {
            type: AnswerType.Url,
            values: res.url,
         };
         break;
      case AnswerType.Map:
         content = {
            type: AnswerType.Map,
            values: res.values,
         };
         break;
      default:
         content = {
            type: AnswerType.Text,
            values: '解析失败！',
         };
         break;
   }
   if (!extraContent) {
      content = {
         ...content,
         ...curExtraContent,
      };
   } else {
      content = {
         ...content,
         ...extraContent,
      };
   }

   return content;
};

let questionRes = null;
let position = null;

let lastAxiosSource: CancelTokenSource = null;
const questionAi = async (text) => {
   let judgeParams = null;
   if (!preQuestion.value) {
      judgeParams = {};
   } else {
      judgeParams = {
         prev_question: preQuestion.value,
      };
   }

   const params = {
      question: text,
      history_group_id: currentRouteId,
      raw_mode: roomConfig.value?.[currentRouteId]?.isAnswerByLLM ?? false,
      ...judgeParams,
   } as any;

   if (position) {
      const longitude = position.coords.longitude;
      const latitude = position.coords.latitude;
      params.cur_pos = [longitude, latitude].join(',');
   }

   if (activeGroupType.value) {
      params.group_type = activeGroupType.value;
   }

   if (currentSampleId) {
      params.sample_id = currentSampleId;
      currentSampleId = '';
   }

   let lastTimestamp = new Date().getTime();
   questionRes = {};
   let lastIsResult = false;
   const resultP = new Promise((resolve, reject) => {
      const currentSource = axios.CancelToken.source();
      lastAxiosSource = currentSource;

      const getResReport = () => {
         const resReport = {
            answer_type: AnswerType.Report,
            reports: [],
         };
         return resReport;
      };
      const checkReportEmpty = () => {
         const isEmpty = !questionRes?.reports || questionRes?.reports?.length === 0;

         return isEmpty;
      };
      questionStreamByPost(
         params,
         (chunkRes) => {
            Logger.info('chunk response：\n\n' + JSON.stringify(chunkRes));

            if (chunkRes.mode === 'result') {
               lastIsResult = true;
               const res = chunkRes.value;

               if (checkReportEmpty()) {
                  const resReport = getResReport();
                  resReport.reports.push(res);
                  questionRes = resReport;
                  resolve(resReport);
               } else {
                  const lastMsg = props.msgList.at(-1);

                  // 已经解析过一次 reports
                  lastMsg.content.values.push({
                     content: parseContent(res, true, {
                        origin: res,
                     }),
                  });
               }
               return;
               // chunkRes.value = '准备数据分析';
            }

            if (chunkRes.mode === 'summary') {
               const lastMsg = props.msgList.at(-1);
               const extraContent = parseExtraContent(chunkRes.value);
               const isReportEmpty = checkReportEmpty();
               // 没有经过 result 报告还没初始化
               if (isReportEmpty) {
                  const resReport = getResReport();
                  questionRes = resReport;
               }
               // 此对话已经加入到对话列表
               if (lastMsg.content?.values && extraContent) {
                  for (const key in extraContent) {
                     if (Object.prototype.hasOwnProperty.call(extraContent, key)) {
                        const value = extraContent[key];
                        if (!lastMsg.content[key] || (Array.isArray(lastMsg.content[key]) && lastMsg.content[key].length === 0)) {
                           lastMsg.content[key] = value;
                        }
                     }
                  }

                  lastMsg.historyId = chunkRes.value.history_id;
                  const userMsg = props.msgList.at(-2);
                  userMsg.historyId = chunkRes.value.history_id;
                  userMsg.content.values = chunkRes.value.question;
               }

               if (Object.keys(questionRes).length === 0) {
                  questionRes = chunkRes.value;
               }

               // 此对话还未加入到对话列表
               if (!lastMsg.content?.values && questionRes) {
                  questionRes = {
                     ...questionRes,
                     ...chunkRes.value,
                  };
               }

               if (isReportEmpty) {
                  resolve(questionRes);
               }
               // props.msgList[props.msgList.length - 1] = finalMsg;
               scrollToBottom();
               // chunkRes.value = '你可以继续问我';
               return;
            }

            if (chunkRes.mode === 'conclusion') {
               const lastReport = props.msgList.at(-1)?.content?.values?.at(-1);
               if (lastReport) {
                  lastReport.conclusion = chunkRes.value;
                  chunkRes.value = '分析结束';
               }
            }

            if (chunkRes.mode === 'question') {
               const lastGroup = props.msgList.at(-1).stepGroup.at(-1);
               const stepList = lastGroup?.value ?? [];
               const lastStepItem = stepList.at(-1);
               if (!lastStepItem.subStep) {
                  lastStepItem.subStep = [];
               }
               lastStepItem.subStep.push({
                  type: chunkRes.value.type,
                  data: chunkRes.value,
               });
               scrollToBottom();
               return;
            }
            // 暂时不考虑多个 report情况

            // if (lastIsResult && chunkRes.mode !== 'finish') {
            //    // 开始增加新的 stepGroup
            //    props.msgList.at(-1).stepGroup.push({
            //       value: [],
            //       isShow: true,
            //    });
            //    lastIsResult = false;
            // }
            const lastGroup = props.msgList.at(-1).stepGroup.at(-1);
            const stepList = lastGroup?.value ?? [];
            const currentTimeStamp = new Date().getTime();
            const ms = toMyFixed(currentTimeStamp - lastTimestamp, 2) + ' ms';
            if (chunkRes.mode === 'finish') {
               stepList.at(-1).ms = ms;
               isTalking.value = false;

               return;
            }

            if (stepList?.length >= 1) {
               stepList.at(-1).ms = ms;
            } else {
               const stepGroup = props.msgList.at(-1).stepGroup;
               if (stepGroup.length > 1) {
                  const lastStepList = stepGroup.at(-2).value;
                  lastStepList.at(-1).ms = ms;
               }
            }
            lastTimestamp = currentTimeStamp;
            const stepItem = convertProcessItem(chunkRes);

            stepList.push(stepItem);
            // 强制触发更新

            scrollToBottom();
         },
         {
            cancelToken: currentSource.token,
         }
      )
         .catch((err) => {
            throw err;
         })
         .finally(() => {
            isTalking.value = false;
            // 收起所有 stepGroup
            props.msgList.at(-1).stepGroup.forEach((item) => {
               item.isShow = false;
            });
         });
   });

   await resultP;
   const content = parseContent(questionRes, true);
   return content;
};

const clearMessageContent = () =>
   (messageContent.value = {
      type: AnswerType.Text,
      values: '',
   });

let currentSampleId = '';

let currentLLMId = null;

const stopGenClick = () => {
   lastAxiosSource?.cancel();
   isTalking.value = false;
   chatListLoading.value = false;
   props.msgList.at(-1).isStopMsg = true;
};

const checkCanSend = (content: ChatContent = messageContent.value) => {
   if (!content?.values) {
      return false;
   }
   if (isTalking.value || chatListLoading.value) {
      ElMessage.warning('ai 正在回复中，请稍后尝试提问');
      return false;
   }
   return true;
};

const addChatItem = (content: ChatContent) => {
   isTalking.value = true;
   const userItem: ChatMessage = { role: RoleEnum.user, content, isChecked: false } as any;
   const assistantItem: ChatMessage = {
      role: RoleEnum.assistant,
      content: {
         type: AnswerType.Report,
      },
      state: AnswerState.Null,
      stepGroup: [
         {
            value: [],
            isShow: true,
         },
      ],
      isStopMsg: false,
      isChecked: false,
   } as any;
   messageList.value.push(userItem);
   clearMessageContent();

   messageList.value.push(assistantItem);
   scrollToBottom();
   return [userItem, assistantItem];
};

const sendChatMessage = async (content: ChatContent = messageContent.value) => {
   if (!checkCanSend(content)) {
      return;
   }
   const isNewChat = messageList.value.length === 0;
   if (isNewChat) {
      if (activeSampleId.value) {
         currentSampleId = activeSampleId.value;
      }

      if (activeLLMId.value) {
         currentLLMId = activeLLMId.value;
      }
   }
   let resMsgContent: ChatContent = null;

   try {
      const [userItem, assistantItem] = addChatItem(content);

      resMsgContent = await questionAi(content.values);

      updateLoadIndex();

      userItem.historyId = questionRes?.history_id;
      userItem.content.values = questionRes?.question ?? userItem.content.values;
      assistantItem.historyId = questionRes?.history_id;
      const currentTime = formatShowTimeYear(moment().format('YYYY-MM-DD HH:mm:ss'));
      assistantItem.createTime = currentTime;
      assistantItem.content = resMsgContent;
      setTimeout(() => {
         // 收到回复，继续滚
         scrollToBottom();
      }, 300);
   } catch (error: any) {
      console.log(error);
   }
};

const sendClick = () => {
   sendChatMessage(messageContent.value);
};

const { loadRangeData, onChatListScroll, moreIsLoading, updateLoadIndex } = useScrollLoad({
   container: chatListDom,
   historyGroupId: currentRouteId,
   messageList,
   parseAnswerContent: parseContent,
const props = defineProps({
   msgList: {
      type: Array as PropType<ChatMessage[]>,
   },
   isTalking: {
      type: Boolean,
      default: false,
   },
});

const chatListLoading = ref(true);

const scrollToBottom = () => {
   containerRef.value?.scrollToBottom();
};
const emit = defineEmits({
   shareClick: (msg: ChatMessage) => true,
   setCommonQuestionClick: (msg: ChatMessage) => true,
   sendChatMessage: (msg: ChatContent) => true,
   askMoreClick: (msg: ContextHistory) => true,
   stopGenClick: () => true,
});
const showAskMore = computed(() => {
   if (!props.msgList || props.msgList.length === 0) return false;
   const last = props.msgList.at(-1);
@@ -504,61 +67,24 @@
   const result = isShow && !isSharePage.value;
   return result;
});
const askMoreClick = (item) => {
   if (!item.question) return;
   sendChatMessage({ type: AnswerType.Text, values: item.question });
const shareClick = (msg: ChatMessage) => {
   emit('shareClick', msg);
};

//#region ====================== 分享 ======================

const shareLinkDlgRef = useCompRef(ShareLinkDlg);

const shareClick = async (item: ChatMessage) => {
   shareLinkDlgRef.value.openShare(item);
const setCommonQuestionClick = (msg: ChatMessage) => {
   emit('setCommonQuestionClick', msg);
};
//#endregion

//#region ====================== 用户询问的问题设置为常用语 ======================
const setCommonQuestionInfo = ref({});

//用户问题设置为常用语
const setCommonQuestionClick = (item) => {
   setCommonQuestionInfo.value = item;
const sendChatMessage = (msg: ChatContent) => {
   emit('sendChatMessage', msg);
};
//#endregion

const askMoreClick = (msg: ContextHistory) => {
   emit('askMoreClick', msg);
};

const stopGenClick = () => {
   emit('stopGenClick');
};
</script>
<style scoped lang="scss">
pre {
   font-family: -apple-system, 'Noto Sans', 'Helvetica Neue', Helvetica, 'Nimbus Sans L', Arial, 'Liberation Sans', 'PingFang SC',
      'Hiragino Sans GB', 'Noto Sans CJK SC', 'Source Han Sans SC', 'Source Han Sans CN', 'Microsoft YaHei', 'Wenquanyi Micro Hei',
      'WenQuanYi Zen Hei', 'ST Heiti', SimHei, 'WenQuanYi Zen Hei Sharp', sans-serif;
}

.more-loading {
   :deep(.el-loading-spinner) {
      --loading-size: 35px;
      margin-top: 0;
      .circular {
         width: var(--loading-size);
         height: var(--loading-size);
      }
   }
}

:deep(.el-step__icon.is-text) {
   --radius-size: 24px;
   width: var(--radius-size);
   height: var((--radius-size));
}

:deep(.el-step__icon-inner) {
   font-size: 16px !important;
}
:deep(.el-step__description) {
   min-height: 20px;
}

:deep(.el-step:last-of-type .el-step__description) {
   // display: none;
}
</style>
<style scoped lang="scss"></style>