From fe2d4623b7ad5ce6e9706125e1f33581ea8b03f0 Mon Sep 17 00:00:00 2001
From: liudong <liudong>
Date: 星期二, 20 八月 2024 18:35:59 +0800
Subject: [PATCH] 历史记录添加滚动分页
---
src/views/sessionManager/index.vue | 352 ++++++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 266 insertions(+), 86 deletions(-)
diff --git a/src/views/sessionManager/index.vue b/src/views/sessionManager/index.vue
index 9ef1ed5..a0a759e 100644
--- a/src/views/sessionManager/index.vue
+++ b/src/views/sessionManager/index.vue
@@ -20,7 +20,32 @@
<div class="header___lEPyH">
<div class="chatHeader">
<div class="chatHeaderBox">
- <span class="title">{{ agentTitle }}</span>
+<!-- <span class="title">{{ agentTitle }}</span>-->
+
+ <a-popover
+ position="bottom"
+ trigger="click"
+ >
+ <a-button border
+ >{{agentTitle}}
+ <icon-down style="margin-left: 4px" />
+ </a-button>
+ <template #content>
+ <a-button
+ type="text"
+ class="button"
+ style="color: #2a2a2b"
+ @click="handleClick()"
+ >
+ <template #icon>
+ <icon-edit />
+ </template>
+ 淇敼鍚嶇О
+ </a-button>
+<!-- <a-divider style="margin: 10px 0" />-->
+ </template>
+ </a-popover>
+
</div>
</div>
</div>
@@ -80,7 +105,7 @@
<span class="action" v-if="index != 0" @click="copy(sessionDetail.content)">
<icon-copy /> 澶嶅埗
</span>
- <span class="action" v-if="index != 0 && index == sessionDetailList.length - 1" @click="reGenerate()">
+ <span class="action" v-if="index != 0 && index == sessionDetailList.length - 1" @click="reGenerate()">
<icon-refresh /> 閲嶆柊鐢熸垚
</span>
</template>
@@ -107,8 +132,9 @@
<template #actions>
<div class="action"
@click="stopChat"
- style="background: var(--color-bg-2);color: var(--color-primary-light-4);" v-if="displayedText != ''">
- <icon-record-stop />
+ style="background: var(--color-bg-2);color: var(--color-primary-light-4);"
+ v-if="displayedText != ''">
+ <icon-record-stop />
鍋滄鐢熸垚
</div>
</template>
@@ -120,7 +146,7 @@
<div class="chartStart v-else" @click="stopChat">閲嶆柊鐢熸垚</div> -->
</a-scrollbar>
- <div class="chat_bottom" >
+ <div class="chat_bottom">
<div class="center-bottom">
<!-- <a-textarea
v-model="inputMsg"
@@ -148,18 +174,6 @@
maxRows: 5,
}"
/>
- <div style="margin-left: 20px">
- <a-upload
- ref="uploadRef"
- :file-list="uploadList"
- multiple
- :custom-request="customRequest"
- style="font-size: 24px;">
- <template #upload-button>
- <icon-attachment style="color: #0960bd"/>
- </template>
- </a-upload>
- </div>
<div class="btn-send">
<a-button
@@ -168,8 +182,56 @@
type="text"
style="border-radius: 24px"
:loading="loading"
- ><icon-send size="32" style="color: #0960bd"/>
+ >
+ <icon-send size="32" style="color: #0960bd" />
</a-button>
+ </div>
+ </div>
+ <!-- <div style="margin-top: 0px">-->
+ <!-- <a-upload-->
+ <!-- ref="uploadRef"-->
+ <!-- :file-list="uploadList"-->
+ <!-- :limit="1"-->
+ <!-- multiple-->
+ <!-- :custom-request="customRequest"-->
+ <!-- style="font-size: 24px;margin-bottom: 10px;position: relative;width: 200px">-->
+ <!-- <template #upload-button>-->
+ <!-- <icon-attachment style="color: #0960bd;position: absolute;top:-50px;left: 20px;z-index: 10000"/>-->
+ <!-- </template>-->
+ <!-- </a-upload>-->
+ <!-- </div>-->
+ <span style="position: absolute;top:94px;left: 20px;z-index: 999;cursor: pointer">
+ <icon-attachment size="28" @click="selectFile" style="color: #0960bd;" />
+ <input
+ ref="fileInput"
+ type="file"
+ style="display: none;"
+ @change="onFileSelected"
+ />
+ </span>
+ <div class="uploadFileList">
+ <div class="files" v-for="(item,index) in uploaditemList" :key="index"
+ style="position: relative;width: 200px;margin-top: 10px;">
+ <a-comment
+ :author="item.name"
+ :content="item.size +''"
+ style="background: var(--color-bg-2);padding:10px;border-radius: 10px"
+ >
+ <template #avatar>
+ <a-spin :loading="onFileSelectedLoading" v-if="onFileSelectedLoading">
+ <template #icon>
+ <icon-sync />
+ </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>
+ </template>
+ </a-comment>
+ <icon-close-circle-fill size="18px"
+ @click="deleteFile(item)"
+ style="position: absolute;right: -4px;top: -4px;color: red;cursor: pointer"/>
</div>
</div>
</div>
@@ -198,6 +260,19 @@
</div>
</a-col>
</a-row>
+ <a-modal v-model:visible="visible" title="淇敼鍚嶇О" @before-open="handleOpened" @cancel="handleCancel" :footer="false" title-align="start">
+ <a-form ref="formRef" :rules="rules" :model="chatObj" @submit="handleSubmit" >
+ <a-form-item field="name" label="鍚嶇О">
+ <a-input v-model="agentTitle" placeholder="璇疯緭鍏ュ悕绉�"/>
+ </a-form-item>
+ <a-form-item>
+ <div style="width: 100%;text-align: right">
+ <a-button @click="visible = false">鍙栨秷</a-button>
+ <a-button style="margin-left: 10px" type="primary" html-type="submit">纭畾</a-button>
+ </div>
+ </a-form-item>
+ </a-form>
+ </a-modal>
</div>
</template>
<script setup lang="ts">
@@ -226,6 +301,7 @@
import agentSession from "@/views/sessionManager/components/agentSession.vue";
import historySession from "@/views/sessionManager/components/historySession.vue";
import smartAi from "@/views/sessionManager/components/smartAi.vue";
+import setName from "@/views/sessionManager/components/setName.vue";
import EventBus from "@/utils/EventBus";
import {
addSessionApi,
@@ -238,6 +314,7 @@
import { queryCanvasList } from "@/api/Agent";
import { getAgentSessionDetailsApi } from "@/api/agentSession";
import useClipboard from "vue-clipboard3";
+
const sessionDetailList = ref([]); //鏍规嵁浼氳瘽id鍑烘潵鐨勪細璇濊鎯�
const sessionList = ref([]); //浼氳瘽鍒楄〃
const modalObj = reactive({ add: false });
@@ -247,7 +324,7 @@
const agentType = ref("1");
const agentTitle = ref("鏈懡鍚嶄細璇�");
let chatObj = reactive({});
-const isStopChat = ref(false)
+const isStopChat = ref(false);
const currIndex = ref(0);
const displayedText = ref(""); // 姝ｅ湪鏄剧ず鐨勬枃瀛�
let timer: number | null = null;
@@ -262,47 +339,129 @@
const selectValue = ref("");
const sectionList = ref({});
const uploadList = ref([]);
+const uploaditemList = ref([]);
const uploadRef = ref();
const files = ref([]);
+const file = ref('');
+const fileInput = ref(null);
+const chatDataMeg = reactive({})
+const visible = ref(false);
+
+
+
+const rules = {
+ name: [
+ {
+ required: true,
+ message:'鍚嶇О涓嶅厑璁镐负绌�',
+ },
+ ],
+}
+
+const handleSubmit = async({values, errors}) => {
+ if(errors) return;
+ // chatObj.name = agentTitle.value;
+ // chatObj.conversation_id = chatObj.id;
+ let chatData = {
+ id:chatObj.id,
+ conversation_id:chatObj.id,
+ name: agentTitle.value
+ }
+ const { code, data } = await addSessionApi(chatData);
+ if (data) {
+ Message.success("淇敼鎴愬姛");
+ handleCancel()
+ queryNewSessionDetail(activeSessionId.value);
+ }
+}
+
+const handleClick = () => {
+ visible.value = true;
+};
+const handleCancel = () => {
+ visible.value = false;
+}
+
+const handleOpened =(el) => {
+ // Object.assign(form,{
+ // name: '',// 鐢ㄦ埛鍚�
+ // });
+ // formRef.value.resetFields();
+}
+
+
+
+
+
+const selectFile = () => {
+ fileInput.value.click();
+};
+
+
+let onFileSelectedLoading = ref(false);
+const onFileSelected = (event) => {
+ const file = event.target.files[0];
+ uploaditemList.value = [{
+ name: file.name,
+ size: file.size,
+ }];
+ if (file) {
+ onFileSelectedLoading.value = true;
+ const formData = new FormData();
+ formData.append("file", file);
+ formData.append("conversation_id", activeSessionId.value);
+ uploadWithoutKb(formData).then((res) => {
+ // console.log(res);
+ if (res.code == 200) {
+ console.log(res);
+ console.log(uploaditemList.value);
+ onFileSelectedLoading.value = false;
+ fileInput.value.value = "";
+ uploaditemList.value = [];
+ Message.success("涓婁紶鎴愬姛");
+ } else {
+ Message.error("涓婁紶澶辫触");
+ }
+ });
+ }
+};
+
+const deleteFile = (item) => {
+ console.log(uploaditemList.value);
+ uploaditemList.value = [];
+};
const { toClipboard } = useClipboard();
const copy = async (text) => {
await toClipboard(text); //鍙傛暟涓鸿澶嶅埗鐨勬枃鏈�
-}
+};
const onChange = (fileList) => {
// files.value = fileList;
};
-const submitOne = (e) => {
- e.stopPropagation();
- console.log(files.value);
- uploadRef.value.submit(files.value.find((x) => x.status === 'init'));
-};
// 涓婁紶鏂囦欢
-const customRequest = async(option) => {
- const {onProgress, onError, onSuccess, fileItem, name} = option
-
- const { code, data } = await getSessionDetailsApi(activeSessionId.value);
- if (code === 200) {
- console.log(data, "璇︽儏");
- if (fileItem.file) {
- const formData = new FormData();
- formData.append('file', fileItem.file);
- formData.append('conversation_id', data.dialog_id);
- uploadWithoutKb(formData).then((res) => {
+const customRequest = async (option) => {
+ const { onProgress, onError, onSuccess, fileItem, name } = option;
+ fileItem.status = "ready";
+ if (fileItem.file) {
+ const formData = new FormData();
+ formData.append("file", fileItem.file);
+ formData.append("conversation_id", activeSessionId.value);
+ uploadWithoutKb(formData).then((res) => {
+ // console.log(res);
+ if (res.code == 200) {
console.log(res);
- uploadList.value = [];
- if (res.code == 0) {
- console.log(res);
-
- }
- });
- }
+ console.log(uploadList.value);
+ fileItem.status = "done";
+ // uploadList.value = [];
+ } else {
+ fileItem.status = "error";
+ }
+ });
}
-}
-
+};
const DialogList = async () => {
@@ -382,10 +541,10 @@
});
console.log(dialogObj.type, "dialogObj");
if (dialogObj.type == 1) {
- agentType.value = '1';
+ agentType.value = "1";
querySessionList();
} else {
- agentType.value = '2';
+ agentType.value = "2";
queryAgentSessionList();
}
@@ -398,8 +557,8 @@
};
// 閲嶆柊鐢熸垚
const reGenerate = () => {
- let inputContent = sessionDetailList.value[sessionDetailList.value.length-2].content
- startChat(inputContent)
+ let inputContent = sessionDetailList.value[sessionDetailList.value.length - 2].content;
+ startChat(inputContent);
};
const sendMessage = async (event) => {
@@ -424,7 +583,7 @@
if (inputMsg.value) {
- startChat(inputMsg.value)
+ startChat(inputMsg.value);
inputMsg.value = "";
} else {
@@ -434,7 +593,7 @@
}
};
-const startChat = async(valMsg)=>{
+const startChat = async (valMsg) => {
chatDis.value = true;
loading.value = true;
sessionDetailList.value.push({
@@ -482,11 +641,12 @@
if (done) {
console.info("done");
displayedText.value = "";
- // if(!isStopChat.value){
- // queryNewSessionDetail(activeSessionId.value);
- // }
- queryNewSessionDetail(activeSessionId.value);
- EventBus.emit("queryAppUsageList");
+ if(isStopChat.value){
+ setChatDataMeg(chatDataMeg);
+ }else{
+ queryNewSessionDetail(activeSessionId.value);
+ EventBus.emit("queryAppUsageList");
+ }
break;
}
}
@@ -494,44 +654,57 @@
// querySessionList();
chatDis.value = false;
loading.value = false;
-}
+};
-const stopChat=async()=>{
+
+
+const stopChat = async () => {
// const { code, data } = await stopChatApi(activeSessionId.value);
// if (code === 200) {
// Message.success("宸插仠姝�");
// queryNewSessionDetail(activeSessionId.value);
// }
+ loading.value = false;
+ chatDis.value = false;
isStopChat.value = true;
- console.log('stopChat');
- console.log(displayedText.value, 'displayedText');
- console.log(sessionDetailList.value, 'sessionDetailList');
- let inputText = sessionDetailList.value[sessionDetailList.value.length-2].content
+ console.log("stopChat");
+ console.log(displayedText.value, "displayedText");
+ console.log(sessionDetailList.value, "sessionDetailList");
+ let inputText = sessionDetailList.value[sessionDetailList.value.length - 2].content;
// 鏁扮粍鍚堝苟
let lastArr = [{
content: inputText,
role: "user"
- },{
+ }, {
content: displayedText.value,
role: "assistant"
- }]
- sessionDetailList.value = sessionDetailList.value.splice(0, sessionDetailList.value.length-2).concat(lastArr);
- console.log(sessionDetailList.value, 'sessionDetailList2');
- console.log(chatObj, 'chatObj瀵硅薄');
+ }];
+ sessionDetailList.value = sessionDetailList.value.splice(0, sessionDetailList.value.length - 2).concat(lastArr);
+
+ console.log(sessionDetailList.value, "sessionDetailList2");
+ console.log(chatObj, "chatObj瀵硅薄");
chatObj.message = chatObj.message.concat(lastArr);
- // clearTimeout(timer!);
- // timer = null;
- // const { code, data } = await addSessionApi(chatObj);
- // if (data) {
- // //鍋滄瀹氭椂鍣�
- // clearTimeout(timer!);
- // timer = null;
- // displayedText.value = "";
- // queryNewSessionDetail(activeSessionId.value);
- // }
+ Object.assign(chatDataMeg,{
+ id:chatObj.id,
+ conversation_id:chatObj.id,
+ message: sessionDetailList.value
+ });
+
+};
+
+const setChatDataMeg = async(chatData) => {
+ const { code, data } = await addSessionApi(chatData);
+ if (data) {
+ //鍋滄瀹氭椂鍣�
+ clearTimeout(timer!);
+ timer = null;
+ // displayedText.value = "";
+ queryNewSessionDetail(activeSessionId.value);
+ }
+};
-}
+
const queryNewSessionDetail = async (id) => {
activeSessionId.value = id;
@@ -795,15 +968,17 @@
}
.chat_bottom {
- display: flex;
- align-items: center;
+ //display: flex;
+ //align-items: center;
width: 78%;
margin: 0 auto;
+ position: relative;
+
.center-bottom {
- // position: absolute;
- // width: 90%;
- // bottom: 20px;
- // left: 5%;
+ //position: absolute;
+ //width: 100%;
+ //bottom: 20px;
+ //left: 5%;
background: #fff;
border: 1px solid #00000014;
border-radius: 24px;
@@ -819,8 +994,8 @@
.btn-send {
position: absolute !important;
- right: 10px;
- top: 110px;
+ right: 4px;
+ top: 90px;
z-index: 10;
}
@@ -945,7 +1120,12 @@
transition: all 0.1s ease;
font-size: 12px;
}
+
.action:hover {
background: var(--color-fill-3);
}
+
+:deep(.arco-upload-list-item-operation) {
+ //display: none;
+}
</style>
--
Gitblit v1.8.0