Conversations
Sidebar conversation list with presence indicators, unread badges, and search. Conversations power the left panel of a full messenger layout.
Basic Usage
Pass an array of SidebarConversation objects to FullMessenger to render the conversation list with a built-in sidebar. Each conversation shows a title, last message preview, timestamp, and optional avatar.
Active State
Set activeConversationId to highlight the currently selected conversation. The active item receives an accent background to visually distinguish it from the rest of the list.
Click a row to change the active state:
Unread Badge
The unreadCount prop displays a small badge on the conversation row. Set it to 0 or omit it to hide the badge.
Presence Dot
The presence prop adds a small colored dot to the conversation avatar indicating the other participant's online status.
FullMessenger Layout
For a complete messenger experience, use the FullMessenger component which combines the sidebar, message list, and composer into a single layout.