From 5c64d630a0fce4fc5df6634e5874387ac3313b1d Mon Sep 17 00:00:00 2001
From: CaptainB <bin@fit2cloud.com>
Date: Fri, 6 Dec 2024 18:14:04 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81=E4=B8=8A=E4=BC=A0mp3?=
 =?UTF-8?q?=E6=96=87=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../component/chat-input-operate/index.vue    | 60 ++++++++++++++++---
 .../component/FileUploadSettingDialog.vue     | 17 ++++++
 ui/src/workflow/nodes/start-node/index.vue    |  6 ++
 3 files changed, 75 insertions(+), 8 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 004748175dc..3670b85379c 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
@@ -6,7 +6,7 @@
         <div
           class="p-8-12"
           v-loading="localLoading"
-          v-if="uploadDocumentList.length || uploadImageList.length"
+          v-if="uploadDocumentList.length || uploadImageList.length || uploadAudioList.length || uploadVideoList.length"
         >
           <el-space wrap>
             <template v-for="(item, index) in uploadDocumentList" :key="index">
@@ -53,6 +53,27 @@
                 />
               </div>
             </template>
+            <template 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"
+                  @mouseenter.stop="mouseenter(item)"
+                  @mouseleave.stop="mouseleave()"
+                >
+                  <div
+                    @click="deleteFile(index, 'audio')"
+                    class="delete-icon color-secondary"
+                    v-if="showDelete === item.url"
+                  >
+                    <el-icon><CircleCloseFilled /></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">
+                    {{ item && item?.name }}
+                  </div>
+                </div>
+              </el-card>
+            </template>
           </el-space>
         </div>
       </el-scrollbar>
@@ -200,7 +221,7 @@ const localLoading = computed({
 const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp']
 const documentExtensions = ['pdf', 'docx', 'txt', 'xls', 'xlsx', 'md', 'html', 'csv']
 const videoExtensions = ['mp4', 'avi', 'mov', 'mkv', 'flv']
-const audioExtensions = ['mp3', 'wav', 'aac', 'flac']
+const audioExtensions = ['mp3']
 
 const getAcceptList = () => {
   const { image, document, audio, video } = props.applicationDetails.file_upload_setting
@@ -227,14 +248,14 @@ const getAcceptList = () => {
 const checkMaxFilesLimit = () => {
   return (
     props.applicationDetails.file_upload_setting.maxFiles <=
-    uploadImageList.value.length + uploadDocumentList.value.length
+    uploadImageList.value.length + uploadDocumentList.value.length + uploadAudioList.value.length + uploadVideoList.value.length
   )
 }
 
 const uploadFile = async (file: any, fileList: any) => {
   const { maxFiles, fileLimit } = props.applicationDetails.file_upload_setting
   // 单次上传文件数量限制
-  const file_limit_once = uploadImageList.value.length + uploadDocumentList.value.length
+  const file_limit_once = uploadImageList.value.length + uploadDocumentList.value.length + uploadAudioList.value.length + uploadVideoList.value.length
   if (file_limit_once >= maxFiles) {
     MsgWarning('最多上传' + maxFiles + '个文件')
     fileList.splice(0, fileList.length)
@@ -257,9 +278,9 @@ const uploadFile = async (file: any, fileList: any) => {
   } else if (documentExtensions.includes(extension)) {
     uploadDocumentList.value.push(file)
   } else if (videoExtensions.includes(extension)) {
-    // videos.push(file)
+    uploadVideoList.value.push(file)
   } else if (audioExtensions.includes(extension)) {
-    // audios.push(file)
+    uploadAudioList.value.push(file)
   }
 
 
@@ -297,7 +318,20 @@ const uploadFile = async (file: any, fileList: any) => {
           file.file_id = f[0].file_id
         }
       })
-      console.log(uploadDocumentList.value, uploadImageList.value)
+      uploadAudioList.value.forEach((file: any) => {
+        const f = response.data.filter((f: any) => f.name === file.name)
+        if (f.length > 0) {
+          file.url = f[0].url
+          file.file_id = f[0].file_id
+        }
+      })
+      uploadVideoList.value.forEach((file: any) => {
+        const f = response.data.filter((f: any) => f.name === file.name)
+        if (f.length > 0) {
+          file.url = f[0].url
+          file.file_id = f[0].file_id
+        }
+      })
     })
 }
 const recorderTime = ref(0)
@@ -306,6 +340,8 @@ const recorderLoading = ref(false)
 const inputValue = ref<string>('')
 const uploadImageList = ref<Array<any>>([])
 const uploadDocumentList = ref<Array<any>>([])
+const uploadVideoList = ref<Array<any>>([])
+const uploadAudioList = ref<Array<any>>([])
 const mediaRecorderStatus = ref(true)
 const showDelete = ref('')
 
@@ -433,11 +469,15 @@ function sendChatHandle(event: any) {
       if (inputValue.value.trim()) {
         props.sendMessage(inputValue.value, {
           image_list: uploadImageList.value,
-          document_list: uploadDocumentList.value
+          document_list: uploadDocumentList.value,
+          audio_list: uploadAudioList.value,
+          video_list: uploadVideoList.value,
         })
         inputValue.value = ''
         uploadImageList.value = []
         uploadDocumentList.value = []
+        uploadAudioList.value = []
+        uploadVideoList.value = []
         quickInputRef.value.textareaStyle.height = '45px'
       }
     }
@@ -452,6 +492,10 @@ function deleteFile(index: number, val: string) {
     uploadImageList.value.splice(index, 1)
   } else if (val === 'document') {
     uploadDocumentList.value.splice(index, 1)
+  } else if (val === 'video') {
+    uploadVideoList.value.splice(index, 1)
+  } else if (val === 'audio') {
+    uploadAudioList.value.splice(index, 1)
   }
 }
 function mouseenter(row: any) {
diff --git a/ui/src/workflow/nodes/base-node/component/FileUploadSettingDialog.vue b/ui/src/workflow/nodes/base-node/component/FileUploadSettingDialog.vue
index 461b6e81d8a..05c67b9f8c0 100644
--- a/ui/src/workflow/nodes/base-node/component/FileUploadSettingDialog.vue
+++ b/ui/src/workflow/nodes/base-node/component/FileUploadSettingDialog.vue
@@ -68,6 +68,23 @@
             <el-checkbox v-model="form_data.image" />
           </div>
         </el-card>
+        <el-card
+          shadow="hover"
+          class="card-checkbox cursor w-full mb-8"
+          :class="form_data.audio ? 'active' : ''"
+          style="--el-card-padding: 8px 16px"
+        >
+          <div class="flex-between">
+            <div class="flex align-center">
+              <img class="mr-12" src="@/assets/icon_file-image.svg" alt="" />
+              <div>
+                <p class="line-height-22 mt-4">音频（MP3）</p>
+                <el-text class="color-secondary">所选模型支持接收音频或与语音转文本节点配合使用</el-text>
+              </div>
+            </div>
+            <el-checkbox v-model="form_data.audio" />
+          </div>
+        </el-card>
       </el-form-item>
     </el-form>
     <template #footer>
diff --git a/ui/src/workflow/nodes/start-node/index.vue b/ui/src/workflow/nodes/start-node/index.vue
index 6da9f3e907b..8bec6ce39eb 100644
--- a/ui/src/workflow/nodes/start-node/index.vue
+++ b/ui/src/workflow/nodes/start-node/index.vue
@@ -82,6 +82,12 @@ const refreshFileUploadConfig = () => {
   if (form_data[0].image) {
     fileUploadFields.push({ label: '图片', value: 'image' })
   }
+  if (form_data[0].audio) {
+    fileUploadFields.push({ label: '音频', value: 'audio' })
+  }
+  if (form_data[0].video) {
+    fileUploadFields.push({ label: '视频', value: 'video' })
+  }
 
   set(props.nodeModel.properties.config, 'fields', [...fields, ...fileUploadFields])
 }