Feat/agentflow Port Markdown Editor & Edit/Source Toggle from legacy UI to agentflow (#6125)

* Initial flow

* Fix markdown import shape

* Add support to check for HTML or markdown

* Fix values not being persisted

* Make implementation similar to v2

* Add vairable syntax support to expandDialog

* Add variable syntax support to messageInput

* Test cases added

* Remove eslint-disable

* Add getHtml as a fallback

* Fixed gemini comments

* Fix test cases and lint warnings

* Fixed editorUtils.test to not have nested structure

* Fix review comments

Author: j-sanaa

packages/agentflow/package.json

@@ -73,6 +73,7 @@
         "@codemirror/lang-python": "^6.1.0",
         "@tabler/icons-react": "^3.7.0",
         "@tiptap/core": "^3.20.4",
+        "@tiptap/markdown": "^3.20.4",
         "@tiptap/extension-code-block-lowlight": "^3.20.4",
         "@tiptap/extension-mention": "^3.20.4",
         "@tiptap/extension-placeholder": "^3.20.4",

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

@@ -1,12 +1,25 @@
 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
-})
+export const useEditor = (config?: Record<string, unknown>) => {
+    // Track the current content so getMarkdown/getHTML reflect setContent() calls,
+    // mirroring real TipTap behaviour where setContent updates the editor state.
+    let currentContent: string = (config?.content as string) ?? ''
+    return {
+        getHTML: () => currentContent || '<p></p>',
+        getMarkdown: () => currentContent,
+        isEmpty: !currentContent,
+        setEditable: jest.fn(),
+        commands: {
+            focus: jest.fn(),
+            // Capture the first argument (the content string) so getMarkdown/getHTML
+            // return the value that was last loaded into the editor.
+            setContent: jest.fn((content: string) => {
+                currentContent = content
+            })
+        },
+        _onUpdate: config?.onUpdate
+    }
+}
 
 export const EditorContent = forwardRef<HTMLDivElement, { editor?: unknown; [k: string]: unknown }>(({ editor, ...rest }, ref) =>
     createElement('div', { ref, 'data-testid': 'tiptap-editor-content', 'data-has-editor': !!editor, ...rest })

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

@@ -175,36 +175,40 @@ describe('ExpandTextDialog', () => {
             expect(screen.getByRole('button', { name: 'Save' })).toBeInTheDocument()
             expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument()
         })
+
+        it('should not show Edit/Source toggle in code mode', () => {
+            render(<ExpandTextDialog open={true} value='' inputType='code' onConfirm={mockOnConfirm} onCancel={mockOnCancel} />)
+
+            expect(screen.queryByRole('button', { name: 'Edit' })).not.toBeInTheDocument()
+            expect(screen.queryByRole('button', { name: 'Source' })).not.toBeInTheDocument()
+        })
     })
 
     // --- Rich text mode ---
 
     describe('inputType="string" (richtext)', () => {
-        it('should render the TipTap editor instead of a TextField', async () => {
-            render(
-                <ExpandTextDialog open={true} value='<p>Hello</p>' inputType='string' onConfirm={mockOnConfirm} onCancel={mockOnCancel} />
-            )
+        it('should render the TipTap editor instead of a TextField in Edit mode', async () => {
+            render(<ExpandTextDialog open={true} value='Hello' inputType='string' onConfirm={mockOnConfirm} onCancel={mockOnCancel} />)
 
             // RichTextEditor renders data-testid='rich-text-editor' which wraps tiptap
             expect(await screen.findByTestId('rich-text-editor')).toBeInTheDocument()
             expect(screen.getByTestId('tiptap-editor-content')).toBeInTheDocument()
 
             // Plain TextField should NOT be present
             expect(screen.queryByTestId('expand-content-input')).not.toBeInTheDocument()
+            expect(screen.queryByTestId('source-input')).not.toBeInTheDocument()
         })
 
         it('should render plain TextField for non-string, non-code input types', () => {
-            render(<ExpandTextDialog open={true} value='Hello' inputType='number' onConfirm={mockOnConfirm} onCancel={mockOnCancel} />)
+            render(<ExpandTextDialog open={true} value='42' 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', () => {
-            render(
-                <ExpandTextDialog open={true} value='<p>Hello</p>' inputType='string' onConfirm={mockOnConfirm} onCancel={mockOnCancel} />
-            )
+            render(<ExpandTextDialog open={true} value='Hello' inputType='string' onConfirm={mockOnConfirm} onCancel={mockOnCancel} />)
 
             expect(screen.getByRole('button', { name: 'Save' })).toBeInTheDocument()
             expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument()
@@ -214,7 +218,7 @@ describe('ExpandTextDialog', () => {
             render(
                 <ExpandTextDialog
                     open={true}
-                    value='<p>Hello</p>'
+                    value='Hello'
                     inputType='string'
                     disabled={true}
                     onConfirm={mockOnConfirm}
@@ -241,14 +245,204 @@ describe('ExpandTextDialog', () => {
         })
 
         it('should call onCancel when Cancel is clicked in richtext mode', () => {
-            render(
-                <ExpandTextDialog open={true} value='<p>Hello</p>' inputType='string' onConfirm={mockOnConfirm} onCancel={mockOnCancel} />
-            )
+            render(<ExpandTextDialog open={true} value='Hello' inputType='string' onConfirm={mockOnConfirm} onCancel={mockOnCancel} />)
 
             fireEvent.click(screen.getByRole('button', { name: 'Cancel' }))
 
             expect(mockOnCancel).toHaveBeenCalled()
             expect(mockOnConfirm).not.toHaveBeenCalled()
         })
+
+        // --- Edit/Source toggle ---
+
+        it('should show Edit and Source toggle buttons in richtext mode', () => {
+            render(<ExpandTextDialog open={true} value='Hello' inputType='string' onConfirm={mockOnConfirm} onCancel={mockOnCancel} />)
+
+            expect(screen.getByRole('button', { name: 'Edit' })).toBeInTheDocument()
+            expect(screen.getByRole('button', { name: 'Source' })).toBeInTheDocument()
+        })
+
+        it('should not show Edit/Source toggle for non-string input types', () => {
+            render(<ExpandTextDialog open={true} value='42' inputType='number' onConfirm={mockOnConfirm} onCancel={mockOnCancel} />)
+
+            expect(screen.queryByRole('button', { name: 'Edit' })).not.toBeInTheDocument()
+            expect(screen.queryByRole('button', { name: 'Source' })).not.toBeInTheDocument()
+        })
+
+        it('should not change mode when the active toggle button is clicked again', () => {
+            render(
+                <ExpandTextDialog open={true} value='## My heading' inputType='string' onConfirm={mockOnConfirm} onCancel={mockOnCancel} />
+            )
+
+            // Already in Edit mode — clicking Edit again should keep the rich-text editor visible
+            fireEvent.click(screen.getByRole('button', { name: 'Edit' }))
+            expect(screen.getByTestId('rich-text-editor')).toBeInTheDocument()
+            expect(screen.queryByTestId('source-input')).not.toBeInTheDocument()
+        })
+
+        it('should switch to Source mode showing a raw text field when Source is clicked', () => {
+            render(
+                <ExpandTextDialog open={true} value='## My heading' inputType='string' onConfirm={mockOnConfirm} onCancel={mockOnCancel} />
+            )
+
+            fireEvent.click(screen.getByRole('button', { name: 'Source' }))
+
+            // Source mode renders a monospace TextField with data-testid='source-input'
+            expect(screen.getByTestId('source-input')).toBeInTheDocument()
+
+            // TipTap editor should be unmounted
+            expect(screen.queryByTestId('rich-text-editor')).not.toBeInTheDocument()
+        })
+
+        it('should show the current markdown value in Source mode', () => {
+            render(
+                <ExpandTextDialog open={true} value='## My heading' inputType='string' onConfirm={mockOnConfirm} onCancel={mockOnCancel} />
+            )
+
+            fireEvent.click(screen.getByRole('button', { name: 'Source' }))
+
+            const sourceTextarea = screen.getByTestId('source-input').querySelector('textarea')!
+            expect(sourceTextarea).toHaveValue('## My heading')
+        })
+
+        it('should switch back to Edit mode when Edit is clicked from Source', () => {
+            render(<ExpandTextDialog open={true} value='Hello' inputType='string' onConfirm={mockOnConfirm} onCancel={mockOnCancel} />)
+
+            fireEvent.click(screen.getByRole('button', { name: 'Source' }))
+            expect(screen.getByTestId('source-input')).toBeInTheDocument()
+
+            fireEvent.click(screen.getByRole('button', { name: 'Edit' }))
+            expect(screen.getByTestId('rich-text-editor')).toBeInTheDocument()
+            expect(screen.queryByTestId('source-input')).not.toBeInTheDocument()
+        })
+
+        it('should save edits made in Source mode when Save is clicked', () => {
+            render(
+                <ExpandTextDialog open={true} value='## My heading' inputType='string' onConfirm={mockOnConfirm} onCancel={mockOnCancel} />
+            )
+
+            fireEvent.click(screen.getByRole('button', { name: 'Source' }))
+
+            const sourceTextarea = screen.getByTestId('source-input').querySelector('textarea')!
+            fireEvent.change(sourceTextarea, { target: { value: '## Updated heading' } })
+
+            fireEvent.click(screen.getByRole('button', { name: 'Save' }))
+
+            expect(mockOnConfirm).toHaveBeenCalledWith('## Updated heading')
+        })
+
+        it('should disable the toggle buttons when disabled', () => {
+            render(
+                <ExpandTextDialog
+                    open={true}
+                    value='Hello'
+                    inputType='string'
+                    disabled={true}
+                    onConfirm={mockOnConfirm}
+                    onCancel={mockOnCancel}
+                />
+            )
+
+            expect(screen.getByRole('button', { name: 'Edit' })).toBeDisabled()
+            expect(screen.getByRole('button', { name: 'Source' })).toBeDisabled()
+        })
+
+        it('should reset to Edit mode when the dialog is reopened', () => {
+            const { rerender } = render(
+                <ExpandTextDialog open={true} value='Hello' inputType='string' onConfirm={mockOnConfirm} onCancel={mockOnCancel} />
+            )
+
+            // Switch to Source mode
+            fireEvent.click(screen.getByRole('button', { name: 'Source' }))
+            expect(screen.getByTestId('source-input')).toBeInTheDocument()
+
+            // Close dialog
+            rerender(<ExpandTextDialog open={false} value='Hello' inputType='string' onConfirm={mockOnConfirm} onCancel={mockOnCancel} />)
+
+            // Reopen — should be back in Edit mode
+            rerender(<ExpandTextDialog open={true} value='Hello' inputType='string' onConfirm={mockOnConfirm} onCancel={mockOnCancel} />)
+
+            expect(screen.getByTestId('rich-text-editor')).toBeInTheDocument()
+            expect(screen.queryByTestId('source-input')).not.toBeInTheDocument()
+        })
+    })
+
+    // --- With suggestionItems (VariableInput mode) ---
+
+    describe('inputType="string" with suggestionItems', () => {
+        const mockSuggestionItems = [{ id: 'question', label: 'question', description: "User's question", category: 'Chat Context' }]
+
+        it('should render VariableInput instead of RichTextEditor in Edit mode when suggestionItems provided', () => {
+            render(
+                <ExpandTextDialog
+                    open={true}
+                    value='Hello'
+                    inputType='string'
+                    suggestionItems={mockSuggestionItems}
+                    onConfirm={mockOnConfirm}
+                    onCancel={mockOnCancel}
+                />
+            )
+
+            expect(screen.getByTestId('variable-input')).toBeInTheDocument()
+            expect(screen.queryByTestId('rich-text-editor')).not.toBeInTheDocument()
+        })
+
+        it('should switch to Source mode and back to VariableInput when suggestionItems provided', () => {
+            render(
+                <ExpandTextDialog
+                    open={true}
+                    value='Hello {{question}}'
+                    inputType='string'
+                    suggestionItems={mockSuggestionItems}
+                    onConfirm={mockOnConfirm}
+                    onCancel={mockOnCancel}
+                />
+            )
+
+            fireEvent.click(screen.getByRole('button', { name: 'Source' }))
+            expect(screen.getByTestId('source-input')).toBeInTheDocument()
+            expect(screen.queryByTestId('variable-input')).not.toBeInTheDocument()
+
+            fireEvent.click(screen.getByRole('button', { name: 'Edit' }))
+            expect(screen.getByTestId('variable-input')).toBeInTheDocument()
+            expect(screen.queryByTestId('source-input')).not.toBeInTheDocument()
+        })
+
+        it('should still show Edit/Source toggle when suggestionItems provided', () => {
+            render(
+                <ExpandTextDialog
+                    open={true}
+                    value=''
+                    inputType='string'
+                    suggestionItems={mockSuggestionItems}
+                    onConfirm={mockOnConfirm}
+                    onCancel={mockOnCancel}
+                />
+            )
+
+            expect(screen.getByRole('button', { name: 'Edit' })).toBeInTheDocument()
+            expect(screen.getByRole('button', { name: 'Source' })).toBeInTheDocument()
+        })
+
+        it('should save edits made in Source mode when suggestionItems provided', () => {
+            render(
+                <ExpandTextDialog
+                    open={true}
+                    value='Hello {{question}}'
+                    inputType='string'
+                    suggestionItems={mockSuggestionItems}
+                    onConfirm={mockOnConfirm}
+                    onCancel={mockOnCancel}
+                />
+            )
+
+            fireEvent.click(screen.getByRole('button', { name: 'Source' }))
+            const sourceTextarea = screen.getByTestId('source-input').querySelector('textarea')!
+            fireEvent.change(sourceTextarea, { target: { value: 'Updated {{question}}' } })
+            fireEvent.click(screen.getByRole('button', { name: 'Save' }))
+
+            expect(mockOnConfirm).toHaveBeenCalledWith('Updated {{question}}')
+        })
     })
 })