Message

Overview

Message is a family of presentational layout wrappers (ZitsMessage, ZitsMessageAvatar, ZitsMessageContent, ZitsMessageHeader, ZitsMessageFooter, ZitsMessageGroup) with fixed Tailwind class sets and data-slot markers. It composes no Navius primitive, holds no state, and implements no behavior; ZitsMessage.Align flips the row (received vs. sent) via CSS only.

There is no standalone message registry item: these components ship bundled under the chat item alongside ZitsBubble*, ZitsAttachment*, and the ZitsMessageScroller* family. navius add chat installs all of them together.

Install

navius add chat --to ./src/MyApp --namespace MyApp.Ui

Usage

@using Zits.Ui.Components

<ZitsMessage Align="end">
    <ZitsMessageAvatar>
        <img src="/avatar.png" alt="" />
    </ZitsMessageAvatar>
    <ZitsMessageContent>
        <ZitsMessageHeader>You</ZitsMessageHeader>
        <ZitsBubbleContent>Sounds good, see you then.</ZitsBubbleContent>
        <ZitsMessageFooter>Sent · 2:41 PM</ZitsMessageFooter>
    </ZitsMessageContent>
</ZitsMessage>

Parts and props

ZitsMessage (root)

Prop	Type	Default	Description
Align	string	"start"	"start" (received) or "end" (sent); flips the row via flex-row-reverse and cascades alignment to descendant slotted content.

ZitsMessageAvatar, ZitsMessageContent, ZitsMessageHeader, ZitsMessageFooter, and ZitsMessageGroup take only ChildContent/Attributes; they are pure layout, styled contextually off the parent ZitsMessage’s data-align (via Tailwind group selectors).

Styling surface

Every part accepts class via Attributes, merged with its own base class through Cn.Merge.

Parameter	Values
ZitsMessage.Align	start · end

Data attribute hooks

Part	Attribute	Description
Root	data-slot="message" / data-align	Structural marker plus the active Align, targeted by descendant Tailwind group selectors.
Avatar	data-slot="message-avatar"	Structural marker; shifts up via a group selector when a ZitsMessageFooter sibling exists.
Content	data-slot="message-content"	Structural marker.
Header	data-slot="message-header"	Structural marker.
Footer	data-slot="message-footer"	Structural marker.
Group	data-slot="message-group"	Structural marker.

Message has no role or interactive semantics of its own: accessibility comes entirely from the content placed inside (avatar alt text, readable bubble content, etc.), which is the caller’s responsibility.