Implementation:FlowiseAI Flowise SamplePromptDialog

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

Overview

SamplePromptDialog is a React dialog component that allows users to browse and select from predefined evaluation prompts, preview their output schema and prompt text, and confirm a selection.

Description

This component renders a Material UI Dialog through a React portal. It presents a dropdown of available evaluation prompts sourced from the evaluationPrompts constant. When a prompt is selected, the dialog displays the associated output schema in a read-only Grid and the prompt text in an editable OutlinedInput. The dialog includes cancel and confirm actions, with the confirm button disabled until a valid prompt is selected. On confirmation, the full selected prompt object is passed to the onConfirm callback.

Usage

Use this component when configuring LLM-based evaluators to let users pick from pre-built sample evaluation prompts rather than writing them from scratch. It is typically opened from the evaluator configuration interface.

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/views/evaluators/SamplePromptDialog.jsx
• Lines: 1-173

Signature

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

Import

import SamplePromptDialog from '@/views/evaluators/SamplePromptDialog'

I/O Contract

Inputs

Name	Type	Required	Description
show	bool	Yes	Controls whether the dialog is visible
dialogProps	object	Yes	Contains cancelButtonName used for the cancel button label
onCancel	func	Yes	Callback invoked when the cancel button is clicked
onConfirm	func	Yes	Callback invoked with the selected prompt object containing name, json (schema config), and prompt fields

Outputs

Name	Type	Description
React Portal	JSX.Element	Renders the dialog via createPortal to the element with id "portal"

Usage Examples

Basic Usage

<SamplePromptDialog
    show={showSamplePrompts}
    dialogProps={{
        cancelButtonName: 'Cancel'
    }}
    onCancel={() => setShowSamplePrompts(false)}
    onConfirm={(selectedPrompt) => {
        // selectedPrompt contains { name, json, prompt }
        setEvaluatorPrompt(selectedPrompt.prompt)
        setOutputSchema(selectedPrompt.json)
        setShowSamplePrompts(false)
    }}
/>

Related Pages

• Principle:FlowiseAI_Flowise_Evaluator_Definition