feat(web): remote file add api

2026-03-23 17:48:50 +08:00
parent 24c13d408e
commit 9308c6efae
6 changed files with 132 additions and 101 deletions
--- a/web/src/api/fileStorage.ts
+++ b/web/src/api/fileStorage.ts
@@ -2,7 +2,7 @@
 * @Author: ZhaoYing 
 * @Date: 2026-02-03 13:59:56 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-02-09 16:24:05
+ * @Last Modified time: 2026-03-23 17:48:40
 */
 import { request, API_PREFIX } from '@/utils/request'

@@ -32,4 +32,9 @@ export const deleteFile = (fileId: string) => {
 }

 export const shareFileUploadUrlWithoutApiPrefix = `/storage/share/files`
-export const shareFileUploadUrl = `${API_PREFIX}${shareFileUploadUrlWithoutApiPrefix}`
+export const shareFileUploadUrl = `${API_PREFIX}${shareFileUploadUrlWithoutApiPrefix}`
+
+// Get file info
+export const getFileInfoByUrl = (url: string) => {
+  return request.get('/storage/files/info-by-url', {url})
+}
--- a/web/src/components/Chat/ChatInput.tsx
+++ b/web/src/components/Chat/ChatInput.tsx
@@ -2,10 +2,10 @@
 * @Author: ZhaoYing 
 * @Date: 2025-12-10 16:46:14 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-20 15:39:33
+ * @Last Modified time: 2026-03-23 17:46:25
 */
 import { type FC, useEffect, useMemo, useState } from 'react'
-import { Flex, Input, Form } from 'antd'
+import { Flex, Input, Form, Spin } from 'antd'
 import clsx from 'clsx'

 import type { ChatInputProps } from './types'
@@ -37,7 +37,7 @@ const ChatInput: FC<ChatInputProps> = ({
      })
    }
  }, [form, message])
-  
+
  // Clear input when loading
  useEffect(() => {
    if (loading) {
@@ -52,7 +52,7 @@ const ChatInput: FC<ChatInputProps> = ({
    fileChange?.(fileList?.filter(item => {
      return item.thumbUrl && file.thumbUrl ? item.thumbUrl !== file.thumbUrl
        : item.url && file.url ? item.url !== file.url
-        : item.uid !== file.uid
+          : item.uid !== file.uid
    }) || [])
  }
  // Convert file object to preview URL
@@ -81,84 +81,98 @@ const ChatInput: FC<ChatInputProps> = ({
        ' rb:border-[#171719]!': isFocus
      })}>
        {previewFileList.length > 0 && <div className="rb:overflow-x-auto rb:max-w-full">
-          <Flex gap={14} className="rb:mx-3! rb:mt-3! rb:w-max! rb:mb-2!">
-            {previewFileList.map((file) => {
-              if (file.type.includes('image')) {
-                return (
-                  <div key={file.url || file.uid} className="rb:inline-block rb:group rb:relative rb:rounded-lg rb:bg-[#F6F6F6] rb:border rb:border-[#F6F6F6]">
+          <Flex gap={14} className="rb:mx-3! rb:mt-3! rb:w-max!">
+          {previewFileList.map((file) => {
+            if (file.type?.includes('image')) {
+              return (
+                <Spin key={`${file.url || file.uid}_${file.status}`} spinning={file.status === 'uploading'}>
+                  <div className={clsx("rb:inline-block rb:group rb:relative rb:rounded-lg rb:bg-[#F6F6F6] rb:border rb:border-[#F6F6F6]", {
+                    'rb:border-[#FF5D34]': file.status === 'error'
+                  })}>
                    <img src={file.url} alt={file.name} className="rb:size-12! rb:rounded-lg rb:object-cover" />
                    <div
-                      className="rb:hidden rb:group-hover:block rb:absolute rb:-right-1 rb:-top-1 rb:size-3.5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/delete.svg')]"
+                      className="rb:hidden rb:group-hover:block rb:absolute rb:-right-1 rb:-top-1 rb:size-3.5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/delete.svg')] rb:hover:bg-[url('@/assets/images/conversation/delete_hover.svg')]"
                      onClick={() => handleDelete(file)}
                    ></div>
                  </div>
-                )
-              }
-              if (file.type.includes('video')) {
-                return (
-                  <div key={file.url || file.uid} className="rb:w-45 rb:h-12 rb:inline-block rb:group rb:relative rb:rounded-lg rb:border rb:border-[#F6F6F6]">
+                </Spin>
+              )
+            }
+            if (file.type?.includes('video')) {
+              return (
+                <Spin key={`${file.url || file.uid}_${file.status}`} spinning={file.status === 'uploading'}>
+                  <div className={clsx("rb:w-45 rb:h-12 rb:inline-block rb:group rb:relative rb:rounded-lg rb:border rb:border-[#F6F6F6]", {
+                    'rb:border-[#FF5D34]': file.status === 'error'
+                  })}>
                    <video src={file.url} controls className="rb:w-45 rb:h-12 rb:rounded-lg rb:object-cover" />
                    <div
                      className="rb:hidden rb:group-hover:block rb:absolute rb:-right-1 rb:-top-1 rb:size-3.5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/delete.svg')]"
                      onClick={() => handleDelete(file)}
                    ></div>
                  </div>
-                )
-              }
-              if (file.type.includes('audio')) {
-                return (
-                  <div key={file.url || file.uid} className="rb:w-45 rb:h-12 rb:inline-flex rb:items-center rb:group rb:relative rb:rounded-lg rb:bg-[#F6F6F6] rb:py-2 rb:px-2.5 rb:gap-2 rb:border rb:border-[#F6F6F6]">
+                </Spin>
+              )
+            }
+            if (file.type?.includes('audio')) {
+              return (
+                <Spin key={`${file.url || file.uid}_${file.status}`} spinning={file.status === 'uploading'}>
+                  <div className={clsx("rb:w-45 rb:h-12rb:inline-flex rb:items-center rb:group rb:relative rb:rounded-lg rb:bg-[#F6F6F6] rb:py-2 rb:px-2.5 rb:gap-2 rb:border rb:border-[#F6F6F6]", {
+                    'rb:border-[#FF5D34]': file.status === 'error'
+                  })}>
                    <audio src={file.url} controls className="rb:w-45 rb:h-12" />
                    <div
                      className="rb:hidden rb:group-hover:block rb:absolute rb:-right-1 rb:-top-1 rb:size-3.5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/delete.svg')]"
                      onClick={() => handleDelete(file)}
                    ></div>
                  </div>
-                )
-              }
-              return (
+                </Spin>
+              )
+            }
+            return (
+              <Spin key={`${file.url || file.uid}_${file.status}`} spinning={file.status === 'uploading'}>
                <Flex
-                  key={file.url || file.uid}
                  align="center"
                  gap={10}
-                  className="rb:w-45 rb:text-[12px] rb:group rb:relative rb:rounded-lg rb:bg-[#F6F6F6] rb:py-2! rb:px-2.5! rb:border rb:border-[#F6F6F6]"
-                >
+                  className={clsx("rb:w-45 rb:text-[12px] rb:group rb:relative rb:rounded-lg rb:bg-[#F6F6F6] rb:py-2! rb:px-2.5! rb:border rb:border-[#F6F6F6]", {
+                  'rb:border-[#FF5D34]': file.status === 'error'
+                })}>
                  <div
                    className={clsx(
-                      "rb:size-5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/pdf_disabled.svg')]", 
-                      file.type.includes('pdf')
-                      ? "rb:bg-[url('@/assets/images/file/pdf.svg')]"
-                      : (file.type.includes('excel') || file.type.includes('spreadsheetml.sheet'))
-                      ? "rb:bg-[url('@/assets/images/file/excel.svg')]"
-                      : file.type.includes('csv')
-                      ? "rb:bg-[url('@/assets/images/file/csv.svg')]"
-                      : file.type.includes('html')
-                      ? "rb:bg-[url('@/assets/images/file/html.svg')]"
-                      : file.type.includes('json')
-                      ? "rb:bg-[url('@/assets/images/file/json.svg')]"
-                      : file.type.includes('ppt')
-                      ? "rb:bg-[url('@/assets/images/file/ppt.svg')]"
-                      : file.type.includes('text')
-                      ? "rb:bg-[url('@/assets/images/file/txt.svg')]"
-                      : file.type.includes('markdown')
-                      ? "rb:bg-[url('@/assets/images/file/md.svg')]"
-                      : (file.type.includes('doc') || file.type.includes('docx') || file.type.includes('word') || file.type.includes('wordprocessingml.document'))
-                      ? "rb:bg-[url('@/assets/images/file/word.svg')]"
-                      : null
+                      "rb:size-5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/pdf_disabled.svg')]",
+                      file.type?.includes('pdf')
+                        ? "rb:bg-[url('@/assets/images/file/pdf.svg')]"
+                        : (file.type?.includes('excel') || file.type?.includes('spreadsheetml.sheet'))
+                        ? "rb:bg-[url('@/assets/images/file/excel.svg')]"
+                        : file.type?.includes('csv')
+                        ? "rb:bg-[url('@/assets/images/file/csv.svg')]"
+                        : file.type?.includes('html')
+                        ? "rb:bg-[url('@/assets/images/file/html.svg')]"
+                        : file.type?.includes('json')
+                        ? "rb:bg-[url('@/assets/images/file/json.svg')]"
+                        : file.type?.includes('ppt')
+                        ? "rb:bg-[url('@/assets/images/file/ppt.svg')]"
+                        : file.type?.includes('text')
+                        ? "rb:bg-[url('@/assets/images/file/txt.svg')]"
+                        : file.type?.includes('markdown')
+                        ? "rb:bg-[url('@/assets/images/file/md.svg')]"
+                        : (file.type?.includes('doc') || file.type?.includes('docx') || file.type?.includes('word') || file.type?.includes('wordprocessingml.document'))
+                        ? "rb:bg-[url('@/assets/images/file/word.svg')]"
+                        : null
                    )}
                  ></div>
                  <div className="rb:flex-1 rb:w-32.5">
                    <div className="rb:leading-4 rb:text-ellipsis rb:overflow-hidden rb:whitespace-nowrap">{file.name}</div>
-                    <div className="rb:leading-3.5 rb:mt-0.5 rb:text-[#5B6167] rb:text-ellipsis rb:overflow-hidden rb:whitespace-nowrap">{file.type.split('/')[file.type.split('/').length - 1]} · {file.size}</div>
+                    <div className="rb:leading-3.5 rb:mt-0.5 rb:text-[#5B6167] rb:text-ellipsis rb:overflow-hidden rb:whitespace-nowrap">{file.type?.split('/')[file.type?.split('/').length - 1]} · {file.size}</div>
                  </div>
                  <div
                    className="rb:hidden rb:group-hover:block rb:absolute rb:-right-1 rb:-top-1 rb:size-3.5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/delete.svg')]"
                    onClick={() => handleDelete(file)}
                  ></div>
                </Flex>
-              )
-            })}
-          </Flex>
+              </Spin>
+            )
+          })}
+        </Flex>
        </div>}
        {/* Message input form */}
        <Form form={form} layout="vertical">
--- a/web/src/components/Chat/ChatToolbar.tsx
+++ b/web/src/components/Chat/ChatToolbar.tsx
@@ -2,7 +2,7 @@
 * @Author: ZhaoYing 
 * @Date: 2026-03-17 14:22:25 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-20 15:44:48
+ * @Last Modified time: 2026-03-23 17:42:38
 */
 // Toolbar component for chat input area, supporting file upload, audio recording, and variable configuration
 import { useRef, forwardRef, useImperativeHandle, type ReactNode, useEffect } from 'react'
@@ -18,6 +18,7 @@ import type { FeaturesConfigForm } from '@/views/ApplicationConfig/types'
 import type { UploadFileListModalRef } from '@/views/Conversation/types'
 import type { VariableConfigModalRef } from '@/views/Workflow/types'
 import type { Variable } from '@/views/Workflow/components/Properties/VariableList/types'
+import { getFileInfoByUrl } from '@/api/fileStorage';

 // Exposed methods via ref for parent components to access/set form state
 export interface ChatToolbarRef {
@@ -103,9 +104,33 @@ const ChatToolbar = forwardRef<ChatToolbarRef, ChatToolbarProps>(({
  // Merge a batch of files (e.g. from remote URL modal) into the file list
  const addFileList = (list?: any[]) => {
    if (!list?.length) return
-    const files = [...(queryValues?.files || []), ...list]
+    const uploadingList = list.map(f => ({ ...f, status: 'uploading' }))
+    const files = [...(queryValues?.files || []), ...uploadingList]
    form.setFieldValue('files', files)
    onFilesChange?.(files)
+
+    uploadingList.forEach(file => {
+      getFileInfoByUrl(file.url)
+        .then((res) => {
+          const { file_name, file_size, content_type } = res as { file_name: string; file_size: number; content_type: string; }
+          const current: any[] = form.getFieldValue('files') || []
+          const updated = current.map(f => f.uid === file.uid ? {
+            ...f,
+            status: 'done',
+            name: file_name,
+            size: file_size,
+            type: content_type,
+           } : f)
+          form.setFieldValue('files', updated)
+          onFilesChange?.(updated)
+        })
+        .catch(() => {
+          const current: any[] = form.getFieldValue('files') || []
+          const updated = current.map(f => f.uid === file.uid ? { ...f, status: 'error' } : f)
+          form.setFieldValue('files', updated)
+          onFilesChange?.(updated)
+        })
+    })
  }

  // Persist variable values from the config modal and notify parent
--- a/web/src/views/Conversation/components/FileUpload.tsx
+++ b/web/src/views/Conversation/components/FileUpload.tsx
@@ -2,7 +2,7 @@
 * @Author: ZhaoYing 
 * @Date: 2026-02-06 21:09:42 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-19 21:32:34
+ * @Last Modified time: 2026-03-23 17:19:58
 */
 /**
 * File Upload Component
@@ -19,11 +19,11 @@
 * - File list management
 * 
 * @component
-*/
+ */
 import { useState, useEffect, forwardRef, useImperativeHandle, useMemo } from 'react';
 import { Upload, Progress, App, Flex } from 'antd';
 import type { UploadProps, UploadFile } from 'antd';
-import type { UploadProps as RcUploadProps } from 'antd/es/upload/interface';
+import type { UploadProps as RcUploadProps, RcFile, UploadFileStatus } from 'antd/es/upload/interface';
 import { useTranslation } from 'react-i18next';

 import { request } from '@/utils/request'
@@ -193,13 +193,13 @@ const UploadFiles = forwardRef<UploadFilesRef, UploadFilesProps>(({
      // Get file extension
      const fileName = file.name.toLowerCase();
      const fileExtension = fileName.substring(fileName.lastIndexOf('.') + 1);
-      
+
      // Check if extension is in allowed types list
      const isValidExtension = fileType.some(type => type.toLowerCase() === fileExtension);
-      
+
      // Also check MIME type if available (as fallback validation)
      const isValidMimeType = file.type && accept ? accept.includes(file.type) : true;
-      
+
      if (!isValidExtension && !isValidMimeType) {
        message.error(`${t('common.fileAcceptTip')} ${fileExtension || file.type}`);
        return Upload.LIST_IGNORE;
@@ -221,17 +221,29 @@ const UploadFiles = forwardRef<UploadFilesRef, UploadFilesProps>(({
   */
  const handleCustomRequest: RcUploadProps['customRequest'] = async (options) => {
    const { file, onSuccess, onError } = options;
-    
-    try {
-      const formData = new FormData();
-      formData.append('file', file);
-      
-      const response = await request.uploadFile(action, formData, requestConfig);
-      
-      onSuccess?.({data: response});
-    } catch (error) {
-      onError?.(error as Error);
+    if (typeof file === 'string') return;
+    const rcFile = file as RcFile;
+    const formData = new FormData();
+    formData.append('file', rcFile);
+    const fileVo: UploadFile = {
+      uid: rcFile.uid,
+      name: rcFile.name,
+      status: 'uploading' as UploadFileStatus,
+      percent: 0,
+      type: rcFile.type,
+      originFileObj: rcFile,
+      thumbUrl: URL.createObjectURL(rcFile)
    }
+    onChange?.(fileVo)
+    request.uploadFile(action, formData, requestConfig)
+      .then(res => {
+        onSuccess?.({ data: res });
+      })
+      .catch((error) => {
+        onError?.(error as Error);
+        fileVo.status = 'error'
+        onChange?.(fileVo)
+      })
  };

  /**
--- a/web/src/views/Conversation/components/UploadFileListModal.tsx
+++ b/web/src/views/Conversation/components/UploadFileListModal.tsx
@@ -2,7 +2,7 @@
 * @Author: ZhaoYing 
 * @Date: 2026-02-06 21:09:47 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-18 21:10:01
+ * @Last Modified time: 2026-03-23 17:46:56
 */
 /**
 * Upload File List Modal Component
@@ -18,8 +18,8 @@
 * 
 * @component
 */
-import { forwardRef, useImperativeHandle, useState, useMemo } from 'react';
-import { Form, Input, Select, Button, Flex } from 'antd';
+import { forwardRef, useImperativeHandle, useState } from 'react';
+import { Form, Input, Button, Flex } from 'antd';
 import { useTranslation } from 'react-i18next';

 import type { UploadFileListModalRef } from '../types'
@@ -39,7 +39,6 @@ interface UploadFileListModalProps {
 */
 const UploadFileListModal = forwardRef<UploadFileListModalRef, UploadFileListModalProps>(({
  refresh,
-  featureConfig
 }, ref) => {
  const { t } = useTranslation();
  const [visible, setVisible] = useState(false);
@@ -82,20 +81,6 @@ const UploadFileListModal = forwardRef<UploadFileListModalRef, UploadFileListMod
    handleOpen
  }));

-  const fileTypeOptions = useMemo(() => {
-    const options = [];
-    if (featureConfig?.image_enabled) {
-      options.push({ label: t('memoryConversation.image'), value: 'image' });
-    }
-    if (featureConfig?.audio_enabled) {
-      options.push({ label: t('memoryConversation.audio'), value: 'audio' });
-    }
-    if (featureConfig?.video_enabled) {
-      options.push({ label: t('memoryConversation.video'), value: 'video' });
-    }
-    return options;
-  }, [featureConfig, t])
-
  return (
    <RbModal
      title={t('memoryConversation.addRemoteFile')}
@@ -112,17 +97,6 @@ const UploadFileListModal = forwardRef<UploadFileListModalRef, UploadFileListMod
              {/* Render each file entry with type selector and URL input */}
              {fields.map(({ key, name, ...restField }) => (
                <Flex key={key} gap={8} align="center" className="rb:mb-3!">
-                  <FormItem
-                    {...restField}
-                    name={[name, 'type']}
-                    className="rb:mb-0!"
-                  >
-                    <Select
-                      placeholder={t('memoryConversation.fileType')}
-                      options={fileTypeOptions}
-                      className="rb:w-30!"
-                    />
-                  </FormItem>
                  <FormItem
                    {...restField}
                    name={[name, 'url']}
--- a/web/src/views/Workflow/components/Properties/HttpRequest/EditableTable.tsx
+++ b/web/src/views/Workflow/components/Properties/HttpRequest/EditableTable.tsx
@@ -47,7 +47,7 @@ const EditableTable: FC<EditableTableProps> = ({

  const getColumns = (remove: (index: number) => void): TableProps<TableRow>['columns'] => {
    const hasType = typeOptions.length > 0;
-    const contentClassName = hasType ? 'rb:w-[120px]!' : "rb:w-[154px]!"
+    const contentClassName = hasType ? 'rb:w-[110px]!' : "rb:w-[148px]!"
    const formClassName = 'rb:mb-0! rb:bg-[#F6F6F6] rb:rounded-[8px] rb:py-[2px]! rb:px-[6px]!'

    return [
@@ -75,7 +75,7 @@ const EditableTable: FC<EditableTableProps> = ({
            {(form) => (
              <Form.Item name={[index, 'type']} noStyle>
                <Select 
-                  placeholder={t('common.pleaseSelect')} 
+                  placeholder={t('workflow.config.type')} 
                  // size="small" 
                  options={typeOptions}
                  popupMatchSelectWidth={false}
@@ -127,6 +127,7 @@ const EditableTable: FC<EditableTableProps> = ({
      {
        title: '',
        dataIndex: 'actions',
+        width: 20,
        render: (_: any, __: TableRow, index: number) => (
          <div
            className="rb:size-4 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/workflow/deleteBg.svg')] rb:hover:bg-[url('@/assets/images/workflow/deleteBg_hover.svg')]"