Merge branch 'main' into flowise-305

Author: yau-wd

CONTRIBUTING.md

@@ -116,13 +116,48 @@ 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)
 
 | Variable                             | Description                                                                                                                                                                                                                                                                       | Type                                             | Default                             |
 | ------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ----------------------------------- |
 | PORT                                 | The HTTP port Flowise runs on                                                                                                                                                                                                                                                     | Number                                           | 3000                                |
+| CORS_ALLOW_CREDENTIALS               | Enables CORS `Access-Control-Allow-Credentials` when `true`                                                                                                                                                                                                                       | Boolean                                          | false                               |
 | CORS_ORIGINS                         | The allowed origins for all cross-origin HTTP calls                                                                                                                                                                                                                               | String                                           |                                     |
 | IFRAME_ORIGINS                       | The allowed origins for iframe src embedding                                                                                                                                                                                                                                      | String                                           |                                     |
 | FLOWISE_FILE_SIZE_LIMIT              | Upload File Size Limit                                                                                                                                                                                                                                                            | String                                           | 50mb                                |

docker/.env.example

@@ -74,6 +74,7 @@ PORT=3000
 ############################################################################################################
 
 # NUMBER_OF_PROXIES= 1
+# CORS_ALLOW_CREDENTIALS=false
 # CORS_ORIGINS=*
 # IFRAME_ORIGINS=*
 # FLOWISE_FILE_SIZE_LIMIT=50mb

docker/worker/.env.example

@@ -74,6 +74,7 @@ WORKER_PORT=5566
 ############################################################################################################
 
 # NUMBER_OF_PROXIES= 1
+# CORS_ALLOW_CREDENTIALS=false
 # CORS_ORIGINS=*
 # IFRAME_ORIGINS=*
 # FLOWISE_FILE_SIZE_LIMIT=50mb

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/.eslintrc.js

@@ -81,6 +81,9 @@ module.exports = {
         'import/first': 'error',
         'import/newline-after-import': 'error',
         'import/no-duplicates': 'error',
+        // Allow autoFocus on custom components (e.g. RichTextEditor in dialogs) — they manage
+        // focus programmatically per WAI-ARIA dialog patterns. Native elements are still flagged.
+        'jsx-a11y/no-autofocus': ['error', { ignoreNonDOM: true }],
         'prettier/prettier': 'error',
         // Ban @/features alias — features use relative imports internally, and no other
         // layer should import from features (enforced by import/no-restricted-paths below).
@@ -116,8 +119,8 @@ module.exports = {
                     {
                         target: './src/atoms',
                         from: './src/core',
-                        except: ['./types'],
-                        message: 'Atoms can only import types from core/types, not utilities or business logic.'
+                        except: ['./types', './theme', './primitives'],
+                        message: 'Atoms can only import from core/types, core/theme, and core/primitives.'
                     },
                     // core/ cannot import from anything (leaf node)
                     {

packages/agentflow/ARCHITECTURE.md

@@ -42,7 +42,7 @@ atoms/
 -   No API calls
 -   Stateless or minimal local state
 -   Imported by features, never the reverse
--   **Forbidden**: Importing from `features/` or `infrastructure/` (except types from `core/types` for prop definitions)
+-   **Forbidden**: Importing from `features/` or `infrastructure/` (except types from `core/types` for prop definitions, design tokens from `core/theme`, and primitives from `core/primitives`)
 
 **Goal:** 100% visual consistency.
 
@@ -110,6 +110,9 @@ features/
 core/
 ├── types/                  # Global interfaces (Node, Edge, Flow)
 │   └── index.ts
+├── primitives/             # Domain-free utilities (safe for atoms)
+│   ├── inputDefaults.ts    # getDefaultValueForType
+│   └── index.ts
 ├── node-config/            # Node configuration (icons, colors, default types)
 │   ├── nodeIcons.ts        # AGENTFLOW_ICONS, DEFAULT_AGENTFLOW_NODES
 │   └── ...
@@ -124,7 +127,7 @@ core/
 │   ├── flowValidation.ts   # validateFlow, validateNode
 │   ├── connectionValidation.ts  # isValidConnectionAgentflowV2
 │   └── ...
-├── utils/                  # Generic utilities
+├── utils/                  # Domain-aware utilities (NOT importable by atoms)
 │   ├── nodeFactory.ts      # initNode, getUniqueNodeId
 │   └── ...
 └── index.ts                # Barrel export (use sparingly)
@@ -138,6 +141,15 @@ core/
 -   Pure functions where possible
 -   Can be tested in isolation
 
+#### `core/primitives/` vs `core/utils/`
+
+`core/` contains two utility directories with different import permissions:
+
+-   **`primitives/`** — Domain-free, general-purpose functions with no knowledge of nodes, flows, or any business concept. These are pure data transformations (e.g., computing a default value from a type string). **Safe to import from `atoms/`.**
+-   **`utils/`** — Domain-aware utilities that understand node structures, flow data, or validation logic (e.g., `initNode`, `buildDynamicOutputAnchors`). **Only importable by `features/` and `infrastructure/`.**
+
+When adding a new utility, ask: _"Does this function need to know what a Node or Flow is?"_ If no → `primitives/`. If yes → `utils/`.
+
 **Goal:** To be the framework-agnostic source of truth.
 
 ---
@@ -210,7 +222,7 @@ infrastructure/
 
 -   `features` → `atoms`, `infrastructure`, `core` ✅
 -   `infrastructure` → `core` ✅
--   `atoms` → `core/types` only (for type definitions) ✅
+-   `atoms` → `core/types`, `core/theme`, and `core/primitives` only ✅
 -   `core` → nothing (leaf node) ✅
 -   **Atoms and Core are "leaf" nodes** - they cannot import from `features/` or `infrastructure/`
 

packages/agentflow/README.md

@@ -21,6 +21,22 @@
 
 `@flowiseai/agentflow` is a React-based flow editor for creating AI agent workflows. It provides a visual canvas built on ReactFlow for connecting AI agents, LLMs, tools, and logic nodes.
 
+## Features
+
+-   **Visual Canvas** — Drag-and-drop flow editor built on ReactFlow with zoom, pan, minimap, and fit-to-view controls
+-   **15 Built-in Node Types** — Start, Agent, LLM, Condition, Condition Agent, Human Input, Loop, Direct Reply, Custom Function, Tool, Retriever, Sticky Note, HTTP, Iteration, and Execute Flow
+-   **Node Editor Dialog** — Modal for editing node parameters with dynamic input types (text, number, boolean, dropdown, arrays, async options)
+-   **Rich Text Editor** — TipTap-based editor with syntax highlighting for JavaScript, TypeScript, Python, and JSON (lazy-loaded)
+-   **Specialized Input Components** — Condition builder, messages input (role + content), and structured output schema builder
+-   **AI Flow Generator** — Generate flows from natural language descriptions with model selection
+-   **Flow Validation** — Detects empty flows, missing start nodes, disconnected nodes, cycles, hanging edges, and per-node input errors with visual feedback
+-   **Dark Mode** — Full light/dark theme support via design tokens and CSS variables
+-   **Read-Only Mode** — Disable editing for view-only embedding
+-   **Custom Rendering** — Replace the default header and node palette with your own components via render props
+-   **Imperative API** — Programmatic control via ref (`getFlow`, `validate`, `fitView`, `clear`, `addNode`, `toJSON`)
+-   **Request Interceptor** — Customize outgoing API requests (headers, credentials) via an Axios interceptor callback
+-   **Keyboard Shortcuts** — Cmd/Ctrl+S to save
+
 ## Installation
 
 ```bash
@@ -139,10 +155,48 @@ The `requestInterceptor` callback runs inside the Axios request pipeline and has
 -   Follow the **principle of least privilege** — only read or modify the specific config properties you need (e.g., `withCredentials`, custom headers).
 -   If the interceptor throws, the error is caught, logged, and the **original unmodified config** is used so the request still proceeds safely.
 
+### Node Types
+
+The following node types are available in the palette by default. Use the `components` prop to restrict which types are shown.
+
+<!-- prettier-ignore -->
+| Node Type                  | Description                          |
+| -------------------------- | ------------------------------------ |
+| `startAgentflow`           | Entry point (required, always shown) |
+| `agentAgentflow`           | AI agent execution                   |
+| `llmAgentflow`             | LLM / language model call            |
+| `conditionAgentflow`       | Conditional branching                |
+| `conditionAgentAgentflow`  | Agent-level conditional branching    |
+| `humanInputAgentflow`      | Wait for user input                  |
+| `loopAgentflow`            | Loop / iteration                     |
+| `directReplyAgentflow`     | Direct response to user              |
+| `customFunctionAgentflow`  | Custom JavaScript function           |
+| `toolAgentflow`            | Tool integration                     |
+| `retrieverAgentflow`       | Data retrieval                       |
+| `stickyNoteAgentflow`      | Canvas annotation (not connectable)  |
+| `httpAgentflow`            | HTTP request                         |
+| `iterationAgentflow`       | Iteration / map-reduce container     |
+| `executeFlowAgentflow`     | Execute a sub-flow                   |
+
 ### Design Note
 
 `<Agentflow>` is an **uncontrolled component**. The `initialFlow` prop seeds the canvas state on mount, but the component owns its own state afterward. Use the `ref` for imperative access and `onFlowChange` to observe changes.
 
+## Exports
+
+Beyond the main `<Agentflow>` component, the package exports utilities for advanced usage:
+
+```ts
+// Main component and provider
+// Types
+
+// Hooks
+// Validation
+// Node utilities
+
+// Field visibility helpers
+```
+
 ## Development
 
 ```bash

packages/agentflow/examples/src/demos/BasicExample.tsx

@@ -9,6 +9,7 @@ import { useCallback, useRef, useState } from 'react'
 
 import type { AgentFlowInstance, FlowData, ValidationResult } from '@flowiseai/agentflow'
 import { Agentflow } from '@flowiseai/agentflow'
+import { InternalAxiosRequestConfig } from 'axios'
 
 import { apiBaseUrl, token } from '../config'
 import { FlowStatePanel } from '../FlowStatePanel'
@@ -28,9 +29,31 @@ const initialFlow: FlowData = {
                 hideInput: true,
                 outputAnchors: [{ id: 'startAgentflow_0-output-0', name: 'start', label: 'Start', type: 'start' }]
             }
+        },
+        {
+            id: 'agentAgentflow_0',
+            type: 'agentflowNode',
+            position: { x: 250, y: 100 },
+            data: {
+                id: 'agentAgentflow_0',
+                name: 'agentAgentflow',
+                label: 'Agent',
+                color: '#4DD0E1',
+                outputAnchors: [{ id: 'agentAgentflow_0-output-0', name: 'output', label: 'Output', type: 'string' }]
+            }
+        }
+    ],
+    edges: [
+        {
+            id: 'edge-1',
+            source: 'startAgentflow_0',
+            sourceHandle: 'startAgentflow_0-output-0',
+            target: 'agentAgentflow_0',
+            targetHandle: 'agentAgentflow_0',
+            type: 'agentflowEdge',
+            data: { sourceColor: '#7EE787', targetColor: '#4DD0E1' }
         }
     ],
-    edges: [],
     viewport: { x: 0, y: 0, zoom: 1 }
 }
 
@@ -115,6 +138,13 @@ export function BasicExample() {
                         onFlowChange={handleFlowChange}
                         onSave={handleSave}
                         showDefaultHeader={true}
+                        requestInterceptor={(config: InternalAxiosRequestConfig) => {
+                            // pass cookies if no token is provided
+                            if (!token) {
+                                config.withCredentials = true
+                            }
+                            return config
+                        }}
                     />
                 </div>
                 <FlowStatePanel currentFlow={currentFlow} savedFlow={savedFlow} changeCount={changeCount} />
@@ -129,5 +159,6 @@ export const BasicExampleProps = {
     initialFlow: 'FlowData',
     onFlowChange: '(flow: FlowData) => void',
     onSave: '(flow: FlowData) => void',
-    showDefaultHeader: true
+    showDefaultHeader: true,
+    requestInterceptor: '(config: InternalAxiosRequestConfig) => InternalAxiosRequestConfig'
 }

packages/agentflow/jest.config.js

@@ -12,10 +12,16 @@ const baseConfig = {
     },
     testPathIgnorePatterns: ['/node_modules/', '/dist/'],
     moduleNameMapper: {
-        '^@test-utils/(.*)$': '<rootDir>/src/__test_utils__/$1',
+        '\\.(css|less|scss|sass)$': '<rootDir>/src/__mocks__/styleMock.js',
         '\\.svg$': '<rootDir>/src/__mocks__/styleMock.js',
         '^@/(.*)$': '<rootDir>/src/$1',
-        '\\.(css|less|scss|sass)$': '<rootDir>/src/__mocks__/styleMock.js'
+        '^@test-utils/(.*)$': '<rootDir>/src/__test_utils__/$1',
+        // TipTap + lowlight ship ESM-only — Jest (CJS) cannot import them,
+        // so we redirect to lightweight CJS stubs under src/__mocks__/.
+        '^@tiptap/(.+)$': '<rootDir>/src/__mocks__/@tiptap/$1.ts',
+        '^lowlight$': '<rootDir>/src/__mocks__/lowlight.ts',
+        // Bypass React.lazy wrappers — resolve Foo.lazy → Foo so tests render synchronously
+        '(.*)\\.lazy$': '$1'
     }
 }
 
@@ -39,10 +45,16 @@ module.exports = {
         './src/*.ts': { branches: 80, functions: 80, lines: 80, statements: 80 },
         './src/Agentflow.tsx': { branches: 80, functions: 80, lines: 80, statements: 80 },
         './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 },
         './src/features/canvas/components/ConnectionLine.tsx': { branches: 80, functions: 80, lines: 80, statements: 80 },
         // Only getMinimumNodeHeight() is tested; the component is Tier 3 UI with no business logic
         './src/features/canvas/components/NodeOutputHandles.tsx': { branches: 0, functions: 10, lines: 30, statements: 30 },
+        './src/features/canvas/containers/NodeInfoDialog.tsx': { branches: 80, functions: 80, lines: 80, statements: 80 },
         './src/features/canvas/hooks/': { branches: 80, functions: 80, lines: 80, statements: 80 },
         './src/features/generator/GenerateFlowDialog.tsx': { branches: 80, functions: 80, lines: 80, statements: 80 },
         './src/features/node-editor/': { branches: 80, functions: 80, lines: 80, statements: 80 },

packages/agentflow/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@flowiseai/agentflow",
-    "version": "0.0.0-dev.3",
+    "version": "0.0.0-dev.6",
     "description": "Embeddable React component for building and visualizing AI agent workflows",
     "license": "Apache-2.0",
     "repository": {
@@ -68,9 +68,23 @@
         "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",
+        "dompurify": "^3.2.6",
+        "flowise-react-json-view": "^1.21.7",
+        "html-react-parser": "^3.0.16",
         "lodash": "^4.17.21",
+        "lowlight": "^3.3.0",
         "uuid": "^10.0.0"
     },
     "devDependencies": {