Message

One turn in a thread: the row that seats an avatar beside a column of header, Bubble, and footer, on the author’s side. It owns the row layout and nothing else — the surface is the bubble’s, the scrolling and the composer are Chat’s.

Import

import { Message } from "@photon-ai/pho-ui/components/message";

Anatomy

Root takes align. Avatar seats an Avatar.Root, bottom-aligned with the bubble. Content places a Header (who) over the bubble, Time beside it, and a Footer (status) under it. Inbound is the time on the right of the bubble. Outbound is the time on the left, with Delivered or Failed under the bubble. align="end" mirrors the row for your own messages.

<Message.Root>
  <Message.Avatar>
    <Avatar.Root size="sm">…</Avatar.Root>
  </Message.Avatar>
  <Message.Content>
    <Message.Header>+1 (725) 699-0248</Message.Header>
    <Bubble.Root>
      <Bubble.Content>Who's on call this weekend?</Bubble.Content>
    </Bubble.Root>
    <Message.Time>9:12 AM</Message.Time>
  </Message.Content>
</Message.Root>

Header

The sender over the bubble, in secondary ink — for a group, where the avatar alone does not say who. One-to-one threads leave it off.

Footer

Time sits beside the bubble, last-line aligned, in description ink. It stays in the slot and shows when the row is hovered or focused. Outbound Footer is the status under the bubble (Delivered, Failed). Inbound is the time alone. A failure keeps the same line and takes the error ink.

Ghost

With a ghost bubble the header and footer lose their inset, so prose from an assistant lines up with its name.

Props

Message.Root

• align — start | end — default start; end reverses the row and right-aligns the column
• …plus any <div> attribute

Message.Group, Message.Avatar, Message.Content, Message.Header, Message.Time, Message.Footer take <div> attributes.

Best practices

• One Message per turn. Several bubbles in one turn go in a Bubble.Group inside the same Content.
• Time is the clock beside the bubble. Outbound Footer is the status under it: Delivered. Relative times are the page’s to format.
• Leave the avatar off your own messages; the side says who.