From db2339e341668d14506c114ee88d6d143d4813b0 Mon Sep 17 00:00:00 2001 From: xuyonghao <898441624@qq.com> Date: 星期三, 27 十一月 2024 15:33:16 +0800 Subject: [PATCH] 图标修改 --- src/views/sessionManager/components/seniorAgentSession.vue | 663 +++++++++++++++++++++++++++++++++++++++--------------- 1 files changed, 476 insertions(+), 187 deletions(-) diff --git a/src/views/sessionManager/components/seniorAgentSession.vue b/src/views/sessionManager/components/seniorAgentSession.vue index 93e6d89..3f92ea7 100644 --- a/src/views/sessionManager/components/seniorAgentSession.vue +++ b/src/views/sessionManager/components/seniorAgentSession.vue @@ -3,7 +3,6 @@ <div class="header___section"> <div class="chatHeader"> <div class="chatHeaderBox"> - <!-- <span class="title">{{agentTitle}}</span>--> <a-popover position="bottom" trigger="click"> <a-button border> <span @@ -35,19 +34,19 @@ </div> </div> </div> - <a-scrollbar + <div 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" @@ -61,7 +60,7 @@ </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" @@ -70,22 +69,53 @@ /> </template> <template #content> - <!-- <a-card :class="{ chatItemAnswer: theme === 'light' }">--> - <!-- <div :class="{ light: theme === 'light' }"--> - <!-- >{{ sessionDetail.content }}--> - <!-- </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> + <div v-if="isExistTip(sessionDetail.content)" :class="{ chartUserText: theme === 'light' }"> + <div v-for="(item, breakIndex) in breakLine(sessionDetail)"> + <span v-if="item.preIndex==0"> + {{ sessionDetail.content.substring(0, item.index) }} + </span> + <span v-else> + {{ sessionDetail.content.substring(item.preIndex+item.preItem.length, item.index) }} + </span> + <div class="codeStle"> + <div class="language">{{ item.item }}</div> + <pre + style=" + background: #2c2c36; + padding: 10px; + margin-top: 0; + margin-bottom: 0; + " + ><code class="language-js line-numbers">{{ item?.tip_content }}</code></pre> + </div> + </div> + </div> + <div v-else :class="{ chartUserText: theme === 'light' }">{{ sessionDetail.content }}</div> + <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 +133,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 +168,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 +185,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 @@ -168,7 +219,7 @@ >鍋滄鐢熸垚</div > <div class="chartStart v-else" @click="stopChat">閲嶆柊鐢熸垚</div> --> - </a-scrollbar> + </div> <div class="chat_bottom"> <div class="center-bottom"> <a-textarea @@ -187,8 +238,24 @@ 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" + :typeXLse="false" + @selectFileCallback="selectFileCallback" + ></uploadFile> <a-button :disabled="chatDis" @click="sentClick" @@ -199,6 +266,7 @@ <icon-send size="32" style="color: #0960bd" /> </a-button> </div> + <!-- <div class="btn-send">--> <!-- <!– <icon-send size="32" /> –>--> <!-- <a-button--> @@ -212,6 +280,63 @@ <!-- </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 v-show="!item.onFileSelectedLoading" 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 +381,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 +391,30 @@ agentConversationSetApi, agentConverDownloadApi, downloadFile, - } from '@/api/agentSession'; + agentUploadApi, updateAgentConversation, updateSeniorAgentConversation + } 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 +424,7 @@ role: 'assistant', }, ]); //鏍规嵁浼氳瘽id鍑烘潵鐨勪細璇濊鎯� + const httpUrl = modelStore.hrefUrl; const sessionList = ref([]); //浼氳瘽鍒楄〃 const modalObj = reactive({}); const dialogId = ref(''); @@ -296,6 +441,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 +450,9 @@ const isStopChat = ref(false); const appStore = useAppStore(); const sessionObj = reactive({}); + const uploaditemList = ref([]); const prompts = ref([]); + const theme = computed(() => { return appStore.theme; }); @@ -323,6 +472,45 @@ message: '鍚嶇О涓嶅厑璁镐负绌�', }, ], + }; + + const isExistTip = (message: string): boolean => { + if (/\$([a-z]+)\$/g.test(message)) { + return true; + } else { + return false; + } + }; + + const breakLine = (detail): string[] => { + let indexs: any[] = []; + let tip_content: any; + let preTip = 0; + let preItem=""; + let matches = detail.content.match(/\$([a-z]+)\$/g); + matches?.map((item) => { + let i = detail.content.indexOf(item); + if (item == "$metadata$") { + tip_content = detail.metadata; + } + if (item == "$sql$") { + tip_content = detail.sql; + } + if (item == "$code$") { + tip_content = detail.code; + } + indexs.push({ + index: i, + item: item, + preIndex: preTip, + preItem: preItem, + tip_content: tip_content, + len: matches.length + }); + preTip = i; + preItem = item; + }); + return indexs; }; const handleSubmit = async ({ values, errors }) => { @@ -369,86 +557,37 @@ prompts.value = session.prompts; activeSessionId.value = ''; + EventBus.emit('queryAgent', uploaditemList.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; } isHistory.value = false; initPage(); }; - // 璋冪敤set鏂规硶 - const agentSet = async () => { - const res = await agentSetApi({ - id: agentObj.id, - title: agentObj.title, - dsl: agentObj.dsl, - }); - // console.log(res,'agentSet'); - if (res.code == 0) { - conversation_id.value = res.data.conversation_id; - agentReset(); - } - }; - // 璋冪敤reset鏂规硶 - const agentReset = async () => { - const res = await agentResetApi({ - id: agentObj.id, - }); - if (res.code == 0) { - // Message.success('淇敼鎴愬姛'); - agentCompletion(); - } - }; - // 璋冪敤completion鏂规硶 - const agentCompletion = async () => { - const response = await fetch('/api/v1/canvas/completion', { - method: 'POST', - headers: { - 'Authorization': getAuthorization(), - 'Content-Type': 'application/json', - }, - body: JSON.stringify({ - id: agentObj.id, - }), - }); - 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; - 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 = ''; - // queryAgentSessionDetail(activeSessionId.value); - break; - } - } + //鑾峰彇鍥剧墖鍦板潃 + 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' + ); } - chatDis.value = false; - loading.value = false; - inputMsg.value = ''; }; + // 璋冪敤get鏂规硶 const queryAgentSessionDetails = async (id) => { const { code, data } = await getSessionDetailsApi(id); @@ -459,6 +598,7 @@ // nextTick(() => { // sessionDetailList.value = data.dsl.messages; // }); + sessionDetailList.value = data.message; agentTitle.value = `${data.name}` || '鏈懡鍚嶄細璇�'; @@ -471,24 +611,26 @@ 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; - from.name = session.name; - const { code, data } = await getSessionDetailsApi(session.id); + dialog_id.value = session.dialog_id; + EventBus.emit('queryAgent', uploaditemList.value); + uploaditemList.value = []; - if (code == 200) { - sessionDetailList.value = data.message; - refreshScroll(); //鍒锋柊婊氬姩鏉′綅缃� - // const res = await getAgentSessionDetailsApi(session.dialog_id); - // if (res.code == 0) { - // Object.assign(agentObj, res.data); - // Object.assign(chatObj, res.data); - // Object.assign(dsl, res.data.dsl); - // refreshScroll(); //鍒锋柊婊氬姩鏉′綅缃� - // } - } + getAentId(session.dialog_id); + from.name = session.name; + queryAgentSessionDetails(activeSessionId.value); }; const { toClipboard } = useClipboard(); @@ -498,6 +640,8 @@ const sentClick = () => { sendMessage('click'); + + uploaditemList.value = []; }; // 閲嶆柊鐢熸垚 @@ -515,44 +659,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 +671,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 +687,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 +699,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 +727,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 +838,7 @@ let chatStr = { id: activeSessionId.value, message: valMsg, + app_id: agentObj.id, }; if (isHistory.value) { chatStr.dsl = dsl; @@ -640,20 +857,36 @@ .pipeThrough(new EventSourceParserStream()) .getReader(); currIndex.value = 0; + let end_msg={}; while (true) { const x = await reader?.read(); if (x) { const { done, value } = x; - // console.log(x, 999); - + console.log(x, 999); + loading.value = false; if (value && value?.event == 'message') { try { const val = JSON.parse(value?.data || ''); - const d = val?.data; + const d = val?.data; if (typeof d !== 'boolean') { console.info('data:', d); - streamStr.value = d.content; + if (d?.content) { + let msg = d.content; + //灏哾.output涓�$metadata$鏇挎崲涓篸.metadata + msg = msg.replace('$metadata$', d.metadata); + //d.content涓瓨鍦�$sql$ + if (d.content.includes('$sql$')) { + msg = msg.replace('$sql$', d.sql); + } + //d.content涓瓨鍦�$code$ + if (d.content.includes('$code$')) { + msg = msg.replace('$code$', d.code); + } + end_msg=d; + streamStr.value = msg; + } + EventBus.emit('queryAgent', uploaditemList.value); startDisplayStr(); } } catch (e) { @@ -663,20 +896,20 @@ if (done) { console.info('done'); - // displayedText.value = ''; - if (isStopChat.value) { - isStopChat.value = false; - setChatDataMeg(chatDataMeg); - } else { - // queryAgentSessionDetail(activeSessionId.value); - // EventBus.emit('queryAppUsageList'); + if (!chatObj?.message) { + chatObj.message = []; } + chatObj.message.push(end_msg) ; + await updateSeniorAgentConversation({ + converson_id: activeSessionId.value, + message: chatObj.message + }); + setChatDataMeg(chatDataMeg); break; } } } chatDis.value = false; - loading.value = false; }; const stopChat = async () => { @@ -734,18 +967,16 @@ if (timer) { clearTimeout(timer!); } + const res = streamStr.value; // 灏嗘暟缁勪腑鐨勫瓧绗︿覆鎷兼帴璧锋潵 if (currIndex.value < res.length) { displayedText.value += res[currIndex.value]; - currIndex.value++; - setTimeout(startDisplayStr, 100); + setTimeout(startDisplayStr, 50); refreshScroll(); } else { - displayedText.value = ''; - queryAgentSessionDetails(activeSessionId.value); clearTimeout(timer!); timer = null; } @@ -754,8 +985,13 @@ const scrollbar = ref(null); const refreshScroll = () => { nextTick(() => { - const container = document.getElementById('agentHome'); - scrollbar.value.scrollTop(container.scrollHeight); + const container = document.getElementById('chatAgentHome'); + //婊氬姩鍒皊crollbar搴曠 + if (container) { +container.scrollTop = container.scrollHeight; + } + + scrollbar.scrollTop(container.scrollHeight); }); }; @@ -767,6 +1003,10 @@ isHistory.value = true; querySessionDetail(data); }); + setTimeout(() => { + Prism.highlightAll(); // 鍏ㄥ眬浠g爜楂樹寒 + }, 1000); + // Prism.highlightAll(); // 鍏ㄥ眬浠g爜楂樹寒 }); onBeforeUnmount(() => { EventBus.off('createSeniorAgent'); @@ -790,6 +1030,7 @@ </script> <style scoped lang="scss"> + // @import 'prismjs/themes/prism.css'; .dark { color: gray !important; } @@ -812,7 +1053,7 @@ .center { box-sizing: border-box; - height: calc(100vh - 200px); + height: calc(100vh - 140px); position: relative; .center-title { @@ -870,10 +1111,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 +1129,7 @@ display: flex; flex: 1 1; flex-direction: column; - overflow: hidden; + // overflow: hidden; position: relative; // padding-top:10px; :deep(.arco-textarea-wrapper) { @@ -895,12 +1139,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 +1163,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 { @@ -943,6 +1198,9 @@ background-color: #eee; } } + } + :deep(.arco-spin-loading .arco-spin-mask-icon) { + left: 10%; } } } @@ -972,6 +1230,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