ChatMessage

Role-tinted message row for AI chat. User messages align right in accent; assistant and tool align left; system centers as a muted status line.

Examples

Conversation

Conversation started

Refactor the auth flow to use passkeys?

2:30 PM Sent

Assistant

Happy to. I'll start with the credential registration path and keep the session model untouched.

2:31 PM

read_file

src/auth/passkeys.ts — 214 lines

<ChatMessage role="system">Conversation started</ChatMessage>

<ChatMessage role="user" time="2:30 PM" status="sent">
  {#snippet avatar()}<Avatar src="/avatars/ana.svg" name="Ana" size="sm" />{/snippet}
  Refactor the auth flow to use passkeys?
</ChatMessage>

<ChatMessage role="assistant" name="Assistant" time="2:31 PM">
  {#snippet avatar()}<Avatar src="/avatars/assistant.svg" alt="Assistant" size="sm" />{/snippet}
  Happy to. I'll start with the credential registration path.
</ChatMessage>

<ChatMessage role="tool" name="read_file">
  src/auth/passkeys.ts — 214 lines
</ChatMessage>

Statuses

Deploy it to staging

Sending

Deploy it to production

Failed

<ChatMessage role="user" status="sending">…</ChatMessage>
<ChatMessage role="user" status="error">…</ChatMessage>

Ghost variant

Assistant

Content that brings its own chrome — cards, code blocks.

<ChatMessage role="assistant" variant="ghost" name="Assistant">
  Content that brings its own chrome — cards, code blocks.
</ChatMessage>

Props

Prop	Type	Default	Description
`role`	`'assistant' \| 'user' \| 'tool' \| 'system'`	`—`	Alignment + bubble tint. Default assistant.
`variant`	`'bubble' \| 'ghost'`	`—`	ghost keeps alignment but drops the fill.
`name`	`string`	`—`	Sender name above the bubble.
`time`	`string`	`—`	Timestamp in the metadata row.
`status`	`'sending' \| 'sent' \| 'error'`	`—`	Delivery status in the metadata row.
`avatar`	`Snippet`	`—`	Leading avatar slot — compose <Avatar>.
`meta`	`Snippet`	`—`	Extra metadata (model name, ratings).
`children`	`Snippet`	`—`	Message body.

Install

CLI

npx @a3tai/mittsu add chat-message