Implementation:FlowiseAI Flowise TagDialog

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

Overview

TagDialog is a React dialog component that provides a chip-based tag input interface for setting category tags on chatflows.

Description

This component renders a Material UI Dialog with a text field for entering tags and a chip display for existing tags. Users type a tag name and press Enter to add it as a chip, and can remove individual tags by clicking the delete icon on each chip. On submit, any remaining text in the input is also included. The dialog initializes its tag list from dialogProps.category and resets state when the dialog props change. Unlike many other dialog components in Flowise, this one renders inline rather than using createPortal.

Usage

Use this component when a user needs to assign or edit category tags on a chatflow, typically accessed from the chatflow list or canvas settings.

Code Reference

Source Location

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

Signature

const TagDialog = ({ isOpen, dialogProps, onClose, onSubmit }) => { ... }

TagDialog.propTypes = {
    isOpen: PropTypes.bool,
    dialogProps: PropTypes.object,
    onClose: PropTypes.func,
    onSubmit: PropTypes.func
}

export default TagDialog

Import

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

I/O Contract

Inputs

Name	Type	Required	Description
isOpen	bool	Yes	Controls whether the dialog is visible
dialogProps	object	Yes	Configuration object containing category (array of strings) as the initial tag list
onClose	func	Yes	Callback invoked when the user cancels the dialog
onSubmit	func	Yes	Callback invoked with the final array of category tag strings when the user submits

Outputs

Name	Type	Description
React Element	JSX.Element	Renders a Dialog component directly in the component tree

Usage Examples

Basic Usage

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

const MyComponent = () => {
    const [showDialog, setShowDialog] = useState(false)
    const dialogProps = {
        category: ['chatbot', 'customer-support']
    }

    return (
        <TagDialog
            isOpen={showDialog}
            dialogProps={dialogProps}
            onClose={() => setShowDialog(false)}
            onSubmit={(tags) => {
                console.log('Updated tags:', tags)
                setShowDialog(false)
            }}
        />
    )
}

Related Pages

• Principle:FlowiseAI_Flowise_Flow_Management