From fa5fd89d1fd0f2d0b0bb1944b3ac4a452c49f83a Mon Sep 17 00:00:00 2001 From: zhangxiao <898441624@qq.com> Date: 星期六, 17 八月 2024 16:30:33 +0800 Subject: [PATCH] fix: 修改分页id --- src/views/sessionManager/index.vue | 472 ++++++++++++++++++++++++---------------------------------- 1 files changed, 198 insertions(+), 274 deletions(-) diff --git a/src/views/sessionManager/index.vue b/src/views/sessionManager/index.vue index abb44a3..225c10d 100644 --- a/src/views/sessionManager/index.vue +++ b/src/views/sessionManager/index.vue @@ -1,147 +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" 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"> - 鎴戝彲浠ョ悊瑙e拰瀛︿範浜虹被鐨勮瑷�锛屽叿澶囧杞璇濈殑鑳藉姏锛岀幇鍦ㄥ拰鎴戝紑濮嬩氦娴佸惂~ - </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 +27,7 @@ style=" width: 90%; overflow: auto; - height: calc(100vh - 380px); + height: calc(100vh - 300px); margin: 0px auto 20px; " > @@ -243,82 +121,29 @@ 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,46 +151,52 @@ 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'; + 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 agentSession from '@/views/sessionManager/components/agentSession.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, - sessionListApi, -} from '@/api/session'; -import { getAuthorization } from '@/utils/auth'; + 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 dialogId = ref(""); const chatDis = ref(false); const loading = ref(false); -const agentType = ref('1'); +const agentType = ref("1"); +const agentTitle = ref("鏈懡鍚嶄細璇�"); const currIndex = ref(0); -const displayedText = ref(''); // 姝e湪鏄剧ず鐨勬枃瀛� +const displayedText = ref(""); // 姝e湪鏄剧ず鐨勬枃瀛� let timer: number | null = null; -const streamStr = ref(''); -const inputMsg = ref(''); -const activeSessionId = ref(''); -const fieldNames = { value: 'id', label: 'name' }; +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 selectValue = ref(""); const sectionList = ref({}); const DialogList = async () => { const { code, data } = await getDialogListApi(); @@ -375,12 +206,11 @@ dialogs.value = data.map((item) => { return { ...item, - type: 1,//鏅鸿兘浣� - } + type: 1 //鏅鸿兘浣� + }; }); - console.log(data, 'dialogs'); + console.log(data, "dialogs"); queryCanvas(); - // querySessionList(); } } }; @@ -388,33 +218,52 @@ const queryCanvas = async (params = {}) => { try { const { data } = await queryCanvasList(params); - console.log(data, 'agent'); + console.log(data, "agent"); agentList.value = data.map((item) => { return { ...item, name: item.title, - type: 2,//agent - } + type: 2 //agent + }; }); // 鍚堝苟鏁扮粍 dialogs.value = dialogs.value.concat(agentList.value); // 鍒ゆ柇褰撳墠鏄櫤鑳戒綋鎴朼gent // 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) => { + const res = await addSessionApi({ + dialog_id: id, + conversation_desc: "鏈懡鍚嶄細璇�" + }); + // 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'; + inputMsg.value += "\n"; }; const dialogChange = (val) => { // 鍒ゆ柇褰撳墠鏄櫤鑳戒綋鎴朼gent @@ -422,37 +271,35 @@ dialogId.value = val; dialogs.value.forEach((item) => { if (item.id === val) { - Object.assign(dialogObj, item) + Object.assign(dialogObj, item); } - }) - console.log(dialogObj.type, 'dialogObj'); + }); + console.log(dialogObj.type, "dialogObj"); if (dialogObj.type == 1) { agentType.value = 1; querySessionList(); } else { agentType.value = 2; - queryAgentSessionList() + queryAgentSessionList(); } - - // querySessionList(); }; const sentClick = () => { - sendMessage('click'); + sendMessage("click"); }; const sendMessage = async (event) => { - if (event.keyCode == 13 || event === 'click') { + if (event.keyCode == 13 || event === "click") { if (!event.shiftKey) { //鍙湁enter娌℃湁shift锛屾垨杩涜浣犵殑鍏朵粬閫昏緫 - if (event !== 'click') { + if (event !== "click") { event.preventDefault(); // 闃绘榛樿琛屼负锛屽嵆涓嶆崲琛� } chatDis.value = true; loading.value = true; if (!activeSessionId.value) { - Message.warning('璇烽�夋嫨浼氳瘽'); + Message.warning("璇烽�夋嫨浼氳瘽"); chatDis.value = false; loading.value = false; return; @@ -465,22 +312,22 @@ if (inputMsg.value) { sessionDetailList.value.push({ content: inputMsg.value, - role: 'user', + role: "user" }); - sessionDetailList.value.push({ role: 'last' }); + sessionDetailList.value.push({ role: "last" }); refreshScroll(); const response = await fetch( - '/api/tech/cloudminds/query?modeltype=localragflow', + "/api/tech/cloudminds/query?modeltype=localragflow", { - method: 'POST', + method: "POST", headers: { - 'Authorization': getAuthorization(), - 'Content-Type': 'application/json', + "Authorization": getAuthorization(), + "Content-Type": "application/json" }, body: JSON.stringify({ conversation_id: activeSessionId.value, - messages: inputMsg.value, - }), + messages: inputMsg.value + }) } ); @@ -495,10 +342,10 @@ const { done, value } = x; console.log(x, 999); try { - const val = JSON.parse(value?.data || ''); + const val = JSON.parse(value?.data || ""); const d = val?.data; - if (typeof d !== 'boolean') { - console.info('data:', d); + if (typeof d !== "boolean") { + console.info("data:", d); streamStr.value = d.content; startDisplayStr(); } @@ -506,24 +353,43 @@ console.warn(e); } if (done) { - console.info('done'); - displayedText.value = ''; - querySessionDetail(sectionList.value); + console.info("done"); + displayedText.value = ""; + queryNewSessionDetail(activeSessionId.value); + EventBus.emit('queryAppUsageList'); break; } } } + // querySessionList(); chatDis.value = false; loading.value = false; - inputMsg.value = ''; + inputMsg.value = ""; } else { - Message.warning('娑堟伅涓嶈兘涓虹┖'); + Message.warning("娑堟伅涓嶈兘涓虹┖"); chatDis.value = false; loading.value = false; } } } }; + +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; @@ -536,7 +402,7 @@ const queryAgentSessionDetail = async (id) => { const { code, data } = await getAgentSessionDetailsApi(id); if (code == 0) { - Object.assign(agentObj, data) + Object.assign(agentObj, data); // sessionDetailList.value = data.message; // refreshScroll(); //鍒锋柊婊氬姩鏉′綅缃� } @@ -544,7 +410,7 @@ const scrollbar = ref(null); const refreshScroll = () => { nextTick(() => { - const container = document.getElementById('home'); + const container = document.getElementById("home"); scrollbar.value.scrollTop(container.scrollHeight); }); }; @@ -556,10 +422,9 @@ activeSessionId.value = data[0].id; //榛樿閫夋嫨绗竴涓� querySessionDetail(data[0]); } else { - Message.warning('鏌ヨ澶辫触'); + Message.warning("鏌ヨ澶辫触"); } }; - // 鏌ヨ浼氳瘽鍒楄〃 const queryAgentSessionList = async () => { @@ -572,13 +437,23 @@ queryAgentSessionDetail(selectValue.value); }; - //鏂板浼氳瘽涔嬪悗鍒锋柊浼氳瘽鍒楄〃 const addSession = () => { querySessionList(); }; +onBeforeMount(() => { + // DialogList(); + //鏂板缓浼氳瘽 + createSession(''); +}); onMounted(() => { - DialogList(); + EventBus.on("newChat", () => { + agentType.value = 1; + createSession(''); + }); +}); +onBeforeUnmount(() => { + EventBus.off("newChat"); }); const appStore = useAppStore(); @@ -608,9 +483,11 @@ .isLeftActive { background-color: #ededf5; } + .left-list-item { margin-bottom: 2px; } + .left-list-item:hover { background-color: #ededf5; } @@ -625,6 +502,7 @@ font-size: 16px; color: #333; } + .left-select { :deep(.arco-select-view-single) { border-radius: 5px; @@ -639,8 +517,8 @@ .left { /* height: calc(100vh - 160px); - overflow-y: auto; - overflow-x: hidden;*/ + overflow-y: auto; + overflow-x: hidden;*/ border: 0px; .left-list { @@ -665,6 +543,7 @@ } } } + .card-btn-1 { margin: 8px 15px; width: 100%; @@ -674,22 +553,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; @@ -717,6 +600,7 @@ margin-right: 20px; } } + .center-list { margin-top: 10px; @@ -726,9 +610,11 @@ padding: 10px; min-height: 120px; background-color: #e9f3ff; + .item-content { color: #666; } + .item-title { text-align: center; line-height: 40px; @@ -738,6 +624,7 @@ } } } + .chartStart { color: #4955f5; cursor: pointer; @@ -745,9 +632,11 @@ font-size: 12px; font-weight: 500; } + .chat_bottom { display: flex; align-items: center; + .center-bottom { // position: absolute; // width: 90%; @@ -772,28 +661,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; @@ -810,13 +705,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); @@ -843,4 +741,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; /* 浣跨敤鐪佺暐鍙锋潵浠f浛琚殣钘忕殑鏂囧瓧 */ + white-space: nowrap; /* 涓嶆崲琛岋紝浣垮唴瀹瑰湪涓�琛屽唴鏄剧ず */ + max-width: 200px; + .title{ + color: var(--color-text-1); + font-size: 12px; + } + } +} </style> -- Gitblit v1.8.0