Chat Window
Complete chat interface with messaging and typing indicators
SaaSChat
Overview
ChatWindow provides a complete real-time chat interface with message list, input field, typing indicators, reactions, and file attachments. It supports minimized state, admin permissions, pagination for older messages, and direct message conversations.
Usage
import { ChatWindow } from "@leanicon/web-builder-library/saas";
<ChatWindow
conversation={{
id: "conv-1",
title: "Team Chat",
participants: [
{ id: "user-1", name: "Alex", isOnline: true, role: "member" },
{ id: "user-2", name: "Maria", isOnline: true, role: "admin" },
],
unreadCount: 0,
status: "active",
createdAt: new Date(),
updatedAt: new Date(),
}}
messages={[
{
id: "1",
senderId: "user-2",
senderName: "Maria",
content: "Hey!",
timestamp: new Date(),
readStatus: "read",
},
{
id: "2",
senderId: "user-1",
senderName: "Alex",
content: "Hi!",
timestamp: new Date(),
readStatus: "delivered",
},
]}
currentUserId="user-1"
onSendMessage={(content) => console.log("Send:", content)}
/>;Variants
Default
M
Q3 Roadmap Sync
Online
Default (Dark)
M
Q3 Roadmap Sync
Online
With Typing Indicator
M
Q3 Roadmap Sync
Online
Maria Garcia is typing
With Typing Indicator (Dark)
M
Q3 Roadmap Sync
Online
Maria Garcia is typing
Minimized
Q3 Roadmap Sync3
Minimized (Dark)
Q3 Roadmap Sync3
Direct Message
M
Maria Garcia
Online
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
conversation | ChatConversation | — | Yes | Current conversation |
messages | ChatMessage[] | — | Yes | Messages to display |
currentUserId | string | — | Yes | Current user ID |
onSendMessage | (content: string, attachments?: File[] | undefined) => void | — | Yes | Callback when message is sent |
onEditMessage | ((messageId: string, newContent: string) => void) | — | No | Callback when message is edited |
onDeleteMessage | ((messageId: string) => void) | — | No | Callback when message is deleted |
onReaction | ((messageId: string, emoji: string) => void) | — | No | Callback when reaction is added/removed |
onOpenThread | ((messageId: string) => void) | — | No | Callback when thread is opened |
onPinMessage | ((messageId: string, isPinned: boolean) => void) | — | No | Callback when message is pinned/unpinned |
onTypingStart | (() => void) | — | No | Callback when typing starts |
onTypingStop | (() => void) | — | No | Callback when typing stops |
typingUsers | TypingUser[] | [] | No | Currently typing users |
onLoadMore | (() => void) | — | No | Callback to load more messages (pagination) |
isLoadingMore | boolean | false | No | Whether more messages are loading |
hasMore | boolean | false | No | Whether there are more messages |
isMinimized | boolean | false | No | Whether chat is in minimized state |
onToggleMinimize | (() => void) | — | No | Callback to toggle minimized state |
permissions | ChatPermissions | — | No | Permission flags |
className | string | — | No | Additional CSS class names |