feat: Adjust file upload and add other file function styles (#2944)

Author: wangdan-fit2cloud

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 {

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',

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'
         }
       }
     },

ui/src/locales/lang/zh-CN/common.ts

@@ -47,7 +47,7 @@ export default {
     audio: '音频',
     video: '视频',
     other: '其他文件',
-    addExtensions: '添加文件扩展名',
+    addExtensions: '添加后缀名',
   },
   status: {
     label: '状态',

ui/src/locales/lang/zh-CN/views/application-workflow.ts

@@ -105,8 +105,10 @@ export default {
           label: '上传的文件类型',
           documentText: '需要使用“文档内容提取”节点解析文档内容',
           imageText: '需要使用“视觉模型”节点解析图片内容',
-          audioText: '需要使用“语音转文本”节点解析音频内容'
-        }
+          audioText: '需要使用“语音转文本”节点解析音频内容',
+          otherText: '需要自行解析该类型文件'
+        },
+        
       }
     },
     aiChatNode: {

ui/src/locales/lang/zh-Hant/common.ts

@@ -47,7 +47,7 @@ export default {
     audio: '音頻',
     video: '視頻',
     other: '其他文件',
-    addExtensions: '添加文件擴展名'
+    addExtensions: '添加後綴名',
   },
   status: {
     label: '狀態',

ui/src/locales/lang/zh-Hant/views/application-workflow.ts

@@ -105,7 +105,8 @@ export default {
           label: '上傳的文件類型',
           documentText: '需要使用「文檔內容提取」節點解析文檔內容',
           imageText: '需要使用「圖片理解」節點解析圖片內容',
-          audioText: '需要使用「語音轉文本」節點解析音頻內容'
+          audioText: '需要使用「語音轉文本」節點解析音頻內容',
+          otherText: '需要自行解析該類型文件'
         }
       }
     },

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,30 +140,43 @@
               <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>
                   <el-input
                     v-if="inputVisible"
                     ref="InputRef"
                     v-model="inputValue"
-                    class="w-20"
                     size="small"
                     @keyup.enter="handleInputConfirm"
                     @blur="handleInputConfirm"
                   />
                   <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 = () => {