From 9b12e9ef04204aca27ace8e56fbf8429f6852261 Mon Sep 17 00:00:00 2001
From: zhangxiao <898441624@qq.com>
Date: 星期四, 29 八月 2024 21:56:29 +0800
Subject: [PATCH] fix: 修改bug
---
src/views/sessionManager/components/seniorAgentSession.vue | 437 ++++++++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 402 insertions(+), 35 deletions(-)
diff --git a/src/views/sessionManager/components/seniorAgentSession.vue b/src/views/sessionManager/components/seniorAgentSession.vue
index 93e6d89..831447b 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,6 +103,53 @@
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"
+ ><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
@@ -103,12 +167,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 +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"
@@ -136,17 +219,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 +272,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="!getAent"
+ ref="fileInput"
+ :sessionId="activeSessionId"
+ @selectFileCallback="selectFileCallback"
+ ></uploadFile>
<a-button
:disabled="chatDis"
@click="sentClick"
@@ -199,6 +298,7 @@
<icon-send size="32" style="color: #0960bd" />
</a-button>
</div>
+
<!-- <div class="btn-send">-->
<!-- <!– <icon-send size="32" /> –>-->
<!-- <a-button-->
@@ -212,6 +312,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"
@@ -256,6 +410,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 +420,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'; //瀵煎叆浠ｇ爜楂樹寒鎻掍欢鐨刢ore锛堥噷闈㈡彁渚涗簡鍏朵粬瀹樻柟鎻掍欢鍙婁唬鐮侀珮浜牱寮忎富棰橈紝浣犲彧闇�瑕佸紩鍏ュ嵆鍙級
+ import 'prismjs/themes/prism-tomorrow.min.css'; //寮曞叆浠ｇ爜楂樹寒涓婚锛堣繖涓幓node_modules鐨勫畨瑁卲rismjs涓壘鍒版兂浣跨敤鐨勪富棰樺嵆鍙級
+
const props = defineProps({
modalObj: Object,
});
+
+ const modelStore = userModelState();
// const emit = defineEmits(['addSession']);
@@ -280,6 +453,7 @@
role: 'assistant',
},
]); //鏍规嵁浼氳瘽id鍑烘潵鐨勪細璇濊鎯�
+ const httpUrl = modelStore.hrefUrl;
const sessionList = ref([]); //浼氳瘽鍒楄〃
const modalObj = reactive({});
const dialogId = ref('');
@@ -296,6 +470,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 +479,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 +547,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 +596,7 @@
id: agentObj.id,
}),
});
+ refreshScroll();
const reader = response?.body
?.pipeThrough(new TextDecoderStream())
@@ -431,7 +613,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) {
@@ -449,6 +635,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);
@@ -459,6 +666,7 @@
// nextTick(() => {
// sessionDetailList.value = data.dsl.messages;
// });
+
sessionDetailList.value = data.message;
agentTitle.value = `${data.name}` || '鏈懡鍚嶄細璇�';
@@ -471,10 +679,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 +719,7 @@
const sentClick = () => {
sendMessage('click');
+ uploaditemList.value = [];
};
// 閲嶆柊鐢熸垚
@@ -552,7 +774,7 @@
// startChat(inputMsg.value);
// inputMsg.value = '';
- createSession();
+ createSession('');
} else {
Message.warning('娑堟伅涓嶈兘涓虹┖');
chatDis.value = false;
@@ -562,7 +784,7 @@
}
};
//鍒涘缓浼氳瘽
- const createSession = async () => {
+ const createSession = async (val) => {
try {
loading.value = true;
chatDis.value = true;
@@ -572,10 +794,6 @@
{
content: sessionDetailList.value[0].content,
role: 'assistant',
- },
- {
- content: inputMsg.value,
- role: 'user',
},
];
const res = await agentConversationSetApi({
@@ -589,8 +807,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 +835,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({
@@ -622,6 +931,7 @@
let chatStr = {
id: activeSessionId.value,
message: valMsg,
+ app_id: agentObj.id,
};
if (isHistory.value) {
chatStr.dsl = dsl;
@@ -653,7 +963,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 +1050,7 @@
if (timer) {
clearTimeout(timer!);
}
+
const res = streamStr.value;
// 灏嗘暟缁勪腑鐨勫瓧绗︿覆鎷兼帴璧锋潵
@@ -767,6 +1084,10 @@
isHistory.value = true;
querySessionDetail(data);
});
+ setTimeout(() => {
+ Prism.highlightAll(); // 鍏ㄥ眬浠ｇ爜楂樹寒
+ }, 1000);
+ // Prism.highlightAll(); // 鍏ㄥ眬浠ｇ爜楂樹寒
});
onBeforeUnmount(() => {
EventBus.off('createSeniorAgent');
@@ -790,6 +1111,7 @@
</script>
<style scoped lang="scss">
+ // @import 'prismjs/themes/prism.css';
.dark {
color: gray !important;
}
@@ -812,7 +1134,7 @@
.center {
box-sizing: border-box;
- height: calc(100vh - 200px);
+ height: calc(100vh - 140px);
position: relative;
.center-title {
@@ -870,10 +1192,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 +1210,7 @@
display: flex;
flex: 1 1;
flex-direction: column;
- overflow: hidden;
+ // overflow: hidden;
position: relative;
// padding-top:10px;
:deep(.arco-textarea-wrapper) {
@@ -895,12 +1220,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 +1244,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 +1308,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; /* 浣跨敤鐪佺暐鍙锋潵浠ｆ浛琚殣钘忕殑鏂囧瓧 */
+ 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