Message

Present user, assistant, and system output without adding identity chrome to every turn.

Mielui 14:02

The deployment is healthy. Error rate and p95 latency are both below the rollback threshold.

Installation

pnpm dlx @mielui/svelte add message

Usage

from sets who sent the message, assistant by default, and with it the alignment: user messages sit on the right and system messages are centered. name, timestamp, and an avatar snippet add a header and an avatar beside the message.

status marks a message as streaming or error. It does not fetch or stream anything: compose Markdown for formatted text or ResponseStream for arriving plain text, and update status when delivery ends or fails. An error shows a Failed status in the header.

Actions is a labelled group of ordinary controls. Tab moves through them in order; there is no toolbar arrow-key navigation. On devices with a fine pointer it fades in on hover or focus. Give every icon-only action an accessible label.

<script lang="ts">
    import { CopyButton } from '@mielui/svelte/components/copy-button';
    import * as Message from '@mielui/svelte/components/message';

    const text = 'I found three sources that agree on the release date.';
</script>

<Message.Root from="assistant" name="Assistant" timestamp="12:30">
    <Message.Content>{text}</Message.Content>
    <Message.Actions>
        <CopyButton {text} labels={{ copy: 'Copy message' }} />
    </Message.Actions>
</Message.Root>

Examples

Assistant reply

A user prompt followed by an assistant reply with reasoning, Markdown, and actions.

Summarize what changed in our billing API and flag the migration work.

Compared the event model, identifier changes, and compatibility window.

Billing API v2

The release separates invoice adjustments from payment collection and replaces account_id with customer_id.

Update webhook handlers for invoice.adjusted.
Backfill customer_id before switching reads.
Keep v1 retries active during the seven-day overlap.

Main migration risk: consumers that infer payment state from invoice updates.

Roles

The deployment is healthy. Error rate and p95 latency are both below the rollback threshold.

Keep monitoring until the 30-minute mark.

Context compacted after 18 messages. Deployment events and decisions were preserved.

Streaming and error

Failed

The warehouse connection closed before the query completed. Retry when the connection is available.

Parts

Root renders Avatar, Body, Metadata, Name, Time, and Status for you. Pass a layout snippet to omit or reorder them; the parts read the name, timestamp, avatar, and status from Root. Every part accepts class and native attributes, such as datetime on Time.

<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>

Labels

Pass labels to Root to translate the Status text and the accessible name of Actions. Every key of MessageLabels is optional; omitted keys keep the English text.

<script lang="ts">
    import * as Message from '@mielui/svelte/components/message';
    import type { MessageLabels } from '@mielui/svelte/components/message';

    const labels: MessageLabels = {
        failed: 'Échec',
        streaming: 'En cours',
        complete: 'Terminé',
        actions: 'Actions du message'
    };
</script>

<Message.Root from="assistant" status="error" {labels}>
    <Message.Content>La connexion a été interrompue.</Message.Content>
</Message.Root>

API reference

Message.Root

Provides a conversation message.

labels

MessageLabels
Overrides the built-in text and accessible names. Every key is optional and English is the fallback.
from

MessageFrom
Who sent the message. It sets the alignment and style.

Default 'assistant'
status

MessageStatus
Current state of the message, such as streaming or failed.

Default 'idle'
name

string
Sender name.
timestamp

string
Time shown with the message.
avatar

Snippet<[]>
Avatar shown beside the message.
layout

Snippet<[]>
Replaces the default arrangement of avatar, header, and content.
children

Snippet<[]>
Content rendered inside.
class

(string & (ClassValue | null))
Classes added to the element.

Message.Actions

Groups message actions.

class

(string & (ClassValue | null))
Classes added to the element.
children

Snippet<[]>
Content rendered inside.

Message.Avatar

class

(string & (ClassValue | null))
Classes added to the element.
children

Snippet<[]>
Content rendered inside.

Message.Body

class

(string & (ClassValue | null))
Classes added to the element.
children

Snippet<[]>
Content rendered inside.

Message.Content

Contains message content.

class

(string & (ClassValue | null))
Classes added to the element.
children

Snippet<[]>
Content rendered inside.

Message.Metadata

class

(string & (ClassValue | null))
Classes added to the element.
children

Snippet<[]>
Content rendered inside.

Message.Name

class

(string & (ClassValue | null))
Classes added to the element.
children

Snippet<[]>
Content rendered inside.

Message.Status

class

(string & (ClassValue | null))
Classes added to the element.
children

Snippet<[]>
Content rendered inside.

Message.Time

class

(string & (ClassValue | null))
Classes added to the element.
children

Snippet<[]>
Content rendered inside.