MessageBubble

Single chat message bubble.

import { MessageBubble } from '@ybouhjira/hyperkit';

#Playground

Edit the code — the preview recompiles and re-renders as you type.

Loading preview…

<MessageBubble
  role="assistant"
  content={"You can use `Array.prototype.sort()`:\n\n

<MessageBubble
  role="assistant"
  content="Let me think about this..."
  isStreaming
/>

Prop	Type	Default	Description
`role` *	`MessageRole`	—	—
`content` *	`string`	—	—
`timestamp`	`Date`	—	—
`isStreaming`	`boolean`	—	—
`onCopy`	`() => void`	—	—
`class`	`string`	—	—
`variant`	`'default' \| 'borderless'`	—	Variant: 'default' = colored bubble, 'borderless' = transparent thread-style
`avatarText`	`string`	—	Avatar text (e.g., "Y" for user, "AI" for assistant) - only shown in borderless variant
`displayName`	`string`	—	Display name (e.g., "You", "Assistant") - only shown in borderless variant

* required prop.

This component reads the following CSS custom properties. Override them globally or per-instance to restyle it — see the CSS Variables guide.