简单流式展示

wujingjing

2024-11-04 91142fc15ee81cdc3f80134e5e8faaff237f1e53

 src/components/chat/Chat.vue

@@ -23,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"
@@ -123,8 +138,6 @@
                              </div>
                           </div>
                        </div>

                        <Loding v-if="isTalking && index === computedMessageList.length - 1" class="w-fit" :process="process" />
                     </div>
                  </div>
               </div>
@@ -173,7 +186,7 @@
import { useScrollToBottom } from './hooks/useScrollToBottom';
import type { ChatContent } from './model/types';
import { AnswerState, AnswerType, RoleEnum, answerTypeMapCom, roleImageMap, type ChatMessage } from './model/types';
import { 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';
@@ -264,12 +277,38 @@
   return content;
};
const { clearQueryProcess, process, processId, queryProcess } = useQueryProcess();

//#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);
@@ -300,7 +339,7 @@
   finalCalcSectionAId = currentSectionAId;

   const params = {
      process_id: processId.value,
      // process_id: processId.value,
      question: text,
      // FIXME: 暂时这样
      // section_a_id: currentSectionAId,
@@ -321,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);
@@ -515,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>