feat(agentflow): enhance validation and feedback mechanisms#5915
feat(agentflow): enhance validation and feedback mechanisms#5915jocelynlin-wd merged 2 commits intomainfrom
Conversation
- Added constraint validation functions to ensure flow integrity, including checks for single start nodes, nested iterations, and human input restrictions within iterations. - Implemented a new ValidationFeedback component to display validation results and issues directly in the UI. - Updated the Agentflow component to integrate validation feedback and display snackbar notifications for constraint violations. - Enhanced flow validation logic to detect hanging edges and validate node inputs, improving overall flow integrity checks. - Introduced new test cases for validation functions to ensure robustness and reliability.
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 improves the robustness and user experience of Agentflow by introducing a comprehensive validation system. It ensures flow integrity through various constraint checks, provides immediate and clear feedback to users via a new UI component and snackbar notifications, and visually highlights problematic nodes. These enhancements guide users in building valid and functional flows, reducing potential errors and improving overall usability. 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 comprehensive validation system for agent flows, which is a great enhancement. The changes include new validation logic for flow structure, node inputs, and placement constraints. A new UI component provides clear feedback to the user about validation issues. The implementation is solid, with good test coverage for the new logic. I have a few suggestions to improve maintainability, UI clarity, and accessibility.
packages/agentflow/src/features/canvas/components/ValidationFeedback.tsx
Show resolved
Hide resolved
packages/agentflow/src/features/canvas/components/ValidationFeedback.tsx
Outdated
Show resolved
Hide resolved
packages/agentflow/src/features/canvas/hooks/useFlowHandlers.ts
Outdated
Show resolved
Hide resolved
mmattu-wd
left a comment
mmattu-wd
left a comment
There was a problem hiding this comment.
Looks good, just some general questions
| sx={{ | ||
| borderColor: stateColor, | ||
| borderWidth: '1px', | ||
| borderColor: hasValidationErrors ? '#FFB938' : stateColor, |
There was a problem hiding this comment.
nb: I see we have tokens that contain all the style tokens in agentflow, should we have validation colors in there as well for consistency. It is a bit more verbose
Then this could be like
borderColor: hasValidationErrors ? tokens.colors.border.validation : stateColorThere was a problem hiding this comment.
good point, will update in a separate PR
| mb: 2, | ||
| backgroundColor: isDarkMode ? theme.palette.background.paper : theme.palette.grey[50], | ||
| borderRadius: '8px', | ||
| border: `1px solid ${alpha('#FFB938', isDarkMode ? 0.3 : 0.5)}` |
There was a problem hiding this comment.
nb: just a question I noticed we have error and warning validation types, but we only render the color for the warning (amber). Is that expected/intentional?
There was a problem hiding this comment.
Yes, intentional for now. Currently all validation issues are rendered uniformly as warnings (amber) since they're pre-save checks. The type field exists in the data model for future use if we want to visually distinguish structural errors (missing start node, cycles) from soft warnings (disconnected nodes, missing inputs), but we haven't needed that distinction in the UI yet.
| type: 'agentflowNode', | ||
| position, | ||
| data: { ...initializedData, label: newLabel } | ||
| type: resolveNodeType(nodeData.type ?? ''), |
There was a problem hiding this comment.
nb: can resolveNodeType handle undefined internally, so we dont have to escape the type here?
There was a problem hiding this comment.
NodeData.type is typed as string so it shouldn't actually be undefined — the ?? '' is just defensive. Changing resolveNodeType to accept undefined would loosen the function's contract for a case that shouldn't happen at the type level. Prefer to keep the fallback at the call site.
3 participants
FLOWISE-232
validation in agentflow sdk
agentflow-sdk-validation.mov
Hanging edge detection — Check every edge to see if both source and target nodes still exist
validation error tooltip
comparison: validation in agentflow v2
agentflow-v2-validation.mov