Implementation:FlowiseAI Flowise CustomAssistantConfigurePreview
| Knowledge Sources | |
|---|---|
| Domains | Views, Custom Assistants, Configuration, Chat Preview |
| Last Updated | 2026-02-12 07:00 GMT |
Overview
CustomAssistantConfigurePreview is a comprehensive view component that provides a two-panel interface for configuring a custom assistant (selecting chat model, tools, document stores, and system instructions) alongside a live chat preview pane powered by the Flowise embed widget.
Description
This view loads an existing custom assistant by ID from the URL params and presents a full configuration form on the left side with sections for chat model selection and parameter editing, system instruction textarea with prompt generator and expand dialog support, document store multi-selection, and tool multi-selection with per-tool parameter configuration. The right side renders a MemoizedFullPageChat component from flowise-embed-react for live testing. The component manages the translation between the UI configuration state and the underlying chatflow representation using the toolAgentFlow template. It supports saving, deleting, viewing API code, viewing messages, viewing leads, and chatflow configuration through multiple dialog components.
Usage
Use this component as the route handler for the custom assistant configuration page, accessible via /assistants/custom/:id. It is the primary interface for creating and editing custom assistant configurations.
Code Reference
Source Location
- Repository: FlowiseAI Flowise
- File: packages/ui/src/views/assistants/custom/CustomAssistantConfigurePreview.jsx
- Lines: 1-1437
Signature
const CustomAssistantConfigurePreview = () => { ... }
export default CustomAssistantConfigurePreview
Import
import CustomAssistantConfigurePreview from '@/views/assistants/custom/CustomAssistantConfigurePreview'
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| (none -- route params) | -- | -- | Uses useParams().id to load the custom assistant by ID; reads Redux state for canvas and customization settings
|
Outputs
| Name | Type | Description |
|---|---|---|
| Rendered UI | JSX.Element | Two-panel layout with assistant configuration form (left) and live chat preview (right), plus multiple dialog overlays |
Key Internal State
- chatModelsComponents / chatModelsOptions / selectedChatModel -- Chat model node definitions, dropdown options, and the currently selected and configured chat model node data
- customAssistantInstruction -- System instruction text for the assistant (default: "You are helpful assistant")
- documentStoreOptions / selectedDocumentStores -- Available and selected document stores for retrieval
- toolComponents / toolOptions / selectedTools -- Tool node definitions, dropdown options, and configured tool instances with per-tool input params
- selectedCustomAssistant / customAssistantFlowId -- The loaded assistant entity and its associated chatflow ID
- apiDialogOpen / viewMessagesDialogOpen / viewLeadsDialogOpen / chatflowConfigurationDialogOpen -- Dialog visibility states for various sub-features
- assistantPromptGeneratorDialogOpen / showExpandDialog -- States for AI prompt generation and text expansion dialogs
Key Internal Functions
- handleChatModelDataChange({ inputParam, newValue }) -- Updates selected chat model inputs and recalculates visibility rules via
showHideInputParams. - handleToolDataChange(toolIndex)({ inputParam, newValue }) -- Curried handler that updates a specific tool's inputs by index.
- checkInputParamsMandatory() -- Validates that all required input parameters for the chat model and all tools have values before saving.
- displayWarning() -- Shows a snackbar warning when mandatory fields are not filled.
Sub-Components Used
- MemoizedFullPageChat -- Memoized wrapper around
FullPageChatfromflowise-embed-reactthat only re-renders when the chatflow prop changes. - DocStoreInputHandler -- Handles document store parameter inputs.
- NodeInputHandler -- Renders individual node input parameters (inherited via tool/model configuration).
- APICodeDialog, ViewMessagesDialog, ViewLeadsDialog, ChatflowConfigurationDialog, PromptGeneratorDialog, ExpandTextDialog, ConfirmDialog -- Various dialog components for extended functionality.
Usage Examples
Basic Usage
// In router configuration
import CustomAssistantConfigurePreview from '@/views/assistants/custom/CustomAssistantConfigurePreview'
<Route path="/assistants/custom/:id" element={<CustomAssistantConfigurePreview />} />