wujingjing
2024-12-19 df0a461ea2018f99ccbc82148f8ae3f6cddaf23b
src/components/chat/hooks/useScrollLoad.ts
@@ -1,15 +1,17 @@
import moment from 'moment';
import { Ref, ShallowRef, computed, nextTick, onBeforeUnmount, ref, unref } from 'vue';
import type { Ref, ShallowRef } from 'vue';
import { computed, nextTick, onBeforeUnmount, ref, unref } from 'vue';
import { LOAD_CHAT_LIMIT } from '../constants';
import { AnswerType, ChatContent, ChatMessage, RoleEnum, StepEnum, StepItem } from '../model/types';
import type { ChatContent, ChatMessage, StepItem } from '../model/types';
import { AnswerType, MultiChatType, RoleEnum, StepEnum } from '../model/types';
import { GetHistoryAnswer, QueryHistoryDetail, getShareChatJsonByPost } from '/@/api/ai/chat';
import router from '/@/router';
import { isSharePage } from '/@/stores/chatRoom';
type UseScrollLoadOption = {
   container: ShallowRef<HTMLDivElement>;
   historyGroupId: string | Ref<string>;
   messageList: Ref<ChatMessage[]>;
   parseAnswerContent: (res: any) => ChatContent;
   isSharePage: Ref<boolean>;
};
export const convertProcessItem = (processItem: any) => {
@@ -22,20 +24,35 @@
   return {
      status: StepEnum.Success,
      title: processItem.value,
   };
   } as StepItem;
};
export const convertProcessToStep = (process: any[]) => {
   const stepList = (process ?? []).map<StepItem>((item) => {
      return convertProcessItem(item);
   });
   const stepList = (process ?? []).reduce((preVal, curVal) => {
      if (curVal.mode === 'question') {
         const last = preVal.at(-1);
         if (!last.subStep) {
            last.subStep = [];
         }
         const sub = {
            data: curVal.value,
            type: MultiChatType.Select,
         };
         last.subStep.push(sub);
      } else {
         const cur = convertProcessItem(curVal);
         preVal.push(cur);
      }
      return preVal;
   }, []);
   return stepList;
};
/**
 * 滚动加载数据
 * @returns
 */
export const useScrollLoad = (option: UseScrollLoadOption) => {
   const { container, historyGroupId, messageList, parseAnswerContent, isSharePage } = option;
   const { container, historyGroupId, messageList, parseAnswerContent } = option;
   const moreIsLoading = ref(false);
   /** @description 下次需要加载的用户结束索引(倒着数) */
@@ -93,12 +110,16 @@
               : {
                     historyId: item.answer?.history_id,
                     role: RoleEnum.assistant,
                     content: parseAnswerContent(item.answer),
                     content: parseAnswerContent(item?.answer),
                     state: item.answer_state,
                     sectionAId: mapUser?.section_a_id,
                     createTime: answerTime,
                     stepList: convertProcessToStep(item?.answer?.exec_process),
                     stepIsShow: false,
                     isStopMsg: false,
                     stepGroup: (item?.answer?.reports ?? []).map((item) => ({
                        value: convertProcessToStep(item?.exec_process),
                        isShow: false,
                     })),
                     conclusion: item?.answer?.conclusion ?? [],
                     isChecked: false,
                 }
@@ -118,7 +139,10 @@
      });
      const msgValue = res?.values;
      if (!msgValue) return undefined;
      if (!msgValue) {
         messageList.value = [];
         return;
      }
      const userMsg: ChatMessage = {
         historyId: msgValue.history_id,
         role: RoleEnum.user,
@@ -133,8 +157,12 @@
         historyId: msgValue.history_id,
         role: RoleEnum.assistant,
         content: parseAnswerContent(msgValue),
         stepList: convertProcessToStep(msgValue.exec_process),
         stepIsShow: false,
         stepGroup: (msgValue?.reports ?? []).map((item) => ({
            value: convertProcessToStep(item?.exec_process),
            isShow: false,
         })),
         isStopMsg: false,
         conclusion: msgValue.conclusion ?? [],
         isChecked: false,
      };
@@ -177,7 +205,7 @@
            return;
         }
         let h1 = container.value.scrollHeight;
         const h1 = container.value.scrollHeight;
         moreIsLoading.value = true;
         await loadRangeData(nextUserMsgEndIndex.value).finally(() => {
            moreIsLoading.value = false;
@@ -186,7 +214,7 @@
         nextTick(() => {
            nextTick(() => {
               nextTick(() => {
                  let h2 = container.value.scrollHeight;
                  const h2 = container.value.scrollHeight;
                  container.value.scrollTo({
                     //顶部在原先基础上往下滚动50px,露出新加载数据的一点
                     // top: h2 - h1 - 50,