From 532fea1fc92daa2765f2019ae379694fcdbe57e7 Mon Sep 17 00:00:00 2001
From: liudong <liudong>
Date: 星期五, 16 八月 2024 16:07:57 +0800
Subject: [PATCH] 新版UI对话页面开发
---
src/views/sessionManager/components/agentSession.vue | 124 ++++++++++++++++++++++++++++-------------
1 files changed, 84 insertions(+), 40 deletions(-)
diff --git a/src/views/sessionManager/components/agentSession.vue b/src/views/sessionManager/components/agentSession.vue
index 53aaf45..342d9a3 100644
--- a/src/views/sessionManager/components/agentSession.vue
+++ b/src/views/sessionManager/components/agentSession.vue
@@ -1,8 +1,15 @@
<template>
<!-- 鍐呭-->
+ <div class="header___lEPyH">
+ <div class="chatHeader">
+ <div class="chatHeaderBox">
+ <span class="title">{{agentTitle}}</span>
+ </div>
+ </div>
+ </div>
<a-scrollbar
ref="scrollbar"
- id="home"
+ id="agentHome"
class="chat-list"
style="
width: 90%;
@@ -105,6 +112,7 @@
import { getAuthorization } from "@/utils/auth";
import { EventSourceParserStream } from 'eventsource-parser/stream';
import { agentResetApi, agentSetApi, getAgentSessionDetailsApi } from "@/api/agentSession";
+import EventBus from '@/utils/EventBus';
const props = defineProps({
modalObj: Object,
});
@@ -117,6 +125,7 @@
const dialogId = ref('');
const chatDis = ref(false);
const loading = ref(false);
+const agentTitle = ref("鏈懡鍚嶄細璇�");
const currIndex = ref(0);
@@ -146,6 +155,15 @@
queryAgentSessionDetail(agentObj.id);
};
+const createNewAgent = async (session) => {
+ Object.assign(agentObj, session);
+ initPage();
+
+
+}
+
+
+
// 璋冪敤set鏂规硶
const agentSet = async () => {
const res = await agentSetApi({
@@ -153,7 +171,9 @@
title: agentObj.title,
dsl: agentObj.dsl,
});
- if (res.code === 200) {
+ console.log(res,'agentSet');
+ if (res.code == 0) {
+ // sessionDetailList.value = res.data.dsl.messages;
// Message.success('淇敼鎴愬姛');
}
}
@@ -187,30 +207,30 @@
.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 = '';
- queryAgentSessionDetail(agentObj.id);
- break;
- }
- }
- }
+ // 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 = '';
+ // queryAgentSessionDetail(agentObj.id);
+ // break;
+ // }
+ // }
+ // }
chatDis.value = false;
loading.value = false;
inputMsg.value = '';
@@ -222,7 +242,8 @@
if (code == 0) {
console.log(data,'浼氳瘽璇︽儏');
sessionDetailList.value = data.dsl.messages;
- // refreshScroll(); //鍒锋柊婊氬姩鏉′綅缃�
+ agentTitle.value = data.name || '鏈懡鍚嶄細璇�';
+ refreshScroll(); //鍒锋柊婊氬姩鏉′綅缃�
}
};
@@ -243,12 +264,12 @@
chatDis.value = true;
loading.value = true;
- if (!activeSessionId.value) {
- Message.warning('璇烽�夋嫨浼氳瘽');
- chatDis.value = false;
- loading.value = false;
- return;
- }
+ // if (!agentObj.id) {
+ // Message.warning('璇烽�夋嫨浼氳瘽');
+ // chatDis.value = false;
+ // loading.value = false;
+ // return;
+ // }
// if (displayedText.value) {
// querySessionList();
@@ -270,8 +291,8 @@
'Content-Type': 'application/json',
},
body: JSON.stringify({
- conversation_id: activeSessionId.value,
- messages: inputMsg.value,
+ id: agentObj.id,
+ message: inputMsg.value,
}),
}
);
@@ -345,24 +366,25 @@
const scrollbar = ref(null);
const refreshScroll = () => {
nextTick(() => {
- const container = document.getElementById('home');
+ const container = document.getElementById('agentHome');
scrollbar.value.scrollTop(container.scrollHeight);
});
};
onMounted(() => {
-
+ EventBus.on('createAgent', (data) => {
+ createNewAgent(data);
+ });
});
watch(
() => props.modalObj,
(newVal, oldVal) => {
- console.log(newVal,'鐩戝惉鍙樺寲');
- Object.assign(agentObj, newVal);
+ // Object.assign(agentObj, newVal);
//璋冪敤agent鍒濆鍖栨柟娉�
if(JSON.stringify(newVal) != '{}'){
- initPage();
+ // initPage();
}
},{
immediate: true,
@@ -501,4 +523,26 @@
}
}
}
+.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;
+ }
+}
</style>
--
Gitblit v1.8.0