feat: update checkbox component in the panel and refactor form types for checkbox and boolean

web/app/components/base/textarea/index.tsx

@@ -20,7 +20,7 @@ const textareaVariants = cva(
 )
 
 export type TextareaProps = {
-  value: string
+  value: string | number
   disabled?: boolean
   destructive?: boolean
   styleCss?: CSSProperties

web/app/components/header/account-setting/model-provider-page/declarations.ts

@@ -14,7 +14,8 @@ export enum FormTypeEnum {
   secretInput = 'secret-input',
   select = 'select',
   radio = 'radio',
-  boolean = 'checkbox',
+  checkbox = 'checkbox',
+  boolean = 'boolean',
   files = 'files',
   file = 'file',
   modelSelector = 'model-selector',

web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx

@@ -264,7 +264,7 @@ function Form<
       )
     }
 
-    if (formSchema.type === FormTypeEnum.boolean) {
+    if (formSchema.type === FormTypeEnum.checkbox) {
       const {
         variable, label, show_on, required,
       } = formSchema as CredentialFormSchemaRadio

web/app/components/plugins/plugin-detail-panel/tool-selector/reasoning-config-form.tsx

@@ -54,7 +54,7 @@ const ReasoningConfigForm: React.FC<Props> = ({
   const getVarKindType = (type: FormTypeEnum) => {
     if (type === FormTypeEnum.file || type === FormTypeEnum.files)
       return VarKindType.variable
-    if (type === FormTypeEnum.select || type === FormTypeEnum.boolean || type === FormTypeEnum.textNumber || type === FormTypeEnum.array || type === FormTypeEnum.object)
+    if (type === FormTypeEnum.select || type === FormTypeEnum.checkbox || type === FormTypeEnum.textNumber || type === FormTypeEnum.array || type === FormTypeEnum.object)
       return VarKindType.constant
     if (type === FormTypeEnum.textInput || type === FormTypeEnum.secretInput)
       return VarKindType.mixed
@@ -164,7 +164,7 @@ const ReasoningConfigForm: React.FC<Props> = ({
     const isArray = type === FormTypeEnum.array
     const isShowJSONEditor = isObject || isArray
     const isFile = type === FormTypeEnum.file || type === FormTypeEnum.files
-    const isBoolean = type === FormTypeEnum.boolean
+    const isBoolean = type === FormTypeEnum.checkbox
     const isSelect = type === FormTypeEnum.select
     const isAppSelector = type === FormTypeEnum.appSelector
     const isModelSelector = type === FormTypeEnum.modelSelector

web/app/components/tools/utils/to-form-schema.ts

@@ -181,7 +181,7 @@ export const getConfiguredValue = (value: Record<string, any>, formSchemas: { va
 const getVarKindType = (type: FormTypeEnum) => {
   if (type === FormTypeEnum.file || type === FormTypeEnum.files)
     return VarKindType.variable
-  if (type === FormTypeEnum.select || type === FormTypeEnum.boolean || type === FormTypeEnum.textNumber)
+  if (type === FormTypeEnum.select || type === FormTypeEnum.checkbox || type === FormTypeEnum.textNumber)
     return VarKindType.constant
   if (type === FormTypeEnum.textInput || type === FormTypeEnum.secretInput)
     return VarKindType.mixed

web/app/components/workflow/nodes/_base/components/form-input-item.tsx

@@ -1,6 +1,6 @@
 'use client'
 import type { FC } from 'react'
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { type ResourceVarInputs, VarKindType } from '../types'
 import type { CredentialFormSchema, FormOption } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
@@ -17,7 +17,6 @@ import useAvailableVarList from '@/app/components/workflow/nodes/_base/hooks/use
 import Input from '@/app/components/base/input'
 import { SimpleSelect } from '@/app/components/base/select'
 import MixedVariableTextInput from '@/app/components/workflow/nodes/tool/components/mixed-variable-text-input'
-import FormInputBoolean from './form-input-boolean'
 import AppSelector from '@/app/components/plugins/plugin-detail-panel/app-selector'
 import ModelParameterModal from '@/app/components/plugins/plugin-detail-panel/model-selector'
 import VarReferencePicker from '@/app/components/workflow/nodes/_base/components/variable/var-reference-picker'
@@ -29,6 +28,8 @@ import { ChevronDownIcon } from '@heroicons/react/20/solid'
 import { RiCheckLine, RiLoader4Line } from '@remixicon/react'
 import type { Event } from '@/app/components/tools/types'
 import { PluginCategoryEnum } from '@/app/components/plugins/types'
+import CheckboxList from '@/app/components/base/checkbox-list'
+import FormInputBoolean from './form-input-boolean'
 
 type Props = {
   readOnly: boolean
@@ -69,6 +70,7 @@ const FormInputItem: FC<Props> = ({
     placeholder,
     variable,
     type,
+    _type,
     default: defaultValue,
     options,
     multiple,
@@ -81,7 +83,8 @@ const FormInputItem: FC<Props> = ({
   const isArray = type === FormTypeEnum.array
   const isShowJSONEditor = isObject || isArray
   const isFile = type === FormTypeEnum.file || type === FormTypeEnum.files
-  const isBoolean = type === FormTypeEnum.boolean
+  const isBoolean = _type === FormTypeEnum.boolean
+  const isCheckbox = _type === FormTypeEnum.checkbox
   const isSelect = type === FormTypeEnum.select
   const isDynamicSelect = type === FormTypeEnum.dynamicSelect
   const isAppSelector = type === FormTypeEnum.appSelector
@@ -280,6 +283,45 @@ const FormInputItem: FC<Props> = ({
     })
   }
 
+  const availableCheckboxOptions = useMemo(() => (
+    (options || []).filter((option: { show_on?: Array<{ variable: string; value: any }> }) => {
+      if (option.show_on?.length)
+        return option.show_on.every(showOnItem => value[showOnItem.variable]?.value === showOnItem.value || value[showOnItem.variable] === showOnItem.value)
+      return true
+    })
+  ), [options, value])
+
+  const checkboxListOptions = useMemo(() => (
+    availableCheckboxOptions.map((option: { value: string; label: Record<string, string> }) => ({
+      value: option.value,
+      label: option.label?.[language] || option.label?.en_US || option.value,
+    }))
+  ), [availableCheckboxOptions, language])
+
+  const checkboxListValue = useMemo(() => {
+    let current: string[] = []
+    if (Array.isArray(varInput?.value))
+      current = varInput.value as string[]
+    else if (typeof varInput?.value === 'string')
+      current = [varInput.value as string]
+    else if (Array.isArray(defaultValue))
+      current = defaultValue as string[]
+
+    const allowedValues = new Set(availableCheckboxOptions.map((option: { value: string }) => option.value))
+    return current.filter(item => allowedValues.has(item))
+  }, [varInput?.value, defaultValue, availableCheckboxOptions])
+
+  const handleCheckboxListChange = (selected: string[]) => {
+    onChange({
+      ...value,
+      [variable]: {
+        ...(varInput || {}),
+        type: VarKindType.constant,
+        value: selected,
+      },
+    })
+  }
+
   return (
     <div className={cn('gap-1', !(isShowJSONEditor && isConstant) && 'flex')}>
       {showTypeSwitch && (
@@ -306,6 +348,16 @@ const FormInputItem: FC<Props> = ({
           placeholder={placeholder?.[language] || placeholder?.en_US}
         />
       )}
+      {isCheckbox && isConstant && (
+        <CheckboxList
+          title={schema.label?.[language] || schema.label?.en_US || variable}
+          value={checkboxListValue}
+          onChange={handleCheckboxListChange}
+          options={checkboxListOptions}
+          disabled={readOnly}
+          maxHeight='200px'
+        />
+      )}
       {isBoolean && isConstant && (
         <FormInputBoolean
           value={varInput?.value as boolean}