From 5631aab9e380b83ec8ec6e21390e9386b0e0e852 Mon Sep 17 00:00:00 2001
From: liudong <liudong>
Date: 星期一, 19 八月 2024 20:45:58 +0800
Subject: [PATCH] 智能体会话名称修改

---
 src/views/sessionManager/index.vue |  590 +++++++++++++++++++++++++++++++++++++++++++++++-----------
 1 files changed, 473 insertions(+), 117 deletions(-)

diff --git a/src/views/sessionManager/index.vue b/src/views/sessionManager/index.vue
index 35ac0f4..a0a759e 100644
--- a/src/views/sessionManager/index.vue
+++ b/src/views/sessionManager/index.vue
@@ -1,14 +1,18 @@
 <template>
   <div class="container">
-<!--    <AddSession-->
-<!--      :modalObj="modalObj"-->
-<!--      @addSession="addSession"-->
-<!--      :dialogId="dialogId"-->
-<!--    ></AddSession>-->
+    <!--    <AddSession-->
+    <!--      :modalObj="modalObj"-->
+    <!--      @addSession="addSession"-->
+    <!--      :dialogId="dialogId"-->
+    <!--    ></AddSession>-->
     <!--    <a-card class="top-title">AI浼氳瘽璁板綍</a-card>-->
-    <a-row :gutter="[5, 5]" style="margin-top: 3px;">
+    <a-row :gutter="[5, 5]" style="margin-top: 3px">
       <a-col :span="1">
-        <chatMenu @createSession="createSession" @querySessionDetail="querySessionDetail" @changeAgentType="changeAgentType"></chatMenu>
+        <chatMenu
+          @createSession="createSession"
+          @querySessionDetail="querySessionDetail"
+          @changeAgentType="changeAgentType"
+        ></chatMenu>
       </a-col>
       <!--      鏅鸿兘浣撲細璇�-->
       <a-col :span="23" v-show="agentType == '1'">
@@ -16,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>
@@ -25,13 +54,13 @@
             id="home"
             class="chat-list"
             style="
-              width: 90%;
+              width: 80%;
               overflow: auto;
-              height: calc(100vh - 300px);
+              height: calc(100vh - 380px);
               margin: 0px auto 20px;
             "
           >
-            <div class="chat-item" v-for="sessionDetail in sessionDetailList">
+            <div class="chat-item" v-for="(sessionDetail,index) in sessionDetailList">
               <a-comment v-if="sessionDetail.role === 'user'">
                 <template #avatar>
                   <img
@@ -55,11 +84,30 @@
                   />
                 </template>
                 <template #content>
-                  <a-card :class="{ chatItemAnswer: theme === 'light' }">
-                    <div :class="{ light: theme === 'light' }"
-                    >{{ sessionDetail.content }}
-                    </div>
-                  </a-card>
+                  <!--                  <a-card :class="{ chatItemAnswer: theme === 'light' }">-->
+                  <!--                    <div-->
+                  <!--                      :class="{ light: theme === 'light' }"-->
+                  <!--                      v-html="sessionDetail.content.replace(/\n/g, '<br/>')"-->
+                  <!--                    >-->
+                  <!--                    </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>
+                </template>
+                <template #actions>
+                  <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()">
+                     <icon-refresh /> 閲嶆柊鐢熸垚
+                  </span>
                 </template>
               </a-comment>
               <a-comment v-else-if="sessionDetail.role === 'last'">
@@ -76,8 +124,19 @@
                     auto-size
                     v-model="displayedText"
                     :class="{ chatItemAnswer: theme === 'light' }"
+                    :style="{backgroundColor: theme === 'light' ? '#ffffff' : '#000000'}"
+                    style="border: none"
                   >
                   </a-textarea>
+                </template>
+                <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 />
+                    鍋滄鐢熸垚
+                  </div>
                 </template>
               </a-comment>
             </div>
@@ -86,6 +145,7 @@
             >
             <div class="chartStart v-else" @click="stopChat">閲嶆柊鐢熸垚</div> -->
           </a-scrollbar>
+
           <div class="chat_bottom">
             <div class="center-bottom">
               <!-- <a-textarea
@@ -107,23 +167,71 @@
                 show-word-limit
                 :disabled="chatDis"
                 :class="{ textItemAnswer: theme === 'dark' }"
+                :style="{backgroundColor: theme === 'light' ? '#ffffff' : '#000000'}"
+                style="border: none"
                 :auto-size="{
                   minRows: 12,
                   maxRows: 5,
                 }"
               />
+
               <div class="btn-send">
-                <!-- <icon-send size="32" /> -->
                 <a-button
                   :disabled="chatDis"
                   @click="sentClick"
-                  type="primary"
+                  type="text"
                   style="border-radius: 24px"
                   :loading="loading"
-                  size="large"
-                >鍙戦��
-                </a-button
                 >
+                  <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>
@@ -136,15 +244,35 @@
       </a-col>
       <a-col :span="23" v-show="agentType == '3'">
         <div class="center" style="padding: 0">
-          <historySession @querySessionDetail="querySessionDetail" @changeAgentType="changeAgentType"></historySession>
+          <historySession
+            @querySessionDetail="querySessionDetail"
+            @changeAgentType="changeAgentType"
+          ></historySession>
         </div>
       </a-col>
       <a-col :span="23" v-show="agentType == '4'">
         <div class="center" style="padding: 0">
-          <smartAi @createSession="createSession" @querySessionDetail="querySessionDetail" @changeAgentType="changeAgentType"></smartAi>
+          <smartAi
+            @createSession="createSession"
+            @querySessionDetail="querySessionDetail"
+            @changeAgentType="changeAgentType"
+          ></smartAi>
         </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">
@@ -154,7 +282,16 @@
   IconTiktokColor
 } from "@arco-design/web-vue/es/icon";
 import { useAppStore, useUserStore } from "@/store";
-import { computed, nextTick, onMounted, watch, reactive, ref, onBeforeMount, onBeforeUnmount } from "vue";
+import {
+  computed,
+  nextTick,
+  onMounted,
+  watch,
+  reactive,
+  ref,
+  onBeforeMount,
+  onBeforeUnmount
+} from "vue";
 
 import { Message } from "@arco-design/web-vue";
 import { EventSourceParserStream } from "eventsource-parser/stream";
@@ -164,17 +301,19 @@
 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,
   chatApi,
   getDialogListApi,
   getSessionDetailsApi,
-  sessionListApi
+  sessionListApi, uploadWithoutKb
 } from "@/api/session";
 import { getAuthorization } from "@/utils/auth";
 import { queryCanvasList } from "@/api/Agent";
 import { getAgentSessionDetailsApi } from "@/api/agentSession";
+import useClipboard from "vue-clipboard3";
 
 const sessionDetailList = ref([]); //鏍规嵁浼氳瘽id鍑烘潵鐨勪細璇濊鎯�
 const sessionList = ref([]); //浼氳瘽鍒楄〃
@@ -184,7 +323,8 @@
 const loading = ref(false);
 const agentType = ref("1");
 const agentTitle = ref("鏈懡鍚嶄細璇�");
-
+let chatObj = reactive({});
+const isStopChat = ref(false);
 const currIndex = ref(0);
 const displayedText = ref(""); // 姝e湪鏄剧ず鐨勬枃瀛�
 let timer: number | null = null;
@@ -198,6 +338,132 @@
 const agentList = ref([]);
 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 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);
+        console.log(uploadList.value);
+        fileItem.status = "done";
+        // uploadList.value = [];
+      } else {
+        fileItem.status = "error";
+      }
+    });
+  }
+
+};
+
+
 const DialogList = async () => {
   const { code, data } = await getDialogListApi();
   if (code === 200) {
@@ -236,19 +502,15 @@
     // }
     //鏂板缓浼氳瘽
     createSession(dialogs.value[0].id);
-
-
   } catch (err) {
     // you can report use errorHandler or other
   } finally {
   }
 };
 // 鏂板缓浼氳瘽
-const createSession = async (id,name='鏈懡鍚嶄細璇�') => {
+const createSession = async (id, name = "鏈懡鍚嶄細璇�") => {
   // 濡傛灉鏈変細璇漣d
-  console.log(name, '鏂板缓浼氳瘽鍚嶇О');
-
-
+  console.log(name, "鏂板缓浼氳瘽鍚嶇О");
 
   const res = await addSessionApi({
     dialog_id: id,
@@ -262,9 +524,7 @@
   } else {
     Message.error("鍒涘缓浼氳瘽澶辫触锛岃閲嶈瘯");
   }
-
 };
-
 
 const handleShiftEnter = (event) => {
   event.preventDefault();
@@ -281,18 +541,26 @@
   });
   console.log(dialogObj.type, "dialogObj");
   if (dialogObj.type == 1) {
-    agentType.value = 1;
+    agentType.value = "1";
     querySessionList();
   } else {
-    agentType.value = 2;
+    agentType.value = "2";
     queryAgentSessionList();
   }
 
   // querySessionList();
 };
+
+// 鍙戦��
 const sentClick = () => {
   sendMessage("click");
 };
+// 閲嶆柊鐢熸垚
+const reGenerate = () => {
+  let inputContent = sessionDetailList.value[sessionDetailList.value.length - 2].content;
+  startChat(inputContent);
+};
+
 const sendMessage = async (event) => {
   if (event.keyCode == 13 || event === "click") {
     if (!event.shiftKey) {
@@ -301,99 +569,160 @@
         event.preventDefault(); // 闃绘榛樿琛屼负锛屽嵆涓嶆崲琛�
       }
 
-      chatDis.value = true;
-      loading.value = true;
-      if (!activeSessionId.value) {
-        Message.warning("璇烽�夋嫨浼氳瘽");
-        chatDis.value = false;
-        loading.value = false;
-        return;
-      }
+
+      // if (!activeSessionId.value) {
+      //   Message.warning("璇烽�夋嫨浼氳瘽");
+      //   chatDis.value = false;
+      //   loading.value = false;
+      //   return;
+      // }
 
       // if (displayedText.value) {
       //   querySessionList();
       // }
 
       if (inputMsg.value) {
-        sessionDetailList.value.push({
-          content: inputMsg.value,
-          role: "user"
-        });
-        sessionDetailList.value.push({ role: "last" });
-        refreshScroll();
-        const response = await fetch(
-          "/api/tech/cloudminds/query?modeltype=localragflow",
-          {
-            method: "POST",
-            headers: {
-              "Authorization": getAuthorization(),
-              "Content-Type": "application/json"
-            },
-            body: JSON.stringify({
-              conversation_id: activeSessionId.value,
-              messages: inputMsg.value
-            })
-          }
-        );
 
-        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;
-            console.log(x, 999);
-            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 = "";
-              queryNewSessionDetail(activeSessionId.value);
-              EventBus.emit('queryAppUsageList');
-              break;
-            }
-          }
-        }
-        // querySessionList();
-        chatDis.value = false;
-        loading.value = false;
+        startChat(inputMsg.value);
+
         inputMsg.value = "";
       } else {
         Message.warning("娑堟伅涓嶈兘涓虹┖");
-        chatDis.value = false;
-        loading.value = false;
       }
     }
   }
 };
+
+const startChat = async (valMsg) => {
+  chatDis.value = true;
+  loading.value = true;
+  sessionDetailList.value.push({
+    content: valMsg,
+    role: "user"
+  });
+  sessionDetailList.value.push({ role: "last" });
+  refreshScroll();
+  const response = await fetch(
+    "/api/tech/cloudminds/query?modeltype=localragflow",
+    {
+      method: "POST",
+      headers: {
+        "Authorization": getAuthorization(),
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({
+        conversation_id: activeSessionId.value,
+        messages: valMsg
+      })
+    }
+  );
+
+  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;
+      // console.log(x, 999);
+      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 = "";
+        if(isStopChat.value){
+          setChatDataMeg(chatDataMeg);
+        }else{
+          queryNewSessionDetail(activeSessionId.value);
+          EventBus.emit("queryAppUsageList");
+        }
+        break;
+      }
+    }
+  }
+  // querySessionList();
+  chatDis.value = false;
+  loading.value = false;
+};
+
+
+
+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;
+  // 鏁扮粍鍚堝苟
+  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瀵硅薄");
+  chatObj.message = chatObj.message.concat(lastArr);
+  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;
   const { code, data } = await getSessionDetailsApi(id);
   if (code === 200) {
     console.log(data, "鏂板缓浼氳瘽璇︽儏");
+    Object.assign(chatObj, data);
     sessionDetailList.value = data.message;
     agentTitle.value = data.name;
     refreshScroll(); //鍒锋柊婊氬姩鏉′綅缃�
+    isStopChat.value = false;
   }
 };
 
-const changeAgentType = (val,session) => {
+const changeAgentType = (val, session) => {
   agentType.value = val;
   console.log(val, "val");
-}
+};
 
 const querySessionDetail = async (session) => {
   sectionList.value = session;
@@ -449,12 +778,12 @@
 onBeforeMount(() => {
   // DialogList();
   //鏂板缓浼氳瘽
-  createSession('');
+  createSession("");
 });
 onMounted(() => {
   EventBus.on("newChat", () => {
-    agentType.value = 1;
-    createSession('');
+    agentType.value = "1";
+    createSession("");
   });
 });
 onBeforeUnmount(() => {
@@ -522,8 +851,8 @@
 
   .left {
     /* height: calc(100vh - 160px);
-    overflow-y: auto;
-    overflow-x: hidden;*/
+  overflow-y: auto;
+  overflow-x: hidden;*/
     border: 0px;
 
     .left-list {
@@ -639,14 +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;
@@ -662,8 +994,8 @@
 
         .btn-send {
           position: absolute !important;
-          right: 10px;
-          bottom: 10px;
+          right: 4px;
+          top: 90px;
           z-index: 10;
         }
 
@@ -746,6 +1078,7 @@
     }
   }
 }
+
 .header___lEPyH {
   width: 100%;
   height: 46px;
@@ -755,6 +1088,7 @@
   align-items: center;
   justify-content: center;
   -webkit-backdrop-filter: blur(15px);
+
   .chatHeaderBox {
     width: auto;
     border-radius: 8px;
@@ -762,14 +1096,36 @@
     transition: all var(--animation-duration) var(--animation-transition);
     display: flex;
     align-items: flex-end;
-    overflow: hidden;        /* 闅愯棌瓒呭嚭鐨勫唴瀹� */
+    overflow: hidden; /* 闅愯棌瓒呭嚭鐨勫唴瀹� */
     text-overflow: ellipsis; /* 浣跨敤鐪佺暐鍙锋潵浠f浛琚殣钘忕殑鏂囧瓧 */
-    white-space: nowrap;     /* 涓嶆崲琛岋紝浣垮唴瀹瑰湪涓�琛屽唴鏄剧ず */
+    white-space: nowrap; /* 涓嶆崲琛岋紝浣垮唴瀹瑰湪涓�琛屽唴鏄剧ず */
     max-width: 200px;
-    .title{
+
+    .title {
       color: var(--color-text-1);
       font-size: 12px;
     }
   }
 }
+
+.action {
+  cursor: pointer;
+  display: inline-block;
+  padding: 0 10px;
+  color: var(--color-text-1);
+  line-height: 24px;
+  background: transparent;
+  border-radius: 2px;
+  cursor: pointer;
+  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