Implementation:FlowiseAI Flowise ComponentsListDialog

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

Overview

ComponentsListDialog is a generic, reusable React dialog component that displays a searchable, grid-based list of components (e.g., embeddings providers, vector stores) fetched from a configurable API call, allowing users to select one from the list.

Description

This component renders a Material UI Dialog via createPortal into the #portal element. It accepts an apiCall function prop and invokes it through the useApi hook on mount to fetch the list of available components. The fetched components are displayed in a 3-column grid of ListItemButton elements, each showing a circular icon (loaded from /api/v1/node-icon/{name}) and the component label. A sticky search bar filters components by name using a case-insensitive substring match. The component manages dark mode background colors from the Redux customization state and dispatches SHOW_CANVAS_DIALOG/HIDE_CANVAS_DIALOG actions to control canvas interaction state.

Usage

Use this component in the document store views when the user needs to select a component (such as an embeddings provider or a vector store) from a dynamically loaded list. The API call function is passed as a prop, making it reusable across different component types.

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/views/docstore/ComponentsListDialog.jsx
• Lines: 1-194

Signature

const ComponentsListDialog = ({ show, dialogProps, onCancel, apiCall, onSelected }) => { ... }

export default ComponentsListDialog

Import

import ComponentsListDialog from '@/views/docstore/ComponentsListDialog'

I/O Contract

Inputs

Name	Type	Required	Description
show	boolean	Yes	Controls dialog visibility
dialogProps	object	Yes	Dialog configuration containing title (string)
onCancel	function	Yes	Callback invoked when the dialog is closed
apiCall	function	Yes	The API function to call for fetching components (passed to useApi)
onSelected	function	Yes	Callback invoked with the selected component object when a list item is clicked

Outputs

Name	Type	Description
Rendered JSX (portal)	React Element	A Dialog containing a sticky search bar and a 3-column grid of selectable component buttons with icons
onSelected callback	void	Called with the full component object (containing name, label, etc.) when the user selects a component

Usage Examples

Basic Usage

import ComponentsListDialog from '@/views/docstore/ComponentsListDialog'
import nodesApi from '@/api/nodes'

<ComponentsListDialog
  show={showDialog}
  dialogProps={{ title: 'Select Embeddings Provider' }}
  onCancel={() => setShowDialog(false)}
  apiCall={nodesApi.getEmbeddingsProviders}
  onSelected={(provider) => handleProviderSelected(provider)}
/>

Related Pages

• Principle:FlowiseAI_Flowise_Document_Loader_Selection