userInfoKey

wujingjing

2024-12-25 5c5c54eff5c014846bc9b9e3ebc47177d1465bb8

 src/components/chat/Chat.vue

@@ -33,140 +33,170 @@
                     <div class="inline-flex flex-col" :class="{ 'w-full': item.role === RoleEnum.assistant }">
                        <div class="w-full">
                           <div class="rounded-[6px] p-4 leading-relaxed bg-white">
                              <!-- #region ====================== 意图分析 ======================-->
                              <div class="flex flex-col" v-if="item?.stepList?.length > 0">
                                 <!-- #region ====================== 意图分析 ======================-->
                                 <div class="flex items-center">
                                    <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>
                              <!-- #region ====================== 消息内容 ======================-->
                              <!-- <template v-if="item.content?.values"> -->
                              <!-- #region ====================== 报错信息 ======================-->
                              <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-3 flex" v-if="showFixQuestion(item)">
                                    <div class="text-gray-600 flex-0 mb-auto py-3">
                                       {{ '猜你想问：' }}
                                    </div>
                                    <div class="flex-auto space-x-2 space-y-1 inline-flex flex-wrap items-center">
                                       <div
                                          v-for="fixItem in item.content.origin?.sample_question"
                                          :key="fixItem"
                                          class="bg-gray-200 p-3 hover:bg-[#c5e0ff] hover:text-[#1c86ff] cursor-pointer rounded-lg first-of-type:ml-2 first-of-type:mt-1"
                                          @click="fixQuestionClick(fixItem, item.content.origin)"
                                       >
                                          {{ fixItem }}
                                       </div>
                                    </div>
                                 </div>
                                 <!-- #endregion -->

                                 <!-- #region ====================== 过程输出 ======================-->
                                 <el-steps v-show="item.stepIsShow" class="mt-3" direction="vertical" :active="activeStep">
                                    <el-step
                                       :key="`template-${index}`"
                                       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="">
                                             {{ subItem.title }}

                                             <span v-if="subItem.ms" class="text-green-600">{{ `（${subItem.ms}）` }}</span></span
                                          >
                                       </template>

                                       <template #description v-if="subItem?.subStep?.length > 0">
                                          <div class="my-1 flex flex-col gap-1 text-[14px]">
                                             <div
                                                :key="`${item.historyId}-${index + 1}-${multiChatIndex + 1}`"
                                                v-for="(multiChatItem, multiChatIndex) in subItem.subStep"
                                             >
                                                <component
                                                   v-if="multiChatItem.type === MultiChatType.Select"
                                                   :order="`${index + 1}-${multiChatIndex + 1}`"
                                                   :item="multiChatItem"
                                                   :is="multiChatTypeMapCom[multiChatItem.type]"
                                                   :disabled="
                                                      !(index + 1 === item.stepList.length && isTalking && msgIndex === computedMessageList.length - 1)
                                                   "
                                                />
                                                <component
                                                   v-else-if="multiChatItem.type === MultiChatType.Result"
                                                   :is="answerTypeMapCom['summary']"
                                                   :data="multiChatItem.data.content.values"
                                                   :originData="multiChatItem.data"
                                                />
                                                <div v-else-if="multiChatItem.type === MultiChatType.Summary" class="ml-4 mt-5 pb-10">
                                                   <div class="text-gray-600 mb-5">你可以继续问我：</div>
                                                   <div class="space-y-2 inline-flex flex-col">
                                                      <div
                                                         v-for="item in multiChatItem.data.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>
                                       </template>
                                    </el-step>
                                 </el-steps>
                                 <!-- #endregion -->
                              </div>
                              <!-- #endregion -->

                              <!-- #region ====================== 消息内容 ======================-->
                              <template v-if="item.content?.values">
                                 <!-- #region ====================== 报错信息 ======================-->
                                 <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-3 flex" v-if="showFixQuestion(item)">
                                       <div class="text-gray-600 flex-0 mb-auto py-3">
                                          {{ '猜你想问：' }}
                                       </div>
                                       <div class="flex-auto space-x-2 space-y-1 inline-flex flex-wrap items-center">
                                          <div
                                             v-for="fixItem in item.content.origin?.sample_question"
                                             :key="fixItem"
                                             class="bg-gray-200 p-3 hover:bg-[#c5e0ff] hover:text-[#1c86ff] cursor-pointer rounded-lg first-of-type:ml-2 first-of-type:mt-1"
                                             @click="fixQuestionClick(fixItem, item.content.origin)"
                                          >
                                             {{ fixItem }}
                              <!-- #region ====================== 回答组件 ======================-->
                              <template v-else>
                                 <template v-if="item.content.type === AnswerType.Report">
                                    <div v-for="(num, index) in item?.stepGroup?.length" :key="index">
                                       <!-- #region ====================== 意图分析 ======================-->
                                       <div class="flex flex-col" v-if="item?.stepGroup?.[index]?.value?.length > 0">
                                          <!-- #region ====================== 意图分析 ======================-->
                                          <div class="flex items-center">
                                             <span class="mr-2">意图分析：</span>
                                             <div
                                                @click="toggleStepList(item?.stepGroup?.[index])"
                                                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?.stepGroup?.[index]) }}
                                                </span>
                                                <span
                                                   class="ywifont"
                                                   :class="{
                                                      'ywicon-unfold': !item?.stepGroup?.[index].isShow,
                                                      'ywicon-fold': item?.stepGroup?.[index].isShow,
                                                   }"
                                                ></span>
                                             </div>
                                          </div>
                                          <!-- #endregion -->

                                          <!-- #region ====================== 过程输出 ======================-->
                                          <el-steps v-show="item?.stepGroup?.[index].isShow" class="mt-3" direction="vertical" :active="activeStep">
                                             <el-step
                                                :key="`template-${stepIndex}`"
                                                v-for="(subItem, stepIndex) in item?.stepGroup?.[index].value"
                                                :title="subItem.title"
                                                :status="stepEnumMap[subItem.status]"
                                             >
                                                <template
                                                   #icon
                                                   v-if="
                                                      stepIndex + 1 === item?.stepGroup?.[index].value.length &&
                                                      isTalking &&
                                                      msgIndex === computedMessageList.length - 1
                                                   "
                                                >
                                                   <span class="ywifont ywicon-loading1 animate-spin !text-[24px]"></span>
                                                </template>
                                                <template #title>
                                                   <span class="">
                                                      {{ subItem.title }}

                                                      <span v-if="subItem.ms" class="text-green-600">{{ `（${subItem.ms}）` }}</span></span
                                                   >
                                                </template>

                                                <template #description v-if="subItem?.subStep?.length > 0">
                                                   <div class="my-1 flex flex-col gap-1 text-[14px]">
                                                      <div
                                                         :key="`${item.historyId}-${stepIndex + 1}-${multiChatIndex + 1}`"
                                                         v-for="(multiChatItem, multiChatIndex) in subItem.subStep"
                                                      >
                                                         <component
                                                            v-if="multiChatItem.type === MultiChatType.Select"
                                                            :order="`${stepIndex + 1}-${multiChatIndex + 1}`"
                                                            :item="multiChatItem"
                                                            :is="multiChatTypeMapCom[multiChatItem.type]"
                                                            :disabled="
                                                               !(
                                                                  stepIndex + 1 === item?.stepGroup?.[index].value.length &&
                                                                  isTalking &&
                                                                  msgIndex === computedMessageList.length - 1
                                                               )
                                                            "
                                                         />
                                                         <component
                                                            v-else-if="multiChatItem.type === MultiChatType.Result"
                                                            :is="answerTypeMapCom['summary']"
                                                            :data="multiChatItem.data.content.values"
                                                            :originData="multiChatItem.data"
                                                         />
                                                         <div v-else-if="multiChatItem.type === MultiChatType.Summary" class="ml-4 mt-5 pb-10">
                                                            <div class="text-gray-600 mb-5">你可以继续问我：</div>
                                                            <div class="space-y-2 inline-flex flex-col">
                                                               <div
                                                                  v-for="item in multiChatItem.data.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>
                                                </template>
                                             </el-step>
                                          </el-steps>
                                          <!-- #endregion -->
                                       </div>
                                       <!-- #endregion -->

                                       <component
                                          v-if="item.content?.values?.[index]"
                                          :reportIndex="index"
                                          :conclusion="item.content.values[index].conclusion"
                                          :is="answerTypeMapCom[item.content.values[index].content.type]"
                                          :data="item.content.values[index].content.values"
                                          :originData="item.content.values[index]"
                                          :historyId="item.historyId"
                                          :isTalking="isTalking && msgIndex === computedMessageList.length - 1"
                                       />
                                    </div>
                                 </template>
                                 <component
                                    v-else
                                    :historyId="item.historyId"
                                    :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>
                                 <!-- #endregion -->
                                 <!-- #region ====================== 回答组件 ======================-->
                                 <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>
                                 <!-- #endregion -->
                              </template>
                              <!-- #endregion -->
                              <!-- </template> -->

                              <!-- #endregion -->
                              <!-- #region ====================== 附加内容 ======================-->
@@ -380,12 +410,14 @@
   };
};

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

   const curExtraContent = parseExtraContent(res);

   switch (res.answer_type) {
      case AnswerType.RecordSet:
@@ -409,21 +441,22 @@

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

      case AnswerType.Summary:
         if (res.answer_type === AnswerType.Report) {
            content = {
               type: AnswerType.Summary,
               values: res.reports?.[0]?.summary,
            };
         } else {
            content = {
               type: AnswerType.Summary,
               values: res.summary?.map((item) => {
                  item.reportIsShow = reportIsShow;
                  return item;
               }),
            };
         }
         content = {
            type: AnswerType.Summary,
            values: res.summary?.map((item) => {
               item.reportIsShow = reportIsShow;
               return item;
            }),
         };
         break;
      case AnswerType.Url:
         content = {
@@ -444,10 +477,18 @@
         };
         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;
   if (!extraContent) {
      content = {
         ...content,
         ...curExtraContent,
      };
   } else {
      content = {
         ...content,
         ...extraContent,
      };
   }

   return content;
};

@@ -458,9 +499,9 @@
   activeStep.value = -1;
};

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

//#endregion
@@ -518,7 +559,7 @@
   resetStep();
   let lastTimestamp = new Date().getTime();
   questionRes = {};

   let lastIsResult = false;
   const resultP = new Promise((resolve, reject) => {
      const currentSource = axios.CancelToken.source();
      lastAxiosSource = currentSource;
@@ -526,19 +567,37 @@
         params,
         (chunkRes) => {
            Logger.info('chunk response：\n\n' + JSON.stringify(chunkRes));

            if (chunkRes.mode === 'result') {
               lastIsResult = true;
               const res = chunkRes.value;
               questionRes = res;
               resolve(res);
               chunkRes.value = '准备数据分析';

               if (!questionRes?.reports || questionRes?.reports?.length === 0) {
                  const resReport = {
                     answer_type: AnswerType.Report,
                     reports: [res],
                  };
                  questionRes = resReport;
                  resolve(resReport);
               } else {
                  const lastMsg = computedMessageList.value.at(-1);

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

            if (chunkRes.mode === 'summary') {
               const lastMsg = computedMessageList.value.at(-1);
               const extraContent = parseExtraContent(chunkRes.value);

               // 此对话已经假如到对话列表
               if (lastMsg.content && extraContent) {
               // 此对话已经加入到对话列表
               if (lastMsg.content?.values && extraContent) {
                  for (const key in extraContent) {
                     if (Object.prototype.hasOwnProperty.call(extraContent, key)) {
                        const value = extraContent[key];
@@ -547,10 +606,19 @@
                        }
                     }
                  }

                  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 (!lastMsg.content && questionRes) {
               if (Object.keys(questionRes).length === 0) {
                  questionRes = chunkRes.value;
               }

               // 此对话还未加入到对话列表
               if (!lastMsg.content?.values && questionRes) {
                  questionRes = {
                     ...questionRes,
                     ...chunkRes.value,
@@ -566,9 +634,10 @@
               computedMessageList.value.at(-1).conclusion = chunkRes.value;
               chunkRes.value = '分析结束';
            }

			
            if (chunkRes.mode === 'question') {
               const stepList = computedMessageList.value.at(-1).stepList;
               const lastGroup = computedMessageList.value.at(-1).stepGroup.at(-1);
               const stepList = lastGroup?.value ?? [];
               const lastStepItem = stepList.at(-1);
               if (!lastStepItem.subStep) {
                  lastStepItem.subStep = [];
@@ -580,26 +649,42 @@
               scrollToBottom();
               return;
            }
            const stepList = computedMessageList.value.at(-1).stepList;

            if (lastIsResult && chunkRes.mode !== 'finish') {
               // 开始增加新的 stepGroup
               computedMessageList.value.at(-1).stepGroup.push({
                  value: [],
                  isShow: true,
               });
               lastIsResult = false;
            }
            const lastGroup = computedMessageList.value.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 = 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);
            // 强制触发更新

            if (chunkRes.mode !== 'result') {
               scrollToBottom();
            }
            scrollToBottom();
         },
         {
            cancelToken: currentSource.token,
@@ -610,7 +695,10 @@
         })
         .finally(() => {
            isTalking.value = false;
            computedMessageList.value.at(-1).stepIsShow = false;
            // 收起所有 stepGroup
            computedMessageList.value.at(-1).stepGroup.forEach((item) => {
               item.isShow = false;
            });

            resetStep();
         });
@@ -665,10 +753,16 @@
      const userItem: ChatMessage = { role: RoleEnum.user, content, isChecked: false } as any;
      const assistantItem: ChatMessage = {
         role: RoleEnum.assistant,
         content: null,
         content: {
            type: AnswerType.Report,
         },
         state: AnswerState.Null,
         stepList: [],
         stepIsShow: true,
         stepGroup: [
            {
               value: [],
               isShow: true,
            },
         ],
         isStopMsg: false,
         isChecked: false,
      } as any;