diff --git a/web/app/components/base/textarea/index.tsx b/web/app/components/base/textarea/index.tsx index 7813eb7209..609f1ad51d 100644 --- a/web/app/components/base/textarea/index.tsx +++ b/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 diff --git a/web/app/components/header/account-setting/model-provider-page/declarations.ts b/web/app/components/header/account-setting/model-provider-page/declarations.ts index 62cb1a96e9..134df7b3e8 100644 --- a/web/app/components/header/account-setting/model-provider-page/declarations.ts +++ b/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', diff --git a/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx b/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx index 164aeb5bc3..3c51762c52 100644 --- a/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx +++ b/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 diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/reasoning-config-form.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/reasoning-config-form.tsx index b79ee78664..88bf7f0dfd 100644 --- a/web/app/components/plugins/plugin-detail-panel/tool-selector/reasoning-config-form.tsx +++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/reasoning-config-form.tsx @@ -54,7 +54,7 @@ const ReasoningConfigForm: React.FC = ({ 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 = ({ 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 diff --git a/web/app/components/tools/utils/to-form-schema.ts b/web/app/components/tools/utils/to-form-schema.ts index 32a2151f0f..69f5dd5f2f 100644 --- a/web/app/components/tools/utils/to-form-schema.ts +++ b/web/app/components/tools/utils/to-form-schema.ts @@ -181,7 +181,7 @@ export const getConfiguredValue = (value: Record, 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 diff --git a/web/app/components/workflow/nodes/_base/components/form-input-item.tsx b/web/app/components/workflow/nodes/_base/components/form-input-item.tsx index 887f2bf229..f4c6e4d18b 100644 --- a/web/app/components/workflow/nodes/_base/components/form-input-item.tsx +++ b/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 = ({ placeholder, variable, type, + _type, default: defaultValue, options, multiple, @@ -81,7 +83,8 @@ const FormInputItem: FC = ({ 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 = ({ }) } + 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 }) => ({ + 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 (
{showTypeSwitch && ( @@ -306,6 +348,16 @@ const FormInputItem: FC = ({ placeholder={placeholder?.[language] || placeholder?.en_US} /> )} + {isCheckbox && isConstant && ( + + )} {isBoolean && isConstant && (