Implementation:FlowiseAI Flowise AssistantDialog

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

Overview

AssistantDialog is a React dialog component rendered via a portal that provides a comprehensive form for creating and editing OpenAI Assistants, including model selection, instruction editing, tool configuration (code interpreter and file search), file uploads, vector store management, and credential binding.

Description

This component renders a full-featured assistant configuration dialog using Material-UI's Dialog inside a React portal. It supports both creation and editing modes, loading existing assistant data from the API when editing. The form includes fields for assistant name, description, model selection from a predefined list of OpenAI models (GPT-4.1 through GPT-3.5), system instructions, temperature and top_p parameters, tool toggles for code_interpreter and file_search, file upload sections for code interpreter files and vector store files, and vector store dialog management. The component synchronizes local state with the OpenAI assistant object via getAssistantObjApi and manages dialog lifecycle through Redux dispatching of SHOW_CANVAS_DIALOG and HIDE_CANVAS_DIALOG.

Usage

Use this component on the OpenAI Assistants management page to create new assistants or edit existing ones. It is triggered from the assistant list view and communicates results back via onConfirm and onCancel callbacks.

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/views/assistants/openai/AssistantDialog.jsx
• Lines: 1-1117

Signature

const AssistantDialog = ({ show, dialogProps, onCancel, onConfirm, setError }) => { ... }

AssistantDialog.propTypes = {
    show: PropTypes.bool,
    dialogProps: PropTypes.object,
    onCancel: PropTypes.func,
    onConfirm: PropTypes.func
}

export default AssistantDialog

Import

import AssistantDialog from '@/views/assistants/openai/AssistantDialog'

I/O Contract

Inputs

Name	Type	Required	Description
show	bool	Yes	Controls visibility of the dialog; triggers SHOW_CANVAS_DIALOG/HIDE_CANVAS_DIALOG Redux actions
dialogProps	object	Yes	Contains type ("ADD" or "EDIT"), title, cancelButtonName, confirmButtonName, and optional assistant id for editing
onCancel	func	Yes	Callback invoked when the dialog is dismissed without saving
onConfirm	func	Yes	Callback invoked with the saved assistant data on successful creation/update
setError	func	No	Error handler callback passed to sub-components like AssistantVectorStoreDialog

Outputs

Name	Type	Description
Rendered UI	React Portal	A Material-UI Dialog rendered into the #portal DOM element containing the full assistant configuration form

Key Internal State

• assistantId / openAIAssistantId -- Internal DB ID and OpenAI API assistant ID
• assistantName / assistantDesc / assistantIcon -- Basic assistant metadata (icon defaults to a random dicebear avatar)
• assistantModel -- Selected model from assistantAvailableModels list
• assistantCredential -- OpenAI API credential ID bound to this assistant
• assistantInstructions -- System instructions text
• assistantTools -- Array of enabled tool types (defaults to ['code_interpreter', 'file_search'])
• toolResources -- Object containing tool-specific resources like vector store IDs and file references
• temperature / topP -- Model parameter settings (both default to 1)
• uploadCodeInterpreterFiles / uploadVectorStoreFiles -- File upload state for the two file attachment sections
• deleteDialogOpen / deleteDialogProps -- State for the delete confirmation sub-dialog
• assistantVectorStoreDialogOpen / assistantVectorStoreDialogProps -- State for the vector store management sub-dialog

Available Models

The assistantAvailableModels constant defines the selectable OpenAI models:

const assistantAvailableModels = [
    { label: 'gpt-4.1', name: 'gpt-4.1' },
    { label: 'gpt-4.1-mini', name: 'gpt-4.1-mini' },
    { label: 'gpt-4.1-nano', name: 'gpt-4.1-nano' },
    { label: 'gpt-4.5-preview', name: 'gpt-4.5-preview' },
    { label: 'gpt-4o-mini', name: 'gpt-4o-mini' },
    { label: 'gpt-4o', name: 'gpt-4o' },
    { label: 'gpt-4-turbo', name: 'gpt-4-turbo' },
    // ... additional GPT-4 and GPT-3.5 variants
]

Usage Examples

Basic Usage

import AssistantDialog from '@/views/assistants/openai/AssistantDialog'

const [showDialog, setShowDialog] = useState(false)
const [dialogProps, setDialogProps] = useState({})

// Open for editing
setDialogProps({
    type: 'EDIT',
    title: 'Edit Assistant',
    cancelButtonName: 'Cancel',
    confirmButtonName: 'Save',
    id: assistantId
})
setShowDialog(true)

<AssistantDialog
    show={showDialog}
    dialogProps={dialogProps}
    onCancel={() => setShowDialog(false)}
    onConfirm={(data) => {
        refreshAssistantList()
        setShowDialog(false)
    }}
    setError={setError}
/>

Related Pages

• Principle:FlowiseAI_Flowise_Assistant_Configuration