Chat Message

Chat Message@astryxdesign/core v0.1.1 · ChatMessage

Usage

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

Open in Playground

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

Open in Playground

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

Open in Playground

Grouped bubbles using the group prop for corner radius reduction. Use first, middle, and last to visually connect related bubbles from the same sender.