feat: show original tool/application name as source in workflow node menu

ui/src/components/dynamics-form/items/upload/UploadInput.vue

@@ -12,7 +12,7 @@
   >
     <el-button type="primary">{{ $t('aiChat.uploadFile.label') }}</el-button>
   </el-upload>
-  <el-space wrap class="w-full media-file-width upload_content mt-16">
+  <el-space wrap class="w-full media-file-width upload_content mt-16" v-if="!inputDisabled">
     <template v-for="(file, index) in model_value" :key="index">
       <el-card style="--el-card-padding: 0" shadow="never">
         <div
@@ -37,12 +37,78 @@
       </el-card>
     </template>
   </el-space>
+  <div class="mt-8 w-full" v-else>
+    <div class="mb-8" v-if="download_list.length">
+      <el-space wrap class="w-full media-file-width upload_content">
+        <template v-for="(item, index) in download_list" :key="index">
+          <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">
+                <Download />
+              </el-icon>
+              {{ $t('aiChat.download') }}
+            </div>
+            <div class="show flex align-center">
+              <img :src="getImgUrl(item && item?.name)" alt="" width="24" />
+              <div class="ml-4 ellipsis-1" :title="item && item?.name">
+                {{ item && item?.name }}
+              </div>
+            </div>
+          </el-card>
+        </template>
+      </el-space>
+    </div>
+    <div class="mb-8" v-if="image_list.length">
+      <el-space wrap>
+        <template v-for="(item, index) in image_list" :key="index">
+          <div class="file cursor border-r-6" v-if="item.url">
+            <el-image
+              :src="item.url"
+              :zoom-rate="1.2"
+              :max-scale="7"
+              :min-scale="0.2"
+              :preview-src-list="getAttrsArray(image_list, 'url')"
+              :initial-index="index"
+              alt=""
+              fit="cover"
+              style="width: 170px; height: 170px; display: block"
+              class="border-r-6"
+            />
+          </div>
+        </template>
+      </el-space>
+    </div>
+    <div class="mb-8" v-if="audio_list.length">
+      <el-space wrap>
+        <template v-for="(item, index) in audio_list" :key="index">
+          <div class="file cursor border-r-6" v-if="item.url">
+            <audio :src="item.url" controls style="width: 350px; height: 43px" class="border-r-6" />
+          </div>
+        </template>
+      </el-space>
+    </div>
+    <div class="mb-8" v-if="video_list.length">
+      <el-space wrap>
+        <template v-for="(item, index) in video_list" :key="index">
+          <div class="file cursor border-r-6" v-if="item.url">
+            <video
+              :src="item.url"
+              style="width: 170px; display: block"
+              class="border-r-6"
+              controls
+            />
+          </div>
+        </template>
+      </el-space>
+    </div>
+  </div>
 </template>
 <script setup lang="ts">
 import { computed, inject, ref, useAttrs } from 'vue'
 import { ElMessage } from 'element-plus'
 import type { FormField } from '@/components/dynamics-form/type'
-import { getImgUrl } from '@/utils/common'
+import { getImgUrl, downloadByURL, getFileUrl, fileType } from '@/utils/common'
+import { getAttrsArray } from '@/utils/array'
 import { t } from '@/locales'
 import { useFormDisabled } from 'element-plus'
 const inputDisabled = useFormDisabled()
@@ -86,6 +152,28 @@ const model_value = computed({
 })
 const fileArray = ref<any>([])
 
+const imageExtensions = ['JPG', 'JPEG', 'PNG', 'GIF', 'BMP']
+const videoExtensions = ['MP4', 'AVI', 'MKV', 'MOV', 'FLV', 'WMV']
+const audioExtensions = ['MP3', 'WAV', 'OGG', 'AAC', 'M4A']
+const ofType = (exts: string[]) => (f: any) => exts.includes(fileType(f?.name || '').toUpperCase())
+
+const files_with_url = computed(() =>
+  (model_value.value || []).map((f: any) => ({ ...f, url: f.url || getFileUrl(f.file_id) })),
+)
+const image_list = computed(() => files_with_url.value.filter(ofType(imageExtensions)))
+const audio_list = computed(() => files_with_url.value.filter(ofType(audioExtensions)))
+const video_list = computed(() => files_with_url.value.filter(ofType(videoExtensions)))
+// 非图片/音频/视频的（文档、压缩包等）统一走下载卡片
+const download_list = computed(() =>
+  files_with_url.value.filter(
+    (f: any) => !ofType([...imageExtensions, ...audioExtensions, ...videoExtensions])(f),
+  ),
+)
+
+function downloadFile(item: any) {
+  downloadByURL(item.url, item.name)
+}
+
 const loading = ref<boolean>(false)
 
 const uploadFile = async (file: any, fileList: Array<any>) => {
@@ -116,6 +204,29 @@ const uploadFile = async (file: any, fileList: Array<any>) => {
 }
 </script>
 <style lang="scss" scoped>
+.download-file {
+  height: 43px;
+
+  &:hover {
+    color: var(--el-color-primary);
+    border: 1px solid var(--el-color-primary);
+
+    .download-button {
+      display: block;
+      text-align: center;
+      line-height: 26px;
+    }
+
+    .show {
+      display: none;
+    }
+  }
+
+  .download-button {
+    display: none;
+  }
+}
+
 .upload_content {
   .is-disabled {
     background-color: var(--el-fill-color-light);

ui/src/locales/lang/en-US/common.ts

@@ -151,6 +151,7 @@ export default {
     subTitle: 'View Execution Record',
   },
   sourceType: 'Source type',
+  source: 'Source',
   knowledgeImportTip:
     'Knowledge base imported successfully. Documents have not been vectorized yet. Please configure the embedding model and vectorize the documents.',
   import: 'Import',

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

@@ -152,6 +152,7 @@ export default {
     subTitle: '查看执行记录',
   },
   sourceType: '资源类型',
+  source: '来源',
   knowledgeImportTip:
     '导入创建知识库成功，文档数据未向量化，请先设置知识库的向量模型，并对文档进行向量化操作',
   import: '导入',

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

@@ -150,6 +150,7 @@ export default {
     subTitle: '查看執行記錄',
   },
   sourceType: '資源類型',
+  source: '來源',
   knowledgeImportTip:
     '匯入建立知識庫成功，文件資料尚未向量化，請先設定知識庫的向量模型，並對文件進行向量化操作',
   import: '导入',

ui/src/workflow/common/NodeContainer.vue

@@ -91,6 +91,10 @@
                   <el-dropdown-item @click="deleteNode" class="border-t p-8">{{
                     $t('common.delete')
                   }}</el-dropdown-item>
+                  <div v-if="sourceName" class="border-t p-8" @click.stop>
+                    <div class="color-secondary font-small">{{ $t('common.source') }}</div>
+                    <div class="lighter mt-4 break-all">{{ sourceName }}</div>
+                  </div>
                 </el-dropdown-menu>
               </template>
             </el-dropdown>
@@ -324,6 +328,13 @@ const node_status = computed(() => {
   return 200
 })
 
+const sourceName = computed(() => {
+  if (['application-node', 'tool-lib-node'].includes(props.nodeModel.type)) {
+    return props.nodeModel.properties.node_data?.name || ''
+  }
+  return ''
+})
+
 function renameNode() {
   form.value.title = props.nodeModel.properties.stepName
   nodeNameDialogVisible.value = true