Messaging
Chat bubble components for sent and received messages. Includes typing indicator and full conversation layout.
import
{ MessageBubble, MessageInput, TypingIndicator } from "@pepulux/ui"Message bubbles
OR
Olivia Rhye
10:30 AM
Hey! Can you review the latest design?
Sure, sending feedback now.
OR
Olivia Rhye
10:33 AM
Thanks! I've added comments inline.
Typing indicator
?
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| message* | ChatMessage | — | Message object — { id, text, status, senderName?, timestamp?, senderAvatar?, reactions? } |
| status* | "sent" | "received" | — | Message direction — determines alignment and color (field on ChatMessage) |
| senderName | string | — | Sender display name (shown for received messages) |
| timestamp | string | — | Formatted timestamp string |
| reactions | MessageReaction[] | — | Emoji reactions array |