--- title: "Message" description: "A message in a conversation, with an avatar, a header, a footer, attachments and start or end alignment; groups for consecutive messages, and reasoning, tool calls and typing for AI chat." url: "https://susonwaiba.github.io/htmx-ui/docs/components/message" section: "Components" --- # Message A message in a conversation, with an avatar, a header, a footer, attachments and start or end alignment; groups for consecutive messages, and reasoning, tool calls and typing for AI chat. ```html

Ada09:41

Is the release still on for Friday?

Yes! Docs are done, just waiting on the last review.

Read 09:42

``` ## Markup - `.message` lays out one message: an optional `.message-avatar` (any [avatar](https://susonwaiba.github.io/htmx-ui/docs/components/avatar)) beside a `.message-body`. - The body stacks a `.message-header` (`.message-author`, `.message-time`), the `.message-content` itself, `.message-attachments` and a `.message-footer`. Every part but the content is optional. - Pure CSS. Wrap a conversation in `.message-list` to space it; give it `role="log"` and `aria-live="polite"` when new messages arrive while it's on screen. ## Alignment `data-align="end"` puts a message on the right, for the reader's own: the avatar, header, attachments and footer all move to that side, and the default bubble turns primary. `data-align="start"` (or nothing) is everyone else. ```html

Jane10:02

Lunch at 12:30?

You10:03

Perfect, see you at the usual place.

``` ## Variants On `.message`: the default filled bubble, `.message-secondary`, `.message-outline`, `.message-soft` (tinted primary) and `.message-plain` (no bubble, full width: for assistant replies and long text). ```html

default: the other side.

message-secondary: the reader's side.

message-outline: the other side.

message-soft: the reader's side.

message-plain: no bubble, the full width of the row. Suits assistant replies that run to paragraphs, lists and code.

Put .prose inside for long-form formatting.

``` ## Header and footer The header carries the sender's name and the time; the footer a status and `.message-actions`. Both follow the message's side, and on an `data-align="end"` row the actions stay at the end. `.message-actions-hover` shows them only on hover or focus (always on touch screens). ```html

Ada LovelaceAdminYesterday

I've pushed the fix for the flaky test.

Edited

Thanks, merging now.

Delivered

``` ## Group `.message-group` stacks consecutive messages from one sender close together: the avatar and header show on the first only (the avatar keeps its space), and the bubbles tuck together on the sender's side. ```html

Jane14:10

Heads up: the staging deploy is red.

Looks like a missing env var.

I'll add it to the config.

Good catch.

Ping me when it's green.

``` ## Attachments `.message-attachments` holds [attachments](https://susonwaiba.github.io/htmx-ui/docs/components/attachment) and lines them up on the message's side. A lone picture can be a `.message-image`. ```html

Here's the report and the chart for the slides.

``` ## AI chat For assistants, `.message-tool` is a tool call with its input and output, its state in `data-state` (`running`, `done`, `error`). The rest comes from other components, placed in `.message-body`: [Reasoning](https://susonwaiba.github.io/htmx-ui/docs/components/reasoning) for the model's thinking (open while it streams, then folded away with how long it took), a [typing loader](https://susonwaiba.github.io/htmx-ui/docs/components/loader) (`loader("typing")`) for a reply on its way, and [Chain of thought](https://susonwaiba.github.io/htmx-ui/docs/components/chain-of-thought) for steps, searches and tool calls on a line. Stream them in with htmx, swapping or appending to the conversation. ```html

What's the weather in Sydney tomorrow?

Thought for 3 seconds

The user wants tomorrow's forecast for Sydney, Australia.
Call the weather tool with the city and date.

get_weather Done

Input

{"city": "Sydney", "date": "tomorrow"}

Output

{"high": 24, "low": 17, "sky": "partly cloudy"}

Tomorrow in Sydney: partly cloudy, a high of 24°C and a low of 17°C.

And the weekend?

Thinking…

Looking up Saturday and Sunday.

get_weather Running

Input

{"city": "Sydney", "date": "weekend"}

``` ## Reference | Class | Description | | --- | --- | | `.message` | One message: avatar and body, start-aligned. | | `[data-align="end"]` | The reader's own message, on the right; everything follows. | | `.message-avatar` | On an .avatar beside the body. | | `.message-body` | Header, content, attachments and footer, stacked. | | `.message-header / .message-author / .message-time` | Name and time above the message. | | `.message-content` | The message: a bubble (default) or plain text. | | `.message-secondary / -outline / -soft / -plain` | Variants, on .message. | | `.message-attachments / .message-image` | Attachments, or a single picture. | | `.message-footer / .message-status` | Status line under the message. | | `.message-actions / .message-actions-hover` | Small icon buttons; the second shows on hover or focus. | | `.message-group` | Consecutive messages from one sender. | | `.message-list` | A conversation's spacing. | | `.message-tool (-header, -status, -content, -label)` | On a

: a tool call; data-state running \| done \| error. |