Conversation List
Browse and select from list of conversations
SaaSChat
Overview
ConversationList displays a scrollable list of chat conversations with participant info, last message preview, unread count badges, and selection highlighting. Supports loading, empty states, and an optional "New Conversation" button.
Usage
import { ConversationList } from "@leanicon/web-builder-library/saas";
<ConversationList
conversations={[
{
id: "conv-1",
title: "Team Chat",
participants: [{ id: "u1", name: "Alex", isOnline: true, role: "member" }],
lastMessage: {
id: "m1",
senderId: "u1",
senderName: "Alex",
content: "See you tomorrow!",
timestamp: new Date(),
readStatus: "read",
},
unreadCount: 0,
status: "active",
createdAt: new Date(),
updatedAt: new Date(),
},
]}
selectedId="conv-1"
onSelect={(conv) => console.log("Selected:", conv.id)}
onCreateNew={() => console.log("New conversation")}
/>;Variants
Default
Messages
Default (Dark)
Messages
Empty
Messages
No conversations yet
Empty (Dark)
Messages
No conversations yet
Loading
Loading (Dark)
Without Create Button
Messages
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
conversations | ChatConversation[] | — | Yes | List of conversations |
selectedId | string | — | No | Currently selected conversation ID |
onSelect | (conversation: ChatConversation) => void | — | Yes | Callback when conversation is selected |
onCreateNew | (() => void) | — | No | Callback to create new conversation |
isLoading | boolean | false | No | Loading state |
emptyMessage | string | No conversations yet | No | Empty state message |
className | string | — | No | Additional CSS class names |