From ec1bfdc72328f3fb505f29da4bb3c46b1cf70710 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Tue, 27 Aug 2024 16:37:15 +0800
Subject: [PATCH] feat: change to new start file struct

---
 .../config-var/config-modal/index.tsx         | 40 ++++++++++++++-----
 .../config-var/select-type-item/index.tsx     |  7 +++-
 web/app/components/workflow/constants.ts      |  7 ++++
 .../_base/components/file-upload-setting.tsx  | 36 ++++++++++-------
 web/app/components/workflow/types.ts          | 12 +++---
 5 files changed, 71 insertions(+), 31 deletions(-)

diff --git a/web/app/components/app/configuration/config-var/config-modal/index.tsx b/web/app/components/app/configuration/config-var/config-modal/index.tsx
index e1ccdd69c1..36b7fabc56 100644
--- a/web/app/components/app/configuration/config-var/config-modal/index.tsx
+++ b/web/app/components/app/configuration/config-var/config-modal/index.tsx
@@ -3,6 +3,7 @@ import type { FC } from 'react'
 import React, { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
+import produce from 'immer'
 import ModalFoot from '../modal-foot'
 import ConfigSelect from '../config-select'
 import ConfigString from '../config-string'
@@ -17,6 +18,8 @@ import Modal from '@/app/components/base/modal'
 import { ChangeType, InputVarType } from '@/app/components/workflow/types'
 import FileUploadSetting from '@/app/components/workflow/nodes/_base/components/file-upload-setting'
 import Checkbox from '@/app/components/base/checkbox'
+import { DEFAULT_FILE_UPLOAD_SETTING } from '@/app/components/workflow/constants'
+import { DEFAULT_VALUE_MAX_LEN } from '@/config'
 
 const TEXT_MAX_LENGTH = 256
 
@@ -44,8 +47,8 @@ const ConfigModal: FC<IConfigModalProps> = ({
   const { type, label, variable, options, max_length } = tempPayload
 
   const isStringInput = type === InputVarType.textInput || type === InputVarType.paragraph
-  const checkVariableName = useCallback((value: string) => {
-    const { isValid, errorMessageKey } = checkKeys([value], false)
+  const checkVariableName = useCallback((value: string, canBeEmpty?: boolean) => {
+    const { isValid, errorMessageKey } = checkKeys([value], canBeEmpty)
     if (!isValid) {
       Toast.notify({
         type: 'error',
@@ -68,9 +71,28 @@ const ConfigModal: FC<IConfigModalProps> = ({
     }
   }, [])
 
+  const handleTypeChange = useCallback((type: InputVarType) => {
+    return () => {
+      const newPayload = produce(tempPayload, (draft) => {
+        draft.type = type
+        if ([InputVarType.singleFile, InputVarType.multiFiles].includes(type)) {
+          (Object.keys(DEFAULT_FILE_UPLOAD_SETTING)).forEach((key) => {
+            if (key !== 'max_length')
+              (draft as any)[key] = (DEFAULT_FILE_UPLOAD_SETTING as any)[key]
+          })
+          if (type === InputVarType.multiFiles)
+            draft.max_length = DEFAULT_FILE_UPLOAD_SETTING.max_length
+        }
+        if (type === InputVarType.paragraph)
+          draft.max_length = DEFAULT_VALUE_MAX_LEN
+      })
+      setTempPayload(newPayload)
+    }
+  }, [tempPayload])
+
   const handleVarKeyBlur = useCallback((e: any) => {
     const varName = e.target.value
-    if (!checkVariableName(varName) || tempPayload.label)
+    if (!checkVariableName(varName, true) || tempPayload.label)
       return
 
     setTempPayload((prev) => {
@@ -145,13 +167,13 @@ const ConfigModal: FC<IConfigModalProps> = ({
 
           <Field title={t('appDebug.variableConig.fieldType')}>
             <div className='grid grid-cols-3 gap-2'>
-              <SelectTypeItem type={InputVarType.textInput} selected={type === InputVarType.textInput} onClick={() => handlePayloadChange('type')(InputVarType.textInput)} />
-              <SelectTypeItem type={InputVarType.paragraph} selected={type === InputVarType.paragraph} onClick={() => handlePayloadChange('type')(InputVarType.paragraph)} />
-              <SelectTypeItem type={InputVarType.select} selected={type === InputVarType.select} onClick={() => handlePayloadChange('type')(InputVarType.select)} />
-              <SelectTypeItem type={InputVarType.number} selected={type === InputVarType.number} onClick={() => handlePayloadChange('type')(InputVarType.number)} />
+              <SelectTypeItem type={InputVarType.textInput} selected={type === InputVarType.textInput} onClick={handleTypeChange(InputVarType.textInput)} />
+              <SelectTypeItem type={InputVarType.paragraph} selected={type === InputVarType.paragraph} onClick={handleTypeChange(InputVarType.paragraph)} />
+              <SelectTypeItem type={InputVarType.select} selected={type === InputVarType.select} onClick={handleTypeChange(InputVarType.select)} />
+              <SelectTypeItem type={InputVarType.number} selected={type === InputVarType.number} onClick={handleTypeChange(InputVarType.number)} />
               {supportFile && <>
-                <SelectTypeItem type={InputVarType.singleFile} selected={type === InputVarType.singleFile} onClick={() => handlePayloadChange('type')(InputVarType.singleFile)} />
-                <SelectTypeItem type={InputVarType.multiFiles} selected={type === InputVarType.multiFiles} onClick={() => handlePayloadChange('type')(InputVarType.multiFiles)} />
+                <SelectTypeItem type={InputVarType.singleFile} selected={type === InputVarType.singleFile} onClick={handleTypeChange(InputVarType.singleFile)} />
+                <SelectTypeItem type={InputVarType.multiFiles} selected={type === InputVarType.multiFiles} onClick={handleTypeChange(InputVarType.multiFiles)} />
               </>}
             </div>
           </Field>
diff --git a/web/app/components/app/configuration/config-var/select-type-item/index.tsx b/web/app/components/app/configuration/config-var/select-type-item/index.tsx
index 21567a5123..e747e86619 100644
--- a/web/app/components/app/configuration/config-var/select-type-item/index.tsx
+++ b/web/app/components/app/configuration/config-var/select-type-item/index.tsx
@@ -12,13 +12,18 @@ export type ISelectTypeItemProps = {
   onClick: () => void
 }
 
+const i18nFileTypeMap: Record<string, string> = {
+  'file': 'single-file',
+  'file-list': 'multi-files',
+}
+
 const SelectTypeItem: FC<ISelectTypeItemProps> = ({
   type,
   selected,
   onClick,
 }) => {
   const { t } = useTranslation()
-  const typeName = t(`appDebug.variableConig.${type}`)
+  const typeName = t(`appDebug.variableConig.${i18nFileTypeMap[type] || type}`)
 
   return (
     <div
diff --git a/web/app/components/workflow/constants.ts b/web/app/components/workflow/constants.ts
index 6430adc5eb..c1f94bb91a 100644
--- a/web/app/components/workflow/constants.ts
+++ b/web/app/components/workflow/constants.ts
@@ -474,6 +474,13 @@ export const FILE_STRUCT: Var[] = [
   },
 ]
 
+export const DEFAULT_FILE_UPLOAD_SETTING = {
+  allowed_file_upload_methods: ['local_file', 'remote_url'],
+  max_length: 5,
+  allowed_file_types: ['image'],
+  allowed_file_extensions: [],
+}
+
 export const WORKFLOW_DATA_UPDATE = 'WORKFLOW_DATA_UPDATE'
 export const CUSTOM_NODE = 'custom'
 export const DSL_EXPORT_CHECK = 'DSL_EXPORT_CHECK'
diff --git a/web/app/components/workflow/nodes/_base/components/file-upload-setting.tsx b/web/app/components/workflow/nodes/_base/components/file-upload-setting.tsx
index 095909f3e8..3db11702f3 100644
--- a/web/app/components/workflow/nodes/_base/components/file-upload-setting.tsx
+++ b/web/app/components/workflow/nodes/_base/components/file-upload-setting.tsx
@@ -25,15 +25,18 @@ const FileUploadSetting: FC<Props> = ({
   const { t } = useTranslation()
 
   const {
-    uploadMethod,
-    maxUploadNumLimit,
-    supportFileTypes,
-    customFileTypes,
+    allowed_file_upload_methods,
+    max_length,
+    allowed_file_types,
+    allowed_file_extensions,
   } = payload
 
   const handleSupportFileTypeChange = useCallback((type: SupportUploadFileTypes) => {
     const newPayload = produce(payload, (draft) => {
-      draft.supportFileTypes = type
+      if (draft.allowed_file_types.includes(type))
+        draft.allowed_file_types = draft.allowed_file_types.filter(v => v !== type)
+      else
+        draft.allowed_file_types.push(type)
     })
     onChange(newPayload)
   }, [onChange, payload])
@@ -41,7 +44,10 @@ const FileUploadSetting: FC<Props> = ({
   const handleUploadMethodChange = useCallback((method: TransferMethod) => {
     return () => {
       const newPayload = produce(payload, (draft) => {
-        draft.uploadMethod = method
+        if (method === TransferMethod.all)
+          draft.allowed_file_upload_methods = [TransferMethod.local_file, TransferMethod.remote_url]
+        else
+          draft.allowed_file_upload_methods = [method]
       })
       onChange(newPayload)
     }
@@ -49,7 +55,7 @@ const FileUploadSetting: FC<Props> = ({
 
   const handleCustomFileTypesChange = useCallback((customFileTypes: string[]) => {
     const newPayload = produce(payload, (draft) => {
-      draft.customFileTypes = customFileTypes.map((v) => {
+      draft.allowed_file_extensions = customFileTypes.map((v) => {
         if (v.startsWith('.'))
           return v
         return `.${v}`
@@ -60,7 +66,7 @@ const FileUploadSetting: FC<Props> = ({
 
   const handleMaxUploadNumLimitChange = useCallback((value: number) => {
     const newPayload = produce(payload, (draft) => {
-      draft.maxUploadNumLimit = value
+      draft.max_length = value
     })
     onChange(newPayload)
   }, [onChange, payload])
@@ -76,16 +82,16 @@ const FileUploadSetting: FC<Props> = ({
               <FileTypeItem
                 key={type}
                 type={type as SupportUploadFileTypes.image | SupportUploadFileTypes.document | SupportUploadFileTypes.audio | SupportUploadFileTypes.video}
-                selected={supportFileTypes === type}
+                selected={allowed_file_types.includes(type)}
                 onSelect={handleSupportFileTypeChange}
               />
             ))
           }
           <FileTypeItem
             type={SupportUploadFileTypes.custom}
-            selected={supportFileTypes === SupportUploadFileTypes.custom}
+            selected={allowed_file_types.includes(SupportUploadFileTypes.custom)}
             onSelect={handleSupportFileTypeChange}
-            customFileTypes={customFileTypes}
+            customFileTypes={allowed_file_extensions}
             onCustomFileTypesChange={handleCustomFileTypesChange}
           />
         </div>
@@ -97,17 +103,17 @@ const FileUploadSetting: FC<Props> = ({
         <div className='grid grid-cols-3 gap-2'>
           <OptionCard
             title='Local Upload'
-            selected={uploadMethod === TransferMethod.local_file}
+            selected={allowed_file_upload_methods.length === 1 && allowed_file_upload_methods.includes(TransferMethod.local_file)}
             onSelect={handleUploadMethodChange(TransferMethod.local_file)}
           />
           <OptionCard
             title="URL"
-            selected={uploadMethod === TransferMethod.remote_url}
+            selected={allowed_file_upload_methods.length === 1 && allowed_file_upload_methods.includes(TransferMethod.remote_url)}
             onSelect={handleUploadMethodChange(TransferMethod.remote_url)}
           />
           <OptionCard
             title="Both"
-            selected={uploadMethod === TransferMethod.all}
+            selected={allowed_file_upload_methods.includes(TransferMethod.local_file) && allowed_file_upload_methods.includes(TransferMethod.remote_url)}
             onSelect={handleUploadMethodChange(TransferMethod.all)}
           />
         </div>
@@ -120,7 +126,7 @@ const FileUploadSetting: FC<Props> = ({
           <div>
             <div className='mb-1.5 text-text-tertiary body-xs-regular'>{t('appDebug.variableConig.maxNumberTip')}</div>
             <InputNumberWithSlider
-              value={maxUploadNumLimit || 1}
+              value={max_length}
               min={1}
               max={10}
               onChange={handleMaxUploadNumLimitChange}
diff --git a/web/app/components/workflow/types.ts b/web/app/components/workflow/types.ts
index bf108e7152..e7df40e2b1 100644
--- a/web/app/components/workflow/types.ts
+++ b/web/app/components/workflow/types.ts
@@ -147,8 +147,8 @@ export enum InputVarType {
   json = 'json', // obj, array
   contexts = 'contexts', // knowledge retrieval
   iterator = 'iterator', // iteration input
-  singleFile = 'single-file',
-  multiFiles = 'multi-files',
+  singleFile = 'file',
+  multiFiles = 'file-list',
 }
 
 export type InputVar = {
@@ -362,10 +362,10 @@ export enum SupportUploadFileTypes {
 }
 
 export type UploadFileSetting = {
-  uploadMethod: TransferMethod
-  maxUploadNumLimit?: number // multiple files upload limit
-  supportFileTypes: SupportUploadFileTypes
-  customFileTypes?: string[]
+  allowed_file_upload_methods: TransferMethod[]
+  allowed_file_types: SupportUploadFileTypes[]
+  allowed_file_extensions?: string[]
+  max_length: number
 }
 
 export type VisionSetting = {