From 8a194481ac9c14b6f5b4a02c81644cf3c8659fc5 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <79562285+wangdan-fit2cloud@users.noreply.github.com>
Date: Tue, 22 Apr 2025 11:12:42 +0800
Subject: [PATCH] feat: Adjust file upload and add other file function styles
 (#2944)

---
 ui/src/components/markdown/MdRenderer.vue     |  9 +--
 ui/src/locales/lang/en-US/common.ts           |  4 +-
 .../lang/en-US/views/application-workflow.ts  |  3 +-
 ui/src/locales/lang/zh-CN/common.ts           |  2 +-
 .../lang/zh-CN/views/application-workflow.ts  |  6 +-
 ui/src/locales/lang/zh-Hant/common.ts         |  2 +-
 .../zh-Hant/views/application-workflow.ts     |  3 +-
 .../component/FileUploadSettingDialog.vue     | 71 ++++++++++++-------
 8 files changed, 60 insertions(+), 40 deletions(-)

diff --git a/ui/src/components/markdown/MdRenderer.vue b/ui/src/components/markdown/MdRenderer.vue
index 5761bce44..e2fc4ee90 100644
--- a/ui/src/components/markdown/MdRenderer.vue
+++ b/ui/src/components/markdown/MdRenderer.vue
@@ -6,10 +6,10 @@
       <div
         v-if="item.type === 'question'"
         @click="sendMessage ? sendMessage(item.content, 'new') : (content: string) => {}"
-        class="problem-button ellipsis-2 mt-4 mb-4"
+        class="problem-button mt-4 mb-4 flex"
         :class="sendMessage ? 'cursor' : 'disabled'"
       >
-        <el-icon>
+        <el-icon class="mr-8" style="margin-top: 2px;">
           <EditPen />
         </el-icon>
         {{ item.content }}
@@ -234,12 +234,9 @@ const split_form_rander_ = (source: string, type: string) => {
   border: none;
   border-radius: 8px;
   background: var(--app-layout-bg-color);
-  height: 46px;
-  padding: 0 12px;
-  line-height: 46px;
+  padding: 12px;
   box-sizing: border-box;
   color: var(--el-text-color-regular);
-  -webkit-line-clamp: 1;
   word-break: break-all;
 
   &:hover {
diff --git a/ui/src/locales/lang/en-US/common.ts b/ui/src/locales/lang/en-US/common.ts
index 4e96b7069..aa6e74795 100644
--- a/ui/src/locales/lang/en-US/common.ts
+++ b/ui/src/locales/lang/en-US/common.ts
@@ -46,8 +46,8 @@ export default {
     image: 'Image',
     audio: 'Audio',
     video: 'Video',
-    other: 'Other file',
-    addExtensions: 'Add file extensions',
+    other: 'Other',
+    addExtensions: 'Add suffix'
   },
   status: {
     label: 'Status',
diff --git a/ui/src/locales/lang/en-US/views/application-workflow.ts b/ui/src/locales/lang/en-US/views/application-workflow.ts
index e4385ea37..36ae08391 100644
--- a/ui/src/locales/lang/en-US/views/application-workflow.ts
+++ b/ui/src/locales/lang/en-US/views/application-workflow.ts
@@ -104,7 +104,8 @@ export default {
           label: 'File types allowed for upload',
           documentText: 'Requires "Document Content Extraction" node to parse document content',
           imageText: 'Requires "Image Understanding" node to parse image content',
-          audioText: 'Requires "Speech-to-Text" node to parse audio content'
+          audioText: 'Requires "Speech-to-Text" node to parse audio content',
+          otherText: 'Need to parse this type of file by yourself'
         }
       }
     },
diff --git a/ui/src/locales/lang/zh-CN/common.ts b/ui/src/locales/lang/zh-CN/common.ts
index a3b3b8409..cc8af067e 100644
--- a/ui/src/locales/lang/zh-CN/common.ts
+++ b/ui/src/locales/lang/zh-CN/common.ts
@@ -47,7 +47,7 @@ export default {
     audio: '音频',
     video: '视频',
     other: '其他文件',
-    addExtensions: '添加文件扩展名',
+    addExtensions: '添加后缀名',
   },
   status: {
     label: '状态',
diff --git a/ui/src/locales/lang/zh-CN/views/application-workflow.ts b/ui/src/locales/lang/zh-CN/views/application-workflow.ts
index 4c5a19d76..5f4a4e012 100644
--- a/ui/src/locales/lang/zh-CN/views/application-workflow.ts
+++ b/ui/src/locales/lang/zh-CN/views/application-workflow.ts
@@ -105,8 +105,10 @@ export default {
           label: '上传的文件类型',
           documentText: '需要使用“文档内容提取”节点解析文档内容',
           imageText: '需要使用“视觉模型”节点解析图片内容',
-          audioText: '需要使用“语音转文本”节点解析音频内容'
-        }
+          audioText: '需要使用“语音转文本”节点解析音频内容',
+          otherText: '需要自行解析该类型文件'
+        },
+        
       }
     },
     aiChatNode: {
diff --git a/ui/src/locales/lang/zh-Hant/common.ts b/ui/src/locales/lang/zh-Hant/common.ts
index c1a1f93a0..6fe33c876 100644
--- a/ui/src/locales/lang/zh-Hant/common.ts
+++ b/ui/src/locales/lang/zh-Hant/common.ts
@@ -47,7 +47,7 @@ export default {
     audio: '音頻',
     video: '視頻',
     other: '其他文件',
-    addExtensions: '添加文件擴展名'
+    addExtensions: '添加後綴名',
   },
   status: {
     label: '狀態',
diff --git a/ui/src/locales/lang/zh-Hant/views/application-workflow.ts b/ui/src/locales/lang/zh-Hant/views/application-workflow.ts
index 60269c021..0951a54f8 100644
--- a/ui/src/locales/lang/zh-Hant/views/application-workflow.ts
+++ b/ui/src/locales/lang/zh-Hant/views/application-workflow.ts
@@ -105,7 +105,8 @@ export default {
           label: '上傳的文件類型',
           documentText: '需要使用「文檔內容提取」節點解析文檔內容',
           imageText: '需要使用「圖片理解」節點解析圖片內容',
-          audioText: '需要使用「語音轉文本」節點解析音頻內容'
+          audioText: '需要使用「語音轉文本」節點解析音頻內容',
+          otherText: '需要自行解析該類型文件'
         }
       }
     },
diff --git a/ui/src/workflow/nodes/base-node/component/FileUploadSettingDialog.vue b/ui/src/workflow/nodes/base-node/component/FileUploadSettingDialog.vue
index c22043fa3..f05171439 100644
--- a/ui/src/workflow/nodes/base-node/component/FileUploadSettingDialog.vue
+++ b/ui/src/workflow/nodes/base-node/component/FileUploadSettingDialog.vue
@@ -7,7 +7,7 @@
     :destroy-on-close="true"
     :before-close="close"
     append-to-body
-    width="600"
+    width="800"
   >
     <el-form
       label-position="top"
@@ -54,14 +54,16 @@
               <img class="mr-12" src="@/assets/icon_file-doc.svg" alt="" />
               <div>
                 <p class="line-height-22 mt-4">
-                  {{ $t('common.fileUpload.document') }}（TXT、MD、DOCX、HTML、CSV、XLSX、XLS、PDF）
+                  {{ $t('common.fileUpload.document') }}
+                  <el-text class="color-secondary"
+                    >{{
+                      $t(
+                        'views.applicationWorkflow.nodes.baseNode.FileUploadSetting.fileUploadType.documentText'
+                      )
+                    }}
+                  </el-text>
                 </p>
-                <el-text class="color-secondary">{{
-                    $t(
-                      'views.applicationWorkflow.nodes.baseNode.FileUploadSetting.fileUploadType.documentText'
-                    )
-                  }}
-                </el-text>
+                <p>TXT、MD、DOCX、HTML、CSV、XLSX、XLS、PDF</p>
               </div>
             </div>
             <el-checkbox
@@ -82,14 +84,16 @@
               <img class="mr-12" src="@/assets/icon_file-image.svg" alt="" />
               <div>
                 <p class="line-height-22 mt-4">
-                  {{ $t('common.fileUpload.image') }}（JPG、JPEG、PNG、GIF）
+                  {{ $t('common.fileUpload.image') }}
+                  <el-text class="color-secondary"
+                    >{{
+                      $t(
+                        'views.applicationWorkflow.nodes.baseNode.FileUploadSetting.fileUploadType.imageText'
+                      )
+                    }}
+                  </el-text>
                 </p>
-                <el-text class="color-secondary">{{
-                    $t(
-                      'views.applicationWorkflow.nodes.baseNode.FileUploadSetting.fileUploadType.imageText'
-                    )
-                  }}
-                </el-text>
+                <p>JPG、JPEG、PNG、GIF</p>
               </div>
             </div>
             <el-checkbox v-model="form_data.image" @change="form_data.image = !form_data.image" />
@@ -108,14 +112,16 @@
               <img class="mr-12" src="@/assets/icon_file-audio.svg" alt="" />
               <div>
                 <p class="line-height-22 mt-4">
-                  {{ $t('common.fileUpload.audio') }}（MP3、WAV、OGG、ACC、M4A）
+                  {{ $t('common.fileUpload.audio') }}
+                  <el-text class="color-secondary"
+                    >{{
+                      $t(
+                        'views.applicationWorkflow.nodes.baseNode.FileUploadSetting.fileUploadType.audioText'
+                      )
+                    }}
+                  </el-text>
                 </p>
-                <el-text class="color-secondary">{{
-                    $t(
-                      'views.applicationWorkflow.nodes.baseNode.FileUploadSetting.fileUploadType.audioText'
-                    )
-                  }}
-                </el-text>
+                <p>MP3、WAV、OGG、ACC、M4A</p>
               </div>
             </div>
             <el-checkbox v-model="form_data.audio" @change="form_data.audio = !form_data.audio" />
@@ -134,14 +140,28 @@
               <div>
                 <p class="line-height-22 mt-4">
                   {{ $t('common.fileUpload.other') }}
+                  <el-text class="color-secondary"
+                    >{{
+                      $t(
+                        'views.applicationWorkflow.nodes.baseNode.FileUploadSetting.fileUploadType.otherText'
+                      )
+                    }}
+                  </el-text>
                 </p>
-                <div class="flex">
+                <el-space wrap :size="2" class="mt-4">
                   <el-tag
                     v-for="tag in form_data.otherExtensions"
                     :key="tag"
                     closable
                     :disable-transitions="false"
                     @close="handleClose(tag)"
+                    type="info"
+                    class="mr-4"
+                    effect="plain"
+                    style="
+                      --el-tag-border-radius: 4px;
+                      --el-tag-border-color: var(--el-border-color);
+                    "
                   >
                     {{ tag }}
                   </el-tag>
@@ -149,7 +169,6 @@
                     v-if="inputVisible"
                     ref="InputRef"
                     v-model="inputValue"
-                    class="w-20"
                     size="small"
                     @keyup.enter="handleInputConfirm"
                     @blur="handleInputConfirm"
@@ -157,7 +176,7 @@
                   <el-button v-else class="button-new-tag" size="small" @click.stop="showInput">
                     + {{ $t('common.fileUpload.addExtensions') }}
                   </el-button>
-                </div>
+                </el-space>
               </div>
             </div>
             <el-checkbox v-model="form_data.other" @change="form_data.other = !form_data.other" />
@@ -214,7 +233,7 @@ function close() {
 }
 
 const handleClose = (tag: string) => {
-  form_data.value.otherExtensions = form_data.value.otherExtensions.filter(item => item !== tag)
+  form_data.value.otherExtensions = form_data.value.otherExtensions.filter((item) => item !== tag)
 }
 
 const showInput = () => {