From cd8ea3d115de633ecf0f65febe51013e762ecb8f Mon Sep 17 00:00:00 2001
From: liudong <liudong>
Date: 星期六, 24 八月 2024 13:13:30 +0800
Subject: [PATCH] 多文件上传解析方法修改

---
 src/views/sessionManager/index.vue |  669 ++++++++++++++++++++++++++++++++++++++++++++++---------
 1 files changed, 554 insertions(+), 115 deletions(-)

diff --git a/src/views/sessionManager/index.vue b/src/views/sessionManager/index.vue
index d2a6492..a7b426d 100644
--- a/src/views/sessionManager/index.vue
+++ b/src/views/sessionManager/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="container">
+  <div class="container" id="container">
     <!--    <AddSession-->
     <!--      :modalObj="modalObj"-->
     <!--      @addSession="addSession"-->
@@ -20,7 +20,34 @@
           <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
+                    >
+                    <span style="
+                       width: 100px;
+                      overflow: hidden;
+                      text-overflow: ellipsis;
+                      white-space: nowrap;
+                    ">{{ from.name }}</span>
+                    <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>
@@ -29,13 +56,16 @@
             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
@@ -59,13 +89,67 @@
                   />
                 </template>
                 <template #content>
-                  <a-card :class="{ chatItemAnswer: theme === 'light' }">
-                    <div
-                      :class="{ light: theme === 'light' }"
-                      v-html="sessionDetail.content.replace(/\n/g, '<br/>')"
-                    >
+                  <!--                  <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>
+                <!-- <div>{{ sessionDetail.role === 'assistant' }}</div> -->
+                <template #actions>
+                  <!-- <div
+                    v-for="(item, leng) in messagenList.reference"
+                    :key="leng"
+                  > -->
+                  <div>
+                    <div>
+                      <template
+                        v-for="(v, lix) in getTxt(
+                          messagenList.reference,
+                          sessionDetail.role,
+                          sessionDetail.content,
+                          index
+                        )"
+                        :key="lix"
+                      >
+                        <div class="icon-box" @click="clickHref(v)">
+                          <div>
+                            <img :src="getIconByExtension(v.doc_name)" alt="" />
+                          </div>
+                          <div class="icon-text"> {{ v.doc_name }} </div>
+                        </div>
+                      </template>
                     </div>
-                  </a-card>
+                  </div>
+
+                  <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'">
@@ -82,8 +166,34 @@
                     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="icon-box">
+                    <div>
+                      <img :src="getIconByExtension('pdf')" alt="" />
+                    </div>
+                    <div class="icon-text"> 鏂囦欢绫诲瀷 </div>
+                  </div> -->
+                  <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>
@@ -92,6 +202,7 @@
             >
             <div class="chartStart v-else" @click="stopChat">閲嶆柊鐢熸垚</div> -->
           </a-scrollbar>
+
           <div class="chat_bottom">
             <div class="center-bottom">
               <!-- <a-textarea
@@ -113,22 +224,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" /> -->
+              <div style="width: 100%;display: flex;justify-content: space-between">
+                <updataFile ref="fileInput" :sessionId="activeSessionId" @selectFileCallback="selectFileCallback"></updataFile>
                 <a-button
                   :disabled="chatDis"
                   @click="sentClick"
-                  type="primary"
+                  type="text"
                   style="border-radius: 24px"
                   :loading="loading"
-                  size="large"
-                  >鍙戦��
+                >
+                  <icon-send size="32" style="color: #0960bd" />
                 </a-button>
+              </div>
+            </div>
+            <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;
+                    font-size: 12px;
+                  "
+                >
+                  <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>
@@ -157,14 +317,39 @@
         </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="from"
+        @submit="handleSubmit"
+      >
+        <a-form-item field="name" label="鍚嶇О">
+          <a-input v-model="from.name" 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">
-  import {
-    IconClose,
-    IconSearch,
-    IconTiktokColor,
-  } from '@arco-design/web-vue/es/icon';
   import { useAppStore, useUserStore } from '@/store';
   import {
     computed,
@@ -185,6 +370,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 updataFile from '@/views/sessionManager/components/updataFile.vue';
   import EventBus from '@/utils/EventBus';
   import {
     addSessionApi,
@@ -192,12 +378,22 @@
     getDialogListApi,
     getSessionDetailsApi,
     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';
+  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';
+
+  // const url = ref('../../assets/session/PDF.png');
 
   const sessionDetailList = ref([]); //鏍规嵁浼氳瘽id鍑烘潵鐨勪細璇濊鎯�
+  const messagenList = ref({});
   const sessionList = ref([]); //浼氳瘽鍒楄〃
   const modalObj = reactive({ add: false });
   const dialogId = ref('');
@@ -205,7 +401,11 @@
   const loading = ref(false);
   const agentType = ref('1');
   const agentTitle = ref('鏈懡鍚嶄細璇�');
-
+  let chatObj = reactive({});
+  let from = reactive({
+    name:'鏈懡鍚嶄細璇�',
+  });
+  const isStopChat = ref(false);
   const currIndex = ref(0);
   const displayedText = ref(''); // 姝e湪鏄剧ず鐨勬枃瀛�
   let timer: number | null = null;
@@ -219,6 +419,140 @@
   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);
+  let toStop = false;
+
+  const rules = {
+    name: [
+      {
+        required: true,
+        message: '鍚嶇О涓嶅厑璁镐负绌�',
+      },
+    ],
+  };
+
+  const handleSubmit = async ({ values, errors }) => {
+    if (errors) return;
+    let chatData = {
+      id: chatObj.id,
+      conversation_id: chatObj.id,
+      name: from.name,
+    };
+    const { code, data } = await addSessionApi(chatData);
+    if (data) {
+      Message.success('淇敼鎴愬姛');
+      handleCancel();
+      queryNewSessionDetail(activeSessionId.value);
+    }
+  };
+  let dataItem = [];
+  const getTxt = (data, role, message, index) => {
+    if (/##[0-9]\$\$/.test(message)) {
+      if (role == 'assistant' && index) {
+        let i = index / 2 - 1 > 0 ? index / 2 - 1 : 0;
+        dataItem = data[i].doc_aggs;
+      }
+    } else {
+      dataItem = [];
+    }
+
+    return dataItem;
+  };
+
+  const clickHref = (item) => {
+    // return Message.warning('鏆傛棤娉曟煡鐪�');
+    // window.open(`/api/v1/document/get/${item.doc_id}`, '_blank');
+    downloadFile({
+      url: `/api/v1/document/get/${item.doc_id}`,
+      filename: item.doc_name,
+    });
+  };
+
+   const downloadFile = ({
+                                 url,
+                                 filename,
+                                 target,
+                               }: {
+    url: string;
+    filename?: string;
+    target?: string;
+  }) => {
+    const downloadElement = document.createElement('a');
+    downloadElement.style.display = 'none';
+    downloadElement.href = url;
+    if (target) {
+      downloadElement.target = '_blank';
+    }
+    downloadElement.rel = 'noopener noreferrer';
+    if (filename) {
+      downloadElement.download = filename;
+    }
+    document.body.appendChild(downloadElement);
+    downloadElement.click();
+    document.body.removeChild(downloadElement);
+  };
+
+  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':
+        return pdfImg2; // Word鍥炬爣鐨刄RL
+      case 'xlsx':
+      case 'xls':
+        return pdfImg3; // Excel鍥炬爣鐨刄RL
+      case 'txt':
+        return pdfImg4; // 鏂囨湰鏂囨。鍥炬爣鐨刄RL
+      default:
+        return pdfImg5; // 榛樿鍥炬爣
+    }
+  });
+
+  const handleClick = () => {
+    visible.value = true;
+  };
+  const handleCancel = () => {
+    visible.value = false;
+  };
+
+  const handleOpened = (el) => {
+    // Object.assign(form,{
+    //   name: '',// 鐢ㄦ埛鍚�
+    // });
+    // formRef.value.resetFields();
+  };
+
+  const selectFileCallback = (data) => {
+    console.log(data, 'selectFileCallback');
+    uploaditemList.value = data;
+  };
+
+  let onFileSelectedLoading = ref(false);
+
+  const deleteFile = (item) => {
+    console.log(uploaditemList.value);
+    uploaditemList.value = [];
+  };
+
+  const { toClipboard } = useClipboard();
+  const copy = async (text) => {
+    await toClipboard(text); //鍙傛暟涓鸿澶嶅埗鐨勬枃鏈�
+  };
+
+
+
   const DialogList = async () => {
     const { code, data } = await getDialogListApi();
     if (code === 200) {
@@ -285,29 +619,18 @@
     event.preventDefault();
     inputMsg.value += '\n';
   };
-  const dialogChange = (val) => {
-    // 鍒ゆ柇褰撳墠鏄櫤鑳戒綋鎴朼gent
-    // console.log(val, 'val');
-    dialogId.value = val;
-    dialogs.value.forEach((item) => {
-      if (item.id === val) {
-        Object.assign(dialogObj, item);
-      }
-    });
-    console.log(dialogObj.type, 'dialogObj');
-    if (dialogObj.type == 1) {
-      agentType.value = 1;
-      querySessionList();
-    } else {
-      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) {
@@ -316,81 +639,145 @@
           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,
-              }),
-            }
-          );
+          startChat(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;
           inputMsg.value = '';
         } else {
           Message.warning('娑堟伅涓嶈兘涓虹┖');
-          chatDis.value = false;
-          loading.value = false;
         }
       }
+    }
+  };
+
+  const startChat = async (valMsg) => {
+    chatDis.value = true;
+    loading.value = true;
+    toStop = false;
+    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) {
+      if (toStop) {
+        displayedText.value = '';
+        setChatDataMeg(chatDataMeg);
+        break;
+      }
+      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;
+    toStop = 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);
     }
   };
 
@@ -399,9 +786,13 @@
     const { code, data } = await getSessionDetailsApi(id);
     if (code === 200) {
       console.log(data, '鏂板缓浼氳瘽璇︽儏');
+      Object.assign(chatObj, data);
       sessionDetailList.value = data.message;
+      messagenList.value = data;
       agentTitle.value = data.name;
+      from.name = data.name;
       refreshScroll(); //鍒锋柊婊氬姩鏉′綅缃�
+      isStopChat.value = false;
     }
   };
 
@@ -413,9 +804,11 @@
   const querySessionDetail = async (session) => {
     sectionList.value = session;
     activeSessionId.value = session.id;
+    from.name = session.name;
     const { code, data } = await getSessionDetailsApi(session.id);
     if (code === 200) {
       sessionDetailList.value = data.message;
+      messagenList.value = data;
       refreshScroll(); //鍒锋柊婊氬姩鏉′綅缃�
     }
   };
@@ -467,8 +860,13 @@
     createSession('');
   });
   onMounted(() => {
+    let container = document.getElementById('container');
+    container.addEventListener('click', () => {
+      fileInput.value.cancel();
+
+    })
     EventBus.on('newChat', () => {
-      agentType.value = 1;
+      agentType.value = '1';
       createSession('');
     });
   });
@@ -537,8 +935,8 @@
 
     .left {
       /* height: calc(100vh - 160px);
-    overflow-y: auto;
-    overflow-x: hidden;*/
+  overflow-y: auto;
+  overflow-x: hidden;*/
       border: 0px;
 
       .left-list {
@@ -654,14 +1052,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;
@@ -677,8 +1078,8 @@
 
           .btn-send {
             position: absolute !important;
-            right: 10px;
-            bottom: 10px;
+            right: 4px;
+            top: 90px;
             z-index: 10;
           }
 
@@ -706,6 +1107,20 @@
 
       .icon-user-jpg {
         border: 1px solid #d9d9d9;
+      }
+      .icon-box {
+        display: flex;
+        align-items: center;
+        box-sizing: border-box;
+        background: var(--color-bg-1);
+        border: 1px solid var(--color-border-2);
+        padding: 10px;
+        border-radius: 14px;
+        min-width: 200px;
+        cursor: pointer;
+        .icon-text {
+          margin-left: 10px;
+        }
       }
     }
 
@@ -761,6 +1176,7 @@
       }
     }
   }
+
   .header___lEPyH {
     width: 100%;
     height: 46px;
@@ -770,6 +1186,7 @@
     align-items: center;
     justify-content: center;
     -webkit-backdrop-filter: blur(15px);
+
     .chatHeaderBox {
       width: auto;
       border-radius: 8px;
@@ -781,10 +1198,32 @@
       text-overflow: ellipsis; /* 浣跨敤鐪佺暐鍙锋潵浠f浛琚殣钘忕殑鏂囧瓧 */
       white-space: nowrap; /* 涓嶆崲琛岋紝浣垮唴瀹瑰湪涓�琛屽唴鏄剧ず */
       max-width: 200px;
+
       .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