Message Bubble

User/assistant chat bubbles with avatar slot, streaming dots and copyable code blocks.

npx @kznlabs/labsui add message-bubble

Assistant

Online

You
How do I animate height with motion?

Assistant

Animate to auto with a spring. motion measures the target height for you:

tsx

<motion.div  animate={{ height: open ? "auto" : 0 }}  transition={{ type: "spring", stiffness: 400, damping: 30 }}/>

import { Avatar } from "@/components/ui/avatar";import { Code } from "@/components/ui/code";import { MessageBubble } from "@/components/ui/message-bubble";export function Reply({ code }: { code: string }) {  return (    <MessageBubble      from="assistant"      avatar={<Avatar size="sm" alt="Assistant" />}      streaming    >      <p>Here is the component:</p>      <Code code={code} language="tsx" />    </MessageBubble>  );}

<MessageBubble>

Chat bubble. Children are rich content: <p>, inline <code>, lists, <Code>.

from*
"user" | "assistant"
Side and surface: "user" on the right in the accent, "assistant" on the left.
avatar
ReactNode
Avatar slot, e.g. <Avatar size="sm" />.
children
ReactNode
Message content: text, code, attachments.
name
string
Sender shown above the bubble.
streaming
boolean
Shows animated typing dots after the content.
time
string
Time shown next to the name, e.g. "12:04".

Prop	Type	Default
`from*` Side and surface: "user" on the right in the accent, "assistant" on the left.	`"user" \| "assistant"`	—
`avatar` Avatar slot, e.g. `<Avatar size="sm" />`.	`ReactNode`	—
`children` Message content: text, code, attachments.	`ReactNode`	—
`name` Sender shown above the bubble.	`string`	—
`streaming` Shows animated typing dots after the content.	`boolean`	—
`time` Time shown next to the name, e.g. "12:04".	`string`	—

* required. Every component also takes className.