Implementation:FlowiseAI Flowise ChatPopUp
| Knowledge Sources | |
|---|---|
| Domains | Chat Interface, Canvas |
| Last Updated | 2026-02-12 07:00 GMT |
Overview
ChatPopUp is a memoized React component that renders a floating action button (FAB) on the canvas that toggles a popper-based inline chat panel, with additional buttons for clearing chat history and expanding the chat into a full-screen dialog.
Description
This component places a StyledFab button (showing a message or close icon) in the top-right corner of the canvas. When toggled open, it reveals two additional FABs for clearing history (with confirmation dialog) and expanding to a ChatExpandDialog. The chat itself is rendered inside a Material UI Popper with a ClickAwayListener that wraps a ChatMessage component. Chat history clearing calls chatmessageApi.deleteChatmessage and removes local storage entries via removeLocalStorageChatHistory. The component also clears agentflow node status via flowContext.clearAgentflowNodeStatus and uses Redux for snackbar notifications. The onOpenChange callback notifies the parent of open/close state changes.
Usage
Use this component as an overlay on the canvas view to provide an inline chat testing interface. It is rendered inside the canvas layout and provides the primary way for users to interact with and test their chatflows or agentflows without leaving the editor.
Code Reference
Source Location
- Repository: FlowiseAI Flowise
- File: packages/ui/src/views/chatmessage/ChatPopUp.jsx
- Lines: 1-244
Signature
const ChatPopUp = ({ chatflowid, isAgentCanvas, onOpenChange }) => { ... }
export default memo(ChatPopUp)
Import
import ChatPopUp from '@/views/chatmessage/ChatPopUp'
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| chatflowid | string | No | The ID of the chatflow to interact with |
| isAgentCanvas | boolean | No | Whether the canvas is an agent canvas (passed to ChatMessage and ChatExpandDialog) |
| onOpenChange | function | No | Callback invoked with true or false when the popup opens or closes
|
Outputs
| Name | Type | Description |
|---|---|---|
| Rendered JSX | React Element | A set of FAB buttons, a Popper containing ChatMessage, and a ChatExpandDialog |
| Side effects | void | Deletes chat messages via API, removes localStorage entries, dispatches snackbar notifications, clears agentflow node status |
Usage Examples
Basic Usage
import ChatPopUp from '@/views/chatmessage/ChatPopUp'
<ChatPopUp
chatflowid="abc-123"
isAgentCanvas={false}
onOpenChange={(isOpen) => console.log('Chat is', isOpen ? 'open' : 'closed')}
/>