Implementation:FlowiseAI Flowise ViewLeadsDialog

Knowledge Sources	FlowiseAI Flowise
Domains	UI Dialogs, Lead Management
Last Updated	2026-02-12 07:00 GMT

Overview

ViewLeadsDialog is a React dialog component that displays a searchable, exportable table of captured leads associated with a chatflow.

Description

This component renders a Material UI Dialog (portaled via createPortal) that fetches leads data from the leads API for a given chatflow. The dialog header includes a title, a search input for filtering leads by name, email, or phone, and an "Export" button that downloads the leads as a JSON file. The content area shows either an empty state illustration when no leads exist, or a Material UI Table with columns for Name, Email Address, Phone, and Created Date (formatted via moment). The component also includes a DatePickerCustomInput helper component using forwardRef for date picker integration.

Usage

Use this component when a user wants to view, search, and export captured leads from a chatflow's lead collection form, typically accessed from the chatflow settings or management panel.

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/ui-component/dialog/ViewLeadsDialog.jsx
• Lines: 1-210

Signature

const ViewLeadsDialog = ({ show, dialogProps, onCancel }) => { ... }

ViewLeadsDialog.propTypes = {
    show: PropTypes.bool,
    dialogProps: PropTypes.object,
    onCancel: PropTypes.func
}

export default ViewLeadsDialog

Import

import ViewLeadsDialog from '@/ui-component/dialog/ViewLeadsDialog'

I/O Contract

Inputs

Name	Type	Required	Description
show	bool	Yes	Controls whether the dialog is visible
dialogProps	object	Yes	Configuration object containing chatflow (object with id) and title (string)
onCancel	func	Yes	Callback invoked when the user closes the dialog

Outputs

Name	Type	Description
React Portal	ReactPortal	Renders the dialog into the DOM element with id portal

Usage Examples

Basic Usage

import ViewLeadsDialog from '@/ui-component/dialog/ViewLeadsDialog'

const MyComponent = () => {
    const [showDialog, setShowDialog] = useState(false)
    const dialogProps = {
        title: 'View Leads',
        chatflow: { id: 'chatflow-abc-123' }
    }

    return (
        <ViewLeadsDialog
            show={showDialog}
            dialogProps={dialogProps}
            onCancel={() => setShowDialog(false)}
        />
    )
}

Related Pages

• Principle:FlowiseAI_Flowise_Lead_Capture