Feat/agentflow add support for Variable System & Syntax Support (#6067)

* Initial flow

* Add tiptap - mention dependency similar to v2

* Add functionalities similiar to V2

* update to tiptap to 3.20.4

* Fix lint error

* Added missiing test cases for new files

* Styling changes

* InputMessage should be visible on initial load

* Fix gemini comment

* Remove outdated SelectVariable

* Add icon support similar to v2

* Fix gemini comments

* Remove input folder and utils folder under atoms

* Fix test error

* Fix initlalDefualts not being set

* Fix after merge with main

* Fixes for review comments

* Fix review comments

* New test cases added for fixes

* Remove additional space

Author: j-sanaa

packages/agentflow/jest.config.js

@@ -20,6 +20,7 @@ const baseConfig = {
         // so we redirect to lightweight CJS stubs under src/__mocks__/.
         '^@tiptap/(.+)$': '<rootDir>/src/__mocks__/@tiptap/$1.ts',
         '^lowlight$': '<rootDir>/src/__mocks__/lowlight.ts',
+        '^tippy\\.js$': '<rootDir>/src/__mocks__/tippy.js.ts',
         // Bypass React.lazy wrappers — resolve Foo.lazy → Foo so tests render synchronously
         '(.*)\\.lazy$': '$1'
     }

packages/agentflow/package.json

@@ -72,10 +72,13 @@
         "@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",
+        "@tiptap/core": "^3.20.4",
+        "@tiptap/extension-code-block-lowlight": "^3.20.4",
+        "@tiptap/extension-mention": "^3.20.4",
+        "@tiptap/extension-placeholder": "^3.20.4",
+        "@tiptap/pm": "^3.20.4",
+        "@tiptap/react": "^3.20.4",
+        "@tiptap/starter-kit": "^3.20.4",
         "@uiw/codemirror-theme-sublime": "^4.21.0",
         "@uiw/codemirror-theme-vscode": "^4.21.0",
         "@uiw/react-codemirror": "^4.21.0",
@@ -85,6 +88,7 @@
         "html-react-parser": "^3.0.16",
         "lodash": "^4.17.21",
         "lowlight": "^3.3.0",
+        "tippy.js": "^6.3.7",
         "uuid": "^10.0.0"
     },
     "devDependencies": {

packages/agentflow/src/__mocks__/@tiptap/core.ts

@@ -0,0 +1,10 @@
+export const mergeAttributes = jest.fn((...attrs: Record<string, unknown>[]) => Object.assign({}, ...attrs))
+
+export class PasteRule {
+    find: unknown
+    handler: unknown
+    constructor(config: Record<string, unknown>) {
+        this.find = config.find
+        this.handler = config.handler
+    }
+}

packages/agentflow/src/__mocks__/@tiptap/extension-mention.ts

@@ -0,0 +1,7 @@
+const Mention = {
+    extend: jest.fn(() => ({
+        configure: jest.fn(() => 'CustomMention')
+    })),
+    configure: jest.fn(() => 'Mention')
+}
+export default Mention

packages/agentflow/src/__mocks__/@tiptap/markdown.ts

@@ -0,0 +1 @@
+export const Markdown = { configure: jest.fn(() => 'Markdown') }

packages/agentflow/src/__mocks__/@tiptap/pm.ts

@@ -0,0 +1,4 @@
+export const model = {}
+export const state = {}
+export const view = {}
+export const transform = {}

packages/agentflow/src/__mocks__/@tiptap/react.ts

@@ -2,6 +2,7 @@ import { createElement, forwardRef } from 'react'
 
 export const useEditor = (config?: Record<string, unknown>) => ({
     getHTML: () => (config?.content as string) ?? '<p></p>',
+    getMarkdown: () => (config?.content as string) ?? '',
     setEditable: jest.fn(),
     commands: { focus: jest.fn(), setContent: jest.fn() },
     _onUpdate: config?.onUpdate
@@ -11,3 +12,10 @@ export const EditorContent = forwardRef<HTMLDivElement, { editor?: unknown; [k:
     createElement('div', { ref, 'data-testid': 'tiptap-editor-content', 'data-has-editor': !!editor, ...rest })
 )
 EditorContent.displayName = 'EditorContent'
+
+export const ReactRenderer = jest.fn().mockImplementation(() => ({
+    element: document.createElement('div'),
+    ref: null,
+    updateProps: jest.fn(),
+    destroy: jest.fn()
+}))

packages/agentflow/src/__mocks__/tippy.js.ts

@@ -0,0 +1,9 @@
+const tippy = jest.fn(() => [
+    {
+        setProps: jest.fn(),
+        destroy: jest.fn(),
+        hide: jest.fn(),
+        show: jest.fn()
+    }
+])
+export default tippy

packages/agentflow/src/atoms/JsonInput.tsx

@@ -4,8 +4,8 @@ import { FormControl, Popover } from '@mui/material'
 import { useTheme } from '@mui/material/styles'
 import ReactJson from 'flowise-react-json-view'
 
-import type { VariableItem } from './SelectVariable'
-import { SelectVariable } from './SelectVariable'
+import type { VariableItem } from './VariablePicker'
+import { VariablePicker } from './VariablePicker'
 
 export interface JsonInputProps {
     value: string
@@ -153,7 +153,7 @@ export function JsonInput({ value, onChange, disabled = false, variableItems }:
                     transformOrigin={{ vertical: 'top', horizontal: 'left' }}
                     slotProps={{ paper: { sx: { width: 320, maxHeight: 400 } } }}
                 >
-                    <SelectVariable
+                    <VariablePicker
                         items={variableItems!}
                         onSelect={(val) => {
                             setNewVal(val)

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

@@ -36,6 +36,12 @@ jest.mock('./RichTextEditor.lazy', () => ({
     )
 }))
 
+jest.mock('./VariableInput', () => ({
+    VariableInput: ({ suggestionItems }: { suggestionItems?: { id: string }[] }) => (
+        <div data-testid='variable-input' data-suggestion-ids={JSON.stringify(suggestionItems?.map((i) => i.id))} />
+    )
+}))
+
 jest.mock('@tabler/icons-react', () => ({
     IconArrowsMaximize: () => <span data-testid='icon-expand' />,
     IconInfoCircle: () => <span data-testid='icon-info-circle' />,
@@ -328,8 +334,8 @@ jest.mock('./JsonInput', () => ({
     )
 }))
 
-jest.mock('./SelectVariable', () => ({
-    SelectVariable: ({ items, onSelect }: { items: Array<{ value: string }>; onSelect: (v: string) => void }) => (
+jest.mock('./VariablePicker', () => ({
+    VariablePicker: ({ items, onSelect }: { items: Array<{ value: string }>; onSelect: (v: string) => void }) => (
         <div data-testid='select-variable'>
             {items.map((item, i) => (
                 <button key={i} data-testid={`var-${item.value}`} onClick={() => onSelect(item.value)}>
@@ -503,6 +509,28 @@ describe('NodeInputHandler – variable popover', () => {
 
         expect(screen.queryByTestId('icon-variable')).toBeNull()
     })
+
+    it('deduplicates suggestionItem ids when variableItems share the same value', () => {
+        // Two flow-state entries with the same key produce the same base id.
+        // The first should keep its id; subsequent duplicates get a __N suffix.
+        const variableItems = [
+            { label: '$flow.state.myVar', value: '$flow.state.myVar', category: 'Flow State' },
+            { label: '$flow.state.myVar', value: '$flow.state.myVar', category: 'Flow State' },
+            { label: '$flow.state.other', value: '$flow.state.other', category: 'Flow State' }
+        ]
+        render(
+            <NodeInputHandler
+                inputParam={makeParam({ type: 'string', acceptVariable: true })}
+                data={baseNodeData}
+                isAdditionalParams
+                onDataChange={mockOnDataChange}
+                variableItems={variableItems}
+            />
+        )
+
+        const ids = JSON.parse(screen.getByTestId('variable-input').getAttribute('data-suggestion-ids')!)
+        expect(ids).toEqual(['$flow.state.myVar', '$flow.state.myVar__1', '$flow.state.other'])
+    })
 })
 
 describe('NodeInputHandler – credential type rendering', () => {