WI/Web.V1.0.git

			@@ -1,214 +1,1043 @@
			<template>
			<div class="flex flex-col h-full">
			<div class="h-full flex flex-col items-center overflow-y-auto">
			<div ref="chatListDom" class="h-full w-[100ch]">
			<div
			class="group flex px-4 py-4 hover:bg-slate-100 rounded-lg"
			v-for="(item, index) of messageList.filter((v) => v.role !== 'system')"
			:key="index"
			>
			<img class="rounded-full size-12 mr-4" :src="roleImageMap[item.role]" alt="" srcset="" />
			<ChatContainer
			:loading="chatListLoading"
			:more-is-loading="moreIsLoading"
			:is-share-page="isSharePage"
			:is-share-check="isShareCheck"
			:chat-width="chatWidth"
			ref="containerRef"
			>
			<!-- 消息列表 -->
			<template #message-list>
			<template v-if="computedMessageList?.length > 0">
			<div v-for="(item, msgIndex) of computedMessageList" :key="`${item.historyId}_${item.role}`">
			<UserMsg
			:msg="item"
			@copyMsg="copyClick"
			@shareClick="shareClick"
			@setCommonQuestion="setCommonQuestionClick"
			v-if="item.role === RoleEnum.user"
			></UserMsg>

			<div class="flex">
			<div class="relative" v-if="item.content">
			<div
			:class="{ 'bg-[#d8d8ff]': item.role === RoleEnum.assistant, 'bg-white': item.role === RoleEnum.user }"
			class="prose text-sm rounded-[6px] p-4 leading-relaxed max-w-[100ch]"
			v-html="md.render(item.content)"
			></div>
			<div v-if="item.role === RoleEnum.assistant" class="absolute flex items-center right-0 space-x-2 mr-2 mt-2">
			<SvgIcon class="cursor-pointer" name="ele-CopyDocument" @click="copyClick(item.content)" />
			<SvgIcon class="cursor-pointer" name="ywicon icon-dianzan" />
			<SvgIcon class="cursor-pointer" :size="12" name="ywicon icon-buzan" />
			<div v-else class="flex px-4 py-6 rounded-lg relative" :class="{ 'px-10': isShareCheck }">
			<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 }"
			:src="roleImageMap[item.role]"
			alt=""
			srcset=""
			/>
			<div class="flex-auto flex">
			<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 ====================== 消息内容 ======================-->
			<!-- <template v-if="item.content?.values"> -->
			<!-- #region ====================== 报错信息 ======================-->
			<div v-if="item.content?.errCode === ErrorCode.Message" class="flex-column w-full">
			<p class="text-danger">
			{{ 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>
			</div>
			<!-- #endregion -->
			<!-- #region ====================== 回答组件 ======================-->
			<template v-else>
			<template v-if="item.content.type === AnswerType.Report">
			<template v-if="item?.stepGroup?.length > 0">
			<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>
			<p v-else class="text-info">暂无内容，请重试</p>
			</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>
			</template>
			<!-- #endregion -->
			<!-- </template> -->

			<!-- #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
			class="flex items-center justify-center size-[15px]"
			v-if="item.content?.type === AnswerType.Text \|\| item.content?.type === AnswerType.Knowledge"
			>
			<i
			class="p-2 ywifont ywicon-copy cursor-pointer hover:text-[#0284ff] hover:!text-[18px]"
			@click="copyClick(item)"
			/>
			</div>
			<template v-if="item.content.errCode !== ErrorCode.Message">
			<el-tooltip effect="dark" content="点赞" placement="top">
			<div class="flex items-center justify-center size-[15px]">
			<i
			:class="{ 'text-[#0284ff]': item.state === AnswerState.Like }"
			class="p-2 ywifont ywicon-dianzan cursor-pointer hover:text-[#0284ff] font-medium hover:!text-[18px]"
			@click="likeClick(item)"
			/>
			</div>
			</el-tooltip>
			<el-tooltip effect="dark" content="点踩" placement="top">
			<div class="flex items-center justify-center size-[15px]">
			<i
			:class="{ 'text-[#0284ff]': item.state === AnswerState.Unlike }"
			class="p-2 ywifont ywicon-buzan cursor-pointer hover:text-[#0284ff] !text-[13px] hover:!text-[15px]"
			@click="unLikeClick(item)"
			/>
			</div>
			</el-tooltip>
			</template>
			<el-tooltip effect="dark" content="分享" placement="top">
			<div class="flex items-center justify-center size-[15px]">
			<i
			class="p-2 ywifont ywicon-fenxiang cursor-pointer hover:text-[#0284ff] !text-[15px] hover:!text-[18px]"
			@click="shareClick(item)"
			/>
			</div>
			</el-tooltip>
			<el-tooltip effect="dark" content="反馈" placement="top">
			<div class="flex items-center justify-center size-[15px] relative">
			<i
			class="p-2 ywifont ywicon-wentifankui cursor-pointer hover:text-[#0284ff] !text-[13px] hover:!text-[15px]"
			@click="
			($event) =>
			feedbackClick(
			$event,
			item,
			computedMessageList
			.filter((v) => v.role === RoleEnum.assistant)
			.findIndex((v) => v.historyId === item.historyId)
			)
			"
			/>
			<FeedbackPanel
			v-show="feedbackIsShow && currentFeedbackMapItem === item"
			ref="feedbackPanelRef"
			v-model:isShow="feedbackIsShow"
			v-model:content="feedbackContent"
			:chatItem="currentFeedbackMapItem"
			:position="feedbackPosition"
			/>
			</div>
			</el-tooltip>
			</div>
			<!-- #endregion -->
			</div>
			</div>
			</div>

			<Loding v-else />
			</div>
			</div>
			</div>
			</div>
			<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
			v-for="item in computedMessageList.at(-1).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>
			</template>
			<el-empty v-else-if="isSharePage && !chatListLoading" :image-size="200">
			<template #description>
			<span class="text-[15px]">分享的对话不存在或已失效</span>
			</template>
			</el-empty>
			</template>

			<div class="sticky bottom-0 w-full p-6 pb-8 bg-gray-100 flex justify-center">
			<PlayBar :isTalking="isTalking" v-model="messageContent" @sendClick="sendOrSave" />
			</div>
			</div>
			<!-- 输入区域 -->
			<template #input-area>
			<PlayBar
			v-model:voicePageIsShow="voicePageIsShow"
			:isTalking="isTalking"
			:isHome="false"
			v-model="messageContent.values"
			@sendClick="sendClick"
			@showUpChatClick="showUpChatClick"
			@stopGenClick="stopGenClick"
			@showDownChatClick="showDownChatClick"
			:style="{ width: chatWidth }"
			:setCommonQuestionInfo="setCommonQuestionInfo"
			/>
			</template>

			<!-- 抽屉 -->
			<template #drawer>
			<CustomDrawer v-model:isShow="drawerIsShow" @updateChatInput="updateChatInput" />
			<ShareLinkDlg ref="shareLinkDlgRef" />
			</template>
			</ChatContainer>
			</template>

			<script setup lang="ts">
			import cryptoJS from 'crypto-js';
			import { ElMessage } from 'element-plus';
			import { nextTick, onMounted, ref, watch } from 'vue';
			import type { CancelTokenSource } from 'axios';
			import axios from 'axios';
			import { findLast, orderBy } from 'lodash-es';
			import moment from 'moment';
			import { computed, onActivated, onMounted, ref } from 'vue';
			import useClipboard from 'vue-clipboard3';
			import Loding from './components/Loding.vue';
			import { md } from './libs/markdown';
			import { RoleEnum, roleImageMap, type ChatMessage } from './types';
			import { loadAmisSource } from '../amis/load';
			import FeedbackPanel from './components/FeedbackPanel.vue';
			import { useAssistantContentOpt } from './hooks/useAssistantContentOpt';
			import { convertProcessItem, useScrollLoad } from './hooks/useScrollLoad';
			import { useScrollToBottom } from './hooks/useScrollToBottom';
			import type { ChatContent } from './model/types';
			import {
			AnswerState,
			AnswerType,
			MultiChatType,
			RoleEnum,
			answerTypeMapCom,
			roleImageMap,
			stepEnumMap,
			type ChatMessage,
			} from './model/types';
			import { extCallQuery, questionStreamByPost } from '/@/api/ai/chat';
			import PlayBar from '/@/components/chat/components/playBar/PlayBar.vue';
			import CustomDrawer from '/@/components/drawer/CustomDrawer.vue';
			import { Logger } from '/@/model/logger/Logger';

			let apiKey = '';
			let isConfig = ref(false);
			import { ElMessage } from 'element-plus';
			import ChatContainer from './components/ChatContainer.vue';
			import ShareLinkDlg from './components/shareLink/index.vue';
			import UserMsg from './user/index.vue';
			import { multiChatTypeMapCom } from '/@/components/chat/chatComponents/multiChat';
			import router from '/@/router';
			import {
			activeChatRoom,
			activeGroupType,
			activeLLMId,
			activeRoomId,
			activeSampleId,
			activeSectionAId,
			getRoomConfig,
			isSharePage,
			roomConfig,
			} from '/@/stores/chatRoom';
			import emitter from '/@/utils/mitt';
			import { ErrorCode } from '/@/utils/request';
			import { useCompRef } from '/@/utils/types';
			import { toMyFixed } from '/@/utils/util';
			const containerRef = ref();
			const chatListDom = computed(() => containerRef.value?.chatListDom);
			const chatWidth = '75%';
			const voicePageIsShow = ref(false);
			let isTalking = ref(false);
			let messageContent = ref('');
			const chatListDom = ref<HTMLDivElement>();
			const decoder = new TextDecoder('utf-8');
			const roleAlias = { user: 'ME', assistant: 'ChatGPT', system: 'System' };
			const messageList = ref<ChatMessage[]>([
			// {
			// role: RoleEnum.assistant,
			// content: `你好，我是AI语言模型，我可以提供一些常用服务和信息，例如：
			// 1. 翻译：我可以把中文翻译成英文，英文翻译成中文，还有其他一些语言翻译，比如法语、日语、西班牙语等。
			// 2. 咨询服务：如果你有任何问题需要咨询，例如健康、法律、投资等方面，我可以尽可能为你提供帮助。
			// 3. 闲聊：如果你感到寂寞或无聊，我们可以聊一些有趣的话题，以减轻你的压力。
			// 请告诉我你需要哪方面的帮助，我会根据你的需求给你提供相应的信息和建议。`,
			// },
			// {
			// role: RoleEnum.user,
			// content: `你好`,
			// },
			]);

			onMounted(() => {
			if (getAPIKey()) {
			switchConfigStatus();
			}
			const inputValue = history.state.inputValue;
			messageContent.value = inputValue;
			sendOrSave();
			let messageContent = ref<ChatContent>({
			type: AnswerType.Text,
			values: '',
			});
			const currentRoute = router.currentRoute;
			const currentRouteId = currentRoute.value.query.id as string;
			activeRoomId.value = currentRouteId;
			const messageList = ref<ChatMessage[]>([]);
			const computedMessageList = computed(() => {
			return messageList.value.filter((v) => !!v);
			});

			const sendChatMessage = async (content: string = messageContent.value) => {
			const parseExtraContent = (res) => {
			if (!res) return {};
			const askMoreList = orderBy(res.context_history, [(item) => Number(item.radio)], ['desc']);
			const errCode = res?.err_code;
			const errMsg = res?.json_msg;
			const origin = res;

			return {
			askMoreList,
			errCode,
			errMsg,
			origin,
			};
			};

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

			switch (res.answer_type) {
			case AnswerType.RecordSet:
			content = {
			type: AnswerType.RecordSet,
			values: res.values,
			};
			break;
			case AnswerType.Text:
			content = {
			type: AnswerType.Text,
			values: res.values ?? res.answer,
			};
			break;
			case AnswerType.Script:
			content = {
			type: AnswerType.Script,
			values: res,
			};
			break;

			case AnswerType.Knowledge:
			content = {
			type: AnswerType.Knowledge,
			values: res.knowledge,
			};

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

			case AnswerType.Summary:
			content = {
			type: AnswerType.Summary,
			values: res.summary?.map((item) => {
			item.reportIsShow = reportIsShow;
			return item;
			}),
			};
			break;
			case AnswerType.Url:
			content = {
			type: AnswerType.Url,
			values: res.url,
			};
			break;
			case AnswerType.Map:
			content = {
			type: AnswerType.Map,
			values: res.values,
			};
			break;
			default:
			content = {
			type: AnswerType.Text,
			values: '解析失败！',
			};
			break;
			}
			if (!extraContent) {
			content = {
			...content,
			...curExtraContent,
			};
			} else {
			content = {
			...content,
			...extraContent,
			};
			}

			return content;
			};

			//#region ====================== 步骤 step ======================
			const activeStep = ref(-1);

			const resetStep = () => {
			activeStep.value = -1;
			};

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

			//#endregion

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

			let lastAxiosSource: CancelTokenSource = null;
			const questionAi = async (text) => {
			let judgeParams = null;
			if (!preQuestion.value) {
			judgeParams = {};
			} else {
			judgeParams = {
			prev_question: preQuestion.value,
			};
			}
			let currentSectionAId = '';
			if (activeSectionAId.value) {
			currentSectionAId = activeSectionAId.value;
			activeSectionAId.value = '';
			} else {
			const lastSectionAItem = findLast(
			computedMessageList.value as any,
			(item) => item.role === RoleEnum.assistant && !!item.sectionAId
			);
			currentSectionAId = lastSectionAItem?.sectionAId ?? DEFAULT_SECTION_A_ID;
			}
			finalCalcSectionAId = currentSectionAId;

			const params = {
			question: text,
			history_group_id: currentRouteId,
			raw_mode: roomConfig.value?.[currentRouteId]?.isAnswerByLLM ?? false,
			...judgeParams,
			} as any;

			if (position) {
			const longitude = position.coords.longitude;
			const latitude = position.coords.latitude;
			params.cur_pos = [longitude, latitude].join(',');
			}

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

			if (currentSampleId) {
			params.sample_id = currentSampleId;
			currentSampleId = '';
			}

			resetStep();
			let lastTimestamp = new Date().getTime();
			questionRes = {};
			let lastIsResult = false;
			const resultP = new Promise((resolve, reject) => {
			const currentSource = axios.CancelToken.source();
			lastAxiosSource = currentSource;

			const getResReport = () => {
			const resReport = {
			answer_type: AnswerType.Report,
			reports: [],
			};
			return resReport;
			};
			const checkReportEmpty = () => {
			const isEmpty = !questionRes?.reports \|\| questionRes?.reports?.length === 0;

			return isEmpty;
			};
			questionStreamByPost(
			params,
			(chunkRes) => {
			Logger.info('chunk response：\n\n' + JSON.stringify(chunkRes));

			if (chunkRes.mode === 'result') {
			lastIsResult = true;
			const res = chunkRes.value;

			if (checkReportEmpty()) {
			const resReport = getResReport();
			resReport.reports.push(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);
			const isReportEmpty = checkReportEmpty();
			// 没有经过 result 报告还没初始化
			if (isReportEmpty) {
			const resReport = getResReport();
			questionRes = resReport;
			}
			// 此对话已经加入到对话列表
			if (lastMsg.content?.values && extraContent) {
			for (const key in extraContent) {
			if (Object.prototype.hasOwnProperty.call(extraContent, key)) {
			const value = extraContent[key];
			if (!lastMsg.content[key] \|\| (Array.isArray(lastMsg.content[key]) && lastMsg.content[key].length === 0)) {
			lastMsg.content[key] = value;
			}
			}
			}

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

			// 此对话还未加入到对话列表
			if (!lastMsg.content?.values && questionRes) {
			questionRes = {
			...questionRes,
			...chunkRes.value,
			};
			}

			if (isReportEmpty) {
			resolve(questionRes);
			}
			// computedMessageList.value[computedMessageList.value.length - 1] = finalMsg;
			scrollToBottom();
			// chunkRes.value = '你可以继续问我';
			return;
			}

			if (chunkRes.mode === 'conclusion') {

			const lastReport = computedMessageList.value.at(-1)?.content?.values?.at(-1);
			if(lastReport){
			lastReport.conclusion = chunkRes.value;
			chunkRes.value = '分析结束';
			}
			}

			if (chunkRes.mode === 'question') {
			const lastGroup = computedMessageList.value.at(-1).stepGroup.at(-1);
			const stepList = lastGroup?.value ?? [];
			const lastStepItem = stepList.at(-1);
			if (!lastStepItem.subStep) {
			lastStepItem.subStep = [];
			}
			lastStepItem.subStep.push({
			type: chunkRes.value.type,
			data: chunkRes.value,
			});
			scrollToBottom();
			return;
			}
			// 暂时不考虑多个 report情况

			// 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);
			// 强制触发更新

			scrollToBottom();
			},
			{
			cancelToken: currentSource.token,
			}
			)
			.catch((err) => {
			throw err;
			})
			.finally(() => {
			isTalking.value = false;
			// 收起所有 stepGroup
			computedMessageList.value.at(-1).stepGroup.forEach((item) => {
			item.isShow = false;
			});

			resetStep();
			});
			});

			await resultP;
			const content = parseContent(questionRes, true);
			return content;
			};

			const clearMessageContent = () =>
			(messageContent.value = {
			type: AnswerType.Text,
			values: '',
			});

			let currentSampleId = '';

			let currentLLMId = null;

			const stopGenClick = () => {
			lastAxiosSource?.cancel();
			isTalking.value = false;
			chatListLoading.value = false;
			resetStep();
			computedMessageList.value.at(-1).isStopMsg = true;
			};

			const sendChatMessage = async (content: ChatContent = messageContent.value, cb?: any, isCallExtParams?: any) => {
			if (!content?.values) {
			return;
			}
			if (isTalking.value \|\| chatListLoading.value) {
			ElMessage.warning('ai 正在回复中，请稍后尝试提问');
			return;
			}

			const isNewChat = messageList.value.length === 0;
			if (isNewChat) {
			if (activeSampleId.value) {
			currentSampleId = activeSampleId.value;
			}

			if (activeLLMId.value) {
			currentLLMId = activeLLMId.value;
			}
			}
			let resMsgContent: ChatContent = null;

			try {
			isTalking.value = true;
			// if (messageList.value.length === 0) {
			// messageList.value.pop();
			// }
			messageList.value.push({ role: RoleEnum.user, content });
			const userItem: ChatMessage = { role: RoleEnum.user, content, isChecked: false } as any;
			const assistantItem: ChatMessage = {
			role: RoleEnum.assistant,
			content: {
			type: AnswerType.Report,
			},
			state: AnswerState.Null,
			stepGroup: [
			{
			value: [],
			isShow: true,
			},
			],
			isStopMsg: false,
			isChecked: false,
			} as any;
			messageList.value.push(userItem);
			clearMessageContent();
			messageList.value.push({ role: RoleEnum.assistant, content: '' });

			// const { body, status } = await chat(messageList.value, getAPIKey());
			// if (body) {
			// const reader = body.getReader();
			// await readStream(reader, status);
			// }
			const a = new Promise<string>((resolve) => {
			setTimeout(() => {
			resolve('你好，我是AI语言模型 ');
			}, 500);
			});
			messageList.value.push(assistantItem);
			scrollToBottom();

			const msg = await a;
			appendLastMessageContent(msg);
			} catch (error: any) {
			appendLastMessageContent(error);
			} finally {
			isTalking.value = false;
			if (isCallExtParams) {
			const extRes = await extCallQuery(isCallExtParams);
			questionRes = extRes;
			resMsgContent = parseContent(extRes, true);
			} else {
			resMsgContent = await questionAi(content.values);
			}
			nextUserMsgEndIndex.value++;
			if (isNewChat) {
			const firstResCb = getRoomConfig(currentRouteId, 'firstResCb');
			firstResCb?.(resMsgContent);
			} else {
			cb?.(resMsgContent);
			}
			userItem.historyId = questionRes?.history_id;
			userItem.content.values = questionRes?.question ?? userItem.content.values;
			assistantItem.historyId = questionRes?.history_id;
			assistantItem.sectionAId = finalCalcSectionAId;
			appendLastMessageContent(resMsgContent);
			setTimeout(() => {
			// 收到回复，继续滚
			scrollToBottom();
			}, 300);
			} catch (error: any) {}
			};

			const sendClick = (cb) => {
			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 readStream = async (reader: ReadableStreamDefaultReader<Uint8Array>, status: number) => {
			let partialLine = '';
			const { loadRangeData, onChatListScroll, moreIsLoading, nextUserMsgEndIndex } = useScrollLoad({
			container: chatListDom,
			historyGroupId: currentRouteId,
			messageList,
			parseAnswerContent: parseContent,
			});

			while (true) {
			// eslint-disable-next-line no-await-in-loop
			const { value, done } = await reader.read();
			if (done) break;
			const chatListLoading = ref(true);

			const decodedText = decoder.decode(value, { stream: true });
			const { scrollToBottom, scrollToTop, isBottom } = useScrollToBottom({
			chatListDom: chatListDom,
			});

			if (status !== 200) {
			const json = JSON.parse(decodedText); // start with "data: "
			const content = json.error.message ?? decodedText;
			appendLastMessageContent(content);
			return;
			}
			onActivated(() => {
			emitter.emit('updateHeaderTitle', activeChatRoom.value?.title ?? '');
			});

			const chunk = partialLine + decodedText;
			const newLines = chunk.split(/\r?\n/);
			onMounted(async () => {
			messageList.value = [];
			chatListLoading.value = true;
			await loadRangeData().finally(() => {
			chatListLoading.value = false;
			});
			setTimeout(() => {
			emitter.emit('updateHeaderTitle', activeChatRoom.value?.title ?? '');
			}, 300);

			partialLine = newLines.pop() ?? '';
			if (messageList.value.length === 0) {
			messageContent.value = {
			type: AnswerType.Text,
			values: activeChatRoom.value?.title,
			};

			for (const line of newLines) {
			if (line.length === 0) continue; // ignore empty message
			if (line.startsWith(':')) continue; // ignore sse comment message
			if (line === 'data: [DONE]') return; //

			const json = JSON.parse(line.substring(6)); // start with "data: "
			const content = status === 200 ? json.choices[0].delta.content ?? '' : json.error.message;
			appendLastMessageContent(content);
			}
			}
			};

			const appendLastMessageContent = (content: string) => (messageList.value[messageList.value.length - 1].content += content);

			const sendOrSave = () => {
			if (!messageContent.value.length) return;
			if (isConfig.value) {
			if (saveAPIKey(messageContent.value.trim())) {
			switchConfigStatus();
			}
			clearMessageContent();
			} else {
			sendChatMessage();
			}
			};

			const clickConfig = () => {
			if (!isConfig.value) {
			messageContent.value = getAPIKey();
			} else {
			clearMessageContent();
			if (isSharePage.value) {
			// setTimeout(() => {
			// // 滚动到顶部
			// scrollToTop();
			// }, 300);
			} else {
			setTimeout(() => {
			// 初始状态滚一下
			scrollToBottom();

			setTimeout(() => {
			chatListDom.value.addEventListener('scroll', onChatListScroll);
			}, 300);
			}, 300);
			}
			}
			switchConfigStatus();
			loadAmisSource();
			});
			//#region ====================== 关联查询 ======================
			const relativeQueryClick = async (val) => {
			sendChatMessage(
			{
			type: AnswerType.Text,
			values: val.question,
			},
			undefined,
			{
			history_group_id: currentRouteId,
			question: val.question,
			call_ext_id: val.call_ext_id,
			call_ext_args: val.agrs ? JSON.stringify(val.agrs) : null,
			}
			);
			};

			const getSecretKey = () => 'lianginx';

			const saveAPIKey = (apiKey: string) => {
			if (apiKey.slice(0, 3) !== 'sk-' \|\| apiKey.length !== 51) {
			alert('API Key 错误，请检查后重新输入！');
			return false;
			//#endregion
			//#region ====================== 光标输入上下箭头显示历史消息 ======================
			const currentIndex = ref(null);
			const history_data = computed(() => {
			return computedMessageList.value.filter((item) => item.role === RoleEnum.user);
			});
			//显示上一条消息
			const showUpChatClick = () => {
			if (computedMessageList.value.length === 0) return;
			if (currentIndex.value == 0) {
			messageContent.value.values = history_data.value[currentIndex.value].content.values;
			return;
			} else {
			currentIndex.value = (currentIndex.value + history_data.value.length - 1) % history_data.value.length;
			}
			const aesAPIKey = cryptoJS.AES.encrypt(apiKey, getSecretKey()).toString();
			localStorage.setItem('apiKey', aesAPIKey);
			return true;
			messageContent.value.values = history_data.value[currentIndex.value].content.values;
			};

			const getAPIKey = () => {
			if (apiKey) return apiKey;
			const aesAPIKey = localStorage.getItem('apiKey') ?? '';
			apiKey = cryptoJS.AES.decrypt(aesAPIKey, getSecretKey()).toString(cryptoJS.enc.Utf8);
			return apiKey;
			//显示下一条消息
			const showDownChatClick = () => {
			if (computedMessageList.value.length === 0) return;
			if (currentIndex.value == history_data.value.length - 1) {
			messageContent.value.values = history_data.value[currentIndex.value].content.values;
			return;
			}
			if (currentIndex.value === null) {
			currentIndex.value = 0;
			} else {
			currentIndex.value = (currentIndex.value + 1) % history_data.value.length;
			}
			messageContent.value.values = history_data.value[currentIndex.value].content.values;
			};
			//#endregion
			const {
			copyClick,
			likeClick,
			unLikeClick,
			feedbackPosition,
			feedbackIsShow,
			feedbackContent,
			feedbackPanelRef,
			currentFeedbackMapItem,
			feedbackClick,
			askMoreClick,
			fixQuestionClick,
			preQuestion,
			showFixQuestion,
			showAskMore,
			} = useAssistantContentOpt({
			sendChatMessage,
			displayMessageList: computedMessageList,
			});

			const switchConfigStatus = () => (isConfig.value = !isConfig.value);
			//#region ====================== 侧边栏drawer ======================
			const drawerIsShow = ref(false);

			const clearMessageContent = () => (messageContent.value = '');

			const scrollToBottom = () => {
			if (!chatListDom.value) return;
			chatListDom.value.lastElementChild.scrollIntoView();
			// scrollTo(0, chatListDom.value.scrollHeight);
			const updateChatInput = (content) => {
			messageContent.value.values = content;
			};

			watch(messageList.value, () => nextTick(() => scrollToBottom()));

			//#region ====================== 聊天内容操作 ======================

			//#endregion
			//#region ====================== 用户询问的问题设置为常用语 ======================
			const setCommonQuestionInfo = ref({});
			const { toClipboard } = useClipboard();

			const copyClick = (content) => {
			//用户复制问题
			const copyUserClick = (item) => {
			const text = item.content.values;
			ElMessage.success('复制成功');
			toClipboard(content);
			toClipboard(text);
			};
			//用户问题设置为常用语
			const setCommonQuestionClick = (item) => {
			setCommonQuestionInfo.value = item;
			};
			//#endregion

			//#region ====================== 分享 ======================

			const shareLinkDlgRef = useCompRef(ShareLinkDlg);
			const isShareCheck = ref(false);

			const shareClick = async (item: ChatMessage) => {
			shareLinkDlgRef.value.openShare(item);
			};
			//#endregion
			</script>

			<style scoped>
			<style scoped lang="scss">
			pre {
			font-family: -apple-system, 'Noto Sans', 'Helvetica Neue', Helvetica, 'Nimbus Sans L', Arial, 'Liberation Sans', 'PingFang SC',
			'Hiragino Sans GB', 'Noto Sans CJK SC', 'Source Han Sans SC', 'Source Han Sans CN', 'Microsoft YaHei', 'Wenquanyi Micro Hei',
			'WenQuanYi Zen Hei', 'ST Heiti', SimHei, 'WenQuanYi Zen Hei Sharp', sans-serif;
			}

			.more-loading {
			:deep(.el-loading-spinner) {
			--loading-size: 35px;
			margin-top: 0;
			.circular {
			width: var(--loading-size);
			height: var(--loading-size);
			}
			}
			}

			:deep(.el-step__icon.is-text) {
			--radius-size: 24px;
			width: var(--radius-size);
			height: var((--radius-size));
			}

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

			:deep(.el-step:last-of-type .el-step__description) {
			// display: none;
			}
			</style>