Merge remote-tracking branch 'origin/main' into feature/audit-telemetry-gdpr-deletion

Author: yau-wd

CONTRIBUTING.md

@@ -116,6 +116,40 @@ Flowise has 3 different modules in a single mono repository.
 
 11. Commit code and submit Pull Request from forked branch pointing to [Flowise main](https://github.com/FlowiseAI/Flowise/tree/main).
 
+### Testing
+
+-   Unit tests are **co-located** with their source files — a test for `Foo.ts` lives in `Foo.test.ts` in the same directory. This is the standard used across all packages in this repo.
+
+-   Run tests per package:
+
+    ```bash
+    cd packages/server && pnpm test
+    cd packages/components && pnpm test
+    cd packages/agentflow && pnpm test
+    ```
+
+    Or from the repo root using `--filter`:
+
+    ```bash
+    pnpm --filter flowise-components test
+    pnpm --filter @flowiseai/agentflow test
+    pnpm --filter "./packages/server" test # root and server share the same package name.
+    ```
+
+-   Or run all tests from the repo root:
+
+    ```bash
+    pnpm test
+    ```
+
+-   When adding new functionality, place your test file next to the source file it tests:
+
+    ```
+    packages/components/nodes/tools/MyTool/
+    ├── MyTool.ts
+    └── MyTool.test.ts        ← co-located test
+    ```
+
 ## 🌱 Env Variables
 
 Flowise support different environment variables to configure your instance. You can specify the following variables in the `.env` file inside `packages/server` folder. Read [more](https://docs.flowiseai.com/environment-variables)

package.json

@@ -1,6 +1,6 @@
 {
     "name": "flowise",
-    "version": "3.1.0",
+    "version": "3.1.1",
     "private": true,
     "homepage": "https://flowiseai.com",
     "workspaces": [

packages/agentflow/jest.config.js

@@ -47,6 +47,7 @@ module.exports = {
         './src/atoms/ArrayInput.tsx': { branches: 80, functions: 80, lines: 80, statements: 80 },
         './src/atoms/ExpandTextDialog.tsx': { branches: 80, functions: 80, lines: 80, statements: 80 },
         './src/atoms/MessagesInput.tsx': { branches: 80, functions: 80, lines: 80, statements: 80 },
+        './src/atoms/ScenariosInput.tsx': { branches: 80, functions: 80, lines: 80, statements: 80 },
         // Tier 3 UI atom — only the onChange/disabled/sync logic is tested, not styled internals
         './src/atoms/RichTextEditor.tsx': { branches: 30, functions: 50, lines: 50, statements: 50 },
         './src/core/': { branches: 80, functions: 80, lines: 80, statements: 80 },

packages/agentflow/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@flowiseai/agentflow",
-    "version": "0.0.0-dev.5",
+    "version": "0.0.0-dev.6",
     "description": "Embeddable React component for building and visualizing AI agent workflows",
     "license": "Apache-2.0",
     "repository": {
@@ -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/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 = {

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>
+    )
+}