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	Required	Description
`conversations`	`readonly ConversationSummary[]`		req	Conversation summaries to render. Sorts by latest message/update time descending.
`activeConversationId`	`string \| null`	`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.