Implementation:FlowiseAI Flowise VectorStoreDialog

Knowledge Sources	FlowiseAI Flowise
Domains	UI, Vector Store, Dialog, API Code Generation
Last Updated	2026-02-12 07:00 GMT

Overview

The VectorStoreDialog is a React dialog component that provides an interface for reviewing vector store node configurations, triggering upsert operations, and generating API code examples in Python, JavaScript, and cURL.

Description

This component renders a medium-width MUI Dialog (via createPortal) that analyzes the current ReactFlow canvas to extract vector store nodes and their upstream dependencies using getUpsertDetails. For each vector store node, it displays expandable accordion sections showing each connected node's input parameters in a read-only table. Users can toggle a "Show API" checkbox to reveal tabbed code snippets (Python, JavaScript, cURL) demonstrating how to programmatically upsert data. The code generation handles both JSON and FormData payloads depending on whether file upload inputs are detected. An "Upsert" button triggers the actual vector store upsert operation via vectorstoreApi.upsertVectorStore.

Usage

Use this component from the chatflow canvas when the user wants to preview node configurations and trigger a vector store upsert. It is typically opened from a toolbar action or context menu in the flow editor.

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/views/vectorstore/VectorStoreDialog.jsx
• Lines: 1-666

Signature

const VectorStoreDialog = ({ show, dialogProps, onCancel, onIndexResult }) => {
    // ...
}

VectorStoreDialog.propTypes = {
    show: PropTypes.bool,
    dialogProps: PropTypes.object,
    onCancel: PropTypes.func,
    onIndexResult: PropTypes.func
}

export default VectorStoreDialog

Import

import VectorStoreDialog from '@/views/vectorstore/VectorStoreDialog'

I/O Contract

Inputs

Name	Type	Required	Description
show	bool	Yes	Controls whether the dialog is visible
dialogProps	object	Yes	Configuration object containing title and chatflowid (the chatflow identifier)
onCancel	function	Yes	Callback invoked when the dialog is closed
onIndexResult	function	No	Callback invoked with the upsert result data after a successful upsert operation

Outputs

Name	Type	Description
Rendered dialog	JSX.Element (portal)	A medium-width MUI Dialog with node configuration review, API code generation, and upsert trigger

Internal Components

TabPanel

A simple tab panel wrapper that conditionally renders its children based on the active tab index.

Prop	Type	Description
children	node	The content to render when this panel is active
value	number	The currently active tab index
index	number	This panel's tab index

Key Internal State

State Variable	Type	Description
nodes	array	Array of vector store node data extracted from the ReactFlow canvas (each with vectorNode and connected nodes)
loading	bool	Whether an upsert operation is in progress
isFormDataRequired	object	Map of vector node IDs to booleans indicating whether file upload (FormData) is needed
nodeConfigExpanded	object	Map of node IDs to their accordion expansion state
nodeCheckboxExpanded	object	Map of vector node IDs to their "Show API" checkbox state
tabValue	number	The currently selected code language tab (0=Python, 1=JavaScript, 2=cURL)
configData	object	Map of vector node IDs to their override configuration data

Key Operations

• getCode(codeLang, vectorNodeId, isMultiple, configData) -- Generates JSON-based API code for the specified language
• getCodeWithFormData(codeLang, vectorNodeId, isMultiple, configData) -- Generates FormData-based API code for file uploads
• onUpsertClicked(vectorStoreNode) -- Triggers the upsert operation via vectorstoreApi.upsertVectorStore
• getNodeDetail(node) -- Extracts the display-friendly input parameter details from a canvas node
• onCheckBoxChanged(vectorNodeId) -- Toggles the "Show API" panel and determines if FormData is required

Usage Examples

Basic Usage

import VectorStoreDialog from '@/views/vectorstore/VectorStoreDialog'

<VectorStoreDialog
    show={showVectorDialog}
    dialogProps={{
        title: 'Upsert Vector Store',
        chatflowid: 'abc-123'
    }}
    onCancel={() => setShowVectorDialog(false)}
    onIndexResult={(result) => console.log('Upsert result:', result)}
/>

Related Pages

• Principle:FlowiseAI_Flowise_Vector_Store_Upsert