feat: support bool type variable frontend (#24437)

Co-authored-by: QuantumGhost <obelisk.reg+git@gmail.com>
2025-08-26 18:16:05 +08:00
parent b5c2756261
commit dac72b078d
126 changed files with 3832 additions and 512 deletions
--- a/web/app/components/app/configuration/config-var/config-modal/config.ts
+++ b/web/app/components/app/configuration/config-var/config-modal/config.ts
@@ -0,0 +1,24 @@
+export const jsonObjectWrap = {
+  type: 'object',
+  properties: {},
+  required: [],
+  additionalProperties: true,
+}
+
+export const jsonConfigPlaceHolder = JSON.stringify(
+  {
+    foo: {
+      type: 'string',
+    },
+    bar: {
+      type: 'object',
+      properties: {
+        sub: {
+          type: 'number',
+        },
+      },
+      required: [],
+      additionalProperties: true,
+    },
+  }, null, 2,
+)
--- a/web/app/components/app/configuration/config-var/config-modal/field.tsx
+++ b/web/app/components/app/configuration/config-var/config-modal/field.tsx
@@ -2,21 +2,28 @@
 import type { FC } from 'react'
 import React from 'react'
 import cn from '@/utils/classnames'
+import { useTranslation } from 'react-i18next'

 type Props = {
  className?: string
  title: string
+  isOptional?: boolean
  children: React.JSX.Element
 }

 const Field: FC<Props> = ({
  className,
  title,
+  isOptional,
  children,
 }) => {
+  const { t } = useTranslation()
  return (
    <div className={cn(className)}>
-      <div className='system-sm-semibold leading-8 text-text-secondary'>{title}</div>
+      <div className='system-sm-semibold leading-8 text-text-secondary'>
+        {title}
+        {isOptional && <span className='system-xs-regular ml-1 text-text-tertiary'>({t('appDebug.variableConfig.optional')})</span>}
+      </div>
      <div>{children}</div>
    </div>
  )
--- a/web/app/components/app/configuration/config-var/config-modal/index.tsx
+++ b/web/app/components/app/configuration/config-var/config-modal/index.tsx
@@ -1,13 +1,12 @@
 'use client'
 import type { ChangeEvent, FC } from 'react'
-import React, { useCallback, useEffect, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useRef, 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'
-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,7 +19,13 @@ 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'
 import { SimpleSelect } from '@/app/components/base/select'
+import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
+import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
+import { jsonConfigPlaceHolder, jsonObjectWrap } from './config'
+import { useStore as useAppStore } from '@/app/components/app/store'
 import Textarea from '@/app/components/base/textarea'
 import { FileUploaderInAttachmentWrapper } from '@/app/components/base/file-uploader'
 import { TransferMethod } from '@/types/app'
@@ -51,6 +56,20 @@ const ConfigModal: FC<IConfigModalProps> = ({
  const [tempPayload, setTempPayload] = useState<InputVar>(payload || getNewVarInWorkflow('') as any)
  const { type, label, variable, options, max_length } = tempPayload
  const modalRef = useRef<HTMLDivElement>(null)
+  const appDetail = useAppStore(state => state.appDetail)
+  const isBasicApp = appDetail?.mode !== 'advanced-chat' && appDetail?.mode !== 'workflow'
+  const isSupportJSON = false
+  const jsonSchemaStr = useMemo(() => {
+    const isJsonObject = type === InputVarType.jsonObject
+    if (!isJsonObject || !tempPayload.json_schema)
+      return ''
+    try {
+      return JSON.stringify(JSON.parse(tempPayload.json_schema).properties, null, 2)
+    }
+    catch (_e) {
+      return ''
+    }
+  }, [tempPayload.json_schema])
  useEffect(() => {
    // To fix the first input element auto focus, then directly close modal will raise error
    if (isShow)
@@ -82,25 +101,74 @@ const ConfigModal: FC<IConfigModalProps> = ({
    }
  }, [])

-  const handleTypeChange = useCallback((type: InputVarType) => {
-    return () => {
-      const newPayload = produce(tempPayload, (draft) => {
-        draft.type = type
-        // Clear default value when switching types
-        draft.default = undefined
-        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 handleJSONSchemaChange = useCallback((value: string) => {
+    try {
+      const v = JSON.parse(value)
+      const res = {
+        ...jsonObjectWrap,
+        properties: v,
+      }
+      handlePayloadChange('json_schema')(JSON.stringify(res, null, 2))
    }
+    catch (_e) {
+      return null
+    }
+  }, [handlePayloadChange])
+
+  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.checkbox'),
+      value: InputVarType.checkbox,
+    },
+    ...(supportFile ? [
+      {
+        name: t('appDebug.variableConfig.single-file'),
+        value: InputVarType.singleFile,
+      },
+      {
+        name: t('appDebug.variableConfig.multi-files'),
+        value: InputVarType.multiFiles,
+      },
+    ] : []),
+    ...((!isBasicApp && isSupportJSON) ? [{
+      name: t('appDebug.variableConfig.json'),
+      value: InputVarType.jsonObject,
+    }] : []),
+  ]
+
+  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) => {
@@ -142,15 +210,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
@@ -204,18 +263,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')}>
@@ -330,6 +379,21 @@ const ConfigModal: FC<IConfigModalProps> = ({
            </>
          )}

+          {type === InputVarType.jsonObject && (
+            <Field title={t('appDebug.variableConfig.jsonSchema')} isOptional>
+              <CodeEditor
+                language={CodeLanguage.json}
+                value={jsonSchemaStr}
+                onChange={handleJSONSchemaChange}
+                noWrapper
+                className='bg h-[80px] overflow-y-auto rounded-[10px] bg-components-input-bg-normal p-1'
+                placeholder={
+                  <div className='whitespace-pre'>{jsonConfigPlaceHolder}</div>
+                }
+              />
+            </Field>
+          )}
+
          <div className='!mt-5 flex h-6 items-center space-x-2'>
            <Checkbox checked={tempPayload.required} disabled={tempPayload.hide} onCheck={() => handlePayloadChange('required')(!tempPayload.required)} />
            <span className='system-sm-semibold text-text-secondary'>{t('appDebug.variableConfig.required')}</span>
--- 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,97 @@
+'use client'
+import type { FC } from 'react'
+import React, { useState } from 'react'
+import { ChevronDownIcon } from '@heroicons/react/20/solid'
+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'
+import Badge from '@/app/components/base/badge'
+import { inputVarTypeToVarType } from '@/app/components/workflow/nodes/_base/components/variable/utils'
+
+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 [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 className='flex items-center space-x-1'>
+            <Badge uppercase={false}>{inputVarTypeToVarType(selectedItem?.value as InputVarType)}</Badge>
+            <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>
+              <Badge uppercase={false}>{inputVarTypeToVarType(item.value)}</Badge>
+            </div>
+          ))}
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+
+export default TypeSelector
--- a/web/app/components/app/configuration/config-var/index.tsx
+++ b/web/app/components/app/configuration/config-var/index.tsx
@@ -12,7 +12,7 @@ import SelectVarType from './select-var-type'
 import Tooltip from '@/app/components/base/tooltip'
 import type { PromptVariable } from '@/models/debug'
 import { DEFAULT_VALUE_MAX_LEN } from '@/config'
-import { getNewVar } from '@/utils/var'
+import { getNewVar, hasDuplicateStr } from '@/utils/var'
 import Toast from '@/app/components/base/toast'
 import Confirm from '@/app/components/base/confirm'
 import ConfigContext from '@/context/debug-configuration'
@@ -80,7 +80,28 @@ const ConfigVar: FC<IConfigVarProps> = ({ promptVariables, readonly, onPromptVar
        delete draft[currIndex].options
    })

+    const newList = newPromptVariables
+    let errorMsgKey = ''
+    let typeName = ''
+    if (hasDuplicateStr(newList.map(item => item.key))) {
+      errorMsgKey = 'appDebug.varKeyError.keyAlreadyExists'
+      typeName = 'appDebug.variableConfig.varName'
+    }
+    else if (hasDuplicateStr(newList.map(item => item.name as string))) {
+      errorMsgKey = 'appDebug.varKeyError.keyAlreadyExists'
+      typeName = 'appDebug.variableConfig.labelName'
+    }
+
+    if (errorMsgKey) {
+      Toast.notify({
+        type: 'error',
+        message: t(errorMsgKey, { key: t(typeName) }),
+      })
+      return false
+    }
+
    onPromptVariablesChange?.(newPromptVariables)
+    return true
  }

  const { setShowExternalDataToolModal } = useModalContext()
@@ -190,7 +211,7 @@ const ConfigVar: FC<IConfigVarProps> = ({ promptVariables, readonly, onPromptVar
  const handleConfig = ({ key, type, index, name, config, icon, icon_background }: ExternalDataToolParams) => {
    // setCurrKey(key)
    setCurrIndex(index)
-    if (type !== 'string' && type !== 'paragraph' && type !== 'select' && type !== 'number') {
+    if (type !== 'string' && type !== 'paragraph' && type !== 'select' && type !== 'number' && type !== 'checkbox') {
      handleOpenExternalDataToolModal({ key, type, index, name, config, icon, icon_background }, promptVariables)
      return
    }
@@ -245,7 +266,8 @@ const ConfigVar: FC<IConfigVarProps> = ({ promptVariables, readonly, onPromptVar
          isShow={isShowEditModal}
          onClose={hideEditModal}
          onConfirm={(item) => {
-            updatePromptVariableItem(item)
+            const isValid = updatePromptVariableItem(item)
+            if (!isValid) return
            hideEditModal()
          }}
          varKeys={promptVariables.map(v => v.key)}
--- a/web/app/components/app/configuration/config-var/select-var-type.tsx
+++ b/web/app/components/app/configuration/config-var/select-var-type.tsx
@@ -65,6 +65,7 @@ const SelectVarType: FC<Props> = ({
            <SelectItem type={InputVarType.paragraph} value='paragraph' text={t('appDebug.variableConfig.paragraph')} onClick={handleChange}></SelectItem>
            <SelectItem type={InputVarType.select} value='select' text={t('appDebug.variableConfig.select')} onClick={handleChange}></SelectItem>
            <SelectItem type={InputVarType.number} value='number' text={t('appDebug.variableConfig.number')} onClick={handleChange}></SelectItem>
+            <SelectItem type={InputVarType.checkbox} value='checkbox' text={t('appDebug.variableConfig.checkbox')} onClick={handleChange}></SelectItem>
          </div>
          <div className='h-px border-t border-components-panel-border'></div>
          <div className='p-1'>
--- a/web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.tsx
+++ b/web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.tsx
@@ -120,6 +120,8 @@ const SettingBuiltInTool: FC<Props> = ({
      return t('tools.setBuiltInTools.number')
    if (type === 'text-input')
      return t('tools.setBuiltInTools.string')
+    if (type === 'checkbox')
+      return 'boolean'
    if (type === 'file')
      return t('tools.setBuiltInTools.file')
    return type
--- a/web/app/components/app/configuration/debug/chat-user-input.tsx
+++ b/web/app/components/app/configuration/debug/chat-user-input.tsx
@@ -8,6 +8,7 @@ import Textarea from '@/app/components/base/textarea'
 import { DEFAULT_VALUE_MAX_LEN } from '@/config'
 import type { Inputs } from '@/models/debug'
 import cn from '@/utils/classnames'
+import BoolInput from '@/app/components/workflow/nodes/_base/components/before-run-form/bool-input'

 type Props = {
  inputs: Inputs
@@ -31,7 +32,7 @@ const ChatUserInput = ({
    return obj
  })()

-  const handleInputValueChange = (key: string, value: string) => {
+  const handleInputValueChange = (key: string, value: string | boolean) => {
    if (!(key in promptVariableObj))
      return

@@ -55,10 +56,12 @@ const ChatUserInput = ({
            className='mb-4 last-of-type:mb-0'
          >
            <div>
+              {type !== 'checkbox' && (
              <div className='system-sm-semibold mb-1 flex h-6 items-center gap-1 text-text-secondary'>
                <div className='truncate'>{name || key}</div>
                {!required && <span className='system-xs-regular text-text-tertiary'>{t('workflow.panel.optional')}</span>}
              </div>
+              )}
              <div className='grow'>
                {type === 'string' && (
                  <Input
@@ -96,6 +99,14 @@ const ChatUserInput = ({
                    maxLength={max_length || DEFAULT_VALUE_MAX_LEN}
                  />
                )}
+                {type === 'checkbox' && (
+                  <BoolInput
+                    name={name || key}
+                    value={!!inputs[key]}
+                    required={required}
+                    onChange={(value) => { handleInputValueChange(key, value) }}
+                  />
+                )}
              </div>
            </div>
          </div>
--- a/web/app/components/app/configuration/debug/index.tsx
+++ b/web/app/components/app/configuration/debug/index.tsx
@@ -34,7 +34,7 @@ import { RefreshCcw01 } from '@/app/components/base/icons/src/vender/line/arrows
 import TooltipPlus from '@/app/components/base/tooltip'
 import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
 import type { ModelConfig as BackendModelConfig, VisionFile, VisionSettings } from '@/types/app'
-import { promptVariablesToUserInputsForm } from '@/utils/model-config'
+import { formatBooleanInputs, promptVariablesToUserInputsForm } from '@/utils/model-config'
 import TextGeneration from '@/app/components/app/text-generate/item'
 import { IS_CE_EDITION } from '@/config'
 import type { Inputs } from '@/models/debug'
@@ -259,7 +259,7 @@ const Debug: FC<IDebug> = ({
    }

    const data: Record<string, any> = {
-      inputs,
+      inputs: formatBooleanInputs(modelConfig.configs.prompt_variables, inputs),
      model_config: postModelConfig,
    }

--- a/web/app/components/app/configuration/index.tsx
+++ b/web/app/components/app/configuration/index.tsx
@@ -60,7 +60,6 @@ import {
  useModelListAndDefaultModelAndCurrentProviderAndModel,
  useTextGenerationCurrentProviderAndModelAndModelList,
 } from '@/app/components/header/account-setting/model-provider-page/hooks'
-import { fetchCollectionList } from '@/service/tools'
 import type { Collection } from '@/app/components/tools/types'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import {
@@ -82,6 +81,7 @@ import { supportFunctionCall } from '@/utils/tool-call'
 import { MittProvider } from '@/context/mitt-context'
 import { fetchAndMergeValidCompletionParams } from '@/utils/completion-params'
 import Toast from '@/app/components/base/toast'
+import { fetchCollectionList } from '@/service/tools'
 import { useAppContext } from '@/context/app-context'

 type PublishConfig = {
--- a/web/app/components/app/configuration/prompt-value-panel/index.tsx
+++ b/web/app/components/app/configuration/prompt-value-panel/index.tsx
@@ -22,6 +22,7 @@ import type { VisionFile, VisionSettings } from '@/types/app'
 import { DEFAULT_VALUE_MAX_LEN } from '@/config'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import cn from '@/utils/classnames'
+import BoolInput from '@/app/components/workflow/nodes/_base/components/before-run-form/bool-input'

 export type IPromptValuePanelProps = {
  appType: AppType
@@ -66,7 +67,7 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
    else { return !modelConfig.configs.prompt_template }
  }, [chatPromptConfig.prompt, completionPromptConfig.prompt?.text, isAdvancedMode, mode, modelConfig.configs.prompt_template, modelModeType])

-  const handleInputValueChange = (key: string, value: string) => {
+  const handleInputValueChange = (key: string, value: string | boolean) => {
    if (!(key in promptVariableObj))
      return

@@ -109,10 +110,12 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
                className='mb-4 last-of-type:mb-0'
              >
                <div>
-                  <div className='system-sm-semibold mb-1 flex h-6 items-center gap-1 text-text-secondary'>
-                    <div className='truncate'>{name || key}</div>
-                    {!required && <span className='system-xs-regular text-text-tertiary'>{t('workflow.panel.optional')}</span>}
-                  </div>
+                  {type !== 'checkbox' && (
+                    <div className='system-sm-semibold mb-1 flex h-6 items-center gap-1 text-text-secondary'>
+                      <div className='truncate'>{name || key}</div>
+                      {!required && <span className='system-xs-regular text-text-tertiary'>{t('workflow.panel.optional')}</span>}
+                    </div>
+                  )}
                  <div className='grow'>
                    {type === 'string' && (
                      <Input
@@ -151,6 +154,14 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
                        maxLength={max_length || DEFAULT_VALUE_MAX_LEN}
                      />
                    )}
+                    {type === 'checkbox' && (
+                      <BoolInput
+                        name={name || key}
+                        value={!!inputs[key]}
+                        required={required}
+                        onChange={(value) => { handleInputValueChange(key, value) }}
+                      />
+                    )}
                  </div>
                </div>
              </div>