Message
One conversation turn: user bubble or assistant document, with hover actions.
Message renders one turn of an AI conversation. User turns sit in a compact bubble; assistant turns read as a full-width document with an avatar and quiet actions (copy, regenerate, rate) that appear on hover and are always visible on touch.
Preview
Three changes shipped: proration now rounds to the cent, failed renewals retry twice before emailing the customer, and invoices include the tax ID when one is on file.
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/message.jsonThe CLI also installs the Cuelark theme tokens, the GSAP motion layer and the components it builds on. With the @cuelark namespace configured, use @cuelark/message.
Builds on: motion, tooltip
Usage
import { Message, MessageContent } from "@/components/ui/message";
<Message from="assistant">
<MessageContent>…</MessageContent>
</Message>Motion
Each new message rises in once.
Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.
API reference
Message
| Prop | Type | Default | Description |
|---|---|---|---|
| from | "user" | "assistant" | "assistant" | Side and style. |
MessageAction
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | Tooltip and accessible name. |
MessageAvatar · MessageContent · MessageActions
Accessibility
- Fully keyboard operable with visible focus.
- Live regions announce streaming updates politely.
FAQ
Also searched as: ai chat message component · chat bubble react · chatgpt message ui · shadcn ai message · llm response ui