feat: support bool type variable frontend (#24437)

Co-authored-by: QuantumGhost <obelisk.reg+git@gmail.com>

web/app/components/workflow/nodes/loop/components/loop-variables/form-item.tsx

@@ -18,33 +18,16 @@ import {
   ValueType,
   VarType,
 } from '@/app/components/workflow/types'
+import BoolValue from '@/app/components/workflow/panel/chat-variable-panel/components/bool-value'
 
-const objectPlaceholder = `#  example
-#  {
-#     "name": "ray",
-#     "age": 20
-#  }`
-const arrayStringPlaceholder = `#  example
-#  [
-#     "value1",
-#     "value2"
-#  ]`
-const arrayNumberPlaceholder = `#  example
-#  [
-#     100,
-#     200
-#  ]`
-const arrayObjectPlaceholder = `#  example
-#  [
-#     {
-#       "name": "ray",
-#       "age": 20
-#     },
-#     {
-#       "name": "lily",
-#       "age": 18
-#     }
-#  ]`
+import {
+  arrayBoolPlaceholder,
+  arrayNumberPlaceholder,
+  arrayObjectPlaceholder,
+  arrayStringPlaceholder,
+  objectPlaceholder,
+} from '@/app/components/workflow/panel/chat-variable-panel/utils'
+import ArrayBoolList from '@/app/components/workflow/panel/chat-variable-panel/components/array-bool-list'
 
 type FormItemProps = {
   nodeId: string
@@ -83,6 +66,8 @@ const FormItem = ({
       return arrayNumberPlaceholder
     if (var_type === VarType.arrayObject)
       return arrayObjectPlaceholder
+    if (var_type === VarType.arrayBoolean)
+      return arrayBoolPlaceholder
     return objectPlaceholder
   }, [var_type])
 
@@ -120,6 +105,14 @@ const FormItem = ({
           />
         )
       }
+      {
+        value_type === ValueType.constant && var_type === VarType.boolean && (
+          <BoolValue
+            value={value}
+            onChange={handleChange}
+          />
+        )
+      }
       {
         value_type === ValueType.constant
         && (var_type === VarType.object || var_type === VarType.arrayString || var_type === VarType.arrayNumber || var_type === VarType.arrayObject)
@@ -137,6 +130,15 @@ const FormItem = ({
           </div>
         )
       }
+      {
+        value_type === ValueType.constant && var_type === VarType.arrayBoolean && (
+          <ArrayBoolList
+            className='mt-2'
+            list={value || [false]}
+            onChange={handleChange}
+          />
+        )
+      }
     </div>
   )
 }

web/app/components/workflow/nodes/loop/components/loop-variables/item.tsx

@@ -12,6 +12,7 @@ import type {
 } from '@/app/components/workflow/nodes/loop/types'
 import { checkKeys, replaceSpaceWithUnderscoreInVarNameInput } from '@/utils/var'
 import Toast from '@/app/components/base/toast'
+import { ValueType, VarType } from '@/app/components/workflow/types'
 
 type ItemProps = {
   item: LoopVariable
@@ -42,12 +43,25 @@ const Item = ({
     handleUpdateLoopVariable(item.id, { label: e.target.value })
   }, [item.id, handleUpdateLoopVariable])
 
+  const getDefaultValue = useCallback((varType: VarType, valueType: ValueType) => {
+    if(valueType === ValueType.variable)
+      return undefined
+    switch (varType) {
+      case VarType.boolean:
+        return false
+      case VarType.arrayBoolean:
+        return [false]
+      default:
+        return undefined
+    }
+  }, [])
+
   const handleUpdateItemVarType = useCallback((value: any) => {
-    handleUpdateLoopVariable(item.id, { var_type: value, value: undefined })
+    handleUpdateLoopVariable(item.id, { var_type: value, value: getDefaultValue(value, item.value_type) })
   }, [item.id, handleUpdateLoopVariable])
 
   const handleUpdateItemValueType = useCallback((value: any) => {
-    handleUpdateLoopVariable(item.id, { value_type: value, value: undefined })
+    handleUpdateLoopVariable(item.id, { value_type: value, value: getDefaultValue(item.var_type, value) })
   }, [item.id, handleUpdateLoopVariable])
 
   const handleUpdateItemValue = useCallback((value: any) => {

web/app/components/workflow/nodes/loop/components/loop-variables/variable-type-select.tsx

@@ -22,6 +22,10 @@ const VariableTypeSelect = ({
       label: 'Object',
       value: VarType.object,
     },
+    {
+      label: 'Boolean',
+      value: VarType.boolean,
+    },
     {
       label: 'Array[string]',
       value: VarType.arrayString,
@@ -34,6 +38,10 @@ const VariableTypeSelect = ({
       label: 'Array[object]',
       value: VarType.arrayObject,
     },
+    {
+      label: 'Array[boolean]',
+      value: VarType.arrayBoolean,
+    },
   ]
 
   return (