获取位置

gerson

2025-02-20 a762b59c2c4b459f72ede19716d476bb3513f622

 src/components/chat/Chat.vue

@@ -1,314 +1,94 @@
<template>
   <div class="flex h-full">
      <div class="flex flex-col h-full flex-auto">
         <div ref="chatListDom" class="relative h-full flex flex-col items-center overflow-y-auto">
            <span
               class="more-loading absolute text-blue-400 left-[50%] translate-x-[-50%] cursor-pointer w-10"
               v-loading="moreIsLoading"
            ></span>
            <div class="h-full relative" v-loading="chatListLoading" :style="{ width: chatWidth }">
               <template v-if="computedMessageList?.length > 0">
                  <div
                     class="flex px-4 py-6 rounded-lg relative"
                     :class="{ 'flex-row-reverse': item.role === RoleEnum.user, 'px-10': isShareCheck }"
                     v-for="(item, msgIndex) of computedMessageList"
                     :key="`${item.historyId}_${item.role}`"
                  >
                     <div class="absolute top-0 left-[72px] text-[#8d8e99]">{{ item?.createTime }}</div>
                     <!-- :class="{ 'top-[30px]': item.role === RoleEnum.user, 'top-[30px]': item.role === RoleEnum.assistant }" -->
   <ChatContainer :loading="chatListLoading" :more-is-loading="moreIsLoading" :is-share-page="isSharePage" ref="containerRef">
      <!-- 消息列表 -->
      <template #message-list>
         <MessageList
            v-if="computedMessageList?.length > 0"
            :msgList="computedMessageList"
            :isTalking="isTalking"
            @shareClick="shareClick"
            @setCommonQuestionClick="setCommonPhraseClick"
            @sendChatMessage="sendChatMessage"
            @stopGenClick="stopGenClick"
            @askMoreClick="askMoreClick"
         />
         <el-empty v-else-if="isSharePage && !chatListLoading" :image-size="200">
            <template #description>
               <span class="text-[15px]">分享的对话不存在或已失效</span>
            </template>
         </el-empty>
      </template>

                     <el-checkbox
                        v-if="isShareCheck"
                        class="absolute left-0 top-[28px]"
                        size="large"
                        v-model="item.isChecked"
                        @change="(isChecked) => shareCheckChange(isChecked as boolean, item)"
                     ></el-checkbox>
                     <img
                        class="rounded-full size-12 flex-0"
                        :class="{ 'mr-4': item.role === RoleEnum.assistant, 'ml-4': item.role === RoleEnum.user }"
                        :src="roleImageMap[item.role]"
                        alt=""
                        srcset=""
                     />
                     <div class="flex-auto flex" :class="{ 'justify-end': item.role === RoleEnum.user }">
                        <div class="inline-flex flex-col" :class="{ 'w-full': item.role === RoleEnum.assistant }">
                           <div class="w-full">
                              <div
                                 class="text-sm rounded-[6px] p-4 leading-relaxed"
                                 :style="{ backgroundColor: item.role === RoleEnum.user ? 'rgb(197 224 255)' : 'white' }"
                                 :class="{ group: item.role === RoleEnum.user }"
                              >
                                 <div class="flex flex-col" v-if="item?.stepList?.length > 0">
                                    <div class="flex items-center mb-3">
                                       <span class="mr-2">意图分析：</span>
                                       <div
                                          @click="toggleStepList(item)"
                                          class="cursor-pointer border border-gray-300 border-solid w-fit px-2 flex items-center space-x-2 rounded-lg hover:bg-gray-100 active:bg-gray-200"
                                       >
                                          <span>
                                             {{ toggleStepLabel(item) }}
                                          </span>
                                          <span
                                             class="ywifont"
                                             :class="{ 'ywicon-unfold': !item.stepIsShow, 'ywicon-fold': item.stepIsShow }"
                                          ></span>
                                       </div>
                                    </div>

                                    <!-- 过程输出 -->
                                    <el-steps v-show="item.stepIsShow" direction="vertical" :active="activeStep">
                                       <el-step
                                          v-for="(subItem, index) in item.stepList"
                                          :title="subItem.title"
                                          :status="stepEnumMap[subItem.status]"
                                       >
                                          <template
                                             #icon
                                             v-if="index + 1 === item.stepList.length && isTalking && msgIndex === computedMessageList.length - 1"
                                          >
                                             <span class="ywifont ywicon-loading1 animate-spin !text-[24px]"></span>
                                          </template>
                                          <template #title>
                                             <span class="text-sm"
                                                >{{ subItem.title
                                                }}<span v-if="subItem.ms" class="text-green-600">{{ `（${subItem.ms}）` }}</span></span
                                             >
                                          </template>
                                       </el-step>
                                    </el-steps>
                                 </div>

                                 <div
                                    v-if="item.role === RoleEnum.user && item.content?.values && !isSharePage && !isShareCheck"
                                    class="absolute flex items-center bottom-0 group invisible"
                                 >
                                    <div
                                       class="bg-[#fff] flex items-center mr-4 space-x-2 flex-nowrap rounded-[6px] py-2 px-2 group-hover:visible"
                                    >
                                       <el-tooltip effect="dark" content="复制" placement="top">
                                          <div class="flex items-center justify-center size-[20px]">
                                             <i
                                                class="p-2 ywifont ywicon-copy cursor-pointer hover:text-[#0284ff] font-medium !text-[15px] hover:!text-[18px]"
                                                @click="copyUserClick(item)"
                                             />
                                          </div>
                                       </el-tooltip>
                                       <el-tooltip effect="dark" content="设为常用语" placement="top">
                                          <div class="flex items-center justify-center size-[20px]">
                                             <i
                                                class="p-2 ywifont ywicon-cubelifangti cursor-pointer hover:text-[#0284ff] text-[#000] font-[590] !text-[15px] hover:!text-[18px]"
                                                @click="setCommonQuestionClick(item)"
                                             />
                                          </div>
                                       </el-tooltip>
                                       <el-tooltip effect="dark" content="分享" placement="top">
                                          <div class="flex items-center justify-center size-[15px]">
                                             <i
                                                :class="{ 'text-[#0284ff]': item.state === AnswerState.Unlike }"
                                                class="p-2 ywifont ywicon-fenxiang cursor-pointer hover:text-[#0284ff] !text-[15px] hover:!text-[18px]"
                                                @click="shareClick(item)"
                                             />
                                          </div>
                                       </el-tooltip>
                                    </div>
                                 </div>
                                 <template v-if="item.content?.values">
                                    <div v-if="item.content.errCode === ErrorCode.Message" class="flex-column w-full">
                                       <p class="text-red-500">
                                          {{ item.content.errMsg }}
                                       </p>
                                       <div class="mt-5 flex" v-if="showFixQuestion(item)">
                                          <div class="text-gray-600 flex-0 mt-4">
                                             {{ '猜你想问：' }}
                                          </div>
                                          <div class="ml-1 space-x-2 inline-flex flex-wrap">
                                             <div
                                                v-for="fixItem in item.content.origin?.sample_question"
                                                :key="fixItem"
                                                class="bg-gray-200 p-3 mt-1 hover:bg-[#c5e0ff] hover:text-[#1c86ff] cursor-pointer rounded-lg"
                                                @click="fixQuestionClick(fixItem, item.content.origin)"
                                             >
                                                {{ fixItem }}
                                             </div>
                                          </div>
                                       </div>
                                    </div>
                                    <template v-else>
                                       <component
                                          :conclusion="item.conclusion"
                                          :is="answerTypeMapCom[item.content.type]"
                                          :data="item.content.values"
                                          :originData="item"
                                          :isTalking="isTalking && msgIndex === computedMessageList.length - 1"
                                       />
                                       <div
                                          v-if="item.role === RoleEnum.assistant && item.content.origin?.ext_call_list"
                                          class="flex font-bold items-center mt-6"
                                       >
                                          <div class="flex-0 mb-auto -mr-4">关联功能：</div>
                                          <div class="space-x-5 flex flex-wrap">
                                             <div
                                                v-for="callItem in item.content.origin?.ext_call_list"
                                                :key="callItem.call_ext_id"
                                                @click="relativeQueryClick(callItem)"
                                                class="cursor-pointer hover:underline first-of-type:ml-5"
                                             >
                                                {{ callItem.question }}
                                             </div>
                                          </div>
                                       </div>
                                    </template>
                                 </template>
                              </div>

                              <div
                                 v-if="item.role === RoleEnum.assistant && item.content?.values && !isSharePage && !isShareCheck"
                                 class="absolute flex items-center right-0 mr-4 mt-2 space-x-2"
                              >
                                 <div
                                    class="flex items-center justify-center size-[15px]"
                                    v-if="item.content?.type === AnswerType.Text || item.content?.type === AnswerType.Knowledge"
                                 >
                                    <i
                                       class="p-2 ywifont ywicon-copy cursor-pointer hover:text-[#0284ff] hover:!text-[18px]"
                                       @click="copyClick(item)"
                                    />
                                 </div>
                                 <template v-if="item.content.errCode !== ErrorCode.Message">
                                    <el-tooltip effect="dark" content="点赞" placement="top">
                                       <div class="flex items-center justify-center size-[15px]">
                                          <i
                                             :class="{ 'text-[#0284ff]': item.state === AnswerState.Like }"
                                             class="p-2 ywifont ywicon-dianzan cursor-pointer hover:text-[#0284ff] font-medium hover:!text-[18px]"
                                             @click="likeClick(item)"
                                          />
                                       </div>
                                    </el-tooltip>
                                    <el-tooltip effect="dark" content="点踩" placement="top">
                                       <div class="flex items-center justify-center size-[15px]">
                                          <i
                                             :class="{ 'text-[#0284ff]': item.state === AnswerState.Unlike }"
                                             class="p-2 ywifont ywicon-buzan cursor-pointer hover:text-[#0284ff] !text-[13px] hover:!text-[15px]"
                                             @click="unLikeClick(item)"
                                          />
                                       </div>
                                    </el-tooltip>
                                 </template>
                                 <el-tooltip effect="dark" content="分享" placement="top">
                                    <div class="flex items-center justify-center size-[15px]">
                                       <i
                                          class="p-2 ywifont ywicon-fenxiang cursor-pointer hover:text-[#0284ff] !text-[15px] hover:!text-[18px]"
                                          @click="shareClick(item)"
                                       />
                                    </div>
                                 </el-tooltip>
                                 <el-tooltip effect="dark" content="反馈" placement="top">
                                    <div class="flex items-center justify-center size-[15px] relative">
                                       <i
                                          class="p-2 ywifont ywicon-wentifankui cursor-pointer hover:text-[#0284ff] !text-[13px] hover:!text-[15px]"
                                          @click="
                                             ($event) =>
                                                feedbackClick(
                                                   $event,
                                                   item,
                                                   computedMessageList
                                                      .filter((v) => v.role === RoleEnum.assistant)
                                                      .findIndex((v) => v.historyId === item.historyId)
                                                )
                                          "
                                       />
                                       <FeedbackPanel
                                          v-show="feedbackIsShow && currentFeedbackMapItem === item"
                                          ref="feedbackPanelRef"
                                          v-model:isShow="feedbackIsShow"
                                          v-model:content="feedbackContent"
                                          :chatItem="currentFeedbackMapItem"
                                          :position="feedbackPosition"
                                       />
                                    </div>
                                 </el-tooltip>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </template>
               <el-empty v-else-if="isSharePage && !chatListLoading" :image-size="200">
                  <template #description>
                     <span class="text-[15px]"> 分享的对话不存在或已失效 </span>
                  </template>
               </el-empty>
               <div v-if="showAskMore && !isShareCheck" class="ml-4 mt-5 text-sm pb-10">
                  <div class="text-gray-600 mb-5">你可以继续问我：</div>
                  <div class="space-y-2 inline-flex flex-col">
                     <div
                        v-for="item in computedMessageList.at(-1).content.askMoreList"
                        :key="item.history_id"
                        class="bg-white p-3 hover:bg-[#c5e0ff] hover:text-[#1c86ff] cursor-pointer rounded-lg"
                        @click="askMoreClick(item)"
                     >
                        {{ item.question }}
                     </div>
                  </div>
               </div>
            </div>
         </div>

         <div class="sticky bottom-0 w-full p-6 bg-[rgb(247,248,250)] flex justify-center" v-if="!isSharePage && !isShareCheck">
      <!-- 输入区域 -->
      <template #input-area>
         <div class="w-full">
            <PlayBar
               ref="playBarRef"
               v-model:voicePageIsShow="voicePageIsShow"
               :isTalking="isTalking"
               :isHome="false"
               :msgList="computedMessageList"
               v-model="messageContent.values"
               @sendClick="sendClick"
               @showUpChatClick="showUpChatClick"
               @showDownChatClick="showDownChatClick"
               @stopGenClick="stopGenClick"
               :style="{ width: chatWidth }"
               :setCommonQuestionInfo="setCommonQuestionInfo"
            ></PlayBar>
               class="mx-auto"
            />
         </div>
         <div class="sticky bottom-0 w-full p-6 bg-[rgb(247,248,250)] flex justify-center" v-if="isShareCheck"></div>
      </div>
      <CustomDrawer v-model:isShow="drawerIsShow" @updateChatInput="updateChatInput" />
   </div>
      </template>

      <!-- 抽屉 -->
      <template #drawer>
         <CustomDrawer v-model:isShow="drawerIsShow" @updateChatInput="updateChatInput" />
         <ShareLinkDlg ref="shareLinkDlgRef" />
      </template>
   </ChatContainer>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import _ from 'lodash';
import type { CancelTokenSource } from 'axios';
import axios from 'axios';
import { orderBy } from 'lodash-es';
import moment from 'moment';
import { computed, onMounted, ref } from 'vue';
import useClipboard from 'vue-clipboard3';
import FeedbackPanel from './components/FeedbackPanel.vue';
import { useAssistantContentOpt } from './hooks/useAssistantContentOpt';
import { useQueryProcess } from './hooks/useQueryProcess';
import { convertProcessItem, useScrollLoad } from './hooks/useScrollLoad';
import { useScrollToBottom } from './hooks/useScrollToBottom';
import type { ChatContent, StepItem } from './model/types';
import { AnswerState, AnswerType, RoleEnum, answerTypeMapCom, roleImageMap, stepEnumMap, type ChatMessage } from './model/types';
import { extCallQuery, questionStreamByPost, shareChatHistoryByPost } from '/@/api/ai/chat';
import { computed, nextTick, onActivated, onMounted, ref } from 'vue';
import { loadAmisSource } from '../amis/load';
import { useScrollLoad } from './hooks/useScrollLoad';
import type { ChatContent } from './model/types';
import { AnswerState, AnswerType, RoleEnum, type ChatMessage } from './model/types';
import { getShareChatJsonByPost, questionStreamByPost } from '/@/api/ai/chat';
import PlayBar from '/@/components/chat/components/playBar/PlayBar.vue';
import CustomDrawer from '/@/components/drawer/CustomDrawer.vue';
import { SERVE_URL, SHARE_URL } from '/@/constants';
import { Logger } from '/@/model/logger/Logger';
import { triggerRef } from 'vue';
import { ElLoadingService, ElMessage } from 'element-plus';
import ChatContainer from './components/ChatContainer.vue';
import ShareLinkDlg from './components/shareLink/index.vue';
import router from '/@/router';
import MessageList from './messageList/index.vue';
import {
   activeChatRoom,
   activeGroupType,
   activeLLMId,
   activeRoomId,
   activeSampleId,
   activeSectionAId,
   getRoomConfig,
   isSharePage,
   roomConfig,
} from '/@/stores/chatRoom';
import { ErrorCode } from '/@/utils/request';
import emitter from '/@/utils/mitt';
import { useCompRef } from '/@/utils/types';
import { toMyFixed } from '/@/utils/util';
const chatWidth = '75%';
import { useLoadData } from './hooks/useLoadData';
import { useSyncMsg } from './hooks/useSyncMsg';
import { getCurrentPosition } from '/@/utils/brower';
const containerRef = useCompRef(ChatContainer);
const chatListDom = computed(() => containerRef.value?.chatListDom);
const scrollToBottom = () => {
   containerRef.value?.scrollToBottom();
};
const { loadReplyData, parseContent, parseExtraContent, convertProcessItem, convertProcessToStep, formatShowTimeYear } = useLoadData();
const voicePageIsShow = ref(false);
let isTalking = ref(false);
const chatWidth = computed(() => containerRef.value?.chatWidth);
let messageContent = ref<ChatContent>({
   type: AnswerType.Text,
   values: '',
@@ -316,152 +96,57 @@
const currentRoute = router.currentRoute;
const currentRouteId = currentRoute.value.query.id as string;
activeRoomId.value = currentRouteId;
const chatListDom = ref<HTMLDivElement>();
const messageList = ref<ChatMessage[]>([]);
const computedMessageList = computed(() => {
   return messageList.value.filter((v) => !!v);
});

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

   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.Knowledge:
         content = {
            type: AnswerType.Knowledge,
            values: res.knowledge,
         };

         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;
   }
   content.askMoreList = _.orderBy(res.context_history, [(item) => Number(item.radio)], ['desc']);
   content.errCode = res?.err_code;
   content.errMsg = res?.json_msg;
   content.origin = res;
   return content;
};
const { clearQueryProcess, process, processId, queryProcess } = useQueryProcess();

//#region ====================== 步骤 step ======================
const activeStep = ref(-1);
const stepList = ref<StepItem[]>([
   {
      title: '意图分析中...',
      status: 0,
   },
   {
      title: '意图分析完成',
      status: 1,
   },
   {
      title: '思考如何执行:指标明细查询',
      status: 1,
   },
   {
      title: '指标明细查询完成',
      status: 1,
   },
]);

const resetStep = () => {
   activeStep.value = -1;
   stepList.value = [];
};

const toggleStepLabel = (item: ChatMessage) => (item.stepIsShow ? '收起' : '展开');
const toggleStepList = (item: ChatMessage) => {
   item.stepIsShow = !item.stepIsShow;
};

//#endregion

const DEFAULT_SECTION_A_ID = 'knowledge_base';
let questionRes = null;
const preQuestion = ref(null);

let finalCalcSectionAId = null;
let lastAxiosSource: CancelTokenSource = null;

// 通过修改 isTalking 来触发更新
const triggerRefresh = () => {
   isTalking.value = !isTalking.value;

   nextTick(() => {
      isTalking.value = !isTalking.value;
   });
};
let position: Position = null;
const questionAi = async (text) => {
   let judgeParams = null;
   if (!preQuestion.value) {
      // const aiContent = computedMessageList.value.filter((item) => item.role === RoleEnum.assistant);
      // const lastQuestion = aiContent[aiContent.length - 2]?.content?.origin?.question;
      // judgeParams = lastQuestion
      //    ? {
      //          prev_question: lastQuestion,
      //      }
      //    : {};
      // 正常回答暂时不采用
      judgeParams = {};
   } else {
      judgeParams = {
         prev_question: preQuestion.value,
      };
   }
   let currentSectionAId = '';
   if (activeSectionAId.value) {
      currentSectionAId = activeSectionAId.value;
      activeSectionAId.value = '';
   } else {
      const lastSectionAItem = _.findLast(
         computedMessageList.value as any,
         (item) => item.role === RoleEnum.assistant && !!item.sectionAId
      );
      currentSectionAId = lastSectionAItem?.sectionAId ?? DEFAULT_SECTION_A_ID;
   }
   finalCalcSectionAId = currentSectionAId;

   const params = {
      // process_id: processId.value,
      question: text,
      // FIXME: 暂时这样
      // section_a_id: currentSectionAId,
      history_group_id: currentRouteId,
      raw_mode: roomConfig.value?.[currentRouteId]?.isAnswerByLLM ?? false,
      ...judgeParams,
   } as any;

   // if (!position) {
   //    const loadingInstance = ElLoadingService({
   //       text: '获取位置中...',
   //       target: '.layout-parent',
   //       fullscreen:false,
   //    });
   //    position = await getCurrentPosition().finally(() => {
   //       loadingInstance.close();
   //    });
   // }

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

   if (activeGroupType.value) {
      params.group_type = activeGroupType.value;
@@ -472,59 +157,201 @@
      currentSampleId = '';
   }

   // if (currentLLMId) {
   //    params.llm_id = currentLLMId;
   // }
   // clearQueryProcess();
   // queryProcess();
   resetStep();
   let res = null;
   let lastTimestamp = new Date().getTime();
   const resultP = new Promise(async (resolve, reject) => {
      await questionStreamByPost(params, (chunkRes) => {
         Logger.info('chunk response：\n\n' + JSON.stringify(chunkRes));
         if (chunkRes.mode === 'result') {
            res = chunkRes.value;
            resolve(res);
            chunkRes.value = '准备数据分析';
         }
   questionRes = {};
   let lastIsResult = false;
   const resultP = new Promise((resolve, reject) => {
      const currentSource = axios.CancelToken.source();
      lastAxiosSource = currentSource;

         if (chunkRes.mode === 'conclusion') {
            computedMessageList.value.at(-1).conclusion = chunkRes.value;
            chunkRes.value = '分析结束';
         }
         const stepList = computedMessageList.value.at(-1).stepList;
         const currentTimeStamp = new Date().getTime();
         const ms = toMyFixed(currentTimeStamp - lastTimestamp, 2) + ' ms';
         if (chunkRes.mode === 'finish') {
            stepList.at(-1).ms = ms;
      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));

            isTalking.value = false;
            return;
         }
            if (chunkRes.mode === 'result') {
               lastIsResult = true;
               const res = chunkRes.value;
               if (checkReportEmpty()) {
                  const resReport = getResReport();
                  resReport.reports.push(res);
                  questionRes = resReport;
                  // resReport.reports = resReport.reports.concat([]);
                  resolve(resReport);
               } else {
                  const lastMsg = computedMessageList.value.at(-1);
                  // lastMsg.content.values = lastMsg.content.values.concat([]);
                  // 已经解析过一次 reports
                  if (!lastMsg.content.values) {
                     lastMsg.content.values = [];
                  }

         if (stepList?.length >= 1) {
            stepList.at(-1).ms = ms;
         }
         lastTimestamp = currentTimeStamp;
                  lastMsg.content.values.push({
                     content: parseContent(res, true, {
                        origin: res,
                     }),
                  });
               }
               triggerRefresh();
               return;
               // chunkRes.value = '准备数据分析';
            }

         const stepItem = convertProcessItem(chunkRes);
         stepList.push(stepItem);
         scrollToBottom();
      })
            if (chunkRes.mode === 'summary') {
               const lastMsg = computedMessageList.value.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 = computedMessageList.value.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);
               }
               // computedMessageList.value[computedMessageList.value.length - 1] = finalMsg;
               scrollToBottom();
               // chunkRes.value = '你可以继续问我';
               return;
            }

            if (chunkRes.mode === 'conclusion') {
               const lastReport = computedMessageList.value.at(-1)?.content?.values?.at(-1);
               if (lastReport) {
                  lastReport.conclusion = chunkRes.value;
                  chunkRes.value = '分析结束';
               }
            }
            const getLastGroup = () => {
               const lastGroup = computedMessageList.value.at(-1).stepGroup[0];
               return lastGroup;
            };
            const getLastStepList = () => {
               const stepList = getLastGroup()?.value ?? [];
               return stepList;
            };
            const getLastStepItem = () => {
               const stepList = getLastStepList();
               const lastStepItem = stepList.at(-1);
               return lastStepItem;
            };

            const checkStepItem = (stepItem) => {
               if (!stepItem.subStep) {
                  stepItem.subStep = [];
               }
            };

            if (chunkRes.mode === 'question') {
               const lastStepItem = getLastStepItem();
               checkStepItem(lastStepItem);
               lastStepItem.subStep.push({
                  type: chunkRes.value.type,
                  data: chunkRes.value,
               });
               scrollToBottom();
               return;
            }

            // 暂时不考虑多个 report 情况

            if (lastIsResult && chunkRes.mode !== 'finish') {
               // const lastTow = computedMessageList.value.at(-1);
               // lastTow.stepGroup.at(-1).value.at(-1).finishLoading = true;
               // lastTow.content.values = lastTow.content.values.concat([]);

               // 开始增加新的 stepGroup，后续的 stepGroup 并没有实际作用，只是为了做迭代用，迭代出组件，屎山代码实在太难改了！！！
               computedMessageList.value.at(-1).stepGroup.push({
                  value: [],
                  isShow: true,
               });
               lastIsResult = false;
            }
            const lastGroup = computedMessageList.value.at(-1).stepGroup[0];
            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 = computedMessageList.value.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;

            computedMessageList.value.at(-1).stepIsShow = false;
            resetStep();
            // 收起所有 stepGroup
            computedMessageList.value.at(-1).stepGroup.forEach((item) => {
               item.isShow = false;
            });
         });
   });

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

@@ -538,15 +365,55 @@

let currentLLMId = null;

const sendChatMessage = async (content: ChatContent = messageContent.value, cb?: any, isCallExtParams?: any) => {
const stopGenClick = () => {
   lastAxiosSource?.cancel();
   isTalking.value = false;
   chatListLoading.value = false;

   computedMessageList.value.at(-1).isStopMsg = true;
};

const checkCanSend = (content: ChatContent = messageContent.value) => {
   if (!content?.values) {
      return;
      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) {
@@ -560,181 +427,142 @@
   let resMsgContent: ChatContent = null;

   try {
      isTalking.value = true;
      const userItem: ChatMessage = { role: RoleEnum.user, content, isChecked: false } as any;
      const assistantItem: ChatMessage = {
         role: RoleEnum.assistant,
         content: null,
         state: AnswerState.Null,
         stepList: [],
         stepIsShow: true,
         isChecked: false,
      } as any;
      // 发送当前
      messageList.value.push(userItem);
      // 清空输入框
      clearMessageContent();
      const [userItem, assistantItem] = addChatItem(content);
      resMsgContent = await questionAi(content.values);
      updateLoadIndex();

      // 出现回复，置空出现等待动画
      messageList.value.push(assistantItem);
      // 滚动至当前发送消息
      scrollToBottom();

      if (isCallExtParams) {
         const extRes = await extCallQuery(isCallExtParams);
         questionRes = extRes;
         resMsgContent = parseContent(extRes, true);
      } else {
         resMsgContent = await questionAi(content.values);
      }
      nextUserMsgEndIndex.value++;
      if (isNewChat) {
         const firstResCb = getRoomConfig(currentRouteId, 'firstResCb');
         firstResCb?.(resMsgContent);
      } else {
         cb?.(resMsgContent);
      }
      userItem.historyId = questionRes.history_id;
      userItem.historyId = questionRes?.history_id;
      const current = moment().format('YYYY-MM-DD HH:mm:ss');
      userItem.createTime = current;
      userItem.content.values = questionRes?.question ?? userItem.content.values;
      assistantItem.historyId = questionRes.history_id;
      assistantItem.sectionAId = finalCalcSectionAId;
      appendLastMessageContent(resMsgContent);
      assistantItem.historyId = questionRes?.history_id;
      const currentTime = formatShowTimeYear(current);
      assistantItem.createTime = currentTime;
      assistantItem.content = resMsgContent;
      setTimeout(() => {
         // 收到回复，继续滚
         scrollToBottom();
      }, 300);
   } catch (error: any) {
      // appendLastMessageContent({
      //    type: AnswerType.Text,
      //    values: '发生错误！',
      // });
   }
   } catch (error: any) {}
};

const sendClick = (cb) => {
   sendChatMessage(messageContent.value, cb);
};
const appendLastMessageContent = (content: ChatContent) => {
   const currentTime = moment().format('MM月DD日 HH:mm:ss');
   if (messageList.value.at(-1)) {
      messageList.value.at(-1).content = content;
      messageList.value.at(-1).createTime = currentTime;
   }
const sendClick = () => {
   sendChatMessage(messageContent.value);
};

const { loadRangeData, onChatListScroll, moreIsLoading, nextUserMsgEndIndex } = useScrollLoad({
const { loadRangeData, onChatListScroll, moreIsLoading, updateLoadIndex } = useScrollLoad({
   container: chatListDom,
   historyGroupId: currentRouteId,
   messageList,
   parseAnswerContent: parseContent,
   loadReplyData,
});

useSyncMsg({
   msgList: messageList,
   updateLoadIndex,
   historyGroupId: currentRouteId,
   checkCanSync: (data) => {
      return !isTalking.value && !moreIsLoading.value;
   },
   showTip: (data) => {
      playBarRef.value.showSyncTip(data);
   },
   loadReplyData,
   scrollToBottom,
});
const chatListLoading = ref(true);

const { scrollToBottom, scrollToTop } = useScrollToBottom({
   chatListDom: chatListDom,
onActivated(() => {
   emitter.emit('updateHeaderTitle', activeChatRoom.value?.title ?? '');
});

const initNewChat = () => {
   messageContent.value = {
      type: AnswerType.Text,
      values: activeChatRoom.value?.title,
   };
   sendChatMessage();
};

const initHistoryChat = () => {
   // 初始状态滚一下
   scrollToBottom();

   setTimeout(() => {
      chatListDom.value.addEventListener('scroll', onChatListScroll);
   }, 300);
};

/**
 * 加载分享数据
 */
const loadShareData = async () => {
   const res = await getShareChatJsonByPost({
      share_id: router.currentRoute.value.query.id as string,
   });

   const msgValue = res?.values;
   if (!msgValue) {
      messageList.value = [];
      return;
   }
   const userMsg: ChatMessage = {
      historyId: msgValue.history_id,
      role: RoleEnum.user,
      content: {
         type: AnswerType.Text,
         values: msgValue.question,
      },
      isChecked: false,
   };

   const assistantMsg: ChatMessage = {
      historyId: msgValue.history_id,
      role: RoleEnum.assistant,
      content: parseContent(msgValue),
      stepGroup: (msgValue?.reports ?? []).map((item) => ({
         value: convertProcessToStep(item?.exec_process),
         isShow: false,
      })),
      isStopMsg: false,

      conclusion: msgValue.conclusion ?? [],
      isChecked: false,
   };
   messageList.value = [userMsg, assistantMsg];
};

onMounted(async () => {
   messageList.value = [];
   // 加载初始数据
   chatListLoading.value = true;
   await loadRangeData().finally(() => {
      chatListLoading.value = false;
   });
   if (isSharePage.value) {
      await loadShareData().finally(() => {
         chatListLoading.value = false;
      });
   } else {
      await loadRangeData().finally(() => {
         chatListLoading.value = false;
      });
   }
   setTimeout(() => {
      emitter.emit('updateHeaderTitle', activeChatRoom.value?.title ?? '');
   }, 300);

   if (messageList.value.length === 0) {
      messageContent.value = {
         type: AnswerType.Text,
         values: activeChatRoom.value?.title,
      };

      sendChatMessage();
      initNewChat();
   } else {
      if (isSharePage.value) {
      if (!isSharePage.value) {
         setTimeout(() => {
            // 滚动到顶部
            scrollToTop();
         }, 300);
      } else {
         setTimeout(() => {
            // 初始状态滚一下
            scrollToBottom();

            setTimeout(() => {
               chatListDom.value.addEventListener('scroll', onChatListScroll);
            }, 300);
            initHistoryChat();
         }, 300);
      }
   }
   loadAmisSource();
});
//#region ====================== 关联查询 ======================
const relativeQueryClick = async (val) => {
   sendChatMessage(
      {
         type: AnswerType.Text,
         values: val.question,
      },
      undefined,
      {
         history_group_id: currentRouteId,
         question: val.question,
         call_ext_id: val.call_ext_id,
         call_ext_args: val.agrs ? JSON.stringify(val.agrs) : null,
      }
   );

const askMoreClick = (item) => {
   if (!item.question) return;
   sendChatMessage({ type: AnswerType.Text, values: item.question });
};
//#endregion
//#region ====================== 光标输入上下箭头显示历史消息 ======================
const currentIndex = ref(null);
const history_data = computed(() => {
   return computedMessageList.value.filter((item) => item.role === RoleEnum.user);
});
//显示上一条消息
const showUpChatClick = () => {
   if (computedMessageList.value.length === 0) return;
   if (currentIndex.value == 0) {
      messageContent.value.values = history_data.value[currentIndex.value].content.values;
      return;
   } else {
      currentIndex.value = (currentIndex.value + history_data.value.length - 1) % history_data.value.length;
   }
   messageContent.value.values = history_data.value[currentIndex.value].content.values;
};
//显示下一条消息
const showDownChatClick = () => {
   if (computedMessageList.value.length === 0) return;
   if (currentIndex.value == history_data.value.length - 1) {
      messageContent.value.values = history_data.value[currentIndex.value].content.values;
      return;
   }
   if (currentIndex.value === null) {
      currentIndex.value = 0;
   } else {
      currentIndex.value = (currentIndex.value + 1) % history_data.value.length;
   }
   messageContent.value.values = history_data.value[currentIndex.value].content.values;
};
//#endregion
const {
   copyClick,
   likeClick,
   unLikeClick,
   feedbackPosition,
   feedbackIsShow,
   feedbackContent,
   feedbackPanelRef,
   currentFeedbackMapItem,
   feedbackClick,
   askMoreClick,
   fixQuestionClick,
   preQuestion,
   showFixQuestion,
   showAskMore,
} = useAssistantContentOpt({
   sendChatMessage,
   displayMessageList: computedMessageList,
});

//#region ====================== 侧边栏drawer ======================
const drawerIsShow = ref(false);
@@ -743,105 +571,22 @@
   messageContent.value.values = content;
};
//#endregion
//#region ====================== 用户询问的问题设置为常用语 ======================
const setCommonQuestionInfo = ref({});
const { toClipboard } = useClipboard();

//用户复制问题
const copyUserClick = (item) => {
   const text = item.content.values;
   ElMessage.success('复制成功');
   toClipboard(text);
};
const playBarRef = useCompRef(PlayBar);
//用户问题设置为常用语
const setCommonQuestionClick = (item) => {
   setCommonQuestionInfo.value = item;
const setCommonPhraseClick = (item) => {
   playBarRef.value.addPhrase(item);
};
//#endregion

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

const resetShare = () => {
   computedMessageList.value.forEach((item) => {
      item.isChecked = false;
   });
   isShareCheck.value = false;
};
const shareLinkDlgRef = useCompRef(ShareLinkDlg);

const isShareCheck = ref(false);
const shareClick = async (item: ChatMessage) => {
   item.isChecked = true;
   shareCheckChange(true, item);
   // 目前只分享一个，不进入多选模式，分享多个
   // isShareCheck.value = true;

   const url = await generateShareUrl();
   ElMessage.success('已复制分享链接');
   toClipboard(url);
   shareLinkDlgRef.value.openShare(item);
};

const shareCheckChange = (isChecked: boolean, item: ChatMessage) => {
   const toFindRole = item.role === RoleEnum.user ? RoleEnum.assistant : RoleEnum.user;

   const foundMapItem = computedMessageList.value.find(
      (msgItem) => msgItem.historyId === item.historyId && msgItem.role === toFindRole
   );
   if (!foundMapItem) return;
   foundMapItem.isChecked = isChecked;
};

const generateShareUrl = async () => {
   const shareList = computedMessageList.value.filter((item) => item.isChecked && item.role === RoleEnum.user && !!item.historyId);
   if (shareList.length === 0) {
      // ElMessage.warning('请选择要分享的内容');
      return;
   }
   const historyIdStr = shareList.map((item) => item.historyId).join(',');
   const res = await shareChatHistoryByPost({
      history_ids: historyIdStr,
      share_days: 1,
   }).finally(() => {
      resetShare();
   });

   if (!res.values) return;
   const shareId = Object.values(res.values)[0];
   if (!shareId) return;
   const shareLink = `${SHARE_URL}?id=${shareId}`;
   return shareLink;
};

//#endregion
</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) {
   height: 20px;
}
@import './index.scss';
</style>