From cd8ea3d115de633ecf0f65febe51013e762ecb8f Mon Sep 17 00:00:00 2001 From: liudong <liudong> Date: 星期六, 24 八月 2024 13:13:30 +0800 Subject: [PATCH] 多文件上传解析方法修改 --- src/views/sessionManager/index.vue | 669 ++++++++++++++++++++++++++++++++++++++++++++++--------- 1 files changed, 554 insertions(+), 115 deletions(-) diff --git a/src/views/sessionManager/index.vue b/src/views/sessionManager/index.vue index d2a6492..a7b426d 100644 --- a/src/views/sessionManager/index.vue +++ b/src/views/sessionManager/index.vue @@ -1,5 +1,5 @@ <template> - <div class="container"> + <div class="container" id="container"> <!-- <AddSession--> <!-- :modalObj="modalObj"--> <!-- @addSession="addSession"--> @@ -20,7 +20,34 @@ <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 + > + <span style=" + width: 100px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + ">{{ from.name }}</span> + <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 +56,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 +89,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 +166,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 +202,7 @@ > <div class="chartStart v-else" @click="stopChat">閲嶆柊鐢熸垚</div> --> </a-scrollbar> + <div class="chat_bottom"> <div class="center-bottom"> <!-- <a-textarea @@ -113,22 +224,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" /> --> + <div style="width: 100%;display: flex;justify-content: space-between"> + <updataFile ref="fileInput" :sessionId="activeSessionId" @selectFileCallback="selectFileCallback"></updataFile> <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 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; + font-size: 12px; + " + > + <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,14 +317,39 @@ </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="from" + @submit="handleSubmit" + > + <a-form-item field="name" label="鍚嶇О"> + <a-input v-model="from.name" 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"> - import { - IconClose, - IconSearch, - IconTiktokColor, - } from '@arco-design/web-vue/es/icon'; import { useAppStore, useUserStore } from '@/store'; import { computed, @@ -185,6 +370,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 updataFile from '@/views/sessionManager/components/updataFile.vue'; import EventBus from '@/utils/EventBus'; import { addSessionApi, @@ -192,12 +378,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 +401,11 @@ const loading = ref(false); const agentType = ref('1'); const agentTitle = ref('鏈懡鍚嶄細璇�'); - + let chatObj = reactive({}); + let from = reactive({ + name:'鏈懡鍚嶄細璇�', + }); + const isStopChat = ref(false); const currIndex = ref(0); const displayedText = ref(''); // 姝e湪鏄剧ず鐨勬枃瀛� let timer: number | null = null; @@ -219,6 +419,140 @@ 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); + let toStop = false; + + const rules = { + name: [ + { + required: true, + message: '鍚嶇О涓嶅厑璁镐负绌�', + }, + ], + }; + + const handleSubmit = async ({ values, errors }) => { + if (errors) return; + let chatData = { + id: chatObj.id, + conversation_id: chatObj.id, + name: from.name, + }; + const { code, data } = await addSessionApi(chatData); + if (data) { + Message.success('淇敼鎴愬姛'); + handleCancel(); + queryNewSessionDetail(activeSessionId.value); + } + }; + let dataItem = []; + const getTxt = (data, role, message, index) => { + if (/##[0-9]\$\$/.test(message)) { + if (role == 'assistant' && index) { + let i = index / 2 - 1 > 0 ? index / 2 - 1 : 0; + dataItem = data[i].doc_aggs; + } + } else { + dataItem = []; + } + + return dataItem; + }; + + const clickHref = (item) => { + // return Message.warning('鏆傛棤娉曟煡鐪�'); + // window.open(`/api/v1/document/get/${item.doc_id}`, '_blank'); + downloadFile({ + url: `/api/v1/document/get/${item.doc_id}`, + filename: item.doc_name, + }); + }; + + const downloadFile = ({ + url, + filename, + target, + }: { + url: string; + filename?: string; + target?: string; + }) => { + const downloadElement = document.createElement('a'); + downloadElement.style.display = 'none'; + downloadElement.href = url; + if (target) { + downloadElement.target = '_blank'; + } + downloadElement.rel = 'noopener noreferrer'; + if (filename) { + downloadElement.download = filename; + } + document.body.appendChild(downloadElement); + downloadElement.click(); + document.body.removeChild(downloadElement); + }; + + 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 selectFileCallback = (data) => { + console.log(data, 'selectFileCallback'); + uploaditemList.value = data; + }; + + let onFileSelectedLoading = ref(false); + + const deleteFile = (item) => { + console.log(uploaditemList.value); + uploaditemList.value = []; + }; + + const { toClipboard } = useClipboard(); + const copy = async (text) => { + await toClipboard(text); //鍙傛暟涓鸿澶嶅埗鐨勬枃鏈� + }; + + + const DialogList = async () => { const { code, data } = await getDialogListApi(); if (code === 200) { @@ -285,29 +619,18 @@ event.preventDefault(); inputMsg.value += '\n'; }; - const dialogChange = (val) => { - // 鍒ゆ柇褰撳墠鏄櫤鑳戒綋鎴朼gent - // console.log(val, 'val'); - dialogId.value = val; - dialogs.value.forEach((item) => { - if (item.id === val) { - Object.assign(dialogObj, item); - } - }); - console.log(dialogObj.type, 'dialogObj'); - if (dialogObj.type == 1) { - agentType.value = 1; - querySessionList(); - } else { - 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 +639,145 @@ 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; + toStop = false; + 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) { + if (toStop) { + displayedText.value = ''; + setChatDataMeg(chatDataMeg); + break; + } + 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; + toStop = 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 +786,13 @@ 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; + from.name = data.name; refreshScroll(); //鍒锋柊婊氬姩鏉′綅缃� + isStopChat.value = false; } }; @@ -413,9 +804,11 @@ const querySessionDetail = async (session) => { sectionList.value = session; activeSessionId.value = session.id; + from.name = session.name; const { code, data } = await getSessionDetailsApi(session.id); if (code === 200) { sessionDetailList.value = data.message; + messagenList.value = data; refreshScroll(); //鍒锋柊婊氬姩鏉′綅缃� } }; @@ -467,8 +860,13 @@ createSession(''); }); onMounted(() => { + let container = document.getElementById('container'); + container.addEventListener('click', () => { + fileInput.value.cancel(); + + }) EventBus.on('newChat', () => { - agentType.value = 1; + agentType.value = '1'; createSession(''); }); }); @@ -537,8 +935,8 @@ .left { /* height: calc(100vh - 160px); - overflow-y: auto; - overflow-x: hidden;*/ + overflow-y: auto; + overflow-x: hidden;*/ border: 0px; .left-list { @@ -654,14 +1052,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 +1078,8 @@ .btn-send { position: absolute !important; - right: 10px; - bottom: 10px; + right: 4px; + top: 90px; z-index: 10; } @@ -706,6 +1107,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 +1176,7 @@ } } } + .header___lEPyH { width: 100%; height: 46px; @@ -770,6 +1186,7 @@ align-items: center; justify-content: center; -webkit-backdrop-filter: blur(15px); + .chatHeaderBox { width: auto; border-radius: 8px; @@ -781,10 +1198,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