From ddfd2c45dea517f5330a2da02bba253479fe0fe0 Mon Sep 17 00:00:00 2001 From: zhangxiao <898441624@qq.com> Date: 星期五, 23 八月 2024 19:24:06 +0800 Subject: [PATCH] fix: 权限 --- src/views/sessionManager/index.vue | 683 +++++++++++++++++++++++++++++++++++++++++++++++++------- 1 files changed, 592 insertions(+), 91 deletions(-) diff --git a/src/views/sessionManager/index.vue b/src/views/sessionManager/index.vue index d2a6492..3404ffb 100644 --- a/src/views/sessionManager/index.vue +++ b/src/views/sessionManager/index.vue @@ -20,7 +20,28 @@ <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> @@ -29,13 +50,16 @@ 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 @@ -59,13 +83,67 @@ /> </template> <template #content> - <a-card :class="{ chatItemAnswer: theme === 'light' }"> - <div - :class="{ light: theme === 'light' }" - v-html="sessionDetail.content.replace(/\n/g, '<br/>')" - > + <!-- <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> + <!-- <div>{{ sessionDetail.role === 'assistant' }}</div> --> + <template #actions> + <!-- <div + v-for="(item, leng) in messagenList.reference" + :key="leng" + > --> + <div> + <div> + <template + v-for="(v, lix) in getTxt( + messagenList.reference, + sessionDetail.role, + sessionDetail.content, + index + )" + :key="lix" + > + <div class="icon-box" @click="clickHref(v)"> + <div> + <img :src="getIconByExtension(v.doc_name)" alt="" /> + </div> + <div class="icon-text"> {{ v.doc_name }} </div> + </div> + </template> </div> - </a-card> + </div> + + <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'"> @@ -82,8 +160,34 @@ 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="icon-box"> + <div> + <img :src="getIconByExtension('pdf')" alt="" /> + </div> + <div class="icon-text"> 鏂囦欢绫诲瀷 </div> + </div> --> + <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> @@ -92,6 +196,7 @@ > <div class="chartStart v-else" @click="stopChat">閲嶆柊鐢熸垚</div> --> </a-scrollbar> + <div class="chat_bottom"> <div class="center-bottom"> <!-- <a-textarea @@ -113,22 +218,104 @@ 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" - >鍙戦�� + > + <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> @@ -157,6 +344,36 @@ </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"> @@ -185,6 +402,7 @@ 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, @@ -192,12 +410,22 @@ getDialogListApi, getSessionDetailsApi, 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'; + import pdfImg1 from '@/assets/session/PDF.png'; + import pdfImg2 from '@/assets/session/wps-write.png'; + import pdfImg3 from '@/assets/session/execl.png'; + import pdfImg4 from '@/assets/session/icon-txt.png'; + import pdfImg5 from '@/assets/session/txt.png'; + + // const url = ref('../../assets/session/PDF.png'); const sessionDetailList = ref([]); //鏍规嵁浼氳瘽id鍑烘潵鐨勪細璇濊鎯� + const messagenList = ref({}); const sessionList = ref([]); //浼氳瘽鍒楄〃 const modalObj = reactive({ add: false }); const dialogId = ref(''); @@ -205,7 +433,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; @@ -219,6 +448,167 @@ 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); + } + }; + let dataItem = []; + const getTxt = (data, role, message, index) => { + if (/##0\$\$/.test(message)) { + if (role == 'assistant' && index) { + data.forEach((item) => { + if (Object.keys(item).length !== 0 && item?.doc_aggs.length > 0) { + dataItem = item.doc_aggs; + } + }); + } + } else { + dataItem = []; + } + + return dataItem; + }; + + const clickHref = (item) => { + // return Message.warning('鏆傛棤娉曟煡鐪�'); + window.open(`/api/v1/document/show/${item.doc_id}`, '_blank'); + }; + + const getIconByExtension = computed(() => (extension) => { + const fileExtension = ref(''); + fileExtension.value = extension.split('.').pop(); + switch (fileExtension.value) { + case 'pptx': + case 'ppt': + case 'pdf': + return pdfImg1; // PDF鍥炬爣鐨刄RL + case 'docx': + case 'doc': + return pdfImg2; // Word鍥炬爣鐨刄RL + case 'xlsx': + case 'xls': + return pdfImg3; // Excel鍥炬爣鐨刄RL + case 'txt': + return pdfImg4; // 鏂囨湰鏂囨。鍥炬爣鐨刄RL + default: + return pdfImg5; // 榛樿鍥炬爣 + } + }); + + 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) { @@ -296,18 +686,27 @@ }); 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) { @@ -316,81 +715,138 @@ 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, - }), - } - ); + startChat(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; 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); } }; @@ -399,9 +855,12 @@ const { code, data } = await getSessionDetailsApi(id); if (code === 200) { console.log(data, '鏂板缓浼氳瘽璇︽儏'); + Object.assign(chatObj, data); sessionDetailList.value = data.message; + messagenList.value = data; agentTitle.value = data.name; refreshScroll(); //鍒锋柊婊氬姩鏉′綅缃� + isStopChat.value = false; } }; @@ -416,6 +875,7 @@ const { code, data } = await getSessionDetailsApi(session.id); if (code === 200) { sessionDetailList.value = data.message; + messagenList.value = data; refreshScroll(); //鍒锋柊婊氬姩鏉′綅缃� } }; @@ -468,7 +928,7 @@ }); onMounted(() => { EventBus.on('newChat', () => { - agentType.value = 1; + agentType.value = '1'; createSession(''); }); }); @@ -537,8 +997,8 @@ .left { /* height: calc(100vh - 160px); - overflow-y: auto; - overflow-x: hidden;*/ + overflow-y: auto; + overflow-x: hidden;*/ border: 0px; .left-list { @@ -654,14 +1114,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; @@ -677,8 +1140,8 @@ .btn-send { position: absolute !important; - right: 10px; - bottom: 10px; + right: 4px; + top: 90px; z-index: 10; } @@ -706,6 +1169,20 @@ .icon-user-jpg { border: 1px solid #d9d9d9; + } + .icon-box { + display: flex; + align-items: center; + box-sizing: border-box; + background: var(--color-bg-1); + border: 1px solid var(--color-border-2); + padding: 10px; + border-radius: 14px; + min-width: 200px; + cursor: pointer; + .icon-text { + margin-left: 10px; + } } } @@ -761,6 +1238,7 @@ } } } + .header___lEPyH { width: 100%; height: 46px; @@ -770,6 +1248,7 @@ align-items: center; justify-content: center; -webkit-backdrop-filter: blur(15px); + .chatHeaderBox { width: auto; border-radius: 8px; @@ -781,10 +1260,32 @@ text-overflow: ellipsis; /* 浣跨敤鐪佺暐鍙锋潵浠f浛琚殣钘忕殑鏂囧瓧 */ white-space: nowrap; /* 涓嶆崲琛岋紝浣垮唴瀹瑰湪涓�琛屽唴鏄剧ず */ max-width: 200px; + .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