Data Display

Message

Chat-style bubble that renders a role label, optional timestamp, and arbitrary body content for transcript or run-stream views.

import { Message } from '@lostgradient/cinder/message';
chatmessageconversation
01

Overview

Chat-style bubble that renders a role label, optional timestamp, and arbitrary body content for transcript or run-stream views.

See the editor/chat/Cinder surface boundary. This is the domain-neutral Cinder message surface; use Chat's ChatMessage when conversation, streaming, or tool-call state is required.

Usage

svelte 
<script lang="ts">
  import Message from '@lostgradient/cinder/message';
</script>

<Message role="assistant" timestamp="10:00">How can I help?</Message>
Live preview
02

When to use

Use when
  • Composing a transcript of user, assistant, and system turns outside the full chat suite.
  • Rendering AI agent runs, support threads, or audit logs where each entry has a speaker and a body.
Avoid when
  • Building a complete conversation surface with composer and scroll affordances — reach for the chat suite instead.
  • Communicating a single non-conversational notice — callout is more appropriate.
03

Examples

Message roles

User, assistant, and system role variants with a timestamp.

04

Props

Props for message
NameTypeDefaultDescription
role required 'user' | 'assistant' | 'system' Role of the speaker — drives visual treatment.
datetime text The machine-readable date/time value placed on the <time datetime> attribute.
timestamp text Human-readable display text rendered inside the <time> element. Falls back to datetime when omitted.
name text Optional speaker name override (defaults derived from role).
children required snippet Message body content.