Message
A chat message: user bubbles on the right, assistant replies as Markdown, with actions, branches and attachments.
import { Message } from "@cynco-labs/ui/ai";Example
import { ArrowsClockwiseIcon, CopyIcon } from "@phosphor-icons/react";
import {
Message,
MessageAction,
MessageActions,
MessageContent,
MessageResponse,
} from "@cynco-labs/ui/ai";
export default function MessageDemo() {
return (
<div className="flex flex-col gap-2 max-w-[560px]">
<Message from="user">
<MessageContent>Record a RM 1,184.30 TNB bill for October</MessageContent>
</Message>
<Message from="assistant">
<MessageContent>
<MessageResponse>
{
"Done. **BILL-2026-0088** is recorded:\n\n- Tenaga Nasional Berhad, RM 1,184.30\n- Posted to `6210 Utilities`, due 15 Nov"
}
</MessageResponse>
</MessageContent>
<MessageActions>
<MessageAction tooltip="Copy" label="Copy">
<CopyIcon size={14} />
</MessageAction>
<MessageAction tooltip="Retry" label="Retry">
<ArrowsClockwiseIcon size={14} />
</MessageAction>
</MessageActions>
</Message>
</div>
);
}Use
Every chat turn.
Props
from (user · assistant); MessageContent › MessageResponse (Streamdown Markdown) ; MessageActions › MessageAction (tooltip, label); MessageBranch* for alternative replies; MessageAttachments › MessageAttachment.
Notes
Mermaid diagrams inside Markdown are not bundled and render as nothing.