From b5782fff8f94493f3cd6d9207954d72f96fe242d Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Wed, 9 Jul 2025 14:06:25 +0800
Subject: [PATCH] feat: basic chat app support bool

---
 .../app/configuration/config-var/index.tsx          |  2 +-
 .../configuration/config-var/select-var-type.tsx    |  1 +
 .../app/configuration/debug/chat-user-input.tsx     | 13 ++++++++++++-
 .../_base/components/before-run-form/bool-input.tsx |  9 ++++++++-
 .../_base/components/before-run-form/form-item.tsx  |  1 +
 web/models/debug.ts                                 |  2 +-
 6 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/web/app/components/app/configuration/config-var/index.tsx b/web/app/components/app/configuration/config-var/index.tsx
index 612d47603c..2bd5d9dc25 100644
--- a/web/app/components/app/configuration/config-var/index.tsx
+++ b/web/app/components/app/configuration/config-var/index.tsx
@@ -190,7 +190,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 !== 'boolean') {
       handleOpenExternalDataToolModal({ key, type, index, name, config, icon, icon_background }, promptVariables)
       return
     }
diff --git a/web/app/components/app/configuration/config-var/select-var-type.tsx b/web/app/components/app/configuration/config-var/select-var-type.tsx
index 485f9932f3..1a691a17c2 100644
--- 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.boolean} value='boolean' text={t('appDebug.variableConfig.boolean')} onClick={handleChange}></SelectItem>
           </div>
           <div className='h-[1px] border-t border-components-panel-border'></div>
           <div className='p-1'>
diff --git a/web/app/components/app/configuration/debug/chat-user-input.tsx b/web/app/components/app/configuration/debug/chat-user-input.tsx
index fb4ac31d90..8efd966bd3 100644
--- 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 !== 'boolean' && (
               <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 === 'boolean' && (
+                  <BoolInput
+                    name={name || key}
+                    value={!!inputs[key]}
+                    required={required}
+                    onChange={(value) => { handleInputValueChange(key, value) }}
+                  />
+                )}
               </div>
             </div>
           </div>
diff --git a/web/app/components/workflow/nodes/_base/components/before-run-form/bool-input.tsx b/web/app/components/workflow/nodes/_base/components/before-run-form/bool-input.tsx
index 7ed13d87fc..73219a551b 100644
--- a/web/app/components/workflow/nodes/_base/components/before-run-form/bool-input.tsx
+++ b/web/app/components/workflow/nodes/_base/components/before-run-form/bool-input.tsx
@@ -2,10 +2,12 @@
 import Checkbox from '@/app/components/base/checkbox'
 import type { FC } from 'react'
 import React, { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
 
 type Props = {
   name: string
   value: boolean
+  required?: boolean
   onChange: (value: boolean) => void
 }
 
@@ -13,7 +15,9 @@ const BoolInput: FC<Props> = ({
   value,
   onChange,
   name,
+  required,
 }) => {
+  const { t } = useTranslation()
   const handleChange = useCallback(() => {
     onChange(!value)
   }, [value, onChange])
@@ -24,7 +28,10 @@ const BoolInput: FC<Props> = ({
         checked={!!value}
         onCheck={handleChange}
       />
-      <div className='system-sm-medium text-text-secondary'>{name}</div>
+      <div className='system-sm-medium flex items-center gap-1 text-text-secondary'>
+        {name}
+        {!required && <span className='system-xs-regular text-text-tertiary'>{t('workflow.panel.optional')}</span>}
+      </div>
     </div>
   )
 }
diff --git a/web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx b/web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx
index 071ffded5e..06cb80f6e3 100644
--- a/web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx
+++ b/web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx
@@ -172,6 +172,7 @@ const FormItem: FC<Props> = ({
           <BoolInput
             name={payload.label as string}
             value={!!value}
+            required={payload.required}
             onChange={onChange}
           />
         )}
diff --git a/web/models/debug.ts b/web/models/debug.ts
index e582e8c18a..0a1c9c8a23 100644
--- a/web/models/debug.ts
+++ b/web/models/debug.ts
@@ -9,7 +9,7 @@ import type {
   MetadataFilteringModeEnum,
 } from '@/app/components/workflow/nodes/knowledge-retrieval/types'
 import type { ModelConfig as NodeModelConfig } from '@/app/components/workflow/types'
-export type Inputs = Record<string, string | number | object>
+export type Inputs = Record<string, string | number | object | boolean>
 
 export enum PromptMode {
   simple = 'simple',