feat: add boolean type

7 months ago · 77aa35ff15
parent c9c49200e0
commit 77aa35ff15
6 changed files with 154 additions and 39 deletions
--- a/web/app/components/app/configuration/config-var/config-modal/index.tsx
+++ b/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,23 +78,56 @@ 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)
-    }
+  const selectOptions: SelectItem[] = [
+    {
+      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)) {
+        (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) => {
@ -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'>
-              <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>
+            <TypeSelector value={type} items={selectOptions} onSelect={handleTypeChange} />
          </Field>

          <Field title={t('appDebug.variableConfig.varName')}>
--- a/web/app/components/app/configuration/config-var/config-modal/type-select.tsx
+++ b/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
--- 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,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
--- a/web/app/components/workflow/types.ts
+++ b/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
--- a/web/i18n/en-US/app-debug.ts
+++ b/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',
--- a/web/i18n/zh-Hans/app-debug.ts
+++ b/web/i18n/zh-Hans/app-debug.ts
@ -349,6 +349,7 @@ const translation = {
    'paragraph': '段落',
    'select': '下拉选项',
    'number': '数字',
+    'boolean': '复选框',
    'single-file': '单文件',
    'multi-files': '文件列表',
    'notSet': '未设置，在 Prompt 中输入 {{input}} 试试',