Studio
2

Message

Composable parts

The default layout renders the exported Avatar, Body, Metadata, Name, Time, and Status parts. Supply the layout snippet to omit or reorder these regions. Names, timestamps, avatars, and status fall back to Root context; native attributes such as Time's datetime remain available.

<Message.Root name="Assistant" timestamp="12:30">
  {#snippet layout()}
    <Message.Body>
      <Message.Metadata>
        <Message.Time datetime="2026-09-17T12:30:00+02:00" />
        <Message.Name />
      </Message.Metadata>
      <Message.Content>Ready to review.</Message.Content>
    </Message.Body>
  {/snippet}
</Message.Root>

Installation

pnpm dlx @mielui/svelte add message

Usage

Actions form a labeled group of ordinary controls. Tab moves between actions in document order; the group does not impose toolbar arrow-key navigation.

Content adapts its layout to from . Use status for streaming or failed output, and give every icon-only action an accessible label.

import * as Message from '@mielui/svelte/components/message';

<Message.Root from="assistant" status="idle">
  <Message.Content>
    I found three sources that agree on the release date.
  </Message.Content>
  <Message.Actions aria-label="Assistant response actions">
    <!-- Add labeled actions such as copy or rate -->
  </Message.Actions>
</Message.Root>

Content and delivery

Message describes a transcript entry. Its status does not fetch or stream content. Compose Markdown for formatted content or ResponseStream for arriving plain text, and update status when delivery completes or fails. Keep response actions labelled and attach retries to application state.

Examples

Role variants

Streaming and error states

API reference

Message.Root

Provides a conversation message.

Prop Type Default
from MessageFrom | undefined 'assistant'
status MessageStatus | undefined 'idle'
name string | undefined —
timestamp string | undefined —
avatar Snippet<[]> | undefined —
layout Snippet<[]> | undefined —
children Snippet<[]> | undefined —
class (string & (ClassValue | null)) | undefined —

Message.Actions

Groups message actions.

Prop Type Default
class (string & (ClassValue | null)) | undefined —
children Snippet<[]> | undefined —

Message.Avatar

Prop Type Default
class (string & (ClassValue | null)) | undefined —
children Snippet<[]> | undefined —

Message.Body

Prop Type Default
class (string & (ClassValue | null)) | undefined —
children Snippet<[]> | undefined —

Message.Content

Contains message content.

Prop Type Default
class (string & (ClassValue | null)) | undefined —
children Snippet<[]> | undefined —

Message.Metadata

Prop Type Default
class (string & (ClassValue | null)) | undefined —
children Snippet<[]> | undefined —

Message.Name

Prop Type Default
class (string & (ClassValue | null)) | undefined —
children Snippet<[]> | undefined —

Message.Status

Prop Type Default
class (string & (ClassValue | null)) | undefined —
children Snippet<[]> | undefined —

Message.Time

Prop Type Default
class (string & (ClassValue | null)) | undefined —
children Snippet<[]> | undefined —