Shadcn Bubble Quick Replies

When to use

• Chat and support threads where each turn shows its sender by side and by color
• Assistant replies in a transcript, including long answers folded to a lead and formatted answers
• Turn extras such as emoji reactions and quick reply choices that the reader presses

When not to use

• Copy, regenerate or rating controls set under a reply rather than inside it: use the Message component
• A finished assistant page or panel with a composer and streaming replies wired: use the AI Chat blocks
• A conversation with nothing in it yet, waiting for its first turn: use the Empty component

Agent notes

• Replace options with your choices; each needs its own reply, or an href to render as a link rather than a button
• The Check addresses and Notify the owner Button controls have no handler, so wire them to your next steps
• The reply bubble lifts the 80% width cap with max-w-full; keep it on any Bubble that holds a row of controls
• align end sets align-self, so each Bubble needs a flex column parent; in a grid or a plain block the end turns stay at the start
• A pressable bubble is BubbleContent itself, through render on base or asChild on radix; the bubble hover and focus ring skip a control nested inside it