From 0480bb03c39ae2d17902d5612e002caf28d79ef2 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Fri, 2 Aug 2024 11:42:48 +0800
Subject: [PATCH] feat: new input types

---
 .../config-var/config-modal/index.tsx            | 16 +++++++---------
 .../config-var/select-type-item/index.tsx        |  2 +-
 .../config-var/select-type-item/style.module.css |  2 +-
 .../_base/components/input-var-type-icon.tsx     | 15 ++++++++-------
 .../workflow/nodes/start/components/var-item.tsx |  1 +
 .../components/workflow/nodes/start/panel.tsx    |  1 +
 web/app/components/workflow/types.ts             |  2 ++
 web/i18n/en-US/app-debug.ts                      |  2 ++
 web/i18n/zh-Hans/app-debug.ts                    |  2 ++
 9 files changed, 25 insertions(+), 18 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 20fcf49de1..6a910ee4db 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
@@ -25,6 +25,7 @@ export type IConfigModalProps = {
   varKeys?: string[]
   onClose: () => void
   onConfirm: (newValue: InputVar, moreInfo?: MoreInfo) => void
+  supportFile?: boolean
 }
 
 const inputClassName = 'w-full px-3 text-sm leading-9 text-gray-900 border-0 rounded-lg grow h-9 bg-gray-100 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200'
@@ -35,6 +36,7 @@ const ConfigModal: FC<IConfigModalProps> = ({
   isShow,
   onClose,
   onConfirm,
+  supportFile,
 }) => {
   const { modelConfig } = useContext(ConfigContext)
   const { t } = useTranslation()
@@ -88,14 +90,6 @@ const ConfigModal: FC<IConfigModalProps> = ({
       Toast.notify({ type: 'error', message: t('appDebug.variableConig.errorMsg.varNameRequired') })
       return
     }
-    // TODO: check if key already exists. should the consider the edit case
-    // if (varKeys.map(key => key?.trim()).includes(tempPayload.variable.trim())) {
-    //   Toast.notify({
-    //     type: 'error',
-    //     message: t('appDebug.varKeyError.keyAlreadyExists', { key: tempPayload.variable }),
-    //   })
-    //   return
-    // }
 
     if (!tempPayload.label) {
       Toast.notify({ type: 'error', message: t('appDebug.variableConig.errorMsg.labelNameRequired') })
@@ -136,11 +130,15 @@ const ConfigModal: FC<IConfigModalProps> = ({
         <div className='space-y-2'>
 
           <Field title={t('appDebug.variableConig.fieldType')}>
-            <div className='flex space-x-2'>
+            <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)} />
+              {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)} />
+              </>}
             </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 bb5e700d11..21567a5123 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
@@ -22,7 +22,7 @@ const SelectTypeItem: FC<ISelectTypeItemProps> = ({
 
   return (
     <div
-      className={cn(s.item, selected && s.selected, 'space-y-1')}
+      className={cn('space-y-1', selected && s.selected, s.item)}
       onClick={onClick}
     >
       <div className='shrink-0'>
diff --git a/web/app/components/app/configuration/config-var/select-type-item/style.module.css b/web/app/components/app/configuration/config-var/select-type-item/style.module.css
index 8ff716d58b..5007ed7fed 100644
--- a/web/app/components/app/configuration/config-var/select-type-item/style.module.css
+++ b/web/app/components/app/configuration/config-var/select-type-item/style.module.css
@@ -4,7 +4,7 @@
   justify-content: center;
   align-items: center;
   height: 58px;
-  width: 98px;
+  /* width: 98px; */
   border-radius: 8px;
   border: 1px solid #EAECF0;
   box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
diff --git a/web/app/components/workflow/nodes/_base/components/input-var-type-icon.tsx b/web/app/components/workflow/nodes/_base/components/input-var-type-icon.tsx
index 22c406866f..d3cc1dbc78 100644
--- a/web/app/components/workflow/nodes/_base/components/input-var-type-icon.tsx
+++ b/web/app/components/workflow/nodes/_base/components/input-var-type-icon.tsx
@@ -1,9 +1,8 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
+import { RiAlignLeft, RiCheckboxMultipleLine, RiFileCopy2Line, RiFileList2Line, RiHashtag, RiTextSnippet } from '@remixicon/react'
 import { InputVarType } from '../../../types'
-import { AlignLeft, LetterSpacing01 } from '@/app/components/base/icons/src/vender/line/editor'
-import { CheckDone01, Hash02 } from '@/app/components/base/icons/src/vender/line/general'
 
 type Props = {
   className?: string
@@ -12,11 +11,13 @@ type Props = {
 
 const getIcon = (type: InputVarType) => {
   return ({
-    [InputVarType.textInput]: LetterSpacing01,
-    [InputVarType.paragraph]: AlignLeft,
-    [InputVarType.select]: CheckDone01,
-    [InputVarType.number]: Hash02,
-  } as any)[type] || LetterSpacing01
+    [InputVarType.textInput]: RiTextSnippet,
+    [InputVarType.paragraph]: RiAlignLeft,
+    [InputVarType.select]: RiCheckboxMultipleLine,
+    [InputVarType.number]: RiHashtag,
+    [InputVarType.singleFile]: RiFileList2Line,
+    [InputVarType.multiFiles]: RiFileCopy2Line,
+  } as any)[type] || RiTextSnippet
 }
 
 const InputVarTypeIcon: FC<Props> = ({
diff --git a/web/app/components/workflow/nodes/start/components/var-item.tsx b/web/app/components/workflow/nodes/start/components/var-item.tsx
index efbf0c44fd..e2b5ad28c1 100644
--- a/web/app/components/workflow/nodes/start/components/var-item.tsx
+++ b/web/app/components/workflow/nodes/start/components/var-item.tsx
@@ -79,6 +79,7 @@ const VarItem: FC<Props> = ({
         isShowEditVarModal && (
           <ConfigVarModal
             isShow
+            supportFile
             payload={payload}
             onClose={hideEditVarModal}
             onConfirm={handlePayloadChange}
diff --git a/web/app/components/workflow/nodes/start/panel.tsx b/web/app/components/workflow/nodes/start/panel.tsx
index 48b5d6b7c2..8980fc2bd7 100644
--- a/web/app/components/workflow/nodes/start/panel.tsx
+++ b/web/app/components/workflow/nodes/start/panel.tsx
@@ -117,6 +117,7 @@ const Panel: FC<NodePanelProps<StartNodeType>> = ({
       {isShowAddVarModal && (
         <ConfigVarModal
           isCreate
+          supportFile
           isShow={isShowAddVarModal}
           onClose={hideAddVarModal}
           onConfirm={handleAddVarConfirm}
diff --git a/web/app/components/workflow/types.ts b/web/app/components/workflow/types.ts
index e455687ce3..7c411b4cdc 100644
--- a/web/app/components/workflow/types.ts
+++ b/web/app/components/workflow/types.ts
@@ -126,6 +126,8 @@ export enum InputVarType {
   json = 'json', // obj, array
   contexts = 'contexts', // knowledge retrieval
   iterator = 'iterator', // iteration input
+  singleFile = 'single-file',
+  multiFiles = 'multi-files',
 }
 
 export type InputVar = {
diff --git a/web/i18n/en-US/app-debug.ts b/web/i18n/en-US/app-debug.ts
index a4e8a4f7fa..aa0adf1301 100644
--- a/web/i18n/en-US/app-debug.ts
+++ b/web/i18n/en-US/app-debug.ts
@@ -311,6 +311,8 @@ const translation = {
     'paragraph': 'Paragraph',
     'select': 'Select',
     'number': 'Number',
+    'single-file': 'Single File',
+    'multi-files': 'File List',
     'notSet': 'Not set, try typing {{input}} in the prefix prompt',
     'stringTitle': 'Form text box options',
     'maxLength': 'Max length',
diff --git a/web/i18n/zh-Hans/app-debug.ts b/web/i18n/zh-Hans/app-debug.ts
index b95bb8ce51..24aff2142e 100644
--- a/web/i18n/zh-Hans/app-debug.ts
+++ b/web/i18n/zh-Hans/app-debug.ts
@@ -308,6 +308,8 @@ const translation = {
     'paragraph': '段落',
     'select': '下拉选项',
     'number': '数字',
+    'single-file': '单文件',
+    'multi-files': '文件列表',
     'notSet': '未设置，在 Prompt 中输入 {{input}} 试试',
     'stringTitle': '文本框设置',
     'maxLength': '最大长度',