From af08dae54f74aa9a94f82f298410165fa9b7b614 Mon Sep 17 00:00:00 2001 From: yinbangzhong <zhongbangyin@126.com> Date: 星期三, 04 九月 2024 13:56:02 +0800 Subject: [PATCH] 单文档 --- src/views/sessionManager/index.vue | 455 ++++++++++++++++++++++++++++++++++++++++++++++---------- 1 files changed, 370 insertions(+), 85 deletions(-) diff --git a/src/views/sessionManager/index.vue b/src/views/sessionManager/index.vue index 94c0d2a..a7332b5 100644 --- a/src/views/sessionManager/index.vue +++ b/src/views/sessionManager/index.vue @@ -78,54 +78,165 @@ /> </template> <template #content> - <div :class="{ chartUserText: theme === 'light' }" - >{{ sessionDetail.content }} + <div :class="{ chartUserText: theme === 'light' }"> + {{ sessionDetail.content }} + <!-- <a-input + :style="{ width: '100%' }" + v-model="sessionDetail.content" + v-if="isEdit" + /> + + <div v-else> + {{ sessionDetail.content }} + </div> --> </div> + <!-- <div v-if="!isEdit"> + <span + class="action" + v-if="index != 0" + @click="copy(sessionDetail.content)" + > + <icon-copy /> 澶嶅埗 + </span> + <span class="action" @click="edit()"> + <icon-pen /> 缂栬緫 + </span> + </div> + <a-space v-else> + <a-button type="outline" size="mini" @click="cancelEdit(1)" + >鍙栨秷</a-button + > + <a-button type="primary" size="mini" @click="cancelEdit(2)" + >纭畾</a-button + > + </a-space> --> </template> </a-comment> <a-comment v-else-if="sessionDetail.role === 'assistant'"> <template #avatar> <img class="icon-user-jpg" - src="../../assets/images/icon-chart.png" + src="../../assets/images/icon-picture.png" alt="鏈湴鍥剧墖" /> </template> <template #content> <a-card v-if="isExistTip(sessionDetail.content)"> - <div :class="{ chatItemAnswer: theme === 'light' }" - :style="{backgroundColor: theme === 'light' ? '#ffffff' : '#000000'}" style="border: none;display: inline;" v-for="(item,tipIndex) in tipMatch(sessionDetail)" + <div + :class="{ chatItemAnswer: theme === 'light' }" + :style="{ + backgroundColor: + theme === 'light' ? '#ffffff' : '#000000', + }" + style="border: none" + v-for="(breakContent, breakIndex) in breakLine( + sessionDetail.content + )" > - <span v-if="tipIndex == 0"> - {{ sessionDetail.content.substring(0, item.index) }} - <a-tooltip background-color="#3491FA" :content="getTipContent( - messagenList.reference, - index - )"> - <img style="width: 20px;height: 20px" :src="tipImage" /> - </a-tooltip> - </span> - <span v-else> - {{ sessionDetail.content.substring(item.preIndex+item.item.length, item.index) }} - <a-tooltip background-color="#3491FA" :content="getTipContent( - messagenList.reference, - index - )"> - <img style="width: 20px;height: 20px" :src="tipImage" /> - </a-tooltip> - </span> - + <div + :class="{ chatItemAnswer: theme === 'light' }" + :style="{ + backgroundColor: + theme === 'light' ? '#ffffff' : '#000000', + }" + style="border: none" + v-if="isExistTip(breakContent)" + > + <div + :class="{ chatItemAnswer: theme === 'light' }" + :style="{ + backgroundColor: + theme === 'light' ? '#ffffff' : '#000000', + }" + style="border: none" + v-for="(item, tipIndex) in tipMatch(breakContent)" + > + <span v-if="tipIndex == 0"> + {{ breakContent.substring(0, item.index) }} + <a-tooltip + background-color="#3491FA" + :content=" + getTipContent(messagenList.reference, index) + " + > + <img + style="width: 20px; height: 20px" + :src="tipImage" + /> + </a-tooltip> + </span> + <span v-else-if="tipIndex == item.len - 1"> + {{ + breakContent.substring( + item.preIndex + item.item.length, + item.index + ) + }} + <a-tooltip + background-color="#3491FA" + :content=" + getTipContent(messagenList.reference, index) + " + > + <img + style="width: 20px; height: 20px" + :src="tipImage" + /> + </a-tooltip> + {{ breakContent.substring(item.index + 5) }} + </span> + <span v-else> + {{ + breakContent.substring( + item.preIndex + item.item.length, + item.index + ) + }} + <a-tooltip + background-color="#3491FA" + :content=" + getTipContent(messagenList.reference, index) + " + > + <img + style="width: 20px; height: 20px" + :src="tipImage" + /> + </a-tooltip> + </span> + </div> + </div> + <div v-else> + {{ breakContent }} + </div> </div> </a-card> - <a-card v-else> - <div :class="{ chatItemAnswer: theme === 'light' }" - :style="{ - backgroundColor: - theme === 'light' ? '#ffffff' : '#000000', - }" style="border: none"> - {{ sessionDetail.content }} - </div> + <a-card v-else> + <a-textarea + readonly + auto-size + :default-value="chartText(sessionDetail.content)" + :class="{ chatItemAnswer: theme === 'light' }" + :style="{ + backgroundColor: + theme === 'light' ? '#ffffff' : '#000000', + }" + style="border: none" + > + </a-textarea> </a-card> + <!-- <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> --> </template> <!-- <div>{{ sessionDetail.role === 'assistant' }}</div> --> <template #actions> @@ -168,29 +279,32 @@ > <icon-refresh /> 閲嶆柊鐢熸垚 </span> + <!-- <span class="action"><icon-to-bottom />涓嬭浇 </span> --> </template> </a-comment> <a-comment v-else-if="sessionDetail.role === 'last'"> <template #avatar> <img class="icon-user-jpg" - src="../../assets/images/icon-chart.png" + src="../../assets/images/icon-picture.png" alt="鏈湴鍥剧墖" /> </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="chartLoading" 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> @@ -261,12 +375,20 @@ display: flex; justify-content: space-between; " + class="uploadFileDis" > <updataFile ref="fileInput" :sessionId="activeSessionId" @selectFileCallback="selectFileCallback" ></updataFile> + <!-- <uploadFile + ref="fileInput" + :handleRemove="handleRemove" + :typeXLse="false" + @selectFileCallback="selectFileCallback" + ></uploadFile> --> + <a-button :disabled="chatDis" @click="sentClick" @@ -354,6 +476,11 @@ ></smartAi> </div> </a-col> + <a-col :span="23" v-show="agentType == '5'"> + <div class="center"> + <seniorAgentSession :modalObj="agentObj"></seniorAgentSession> + </div> + </a-col> </a-row> <a-modal title=" " v-model:visible="fileVisible" :footer="false" fullscreen> <!-- <docx previewSrc="http://192.168.20.116:1080/v1/document/get/405c3efa4d8c11ef97560242ac120006"></docx>--> @@ -389,7 +516,7 @@ </div> </template> <script setup lang="ts"> -import { useAppStore, userModelState, useUserStore } from "@/store"; + import { useAppStore, userModelState, useUserStore } from '@/store'; import { computed, nextTick, @@ -407,9 +534,11 @@ import chatMenu from '@/views/sessionManager/components/chatMenu.vue'; import AddSession from '@/views/sessionManager/components/addSession.vue'; import agentSession from '@/views/sessionManager/components/agentSession.vue'; + import seniorAgentSession from '@/views/sessionManager/components/seniorAgentSession.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, @@ -418,21 +547,26 @@ getSessionDetailsApi, sessionListApi, uploadWithoutKb, + uploadAndParse, + chatInfos, + chatRm, } 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"; -import tipImage from "@/assets/session/tip.png"; + 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'; + import tipImage from '@/assets/session/tip.png'; -import docx from "@/views/dmx/knowledgeLib/components/docx.vue"; -import excel from "@/views/dmx/knowledgeLib/components/excel.vue"; -import txtPdf from "@/views/dmx/knowledgeLib/components/txtPdf.vue"; + import docx from '@/views/dmx/knowledgeLib/components/docx.vue'; + import excel from '@/views/dmx/knowledgeLib/components/excel.vue'; + import txtPdf from '@/views/dmx/knowledgeLib/components/txtPdf.vue'; + import { is } from 'immutable'; + import uploadFile from './components/uploadFile.vue'; // const url = ref('../../assets/session/PDF.png'); @@ -447,6 +581,7 @@ const modalObj = reactive({ add: false }); const dialogId = ref(''); const chatDis = ref(false); + const chartLoading = ref(false); const loading = ref(false); const agentType = ref('1'); const agentTitle = ref('鏈懡鍚嶄細璇�'); @@ -473,7 +608,7 @@ const uploadRef = ref(); const files = ref([]); const file = ref(''); - const fileInput = ref(null); + const fileInput = ref(); const chatDataMeg = reactive({}); const visible = ref(false); const fileVisible = ref(false); @@ -481,8 +616,7 @@ let documenttype = ref('docx'); let previewSrc = ref(''); - -const modelStore = userModelState(); + const modelStore = userModelState(); const httpUrl = modelStore.hrefUrl; const rules = { @@ -509,25 +643,44 @@ } }; let dataItem = []; - const isExistTip=(message:string):boolean=>{ + const isExistTip = (message: string): boolean => { if (/##[0-9]\$\$/.test(message)) { return true; } else { return false; } - } + }; - const tipMatch = (session: any): any[] => { + const breakLine = (message: string): string[] => { + //鎸塡n鍒嗗壊瀛楃涓� + let arr = message.split('\n'); + return arr; + }; + + const chartText = (message: string): string => { + //鍘婚櫎鎵�鏈夌殑#鍜�** + let arr = message.replace(/\*\*|\#\#\#/g, ''); + return arr; + }; + + const tipMatch = (msg: string): any[] => { //match session.content涓殑##[0-9]$$鐨勭储寮� + let indexs: any[] = []; - let preTip=0; - session.content.match(/##([0-9]+)\$\$/g)?.map((item) => { - let i = session.content.indexOf(item); - indexs.push({ index: i, item: item, preIndex: preTip }); + let preTip = 0; + let matches = msg.match(/##([0-9]+)\$\$/g); + matches?.map((item) => { + let i = msg.indexOf(item); + indexs.push({ + index: i, + item: item, + preIndex: preTip, + len: matches.length, + }); preTip = i; }); return indexs; - } + }; const getTxt = (data, role, message, index) => { if (isExistTip(message)) { @@ -543,16 +696,15 @@ }; const getTipContent = (data, index): string => { - let maxSimilarityContent = ""; + let maxSimilarityContent = ''; let i = index / 2 - 1 > 0 ? index / 2 - 1 : 0; let maxSimilarity = 0; data[i].chunks.forEach((chunk) => { - if (chunk.similarity > maxSimilarity) { - maxSimilarity = chunk.similarity; - maxSimilarityContent = chunk.content_with_weight; - } + if (chunk.similarity > maxSimilarity) { + maxSimilarity = chunk.similarity; + maxSimilarityContent = chunk.content_with_weight; } - ); + }); return maxSimilarityContent; }; @@ -621,12 +773,76 @@ // formRef.value.resetFields(); }; - const selectFileCallback = (data) => { - console.log(data, 'selectFileCallback'); - uploaditemList.value = [ - ...uploaditemList.value, - ...data - ]; + const selectFileCallback = (data,conversation_id) => { + uploaditemList.value = [...uploaditemList.value, ...data]; + activeSessionId.value = conversation_id; + }; + + //涓婁紶 + // 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; + // }); + // debugger; + // if (!activeSessionId.value) { + // await createSession(resData); + // } + + // // onFileSelectedLoading.value = true; + // // textName.value = '涓婁紶涓�'; + + // formData.append('files', file[0].file); + // formData.append('conversation_id', activeSessionId.value); + + // console.log(formData, 'formData'); + // const { data, code } = await uploadAndParse(formData); + // if (code === 200) { + // uploaditemList.value.map((item: any) => { + // item.onFileSelectedLoading = false; + // item.textName = '涓婁紶鎴愬姛'; + // return item; + // }); + // getInfo(data); + // // onFileSelectedLoading.value = false; + // // textName.value = '涓婁紶鎴愬姛'; + // } + // } catch (err) { + // uploaditemList.value.map((item: any) => { + // item.onFileSelectedLoading = false; + // item.textName = '涓婁紶澶辫触'; + // return item; + // }); + // // onFileSelectedLoading.value = false; + // // textName.value = '涓婁紶澶辫触'; + // Message.error('涓婁紶澶辫触'); + // } + // }; + + //涓婁紶鎴愬姛瑙f瀽getinfo + const getInfo = async (id) => { + const { code, data } = await chatInfos({ + doc_ids: activeSessionId.value, + }); + if (code === 200) { + uploaditemList.value = data; + } + }; + //鍒犻櫎涓婁紶鏂囨。 + const deleteUpload = async (id) => { + const { code, data } = await chatRm({ + doc_id: id, + }); + if (code === 200) { + getInfo(); + } }; let onFileSelectedLoading = ref(false); @@ -634,11 +850,25 @@ const deleteFile = (item) => { console.log(uploaditemList.value); uploaditemList.value.splice(item.index, 1); + // EventBus.emit('queryAgent', item); }; const { toClipboard } = useClipboard(); const copy = async (text) => { await toClipboard(text); //鍙傛暟涓鸿澶嶅埗鐨勬枃鏈� + }; + + const isEdit = ref(false); + const edit = () => { + isEdit.value = !isEdit.value; + }; + const cancelEdit = (val) => { + if (val == 1) { + isEdit.value = !isEdit.value; + } else { + //缂栬緫淇濆瓨 + isEdit.value = !isEdit.value; + } }; const DialogList = async () => { @@ -690,7 +920,7 @@ console.log(name, '鏂板缓浼氳瘽鍚嶇О'); const res = await addSessionApi({ - dialog_id: id, + dialog_id: '', conversation_desc: name, }); // console.log(res, "res"); @@ -711,6 +941,7 @@ // 鍙戦�� const sentClick = () => { sendMessage('click'); + uploaditemList.value = []; }; // 閲嶆柊鐢熸垚 const reGenerate = () => { @@ -744,7 +975,9 @@ 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); + const { code, data } = await getSessionDetailsApi( + res.data?.conversation_id + ); if (code === 200) { console.log(data, '鏂板缓浼氳瘽璇︽儏'); Object.assign(chatObj, data); @@ -768,6 +1001,7 @@ const startChat = async (valMsg) => { chatDis.value = true; loading.value = true; + chartLoading.value = true; toStop = false; sessionDetailList.value.push({ content: valMsg, @@ -811,6 +1045,7 @@ if (typeof d !== 'boolean') { // console.info("data:", d); streamStr.value = d.content; + chartLoading.value = false; startDisplayStr(); } } catch (e) { @@ -819,6 +1054,7 @@ if (done) { console.info('done'); displayedText.value = ''; + chartLoading.value = false; if (isStopChat.value) { setChatDataMeg(chatDataMeg); } else { @@ -961,9 +1197,10 @@ activeSessionId.value = ''; }); onMounted(() => { + document.getElementsByTagName; let container = document.getElementById('container'); container.addEventListener('click', () => { - fileInput.value.cancel(); + // fileInput.value.cancel(); }); EventBus.on('newChat', () => { agentType.value = '1'; @@ -1066,6 +1303,33 @@ font-size: 12px; padding-left: 10px; } + } + } + } + // .uploadFileDis { + // :deep(.arco-upload-list-type-text) { + // display: none; + // } + // } + .prompt { + ul { + margin: 0; + padding: 0; + display: flex; + } + ul > li { + list-style-type: none; + } + .prompt-item { + display: flex; + justify-content: space-between; + background-color: #fff; + cursor: pointer; + border-radius: 8px; + padding: 10px; + border: #e5e5e5; + &:hover { + background-color: #eee; } } } @@ -1202,6 +1466,11 @@ } } } + .uploadFileDis { + :deep(.arco-upload-list-type-text) { + display: none; + } + } .chat-item { padding: 10px 0; @@ -1211,6 +1480,19 @@ font-size: 14px; color: #333; margin-top: 4px; + } + :deep(.arco-card-body) { + padding: 0; + border-radius: 10px; + } + :deep(.arco-textarea) { + padding-top: 10px !important; + } + :deep(.arco-comment-inner-content) { + border-radius: 10px; + } + :deep(.arco-card-bordered) { + border-radius: 10px; } .icon-user-jpg { @@ -1230,6 +1512,9 @@ margin-left: 10px; } } + :deep(.arco-spin-loading .arco-spin-mask-icon) { + left: 10%; + } } .right { -- Gitblit v1.8.0