Feat/agentflow Add JSON, code, and SelectVariable input types to NodeInputHandler (#6016)

* Initial flow

* enhance JSON input handling with dialog support and improve variable selection UI

* Fix syntax highlighting bug

* Added test cases

* Fix gemini comments

* lock file fix

* Build error

* Test fix

* Remove 'inputs' folder under atoms and move all components directly under atoms/

Author: j-sanaa

packages/agentflow/package.json

@@ -68,12 +68,19 @@
         "reactflow": "^11.5.0"
     },
     "dependencies": {
+        "@codemirror/lang-javascript": "^6.2.0",
+        "@codemirror/lang-json": "^6.0.0",
+        "@codemirror/lang-python": "^6.1.0",
         "@tabler/icons-react": "^3.7.0",
         "@tiptap/extension-code-block-lowlight": "^3.4.3",
         "@tiptap/extension-placeholder": "^2.11.5",
         "@tiptap/react": "^2.11.5",
         "@tiptap/starter-kit": "^2.11.5",
+        "@uiw/codemirror-theme-sublime": "^4.21.0",
+        "@uiw/codemirror-theme-vscode": "^4.21.0",
+        "@uiw/react-codemirror": "^4.21.0",
         "axios": "^1.7.2",
+        "flowise-react-json-view": "^1.21.7",
         "lodash": "^4.17.21",
         "lowlight": "^3.3.0",
         "uuid": "^10.0.0"

packages/agentflow/src/atoms/CodeInput.test.tsx

@@ -0,0 +1,64 @@
+import { render, screen } from '@testing-library/react'
+
+import { CodeInput } from './CodeInput'
+
+// Mock CodeMirror — jsdom doesn't support it
+jest.mock('@uiw/react-codemirror', () => {
+    const MockCodeMirror = ({ value, readOnly, height }: { value: string; readOnly?: boolean; height?: string }) => (
+        <textarea data-testid='codemirror' value={value} readOnly={readOnly} data-height={height} onChange={() => {}} />
+    )
+    MockCodeMirror.displayName = 'MockCodeMirror'
+    return { __esModule: true, default: MockCodeMirror }
+})
+
+jest.mock('@uiw/codemirror-theme-vscode', () => ({ vscodeDark: 'vscodeDark' }))
+jest.mock('@uiw/codemirror-theme-sublime', () => ({ sublime: 'sublime' }))
+jest.mock('@codemirror/lang-javascript', () => ({ javascript: () => [] }))
+jest.mock('@codemirror/lang-json', () => ({ json: () => [] }))
+jest.mock('@codemirror/lang-python', () => ({ python: () => [] }))
+
+describe('CodeInput', () => {
+    it('renders CodeMirror with the provided value', () => {
+        render(<CodeInput value='const x = 1' onChange={jest.fn()} />)
+
+        const editor = screen.getByTestId('codemirror')
+        expect(editor).toHaveValue('const x = 1')
+    })
+
+    it('renders with default height of 200px', () => {
+        render(<CodeInput value='' onChange={jest.fn()} />)
+
+        expect(screen.getByTestId('codemirror')).toHaveAttribute('data-height', '200px')
+    })
+
+    it('renders with custom height', () => {
+        render(<CodeInput value='' onChange={jest.fn()} height='400px' />)
+
+        expect(screen.getByTestId('codemirror')).toHaveAttribute('data-height', '400px')
+    })
+
+    it('sets readOnly when disabled', () => {
+        render(<CodeInput value='code' onChange={jest.fn()} disabled />)
+
+        expect(screen.getByTestId('codemirror')).toHaveAttribute('readonly')
+    })
+
+    it('is not readOnly when enabled', () => {
+        render(<CodeInput value='code' onChange={jest.fn()} />)
+
+        expect(screen.getByTestId('codemirror')).not.toHaveAttribute('readonly')
+    })
+
+    it('renders empty string when value is empty', () => {
+        render(<CodeInput value='' onChange={jest.fn()} />)
+
+        expect(screen.getByTestId('codemirror')).toHaveValue('')
+    })
+
+    it('renders inside a bordered container', () => {
+        const { container } = render(<CodeInput value='' onChange={jest.fn()} />)
+
+        const box = container.firstChild as HTMLElement
+        expect(box).toBeTruthy()
+    })
+})

packages/agentflow/src/atoms/CodeInput.tsx

@@ -0,0 +1,64 @@
+import { useMemo } from 'react'
+
+import { javascript } from '@codemirror/lang-javascript'
+import { json } from '@codemirror/lang-json'
+import { python } from '@codemirror/lang-python'
+import { Box } from '@mui/material'
+import { useTheme } from '@mui/material/styles'
+import { sublime } from '@uiw/codemirror-theme-sublime'
+import { vscodeDark } from '@uiw/codemirror-theme-vscode'
+import CodeMirror from '@uiw/react-codemirror'
+
+export interface CodeInputProps {
+    value: string
+    onChange: (code: string) => void
+    language?: string
+    disabled?: boolean
+    height?: string
+}
+
+/**
+ * CodeMirror-based code editor atom.
+ *
+ * Supports javascript (default), python, and json syntax highlighting.
+ * Theme switches automatically based on dark mode.
+ */
+export function CodeInput({ value, onChange, language = 'javascript', disabled = false, height = '200px' }: CodeInputProps) {
+    const theme = useTheme()
+    const isDarkMode = theme.palette.mode === 'dark'
+
+    const extensions = useMemo(() => {
+        switch (language) {
+            case 'python':
+                return [python()]
+            case 'json':
+                return [json()]
+            case 'typescript':
+                return [javascript({ typescript: true })]
+            default:
+                return [javascript()]
+        }
+    }, [language])
+
+    return (
+        <Box
+            sx={{
+                mt: 1,
+                border: '1px solid',
+                borderColor: 'grey.400',
+                borderRadius: '6px',
+                overflow: 'hidden'
+            }}
+        >
+            <CodeMirror
+                value={value || ''}
+                height={height}
+                theme={isDarkMode ? (language === 'json' ? sublime : vscodeDark) : 'light'}
+                extensions={extensions}
+                onChange={onChange}
+                readOnly={disabled}
+                basicSetup={{ lineNumbers: true, foldGutter: true }}
+            />
+        </Box>
+    )
+}

packages/agentflow/src/atoms/ExpandTextDialog.test.tsx

@@ -4,6 +4,12 @@ import { ExpandTextDialog } from './ExpandTextDialog'
 
 // TipTap modules are auto-mocked via moduleNameMapper in jest.config.js
 
+jest.mock('./CodeInput', () => ({
+    CodeInput: ({ value, language }: { value: string; language?: string }) => (
+        <textarea data-testid='code-input' data-language={language} value={value} onChange={() => {}} />
+    )
+}))
+
 const mockOnConfirm = jest.fn()
 const mockOnCancel = jest.fn()
 
@@ -13,32 +19,34 @@ beforeEach(() => {
 
 describe('ExpandTextDialog', () => {
     it('should not render content when closed', () => {
-        render(<ExpandTextDialog open={false} value='' inputType='code' onConfirm={mockOnConfirm} onCancel={mockOnCancel} />)
+        render(<ExpandTextDialog open={false} value='' inputType='number' onConfirm={mockOnConfirm} onCancel={mockOnCancel} />)
 
         expect(screen.queryByTestId('expand-content-input')).not.toBeInTheDocument()
     })
 
     it('should render with the provided value when open', () => {
-        render(<ExpandTextDialog open={true} value='Hello world' inputType='code' onConfirm={mockOnConfirm} onCancel={mockOnCancel} />)
+        render(<ExpandTextDialog open={true} value='Hello world' inputType='number' onConfirm={mockOnConfirm} onCancel={mockOnCancel} />)
 
         const textarea = screen.getByTestId('expand-content-input').querySelector('textarea')!
         expect(textarea).toHaveValue('Hello world')
     })
 
     it('should render title when provided', () => {
-        render(<ExpandTextDialog open={true} value='' title='Content' inputType='code' onConfirm={mockOnConfirm} onCancel={mockOnCancel} />)
+        render(
+            <ExpandTextDialog open={true} value='' title='Content' inputType='number' onConfirm={mockOnConfirm} onCancel={mockOnCancel} />
+        )
 
         expect(screen.getByText('Content')).toBeInTheDocument()
     })
 
     it('should not render title when not provided', () => {
-        render(<ExpandTextDialog open={true} value='' inputType='code' onConfirm={mockOnConfirm} onCancel={mockOnCancel} />)
+        render(<ExpandTextDialog open={true} value='' inputType='number' onConfirm={mockOnConfirm} onCancel={mockOnCancel} />)
 
         expect(screen.queryByRole('heading')).not.toBeInTheDocument()
     })
 
     it('should call onConfirm with edited value when Save is clicked', () => {
-        render(<ExpandTextDialog open={true} value='Original' inputType='code' onConfirm={mockOnConfirm} onCancel={mockOnCancel} />)
+        render(<ExpandTextDialog open={true} value='Original' inputType='number' onConfirm={mockOnConfirm} onCancel={mockOnCancel} />)
 
         const textarea = screen.getByTestId('expand-content-input').querySelector('textarea')!
         fireEvent.change(textarea, { target: { value: 'Updated' } })
@@ -48,7 +56,7 @@ describe('ExpandTextDialog', () => {
     })
 
     it('should call onCancel when Cancel is clicked', () => {
-        render(<ExpandTextDialog open={true} value='Original' inputType='code' onConfirm={mockOnConfirm} onCancel={mockOnCancel} />)
+        render(<ExpandTextDialog open={true} value='Original' inputType='number' onConfirm={mockOnConfirm} onCancel={mockOnCancel} />)
 
         fireEvent.click(screen.getByRole('button', { name: 'Cancel' }))
 
@@ -58,7 +66,14 @@ describe('ExpandTextDialog', () => {
 
     it('should disable textarea and Save button when disabled', () => {
         render(
-            <ExpandTextDialog open={true} value='test' inputType='code' disabled={true} onConfirm={mockOnConfirm} onCancel={mockOnCancel} />
+            <ExpandTextDialog
+                open={true}
+                value='test'
+                inputType='number'
+                disabled={true}
+                onConfirm={mockOnConfirm}
+                onCancel={mockOnCancel}
+            />
         )
 
         const textarea = screen.getByTestId('expand-content-input').querySelector('textarea')!
@@ -71,7 +86,7 @@ describe('ExpandTextDialog', () => {
             <ExpandTextDialog
                 open={true}
                 value=''
-                inputType='code'
+                inputType='number'
                 placeholder='Type here...'
                 onConfirm={mockOnConfirm}
                 onCancel={mockOnCancel}
@@ -84,22 +99,24 @@ describe('ExpandTextDialog', () => {
 
     it('should show current value when opened after value changed while closed', () => {
         const { rerender } = render(
-            <ExpandTextDialog open={false} value='' inputType='code' onConfirm={mockOnConfirm} onCancel={mockOnCancel} />
+            <ExpandTextDialog open={false} value='' inputType='number' onConfirm={mockOnConfirm} onCancel={mockOnCancel} />
         )
 
         // Simulate value changing while dialog is closed (user typing in inline editor)
-        rerender(<ExpandTextDialog open={false} value='Updated text' inputType='code' onConfirm={mockOnConfirm} onCancel={mockOnCancel} />)
+        rerender(
+            <ExpandTextDialog open={false} value='Updated text' inputType='number' onConfirm={mockOnConfirm} onCancel={mockOnCancel} />
+        )
 
         // Open the dialog — it should show the updated value, not the initial empty value
-        rerender(<ExpandTextDialog open={true} value='Updated text' inputType='code' onConfirm={mockOnConfirm} onCancel={mockOnCancel} />)
+        rerender(<ExpandTextDialog open={true} value='Updated text' inputType='number' onConfirm={mockOnConfirm} onCancel={mockOnCancel} />)
 
         const textarea = screen.getByTestId('expand-content-input').querySelector('textarea')!
         expect(textarea).toHaveValue('Updated text')
     })
 
     it('should reset to current value when re-opened after cancel', () => {
         const { rerender } = render(
-            <ExpandTextDialog open={true} value='Original' inputType='code' onConfirm={mockOnConfirm} onCancel={mockOnCancel} />
+            <ExpandTextDialog open={true} value='Original' inputType='number' onConfirm={mockOnConfirm} onCancel={mockOnCancel} />
         )
 
         // User types in the dialog then cancels
@@ -108,15 +125,58 @@ describe('ExpandTextDialog', () => {
         fireEvent.click(screen.getByRole('button', { name: 'Cancel' }))
 
         // Close the dialog
-        rerender(<ExpandTextDialog open={false} value='Original' inputType='code' onConfirm={mockOnConfirm} onCancel={mockOnCancel} />)
+        rerender(<ExpandTextDialog open={false} value='Original' inputType='number' onConfirm={mockOnConfirm} onCancel={mockOnCancel} />)
 
         // Re-open — should show the original value, not the unsaved edits
-        rerender(<ExpandTextDialog open={true} value='Original' inputType='code' onConfirm={mockOnConfirm} onCancel={mockOnCancel} />)
+        rerender(<ExpandTextDialog open={true} value='Original' inputType='number' onConfirm={mockOnConfirm} onCancel={mockOnCancel} />)
 
         const textarea2 = screen.getByTestId('expand-content-input').querySelector('textarea')!
         expect(textarea2).toHaveValue('Original')
     })
 
+    // --- Code mode ---
+
+    describe('inputType="code"', () => {
+        it('should render CodeInput instead of TextField', () => {
+            render(
+                <ExpandTextDialog
+                    open={true}
+                    value='const x = 1'
+                    inputType='code'
+                    language='javascript'
+                    onConfirm={mockOnConfirm}
+                    onCancel={mockOnCancel}
+                />
+            )
+
+            expect(screen.getByTestId('code-input')).toBeInTheDocument()
+            expect(screen.queryByTestId('expand-content-input')).not.toBeInTheDocument()
+            expect(screen.queryByTestId('rich-text-editor')).not.toBeInTheDocument()
+        })
+
+        it('should pass language prop to CodeInput', () => {
+            render(
+                <ExpandTextDialog
+                    open={true}
+                    value='{}'
+                    inputType='code'
+                    language='json'
+                    onConfirm={mockOnConfirm}
+                    onCancel={mockOnCancel}
+                />
+            )
+
+            expect(screen.getByTestId('code-input')).toHaveAttribute('data-language', 'json')
+        })
+
+        it('should show Save and Cancel buttons in code mode', () => {
+            render(<ExpandTextDialog open={true} value='' inputType='code' onConfirm={mockOnConfirm} onCancel={mockOnCancel} />)
+
+            expect(screen.getByRole('button', { name: 'Save' })).toBeInTheDocument()
+            expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument()
+        })
+    })
+
     // --- Rich text mode ---
 
     describe('inputType="string" (richtext)', () => {
@@ -133,11 +193,12 @@ describe('ExpandTextDialog', () => {
             expect(screen.queryByTestId('expand-content-input')).not.toBeInTheDocument()
         })
 
-        it('should render plain TextField for non-string input types', () => {
-            render(<ExpandTextDialog open={true} value='Hello' inputType='code' onConfirm={mockOnConfirm} onCancel={mockOnCancel} />)
+        it('should render plain TextField for non-string, non-code input types', () => {
+            render(<ExpandTextDialog open={true} value='Hello' inputType='number' onConfirm={mockOnConfirm} onCancel={mockOnCancel} />)
 
             expect(screen.getByTestId('expand-content-input')).toBeInTheDocument()
             expect(screen.queryByTestId('rich-text-editor')).not.toBeInTheDocument()
+            expect(screen.queryByTestId('code-input')).not.toBeInTheDocument()
         })
 
         it('should still show Save and Cancel buttons in richtext mode', () => {

packages/agentflow/src/atoms/ExpandTextDialog.tsx

@@ -2,6 +2,7 @@ import { useCallback, useState } from 'react'
 
 import { Box, Button, Dialog, DialogActions, DialogContent, TextField, Typography } from '@mui/material'
 
+import { CodeInput } from './CodeInput'
 import { RichTextEditor } from './RichTextEditor.lazy'
 
 export interface ExpandTextDialogProps {
@@ -10,9 +11,10 @@ export interface ExpandTextDialogProps {
     title?: string
     placeholder?: string
     disabled?: boolean
-    /** The input param type — determines which editor to render. 'string' uses the TipTap RichTextEditor; others fall back to a plain TextField. */
-    // TODO: handle 'code' type separately with a dedicated CodeMirror editor
+    /** The input param type — determines which editor to render. 'string' uses the TipTap RichTextEditor, 'code' renders CodeInput; others fall back to a plain TextField. */
     inputType?: string
+    /** Language hint for 'code' mode (e.g. 'javascript', 'python', 'json'). */
+    language?: string
     onConfirm: (value: string) => void
     onCancel: () => void
 }
@@ -28,6 +30,7 @@ export function ExpandTextDialog({
     placeholder,
     disabled = false,
     inputType = 'string',
+    language,
     onConfirm,
     onCancel
 }: ExpandTextDialogProps) {
@@ -56,7 +59,15 @@ export function ExpandTextDialog({
                         {title}
                     </Typography>
                 )}
-                {inputType === 'string' ? (
+                {inputType === 'code' ? (
+                    <CodeInput
+                        value={localValue}
+                        onChange={setLocalValue}
+                        language={language}
+                        disabled={disabled}
+                        height='calc(100vh - 220px)'
+                    />
+                ) : inputType === 'string' ? (
                     <Box
                         sx={{
                             borderRadius: '12px',