diff --git a/web/app/components/workflow/variable-inspect/value-content.tsx b/web/app/components/workflow/variable-inspect/value-content.tsx
index 3770dbb022..42bd0d5cde 100644
--- a/web/app/components/workflow/variable-inspect/value-content.tsx
+++ b/web/app/components/workflow/variable-inspect/value-content.tsx
@@ -21,6 +21,7 @@ import { SupportUploadFileTypes } from '@/app/components/workflow/types'
 import type { VarInInspect } from '@/types/workflow'
 import { VarInInspectType } from '@/types/workflow'
 import cn from '@/utils/classnames'
+import BoolValue from '../panel/chat-variable-panel/components/bool-value'
 
 type Props = {
   currentVar: VarInInspect
@@ -35,6 +36,7 @@ const ValueContent = ({
   const errorMessageRef = useRef<HTMLDivElement>(null)
   const [editorHeight, setEditorHeight] = useState(0)
   const showTextEditor = currentVar.value_type === 'secret' || currentVar.value_type === 'string' || currentVar.value_type === 'number'
+  const showBoolEditor = typeof currentVar.value === 'boolean'
   const isSysFiles = currentVar.type === VarInInspectType.system && currentVar.name === 'files'
   const showJSONEditor = !isSysFiles && (currentVar.value_type === 'object' || currentVar.value_type === 'array[string]' || currentVar.value_type === 'array[number]' || currentVar.value_type === 'array[object]' || currentVar.value_type === 'array[any]')
   const showFileEditor = isSysFiles || currentVar.value_type === 'file' || currentVar.value_type === 'array[file]'
@@ -72,7 +74,6 @@ const ValueContent = ({
 
     if (showFileEditor)
       setFileValue(formatFileValue(currentVar))
-  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentVar.id, currentVar.value])
 
   const handleTextChange = (value: string) => {
@@ -178,6 +179,17 @@ const ValueContent = ({
             onChange={e => handleTextChange(e.target.value)}
           />
         )}
+        {showBoolEditor && (
+          <div className='w-[295px]'>
+            <BoolValue
+              value={value as boolean}
+              onChange={(newValue) => {
+                setValue(newValue)
+                debounceValueChange(currentVar.id, newValue)
+              }}
+            />
+          </div>
+        )}
         {showJSONEditor && (
           <SchemaEditor
             readonly={JSONEditorDisabled}