Message

Overview

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

Usage

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

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

Live preview

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.

Examples

Message roles

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

Props

Props for message
Name	Type	Required	Description
`role`	`'user' \| 'assistant' \| 'system'`	req	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`	`snippet`	req	Message body content.