Bubble

Render the visible message surface inside a Message row with variants for sender, receiver, and status treatments.

'use client'

import { Bubble, BubbleContent } from '@nerdfish/react/bubble'

const variants = [
	'default',
	'secondary',
	'muted',
	'tinted',
	'outline',
	'ghost',
	'destructive',
] as const

export default function BubbleExample() {
	return (
		<div className="gap-best-friends py-casual mx-auto flex w-full max-w-sm flex-col">
			{variants.map((variant) => (
				<Bubble key={variant} variant={variant}>
					<BubbleContent className="capitalize">{variant} bubble</BubbleContent>
				</Bubble>
			))}
		</div>
	)
}

Usage

<Bubble variant="muted">
	<BubbleContent>How can I help you today?</BubbleContent>
</Bubble>

Use Bubble inside MessageContent. Pair with Message for avatar, alignment, header, and footer layout.

Variants

default is for the active sender. muted is for the other side. secondary, tinted, outline, ghost, and destructive cover status and low-emphasis surfaces.

Group

Stack multiple bubbles with BubbleGroup and attach reactions with BubbleReactions.

'use client'

import {
	Bubble,
	BubbleContent,
	BubbleGroup,
	BubbleReactions,
} from '@nerdfish/react/bubble'

export default function BubbleGroupExample() {
	return (
		<div className="py-casual mx-auto flex w-full max-w-sm flex-col">
			<BubbleGroup>
				<Bubble variant="muted">
					<BubbleContent>Here&apos;s the error from the logs.</BubbleContent>
				</Bubble>
				<Bubble variant="muted">
					<BubbleContent>
						Something went wrong with the build. Try running it again.
					</BubbleContent>
					<BubbleReactions aria-label="Reactions: thumbs up">
						<span>👍</span>
					</BubbleReactions>
				</Bubble>
			</BubbleGroup>
		</div>
	)
}