ChatBubble

A single message bubble for AI chat UIs, aligned left for assistant messages and right for user messages.

You2:41 PM

How do I center a div in CSS?

AI2:41 PM

You can use flexbox: set the parent to display: flex; justify-content: center; align-items: center.

import { ChatBubble } from "@aetherstack/ui"

Installation

terminal

npx aether-ui add chat-bubble

Import

import.tsx

import { ChatBubble } from "@aetherstack/ui"

Usage

chatbubble.tsx

<ChatBubble
  role="user"
  content="How do I center a div?"
  name="You"
  timestamp="2:41 PM"
/>

<ChatBubble
  role="assistant"
  content="Use display: flex with justify-content and align-items set to center."
  name="AI"
  timestamp="2:41 PM"
/>

Props

Prop	Type	Default	Description
role*	"user" \| "assistant" \| "system"	—	Determines bubble alignment (user = right, assistant/system = left) and background color.
content*	React.ReactNode	—	Message content — can be a string, MarkdownRenderer, or any React node.
avatarUrl	string	—	Custom avatar image URL shown beside the bubble.
name	string	—	Sender name shown above the bubble.
timestamp	string	—	Timestamp string shown beside the sender name.
actions	React.ReactNode	—	Action buttons (e.g. FeedbackButtons, copy) rendered below the bubble.
className	string	—	Additional CSS classes.

* Required

Accessibility

→Each bubble is wrapped in an article element with an appropriate aria-label containing the sender name.
→User and assistant bubbles are visually differentiated by alignment and color — not color alone.