bubble/usage

10 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Tooltip and Popover with Bubble

Wrap a bubble in a Tooltip component to reveal metadata on hover, such as when a message was read. Pair a bubble with a Popover component to surface more information on demand, such as the full error message for a failed action.

Basic Bubble component usage example

A basic bubble example: ```tsx <Bubble> <BubbleContent> I checked the registry output and removed the stale route. </BubbleContent> <BubbleReactions> <span>👍</span> </BubbleReactions> </Bubble> ``` This example shows a bubble with content and a reactions row.

Bubble as link or button using render prop

You can turn a bubble into a link or button by using the render prop on BubbleContent. Example: ```tsx import { Bubble, BubbleContent } from "@/components/ui/bubble" export function BubbleLinkDemo() { return ( <Bubble variant="muted"> <BubbleContent render={<button />}>Click here</BubbleContent> </Bubble> ) } ``` This renders the bubble content as a button element.

Bubble component import statement

Import the Bubble component with: import { Bubble, BubbleContent, BubbleReactions } from "@/components/ui/bubble"

Bubble with Collapsible for long content

Long bubble content can be composed with the Collapsible component to allow for a show more or show less interaction. Use the CollapsibleTrigger component to trigger the collapsible content.

Bubble with Tooltip for metadata

Wrap a bubble in a Tooltip component to reveal metadata on hover, such as when a message was read.

Bubble with Popover for additional information

Pair a bubble with a Popover component to surface more information on demand, such as the full error message for a failed action.

Bubble basic usage imports and example

Import Bubble, BubbleContent, and BubbleReactions from '@/components/ui/bubble'. A basic example wraps BubbleContent inside a Bubble element with text content, optionally including BubbleReactions with emoji inside. Example: ```tsx import { Bubble, BubbleContent, BubbleReactions } from "@/components/ui/bubble" <Bubble> <BubbleContent> I checked the registry output and removed the stale route. </BubbleContent> <BubbleReactions> <span>👍</span> </BubbleReactions> </Bubble> ```

Bubble as link or button using asChild

You can turn a bubble into a link or button by using the 'asChild' prop on BubbleContent. Example: ```tsx import { Bubble, BubbleContent } from "@/components/ui/bubble" export function BubbleLinkDemo() { return ( <Bubble variant="muted"> <BubbleContent asChild> <button>Click here</button> </BubbleContent> </Bubble> ) } ```

BubbleReactions positioning

Use BubbleReactions to display reactions or quick action buttons. Use 'side' and 'align' to position the row: 'side="top"' anchors it to the upper edge. Reactions overlap the bubble edge, so leave vertical space between rows by using a larger 'gap'.

Give your agent this brain