From d50a7bc02d89e14beeab83a28f0d3677dbd9f0ef Mon Sep 17 00:00:00 2001 From: zhangxiao <898441624@qq.com> Date: 星期五, 30 八月 2024 14:31:50 +0800 Subject: [PATCH] fix: 修改bug --- src/views/sessionManager/components/seniorAgentSession.vue | 516 +++++++++++++++++++++++++++++++++++++++++++++++++-------- 1 files changed, 442 insertions(+), 74 deletions(-) diff --git a/src/views/sessionManager/components/seniorAgentSession.vue b/src/views/sessionManager/components/seniorAgentSession.vue index 93e6d89..91014f6 100644 --- a/src/views/sessionManager/components/seniorAgentSession.vue +++ b/src/views/sessionManager/components/seniorAgentSession.vue @@ -37,17 +37,17 @@ </div> <a-scrollbar ref="scrollbar" - id="agentHome" + id="chatAgentHome" class="chat-list" style=" width: 80%; overflow: auto; - height: calc(100vh - 380px); + height: calc(100vh - 400px); margin: 0px auto 20px; " > <div class="chat-item" v-for="(sessionDetail, index) in sessionDetailList"> - <a-comment v-if="sessionDetail.role === 'user'"> + <a-comment v-if="sessionDetail?.role === 'user'"> <template #avatar> <img class="icon-user-jpg" @@ -59,9 +59,25 @@ <div :class="{ chartUserText: theme === 'light' }" >{{ sessionDetail.content }} </div> + + <!-- <div class="uploadFileList fileList"> + <a-comment + content="232323" + style=" + background: var(--color-bg-2); + padding: 10px; + border-radius: 10px; + font-size: 12px; + " + > + <template #avatar> + <img :src="getIconByExtension('wps')" alt="" /> + </template> + </a-comment> + </div> --> </template> </a-comment> - <a-comment v-else-if="sessionDetail.role === 'assistant'"> + <a-comment v-else-if="sessionDetail?.role === 'assistant'"> <template #avatar> <img class="icon-user-jpg" @@ -76,6 +92,7 @@ <!-- </div>--> <!-- </a-card>--> <a-textarea + v-if="sessionDetail?.content" readonly auto-size v-model="sessionDetail.content" @@ -86,6 +103,65 @@ style="border: none" > </a-textarea> + <div v-else> + <!-- <a-textarea + readonly + auto-size + :default-value="chartText(sessionDetail.code, sessionDetail.sql)" + :class="{ chatItemAnswer: theme === 'light' }" + :style="{ + backgroundColor: theme === 'light' ? '#ffffff' : '#000000', + }" + style="border: none" + > + </a-textarea> --> + <!-- <codemirror + v-model="sessionDetail.code" + placeholder="Code gose here..." + :style="{ height: '100%' }" + :autofocus="true" + :tabSize="2" + /> --> + <div class="codeStle"> + <div class="language">python</div> + <pre + style=" + background: #2c2c36; + padding: 10px; + margin-top: 0; + margin-bottom: 0; + " + ><code class="language-js line-numbers">{{ sessionDetail.code}}</code></pre> + <div class="language">SQL</div> + <pre + style="background: #2c2c36; padding: 10px; margin-top: 0" + ><code class="language-js line-numbers">{{sessionDetail.sql}}</code></pre> + </div> + + <a-image + v-if="sessionDetail?.image_name" + :src="getImg(sessionDetail)" + alt="" + /> + <div + class="uploadFileList fileList" + v-if="sessionDetail?.excel_name" + > + <a-comment + :content="sessionDetail.excel_name" + style=" + background: var(--color-bg-2); + padding: 10px; + border-radius: 10px; + font-size: 12px; + " + > + <template #avatar> + <img :src="getIconByExtension('xlsx')" alt="" /> + </template> + </a-comment> + </div> + </div> <div class="prompt" v-if="!activeSessionId"> <ul> <li @@ -103,12 +179,25 @@ </li> </ul> </div> + <div> + <!-- <a-image + width="200" + src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp" + /> --> + </div> </template> <template #actions> <span class="action" - v-if="index != 0" + v-if="index != 0 && sessionDetail?.content" @click="copy(sessionDetail.content)" + > + <icon-copy /> 澶嶅埗 + </span> + <span + class="action" + v-if="index != 0 && sessionDetail?.code" + @click="copy(sessionDetail.code + sessionDetail.sql)" > <icon-copy /> 澶嶅埗 </span> @@ -125,9 +214,15 @@ @click="iconDownload(sessionDetail)" ><icon-to-bottom />涓嬭浇 </span> + <span + class="action" + v-if="sessionDetail?.excel_name" + @click="iconDownloadXsl(sessionDetail)" + ><icon-to-bottom />涓嬭浇 + </span> </template> </a-comment> - <a-comment v-else-if="sessionDetail.role === 'last'"> + <a-comment v-else-if="sessionDetail?.role === 'last'"> <template #avatar> <img class="icon-user-jpg" @@ -136,17 +231,19 @@ /> </template> <template #content> - <a-textarea - readonly - auto-size - v-model="displayedText" - :class="{ chatItemAnswer: theme === 'light' }" - :style="{ - backgroundColor: theme === 'light' ? '#ffffff' : '#000000', - }" - style="border: none" - > - </a-textarea> + <a-spin :loading="loading" dot style="width: 100%"> + <a-textarea + readonly + auto-size + v-model="displayedText" + :class="{ chatItemAnswer: theme === 'light' }" + :style="{ + backgroundColor: theme === 'light' ? '#ffffff' : '#000000', + }" + style="border: none" + > + </a-textarea> + </a-spin> </template> <template #actions> <div @@ -187,8 +284,23 @@ maxRows: 5, }" /> - <div style="width: 100%; display: flex; justify-content: space-between"> - <span></span> + <div + style="width: 100%; display: flex; justify-content: space-between" + class="uploadFileDis" + > + <!-- <updataFile + ref="fileInput" + :sessionId="activeSessionId" + @selectFileCallback="selectFileCallback" + ></updataFile> --> + <span v-if="getAent"></span> + <uploadFile + v-if="!getAent" + ref="fileInput" + :sessionId="activeSessionId" + :handleRemove="handleRemove" + @selectFileCallback="selectFileCallback" + ></uploadFile> <a-button :disabled="chatDis" @click="sentClick" @@ -199,6 +311,7 @@ <icon-send size="32" style="color: #0960bd" /> </a-button> </div> + <!-- <div class="btn-send">--> <!-- <!– <icon-send size="32" /> –>--> <!-- <a-button--> @@ -212,6 +325,61 @@ <!-- </a-button--> <!-- >--> <!-- </div>--> + </div> + <div class="uploadFileList" v-if="uploaditemList.length > 0"> + <div + class="files" + v-for="(item, index) in uploaditemList" + :key="index" + style=" + position: relative; + width: 220px; + margin-top: 10px; + margin-right: 20px; + " + > + <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="item.onFileSelectedLoading" + v-if="item.onFileSelectedLoading" + > + <template #icon> + <icon-sync /> + </template> + <template #tip> + <div style="font-size: 12px">{{ item.textName }}</div> + </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>--> + <img :src="getIconByExtension(item.name)" alt="" /> + <div style="font-size: 12px">{{ item.textName }}</div> + </template> + </a-comment> + <icon-close-circle-fill + size="18px" + @click="deleteFile(item, index)" + style=" + position: absolute; + right: -4px; + top: -4px; + color: red; + cursor: pointer; + " + /> + </div> </div> <a-modal v-model:visible="visible" @@ -256,6 +424,8 @@ import { Message } from '@arco-design/web-vue'; import { useAppStore } from '@/store'; import { getAuthorization } from '@/utils/auth'; + import updataFile from './updataFile.vue'; + import uploadFile from './uploadFile.vue'; import { EventSourceParserStream } from 'eventsource-parser/stream'; import { agentResetApi, @@ -264,13 +434,30 @@ agentConversationSetApi, agentConverDownloadApi, downloadFile, + agentUploadApi, } from '@/api/agentSession'; import EventBus from '@/utils/EventBus'; import useClipboard from 'vue-clipboard3'; import { addSessionApi, getSessionDetailsApi } from '@/api/session'; + 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'; + import tipImage from '@/assets/session/tip.png'; + import { userModelState } from '@/store'; + // import { Codemirror } from 'vue-codemirror'; + // import { javascript } from '@codemirror/lang-javascript'; + // import { oneDark } from '@codemirror/theme-one-dark'; + + import Prism from 'prismjs'; //瀵煎叆浠g爜楂樹寒鎻掍欢鐨刢ore锛堥噷闈㈡彁渚涗簡鍏朵粬瀹樻柟鎻掍欢鍙婁唬鐮侀珮浜牱寮忎富棰橈紝浣犲彧闇�瑕佸紩鍏ュ嵆鍙級 + import 'prismjs/themes/prism-tomorrow.min.css'; //寮曞叆浠g爜楂樹寒涓婚锛堣繖涓幓node_modules鐨勫畨瑁卲rismjs涓壘鍒版兂浣跨敤鐨勪富棰樺嵆鍙級 + const props = defineProps({ modalObj: Object, }); + + const modelStore = userModelState(); // const emit = defineEmits(['addSession']); @@ -280,6 +467,7 @@ role: 'assistant', }, ]); //鏍规嵁浼氳瘽id鍑烘潵鐨勪細璇濊鎯� + const httpUrl = modelStore.hrefUrl; const sessionList = ref([]); //浼氳瘽鍒楄〃 const modalObj = reactive({}); const dialogId = ref(''); @@ -296,6 +484,8 @@ const conversation_id = ref(''); const fieldNames = { value: 'id', label: 'name' }; const agentObj = reactive({}); + const dialog_id = ref(''); + const getAent = ref(false); const agentList = ref([]); const selectValue = ref(''); const sectionList = ref({}); @@ -303,7 +493,9 @@ const isStopChat = ref(false); const appStore = useAppStore(); const sessionObj = reactive({}); + const uploaditemList = ref([]); const prompts = ref([]); + const theme = computed(() => { return appStore.theme; }); @@ -369,11 +561,14 @@ prompts.value = session.prompts; activeSessionId.value = ''; + uploaditemList.value = []; + console.log(12123); + getAentId(session.id); Object.assign(agentObj, session); from.name = session.name; const dataSession = session.prompt_config; - if (dataSession.prologue) { + if (dataSession?.prologue) { sessionDetailList.value[0].content = dataSession.prologue; } @@ -415,6 +610,7 @@ id: agentObj.id, }), }); + refreshScroll(); const reader = response?.body ?.pipeThrough(new TextDecoderStream()) @@ -431,7 +627,11 @@ const d = val?.data; if (typeof d !== 'boolean') { console.info('data:', d); - streamStr.value = d.content; + if (d?.content) { + streamStr.value = d.content; + } else { + streamStr.value = d.code + d.sql; + } startDisplayStr(); } } catch (e) { @@ -448,7 +648,29 @@ chatDis.value = false; loading.value = false; inputMsg.value = ''; + uploaditemList.value = []; }; + + //娓叉煋鏂囧瓧 + const chartText = (val, sql) => { + console.log(val + sql, 77); + return val + '\n' + sql; + }; + + //鑾峰彇鍥剧墖鍦板潃 + const getImg = (val) => { + const id = val?.image_name; + + if (id) { + return ( + httpUrl + + '/api/v1/advanced-agent/download?file_id=' + + id + + '&app_id=excel_talk&file_type=image' + ); + } + }; + // 璋冪敤get鏂规硶 const queryAgentSessionDetails = async (id) => { const { code, data } = await getSessionDetailsApi(id); @@ -459,6 +681,7 @@ // nextTick(() => { // sessionDetailList.value = data.dsl.messages; // }); + sessionDetailList.value = data.message; agentTitle.value = `${data.name}` || '鏈懡鍚嶄細璇�'; @@ -471,10 +694,23 @@ inputMsg.value = text; }; + const getAentId = (id) => { + if (id == 'excel_talk') { + getAent.value = false; + } + if (id == 'questions_talk') { + getAent.value = true; + } + }; + // 鍘嗗彶璁板綍璺宠浆鑾峰彇agent浼氳瘽璇︽儏 const querySessionDetail = async (session) => { conversation_id.value = session.id; activeSessionId.value = session.id; + dialog_id.value = session.dialog_id; + + uploaditemList.value = []; + getAentId(session.dialog_id); from.name = session.name; const { code, data } = await getSessionDetailsApi(session.id); @@ -498,6 +734,8 @@ const sentClick = () => { sendMessage('click'); + + uploaditemList.value = []; }; // 閲嶆柊鐢熸垚 @@ -515,44 +753,9 @@ event.preventDefault(); // 闃绘榛樿琛屼负锛屽嵆涓嶆崲琛� } - // chatDis.value = true; - // loading.value = true; - // if (!agentObj.id) { - // Message.warning('璇烽�夋嫨浼氳瘽'); - // chatDis.value = false; - // loading.value = false; - // return; - // } - - // if (displayedText.value) { - // querySessionList(); - // } - if (inputMsg.value) { - // const res = await addSessionApi({ - // dialog_id: '', - // conversation_desc: inputMsg.value, - // }); - // // console.log(res, "res"); - // if (res.code == 200) { - // // console.log(res.data.conversation_id); - // activeSessionId.value = res.data?.conversation_id; - // const { code, data } = await getSessionDetailsApi( - // res.data?.conversation_id - // ); - // if (code === 200) { - // console.log(data, '鏂板缓浼氳瘽璇︽儏'); - // Object.assign(chatObj, data); - // startChat(inputMsg.value); - // inputMsg.value = ''; - // } - // } else { - // Message.error('鍒涘缓浼氳瘽澶辫触锛岃閲嶈瘯'); - // } - - // startChat(inputMsg.value); - // inputMsg.value = ''; - createSession(); + createSession(''); + uploaditemList.value = []; } else { Message.warning('娑堟伅涓嶈兘涓虹┖'); chatDis.value = false; @@ -562,10 +765,15 @@ } }; //鍒涘缓浼氳瘽 - const createSession = async () => { + const createSession = async (val) => { try { loading.value = true; chatDis.value = true; + let name = inputMsg.value; + + if (val) { + name = val[0].name.split('.')[0]; + } if (!activeSessionId.value) { let message = [ @@ -573,15 +781,11 @@ content: sessionDetailList.value[0].content, role: 'assistant', }, - { - content: inputMsg.value, - role: 'user', - }, ]; const res = await agentConversationSetApi({ id: '', app_id: agentObj.id, - name: inputMsg.value, + name: name, message: message, }); // console.log(res, "res"); @@ -589,8 +793,14 @@ // console.log(res.data.conversation_id); activeSessionId.value = res.data?.id; - startChat(inputMsg.value); - inputMsg.value = ''; + if (!val) { + startChat(inputMsg.value); + inputMsg.value = ''; + uploaditemList.value = []; + } else { + loading.value = false; + chatDis.value = false; + } } } else { startChat(inputMsg.value); @@ -611,6 +821,106 @@ }); }; + //涓嬭浇xsl + const iconDownloadXsl = async (val) => { + await downloadFile({ + url: + `/api/v1/advanced-agent/download?file_id=` + + val.excel_name + + '&app_id=excel_talk&file_type=excel', + }); + }; + + //涓婁紶 + const selectFileCallback = async (resData, file) => { + console.log(111); + try { + const formData = new FormData(); + uploaditemList.value = resData; + uploaditemList.value.map((item) => { + if (item.name == file[0].file.name) { + item.onFileSelectedLoading = true; + item.textName = '涓婁紶涓�'; + } + return item; + }); + if (!activeSessionId.value) { + await createSession(resData); + } + + // onFileSelectedLoading.value = true; + // textName.value = '涓婁紶涓�'; + + formData.append('files', file[0].file); + formData.append('conversation_id', activeSessionId.value); + formData.append('app_id', agentObj.id); + console.log(formData, 'formData'); + const { data, code } = await agentUploadApi(formData); + if (code === 200) { + uploaditemList.value.map((item) => { + item.onFileSelectedLoading = false; + item.textName = '涓婁紶鎴愬姛'; + return item; + }); + // onFileSelectedLoading.value = false; + // textName.value = '涓婁紶鎴愬姛'; + } + } catch (err) { + uploaditemList.value.map((item) => { + item.onFileSelectedLoading = false; + item.textName = '涓婁紶澶辫触'; + return item; + }); + // onFileSelectedLoading.value = false; + // textName.value = '涓婁紶澶辫触'; + Message.error('涓婁紶澶辫触'); + } + }; + + const getIconByExten = (extension) => { + const fileExtension = ref(''); + fileExtension.value = extension.split('.').pop(); + let type = ''; + parser_idsArr.value.forEach((item) => { + // 鍖呭惈鍏冪礌 + if (item.formats.includes(fileExtension.value)) { + type = item.id; + } + }); + return type; + }; + + // let onFileSelectedLoading = ref(true); + // const textName = ref('涓婁紶鎴愬姛'); + + const deleteFile = (item) => { + console.log(uploaditemList.value); + uploaditemList.value.splice(item.index, 1); + EventBus.emit('queryAgent', item); + }; + + 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': + case 'wps': + return pdfImg2; // Word鍥炬爣鐨刄RL + case 'xlsx': + case 'xls': + return pdfImg3; // Excel鍥炬爣鐨刄RL + case 'txt': + return pdfImg4; // 鏂囨湰鏂囨。鍥炬爣鐨刄RL + default: + return pdfImg5; // 榛樿鍥炬爣 + } + }); + //鑱婂ぉ const startChat = async (valMsg) => { sessionDetailList.value.push({ @@ -622,6 +932,7 @@ let chatStr = { id: activeSessionId.value, message: valMsg, + app_id: agentObj.id, }; if (isHistory.value) { chatStr.dsl = dsl; @@ -653,7 +964,13 @@ if (typeof d !== 'boolean') { console.info('data:', d); - streamStr.value = d.content; + + if (d?.content) { + streamStr.value = d.content; + } else { + streamStr.value = d.code; + } + startDisplayStr(); } } catch (e) { @@ -734,6 +1051,7 @@ if (timer) { clearTimeout(timer!); } + const res = streamStr.value; // 灏嗘暟缁勪腑鐨勫瓧绗︿覆鎷兼帴璧锋潵 @@ -754,7 +1072,7 @@ const scrollbar = ref(null); const refreshScroll = () => { nextTick(() => { - const container = document.getElementById('agentHome'); + const container = document.getElementById('chatAgentHome'); scrollbar.value.scrollTop(container.scrollHeight); }); }; @@ -767,6 +1085,10 @@ isHistory.value = true; querySessionDetail(data); }); + setTimeout(() => { + Prism.highlightAll(); // 鍏ㄥ眬浠g爜楂樹寒 + }, 1000); + // Prism.highlightAll(); // 鍏ㄥ眬浠g爜楂樹寒 }); onBeforeUnmount(() => { EventBus.off('createSeniorAgent'); @@ -790,6 +1112,7 @@ </script> <style scoped lang="scss"> + // @import 'prismjs/themes/prism.css'; .dark { color: gray !important; } @@ -812,7 +1135,7 @@ .center { box-sizing: border-box; - height: calc(100vh - 200px); + height: calc(100vh - 140px); position: relative; .center-title { @@ -870,10 +1193,13 @@ font-weight: 500; } .chat_bottom { - display: flex; - align-items: center; + // display: flex; + // align-items: center; + // width: 78%; + // margin: 0 auto; width: 78%; margin: 0 auto; + position: relative; .center-bottom { // position: absolute; // width: 90%; @@ -885,7 +1211,7 @@ display: flex; flex: 1 1; flex-direction: column; - overflow: hidden; + // overflow: hidden; position: relative; // padding-top:10px; :deep(.arco-textarea-wrapper) { @@ -895,12 +1221,13 @@ .btn-send { position: absolute !important; right: 4px; - top: 80px; + top: 90px; z-index: 10; } + :deep(.arco-btn-size-large) { height: 28px; - width: 50px; + width: 60px; } } :deep(.arco-textarea-wrapper) { @@ -918,6 +1245,16 @@ } .icon-user-jpg { border: 1px solid #d9d9d9; + } + .codeStle { + .language { + color: #fff; + padding-left: 10px; + font-size: 14px; + height: 30px; + line-height: 30px; + background-color: #373739; + } } .prompt { ul { @@ -972,6 +1309,37 @@ } } } + .fileList { + padding: 10px 0 !important; + margin-bottom: 0 !important; + :deep(.arco-comment-inner) { + line-height: 29px; + } + } + .uploadFileList { + width: 100%; + max-height: 140px; + overflow-y: auto; + padding: 10px; + display: flex; + flex-wrap: wrap; + margin-bottom: 100px; + :deep(.arco-comment-author) { + width: 110px; + display: inline-block; + overflow: hidden; /* 闅愯棌瓒呭嚭鐨勫唴瀹� */ + text-overflow: ellipsis; /* 浣跨敤鐪佺暐鍙锋潵浠f浛琚殣钘忕殑鏂囧瓧 */ + white-space: nowrap; /* 涓嶆崲琛岋紝浣垮唴瀹瑰湪涓�琛屽唴鏄剧ず */ + } + :deep(.arco-spin-tip) { + margin-top: 0px; + } + } + .uploadFileDis { + :deep(.arco-upload-list-type-text) { + display: none; + } + } .action { cursor: pointer; -- Gitblit v1.8.0