From 5631aab9e380b83ec8ec6e21390e9386b0e0e852 Mon Sep 17 00:00:00 2001 From: liudong <liudong> Date: 星期一, 19 八月 2024 20:45:58 +0800 Subject: [PATCH] 智能体会话名称修改 --- src/views/sessionManager/index.vue | 590 +++++++++++++++++++++++++++++++++++++++++++++++----------- 1 files changed, 473 insertions(+), 117 deletions(-) diff --git a/src/views/sessionManager/index.vue b/src/views/sessionManager/index.vue index 35ac0f4..a0a759e 100644 --- a/src/views/sessionManager/index.vue +++ b/src/views/sessionManager/index.vue @@ -1,14 +1,18 @@ <template> <div class="container"> -<!-- <AddSession--> -<!-- :modalObj="modalObj"--> -<!-- @addSession="addSession"--> -<!-- :dialogId="dialogId"--> -<!-- ></AddSession>--> + <!-- <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-row :gutter="[5, 5]" style="margin-top: 3px"> <a-col :span="1"> - <chatMenu @createSession="createSession" @querySessionDetail="querySessionDetail" @changeAgentType="changeAgentType"></chatMenu> + <chatMenu + @createSession="createSession" + @querySessionDetail="querySessionDetail" + @changeAgentType="changeAgentType" + ></chatMenu> </a-col> <!-- 鏅鸿兘浣撲細璇�--> <a-col :span="23" v-show="agentType == '1'"> @@ -16,7 +20,32 @@ <div class="header___lEPyH"> <div class="chatHeader"> <div class="chatHeaderBox"> - <span class="title">{{agentTitle}}</span> +<!-- <span class="title">{{ agentTitle }}</span>--> + + <a-popover + position="bottom" + trigger="click" + > + <a-button border + >{{agentTitle}} + <icon-down style="margin-left: 4px" /> + </a-button> + <template #content> + <a-button + type="text" + class="button" + style="color: #2a2a2b" + @click="handleClick()" + > + <template #icon> + <icon-edit /> + </template> + 淇敼鍚嶇О + </a-button> +<!-- <a-divider style="margin: 10px 0" />--> + </template> + </a-popover> + </div> </div> </div> @@ -25,13 +54,13 @@ id="home" class="chat-list" style=" - width: 90%; + width: 80%; overflow: auto; - height: calc(100vh - 300px); + height: calc(100vh - 380px); margin: 0px auto 20px; " > - <div class="chat-item" v-for="sessionDetail in sessionDetailList"> + <div class="chat-item" v-for="(sessionDetail,index) in sessionDetailList"> <a-comment v-if="sessionDetail.role === 'user'"> <template #avatar> <img @@ -55,11 +84,30 @@ /> </template> <template #content> - <a-card :class="{ chatItemAnswer: theme === 'light' }"> - <div :class="{ light: theme === 'light' }" - >{{ sessionDetail.content }} - </div> - </a-card> + <!-- <a-card :class="{ chatItemAnswer: theme === 'light' }">--> + <!-- <div--> + <!-- :class="{ light: theme === 'light' }"--> + <!-- v-html="sessionDetail.content.replace(/\n/g, '<br/>')"--> + <!-- >--> + <!-- </div>--> + <!-- </a-card>--> + <a-textarea + readonly + auto-size + v-model="sessionDetail.content" + :class="{ chatItemAnswer: theme === 'light' }" + :style="{backgroundColor: theme === 'light' ? '#ffffff' : '#000000'}" + style="border: none" + > + </a-textarea> + </template> + <template #actions> + <span class="action" v-if="index != 0" @click="copy(sessionDetail.content)"> + <icon-copy /> 澶嶅埗 + </span> + <span class="action" v-if="index != 0 && index == sessionDetailList.length - 1" @click="reGenerate()"> + <icon-refresh /> 閲嶆柊鐢熸垚 + </span> </template> </a-comment> <a-comment v-else-if="sessionDetail.role === 'last'"> @@ -76,8 +124,19 @@ auto-size v-model="displayedText" :class="{ chatItemAnswer: theme === 'light' }" + :style="{backgroundColor: theme === 'light' ? '#ffffff' : '#000000'}" + style="border: none" > </a-textarea> + </template> + <template #actions> + <div class="action" + @click="stopChat" + style="background: var(--color-bg-2);color: var(--color-primary-light-4);" + v-if="displayedText != ''"> + <icon-record-stop /> + 鍋滄鐢熸垚 + </div> </template> </a-comment> </div> @@ -86,6 +145,7 @@ > <div class="chartStart v-else" @click="stopChat">閲嶆柊鐢熸垚</div> --> </a-scrollbar> + <div class="chat_bottom"> <div class="center-bottom"> <!-- <a-textarea @@ -107,23 +167,71 @@ show-word-limit :disabled="chatDis" :class="{ textItemAnswer: theme === 'dark' }" + :style="{backgroundColor: theme === 'light' ? '#ffffff' : '#000000'}" + style="border: none" :auto-size="{ minRows: 12, maxRows: 5, }" /> + <div class="btn-send"> - <!-- <icon-send size="32" /> --> <a-button :disabled="chatDis" @click="sentClick" - type="primary" + type="text" style="border-radius: 24px" :loading="loading" - size="large" - >鍙戦�� - </a-button > + <icon-send size="32" style="color: #0960bd" /> + </a-button> + </div> + </div> + <!-- <div style="margin-top: 0px">--> + <!-- <a-upload--> + <!-- ref="uploadRef"--> + <!-- :file-list="uploadList"--> + <!-- :limit="1"--> + <!-- multiple--> + <!-- :custom-request="customRequest"--> + <!-- style="font-size: 24px;margin-bottom: 10px;position: relative;width: 200px">--> + <!-- <template #upload-button>--> + <!-- <icon-attachment style="color: #0960bd;position: absolute;top:-50px;left: 20px;z-index: 10000"/>--> + <!-- </template>--> + <!-- </a-upload>--> + <!-- </div>--> + <span style="position: absolute;top:94px;left: 20px;z-index: 999;cursor: pointer"> + <icon-attachment size="28" @click="selectFile" style="color: #0960bd;" /> + <input + ref="fileInput" + type="file" + style="display: none;" + @change="onFileSelected" + /> + </span> + <div class="uploadFileList"> + <div class="files" v-for="(item,index) in uploaditemList" :key="index" + style="position: relative;width: 200px;margin-top: 10px;"> + <a-comment + :author="item.name" + :content="item.size +''" + style="background: var(--color-bg-2);padding:10px;border-radius: 10px" + > + <template #avatar> + <a-spin :loading="onFileSelectedLoading" v-if="onFileSelectedLoading"> + <template #icon> + <icon-sync /> + </template> + </a-spin> +<!-- <a-button type="text" :loading="onFileSelectedLoading" v-if="onFileSelectedLoading"></a-button>--> + <a-avatar v-if="!onFileSelectedLoading"> + <icon-file style="color: #0960bd" /> + </a-avatar> + </template> + </a-comment> + <icon-close-circle-fill size="18px" + @click="deleteFile(item)" + style="position: absolute;right: -4px;top: -4px;color: red;cursor: pointer"/> </div> </div> </div> @@ -136,15 +244,35 @@ </a-col> <a-col :span="23" v-show="agentType == '3'"> <div class="center" style="padding: 0"> - <historySession @querySessionDetail="querySessionDetail" @changeAgentType="changeAgentType"></historySession> + <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> + <smartAi + @createSession="createSession" + @querySessionDetail="querySessionDetail" + @changeAgentType="changeAgentType" + ></smartAi> </div> </a-col> </a-row> + <a-modal v-model:visible="visible" title="淇敼鍚嶇О" @before-open="handleOpened" @cancel="handleCancel" :footer="false" title-align="start"> + <a-form ref="formRef" :rules="rules" :model="chatObj" @submit="handleSubmit" > + <a-form-item field="name" label="鍚嶇О"> + <a-input v-model="agentTitle" placeholder="璇疯緭鍏ュ悕绉�"/> + </a-form-item> + <a-form-item> + <div style="width: 100%;text-align: right"> + <a-button @click="visible = false">鍙栨秷</a-button> + <a-button style="margin-left: 10px" type="primary" html-type="submit">纭畾</a-button> + </div> + </a-form-item> + </a-form> + </a-modal> </div> </template> <script setup lang="ts"> @@ -154,7 +282,16 @@ 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 { + computed, + nextTick, + onMounted, + watch, + reactive, + ref, + onBeforeMount, + onBeforeUnmount +} from "vue"; import { Message } from "@arco-design/web-vue"; import { EventSourceParserStream } from "eventsource-parser/stream"; @@ -164,17 +301,19 @@ 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 setName from "@/views/sessionManager/components/setName.vue"; import EventBus from "@/utils/EventBus"; import { addSessionApi, chatApi, getDialogListApi, getSessionDetailsApi, - sessionListApi + sessionListApi, uploadWithoutKb } from "@/api/session"; import { getAuthorization } from "@/utils/auth"; import { queryCanvasList } from "@/api/Agent"; import { getAgentSessionDetailsApi } from "@/api/agentSession"; +import useClipboard from "vue-clipboard3"; const sessionDetailList = ref([]); //鏍规嵁浼氳瘽id鍑烘潵鐨勪細璇濊鎯� const sessionList = ref([]); //浼氳瘽鍒楄〃 @@ -184,7 +323,8 @@ const loading = ref(false); const agentType = ref("1"); const agentTitle = ref("鏈懡鍚嶄細璇�"); - +let chatObj = reactive({}); +const isStopChat = ref(false); const currIndex = ref(0); const displayedText = ref(""); // 姝e湪鏄剧ず鐨勬枃瀛� let timer: number | null = null; @@ -198,6 +338,132 @@ const agentList = ref([]); const selectValue = ref(""); const sectionList = ref({}); +const uploadList = ref([]); +const uploaditemList = ref([]); +const uploadRef = ref(); +const files = ref([]); +const file = ref(''); +const fileInput = ref(null); +const chatDataMeg = reactive({}) +const visible = ref(false); + + + +const rules = { + name: [ + { + required: true, + message:'鍚嶇О涓嶅厑璁镐负绌�', + }, + ], +} + +const handleSubmit = async({values, errors}) => { + if(errors) return; + // chatObj.name = agentTitle.value; + // chatObj.conversation_id = chatObj.id; + let chatData = { + id:chatObj.id, + conversation_id:chatObj.id, + name: agentTitle.value + } + const { code, data } = await addSessionApi(chatData); + if (data) { + Message.success("淇敼鎴愬姛"); + handleCancel() + queryNewSessionDetail(activeSessionId.value); + } +} + +const handleClick = () => { + visible.value = true; +}; +const handleCancel = () => { + visible.value = false; +} + +const handleOpened =(el) => { + // Object.assign(form,{ + // name: '',// 鐢ㄦ埛鍚� + // }); + // formRef.value.resetFields(); +} + + + + + +const selectFile = () => { + fileInput.value.click(); +}; + + +let onFileSelectedLoading = ref(false); +const onFileSelected = (event) => { + const file = event.target.files[0]; + uploaditemList.value = [{ + name: file.name, + size: file.size, + }]; + if (file) { + onFileSelectedLoading.value = true; + const formData = new FormData(); + formData.append("file", file); + formData.append("conversation_id", activeSessionId.value); + uploadWithoutKb(formData).then((res) => { + // console.log(res); + if (res.code == 200) { + console.log(res); + console.log(uploaditemList.value); + onFileSelectedLoading.value = false; + fileInput.value.value = ""; + uploaditemList.value = []; + Message.success("涓婁紶鎴愬姛"); + } else { + Message.error("涓婁紶澶辫触"); + } + }); + } +}; + +const deleteFile = (item) => { + console.log(uploaditemList.value); + uploaditemList.value = []; +}; + +const { toClipboard } = useClipboard(); +const copy = async (text) => { + await toClipboard(text); //鍙傛暟涓鸿澶嶅埗鐨勬枃鏈� +}; + +const onChange = (fileList) => { + // files.value = fileList; +}; + +// 涓婁紶鏂囦欢 +const customRequest = async (option) => { + const { onProgress, onError, onSuccess, fileItem, name } = option; + fileItem.status = "ready"; + if (fileItem.file) { + const formData = new FormData(); + formData.append("file", fileItem.file); + formData.append("conversation_id", activeSessionId.value); + uploadWithoutKb(formData).then((res) => { + // console.log(res); + if (res.code == 200) { + console.log(res); + console.log(uploadList.value); + fileItem.status = "done"; + // uploadList.value = []; + } else { + fileItem.status = "error"; + } + }); + } + +}; + + const DialogList = async () => { const { code, data } = await getDialogListApi(); if (code === 200) { @@ -236,19 +502,15 @@ // } //鏂板缓浼氳瘽 createSession(dialogs.value[0].id); - - } catch (err) { // you can report use errorHandler or other } finally { } }; // 鏂板缓浼氳瘽 -const createSession = async (id,name='鏈懡鍚嶄細璇�') => { +const createSession = async (id, name = "鏈懡鍚嶄細璇�") => { // 濡傛灉鏈変細璇漣d - console.log(name, '鏂板缓浼氳瘽鍚嶇О'); - - + console.log(name, "鏂板缓浼氳瘽鍚嶇О"); const res = await addSessionApi({ dialog_id: id, @@ -262,9 +524,7 @@ } else { Message.error("鍒涘缓浼氳瘽澶辫触锛岃閲嶈瘯"); } - }; - const handleShiftEnter = (event) => { event.preventDefault(); @@ -281,18 +541,26 @@ }); console.log(dialogObj.type, "dialogObj"); if (dialogObj.type == 1) { - agentType.value = 1; + agentType.value = "1"; querySessionList(); } else { - agentType.value = 2; + agentType.value = "2"; queryAgentSessionList(); } // querySessionList(); }; + +// 鍙戦�� const sentClick = () => { sendMessage("click"); }; +// 閲嶆柊鐢熸垚 +const reGenerate = () => { + let inputContent = sessionDetailList.value[sessionDetailList.value.length - 2].content; + startChat(inputContent); +}; + const sendMessage = async (event) => { if (event.keyCode == 13 || event === "click") { if (!event.shiftKey) { @@ -301,99 +569,160 @@ event.preventDefault(); // 闃绘榛樿琛屼负锛屽嵆涓嶆崲琛� } - chatDis.value = true; - loading.value = true; - if (!activeSessionId.value) { - Message.warning("璇烽�夋嫨浼氳瘽"); - chatDis.value = false; - loading.value = false; - return; - } + + // if (!activeSessionId.value) { + // Message.warning("璇烽�夋嫨浼氳瘽"); + // chatDis.value = false; + // loading.value = false; + // return; + // } // 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); - } - if (done) { - console.info("done"); - displayedText.value = ""; - queryNewSessionDetail(activeSessionId.value); - EventBus.emit('queryAppUsageList'); - break; - } - } - } - // querySessionList(); - chatDis.value = false; - loading.value = false; + startChat(inputMsg.value); + inputMsg.value = ""; } else { Message.warning("娑堟伅涓嶈兘涓虹┖"); - chatDis.value = false; - loading.value = false; } } } }; + +const startChat = async (valMsg) => { + chatDis.value = true; + loading.value = true; + sessionDetailList.value.push({ + content: valMsg, + 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: valMsg + }) + } + ); + + 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 = ""; + if(isStopChat.value){ + setChatDataMeg(chatDataMeg); + }else{ + queryNewSessionDetail(activeSessionId.value); + EventBus.emit("queryAppUsageList"); + } + break; + } + } + } + // querySessionList(); + chatDis.value = false; + loading.value = false; +}; + + + +const stopChat = async () => { + // const { code, data } = await stopChatApi(activeSessionId.value); + // if (code === 200) { + // Message.success("宸插仠姝�"); + // queryNewSessionDetail(activeSessionId.value); + // } + loading.value = false; + chatDis.value = false; + isStopChat.value = true; + console.log("stopChat"); + console.log(displayedText.value, "displayedText"); + console.log(sessionDetailList.value, "sessionDetailList"); + let inputText = sessionDetailList.value[sessionDetailList.value.length - 2].content; + // 鏁扮粍鍚堝苟 + let lastArr = [{ + content: inputText, + role: "user" + }, { + content: displayedText.value, + role: "assistant" + }]; + sessionDetailList.value = sessionDetailList.value.splice(0, sessionDetailList.value.length - 2).concat(lastArr); + + console.log(sessionDetailList.value, "sessionDetailList2"); + console.log(chatObj, "chatObj瀵硅薄"); + chatObj.message = chatObj.message.concat(lastArr); + Object.assign(chatDataMeg,{ + id:chatObj.id, + conversation_id:chatObj.id, + message: sessionDetailList.value + }); + +}; + +const setChatDataMeg = async(chatData) => { + const { code, data } = await addSessionApi(chatData); + if (data) { + //鍋滄瀹氭椂鍣� + clearTimeout(timer!); + timer = null; + // displayedText.value = ""; + queryNewSessionDetail(activeSessionId.value); + } +}; + + + const queryNewSessionDetail = async (id) => { activeSessionId.value = id; const { code, data } = await getSessionDetailsApi(id); if (code === 200) { console.log(data, "鏂板缓浼氳瘽璇︽儏"); + Object.assign(chatObj, data); sessionDetailList.value = data.message; agentTitle.value = data.name; refreshScroll(); //鍒锋柊婊氬姩鏉′綅缃� + isStopChat.value = false; } }; -const changeAgentType = (val,session) => { +const changeAgentType = (val, session) => { agentType.value = val; console.log(val, "val"); -} +}; const querySessionDetail = async (session) => { sectionList.value = session; @@ -449,12 +778,12 @@ onBeforeMount(() => { // DialogList(); //鏂板缓浼氳瘽 - createSession(''); + createSession(""); }); onMounted(() => { EventBus.on("newChat", () => { - agentType.value = 1; - createSession(''); + agentType.value = "1"; + createSession(""); }); }); onBeforeUnmount(() => { @@ -522,8 +851,8 @@ .left { /* height: calc(100vh - 160px); - overflow-y: auto; - overflow-x: hidden;*/ + overflow-y: auto; + overflow-x: hidden;*/ border: 0px; .left-list { @@ -639,14 +968,17 @@ } .chat_bottom { - display: flex; - align-items: center; + //display: flex; + //align-items: center; + width: 78%; + margin: 0 auto; + position: relative; .center-bottom { - // position: absolute; - // width: 90%; - // bottom: 20px; - // left: 5%; + //position: absolute; + //width: 100%; + //bottom: 20px; + //left: 5%; background: #fff; border: 1px solid #00000014; border-radius: 24px; @@ -662,8 +994,8 @@ .btn-send { position: absolute !important; - right: 10px; - bottom: 10px; + right: 4px; + top: 90px; z-index: 10; } @@ -746,6 +1078,7 @@ } } } + .header___lEPyH { width: 100%; height: 46px; @@ -755,6 +1088,7 @@ align-items: center; justify-content: center; -webkit-backdrop-filter: blur(15px); + .chatHeaderBox { width: auto; border-radius: 8px; @@ -762,14 +1096,36 @@ transition: all var(--animation-duration) var(--animation-transition); display: flex; align-items: flex-end; - overflow: hidden; /* 闅愯棌瓒呭嚭鐨勫唴瀹� */ + overflow: hidden; /* 闅愯棌瓒呭嚭鐨勫唴瀹� */ text-overflow: ellipsis; /* 浣跨敤鐪佺暐鍙锋潵浠f浛琚殣钘忕殑鏂囧瓧 */ - white-space: nowrap; /* 涓嶆崲琛岋紝浣垮唴瀹瑰湪涓�琛屽唴鏄剧ず */ + white-space: nowrap; /* 涓嶆崲琛岋紝浣垮唴瀹瑰湪涓�琛屽唴鏄剧ず */ max-width: 200px; - .title{ + + .title { color: var(--color-text-1); font-size: 12px; } } } + +.action { + cursor: pointer; + display: inline-block; + padding: 0 10px; + color: var(--color-text-1); + line-height: 24px; + background: transparent; + border-radius: 2px; + cursor: pointer; + transition: all 0.1s ease; + font-size: 12px; +} + +.action:hover { + background: var(--color-fill-3); +} + +:deep(.arco-upload-list-item-operation) { + //display: none; +} </style> -- Gitblit v1.8.0