Message
AI chat message container primitives for building conversational interfaces with branch history switching and action toolbars.
The Message (AiMessage) component provides role-based chat bubbles, markdown rendering, message branching history navigation, and quick reaction/copy action bars.
Here is your configured Hono RPC client with end-to-end type safety across the monorepo.
Usage
tsx
import { AiMessage, AiMessageContent, MessageActions, MessageAction,} from "@celestia-project/ui"import { ThumbsUpIcon, CopyIcon } from "@phosphor-icons/react"
export function MyMessage() { return ( <AiMessage from="assistant" className="w-full max-w-md"> <AiMessageContent> Here is your configured Hono RPC client with end-to-end type safety across the monorepo. </AiMessageContent> <MessageActions> <MessageAction icon={ThumbsUpIcon} label="Helpful" onClick={() => console.log("Liked")} /> <MessageAction icon={CopyIcon} label="Copy response" onClick={() => console.log("Copied")} /> </MessageActions> </AiMessage> )}Props Reference
| Component | Prop | Type | Default | Description |
|---|---|---|---|---|
AiMessage | from | "user" | "assistant" | "system" | "user" | Message sender role. |
AiMessageContent | children | ReactNode | — | Text or markdown content. |
MessageAction | icon | Icon | — | Phosphor action icon. |
MessageAction | label | string | — | Accessible label / tooltip. |