Implementation:FlowiseAI Flowise FlowListMenu

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

Overview

This React component renders a dropdown "Options" menu for individual chatflow/agentflow items in the flow list, providing actions such as rename, duplicate, export, delete, and configuration management.

Description

The FlowListMenu component displays a Button labeled "Options" with a dropdown arrow. When clicked, a StyledMenu opens with permission-gated menu items (using PermissionMenuItem) organized into three groups: (1) Rename, Duplicate, Export, and Save As Template; (2) Starter Prompts, Chat Feedback, Allowed Domains, Speech To Text, and Update Category; (3) Delete. Each action is permission-controlled based on whether the flow is a chatflow or agentflow (e.g., chatflows:update vs agentflows:update). The component manages multiple dialog states including SaveChatflowDialog for renaming, TagDialog for categories, StarterPromptsDialog, ChatFeedbackDialog, AllowedDomainsDialog, SpeechToTextDialog, and ExportAsTemplateDialog. Duplicate opens a new browser tab with the flow data stored in localStorage.

Usage

This component is used in flow list views (both chatflows and agentflows) to provide per-item action menus. It appears alongside each flow card or list item in the main flow listing pages.

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/ui-component/button/FlowListMenu.jsx
• Lines: 1-502

Signature

export default function FlowListMenu({
    chatflow,
    isAgentCanvas,
    isAgentflowV2,
    setError,
    updateFlowsApi,
    currentPage,
    pageLimit
}) {
    // ...
}

FlowListMenu.propTypes = {
    chatflow: PropTypes.object,
    isAgentCanvas: PropTypes.bool,
    isAgentflowV2: PropTypes.bool,
    setError: PropTypes.func,
    updateFlowsApi: PropTypes.object,
    currentPage: PropTypes.number,
    pageLimit: PropTypes.number
}

Import

import FlowListMenu from '@/ui-component/button/FlowListMenu'

I/O Contract

Inputs

Name	Type	Required	Description
chatflow	object	Yes	The chatflow/agentflow object containing id, name, flowData, and category
isAgentCanvas	bool	No	Whether this flow is an agent canvas (affects permissions and API calls)
isAgentflowV2	bool	No	Whether this flow is a V2 agentflow (affects duplicate URL and refresh type)
setError	function	No	Error handler callback for propagating API errors
updateFlowsApi	object	Yes	API hook object with a request method for refreshing the flow list after changes
currentPage	number	No	Current pagination page number for refreshing flows
pageLimit	number	No	Number of items per page for refreshing flows

Outputs

Name	Type	Description
Options button	JSX.Element	Dropdown trigger button labeled "Options"
StyledMenu	JSX.Element	Dropdown menu with Rename, Duplicate, Export, Save As Template, Starter Prompts, Chat Feedback, Allowed Domains, Speech To Text, Update Category, and Delete items
SaveChatflowDialog	JSX.Element	Dialog for renaming the flow
TagDialog	JSX.Element	Dialog for updating flow categories/tags
StarterPromptsDialog	JSX.Element	Dialog for configuring conversation starter prompts
ChatFeedbackDialog	JSX.Element	Dialog for configuring chat feedback settings
AllowedDomainsDialog	JSX.Element	Dialog for managing allowed embedding domains
SpeechToTextDialog	JSX.Element	Dialog for configuring speech-to-text settings
ExportAsTemplateDialog	JSX.Element	Dialog for saving the flow as a custom template

Usage Examples

Basic Usage

import FlowListMenu from '@/ui-component/button/FlowListMenu'

const FlowCard = ({ chatflow, updateFlowsApi, currentPage, pageLimit }) => {
    const [error, setError] = useState(null)

    return (
        <Card>
            <CardContent>
                <Typography>{chatflow.name}</Typography>
            </CardContent>
            <CardActions>
                <FlowListMenu
                    chatflow={chatflow}
                    isAgentCanvas={false}
                    isAgentflowV2={false}
                    setError={setError}
                    updateFlowsApi={updateFlowsApi}
                    currentPage={currentPage}
                    pageLimit={pageLimit}
                />
            </CardActions>
        </Card>
    )
}

Related Pages

• Principle:FlowiseAI_Flowise_Flow_Management