Chat Conversation List — cinder playground

Overview

Conversation navigation list for switching among Chat transcripts without embedding the list inside Chat.

Usage

<script lang="ts">
  import ChatConversationList from '@lostgradient/chat/conversation-list';
</script>

<ChatConversationList
  conversations={conversationSummaries}
  activeConversationId={activeConversation.id}
  onSelectConversation={selectConversation}
/>

Live preview

When to use

Use when

Rendering a multi-conversation chat sidebar beside one active Chat transcript.
Showing unread counts and last-message previews for compatible conversation snapshots.

Avoid when

Rendering the message transcript itself — use chat for the active conversation surface.
Building app-wide primary navigation — use side-navigation or navigation-bar.

Examples

Basic conversation list

Conversation summaries with an active conversation and unread count.

Props

Props for chat-conversation-list
Name	Type	Default	Description
`conversations` required	`ConversationSummary[]`		Conversation summaries to render. Sorts by latest message/update time descending.
`activeConversationId`	`text`	`null`	Currently active conversation id.
`ariaLabel`	`text`	`'Conversations'`	Accessible name for the conversations navigation landmark. Default `"Conversations"`.
`emptyText`	`text`	`'No conversations'`	Empty state text when no conversations are present. Default `"No conversations"`.
`onSelectConversation`	`(conversationId: string) => void`		Called when a conversation is selected.