Implementation:FlowiseAI Flowise ViewMessagesDialog
| Knowledge Sources | |
|---|---|
| Domains | UI Components, Chat History |
| Last Updated | 2026-02-12 07:00 GMT |
Overview
ViewMessagesDialog is a comprehensive dialog component for viewing, filtering, exporting, and managing chat message history for a given chatflow.
Description
This large React component (1614 lines) provides a full-featured chat message viewer with pagination, date range filtering, chat type filtering (INTERNAL/EXTERNAL), feedback type filtering, and lead email search. It displays chat logs in a split-pane layout with a conversation list on the left and message details on the right, rendering both user and AI messages with support for markdown, source documents, tool usage, file attachments, and multi-agent conversations. The component also includes functionality for exporting messages and deleting chat history with optional hard-delete from third-party memory nodes.
Usage
Use this component when displaying the full message history for a chatflow. It is typically opened from the chatflow management interface to allow administrators to review conversations, analyze feedback, and manage stored messages.
Code Reference
Source Location
- Repository: FlowiseAI Flowise
- File: packages/ui/src/ui-component/dialog/ViewMessagesDialog.jsx
- Lines: 1-1614
Signature
const ViewMessagesDialog = ({ show, dialogProps, onCancel }) => {
// Full chat message viewer with filtering, pagination, export, and delete
// Renders via createPortal to the portal element
}
Import
import ViewMessagesDialog from '@/ui-component/dialog/ViewMessagesDialog'
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| show | bool | Yes | Controls whether the dialog is visible |
| dialogProps | object | Yes | Contains chatflow data (dialogProps.chatflow with id and type) |
| onCancel | func | Yes | Callback invoked when the dialog should close |
Outputs
| Name | Type | Description |
|---|---|---|
| Rendered Dialog | React Portal | A fullWidth MUI Dialog rendered via createPortal to the portal element |
Internal Components
ConfirmDeleteMessageDialog
An inner dialog component used for confirming message deletion, with an optional checkbox for hard-deleting messages from third-party Memory Node integrations.
const ConfirmDeleteMessageDialog = ({ show, dialogProps, onCancel, onConfirm }) => {
// dialogProps: { title, description, cancelButtonName, confirmButtonName, isChatflow }
// onConfirm receives a boolean indicating hard delete preference
}
DatePickerCustomInput
A custom input component for the react-datepicker library, rendered as a styled ListItemButton.
StyledMenu
A styled MUI Menu component for the export/actions dropdown with custom shadow and spacing.
Internal State
| State Variable | Type | Description |
|---|---|---|
| chatlogs | array | Aggregated chat conversation logs |
| chatMessages | array | Individual messages for the selected conversation |
| stats | object | Feedback statistics for the chatflow |
| selectedMessageIndex | number | Index of the currently selected conversation |
| selectedChatId | string | Chat ID of the selected conversation |
| chatTypeFilter | array | Active chat type filters (default: ['INTERNAL', 'EXTERNAL']) |
| feedbackTypeFilter | array | Active feedback type filters |
| startDate | Date | Start date for the date range filter |
| endDate | Date | End date for the date range filter |
| leadEmail | string | Email filter for lead-associated messages |
| currentPage | number | Current pagination page |
| pageLimit | number | Number of items per page (default: 10) |
| total | number | Total number of chat logs |
Key Dependencies
- chatmessageApi - getAllChatmessageFromChatflow, getChatmessageFromPK
- feedbackApi - getStatsFromChatflow
- exportImportApi - for exporting chat data
- MemoizedReactMarkdown - for rendering AI message content
- SourceDocDialog - for viewing source documents
- MultiDropdown - for multi-select filter dropdowns
- react-datepicker - for date range selection
- moment - for date formatting
Usage Examples
Basic Usage
import ViewMessagesDialog from '@/ui-component/dialog/ViewMessagesDialog'
const ChatflowManager = ({ chatflow }) => {
const [showMessages, setShowMessages] = useState(false)
return (
<>
<Button onClick={() => setShowMessages(true)}>View Messages</Button>
<ViewMessagesDialog
show={showMessages}
dialogProps={{ chatflow }}
onCancel={() => setShowMessages(false)}
/>
</>
)
}