Message

User messages sit right-aligned in a tinted bubble, assistant text runs full width, and system notes are centered and muted. Name, timestamp, and avatar are optional.

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

Keep monitoring until the 30-minute mark.

<script lang="ts">
    import * as Message from '@sivir-ui/svelte/components/message';
</script>

<div class="w-full max-w-2xl space-y-7">
    <Message.Root from="assistant">
        <Message.Content>
            The deployment is healthy. Error rate and p95 latency are both below the rollback
            threshold.
        </Message.Content>
    </Message.Root>

    <Message.Root from="user">
        <Message.Content>Keep monitoring until the 30-minute mark.</Message.Content>
    </Message.Root>
</div>

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add message

Usage

from defaults to "assistant". status="streaming" marks the message busy, and status="error" adds a Failed label above the content. On devices with a mouse, Actions stays hidden until the message is hovered or focused. Give icon-only actions an aria-label.

import * as Message from '@sivir-ui/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>

Anatomy

Message.Root - Aligns and styles one message by sender.

Message.Content - Holds the message text, as a bubble for the user.

Message.Actions - Holds buttons such as copy, shown on hover.