| | |
| | | <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" |
| | | class="rounded-[6px] p-4 leading-relaxed" |
| | | :style="{ backgroundColor: item.role === RoleEnum.user ? 'rgb(197 224 255)' : 'white' }" |
| | | :class="{ group: item.role === RoleEnum.user }" |
| | | > |
| | | <!-- #region ====================== 意图分析 ======================--> |
| | | <div class="flex flex-col" v-if="item?.stepList?.length > 0"> |
| | | <!-- #region ====================== 意图分析 ======================--> |
| | | <div class="flex items-center"> |
| | | <span class="mr-2">意图分析:</span> |
| | | <div |
| | |
| | | ></span> |
| | | </div> |
| | | </div> |
| | | <!-- #endregion --> |
| | | |
| | | <!-- 过程输出 --> |
| | | <!-- #region ====================== 过程输出 ======================--> |
| | | <el-steps v-show="item.stepIsShow" class="mt-3" direction="vertical" :active="activeStep"> |
| | | <el-step |
| | | v-for="(subItem, index) in item.stepList" |
| | |
| | | <span class="ywifont ywicon-loading1 animate-spin !text-[24px]"></span> |
| | | </template> |
| | | <template #title> |
| | | <span class="text-sm" |
| | | <span class="" |
| | | >{{ subItem.title |
| | | }}<span v-if="subItem.ms" class="text-green-600">{{ `(${subItem.ms})` }}</span></span |
| | | > |
| | | </template> |
| | | </el-step> |
| | | </el-steps> |
| | | <!-- #endregion --> |
| | | </div> |
| | | <!-- #endregion --> |
| | | |
| | | <!-- #region ====================== 用户操作按钮 ======================--> |
| | | <div |
| | | v-if="item.role === RoleEnum.user && item.content?.values && !isSharePage && !isShareCheck" |
| | | class="absolute flex items-center bottom-0 group invisible" |
| | |
| | | </div> |
| | | </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 }} |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <!-- #endregion --> |
| | | <!-- #region ====================== 回答组件 ======================--> |
| | | <template v-else> |
| | | <component |
| | | :conclusion="item.conclusion" |
| | |
| | | </div> |
| | | </div> |
| | | </template> |
| | | <!-- #endregion --> |
| | | </template> |
| | | </div> |
| | | |
| | | <!-- #endregion --> |
| | | <!-- #region ====================== 附加内容 ======================--> |
| | | <!-- #region ====================== 停止 ======================--> |
| | | <span v-if="item.isStopMsg && item?.role === RoleEnum.assistant" class="text-gray-400 text-[12px]" |
| | | >(已停止)</span |
| | | > |
| | | <!-- parseContent 返回为 null --> |
| | | <p v-if="!item.content && !isTalking && !item.isStopMsg" class="text-red-500"> |
| | | 暂无数据 |
| | | </p> |
| | | <!-- #endregion --> |
| | | <!-- #endregion --> |
| | | </div> |
| | | <!-- #region ====================== ai 消息操作 ======================--> |
| | | <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> |
| | | </el-tooltip> |
| | | </div> |
| | | <!-- #endregion --> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | <span class="text-[15px]"> 分享的对话不存在或已失效 </span> |
| | | </template> |
| | | </el-empty> |
| | | <div v-if="showAskMore" class="ml-4 mt-5 text-sm pb-10"> |
| | | <div v-if="showAskMore" 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 |
| | |
| | | </template> |
| | | |
| | | <script setup lang="ts"> |
| | | import axios, { CancelTokenSource } from 'axios'; |
| | | import { ElMessage } from 'element-plus'; |
| | | import { findLast, orderBy } from 'lodash-es'; |
| | | import moment from 'moment'; |
| | |
| | | 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 emitter from '/@/utils/mitt'; |
| | | import { ErrorCode } from '/@/utils/request'; |
| | | import { toMyFixed } from '/@/utils/util'; |
| | | import axios, { CancelTokenSource } from 'axios'; |
| | | import { loadAmisSource } from '../amis/load'; |
| | | const chatWidth = '75%'; |
| | | const voicePageIsShow = ref(false); |
| | | let isTalking = ref(false); |
| | |
| | | content.origin = res; |
| | | return content; |
| | | }; |
| | | const { clearQueryProcess, process, processId, queryProcess } = useQueryProcess(); |
| | | |
| | | //#region ====================== 步骤 step ====================== |
| | | const activeStep = ref(-1); |
| | |
| | | if (chunkRes.mode === 'finish') { |
| | | stepList.at(-1).ms = ms; |
| | | |
| | | isTalking.value = false; |
| | | return; |
| | | } |
| | | |
| | |
| | | }); |
| | | |
| | | questionRes = await resultP; |
| | | isTalking.value = false; |
| | | |
| | | const content = parseContent(res, true); |
| | | return content; |
| | | }; |
| | |
| | | isTalking.value = false; |
| | | chatListLoading.value = false; |
| | | resetStep(); |
| | | computedMessageList.value.at(-1).stepIsShow = false; |
| | | |
| | | computedMessageList.value.at(-1).isStopMsg = true; |
| | | }; |
| | | |
| | | const sendChatMessage = async (content: ChatContent = messageContent.value, cb?: any, isCallExtParams?: any) => { |
| | |
| | | state: AnswerState.Null, |
| | | stepList: [], |
| | | stepIsShow: true, |
| | | isStopMsg: false, |
| | | isChecked: false, |
| | | } as any; |
| | | // 发送当前 |
| | |
| | | }, 300); |
| | | } |
| | | } |
| | | loadAmisSource() |
| | | }); |
| | | //#region ====================== 关联查询 ====================== |
| | | const relativeQueryClick = async (val) => { |
| | |
| | | :deep(.el-step__description) { |
| | | height: 20px; |
| | | } |
| | | |
| | | :deep(.el-step:last-of-type .el-step__description) { |
| | | display: none; |
| | | } |
| | | </style> |