Message

The row of a chat transcript: avatar, alignment, header and footer around whatever the message itself is.

Assistant

The registry entry was missing, so the CLI refused the name.

That explains it. Adding the entry now.

Sent

Installation

uvx django_shadcn@latest add message

Usage

<c-message>
    <c-message.avatar>
        <c-avatar>
            <c-avatar.fallback>CN</c-avatar.fallback>
        </c-avatar>
    </c-message.avatar>
    <c-message.content>
        <c-message.header>Assistant</c-message.header>
        <c-bubble variant="muted">
            <c-bubble.content>How can I help?</c-bubble.content>
        </c-bubble>
        <c-message.footer>Just now</c-message.footer>
    </c-message.content>
</c-message>

message is layout and nothing else. It decides which side the row sits on and where the avatar, the header and the footer go; what fills the middle is up to you. In a chat that is usually a Bubble, but a card, a table or a plain paragraph all work.

Alignment

align="end" flips the row, and everything inside follows: the content moves to the far side, the footer aligns with it, and the avatar changes sides.

Starts on the left.

Ends on the right.

<c-message align="end">
    <c-message.content>
        <c-bubble align="end">
            <c-bubble.content>Ends on the right.</c-bubble.content>
        </c-bubble>
    </c-message.content>
</c-message>

Examples

Grouped

group stacks a run from the same sender. Give the avatar to the last message of the run and leave it off the others, so the run reads as one turn.

Three questions, sorry.

Where does the registry live?

And does add read it?

<c-message.group>
    <c-message align="end">...</c-message>
    <c-message align="end">...</c-message>
    <c-message align="end">
        <c-message.avatar>...</c-message.avatar>
        ...
    </c-message>
</c-message.group>

Header and footer

The header names the sender and stays where the reader starts, whatever the alignment. The footer carries status or actions and follows the message side. When a footer is present the avatar lifts so it stays level with the message rather than with the timestamp.

Assistant

Both edges of a message are yours to fill.

Delivered · 09:41

<c-message.content>
    <c-message.header>Assistant</c-message.header>
    <c-bubble variant="muted">
        <c-bubble.content>...</c-bubble.content>
    </c-bubble>
    <c-message.footer>Delivered · 09:41</c-message.footer>
</c-message.content>