Components / Message

Message

One conversation row: a presentational layout wrapper with no state. align="end" flips the row and pushes the bubble and footer to the sent side. Stack consecutive rows from the same sender with ZitsMessageGroup.

Examples

Assistant

Anchor the turn near the top and let the answer grow into the screen below it.

Got it, thanks.

Sent 2m ago

razor

<ZitsMessage Align="start">
    <ZitsMessageAvatar>...</ZitsMessageAvatar>
    <ZitsMessageContent>
        <ZitsMessageHeader>Assistant</ZitsMessageHeader>
        <ZitsBubble Variant="muted">
            <ZitsBubbleContent>...</ZitsBubbleContent>
        </ZitsBubble>
    </ZitsMessageContent>
</ZitsMessage>

Installation

Terminal bash

navius add chat

API reference

ZitsMessage (root):

Prop	Type	Default
Align	string	"start"

Parts

Prop	Type	Default
ZitsMessageGroup	container	stacks consecutive messages from the same sender
ZitsMessage	root	align: start (received) \| end (sent)
ZitsMessageAvatar	slot	bottom-aligned to the bubble; shifts up when a footer is present
ZitsMessageContent	slot	wraps the header, the bubble, and the footer
ZitsMessageHeader	slot	sender name, always start-aligned
ZitsMessageFooter	slot	status or actions, follows the message side