MessageRow

The conversation message row (composition row): the row-layout owner — avatar slot, direction, header/footer arrangement, and delivery status; the visible surface is provided by oas-bubble inside the default slot. Message actions (copy/retry etc.) live in the footer slot; the component owns no specific actions.

Basic Usage

Two-way conversation (avatar + header + bubble + footer)

SSupport · 10:01Hello! How can I help you today?QuoteForwardMMe · 10:02I'd like to understand the slot structure.

Example

Four slots: avatar, header (sender/time), default (place oas-bubble), footer (actions/extra metadata); empty slots collapse automatically. The avatar bottom-aligns (long messages hug the bottom — the common IM detail).

Direction & logical properties (align)

align=start / end (mirrored automatically in RTL)

MMy message inside an RTL container — all-logical directions, mirrored automatically.STheir message inside an RTL container.

Example

align="end" flips the row (flex-direction: row-reverse) with logical text alignment — no physical-direction CSS.

Delivery status (status)

sending / sent / delivered / read / error

Sending (spinner).Sent (single check).Delivered (double check).Read (double check in primary).Failed (circle-x + danger text).

Example

status is a convenience attribute rendering visible text + decorative icons (localized copy; meaning never rides on color alone; error adds danger token color as enhancement). Invalid/absent values render no status area. Retry and similar actions belong to the host in the footer slot.

Grouping consecutive messages (grouped)

Consecutive messages from the same sender

SSupport · 10:01First: full spacing with avatar.SSecond (grouped): same sender, tightened spacing.SThird (grouped): still grouped.

Example

The host declares grouped (boolean present) when a row continues the same sender — row spacing tightens via the --oas-message-gap variable, visually clustering the group.

API

oas-message-row

Attributes

Attribute	Description	Type	Default
align	Direction: start (theirs, default) / end (mine) — logical properties (row-reverse + logical alignment), mirrored automatically in RTL	—	—
grouped	Boolean presence: consecutive message from the same sender (declared by the host), tightening row spacing via --oas-message-gap	—	—
status	Delivery status convenience attribute: sending / sent / delivered / read / error — renders visible text + decorative icons (localized copy; meaning never rides on color alone; error adds danger color as enhancement); invalid/absent values render no status area	MessageRowStatus	—

Slots

Name	Description
default	Message content (place oas-bubble)
avatar	Avatar slot (bottom-aligned; long messages hug the bottom)
footer	Footer slot (actions/extra metadata, aligned with direction)
header	Header slot (sender name/time)

CSS Variables

CSS Variable	Default
--oas-message-gap	var(--oas-space-4)

CSS variable: --oas-message-gap (row gap, default var(--oas-space-4)). Parts: ::part(row) / ::part(avatar) / ::part(main) / ::part(header) / ::part(content) / ::part(footer) / ::part(status). Events: none (message actions live in the footer slot).