Feat/agentflow Add JSON, code, and SelectVariable input types to NodeInputHandler

[j-sanaa]

• Add JsonInput — interactive JSON tree editor using flowise-react-json-view with per-key variable injection, matching the original's dual rendering: inline tree for simple json, button-to-dialog for acceptVariable json
• Add CodeInput — CodeMirror 6 editor with JS/Python/JSON/TypeScript syntax highlighting, "See Example" button support, and proper light/dark theming
• Add useAvailableVariables hook — builds variable items (globals, upstream node outputs, flow state) from AgentflowContext
• Wire variable popover into NodeInputHandler for acceptVariable fields (string/code via header icon, json via per-key click)
• Add code mode to ExpandTextDialog for syntax-highlighted expand view

Recording for JSON Input:

JsonInputRecording.mov

Recording for JSON Output Schema

JSONOutputSchema.mov

Recording for selectVariable

SelectVariable.mov

Recording for Code input

CodeInput.Recording.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 NodeInputHandler component by introducing new input types for JSON and code, alongside a robust variable selection mechanism. These additions provide users with more powerful and flexible ways to configure node parameters, improving the overall user experience and enabling more complex agent flow definitions. The changes streamline the process of injecting dynamic values and managing structured data within the UI.

Highlights

• New Input Types: Introduced JsonInput for interactive JSON editing, supporting per-key variable injection and dual rendering (inline tree or dialog for variables).
• Code Editor Integration: Added CodeInput for syntax-highlighted code editing (JS/Python/JSON/TS) with "See Example" functionality and proper theming.
• Variable Management: Implemented useAvailableVariables hook to gather global, upstream node, and flow state variables.
• Enhanced Variable Selection: Integrated a variable popover into NodeInputHandler for acceptVariable fields, enabling variable selection for string, code, and JSON inputs.
• Expanded Text Dialog: Extended ExpandTextDialog with a 'code' mode for syntax-highlighted expanded views.

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.

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 significant new functionality by adding json and code input types to NodeInputHandler, complete with rich editors (CodeMirror, react-json-view) and syntax highlighting. It also implements a robust variable selection system, including a new useAvailableVariables hook to gather context-aware variables and UI components to inject them. The changes are well-structured, with new functionality encapsulated in dedicated components and hooks, and are accompanied by thorough tests.

My review identifies two potential issues: one high-severity bug where variable injection could be erroneously enabled for incompatible input types, and one medium-severity UX concern in the new JsonInput component related to component re-mounting on every change. Addressing these will further improve the robustness and usability of these new features.