Message

A row in a chat thread.

Anatomy

The type prop flips the row direction so outgoing messages stack to the right. A single MessageContent can hold multiple MessageText parts when a message arrives as several segments.

TSX


API


Reference for each part of the component, including its available props and behavior.


Message


Root flex row. Sets data-type on the element so descendants can react. Reverses direction for "outgoing".


Prop


MessageAvatar


Optional. A circular slot. Bring your own avatar: drop in initials, an icon, a plain image, an optimized image component, or any project-specific avatar component. A direct <img> child fills the slot, and anything else lays out centered.


TSX


Prop


MessageContent


Plain column container that holds the message body and any actions. No padding or background. Typography lives on MessageText.


Prop


MessageText


The component for displaying text. Use one per text segment, and repeat it as many times as the message has parts.


    

  • plain (default): typography only, no padding or background.
    • 

  • bubble: adds the chat-bubble look with a rounded background and padding. Override the color per-instance via className.
    • 



Prop


MessageAction


Horizontal container for action buttons (copy, regenerate, feedback). No styling beyond layout. Alignment follows the parent MessageContent. Drop a Button with iconOnly and the ghost variant inside for the standard look.


Prop