~xuyonghao/flow_web.git

			@@ -1,147 +1,29 @@
			<template>
			<div class="container">
			<AddSession
			:modalObj="modalObj"
			@addSession="addSession"
			:dialogId="dialogId"
			></AddSession>
			<a-card class="top-title">AI会话记录</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="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>
			<a-col :span="1">
			<chatMenu
			@createSession="createSession"
			@querySessionDetail="querySessionDetail"
			@changeAgentType="changeAgentType"
			></chatMenu>
			</a-col>
			<!-- 智能体会话-->
			<a-col :span="18" v-show="agentType == '1'">
			<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"
			@@ -149,7 +31,7 @@
			style="
			width: 90%;
			overflow: auto;
			height: calc(100vh - 380px);
			height: calc(100vh - 300px);
			margin: 0px auto 20px;
			"
			>
			@@ -178,8 +60,10 @@
			</template>
			<template #content>
			<a-card :class="{ chatItemAnswer: theme === 'light' }">
			<div :class="{ light: theme === 'light' }"
			>{{ sessionDetail.content }}
			<div
			:class="{ light: theme === 'light' }"
			v-html="sessionDetail.content.replace(/\n/g, '<br/>')"
			>
			</div>
			</a-card>
			</template>
			@@ -243,79 +127,35 @@
			style="border-radius: 24px"
			:loading="loading"
			size="large"
			>发送</a-button
			>
			>发送
			</a-button>
			</div>
			</div>
			</div>
			</a-card>
			</div>
			</a-col>
			<a-col :span="18" v-show="agentType == '2'">
			<a-card class="center">
			<a-col :span="23" v-show="agentType == '2'">
			<div class="center">
			<agentSession :modalObj="agentObj"></agentSession>
			</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 == '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>
			@@ -326,14 +166,28 @@
			IconTiktokColor,
			} from '@arco-design/web-vue/es/icon';
			import { useAppStore, useUserStore } from '@/store';
			import { computed, nextTick, onMounted, watch, reactive, ref } from 'vue';
			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 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,
			@@ -350,6 +204,7 @@
			const chatDis = ref(false);
			const loading = ref(false);
			const agentType = ref('1');
			const agentTitle = ref('未命名会话');

			const currIndex = ref(0);
			const displayedText = ref(''); // 正在显示的文字
			@@ -377,7 +232,6 @@
			});
			console.log(data, 'dialogs');
			queryCanvas();
			// querySessionList();
			}
			}
			};
			@@ -398,12 +252,32 @@

			// 判断当前是智能体或agent
			// console.log(val, 'val');
			if (dialogs.value.length > 0) {
			dialogChange(dialogs.value[0].id);
			}
			// 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('创建会话失败，请重试');
			}
			};

			@@ -501,12 +375,13 @@
			if (done) {
			console.info('done');
			displayedText.value = '';
			querySessionDetail(sectionList.value);
			queryNewSessionDetail(activeSessionId.value);
			EventBus.emit('queryAppUsageList');
			break;
			}
			}
			}
			querySessionList();
			// querySessionList();
			chatDis.value = false;
			loading.value = false;
			inputMsg.value = '';
			@@ -518,6 +393,23 @@
			}
			}
			};

			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 changeAgentType = (val, session) => {
			agentType.value = val;
			console.log(val, 'val');
			};

			const querySessionDetail = async (session) => {
			sectionList.value = session;
			activeSessionId.value = session.id;
			@@ -569,8 +461,19 @@
			const addSession = () => {
			querySessionList();
			};
			onBeforeMount(() => {
			// DialogList();
			//新建会话
			createSession('');
			});
			onMounted(() => {
			DialogList();
			EventBus.on('newChat', () => {
			agentType.value = 1;
			createSession('');
			});
			});
			onBeforeUnmount(() => {
			EventBus.off('newChat');
			});

			const appStore = useAppStore();
			@@ -600,9 +503,11 @@
			.isLeftActive {
			background-color: #ededf5;
			}

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

			.left-list-item:hover {
			background-color: #ededf5;
			}
			@@ -617,6 +522,7 @@
			font-size: 16px;
			color: #333;
			}

			.left-select {
			:deep(.arco-select-view-single) {
			border-radius: 5px;
			@@ -631,8 +537,8 @@

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

			.left-list {
			@@ -657,6 +563,7 @@
			}
			}
			}

			.card-btn-1 {
			margin: 8px 15px;
			width: 100%;
			@@ -666,22 +573,26 @@
			.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;
			}
			}

			.textItemAnswer {
			background-color: #373739;
			}

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

			.center-title {
			line-height: 60px;
			@@ -709,6 +620,7 @@
			margin-right: 20px;
			}
			}

			.center-list {
			margin-top: 10px;

			@@ -718,9 +630,11 @@
			padding: 10px;
			min-height: 120px;
			background-color: #e9f3ff;

			.item-content {
			color: #666;
			}

			.item-title {
			text-align: center;
			line-height: 40px;
			@@ -730,6 +644,7 @@
			}
			}
			}

			.chartStart {
			color: #4955f5;
			cursor: pointer;
			@@ -737,9 +652,11 @@
			font-size: 12px;
			font-weight: 500;
			}

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

			.center-bottom {
			// position: absolute;
			// width: 90%;
			@@ -764,28 +681,34 @@
			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;
			}

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

			.right {
			.right-top {
			display: flex;
			@@ -802,13 +725,16 @@
			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);
			@@ -835,4 +761,30 @@
			}
			}
			}
			.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>