feat: add boolean type

web/app/components/app/configuration/config-var/config-modal/index.tsx

@@ -7,7 +7,6 @@ import produce from 'immer'
 import ModalFoot from '../modal-foot'
 import ConfigSelect from '../config-select'
 import ConfigString from '../config-string'
-import SelectTypeItem from '../select-type-item'
 import Field from './field'
 import Input from '@/app/components/base/input'
 import Toast from '@/app/components/base/toast'
@@ -20,6 +19,8 @@ import FileUploadSetting from '@/app/components/workflow/nodes/_base/components/
 import Checkbox from '@/app/components/base/checkbox'
 import { DEFAULT_FILE_UPLOAD_SETTING } from '@/app/components/workflow/constants'
 import { DEFAULT_VALUE_MAX_LEN } from '@/config'
+import type { Item as SelectItem } from './type-select'
+import TypeSelector from './type-select'
 
 const TEXT_MAX_LENGTH = 256
 
@@ -77,8 +78,42 @@ const ConfigModal: FC<IConfigModalProps> = ({
     }
   }, [])
 
-  const handleTypeChange = useCallback((type: InputVarType) => {
+  const selectOptions: SelectItem[] = [
-    return () => {
+    {
+      name: t('appDebug.variableConfig.text-input'),
+      value: InputVarType.textInput,
+    },
+    {
+      name: t('appDebug.variableConfig.paragraph'),
+      value: InputVarType.paragraph,
+    },
+    {
+      name: t('appDebug.variableConfig.select'),
+      value: InputVarType.select,
+    },
+    {
+      name: t('appDebug.variableConfig.number'),
+      value: InputVarType.number,
+    },
+    {
+      name: t('appDebug.variableConfig.boolean'),
+      value: InputVarType.boolean,
+    },
+    ...(supportFile ? [
+      {
+        name: t('appDebug.variableConfig.single-file'),
+        value: InputVarType.singleFile,
+      },
+      {
+        name: t('appDebug.variableConfig.multi-files'),
+        value: InputVarType.multiFiles,
+      },
+    ] : []),
+  ]
+
+  const handleTypeChange = useCallback((item: SelectItem) => {
+    const type = item.value as InputVarType
+
     const newPayload = produce(tempPayload, (draft) => {
       draft.type = type
       if ([InputVarType.singleFile, InputVarType.multiFiles].includes(type)) {
@@ -93,7 +128,6 @@ const ConfigModal: FC<IConfigModalProps> = ({
         draft.max_length = DEFAULT_VALUE_MAX_LEN
     })
     setTempPayload(newPayload)
-    }
   }, [tempPayload])
 
   const handleVarKeyBlur = useCallback((e: any) => {
@@ -121,15 +155,6 @@ const ConfigModal: FC<IConfigModalProps> = ({
     if (!isVariableNameValid)
       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.variableConfig.errorMsg.labelNameRequired') })
       return
@@ -183,18 +208,8 @@ const ConfigModal: FC<IConfigModalProps> = ({
     >
       <div className='mb-8' ref={modalRef} tabIndex={-1}>
         <div className='space-y-2'>
-
           <Field title={t('appDebug.variableConfig.fieldType')}>
-            <div className='grid grid-cols-3 gap-2'>
+            <TypeSelector value={type} items={selectOptions} onSelect={handleTypeChange} />
-              <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={handleTypeChange(InputVarType.singleFile)} />
-                <SelectTypeItem type={InputVarType.multiFiles} selected={type === InputVarType.multiFiles} onClick={handleTypeChange(InputVarType.multiFiles)} />
-              </>}
-            </div>
           </Field>
 
           <Field title={t('appDebug.variableConfig.varName')}>

web/app/components/app/configuration/config-var/config-modal/type-select.tsx

@@ -0,0 +1,96 @@
+'use client'
+import type { FC } from 'react'
+import React, { useState } from 'react'
+import { ChevronDownIcon } from '@heroicons/react/20/solid'
+import { useTranslation } from 'react-i18next'
+import classNames from '@/utils/classnames'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import InputVarTypeIcon from '@/app/components/workflow/nodes/_base/components/input-var-type-icon'
+import type { InputVarType } from '@/app/components/workflow/types'
+import cn from '@/utils/classnames'
+
+export type Item = {
+  value: InputVarType
+  name: string
+}
+
+type Props = {
+  value: string | number
+  onSelect: (value: Item) => void
+  items: Item[]
+  popupClassName?: string
+  popupInnerClassName?: string
+  readonly?: boolean
+  hideChecked?: boolean
+}
+const TypeSelector: FC<Props> = ({
+  value,
+  onSelect,
+  items,
+  popupInnerClassName,
+  readonly,
+}) => {
+  const { t } = useTranslation()
+  const [open, setOpen] = useState(false)
+  const selectedItem = value ? items.find(item => item.value === value) : undefined
+
+  return (
+    <PortalToFollowElem
+      open={open}
+      onOpenChange={setOpen}
+      placement='bottom-start'
+      offset={4}
+    >
+      <PortalToFollowElemTrigger onClick={() => !readonly && setOpen(v => !v)} className='w-full'>
+        <div
+          className={classNames(`group flex h-9 items-center justify-between rounded-lg border-0 bg-components-input-bg-normal px-2 text-sm hover:bg-state-base-hover-alt ${readonly ? 'cursor-not-allowed' : 'cursor-pointer'}`)}
+          title={selectedItem?.name}
+        >
+          <div className='flex items-center'>
+            <InputVarTypeIcon type={selectedItem?.value as InputVarType} className='size-4 shrink-0 text-text-secondary' />
+          <span
+            className={`
+              ml-1.5 ${!selectedItem?.name && 'text-components-input-text-placeholder'}
+            `}
+          >
+            {selectedItem?.name}
+          </span>
+          </div>
+          <div>
+            <ChevronDownIcon className={cn('h-4 w-4 shrink-0 text-text-quaternary group-hover:text-text-secondary', open && 'text-text-secondary')} />
+          </div>
+        </div>
+
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent className='z-[61]'>
+        <div
+          className={classNames('w-[432px] rounded-md border-[0.5px] border-components-panel-border bg-components-panel-bg px-1 py-1 text-base shadow-lg focus:outline-none sm:text-sm', popupInnerClassName)}
+        >
+          {items.map((item: Item) => (
+            <div
+              key={item.value}
+              className={'flex h-9 cursor-pointer items-center justify-between rounded-lg px-2 text-text-secondary hover:bg-state-base-hover'}
+              title={item.name}
+              onClick={() => {
+                onSelect(item)
+                setOpen(false)
+              }}
+            >
+              <div className='flex items-center space-x-2'>
+                <InputVarTypeIcon type={item.value} className='size-4 shrink-0 text-text-secondary' />
+                <span title={item.name}>{item.name}</span>
+              </div>
+
+            </div>
+          ))}
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+
+export default TypeSelector

web/app/components/workflow/nodes/_base/components/input-var-type-icon.tsx

@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import { RiAlignLeft, RiCheckboxMultipleLine, RiFileCopy2Line, RiFileList2Line, RiHashtag, RiTextSnippet } from '@remixicon/react'
+import { RiAlignLeft, RiCheckboxLine, RiCheckboxMultipleLine, RiFileCopy2Line, RiFileList2Line, RiHashtag, RiTextSnippet } from '@remixicon/react'
 import { InputVarType } from '../../../types'
 
 type Props = {
@@ -15,6 +15,7 @@ const getIcon = (type: InputVarType) => {
     [InputVarType.paragraph]: RiAlignLeft,
     [InputVarType.select]: RiCheckboxMultipleLine,
     [InputVarType.number]: RiHashtag,
+    [InputVarType.boolean]: RiCheckboxLine,
     [InputVarType.singleFile]: RiFileList2Line,
     [InputVarType.multiFiles]: RiFileCopy2Line,
   } as any)[type] || RiTextSnippet

web/app/components/workflow/types.ts

@@ -175,6 +175,7 @@ export enum InputVarType {
   paragraph = 'paragraph',
   select = 'select',
   number = 'number',
+  boolean = 'boolean',
   url = 'url',
   files = 'files',
   json = 'json', // obj, array

web/i18n/en-US/app-debug.ts

@@ -355,6 +355,7 @@ const translation = {
     'paragraph': 'Paragraph',
     'select': 'Select',
     'number': 'Number',
+    'boolean': 'Checkbox',
     'single-file': 'Single File',
     'multi-files': 'File List',
     'notSet': 'Not set, try typing {{input}} in the prefix prompt',

web/i18n/zh-Hans/app-debug.ts

@@ -349,6 +349,7 @@ const translation = {
     'paragraph': '段落',
     'select': '下拉选项',
     'number': '数字',
+    'boolean': '复选框',
     'single-file': '单文件',
     'multi-files': '文件列表',
     'notSet': '未设置，在 Prompt 中输入 {{input}} 试试',