diff --git a/web/app/components/base/prompt-editor/plugins/hitl-input-block/__tests__/input-field.spec.tsx b/web/app/components/base/prompt-editor/plugins/hitl-input-block/__tests__/input-field.spec.tsx index a8037f982d..009c5e728e 100644 --- a/web/app/components/base/prompt-editor/plugins/hitl-input-block/__tests__/input-field.spec.tsx +++ b/web/app/components/base/prompt-editor/plugins/hitl-input-block/__tests__/input-field.spec.tsx @@ -385,4 +385,37 @@ describe('InputField', () => { }, }) }) + + it('should preserve constant and variable select sources when toggling', async () => { + const user = userEvent.setup() + const onChange = vi.fn() + + render( + , + ) + + await user.click(screen.getByRole('button', { name: 'select-select' })) + await user.click(screen.getByRole('button', { name: 'config-select' })) + await user.click(screen.getByText(/workflow\.nodes\.humanInput\.insertInputField\.useVarInstead/i)) + await user.click(screen.getByText('pick-variable')) + await user.click(screen.getByText(/workflow\.nodes\.humanInput\.insertInputField\.useConstantInstead/i)) + await user.click(screen.getByRole('button', { name: /workflow\.nodes\.humanInput\.insertInputField\.insert/i })) + + expect(onChange).toHaveBeenCalledTimes(1) + expect(onChange.mock.calls[0]![0]).toEqual({ + type: InputVarType.select, + output_variable_name: 'valid_name', + option_source: { + type: 'constant', + selector: ['node-a', 'var-a'], + value: ['alpha', 'beta'], + }, + }) + }) }) diff --git a/web/app/components/base/prompt-editor/plugins/hitl-input-block/input-field.tsx b/web/app/components/base/prompt-editor/plugins/hitl-input-block/input-field.tsx index 0faaff917a..cf376fb45d 100644 --- a/web/app/components/base/prompt-editor/plugins/hitl-input-block/input-field.tsx +++ b/web/app/components/base/prompt-editor/plugins/hitl-input-block/input-field.tsx @@ -2,6 +2,7 @@ import type { Item as TypeSelectItem } from '@/app/components/app/configuration/ import type { FormInputItem, FormInputItemDefault, ParagraphFormInput } from '@/app/components/workflow/nodes/human-input/types' import type { ValueSelector } from '@/app/components/workflow/types' import { Button } from '@langgenius/dify-ui/button' +import { cn } from '@langgenius/dify-ui/cn' import { produce } from 'immer' import * as React from 'react' import { useCallback, useEffect, useMemo, useState } from 'react' @@ -9,15 +10,17 @@ import { useTranslation } from 'react-i18next' import TypeSelector from '@/app/components/app/configuration/config-var/config-modal/type-select' import ConfigSelect from '@/app/components/app/configuration/config-var/config-select' import Input from '@/app/components/base/input' +import VarReferencePicker from '@/app/components/workflow/nodes/_base/components/variable/var-reference-picker' import { createDefaultFormInputByType, createDefaultParagraphFormInput, isParagraphFormInput, isSelectFormInput, } from '@/app/components/workflow/nodes/human-input/types' -import { InputVarType } from '@/app/components/workflow/types' +import { InputVarType, VarType } from '@/app/components/workflow/types' import { getKeyboardKeyNameBySystem } from '@/app/components/workflow/utils' import PrePopulate from './pre-populate' +import TypeSwitch from './type-switch' const i18nPrefix = 'nodes.humanInput.insertInputField' @@ -116,6 +119,35 @@ const InputField: React.FC = ({ } }) }, []) + const handleSelectOptionSourceTypeChange = useCallback((isVariable: boolean) => { + setTempPayload((prev) => { + if (!isSelectFormInput(prev)) + return prev + + return { + ...prev, + option_source: { + ...prev.option_source, + type: isVariable ? 'variable' : 'constant', + }, + } + }) + }, []) + const handleSelectOptionSourceSelectorChange = useCallback((selector: ValueSelector | string) => { + setTempPayload((prev) => { + if (!isSelectFormInput(prev)) + return prev + + return { + ...prev, + option_source: { + ...prev.option_source, + type: 'variable', + selector: selector as ValueSelector, + }, + } + }) + }, []) useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { @@ -188,10 +220,38 @@ const InputField: React.FC = ({
{t('variableConfig.options', { ns: 'appDebug' })}
- + {tempPayload.option_source.type === 'variable' + ? ( +
+ varPayload.type === VarType.arrayString} + /> + +
+ ) + : ( +
+ + +
+ )} )}