Message
One turn of a conversation, from the user or the assistant.
What is Constella?
Constella is a component library on Base UI and StyleX. Every value comes from a token, so a theme is one file, and the motion stays quiet: a press that gives, a popover that settles.
<Message from="user"> <MessageContent>What is Constella?</MessageContent></Message><Message from="assistant"> <MessageContent>{answer}</MessageContent> <MessageActions> <CopyButton value={answer} /> </MessageActions></Message>Installation
$ npx shadcn@latest add @constella/messageUsage
import { Message, MessageActions, MessageContent,} from "@/components/ai/message";A user's message sits at the end, in a bubble; an answer reads as the page. Put the answer's actions in MessageActions, like a Copy Button.
Composition
Message├── MessageContent└── MessageActionsAPI Reference
| Part | Adds |
|---|---|
Message | from: "user" or "assistant" |
Every part takes sx, applied last, and renders a div.