Implementation:FlowiseAI Flowise ValidationPopUp
| Knowledge Sources | |
|---|---|
| Domains | Flow Validation, UI Components |
| Last Updated | 2026-02-12 07:00 GMT |
Overview
ValidationPopUp is a memoized React component that provides a floating checklist popup for validating agentflow nodes, displaying any detected issues with node-specific icons and warning messages.
Description
This component renders a small floating action button (FAB) positioned in the top-right corner of the canvas. Clicking the button toggles a Popper-based popup that displays a checklist of validation issues fetched from the validationApi.checkValidation endpoint. Each issue card shows the corresponding node icon (resolved from AGENTFLOW_ICONS), the node label, and a list of warning messages. When no issues are found, a success snackbar is displayed and an empty state illustration is shown. The component uses ClickAwayListener to handle closing the popup when clicking outside.
Usage
Use this component within the agentflow canvas editor to give users a quick way to validate their flow configuration before deployment or execution.
Code Reference
Source Location
- Repository: FlowiseAI Flowise
- File: packages/ui/src/views/chatmessage/ValidationPopUp.jsx
- Lines: 1-301
Signature
const ValidationPopUp = ({ chatflowid, hidden }) => {
// ...
}
export default memo(ValidationPopUp)
Import
import ValidationPopUp from '@/views/chatmessage/ValidationPopUp'
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| chatflowid | string | Yes | The ID of the chatflow/agentflow to validate |
| hidden | bool | No | When true, hides the FAB button and closes the popup |
Outputs
| Name | Type | Description |
|---|---|---|
| Rendered component | JSX.Element | A FAB button with a toggleable Popper popup displaying validation results |
Usage Examples
Basic Usage
<ValidationPopUp
chatflowid="flow_abc123"
hidden={false}
/>