feat(agentflow): update behaviour for Start node, Http Node, and validation fixes (FLOWISE-265, FLOWISE-264) (#6027)

jocelynlin-wd · claude · web-flow · commit 1473702b9d72 · 2026-03-20T15:33:42.000-07:00
* feat(agentflow): update behaviour for Start node, Http Node, and validation fixes (FLOWISE-265, FLOWISE-264)

- Updated behaviors for Start and HTTP nodes
- Fix computeArrayItemParameters crash when non-array field changes
- Fix validateNode to use availableNodes schema when node.data.inputs is missing
- Fix validateNode to respect param.default for required field checks
- Add option.description rendering in dropdown to match legacy UI

Co-Authored-By: Claude Sonnet 4.6 &lt;noreply@anthropic.com&gt;

* fix dropdown display to match agentflow v2

* add missing credential field on start node

* remove HttpBodyInput component and associated tests (not referenced)

---------

Co-authored-by: Claude Sonnet 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/packages/agentflow/src/atoms/ArrayInput.test.tsx b/packages/agentflow/src/atoms/ArrayInput.test.tsx
@@ -306,7 +306,140 @@ describe('ArrayInput', () => {
         })
     })
 
-    // Test 12: itemParameters prop overrides inputParam.array display flags
+    // Test 12: Nested array sub-fields render recursively
+    it('should render nested array sub-fields (e.g., addOptions inside formInputTypes)', () => {
+        const nestedArrayParam: InputParam = {
+            id: 'formInputTypes',
+            name: 'formInputTypes',
+            label: 'Form Input Type',
+            type: 'array',
+            array: [
+                { id: 'type', name: 'type', label: 'Type', type: 'options', default: 'string' } as InputParam,
+                { id: 'label', name: 'label', label: 'Label', type: 'string' } as InputParam,
+                {
+                    id: 'addOptions',
+                    name: 'addOptions',
+                    label: 'Add Options',
+                    type: 'array',
+                    display: true,
+                    array: [{ id: 'option', name: 'option', label: 'Option', type: 'string' } as InputParam]
+                } as InputParam
+            ]
+        }
+
+        const dataWithNestedArray: NodeData = {
+            ...mockNodeData,
+            inputValues: {
+                formInputTypes: [
+                    {
+                        type: 'options',
+                        label: 'Color',
+                        addOptions: [{ option: 'Red' }, { option: 'Blue' }]
+                    }
+                ]
+            }
+        } as NodeData
+
+        render(<ArrayInput inputParam={nestedArrayParam} data={dataWithNestedArray} onDataChange={mockOnDataChange} />)
+
+        // The parent array item renders
+        expect(screen.getByText('0')).toBeInTheDocument()
+
+        // The nested array sub-field (addOptions) is rendered via NodeInputHandler
+        // Since our mock NodeInputHandler renders a div with data-testid, the addOptions field should appear
+        expect(screen.getByTestId('input-handler-addOptions')).toBeInTheDocument()
+    })
+
+    it('should hide nested array sub-fields when display is false', () => {
+        const nestedArrayParam: InputParam = {
+            id: 'formInputTypes',
+            name: 'formInputTypes',
+            label: 'Form Input Type',
+            type: 'array',
+            array: [
+                { id: 'type', name: 'type', label: 'Type', type: 'options' } as InputParam,
+                {
+                    id: 'addOptions',
+                    name: 'addOptions',
+                    label: 'Add Options',
+                    type: 'array',
+                    display: false,
+                    array: [{ id: 'option', name: 'option', label: 'Option', type: 'string' } as InputParam]
+                } as InputParam
+            ]
+        }
+
+        const dataWithNestedArray: NodeData = {
+            ...mockNodeData,
+            inputValues: {
+                formInputTypes: [{ type: 'string', label: 'Name' }]
+            }
+        } as NodeData
+
+        render(<ArrayInput inputParam={nestedArrayParam} data={dataWithNestedArray} onDataChange={mockOnDataChange} />)
+
+        expect(screen.getByTestId('input-handler-type')).toBeInTheDocument()
+        expect(screen.queryByTestId('input-handler-addOptions')).not.toBeInTheDocument()
+    })
+
+    it('should use itemParameters to control nested array visibility per row', () => {
+        const nestedArrayParam: InputParam = {
+            id: 'formInputTypes',
+            name: 'formInputTypes',
+            label: 'Form Input Type',
+            type: 'array',
+            array: [
+                { id: 'type', name: 'type', label: 'Type', type: 'options' } as InputParam,
+                {
+                    id: 'addOptions',
+                    name: 'addOptions',
+                    label: 'Add Options',
+                    type: 'array',
+                    array: [{ id: 'option', name: 'option', label: 'Option', type: 'string' } as InputParam]
+                } as InputParam
+            ]
+        }
+
+        const dataWithTwoRows: NodeData = {
+            ...mockNodeData,
+            inputValues: {
+                formInputTypes: [
+                    { type: 'options', label: 'Color', addOptions: [{ option: 'Red' }] },
+                    { type: 'string', label: 'Name' }
+                ]
+            }
+        } as NodeData
+
+        // Row 0: addOptions visible (type = options)
+        // Row 1: addOptions hidden (type = string)
+        const itemParameters: InputParam[][] = [
+            [
+                { id: 'type', name: 'type', label: 'Type', type: 'options', display: true } as InputParam,
+                { id: 'addOptions', name: 'addOptions', label: 'Add Options', type: 'array', display: true } as InputParam
+            ],
+            [
+                { id: 'type', name: 'type', label: 'Type', type: 'options', display: true } as InputParam,
+                { id: 'addOptions', name: 'addOptions', label: 'Add Options', type: 'array', display: false } as InputParam
+            ]
+        ]
+
+        render(
+            <ArrayInput
+                inputParam={nestedArrayParam}
+                data={dataWithTwoRows}
+                onDataChange={mockOnDataChange}
+                itemParameters={itemParameters}
+            />
+        )
+
+        // Both rows show their Type field
+        expect(screen.getAllByTestId('input-handler-type')).toHaveLength(2)
+
+        // Only row 0 shows addOptions (row 1 has display: false)
+        expect(screen.getAllByTestId('input-handler-addOptions')).toHaveLength(1)
+    })
+
+    // Test 13: itemParameters prop overrides inputParam.array display flags
     it('should use itemParameters prop for field visibility when provided, ignoring inputParam.array display flags', () => {
         // inputParam.array has both fields with no display flag (both would show)
         const dataWithItem: NodeData = {
diff --git a/packages/agentflow/src/atoms/NodeInputHandler.tsx b/packages/agentflow/src/atoms/NodeInputHandler.tsx
@@ -241,15 +241,31 @@ export function NodeInputHandler({
                         value={value || ''}
                         onChange={(e) => handleDataChange(e.target.value)}
                         sx={{ mt: 1 }}
+                        renderValue={(selected) => {
+                            const match = inputParam.options?.find((o) => (typeof o === 'string' ? o : o.name) === selected)
+                            return match ? (typeof match === 'string' ? match : match.label) : String(selected)
+                        }}
                     >
-                        {inputParam.options?.map((option) => (
-                            <MenuItem
-                                key={typeof option === 'string' ? option : option.name}
-                                value={typeof option === 'string' ? option : option.name}
-                            >
-                                {typeof option === 'string' ? option : option.label}
-                            </MenuItem>
-                        ))}
+                        {inputParam.options?.map((option) => {
+                            const isObj = typeof option !== 'string'
+                            const key = isObj ? option.name : option
+                            const label = isObj ? option.label : option
+                            const desc = isObj ? option.description : undefined
+                            return (
+                                <MenuItem key={key} value={key}>
+                                    {desc ? (
+                                        <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+                                            <Typography variant='body2'>{label}</Typography>
+                                            <Typography variant='caption' color='text.secondary'>
+                                                {desc}
+                                            </Typography>
+                                        </Box>
+                                    ) : (
+                                        label
+                                    )}
+                                </MenuItem>
+                            )
+                        })}
                     </Select>
                 )
 
diff --git a/packages/agentflow/src/core/types/node.ts b/packages/agentflow/src/core/types/node.ts
@@ -67,7 +67,7 @@ export interface InputParam {
     type: string
     default?: unknown
     optional?: boolean
-    options?: Array<{ label: string; name: string } | string>
+    options?: Array<{ label: string; name: string; description?: string } | string>
     placeholder?: string
     rows?: number
     description?: string
diff --git a/packages/agentflow/src/core/utils/fieldVisibility.test.ts b/packages/agentflow/src/core/utils/fieldVisibility.test.ts
@@ -196,6 +196,54 @@ describe('evaluateFieldVisibility', () => {
     })
 })
 
+describe('evaluateFieldVisibility – nested array $index pattern (Start node formInputTypes)', () => {
+    // Mirrors the Start node's formInputTypes definition:
+    // addOptions has show: { 'formInputTypes[$index].type': 'options' }
+    const addOptionsParam = makeParam({
+        name: 'addOptions',
+        label: 'Add Options',
+        type: 'array',
+        show: { 'formInputTypes[$index].type': 'options' }
+    })
+
+    const typeParam = makeParam({ name: 'type', label: 'Type', type: 'options' })
+    const labelParam = makeParam({ name: 'label', label: 'Label', type: 'string' })
+
+    const arraySubFields = [typeParam, labelParam, addOptionsParam]
+
+    it('shows addOptions when type is "options" at given index', () => {
+        const inputValues = {
+            formInputTypes: [
+                { type: 'options', label: 'Pick one' },
+                { type: 'string', label: 'Name' }
+            ]
+        }
+
+        const row0 = evaluateFieldVisibility(arraySubFields, inputValues, 0)
+        expect(row0.find((p) => p.name === 'addOptions')!.display).toBe(true)
+        expect(row0.find((p) => p.name === 'type')!.display).toBe(true)
+
+        const row1 = evaluateFieldVisibility(arraySubFields, inputValues, 1)
+        expect(row1.find((p) => p.name === 'addOptions')!.display).toBe(false)
+        expect(row1.find((p) => p.name === 'type')!.display).toBe(true)
+    })
+
+    it('hides addOptions when type changes from "options" to "string"', () => {
+        const inputValues = {
+            formInputTypes: [{ type: 'string', label: 'Name' }]
+        }
+
+        const row0 = evaluateFieldVisibility(arraySubFields, inputValues, 0)
+        expect(row0.find((p) => p.name === 'addOptions')!.display).toBe(false)
+    })
+
+    it('handles missing array gracefully (defaults to empty)', () => {
+        const inputValues = {} // formInputTypes not yet set
+        const row0 = evaluateFieldVisibility(arraySubFields, inputValues, 0)
+        expect(row0.find((p) => p.name === 'addOptions')!.display).toBe(false)
+    })
+})
+
 describe('stripHiddenFieldValues', () => {
     it('removes hidden keys and retains visible ones', () => {
         const params = [makeParam({ name: 'visible', show: { mode: 'api' } }), makeParam({ name: 'hidden', hide: { mode: 'api' } })]
diff --git a/packages/agentflow/src/core/validation/flowValidation.test.ts b/packages/agentflow/src/core/validation/flowValidation.test.ts
@@ -144,6 +144,31 @@ describe('validateNode', () => {
         expect(errors).toHaveLength(0)
     })
 
+    it('should not warn when required field has a default value and no explicit inputValue', () => {
+        const node: FlowNode = {
+            ...makeNode('a', 'agentAgentflow'),
+            data: {
+                id: 'a',
+                name: 'agentAgentflow',
+                label: 'Agent',
+                inputs: [
+                    {
+                        id: 'p1',
+                        name: 'agentReturnResponseAs',
+                        label: 'Return Response As',
+                        type: 'options',
+                        optional: false,
+                        default: 'userMessage'
+                    }
+                ],
+                inputValues: {}
+            }
+        }
+        const errors = validateNode(node)
+        const responseErrors = errors.filter((e) => e.message.includes('Return Response As'))
+        expect(responseErrors).toHaveLength(0)
+    })
+
     it('should skip hidden fields (show condition not met)', () => {
         const node: FlowNode = {
             ...makeNode('a', 'llmAgentflow'),
@@ -322,6 +347,54 @@ describe('validateNode', () => {
         expect(errors).toContainEqual(expect.objectContaining({ message: 'Calculator Config is required' }))
     })
 
+    // --- availableNodes schema fallback ---
+    it('should use availableNodes input definitions when node.data.inputs is missing', () => {
+        const availableNodes = [
+            makeNodeData({
+                name: 'llmAgentflow',
+                inputs: [{ id: 'p1', name: 'model', label: 'Model', type: 'string', optional: false }]
+            })
+        ]
+        const node: FlowNode = {
+            ...makeNode('a', 'llmAgentflow'),
+            data: {
+                id: 'a',
+                name: 'llmAgentflow',
+                label: 'LLM',
+                // No inputs on node — schema comes from availableNodes
+                inputValues: {}
+            }
+        }
+        const errors = validateNode(node, availableNodes)
+        expect(errors).toContainEqual(expect.objectContaining({ type: 'warning', message: 'Model is required' }))
+    })
+
+    it('should prefer availableNodes schema over node.data.inputs', () => {
+        const availableNodes = [
+            makeNodeData({
+                name: 'llmAgentflow',
+                inputs: [
+                    { id: 'p1', name: 'model', label: 'Model', type: 'string', optional: false },
+                    { id: 'p2', name: 'temperature', label: 'Temperature', type: 'number', optional: false }
+                ]
+            })
+        ]
+        const node: FlowNode = {
+            ...makeNode('a', 'llmAgentflow'),
+            data: {
+                id: 'a',
+                name: 'llmAgentflow',
+                label: 'LLM',
+                // Stale/partial inputs on node — availableNodes has the full schema
+                inputs: [{ id: 'p1', name: 'model', label: 'Model', type: 'string', optional: false }],
+                inputValues: {}
+            }
+        }
+        const errors = validateNode(node, availableNodes)
+        expect(errors).toContainEqual(expect.objectContaining({ message: 'Model is required' }))
+        expect(errors).toContainEqual(expect.objectContaining({ message: 'Temperature is required' }))
+    })
+
     // --- Nested config validation ---
     it('should validate nested component config required fields', () => {
         const availableNodes = [
diff --git a/packages/agentflow/src/core/validation/flowValidation.ts b/packages/agentflow/src/core/validation/flowValidation.ts
@@ -184,7 +184,8 @@ export function validateNode(node: FlowNode, availableNodes?: NodeData[]): Valid
         })
     }
 
-    const inputParams = node.data.inputs || []
+    const schemaFromAvailable = availableNodes?.find((n) => n.name === node.data.name)
+    const inputParams = schemaFromAvailable?.inputs || node.data.inputs || []
     const inputValues = node.data.inputValues || {}
 
     for (const param of inputParams) {
@@ -204,7 +205,7 @@ export function validateNode(node: FlowNode, availableNodes?: NodeData[]): Valid
         // asyncOptions and asyncMultiOptions values are stored in inputValues just like options;
         // evaluateParamVisibility correctly uses those values to resolve show/hide conditions on
         // dependent fields, so async-driven visibility is handled automatically here.
-        if (!param.optional && evaluateParamVisibility(param, inputValues) && isEmptyValue(inputValues[param.name])) {
+        if (!param.optional && evaluateParamVisibility(param, inputValues) && isEmptyValue(inputValues[param.name] ?? param.default)) {
             errors.push({
                 nodeId: node.id,
                 message: `${param.label || param.name} is required`,
diff --git a/packages/agentflow/src/features/canvas/hooks/useOpenNodeEditor.test.tsx b/packages/agentflow/src/features/canvas/hooks/useOpenNodeEditor.test.tsx
@@ -20,7 +20,7 @@ jest.mock('./useFlowNodes', () => ({
 }))
 
 let mockNodes: ReturnType<typeof makeFlowNode>[] = []
-let mockAvailableNodes: { name: string; inputs?: { name: string }[] }[] = []
+let mockAvailableNodes: { name: string; inputs?: { name: string }[]; credential?: { name: string; type: string } }[] = []
 
 describe('useOpenNodeEditor', () => {
     beforeEach(() => {
@@ -112,6 +112,31 @@ describe('useOpenNodeEditor', () => {
         )
     })
 
+    it('should prepend credential param to inputParams when schema has credential', () => {
+        mockAvailableNodes = [
+            {
+                name: 'llmAgentflow',
+                inputs: [{ name: 'model' }],
+                credential: { name: 'credential', type: 'credential' }
+            }
+        ]
+        const { result } = renderHook(() => useOpenNodeEditor())
+        result.current.openNodeEditor('node-1')
+
+        expect(mockOpenEditDialog).toHaveBeenCalledWith('node-1', expect.objectContaining({ name: 'llmAgentflow' }), [
+            { name: 'credential', type: 'credential' },
+            { name: 'model' }
+        ])
+    })
+
+    it('should not prepend credential when schema has no credential', () => {
+        mockAvailableNodes = [{ name: 'llmAgentflow', inputs: [{ name: 'model' }] }]
+        const { result } = renderHook(() => useOpenNodeEditor())
+        result.current.openNodeEditor('node-1')
+
+        expect(mockOpenEditDialog).toHaveBeenCalledWith('node-1', expect.objectContaining({ name: 'llmAgentflow' }), [{ name: 'model' }])
+    })
+
     it('should open dialog with empty inputs when schema has no inputs', () => {
         mockAvailableNodes = [{ name: 'llmAgentflow' }] // no inputs property
         const { result } = renderHook(() => useOpenNodeEditor())
diff --git a/packages/agentflow/src/features/canvas/hooks/useOpenNodeEditor.ts b/packages/agentflow/src/features/canvas/hooks/useOpenNodeEditor.ts
diff --git a/packages/agentflow/src/features/node-editor/EditNodeDialog.test.tsx b/packages/agentflow/src/features/node-editor/EditNodeDialog.test.tsx
diff --git a/packages/agentflow/src/features/node-editor/EditNodeDialog.tsx b/packages/agentflow/src/features/node-editor/EditNodeDialog.tsx
