feat(agentflow): MessagesInput, StructuredOutputBuilder + ExpandTextDialog (FLOWISE-263, FLOWISE-267)

[jocelynlin-wd]

Summary

• MessagesInput atom: role dropdown (system/assistant/developer/user) + multiline content textarea with variable hint icon and expand dialog, wired into EditNodeDialog for agentMessages/llmMessages array params
• StructuredOutputBuilder atom: key/type/description fields with conditional enum values and JSON schema fields, wired into EditNodeDialog for agentStructuredOutput/llmStructuredOutput array params
• ExpandTextDialog shared atom: reusable expand dialog for editing long text in a larger viewport, used by both MessagesInput and NodeInputHandler
• EditNodeDialog: name-based routing to render specialized components instead of generic ArrayInput
• NodeInputHandler: wired previously non-functional expand icon to open ExpandTextDialog
• maxItems forward-compat guard on Add buttons (no nodes use it today, documented on InputParam type)
• Removed dead default exports from barrel-only modules

Test plan

• 17 unit tests for MessagesInput (rendering, add/delete, role/content change, expand dialog open/save/cancel, minItems, maxItems, all roles)
• 15 unit tests for StructuredOutputBuilder (rendering, add/delete, field changes, type change with conditional field cleanup, enum/jsonArray visibility, disabled state, minItems, maxItems, all type options)
• 7 unit tests for ExpandTextDialog (open/close, confirm/cancel, disabled, title, placeholder)
• 3 unit tests for NodeInputHandler expand dialog (open, save, hidden for non-multiline)
• 6 integration tests in EditNodeDialog (routing for agentMessages, llmMessages, agentStructuredOutput, llmStructuredOutput, data propagation)
• All 48 tests pass, lint clean

🤖 Generated with Claude Code

---

Recordings:

message-array-editor.mov

structured-output-builder.mov

[gemini-code-assist]

Summary of Changes

Hello, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly enhances the user interface for configuring Agentflow nodes by introducing specialized and more intuitive input components. It improves the editing experience for complex data structures like conversational messages and structured output definitions, making node configuration more efficient and user-friendly. The addition of a reusable text expansion dialog further streamlines the handling of lengthy text inputs across the application.

Highlights

• New MessagesInput Component: Introduced a specialized input component for managing agent and LLM messages, featuring a role dropdown (system/assistant/developer/user), a multiline content textarea with variable hint icon, and integration with an expand dialog for larger editing.
• New StructuredOutputBuilder Component: Added a dedicated component for building structured output schemas, allowing users to define key, type, and description fields, with conditional inputs for enum values or JSON schema based on the selected type.
• Reusable ExpandTextDialog: Created a shared ExpandTextDialog atom to provide a larger viewport for editing long text content, which is now utilized by both the new MessagesInput and the existing NodeInputHandler.
• Enhanced EditNodeDialog Routing: The EditNodeDialog has been updated to use name-based routing, rendering these new specialized components (MessagesInput and StructuredOutputBuilder) instead of the generic ArrayInput for relevant array parameters.
• NodeInputHandler Integration: The NodeInputHandler now correctly wires its previously non-functional expand icon to open the new ExpandTextDialog for multiline string and code input types.

Changelog

• packages/agentflow/src/atoms/ExpandTextDialog.test.tsx
  • Added unit tests for the ExpandTextDialog component, covering rendering, value handling, title, placeholder, confirm/cancel actions, and disabled states.
• packages/agentflow/src/atoms/ExpandTextDialog.tsx
  • Added a new reusable ExpandTextDialog component for editing multiline text in a larger modal.
• packages/agentflow/src/atoms/MessagesInput.test.tsx
  • Added comprehensive unit tests for the MessagesInput component, verifying rendering, add/delete functionality, role and content changes, disabled state, minItems/maxItems constraints, expand dialog integration, and role options.
• packages/agentflow/src/atoms/MessagesInput.tsx
  • Added a new MessagesInput component to handle array inputs for messages, featuring role selection, multiline content with variable hints, and integration with ExpandTextDialog.
• packages/agentflow/src/atoms/NodeInputHandler.test.tsx
  • Added unit tests to NodeInputHandler for the new expand dialog functionality, ensuring it opens with correct content, saves changes, and is only shown for multiline fields.
• packages/agentflow/src/atoms/NodeInputHandler.tsx
  • Integrated the ExpandTextDialog into NodeInputHandler for multiline string and code input types, allowing users to edit long text in an expanded view.
• packages/agentflow/src/atoms/StructuredOutputBuilder.test.tsx
  • Added unit tests for the StructuredOutputBuilder component, covering rendering, add/delete functionality, key/type/description changes, conditional field visibility (enum, JSON schema), disabled state, minItems/maxItems constraints, and type options.
• packages/agentflow/src/atoms/StructuredOutputBuilder.tsx
  • Added a new StructuredOutputBuilder component for defining structured output schemas, including fields for key, type, description, and conditional inputs for enum values or JSON schema.
• packages/agentflow/src/atoms/index.ts
  • Exported the newly created ExpandTextDialog, MessagesInput, and StructuredOutputBuilder components.
• packages/agentflow/src/core/types/node.ts
  • Added a comment to the maxItems property in InputParam to clarify its current usage for forward compatibility.
• packages/agentflow/src/features/node-editor/EditNodeDialog.test.tsx
  • Added integration tests for EditNodeDialog to confirm that it correctly renders and propagates data changes for MessagesInput and StructuredOutputBuilder components when specific input parameters are present.
• packages/agentflow/src/features/node-editor/EditNodeDialog.tsx
  • Modified EditNodeDialog to dynamically render MessagesInput or StructuredOutputBuilder for agentMessages, llmMessages, agentStructuredOutput, and llmStructuredOutput array parameters, replacing the generic NodeInputHandler for these specific cases.

Activity

• 17 unit tests for MessagesInput (rendering, add/delete, role/content change, expand dialog open/save/cancel, minItems, maxItems, all roles) were completed.
• 15 unit tests for StructuredOutputBuilder (rendering, add/delete, field changes, type change with conditional field cleanup, enum/jsonArray visibility, disabled state, minItems, maxItems, all type options) were completed.
• 7 unit tests for ExpandTextDialog (open/close, confirm/cancel, disabled, title, placeholder) were completed.
• 3 unit tests for NodeInputHandler expand dialog (open, save, hidden for non-multiline) were completed.
• 6 integration tests in EditNodeDialog (routing for agentMessages, llmMessages, agentStructuredOutput, llmStructuredOutput, data propagation) were completed.
• All 48 tests passed and linting was clean.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request introduces several new, well-tested components to enhance the agentflow node editor: MessagesInput for message lists, StructuredOutputBuilder for JSON schemas, and a reusable ExpandTextDialog. The implementation is solid, and the integration into EditNodeDialog and NodeInputHandler is clean. My feedback focuses on a pattern of mutating refs during the render phase in the new list-builder components, which aligns with general React best practices. I've suggested an alternative that aligns with existing patterns in your codebase to improve consistency and adherence to React principles.

[jocelynlin-wd]

/gemini review

[gemini-code-assist]

Code Review

This pull request introduces three new UI components: MessagesInput, StructuredOutputBuilder, and ExpandTextDialog. The ExpandTextDialog is a reusable component for editing long text, which is then integrated into both MessagesInput and NodeInputHandler. The MessagesInput component provides a specialized array input for message entries with role dropdowns and multiline content, while StructuredOutputBuilder offers a specialized array input for structured output schemas with key, type, and description fields, including conditional fields for enums and JSON schemas. The EditNodeDialog has been updated to route to these new specialized components for relevant array parameters, enhancing the user experience for these specific input types. Comprehensive unit and integration tests have been added for all new components and their interactions, ensuring the correctness and stability of the new features.

[jocelynlin-wd]

use Text dialog for all text input first, will switch to use json editor in FLOWISE-230

[jocelynlin-wd]

will update this component to support rich text in FLOWISE-342