From 77d0aac1d305fe3ecbee61b1dfdd448e47c666dc Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Tue, 6 Aug 2024 14:59:26 +0800
Subject: [PATCH] feat: support custom file type

---
 .../config-var/config-modal/field.tsx         |  7 ++-
 web/app/components/base/tag-input/index.tsx   |  4 +-
 .../nodes/_base/components/file-type-item.tsx | 49 ++++++++++++++-----
 .../_base/components/file-upload-setting.tsx  | 19 +++++++
 web/i18n/en-US/app-debug.ts                   |  5 ++
 web/i18n/zh-Hans/app-debug.ts                 |  5 ++
 6 files changed, 75 insertions(+), 14 deletions(-)

diff --git a/web/app/components/app/configuration/config-var/config-modal/field.tsx b/web/app/components/app/configuration/config-var/config-modal/field.tsx
index 8253178486..5052f988d7 100644
--- a/web/app/components/app/configuration/config-var/config-modal/field.tsx
+++ b/web/app/components/app/configuration/config-var/config-modal/field.tsx
@@ -1,19 +1,22 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
+import cn from '@/utils/classnames'
 
 type Props = {
+  className?: string
   title: string
   children: JSX.Element
 }
 
 const Field: FC<Props> = ({
+  className,
   title,
   children,
 }) => {
   return (
-    <div>
-      <div className='leading-8 text-[13px] font-medium text-gray-700'>{title}</div>
+    <div className={cn(className)}>
+      <div className='text-text-secondary system-sm-semibold leading-8'>{title}</div>
       <div>{children}</div>
     </div>
   )
diff --git a/web/app/components/base/tag-input/index.tsx b/web/app/components/base/tag-input/index.tsx
index 7eab355a0d..745459ff35 100644
--- a/web/app/components/base/tag-input/index.tsx
+++ b/web/app/components/base/tag-input/index.tsx
@@ -14,6 +14,7 @@ type TagInputProps = {
   disableAdd?: boolean
   customizedConfirmKey?: 'Enter' | 'Tab'
   isInWorkflow?: boolean
+  placeholder?: string
 }
 
 const TagInput: FC<TagInputProps> = ({
@@ -23,6 +24,7 @@ const TagInput: FC<TagInputProps> = ({
   disableRemove,
   customizedConfirmKey = 'Enter',
   isInWorkflow,
+  placeholder,
 }) => {
   const { t } = useTranslation()
   const { notify } = useToastContext()
@@ -104,7 +106,7 @@ const TagInput: FC<TagInputProps> = ({
               setValue(e.target.value)
             }}
             onKeyDown={handleKeyDown}
-            placeholder={t(isSpecialMode ? 'common.model.params.stop_sequencesPlaceholder' : 'datasetDocuments.segment.addKeyWord')}
+            placeholder={t(placeholder || (isSpecialMode ? 'common.model.params.stop_sequencesPlaceholder' : 'datasetDocuments.segment.addKeyWord'))}
           />
         )
       }
diff --git a/web/app/components/workflow/nodes/_base/components/file-type-item.tsx b/web/app/components/workflow/nodes/_base/components/file-type-item.tsx
index 43d85ad2f4..c830a7dffe 100644
--- a/web/app/components/workflow/nodes/_base/components/file-type-item.tsx
+++ b/web/app/components/workflow/nodes/_base/components/file-type-item.tsx
@@ -2,20 +2,25 @@
 import type { FC } from 'react'
 import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import type { SupportUploadFileTypes } from '../../../types'
+import { SupportUploadFileTypes } from '../../../types'
 import cn from '@/utils/classnames'
 import { FILE_EXTS } from '@/app/components/base/prompt-editor/constants'
+import TagInput from '@/app/components/base/tag-input'
 
 type Props = {
-  type: SupportUploadFileTypes.image | SupportUploadFileTypes.document | SupportUploadFileTypes.audio | SupportUploadFileTypes.video
+  type: SupportUploadFileTypes.image | SupportUploadFileTypes.document | SupportUploadFileTypes.audio | SupportUploadFileTypes.video | SupportUploadFileTypes.custom
   selected: boolean
   onSelect: (type: SupportUploadFileTypes) => void
+  onCustomFileTypesChange?: (customFileTypes: string[]) => void
+  customFileTypes?: string[]
 }
 
 const FileTypeItem: FC<Props> = ({
   type,
   selected,
   onSelect,
+  customFileTypes = [],
+  onCustomFileTypesChange = () => { },
 }) => {
   const { t } = useTranslation()
 
@@ -24,23 +29,45 @@ const FileTypeItem: FC<Props> = ({
       onSelect(type)
   }, [selected, onSelect, type])
 
+  const isCustomSelected = type === SupportUploadFileTypes.custom && selected
+
   return (
     <div
       className={cn(
-        'py-2 px-3 rounded-lg bg-components-option-card-option-bg border border-components-option-card-option-border',
+        'rounded-lg bg-components-option-card-option-bg border border-components-option-card-option-border',
+        !isCustomSelected && 'py-2 px-3',
         selected && 'border-[1.5px] bg-components-option-card-option-selected-bg border-components-option-card-option-selected-border',
         !selected && 'cursor-pointer hover:bg-components-option-card-option-bg-hover hover:border-components-option-card-option-border-hover',
       )}
       onClick={handleOnSelect}
     >
-      <div className='flex items-center'>
-        {/* TODO: Wait File type icon */}
-        <span className='shrink-0 w-4 h-4 bg-[#00B2EA]'></span>
-        <div className='ml-2'>
-          <div className='text-text-primary system-sm-medium'>{t(`appDebug.variableConig.file.${type}.name`)}</div>
-          <div className='mt-1 text-text-tertiary system-2xs-regular-uppercase'>{FILE_EXTS[type].join(', ')}</div>
-        </div>
-      </div>
+      {isCustomSelected
+        ? (
+          <div>
+            <div className='flex items-center p-3 pb-2 border-b border-divider-subtle'>
+              <span className='shrink-0 w-4 h-4 bg-[#00B2EA]'></span>
+              <div className='ml-2 text-text-primary system-sm-medium'>{t(`appDebug.variableConig.file.${type}.name`)}</div>
+            </div>
+            <div className='p-3'>
+              <TagInput
+                items={customFileTypes}
+                onChange={onCustomFileTypesChange}
+                placeholder={t('appDebug.variableConig.file.custom.createPlaceholder')!}
+              />
+            </div>
+          </div>
+        )
+        : (
+          <div className='flex items-center'>
+            {/* TODO: Wait File type icon */}
+            <span className='shrink-0 w-4 h-4 bg-[#00B2EA]'></span>
+            <div className='ml-2'>
+              <div className='text-text-primary system-sm-medium'>{t(`appDebug.variableConig.file.${type}.name`)}</div>
+              <div className='mt-1 text-text-tertiary system-2xs-regular-uppercase'>{type !== SupportUploadFileTypes.custom ? FILE_EXTS[type].join(', ') : t('appDebug.variableConig.file.custom.description')}</div>
+            </div>
+          </div>
+        )}
+
     </div>
   )
 }
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 1e062b7eb7..c657b53f85 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
@@ -43,6 +43,17 @@ const FileUploadSetting: FC<Props> = ({
     }
   }, [onChange, payload])
 
+  const handleCustomFileTypesChange = useCallback((customFileTypes: string[]) => {
+    const newPayload = produce(payload, (draft) => {
+      draft.customFileTypes = customFileTypes.map((v) => {
+        if (v.startsWith('.'))
+          return v
+        return `.${v}`
+      })
+    })
+    onChange(newPayload)
+  }, [onChange, payload])
+
   return (
     <div>
       <Field
@@ -59,10 +70,18 @@ const FileUploadSetting: FC<Props> = ({
               />
             ))
           }
+          <FileTypeItem
+            type={SupportUploadFileTypes.custom}
+            selected={supportFileTypes === SupportUploadFileTypes.custom}
+            onSelect={handleSupportFileTypeChange}
+            customFileTypes={customFileTypes}
+            onCustomFileTypesChange={handleCustomFileTypesChange}
+          />
         </div>
       </Field>
       <Field
         title='Upload File Types'
+        className='mt-4'
       >
         <div className='grid grid-cols-3 gap-2'>
           <OptionCard
diff --git a/web/i18n/en-US/app-debug.ts b/web/i18n/en-US/app-debug.ts
index 85895f09de..1e4879e687 100644
--- a/web/i18n/en-US/app-debug.ts
+++ b/web/i18n/en-US/app-debug.ts
@@ -337,6 +337,11 @@ const translation = {
       video: {
         name: 'Video',
       },
+      custom: {
+        name: 'Other file types',
+        description: 'Specify other file types.',
+        createPlaceholder: 'File extension, e.g .doc',
+      },
     },
     'errorMsg': {
       varNameRequired: 'Variable name is required',
diff --git a/web/i18n/zh-Hans/app-debug.ts b/web/i18n/zh-Hans/app-debug.ts
index 60515d64a3..52542ef830 100644
--- a/web/i18n/zh-Hans/app-debug.ts
+++ b/web/i18n/zh-Hans/app-debug.ts
@@ -333,6 +333,11 @@ const translation = {
       video: {
         name: '视频',
       },
+      custom: {
+        name: '其他文件类型',
+        description: '指定其他文件类型',
+        createPlaceholder: '文件扩展名，例如 .doc',
+      },
     },
     'content': '内容',
     'errorMsg': {