WI/Web.V1.0.git

¶Ô±ÈÐÂÎÄ¼þ
			@@ -0,0 +1,350 @@
			<template>
			<div class="flex px-4 py-6 rounded-lg relative">
			<div class="absolute top-0 left-[72px] text-[#8d8e99]">{{ msg?.createTime }}</div>

			<img
			class="rounded-full size-12 flex-0"
			:class="{ 'mr-4': msg.role === RoleEnum.assistant }"
			:src="roleImageMap[msg.role]"
			alt=""
			srcset=""
			/>
			<div class="flex-auto flex">
			<div class="inline-flex flex-col" :class="{ 'w-full': msg.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 ====================== åçç»ä»¶ ======================-->
			<template v-if="msg.content.type === AnswerType.Report">
			<template v-if="msg?.stepGroup?.length > 0">
			<div v-for="(num, index) in msg?.stepGroup?.length" :key="index">
			<!-- æå¾åæåªå±ç¤ºç¬¬ä¸ä¸ªï¼åç»ç stepGroup é½æ¯ç©ºçï¼ç¨äºå¾ªç¯åºç»ä»¶ -->
			<!-- #region ====================== æå¾åæ ======================-->
			<div class="flex flex-col" v-if="msg?.stepGroup?.[index]?.value?.length > 0 && index === 0">
			<!-- #region ====================== æå¾åæ ======================-->
			<div class="flex items-center">
			<span class="mr-2">æå¾åæï¼</span>
			<div
			@click="toggleStepList(msg?.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(msg?.stepGroup?.[index]) }}
			</span>
			<span
			class="ywifont"
			:class="{
			'ywicon-unfold': !msg?.stepGroup?.[index].isShow,
			'ywicon-fold': msg?.stepGroup?.[index].isShow,
			}"
			></span>
			</div>
			</div>
			<!-- #endregion -->

			<!-- #region ====================== è¿ç¨è¾åº ======================-->
			<el-steps v-show="msg?.stepGroup?.[index].isShow" class="mt-3" direction="vertical">
			<el-step
			:key="`template-${stepIndex}`"
			v-for="(subItem, stepIndex) in msg?.stepGroup?.[index].value"
			:title="subItem.title"
			:status="stepEnumMap[subItem.status]"
			>
			<template #icon v-if="stepIndex + 1 === msg?.stepGroup?.[index].value.length && isTalking && isLast&&(subItem.finishLoading===false \|\| subItem.finishLoading===undefined)">
			<span class="ywifont ywicon-loading1 animate-spin !text-[24px]"></span>
			</template>
			<template #title>
			<span class="">
			<span v-html="subItem.title.replace(/\n/g, '<br>')"></span>

			<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="`${msg.historyId}-${stepIndex + 1}-${multiChatIndex + 1}`"
			v-for="(multiChatItem, multiChatIndex) in subItem.subStep"
			>
			<component
			:order="`${stepIndex + 1}-${multiChatIndex + 1}`"
			:item="multiChatItem"
			:is="multiChatTypeMapCom[multiChatItem.type]"
			@change="multiChatChange"
			:disabled="!(stepIndex + 1 === msg?.stepGroup?.[index].value.length && isTalking && isLast)"
			/>
			</div>
			</div>
			</template>
			</el-step>
			</el-steps>
			<!-- #endregion -->
			</div>
			<!-- #endregion -->
			<!-- result æ¶ recordSetTable å·²ç»å è½½ï¼summary æ¶åå è½½äºä¸æ¬¡ï¼å¯¼è´æ¯ä¾å push äºä¸¤æ¬¡
			ä¸ºäºè§£å³è¿ä¸ªé®é¢ï¼çå° msg.historyId åå¨æ¶ï¼åæ¸²æ recordSetTable
			-->
			<component
			v-if="msg.content?.values?.[index] && msg.content?.errCode !== ErrorCode.Message"
			:reportIndex="index"
			:conclusion="msg.content.values[index].conclusion"
			:is="answerTypeMapCom[msg.content.values[index].content.type]"
			:data="msg.content.values[index].content.values"
			:originData="msg.content.values[index]"
			:historyId="msg.historyId"
			:isTalking="isTalking && isLast"
			/>
			</div>
			</template>
			<p v-else-if="msg.content?.errCode !== ErrorCode.Message" class="text-info">ææ åå®¹ï¼è¯·éè¯</p>
			</template>
			<component
			v-else
			:historyId="msg.historyId"
			:conclusion="msg.conclusion"
			:is="answerTypeMapCom[msg.content.type]"
			:data="msg.content.values"
			:originData="msg"
			:isTalking="isTalking && isLast"
			/>
			<!-- #endregion -->
			<!-- </template> -->
			<!-- #region ====================== æ¥éä¿¡æ¯ ======================-->
			<div v-if="msg.content?.errCode === ErrorCode.Message" class="flex-column w-full">
			<p class="text-danger">
			{{ msg.content.errMsg }}
			</p>
			<div class="mt-3 flex" v-if="showFixQuestion(msg)">
			<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 msg.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, msg.content.origin)"
			>
			{{ fixItem }}
			</div>
			</div>
			</div>
			</div>
			<!-- #endregion -->
			<!-- #endregion -->
			<!-- #region ====================== éå åå®¹ ======================-->
			<!-- #region ====================== åæ¢ ======================-->
			<span v-if="msg.isStopMsg && msg?.role === RoleEnum.assistant" class="text-gray-400 text-[12px]">ï¼å·²åæ¢ï¼</span>
			<!-- parseContent è¿åä¸º null -->
			<p v-if="!msg.content && !isTalking && !msg.isStopMsg && msg.content?.errCode !== ErrorCode.Message" class="text-red-500">ææ æ°æ®</p>
			<!-- #endregion -->
			<!-- #endregion -->
			</div>
			<!-- #region ====================== ai æ¶æ¯æä½ ======================-->
			<div v-if="msg.content?.values && !isSharePage" 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="msg.content?.type === AnswerType.Text \|\| msg.content?.type === AnswerType.Knowledge"
			>
			<i class="p-2 ywifont ywicon-copy cursor-pointer hover:text-[#0284ff] hover:!text-[18px]" @click="copyClick(msg)" />
			</div>
			<template v-if="msg.content.errCode !== ErrorCode.Message">
			<el-tooltip effect="dark" content="ç¹èµ" placement="top">
			<div class="flex items-center justify-center size-[15px]">
			<i
			:class="{ 'text-[#0284ff]': msg.state === AnswerState.Like }"
			class="p-2 ywifont ywicon-dianzan cursor-pointer hover:text-[#0284ff] font-medium hover:!text-[18px]"
			@click="likeClick(msg)"
			/>
			</div>
			</el-tooltip>
			<el-tooltip effect="dark" content="ç¹è¸©" placement="top">
			<div class="flex items-center justify-center size-[15px]">
			<i
			:class="{ 'text-[#0284ff]': msg.state === AnswerState.Unlike }"
			class="p-2 ywifont ywicon-buzan cursor-pointer hover:text-[#0284ff] !text-[13px] hover:!text-[15px]"
			@click="unLikeClick(msg)"
			/>
			</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(msg)"
			/>
			</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,
			msg,
			msgList.filter((v) => v.role === RoleEnum.assistant).findIndex((v) => v.historyId === msg.historyId)
			)
			"
			/>
			<FeedbackPanel
			v-show="feedbackIsShow && currentFeedbackMapItem === msg"
			ref="feedbackPanelRef"
			v-model:isShow="feedbackIsShow"
			v-model:content="feedbackContent"
			:chatItem="currentFeedbackMapItem"
			:position="feedbackPosition"
			/>
			</div>
			</el-tooltip>
			</div>
			<!-- #endregion -->

			<div class="absolute flex items-center left-18 mt-2 space-x-2 pb-7">
			<div
			v-if="isTalking && isLast"
			class="text-blue-400 cursor-pointer z-20 py-2 px-2 border border-solid border-blue-400 hover:text-blue-500 hover:border-blue-500 rounded-lg hover:bg-[#ebeffa]"
			@click="stopGenClick"
			>
			åæ¢è¾åº
			</div>
			</div>
			</div>
			</div>
			</div>
			</div>
			</template>

			<script setup lang="ts" name="AssistantMsg">
			import type { PropType } from 'vue';
			import { useAssistantContentOpt } from '../hooks/useAssistantContentOpt';
			import type { ChatContent } from '../model/types';
			import {
			AnswerState,
			AnswerType,
			MultiChatType,
			RoleEnum,
			answerTypeMapCom,
			roleImageMap,
			stepEnumMap,
			type ChatMessage,
			} from '../model/types';
			import FeedbackPanel from '../components/FeedbackPanel.vue';

			import { multiChatTypeMapCom } from '/@/components/chat/chatComponents/multiChat';
			import { isSharePage } from '/@/stores/chatRoom';
			import { ErrorCode } from '/@/utils/request';
			import { question_stream_reply } from '/@/api/ai/chat';

			const props = defineProps({
			/** @description å½åæ¶æ¯ */
			msg: {
			type: Object as PropType<ChatMessage>,
			},
			msgList: {
			type: Array as PropType<Array<ChatMessage>>,
			},
			isLast: {
			type: Boolean,
			default: false,
			},
			isTalking: {
			type: Boolean,
			default: false,
			},
			});

			const emit = defineEmits({
			sendChatMessage: (content: ChatContent) => true,
			shareMsg: (msg: ChatMessage) => true,
			stopGenClick: () => true,
			});

			const sendChatMessage = (content: ChatContent) => {
			emit('sendChatMessage', content);
			};

			const stopGenClick = () => {
			emit('stopGenClick');
			};

			//#region ====================== æ¥éª¤ step ======================

			const toggleStepLabel = (item: any) => (item.isShow ? 'æ¶èµ·' : 'å±å¼');
			const toggleStepList = (item: any) => {
			item.isShow = !item.isShow;
			};

			//#endregion

			const {
			copyClick,
			likeClick,
			unLikeClick,
			feedbackPosition,
			feedbackIsShow,
			feedbackContent,
			feedbackPanelRef,
			currentFeedbackMapItem,
			feedbackClick,
			fixQuestionClick,
			showFixQuestion,
			} = useAssistantContentOpt({
			sendChatMessage,
			});

			//#region ====================== åäº« ======================
			const shareClick = async (item: ChatMessage) => {
			emit('shareMsg', item);
			};
			//#endregion

			const multiChatChange = async (replyId: string, val: any) => {
			const res = await question_stream_reply({
			start_time: val.start_time,
			end_time: val.end_time,
			reply_id: replyId,
			});
			};
			</script>
			<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>