Message Since v4.1.0

A chat turn with content, a bubble and actions.

Usage

The directives are standalone. Content and actions require the root.

import {
  BuiMessage,
  BuiMessageActions,
  BuiMessageBubble,
  BuiMessageContent,
} from '@/bui/ui/message';

<div buiMessage align="end">
  <div buiMessageContent>
    <div buiMessageBubble>...</div>
    <div buiMessageActions>...</div>
  </div>
</div>

Assistant turns align to the start and fill the width, user turns align to the end with their text in a bubble. System notices are Trace lines placed between turns. Hover a turn to reveal its actions.

Has this client paid late before?

25 minutes ago

Rarely. Over the last three years they paid 31 of 34 invoices on time, and the three late ones all cleared within a week of a single reminder. This looks like a delay in their payment run rather than a dispute.

24 minutes ago

Switched to Claude Sonnet 5.5

Draft a short reminder I can send to their billing contact.

Just now

<div class="flex flex-col gap-y-6 text-lg">
  <div buiMessage align="end">
    <div buiMessageContent>
      <div buiMessageBubble>
        <p>Has this client paid late before?</p>
      </div>
      <div buiMessageActions>
        <span class="text-sm text-neutral-a11" matTooltip="Oct 30, 2026, 9:42:00 AM">25 minutes ago</span>
        <mat-divider vertical class="ms-2 me-1 h-3" />
        <button matIconButton class="tiny" aria-label="Copy" matTooltip="Copy">
          <mat-icon svgIcon="copy" />
        </button>
        <button matIconButton class="tiny" aria-label="Edit" matTooltip="Edit">
          <mat-icon svgIcon="pencil" />
        </button>
        <button matIconButton class="tiny" aria-label="Rewind to here" matTooltip="Rewind to here">
          <mat-icon svgIcon="rewind" />
        </button>
        <button matIconButton class="tiny" aria-label="Fork from here" matTooltip="Fork from here">
          <mat-icon svgIcon="git-fork" />
        </button>
      </div>
    </div>
  </div>

  <div buiMessage>
    <div buiMessageContent>
      <p>Rarely. Over the last three years they paid 31 of 34 invoices on time.</p>
      <div buiMessageActions>
        <span class="text-sm text-neutral-a11" matTooltip="Oct 30, 2026, 9:43:00 AM">24 minutes ago</span>
        <mat-divider vertical class="ms-2 me-1 h-3" />
        <button matIconButton class="tiny" aria-label="Copy" matTooltip="Copy">
          <mat-icon svgIcon="copy" />
        </button>
        <button matIconButton class="tiny" aria-label="Fork from here" matTooltip="Fork from here">
          <mat-icon svgIcon="git-fork" />
        </button>
        <button matIconButton class="tiny" aria-label="Good response" matTooltip="Good response">
          <mat-icon svgIcon="thumbs-up" />
        </button>
        <button matIconButton class="tiny" aria-label="Bad response" matTooltip="Bad response">
          <mat-icon svgIcon="thumbs-down" />
        </button>
      </div>
    </div>
  </div>

  <span buiTraceLine>
    <mat-icon buiTraceIcon svgIcon="info" />
    <span buiTraceTitle>Switched to Claude Sonnet 5.5</span>
  </span>

  <div buiMessage align="end">
    <div buiMessageContent>
      <div buiMessageBubble>
        <p>Draft a short reminder I can send to their billing contact.</p>
      </div>
      <div buiMessageActions>
        <span class="text-sm text-neutral-a11" matTooltip="Oct 30, 2026, 10:07:00 AM">Just now</span>
        <mat-divider vertical class="ms-2 me-1 h-3" />
        <button matIconButton class="tiny" aria-label="Copy" matTooltip="Copy">
          <mat-icon svgIcon="copy" />
        </button>
        <button matIconButton class="tiny" aria-label="Edit" matTooltip="Edit">
          <mat-icon svgIcon="pencil" />
        </button>
        <button matIconButton class="tiny" aria-label="Rewind to here" matTooltip="Rewind to here">
          <mat-icon svgIcon="rewind" />
        </button>
        <button matIconButton class="tiny" aria-label="Fork from here" matTooltip="Fork from here">
          <mat-icon svgIcon="git-fork" />
        </button>
      </div>
    </div>
  </div>
</div>

Content

Content stacks its children, so a turn can hold a Thinking panel, a Trace, streamed text and actions in order. Text size comes from the thread; set it once on the container and every turn inherits it.

API Reference

buiMessage

Root. Aligns the turn to the start or the end.

Input	Type	Default	Description
`align`	`'start' \| 'end'`	`'start'`	The side the turn is aligned to.