feat(agentflow): ConditionBuilder + dynamic output ports (FLOWISE-261)#5957
feat(agentflow): ConditionBuilder + dynamic output ports (FLOWISE-261)#5957jocelynlin-wd merged 4 commits intomainfrom
Conversation
…rts (FLOWISE-261) Implement condition node editing UI with dynamic output port syncing: - ConditionBuilder atom for rendering condition arrays with Else indicator - buildDynamicOutputAnchors utility (parameterized for reuse by FLOWISE-262) - useDynamicOutputPorts hook with orphaned edge cleanup on condition deletion - EditNodeDialog integration for conditionAgentflow nodes Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Summary of ChangesHello, I'm Gemini Code Assist1! 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 experience for managing conditional nodes within agentflows. It introduces a specialized UI component for building conditions, along with robust utilities and hooks to dynamically manage the corresponding output ports. This ensures that the visual representation of conditional logic accurately reflects the underlying data, including automatic cleanup of connections when conditions are altered or removed, leading to a more intuitive and stable editing environment. Highlights
Changelog
Using Gemini Code AssistThe 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
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 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
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a ConditionBuilder component for editing conditions and a useDynamicOutputPorts hook to dynamically manage output ports on nodes, which is a significant feature enhancement. The implementation is well-structured, with new components, utilities, and hooks placed in appropriate locations within the architecture. The code is accompanied by a comprehensive set of tests covering various scenarios and edge cases.
My review focuses on improving maintainability and readability. I've suggested abstracting the creation and parsing of dynamic handle IDs to avoid magic strings and tight coupling between different parts of the system, aligning with the principle of prioritizing code readability and understandability. I also pointed out a small redundancy in the ConditionBuilder component that can be removed to simplify the logic. Overall, this is a high-quality contribution.
packages/agentflow/src/infrastructure/store/useDynamicOutputPorts.ts
Outdated
Show resolved
Hide resolved
|
/gemini review |
There was a problem hiding this comment.
Code Review
This pull request introduces a new ConditionBuilder component for managing conditional logic in agent flows, along with a useDynamicOutputPorts hook to dynamically adjust node output anchors. The changes are well-structured, with clear separation of concerns into new components, hooks, and utility functions, each accompanied by thorough tests. The integration into EditNodeDialog is clean and correctly uses a feature flag isConditionNode to apply the new functionality only to relevant nodes.
I've found one critical issue in the ConditionBuilder component related to how it manages stable keys for list items, which could lead to UI bugs on deletion. My review includes a detailed comment with a suggested fix for this issue. Once that's addressed, this will be a great addition.
…update - Add ConditionBuilder atom with stable keys and Else indicator - Add buildDynamicOutputAnchors utility with v2-compatible format (numeric label + description) - Add useDynamicOutputPorts hook for orphaned edge cleanup on condition deletion - Integrate into EditNodeDialog with merged updateNodeData to avoid stale-closure overwrites - Generate condition output anchors at node creation time in nodeFactory - Add registerOnFlowChange to AgentflowContext for context-level change notification
|
/gemini review |
There was a problem hiding this comment.
Code Review
This pull request introduces a ConditionBuilder component for editing conditions in agentflow nodes and adds support for dynamic output ports. The changes are well-structured, including a new useDynamicOutputPorts hook to manage edge cleanup when ports are removed, and utility functions for creating dynamic anchors. The integration into EditNodeDialog and AgentflowContext is handled correctly to ensure atomic updates and prevent race conditions. A suggestion to improve the nullish check for default values in the new ConditionBuilder component for better consistency and robustness has been retained.
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
|
|
||
| return ( | ||
| <Box | ||
| key={itemKeysRef.current[index]} |
There was a problem hiding this comment.
Not a comment! I will take the same approach instead of using index as key in ArrayInput PR - https://github.com/FlowiseAI/Flowise/pull/5887/changes#diff-071d9f90d936310bd2a5e0accf076a2b6cde8ef132145692b9dd80025efdb63d
2 participants
ConditionBuilderatom for editing condition arrays with labeled items (Condition 0, 1, ...) and Else indicatorbuildDynamicOutputAnchorsutility (parameterized withlabelPrefixandincludeElsefor reuse by FLOWISE-262)useDynamicOutputPortshook that syncs output anchors and cleans up orphaned edges when conditions are deletedEditNodeDialogforconditionAgentflownodes withenabledguard for non-condition nodesidCounterRefto avoid React reconciliation bugs on mid-list deletioncondition-builder-type-ops.mov
condition-builder-add-remove-conditions.mov