Sender context wrapper: handles avatar, name, metadata, and alignment based on sender role.
ts
import{ChatMessage}from'@astryxdesign/core/Chat'
Examples
Common configurations, variations, and states.
ChatMessage — Avatar & Name
Messages with avatars and sender names. Place the name on the bubble when using bubbles, or on the message wrapper for raw content.
ChatMessage — Ghost
Ghost variant for messages without visible bubble boundaries. Keeps padding for alignment but renders a transparent background, useful for AI-style responses.
ChatMessage — Multi-Bubble
Grouped bubbles using the group prop for corner radius reduction. Use first, middle, and last to visually connect related bubbles from the same sender.