Chat Conversation Header — cinder playground

Overview

Header primitive for the active Chat conversation, composed as a sibling above Chat rather than inside it.

Usage

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

<ChatConversationHeader conversation={activeConversation} />

Live preview

When to use

Use when

Showing the active conversation title, participants, status, and export controls above a Chat transcript.
Building a multi-conversation chat layout where the list, header, and Chat surface are composed as siblings.

Avoid when

Rendering the conversation switcher — use chat-conversation-list.
Rendering the transcript body and composer — use chat.

Examples

Basic conversation header

A header derived from the active compatible conversation snapshot.

Props

Props for chat-conversation-header
Name	Type	Default	Required	Description
`conversation`	`ConversationHistory`		req	Active compatible conversation snapshot.
`headingLevel`	`2 \| 3 \| 4`	`2`		Heading level for the conversation title. Default `2`.
`showExportActions`	`boolean`	`true`		Whether to render the built-in conversation export actions. Default `true`.
`actions`	`snippet`			Additional action controls rendered after the built-in export actions.