Implementation:FlowiseAI Flowise ProfileSection

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

Overview

This React component renders a profile/settings dropdown menu in the application header, providing access to export, import, version info, account settings, and logout functionality.

Description

The ProfileSection component displays a settings gear icon (IconSettings) as an avatar button. Clicking it opens a Popper-based dropdown with a PerfectScrollbar scrollable menu. The menu includes permission-gated buttons for Export and Import operations (using PermissionListItemButton with workspace:export and workspace:import permissions), a Version info button that opens an AboutDialog, an Account Settings option (hidden for SSO users), and a Logout button. The component also manages ExportDialog and ImportDialog sub-components that handle data export/import with support for Agentflows, Assistants, Chatflows, Chat Messages, Chat Feedbacks, Custom Templates, Document Stores, Executions, Tools, and Variables.

Usage

This component is rendered in the main application header and is always visible to authenticated users. It serves as the primary settings and account management entry point for the Flowise UI.

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/layout/MainLayout/Header/ProfileSection/index.jsx
• Lines: 1-544

Signature

const ProfileSection = ({ handleLogout }) => {
    const theme = useTheme()
    const customization = useSelector((state) => state.customization)
    const [open, setOpen] = useState(false)
    const [aboutDialogOpen, setAboutDialogOpen] = useState(false)
    const [exportDialogOpen, setExportDialogOpen] = useState(false)
    const [importDialogOpen, setImportDialogOpen] = useState(false)
    // ...
}

ProfileSection.propTypes = {
    handleLogout: PropTypes.func
}

export default ProfileSection

Import

import ProfileSection from '@/layout/MainLayout/Header/ProfileSection'

I/O Contract

Inputs

Name	Type	Required	Description
handleLogout	function	Yes	Callback function invoked when the user clicks the Logout button

Outputs

Name	Type	Description
Settings avatar button	JSX.Element	Rounded avatar button with a gear icon that toggles the profile menu
Profile dropdown menu	JSX.Element	Popper-based dropdown with Export, Import, Version, Account Settings, and Logout options
ExportDialog	JSX.Element	Dialog for selecting which data types to export (portal-rendered)
ImportDialog	JSX.Element	Dialog displaying import progress (portal-rendered)
AboutDialog	JSX.Element	Dialog showing application version information

Usage Examples

Basic Usage

import ProfileSection from '@/layout/MainLayout/Header/ProfileSection'

const Header = () => {
    const signOutClicked = () => {
        // Handle logout logic
        logoutApi.request()
    }

    return (
        <>
            {/* Other header elements */}
            <ProfileSection handleLogout={signOutClicked} />
        </>
    )
}

Related Pages

• Principle:FlowiseAI_Flowise_User_Profile_Management