From 234c222e4fd9d24242440e0207bd5ccfa1bac471 Mon Sep 17 00:00:00 2001 From: zhangxiao <898441624@qq.com> Date: 星期四, 29 八月 2024 21:08:30 +0800 Subject: [PATCH] fix: 审计 --- src/views/sessionManager/components/seniorAgentSession.vue | 434 ++++++++++++++++++++++++++++++++++++++++++++++++++---- 1 files changed, 402 insertions(+), 32 deletions(-) diff --git a/src/views/sessionManager/components/seniorAgentSession.vue b/src/views/sessionManager/components/seniorAgentSession.vue index c834ab7..319f481 100644 --- a/src/views/sessionManager/components/seniorAgentSession.vue +++ b/src/views/sessionManager/components/seniorAgentSession.vue @@ -42,12 +42,12 @@ 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,24 +103,89 @@ style="border: none" > </a-textarea> - <!-- <div class="prompt"> - <ul> - <li class="prompt-item" @click="copyText('43234')"> - <span> - 344343klsdjkjksdjkjksdjk灏卞紑濮嬪ぇ瀹剁湅鏁版嵁搴撶櫥璁板崱鍙楁墦鍑诲嚡鎾掔櫥璁板崱鍙楁墦鍑诲嚡鎾掔櫥璁板崱鍙楁墦鍑诲嚡鎾掔殑43</span - > - <span style="margin-left: 20px"> - <icon-right /> - </span> - </li> - </ul> - </div> --> + <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" + ><code class="language-js line-numbers">{{ sessionDetail.code+ sessionDetail.sql}}</code></pre> + </div> + + <a-image + v-if="sessionDetail?.image_name" + :src="getImg(sessionDetail)" + alt="" + /> + <div class="uploadFileList fileList"> + <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 + class="prompt-item" + @click="copyText(val)" + v-for="(val, index) in prompts" + :key="index" + > + <span> + {{ val }} + </span> + <span style="margin-left: 20px"> + <icon-right /> + </span> + </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> @@ -120,9 +202,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" @@ -182,8 +270,22 @@ 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="agentObj.id == 'excel_talk' || dialog_id == 'excel_talk'" + ref="fileInput" + :sessionId="activeSessionId" + @selectFileCallback="selectFileCallback" + ></uploadFile> <a-button :disabled="chatDis" @click="sentClick" @@ -194,6 +296,7 @@ <icon-send size="32" style="color: #0960bd" /> </a-button> </div> + <!-- <div class="btn-send">--> <!-- <!– <icon-send size="32" /> –>--> <!-- <a-button--> @@ -207,6 +310,60 @@ <!-- </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="onFileSelectedLoading" + v-if="onFileSelectedLoading" + > + <template #icon> + <icon-sync /> + </template> + <template #tip> + <div style="font-size: 12px">{{ 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="" /> + </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" @@ -251,6 +408,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, @@ -259,13 +418,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']); @@ -275,6 +451,7 @@ role: 'assistant', }, ]); //鏍规嵁浼氳瘽id鍑烘潵鐨勪細璇濊鎯� + const httpUrl = modelStore.hrefUrl; const sessionList = ref([]); //浼氳瘽鍒楄〃 const modalObj = reactive({}); const dialogId = ref(''); @@ -291,6 +468,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({}); @@ -298,6 +477,9 @@ const isStopChat = ref(false); const appStore = useAppStore(); const sessionObj = reactive({}); + const uploaditemList = ref([]); + const prompts = ref([]); + const theme = computed(() => { return appStore.theme; }); @@ -360,10 +542,17 @@ role: 'assistant', }, ]; + + 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; } @@ -439,6 +628,27 @@ loading.value = false; inputMsg.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); @@ -449,6 +659,7 @@ // nextTick(() => { // sessionDetailList.value = data.dsl.messages; // }); + sessionDetailList.value = data.message; agentTitle.value = `${data.name}` || '鏈懡鍚嶄細璇�'; @@ -461,10 +672,24 @@ inputMsg.value = text; }; + const getAentId = (id) => { + if (id == 'excel_talk') { + console.log(1); + getAent.value = false; + } + if (id == 'questions_talk') { + console.log(2); + getAent.value = true; + } + }; + // 鍘嗗彶璁板綍璺宠浆鑾峰彇agent浼氳瘽璇︽儏 const querySessionDetail = async (session) => { conversation_id.value = session.id; activeSessionId.value = session.id; + dialog_id.value = session.dialog_id; + console.log(4554); + getAentId(session.dialog_id); from.name = session.name; const { code, data } = await getSessionDetailsApi(session.id); @@ -488,6 +713,7 @@ const sentClick = () => { sendMessage('click'); + uploaditemList.value = []; }; // 閲嶆柊鐢熸垚 @@ -542,7 +768,7 @@ // startChat(inputMsg.value); // inputMsg.value = ''; - createSession(); + createSession(''); } else { Message.warning('娑堟伅涓嶈兘涓虹┖'); chatDis.value = false; @@ -552,7 +778,7 @@ } }; //鍒涘缓浼氳瘽 - const createSession = async () => { + const createSession = async (val) => { try { loading.value = true; chatDis.value = true; @@ -579,8 +805,13 @@ // console.log(res.data.conversation_id); activeSessionId.value = res.data?.id; - startChat(inputMsg.value); - inputMsg.value = ''; + if (!val) { + startChat(inputMsg.value); + inputMsg.value = ''; + } else { + loading.value = false; + chatDis.value = false; + } } } else { startChat(inputMsg.value); @@ -601,6 +832,91 @@ }); }; + //涓嬭浇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; + if (!activeSessionId.value) { + await createSession(1); + } + + onFileSelectedLoading.value = true; + textName.value = '涓婁紶涓�'; + // for (let i = 0; i < file.length; i++) { + // formData.append('files', file[i].file); + // formData.append('conversation_id', activeSessionId.value); + // formData.append('app_id', agentObj.id); + // } + 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) { + onFileSelectedLoading.value = false; + textName.value = '涓婁紶鎴愬姛'; + } + } catch (err) { + 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); + }; + 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({ @@ -612,6 +928,7 @@ let chatStr = { id: activeSessionId.value, message: valMsg, + app_id: agentObj.id, }; if (isHistory.value) { chatStr.dsl = dsl; @@ -757,6 +1074,10 @@ isHistory.value = true; querySessionDetail(data); }); + setTimeout(() => { + Prism.highlightAll(); // 鍏ㄥ眬浠g爜楂樹寒 + }, 1000); + // Prism.highlightAll(); // 鍏ㄥ眬浠g爜楂樹寒 }); onBeforeUnmount(() => { EventBus.off('createSeniorAgent'); @@ -780,6 +1101,7 @@ </script> <style scoped lang="scss"> + // @import 'prismjs/themes/prism.css'; .dark { color: gray !important; } @@ -802,7 +1124,7 @@ .center { box-sizing: border-box; - height: calc(100vh - 200px); + height: calc(100vh - 140px); position: relative; .center-title { @@ -860,10 +1182,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%; @@ -875,7 +1200,7 @@ display: flex; flex: 1 1; flex-direction: column; - overflow: hidden; + // overflow: hidden; position: relative; // padding-top:10px; :deep(.arco-textarea-wrapper) { @@ -885,12 +1210,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) { @@ -909,23 +1235,36 @@ .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 { margin: 0; padding: 0; display: flex; + flex-wrap: wrap; } ul > li { list-style-type: none; } .prompt-item { - display: flex; - justify-content: space-between; + // display: flex; + // justify-content: space-between; + display: block; background-color: #fff; cursor: pointer; border-radius: 8px; padding: 10px; border: #e5e5e5; + margin-right: 30px; &:hover { background-color: #eee; } @@ -959,6 +1298,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