~xuyonghao/flow_web.git

			@@ -1,146 +1,25 @@
			<template>
			<div class="container">
			<AddSession
			:modalObj="modalObj"
			@addSession="addSession"
			:dialogId="dialogId"
			></AddSession>
			<a-card class="top-title">AI会话记录</a-card>
			<a-row :gutter="[5, 5]" style="margin-top: 3px">
			<a-col :span="6">
			<a-card class="left-select">
			<a-select
			v-model="selectValue"
			:options="dialogs"
			:field-names="fieldNames"
			@change="dialogChange"
			>
			</a-select>
			</a-card>
			<a-card style="height: 50px">
			<template #cover>
			<div style="display: flex; justify-content: space-between">
			<a-button
			type="primary"
			shape="round"
			class="card-btn-1"
			@click="modalObj.add = true"
			>
			+新建会话
			</a-button>
			<!-- <a-button type="text" shape="circle" class="card-btn-2">
			<icon-search />
			</a-button> -->
			</div>
			</template>
			</a-card>
			<a-card class="left">
			<a-scrollbar
			class="left-list"
			style="
			height: calc(100vh - 350px);
			overflow-y: auto;
			overflow-x: hidden;
			"
			>
			<div
			class="item left-list-item"
			v-for="session in sessionList"
			@click="querySessionDetail(session)"
			:class="{ isLeftActive: activeSessionId === session.id }"
			>
			<div class="text" :class="{ time: theme === 'dark' }"
			>{{ session.name }}
			</div>
			<div class="time"
			>{{
			moment(new Date(session.create_time)).format(
			'YYYY-MM-DD HH:mm:ss'
			)
			}}
			</div>
			</div>
			</a-scrollbar>
			</a-card>
			<!-- <AddSession-->
			<!-- :modalObj="modalObj"-->
			<!-- @addSession="addSession"-->
			<!-- :dialogId="dialogId"-->
			<!-- ></AddSession>-->
			<!-- <a-card class="top-title">AI会话记录</a-card>-->
			<a-row :gutter="[5, 5]" style="margin-top: 3px;">
			<a-col :span="1">
			<chatMenu @createSession="createSession" @querySessionDetail="querySessionDetail" @changeAgentType="changeAgentType"></chatMenu>
			</a-col>
			<a-col :span="18">
			<a-card class="center">
			<!-- <div
			v-if="sessionDetailList.length === 0"
			style="
			width: 90%;
			overflow: auto;
			height: 65vh;
			margin: 0px auto 20px;
			"
			>
			<div class="center-title">智能问答</div>
			<div class="center-content">
			我可以理解和学习人类的语言，具备多轮对话的能力，现在和我开始交流吧~
			</div>
			<div class="center-question">
			<div class="center-question-left">试一试这样问我</div>
			<div class="center-question-right">
			<a-button type="primary">换一换</a-button>
			<!-- 智能体会话-->
			<a-col :span="23" v-show="agentType == '1'">
			<div class="center">
			<div class="header___lEPyH">
			<div class="chatHeader">
			<div class="chatHeaderBox">
			<span class="title">{{agentTitle}}</span>
			</div>
			</div>
			<a-row justify="space-around" class="center-list">
			<a-col :span="7" class="item">
			<div class="item-title">
			<IconTiktokColor></IconTiktokColor>
			抖音带货脚本
			</div>
			<div class="item-content" :class="{ dark: theme === 'dark' }">
			编写引人注目且具有说服力的、适用于产品的...
			</div>
			</a-col>
			<a-col :span="7" class="item">
			<div class="item-title">
			<IconTiktokColor></IconTiktokColor>
			抖音带货脚本
			</div>
			<div class="item-content" :class="{ dark: theme === 'dark' }">
			编写引人注目且具有说服力的、适用于产品的...
			</div>
			</a-col>
			<a-col :span="7" class="item">
			<div class="item-title">
			<IconTiktokColor></IconTiktokColor>
			抖音带货脚本
			</div>
			<div class="item-content" :class="{ dark: theme === 'dark' }">
			编写引人注目且具有说服力的、适用于产品的...
			</div>
			</a-col>
			<a-col :span="7" class="item">
			<div class="item-title">
			<IconTiktokColor></IconTiktokColor>
			抖音带货脚本
			</div>
			<div class="item-content" :class="{ dark: theme === 'dark' }">
			编写引人注目且具有说服力的、适用于产品的...
			</div>
			</a-col>
			<a-col :span="7" class="item">
			<div class="item-title">
			<IconTiktokColor></IconTiktokColor>
			抖音带货脚本
			</div>
			<div class="item-content" :class="{ dark: theme === 'dark' }">
			编写引人注目且具有说服力的、适用于产品的...
			</div>
			</a-col>
			<a-col :span="7" class="item">
			<div class="item-title">
			<IconTiktokColor></IconTiktokColor>
			抖音带货脚本
			</div>
			<div class="item-content" :class="{ dark: theme === 'dark' }">
			编写引人注目且具有说服力的、适用于产品的...
			</div>
			</a-col>
			</a-row>
			</div> -->
			</div>
			<a-scrollbar
			ref="scrollbar"
			id="home"
			@@ -148,7 +27,7 @@
			style="
			width: 90%;
			overflow: auto;
			height: calc(100vh - 380px);
			height: calc(100vh - 300px);
			margin: 0px auto 20px;
			"
			>
			@@ -163,7 +42,7 @@
			</template>
			<template #content>
			<div :class="{ chartUserText: theme === 'light' }"
			>{{ sessionDetail.content }}
			>{{ sessionDetail.content }}
			</div>
			</template>
			</a-comment>
			@@ -178,7 +57,7 @@
			<template #content>
			<a-card :class="{ chatItemAnswer: theme === 'light' }">
			<div :class="{ light: theme === 'light' }"
			>{{ sessionDetail.content }}
			>{{ sessionDetail.content }}
			</div>
			</a-card>
			</template>
			@@ -242,505 +121,655 @@
			style="border-radius: 24px"
			:loading="loading"
			size="large"
			>发送</a-button
			>发送
			</a-button
			>
			</div>
			</div>
			</div>
			</a-card>
			</div>
			</a-col>
			<!-- <a-col :span="5">
			<a-card class="right">
			<div class="right-top">
			<div class="right-title">数智库</div>
			<div class="right-btn">
			<a-button type="outline" shape="circle" style="border: none">
			<icon-search />
			</a-button>
			<a-button
			type="outline"
			shape="circle"
			style="border: none; margin-left: -10px"
			>
			<icon-close />
			</a-button>
			</div>
			</div>
			<div class="right-tag">
			<a-button type="primary" size="mini" class="btn">全部 </a-button>
			<a-button type="outline" size="mini" class="btn"
			>文档创作
			</a-button>
			<a-button type="outline" size="mini" class="btn"
			>知识学习
			</a-button>
			<a-button type="outline" size="mini" class="btn"
			>效率提升
			</a-button>
			</div>
			<div class="right-list">
			<div class="right-item">
			<div class="item-title">
			<IconTiktokColor></IconTiktokColor>
			抖音带货脚本
			</div>
			<div class="item-content" :class="{ dark: theme === 'dark' }">
			编写引人注目且具有说服力的、适用于产品的...
			</div>
			</div>
			<div class="right-item">
			<div class="item-title">
			<IconTiktokColor></IconTiktokColor>
			抖音带货脚本
			</div>
			<div class="item-content" :class="{ dark: theme === 'dark' }">
			编写引人注目且具有说服力的、适用于产品的...
			</div>
			</div>
			<div class="right-item">
			<div class="item-title">
			<IconTiktokColor></IconTiktokColor>
			抖音带货脚本
			</div>
			<div class="item-content" :class="{ dark: theme === 'dark' }">
			编写引人注目且具有说服力的、适用于产品的...
			</div>
			</div>
			</div>
			</a-card>
			</a-col> -->
			<a-col :span="23" v-show="agentType == '2'">
			<div class="center">
			<agentSession :modalObj="agentObj"></agentSession>
			</div>
			</a-col>
			<a-col :span="23" v-show="agentType == '3'">
			<div class="center" style="padding: 0">
			<historySession @querySessionDetail="querySessionDetail" @changeAgentType="changeAgentType"></historySession>
			</div>
			</a-col>
			<a-col :span="23" v-show="agentType == '4'">
			<div class="center" style="padding: 0">
			<smartAi @createSession="createSession" @querySessionDetail="querySessionDetail" @changeAgentType="changeAgentType"></smartAi>
			</div>
			</a-col>
			</a-row>
			</div>
			</template>
			<script setup lang="ts">
			import {
			IconClose,
			IconSearch,
			IconTiktokColor,
			} from '@arco-design/web-vue/es/icon';
			import { useAppStore, useUserStore } from '@/store';
			import { computed, nextTick, onMounted, watch, reactive, ref } from 'vue';
			import {
			IconClose,
			IconSearch,
			IconTiktokColor
			} from "@arco-design/web-vue/es/icon";
			import { useAppStore, useUserStore } from "@/store";
			import { computed, nextTick, onMounted, watch, reactive, ref, onBeforeMount, onBeforeUnmount } from "vue";

			import { Message } from '@arco-design/web-vue';
			import { EventSourceParserStream } from 'eventsource-parser/stream';
			import moment from 'moment';
			import AddSession from '@/views/sessionManager/components/addSession.vue';
			import {
			chatApi,
			getDialogListApi,
			getSessionDetailsApi,
			sessionListApi,
			} from '@/api/session';
			import { getAuthorization } from '@/utils/auth';
			import { Message } from "@arco-design/web-vue";
			import { EventSourceParserStream } from "eventsource-parser/stream";
			import moment from "moment";
			import chatMenu from "@/views/sessionManager/components/chatMenu.vue";
			import AddSession from "@/views/sessionManager/components/addSession.vue";
			import agentSession from "@/views/sessionManager/components/agentSession.vue";
			import historySession from "@/views/sessionManager/components/historySession.vue";
			import smartAi from "@/views/sessionManager/components/smartAi.vue";
			import EventBus from "@/utils/EventBus";
			import {
			addSessionApi,
			chatApi,
			getDialogListApi,
			getSessionDetailsApi,
			sessionListApi
			} from "@/api/session";
			import { getAuthorization } from "@/utils/auth";
			import { queryCanvasList } from "@/api/Agent";
			import { getAgentSessionDetailsApi } from "@/api/agentSession";

			const sessionDetailList = ref([]); //根据会话id出来的会话详情
			const sessionList = ref([]); //会话列表
			const modalObj = reactive({ add: false });
			const dialogId = ref('');
			const chatDis = ref(false);
			const loading = ref(false);
			const sessionDetailList = ref([]); //根据会话id出来的会话详情
			const sessionList = ref([]); //会话列表
			const modalObj = reactive({ add: false });
			const dialogId = ref("");
			const chatDis = ref(false);
			const loading = ref(false);
			const agentType = ref("1");
			const agentTitle = ref("未命名会话");

			const currIndex = ref(0);
			const displayedText = ref(''); // 正在显示的文字
			let timer: number \| null = null;
			const streamStr = ref('');
			const inputMsg = ref('');
			const activeSessionId = ref('');
			const fieldNames = { value: 'id', label: 'name' };
			const dialogs = ref([]);
			const selectValue = ref('');
			const sectionList = ref({});
			const DialogList = async () => {
			const { code, data } = await getDialogListApi();
			if (code === 200) {
			if (data) {
			selectValue.value = data[0].id;
			dialogs.value = data;
			querySessionList();
			}
			const currIndex = ref(0);
			const displayedText = ref(""); // 正在显示的文字
			let timer: number \| null = null;
			const streamStr = ref("");
			const inputMsg = ref("");
			const activeSessionId = ref("");
			const fieldNames = { value: "id", label: "name" };
			const dialogs = ref([]);
			const dialogObj = reactive({});
			const agentObj = reactive({});
			const agentList = ref([]);
			const selectValue = ref("");
			const sectionList = ref({});
			const DialogList = async () => {
			const { code, data } = await getDialogListApi();
			if (code === 200) {
			if (data) {
			selectValue.value = data[0].id;
			dialogs.value = data.map((item) => {
			return {
			...item,
			type: 1 //智能体
			};
			});
			console.log(data, "dialogs");
			queryCanvas();
			}
			};
			const handleShiftEnter = (event) => {
			event.preventDefault();
			inputMsg.value += '\n';
			};
			const dialogChange = (val) => {
			dialogId.value = val;
			}
			};

			const queryCanvas = async (params = {}) => {
			try {
			const { data } = await queryCanvasList(params);
			console.log(data, "agent");
			agentList.value = data.map((item) => {
			return {
			...item,
			name: item.title,
			type: 2 //agent
			};
			});
			// 合并数组
			dialogs.value = dialogs.value.concat(agentList.value);

			// 判断当前是智能体或agent
			// console.log(val, 'val');
			// if (dialogs.value.length > 0) {
			// dialogChange(dialogs.value[0].id);
			// }
			//新建会话
			createSession(dialogs.value[0].id);


			} catch (err) {
			// you can report use errorHandler or other
			} finally {
			}
			};
			// 新建会话
			const createSession = async (id,name='未命名会话') => {
			// 如果有会话id
			console.log(name, '新建会话名称');



			const res = await addSessionApi({
			dialog_id: id,
			conversation_desc: name
			});
			// console.log(res, "res");
			if (res.code == 200) {
			// console.log(res.data.conversation_id);
			activeSessionId.value = res.data?.conversation_id;
			queryNewSessionDetail(res.data?.conversation_id);
			} else {
			Message.error("创建会话失败，请重试");
			}

			};


			const handleShiftEnter = (event) => {
			event.preventDefault();
			inputMsg.value += "\n";
			};
			const dialogChange = (val) => {
			// 判断当前是智能体或agent
			// console.log(val, 'val');
			dialogId.value = val;
			dialogs.value.forEach((item) => {
			if (item.id === val) {
			Object.assign(dialogObj, item);
			}
			});
			console.log(dialogObj.type, "dialogObj");
			if (dialogObj.type == 1) {
			agentType.value = 1;
			querySessionList();
			};
			const sentClick = () => {
			sendMessage('click');
			};
			const sendMessage = async (event) => {
			if (event.keyCode == 13 \|\| event === 'click') {
			if (!event.shiftKey) {
			//只有enter没有shift，或进行你的其他逻辑
			if (event !== 'click') {
			event.preventDefault(); // 阻止默认行为，即不换行
			}
			} else {
			agentType.value = 2;
			queryAgentSessionList();
			}

			chatDis.value = true;
			loading.value = true;
			if (!activeSessionId.value) {
			Message.warning('请选择会话');
			chatDis.value = false;
			loading.value = false;
			return;
			}
			// querySessionList();
			};
			const sentClick = () => {
			sendMessage("click");
			};
			const sendMessage = async (event) => {
			if (event.keyCode == 13 \|\| event === "click") {
			if (!event.shiftKey) {
			//只有enter没有shift，或进行你的其他逻辑
			if (event !== "click") {
			event.preventDefault(); // 阻止默认行为，即不换行
			}

			// if (displayedText.value) {
			// querySessionList();
			// }
			chatDis.value = true;
			loading.value = true;
			if (!activeSessionId.value) {
			Message.warning("请选择会话");
			chatDis.value = false;
			loading.value = false;
			return;
			}

			if (inputMsg.value) {
			sessionDetailList.value.push({
			content: inputMsg.value,
			role: 'user',
			});
			sessionDetailList.value.push({ role: 'last' });
			refreshScroll();
			const response = await fetch(
			'/api/tech/cloudminds/query?modeltype=localragflow',
			{
			method: 'POST',
			headers: {
			'Authorization': getAuthorization(),
			'Content-Type': 'application/json',
			},
			body: JSON.stringify({
			conversation_id: activeSessionId.value,
			messages: inputMsg.value,
			}),
			// if (displayedText.value) {
			// querySessionList();
			// }

			if (inputMsg.value) {
			sessionDetailList.value.push({
			content: inputMsg.value,
			role: "user"
			});
			sessionDetailList.value.push({ role: "last" });
			refreshScroll();
			const response = await fetch(
			"/api/tech/cloudminds/query?modeltype=localragflow",
			{
			method: "POST",
			headers: {
			"Authorization": getAuthorization(),
			"Content-Type": "application/json"
			},
			body: JSON.stringify({
			conversation_id: activeSessionId.value,
			messages: inputMsg.value
			})
			}
			);

			const reader = response?.body
			?.pipeThrough(new TextDecoderStream())
			.pipeThrough(new EventSourceParserStream())
			.getReader();
			currIndex.value = 0;
			while (true) {
			const x = await reader?.read();
			if (x) {
			const { done, value } = x;
			console.log(x, 999);
			try {
			const val = JSON.parse(value?.data \|\| "");
			const d = val?.data;
			if (typeof d !== "boolean") {
			console.info("data:", d);
			streamStr.value = d.content;
			startDisplayStr();
			}
			} catch (e) {
			console.warn(e);
			}
			);

			const reader = response?.body
			?.pipeThrough(new TextDecoderStream())
			.pipeThrough(new EventSourceParserStream())
			.getReader();
			currIndex.value = 0;
			while (true) {
			const x = await reader?.read();
			if (x) {
			const { done, value } = x;
			console.log(x, 999);
			try {
			const val = JSON.parse(value?.data \|\| '');
			const d = val?.data;
			if (typeof d !== 'boolean') {
			console.info('data:', d);
			streamStr.value = d.content;
			startDisplayStr();
			}
			} catch (e) {
			console.warn(e);
			}
			if (done) {
			console.info('done');
			displayedText.value = '';
			querySessionDetail(sectionList.value);
			break;
			}
			if (done) {
			console.info("done");
			displayedText.value = "";
			queryNewSessionDetail(activeSessionId.value);
			EventBus.emit('queryAppUsageList');
			break;
			}
			}
			chatDis.value = false;
			loading.value = false;
			inputMsg.value = '';
			} else {
			Message.warning('消息不能为空');
			chatDis.value = false;
			loading.value = false;
			}
			// querySessionList();
			chatDis.value = false;
			loading.value = false;
			inputMsg.value = "";
			} else {
			Message.warning("消息不能为空");
			chatDis.value = false;
			loading.value = false;
			}
			}
			};
			const querySessionDetail = async (session) => {
			sectionList.value = session;
			activeSessionId.value = session.id;
			const { code, data } = await getSessionDetailsApi(session.id);
			if (code === 200) {
			sessionDetailList.value = data.message;
			refreshScroll(); //刷新滚动条位置
			}
			};
			const scrollbar = ref(null);
			const refreshScroll = () => {
			nextTick(() => {
			const container = document.getElementById('home');
			scrollbar.value.scrollTop(container.scrollHeight);
			});
			};
			// 查询会话列表
			const querySessionList = async () => {
			const { code, data } = await sessionListApi(selectValue.value);
			if (code === 200) {
			sessionList.value = data;
			activeSessionId.value = data[0].id; //默认选择第一个
			querySessionDetail(data[0]);
			} else {
			Message.warning('查询失败');
			}
			};
			//新增会话之后刷新会话列表
			const addSession = () => {
			querySessionList();
			};
			onMounted(() => {
			DialogList();
			});
			}
			};

			const appStore = useAppStore();
			const theme = computed(() => {
			return appStore.theme;
			});
			const queryNewSessionDetail = async (id) => {
			activeSessionId.value = id;
			const { code, data } = await getSessionDetailsApi(id);
			if (code === 200) {
			console.log(data, "新建会话详情");
			sessionDetailList.value = data.message;
			agentTitle.value = data.name;
			refreshScroll(); //刷新滚动条位置
			}
			};

			//文字动态输出
			const startDisplayStr = () => {
			if (timer) {
			clearTimeout(timer!);
			}
			const res = streamStr.value;
			// 将数组中的字符串拼接起来
			if (currIndex.value < res.length) {
			displayedText.value += res[currIndex.value];
			currIndex.value++;
			setTimeout(startDisplayStr, 100);
			refreshScroll();
			} else {
			clearTimeout(timer!);
			timer = null;
			}
			};
			const changeAgentType = (val,session) => {
			agentType.value = val;
			console.log(val, "val");
			}

			const querySessionDetail = async (session) => {
			sectionList.value = session;
			activeSessionId.value = session.id;
			const { code, data } = await getSessionDetailsApi(session.id);
			if (code === 200) {
			sessionDetailList.value = data.message;
			refreshScroll(); //刷新滚动条位置
			}
			};
			const queryAgentSessionDetail = async (id) => {
			const { code, data } = await getAgentSessionDetailsApi(id);
			if (code == 0) {
			Object.assign(agentObj, data);
			// sessionDetailList.value = data.message;
			// refreshScroll(); //刷新滚动条位置
			}
			};
			const scrollbar = ref(null);
			const refreshScroll = () => {
			nextTick(() => {
			const container = document.getElementById("home");
			scrollbar.value.scrollTop(container.scrollHeight);
			});
			};
			// 查询会话列表
			const querySessionList = async () => {
			const { code, data } = await sessionListApi(selectValue.value);
			if (code === 200) {
			sessionList.value = data;
			activeSessionId.value = data[0].id; //默认选择第一个
			querySessionDetail(data[0]);
			} else {
			Message.warning("查询失败");
			}
			};

			// 查询会话列表
			const queryAgentSessionList = async () => {
			// const { code, data } = await sessionListApi(selectValue.value);
			// if (code === 200) {
			//
			// } else {
			// Message.warning('查询失败');
			// }
			queryAgentSessionDetail(selectValue.value);
			};

			//新增会话之后刷新会话列表
			const addSession = () => {
			querySessionList();
			};
			onBeforeMount(() => {
			// DialogList();
			//新建会话
			createSession('');
			});
			onMounted(() => {
			EventBus.on("newChat", () => {
			agentType.value = 1;
			createSession('');
			});
			});
			onBeforeUnmount(() => {
			EventBus.off("newChat");
			});

			const appStore = useAppStore();
			const theme = computed(() => {
			return appStore.theme;
			});

			//文字动态输出
			const startDisplayStr = () => {
			if (timer) {
			clearTimeout(timer!);
			}
			const res = streamStr.value;
			// 将数组中的字符串拼接起来
			if (currIndex.value < res.length) {
			displayedText.value += res[currIndex.value];
			currIndex.value++;
			setTimeout(startDisplayStr, 100);
			refreshScroll();
			} else {
			clearTimeout(timer!);
			timer = null;
			}
			};
			</script>
			<style scoped lang="scss">
			.isLeftActive {
			background-color: #ededf5;
			}
			.left-list-item {
			margin-bottom: 2px;
			}
			.left-list-item:hover {
			background-color: #ededf5;
			.isLeftActive {
			background-color: #ededf5;
			}

			.left-list-item {
			margin-bottom: 2px;
			}

			.left-list-item:hover {
			background-color: #ededf5;
			}

			.dark {
			color: gray !important;
			}

			.container {
			.top-title {
			line-height: 32px;
			font-size: 16px;
			color: #333;
			}

			.dark {
			color: gray !important;
			}

			.container {
			.top-title {
			line-height: 32px;
			font-size: 16px;
			color: #333;
			.left-select {
			:deep(.arco-select-view-single) {
			border-radius: 5px;
			}
			.left-select {
			:deep(.arco-select-view-single) {
			border-radius: 5px;
			}
			}
			}

			.center,
			.right {
			box-sizing: border-box;
			height: calc(100vh - 200px);
			}
			.center,
			.right {
			box-sizing: border-box;
			height: calc(100vh - 200px);
			}

			.left {
			/* height: calc(100vh - 160px);
			overflow-y: auto;
			overflow-x: hidden;*/
			border: 0px;
			.left {
			/* height: calc(100vh - 160px);
			overflow-y: auto;
			overflow-x: hidden;*/
			border: 0px;

			.left-list {
			.item {
			cursor: pointer;
			.left-list {
			.item {
			cursor: pointer;

			.text,
			.time {
			line-height: 30px;
			}
			.text,
			.time {
			line-height: 30px;
			}

			.text {
			color: black;
			padding-left: 10px;
			}
			.text {
			color: black;
			padding-left: 10px;
			}

			.time {
			color: gray;
			font-size: 12px;
			padding-left: 10px;
			}
			.time {
			color: gray;
			font-size: 12px;
			padding-left: 10px;
			}
			}
			}
			.card-btn-1 {
			margin: 8px 15px;
			width: 100%;
			border-radius: 5px;
			}
			}

			.card-btn-2 {
			margin: 10px 10px;
			}
			.chatItemAnswer {
			.card-btn-1 {
			margin: 8px 15px;
			width: 100%;
			border-radius: 5px;
			}

			.card-btn-2 {
			margin: 10px 10px;
			}

			.chatItemAnswer {
			box-sizing: border-box;
			background: #f1f1f1;
			border-radius: 14px;

			.light {
			box-sizing: border-box;
			background: #f1f1f1;
			border-radius: 14px;
			.light {
			box-sizing: border-box;
			background: #f1f1f1;
			border-radius: 14px;
			}
			}
			.textItemAnswer {
			background-color: #373739;
			}

			.textItemAnswer {
			background-color: #373739;
			}

			.center {
			position: relative;
			padding-left: 50px;

			.center-title {
			line-height: 60px;
			font-size: 25px;
			font-family: 黑体;
			color: deepskyblue;
			}

			.center {
			position: relative;
			.center-content {
			font-size: 14px;
			color: gray;
			}

			.center-title {
			line-height: 60px;
			font-size: 25px;
			font-family: 黑体;
			color: deepskyblue;
			.center-question {
			margin-top: 20px;
			display: flex;
			justify-content: space-between;

			.center-question-left {
			margin-top: 5px;
			margin-left: 20px;
			}

			.center-content {
			font-size: 14px;
			color: gray;
			.center-question-right {
			margin-right: 20px;
			}
			}

			.center-question {
			margin-top: 20px;
			display: flex;
			justify-content: space-between;
			.center-list {
			margin-top: 10px;

			.center-question-left {
			margin-top: 5px;
			margin-left: 20px;
			}

			.center-question-right {
			margin-right: 20px;
			}
			}
			.center-list {
			.item {
			border-radius: 10px;
			margin-top: 10px;
			padding: 10px;
			min-height: 120px;
			background-color: #e9f3ff;

			.item {
			border-radius: 10px;
			margin-top: 10px;
			padding: 10px;
			min-height: 120px;
			background-color: #e9f3ff;
			.item-content {
			color: #666;
			}
			.item-title {
			text-align: center;
			line-height: 40px;
			font-size: 20px;
			font-family: 黑体;
			color: #333;
			}
			.item-content {
			color: #666;
			}

			.item-title {
			text-align: center;
			line-height: 40px;
			font-size: 20px;
			font-family: 黑体;
			color: #333;
			}
			}
			.chartStart {
			color: #4955f5;
			cursor: pointer;
			font-family: PingFangSC-Medium;
			font-size: 12px;
			font-weight: 500;
			}
			.chat_bottom {
			}

			.chartStart {
			color: #4955f5;
			cursor: pointer;
			font-family: PingFangSC-Medium;
			font-size: 12px;
			font-weight: 500;
			}

			.chat_bottom {
			display: flex;
			align-items: center;

			.center-bottom {
			// position: absolute;
			// width: 90%;
			// bottom: 20px;
			// left: 5%;
			background: #fff;
			border: 1px solid #00000014;
			border-radius: 24px;
			display: flex;
			align-items: center;
			.center-bottom {
			// position: absolute;
			// width: 90%;
			// bottom: 20px;
			// left: 5%;
			background: #fff;
			border: 1px solid #00000014;
			flex: 1 1;
			flex-direction: column;
			overflow: hidden;
			position: relative;
			// padding-top:10px;
			:deep(.arco-textarea-wrapper) {
			border-radius: 24px;
			display: flex;
			flex: 1 1;
			flex-direction: column;
			overflow: hidden;
			position: relative;
			:deep(.arco-textarea-wrapper) {
			border-radius: 24px;
			}

			.btn-send {
			position: absolute !important;
			right: 5px;
			bottom: 5px;
			z-index: 10;
			}
			}

			.btn-send {
			position: absolute !important;
			right: 10px;
			bottom: 10px;
			z-index: 10;
			}

			:deep(.arco-btn-size-large) {
			height: 28px;
			width: 60px;
			}
			}

			:deep(.arco-textarea-wrapper) {
			padding-top: 5px;
			}
			}
			.chat-item {
			padding: 10px 0;
			.chartUserText {
			font-weight: 600;
			font-size: 14px;
			color: #333;
			margin-top: 4px;
			}

			.chat-item {
			padding: 10px 0;

			.chartUserText {
			font-weight: 600;
			font-size: 14px;
			color: #333;
			margin-top: 4px;
			}

			.icon-user-jpg {
			border: 1px solid #d9d9d9;
			}
			}

			.right {
			.right-top {
			display: flex;
			justify-content: space-between;

			.right-title {
			font-size: 25px;
			color: black;
			}
			.icon-user-jpg {
			border: 1px solid #d9d9d9;

			.right-btn {
			position: relative;
			left: 20px;
			top: 0px;
			}
			}
			.right {
			.right-top {
			display: flex;
			justify-content: space-between;

			.right-title {
			font-size: 25px;
			color: black;
			}
			.right-tag {
			margin-top: 20px;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.right-btn {
			position: relative;
			left: 20px;
			top: 0px;
			}
			}
			.right-tag {
			margin-top: 20px;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			:deep(.arco-btn-primary) {
			margin-bottom: 10px !important;
			&:hover {
			background-color: #e9f3ff;
			color: rgb(22, 93, 255);
			}
			}
			}
			:deep(.arco-btn-primary) {
			margin-bottom: 10px !important;

			.right-list {
			.right-item {
			border-radius: 10px;
			margin-top: 10px;
			padding: 10px;
			min-height: 120px;
			&:hover {
			background-color: #e9f3ff;
			color: rgb(22, 93, 255);
			}
			}
			}

			.item-title {
			text-align: center;
			line-height: 40px;
			font-size: 20px;
			font-family: 黑体;
			color: #333;
			}
			.right-list {
			.right-item {
			border-radius: 10px;
			margin-top: 10px;
			padding: 10px;
			min-height: 120px;
			background-color: #e9f3ff;

			.item-title {
			text-align: center;
			line-height: 40px;
			font-size: 20px;
			font-family: 黑体;
			color: #333;
			}
			}
			}
			}
			}
			.header___lEPyH {
			width: 100%;
			height: 46px;
			position: relative;
			backdrop-filter: blur(15px);
			display: flex;
			align-items: center;
			justify-content: center;
			-webkit-backdrop-filter: blur(15px);
			.chatHeaderBox {
			width: auto;
			border-radius: 8px;
			padding: 4px 20px;
			transition: all var(--animation-duration) var(--animation-transition);
			display: flex;
			align-items: flex-end;
			overflow: hidden; /* 隐藏超出的内容 */
			text-overflow: ellipsis; /* 使用省略号来代替被隐藏的文字 */
			white-space: nowrap; /* 不换行，使内容在一行内显示 */
			max-width: 200px;
			.title{
			color: var(--color-text-1);
			font-size: 12px;
			}
			}
			}
			</style>