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 | 395 +++++++++++++++++++++++---------------------------------
1 files changed, 162 insertions(+), 233 deletions(-)
diff --git a/src/views/sessionManager/components/seniorAgentSession.vue b/src/views/sessionManager/components/seniorAgentSession.vue
index 4bf6af7..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,9 +34,9 @@
</div>
</div>
</div>
- <a-scrollbar
+ <div
ref="scrollbar"
- id="agentHome"
+ id="chatAgentHome"
class="chat-list"
style="
width: 80%;
@@ -59,22 +58,6 @@
<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'">
@@ -86,55 +69,38 @@
/>
</template>
<template #content>
- <!-- <a-card :class="{ chatItemAnswer: theme === 'light' }">-->
- <!-- <div :class="{ light: theme === 'light' }"-->
- <!-- >{{ sessionDetail.content }}-->
- <!-- </div>-->
- <!-- </a-card>-->
- <a-textarea
- v-if="sessionDetail?.content"
- readonly
- auto-size
- v-model="sessionDetail.content"
- :class="{ chatItemAnswer: theme === 'light' }"
- :style="{
- backgroundColor: theme === 'light' ? '#ffffff' : '#000000',
- }"
- 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 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">
+ <div
+ class="uploadFileList fileList"
+ v-if="sessionDetail?.excel_name"
+ >
<a-comment
:content="sessionDetail.excel_name"
style="
@@ -219,7 +185,7 @@
/>
</template>
<template #content>
- <a-spin :loading="onFileSelectedLoading" dot>
+ <a-spin :loading="loading" dot style="width: 100%">
<a-textarea
readonly
auto-size
@@ -253,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
@@ -283,9 +249,11 @@
></updataFile> -->
<span v-if="getAent"></span>
<uploadFile
- v-if="agentObj.id == 'excel_talk' || dialog_id == 'excel_talk'"
+ v-if="!getAent"
ref="fileInput"
:sessionId="activeSessionId"
+ :handleRemove="handleRemove"
+ :typeXLse="false"
@selectFileCallback="selectFileCallback"
></uploadFile>
<a-button
@@ -337,14 +305,14 @@
>
<template #avatar>
<a-spin
- :loading="onFileSelectedLoading"
- v-if="onFileSelectedLoading"
+ :loading="item.onFileSelectedLoading"
+ v-if="item.onFileSelectedLoading"
>
<template #icon>
<icon-sync />
</template>
<template #tip>
- <div style="font-size: 12px">{{ textName }}</div>
+ <div style="font-size: 12px">{{ item.textName }}</div>
</template>
</a-spin>
<!-- <a-button type="text" :loading="onFileSelectedLoading" v-if="onFileSelectedLoading"></a-button>-->
@@ -352,6 +320,9 @@
<!-- <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
@@ -420,8 +391,8 @@
agentConversationSetApi,
agentConverDownloadApi,
downloadFile,
- agentUploadApi,
- } 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';
@@ -503,6 +474,45 @@
],
};
+ 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 }) => {
if (errors) return;
@@ -547,6 +557,7 @@
prompts.value = session.prompts;
activeSessionId.value = '';
+ EventBus.emit('queryAgent', uploaditemList.value);
uploaditemList.value = [];
console.log(12123);
getAentId(session.id);
@@ -561,81 +572,7 @@
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;
- }
- }
- }
- chatDis.value = false;
- loading.value = false;
- inputMsg.value = '';
- };
-
- //娓叉煋鏂囧瓧
- const chartText = (val, sql) => {
- console.log(val + sql, 77);
- return val + '\n' + sql;
- };
//鑾峰彇鍥剧墖鍦板潃
const getImg = (val) => {
@@ -676,11 +613,9 @@
const getAentId = (id) => {
if (id == 'excel_talk') {
- console.log(1);
getAent.value = false;
}
if (id == 'questions_talk') {
- console.log(2);
getAent.value = true;
}
};
@@ -690,23 +625,12 @@
conversation_id.value = session.id;
activeSessionId.value = session.id;
dialog_id.value = session.dialog_id;
-
+ EventBus.emit('queryAgent', uploaditemList.value);
uploaditemList.value = [];
+
getAentId(session.dialog_id);
from.name = session.name;
- const { code, data } = await getSessionDetailsApi(session.id);
-
- 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(); //鍒锋柊婊氬姩鏉′綅缃�
- // }
- }
+ queryAgentSessionDetails(activeSessionId.value);
};
const { toClipboard } = useClipboard();
@@ -716,6 +640,7 @@
const sentClick = () => {
sendMessage('click');
+
uploaditemList.value = [];
};
@@ -734,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('');
+ uploaditemList.value = [];
} else {
Message.warning('娑堟伅涓嶈兘涓虹┖');
chatDis.value = false;
@@ -785,6 +675,11 @@
try {
loading.value = true;
chatDis.value = true;
+ let name = inputMsg.value;
+
+ if (val) {
+ name = val[0].name.split('.')[0];
+ }
if (!activeSessionId.value) {
let message = [
@@ -792,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");
@@ -811,6 +702,7 @@
if (!val) {
startChat(inputMsg.value);
inputMsg.value = '';
+ uploaditemList.value = [];
} else {
loading.value = false;
chatDis.value = false;
@@ -851,29 +743,42 @@
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(1);
+ await createSession(resData);
}
- 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);
- // }
+ // 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) {
- onFileSelectedLoading.value = false;
- textName.value = '涓婁紶鎴愬姛';
+ uploaditemList.value.map((item) => {
+ item.onFileSelectedLoading = false;
+ item.textName = '涓婁紶鎴愬姛';
+ return item;
+ });
+ // onFileSelectedLoading.value = false;
+ // textName.value = '涓婁紶鎴愬姛';
}
} catch (err) {
- onFileSelectedLoading.value = false;
- textName.value = '涓婁紶澶辫触';
+ uploaditemList.value.map((item) => {
+ item.onFileSelectedLoading = false;
+ item.textName = '涓婁紶澶辫触';
+ return item;
+ });
+ // onFileSelectedLoading.value = false;
+ // textName.value = '涓婁紶澶辫触';
Message.error('涓婁紶澶辫触');
}
};
@@ -891,13 +796,15 @@
return type;
};
- let onFileSelectedLoading = ref(true);
- const textName = ref('涓婁紶鎴愬姛');
+ // 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();
@@ -950,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) {
@@ -973,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 () => {
@@ -1044,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;
}
@@ -1064,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);
});
};
@@ -1273,6 +1199,9 @@
}
}
}
+ :deep(.arco-spin-loading .arco-spin-mask-icon) {
+ left: 10%;
+ }
}
}
.header___section {
--
Gitblit v1.8.0