Bubble

import {
  Bubble,
  BubbleContent,
} from "@workspace/ui/components/bubble"

<Bubble variant="muted">
  <BubbleContent>Did you remove the stale route?</BubbleContent>
</Bubble>

<Bubble align="end">
  <BubbleContent>Yes — I checked the registry output and removed it.</BubbleContent>
</Bubble>

<Bubble>
  <BubbleContent>This is the default primary bubble.</BubbleContent>
</Bubble>

<Bubble variant="secondary" align="end">
  <BubbleContent>This is the secondary variant.</BubbleContent>
</Bubble>

<Bubble variant="muted">
  <BubbleContent>This one is muted.</BubbleContent>
  <BubbleReactions role="img" aria-label="Reaction: thumbs up">
    <span>👍</span>
  </BubbleReactions>
</Bubble>

<Bubble variant="tinted" align="end">
  <BubbleContent>This one is tinted.</BubbleContent>
</Bubble>

<Bubble variant="outline">
  <BubbleContent>We can also use an outlined variant.</BubbleContent>
</Bubble>

<Bubble variant="destructive" align="end">
  <BubbleContent>Or a destructive variant with a reaction.</BubbleContent>
</Bubble>

<Bubble variant="ghost">
  <BubbleContent>Ghost bubbles work for unframed assistant text.</BubbleContent>
</Bubble>

<Bubble variant="muted">
  <BubbleContent>This bubble is aligned to the start. This is the default.</BubbleContent>
</Bubble>

<Bubble align="end">
  <BubbleContent>This bubble is aligned to the end. Use this for user messages.</BubbleContent>
</Bubble>

<BubbleGroup>
  <Bubble align="end">
    <BubbleContent>You tell me!</BubbleContent>
  </Bubble>
  <Bubble align="end">
    <BubbleContent>It worked yesterday. You broke it!</BubbleContent>
  </Bubble>
  <Bubble align="end">
    <BubbleContent>Find the bug and fix it.</BubbleContent>
    <BubbleReactions align="start" role="img" aria-label="Reaction: eyes">
      <span>👀</span>
    </BubbleReactions>
  </Bubble>
</BubbleGroup>

<Bubble variant="tinted" align="end">
  <BubbleContent asChild>
    <button type="button" onClick={() => toast("You clicked forgot password")}>
      I forgot my password
    </button>
  </BubbleContent>
</Bubble>

<Bubble variant="muted" align="end">
  <BubbleContent>I don't need tests, I know my code works.</BubbleContent>
  <BubbleReactions align="start" role="img" aria-label="Reactions: thumbs up, surprised">
    <span>👍</span>
    <span>😮</span>
  </BubbleReactions>
</Bubble>

<Bubble align="end">
  <BubbleContent>Tests passed on the first try. All 142 of them.</BubbleContent>
  <BubbleReactions side="top" align="start" role="img" aria-label="Reactions: party popper, clapping hands">
    <span>🎉</span>
    <span>👏</span>
  </BubbleReactions>
</Bubble>

<Bubble variant="destructive">
  <BubbleContent>Are you sure I can run this command?</BubbleContent>
  <BubbleReactions>
    <Button variant="ghost" size="xs" onClick={() => toast.success("Running command…")}>
      Yes, run it
    </Button>
  </BubbleReactions>
</Bubble>

const [open, setOpen] = React.useState(false)

<Bubble variant="muted" align="end">
  <BubbleContent className="whitespace-pre-line">
    <Collapsible open={open} onOpenChange={setOpen}>
      <div>{open ? text : preview}</div>
      <CollapsibleTrigger asChild>
        <Button variant="link" className="gap-1 p-0 text-muted-foreground">
          {open ? "Show less" : "Show more"}
          <CaretDownIcon
            data-icon="inline-end"
            className="transition-transform group-data-[state=open]/button:rotate-180"
          />
        </Button>
      </CollapsibleTrigger>
    </Collapsible>
  </BubbleContent>
</Bubble>

<Bubble align="end">
  <BubbleContent>Yes, removed it from the registry.</BubbleContent>
  <BubbleReactions className="p-0">
    <Tooltip>
      <TooltipTrigger asChild>
        <Button variant="ghost" size="icon-xs">
          <CheckIcon />
          <span className="sr-only">Read receipt</span>
        </Button>
      </TooltipTrigger>
      <TooltipContent>Read on Jan 5, 2026 at 4:32 PM</TooltipContent>
    </Tooltip>
  </BubbleReactions>
</Bubble>

<Bubble variant="destructive">
  <BubbleContent>Failed to run the command.</BubbleContent>
  <BubbleReactions>
    <Popover>
      <PopoverTrigger asChild>
        <Button
          variant="ghost"
          size="icon-xs"
          aria-label="Show error details"
          className="aria-expanded:text-destructive"
        >
          <InfoIcon />
        </Button>
      </PopoverTrigger>
      <PopoverContent>
        <PopoverHeader>
          <PopoverTitle className="text-sm">Command failed with exit code 1</PopoverTitle>
          <PopoverDescription className="text-sm">
            ENOENT: no such file or directory, open yarn.lock
          </PopoverDescription>
        </PopoverHeader>
      </PopoverContent>
    </Popover>
  </BubbleReactions>
</Bubble>