Implementation:FlowiseAI Flowise SettingsView

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

Overview

Settings is a React component that renders a Popper-based dropdown menu providing canvas-specific settings and actions such as loading, exporting, and configuring chatflows or agent flows.

Description

This component displays a Material UI Popper positioned at the bottom-end of an anchor element, containing a scrollable list of menu items derived from settings, agentsettings, or customAssistantSettings menu configurations. Each menu item renders with an icon and label. The component supports permission-based filtering via useAuth's hasPermission, handles JSON file upload for loading chatflow configurations, and dynamically adjusts available menu items based on whether the chatflow has been saved, whether it is an agent canvas, or whether it is a custom assistant. A ClickAwayListener handles closing the menu.

Usage

Use this component within the canvas toolbar to provide users with a settings dropdown menu. It is rendered in the canvas header and toggled via the isSettingsOpen prop and an anchor element reference.

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/views/settings/index.jsx
• Lines: 1-168

Signature

const Settings = ({ chatflow, isSettingsOpen, isCustomAssistant, anchorEl, isAgentCanvas, onSettingsItemClick, onUploadFile, onClose }) => { ... }

Import

import Settings from '@/views/settings'

I/O Contract

Inputs

Name	Type	Required	Description
chatflow	object	Yes	The current chatflow object; its presence and id determine which menu items are available
isSettingsOpen	bool	Yes	Controls whether the settings popper is open
isCustomAssistant	bool	No	When true, uses custom assistant settings menu items
anchorEl	any	Yes	The DOM element used as the anchor for the Popper positioning
isAgentCanvas	bool	No	When true, uses agent-specific settings menu items instead of standard settings
onSettingsItemClick	func	Yes	Callback invoked with the menu item id when a settings action is clicked
onUploadFile	func	Yes	Callback invoked with file contents (as string) when a JSON chatflow file is uploaded
onClose	func	Yes	Callback invoked when the user clicks away from the popper to close it

Outputs

Name	Type	Description
JSX.Element	Popper	Renders a positioned popper containing a scrollable list of settings menu items with a hidden file input for chatflow JSON import

Usage Examples

Basic Usage

<Settings
    chatflow={currentChatflow}
    isSettingsOpen={settingsOpen}
    anchorEl={settingsAnchorRef.current}
    isAgentCanvas={false}
    isCustomAssistant={false}
    onSettingsItemClick={(menuId) => handleSettingsAction(menuId)}
    onUploadFile={(fileContent) => loadChatflowFromJSON(fileContent)}
    onClose={() => setSettingsOpen(false)}
/>

Related Pages

• Principle:FlowiseAI_Flowise_Application_Configuration