From 9368577ecd25427bbdff124875c7b7cb55bac90d Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Tue, 21 Jan 2025 20:05:31 +0800
Subject: [PATCH] perf: upload file count(#2029)

---
 .../component/chat-input-operate/index.vue    | 58 ++++++++++++++-----
 .../component/question-content/index.vue      | 57 ++++++++++++------
 2 files changed, 84 insertions(+), 31 deletions(-)

diff --git a/ui/src/components/ai-chat/component/chat-input-operate/index.vue b/ui/src/components/ai-chat/component/chat-input-operate/index.vue
index b134218905a..3580d9bebb7 100644
--- a/ui/src/components/ai-chat/component/chat-input-operate/index.vue
+++ b/ui/src/components/ai-chat/component/chat-input-operate/index.vue
@@ -14,9 +14,22 @@
             uploadVideoList.length
           "
         >
-          <el-space wrap>
-            <template v-for="(item, index) in uploadDocumentList" :key="index">
-              <el-card shadow="never" style="--el-card-padding: 8px" class="file cursor">
+          <el-row :gutter="10">
+            <el-col
+              v-for="(item, index) in uploadDocumentList"
+              :key="index"
+              :xs="24"
+              :sm="12"
+              :md="12"
+              :lg="12"
+              :xl="12"
+              class="mb-8"
+            >
+              <el-card
+                shadow="never"
+                style="--el-card-padding: 8px; max-width: 100%"
+                class="file cursor"
+              >
                 <div
                   class="flex align-center"
                   @mouseenter.stop="mouseenter(item)"
@@ -32,13 +45,22 @@
                     </el-icon>
                   </div>
                   <img :src="getImgUrl(item && item?.name)" alt="" width="24" />
-                  <div class="ml-4 ellipsis" style="max-width: 160px" :title="item && item?.name">
+                  <div class="ml-4 ellipsis-1" :title="item && item?.name">
                     {{ item && item?.name }}
                   </div>
                 </div>
               </el-card>
-            </template>
-            <template v-for="(item, index) in uploadImageList" :key="index">
+            </el-col>
+            <el-col
+              :xs="24"
+              :sm="12"
+              :md="12"
+              :lg="12"
+              :xl="12"
+              class="mb-8"
+              v-for="(item, index) in uploadImageList"
+              :key="index"
+            >
               <div
                 class="file cursor border border-r-4"
                 v-if="item.url"
@@ -62,8 +84,17 @@
                   class="border-r-4"
                 />
               </div>
-            </template>
-            <template v-for="(item, index) in uploadAudioList" :key="index">
+            </el-col>
+            <el-col
+              :xs="24"
+              :sm="12"
+              :md="12"
+              :lg="12"
+              :xl="12"
+              class="mb-8"
+              v-for="(item, index) in uploadAudioList"
+              :key="index"
+            >
               <el-card shadow="never" style="--el-card-padding: 8px" class="file cursor">
                 <div
                   class="flex align-center"
@@ -80,13 +111,13 @@
                     </el-icon>
                   </div>
                   <img :src="getImgUrl(item && item?.name)" alt="" width="24" />
-                  <div class="ml-4 ellipsis" style="max-width: 160px" :title="item && item?.name">
+                  <div class="ml-4 ellipsis-1" :title="item && item?.name">
                     {{ item && item?.name }}
                   </div>
                 </div>
               </el-card>
-            </template>
-          </el-space>
+            </el-col>
+          </el-row>
         </div>
       </el-scrollbar>
       <div class="flex">
@@ -119,8 +150,7 @@
               <el-tooltip effect="dark" placement="top" popper-class="upload-tooltip-width">
                 <template #content>
                   <div class="break-all pre-wrap">
-                    {{ $t('chat.uploadFile.label') }}：{{
-                      $t('chat.uploadFile.most')
+                    {{ $t('chat.uploadFile.label') }}：{{ $t('chat.uploadFile.most')
                     }}{{ props.applicationDetails.file_upload_setting.maxFiles
                     }}{{ $t('chat.uploadFile.limit') }}
                     {{ props.applicationDetails.file_upload_setting.fileLimit }}MB<br />{{
@@ -191,7 +221,7 @@ import { t } from '@/locales'
 const router = useRouter()
 const route = useRoute()
 const {
-  query: { mode, question },
+  query: { mode, question }
 } = route as any
 const quickInputRef = ref()
 const props = withDefaults(
diff --git a/ui/src/components/ai-chat/component/question-content/index.vue b/ui/src/components/ai-chat/component/question-content/index.vue
index 88f9ce85068..20ada39505c 100644
--- a/ui/src/components/ai-chat/component/question-content/index.vue
+++ b/ui/src/components/ai-chat/component/question-content/index.vue
@@ -16,8 +16,17 @@
     <div class="content">
       <div class="text break-all pre-wrap">
         <div class="mb-8" v-if="document_list.length">
-          <el-space wrap>
-            <template v-for="(item, index) in document_list" :key="index">
+          <el-row :gutter="10">
+            <el-col
+              v-for="(item, index) in document_list"
+              :key="index"
+              :xs="24"
+              :sm="12"
+              :md="12"
+              :lg="12"
+              :xl="12"
+              class="mb-8 w-full"
+            >
               <el-card shadow="never" style="--el-card-padding: 8px" class="download-file cursor">
                 <div class="download-button flex align-center" @click="downloadFile(item)">
                   <el-icon class="mr-4">
@@ -27,17 +36,26 @@
                 </div>
                 <div class="show flex align-center">
                   <img :src="getImgUrl(item && item?.name)" alt="" width="24" />
-                  <div class="ml-4 ellipsis" style="max-width: 150px" :title="item && item?.name">
+                  <div class="ml-4 ellipsis-1" :title="item && item?.name">
                     {{ item && item?.name }}
                   </div>
                 </div>
               </el-card>
-            </template>
-          </el-space>
+            </el-col>
+          </el-row>
         </div>
         <div class="mb-8" v-if="image_list.length">
-          <el-space wrap>
-            <template v-for="(item, index) in image_list" :key="index">
+          <el-row :gutter="10">
+            <el-col
+              v-for="(item, index) in image_list"
+              :key="index"
+              :xs="24"
+              :sm="12"
+              :md="12"
+              :lg="12"
+              :xl="12"
+              class="mb-8"
+            >
               <div class="file cursor border-r-4" v-if="item.url">
                 <el-image
                   :src="item.url"
@@ -52,12 +70,21 @@
                   class="border-r-4"
                 />
               </div>
-            </template>
-          </el-space>
+            </el-col>
+          </el-row>
         </div>
         <div class="mb-8" v-if="audio_list.length">
-          <el-space wrap>
-            <template v-for="(item, index) in audio_list" :key="index">
+          <el-row :gutter="10">
+            <el-col
+              v-for="(item, index) in audio_list"
+              :key="index"
+              :xs="24"
+              :sm="12"
+              :md="12"
+              :lg="12"
+              :xl="12"
+              class="mb-8"
+            >
               <div class="file cursor border-r-4" v-if="item.url">
                 <audio
                   :src="item.url"
@@ -66,8 +93,8 @@
                   class="border-r-4"
                 />
               </div>
-            </template>
-          </el-space>
+            </el-col>
+          </el-row>
         </div>
         {{ chatRecord.problem_text }}
       </div>
@@ -119,7 +146,6 @@ onMounted(() => {})
 </script>
 <style lang="scss" scoped>
 .download-file {
-  width: 200px;
   height: 43px;
 
   &:hover {
@@ -137,9 +163,6 @@ onMounted(() => {})
     }
   }
 
-  .show {
-    display: block;
-  }
 
   .download-button {
     display: none;