简单流式展示

wujingjing

2024-11-04 91142fc15ee81cdc3f80134e5e8faaff237f1e53

 src/components/chat/Chat.vue

@@ -1,18 +1,19 @@
<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 ">
         <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" v-loading="chatListLoading" :style="{ width: chatWidth }">
            <div class="h-full relative" v-loading="chatListLoading" :style="{ width: chatWidth }">
               <div
                  class="group flex px-4 py-6 hover:bg-slate-100 rounded-lg relative"
                  :class="{ 'flex-row-reverse': item.role === RoleEnum.user }"
                  v-for="(item, index) of computedMessageList"
                  :key="`${item.historyId}_${item.role}`"
               >
                  <div class="absolute top-0 left-[72px] text-[#8d8e99]">{{ item?.createTime }}</div>
                  <img
                     class="rounded-full size-12 flex-0"
                     :class="{ 'mr-4': item.role === RoleEnum.assistant, 'ml-4': item.role === RoleEnum.user }"
@@ -22,6 +23,21 @@
                  />
                  <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" v-if="isTalking && index === computedMessageList.length - 1">
                           <div class="text-sm rounded-[6px] p-4 leading-relaxed bg-white"
                               v-if="item.role === RoleEnum.assistant">
                              <!-- 过程输出 -->
                              <el-steps direction="vertical" :active="activeStep">
                                 <!-- <el-step title="process" status="process" />
                                       <el-step title="success" status="success" />
                                       <el-step title="wait" status="wait" />
                                       <el-step title="finish" status="finish" />
                                       <el-steps title="error" status="error" /> -->

                                 <el-step v-for="item in stepList" :title="item.title" :status="stepEnumMap[item.status]" />
                              </el-steps>
                           </div>
                        </div>
                        <div class="w-full" v-if="item.content?.values">
                           <div
                              class="text-sm rounded-[6px] p-4 leading-relaxed"
@@ -122,8 +138,6 @@
                              </div>
                           </div>
                        </div>

                        <Loding v-if="isTalking && index === computedMessageList.length - 1" class="w-fit" :process="process" />
                     </div>
                  </div>
               </div>
@@ -143,7 +157,7 @@
            </div>
         </div>

         <div class="sticky bottom-0 w-full p-6   bg-[rgb(247,248,250)] flex justify-center">
         <div class="sticky bottom-0 w-full p-6 bg-[rgb(247,248,250)] flex justify-center">
            <PlayBar
               v-model:voicePageIsShow="voicePageIsShow"
               :isTalking="isTalking"
@@ -161,6 +175,7 @@

<script setup lang="ts">
import _ from 'lodash';
import moment from 'moment';
import { v4 as uuidv4 } from 'uuid';
import { computed, onMounted, ref } from 'vue';
import FeedbackPanel from './components/FeedbackPanel.vue';
@@ -171,11 +186,20 @@
import { useScrollToBottom } from './hooks/useScrollToBottom';
import type { ChatContent } from './model/types';
import { AnswerState, AnswerType, RoleEnum, answerTypeMapCom, roleImageMap, type ChatMessage } from './model/types';
import { GetHistoryAnswer, QuestionAi, extCallQuery } from '/@/api/ai/chat';
import { QuestionAi, extCallQuery, questionStreamByPost } from '/@/api/ai/chat';
import PlayBar from '/@/components/chat/components/playBar/PlayBar.vue';
import CustomDrawer from '/@/components/drawer/CustomDrawer.vue';
import router from '/@/router';
import { activeChatRoom, activeGroupType, activeLLMId, activeRoomId, activeSampleId, activeSectionAId, getRoomConfig, roomConfig } from '/@/stores/chatRoom';
import {
   activeChatRoom,
   activeGroupType,
   activeLLMId,
   activeRoomId,
   activeSampleId,
   activeSectionAId,
   getRoomConfig,
   roomConfig,
} from '/@/stores/chatRoom';
import { ErrorCode } from '/@/utils/request';

const chatWidth = '75%';
@@ -193,7 +217,6 @@
const computedMessageList = computed(() => {
   return messageList.value.filter((v) => !!v);
});

const parseContent = (res) => {
   if (!res) return null;
   let content: ChatContent = {
@@ -253,15 +276,39 @@
   content.origin = res;
   return content;
};

const { clearQueryProcess, process, processId, queryProcess } = useQueryProcess();
const DEFAULT_SECTION_A_ID = 'knowledge_base';

//#region ====================== 步骤 step ======================
const enum StepEnum {
   Loading,
   Success,
   Error,
}
const stepEnumMap = {
   [StepEnum.Loading]: 'process',
   [StepEnum.Success]: 'success',
   [StepEnum.Error]: 'error',
};

type StepItem = {
   title: string;
   status: StepEnum;
};
const activeStep = ref(-1);
const stepList = ref<StepItem[]>([]);

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

const DEFAULT_SECTION_A_ID = 'knowledge_base';
let questionRes = null;

let finalCalcSectionAId = null;
const questionAi = async (text) => {
   processId.value = uuidv4();
   // processId.value = uuidv4();
   let judgeParams = null;
   if (!preQuestion.value) {
      // const aiContent = computedMessageList.value.filter((item) => item.role === RoleEnum.assistant);
@@ -292,7 +339,7 @@
   finalCalcSectionAId = currentSectionAId;

   const params = {
      process_id: processId.value,
      // process_id: processId.value,
      question: text,
      // FIXME: 暂时这样
      // section_a_id: currentSectionAId,
@@ -301,7 +348,7 @@
      ...judgeParams,
   } as any;

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

@@ -313,10 +360,31 @@
   // if (currentLLMId) {
   //    params.llm_id = currentLLMId;
   // }
   clearQueryProcess();
   queryProcess();
   const res = await QuestionAi(params).finally(() => {
      clearQueryProcess();
   // clearQueryProcess();
   // queryProcess();
   resetStep();
   let res = null;
   await questionStreamByPost(params, (chunkRes) => {
      if (chunkRes.mode === 'result') {
         res = chunkRes.value;
      } else {
         switch (chunkRes.mode) {
            case 'begin':
               break;
            case 'end':
               break;
         }

         stepList.value.push({
            title: chunkRes.value,
            status: StepEnum.Success,
         });
         scrollToBottom();

         // process.value = chunkRes.value;
      }
   }).finally(() => {
      resetStep();
   });
   questionRes = res;
   const content = parseContent(res);
@@ -332,7 +400,6 @@
let currentSampleId = '';

let currentLLMId = null;


const sendChatMessage = async (content: ChatContent = messageContent.value, cb?: any, isCallExtParams?: any) => {
   if (!content?.values || isTalking.value || chatListLoading.value) return;
@@ -399,8 +466,10 @@
   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 { loadRangeData, onChatListScroll, moreIsLoading, nextUserMsgEndIndex } = useScrollLoad({
@@ -506,4 +575,29 @@
      }
   }
}

.el-step.is-horizontal.stepActive {
   .el-step__head.is-finish {
      .el-step__line {
         // 当前步骤数横线样式设置
         .el-step__line-inner {
            width: 50% !important;
            border-width: 1px !important;
         }
      }

      // 当前步骤数圆圈样式设置
      .el-step__icon.is-text {
         //    background: #409eff;
         color: #fff;
      }
   }
}

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