[{"data":1,"prerenderedAt":1447},["ShallowReactive",2],{"navigation":3,"$fMW9jOOkNpZriWVK3P_bZYNOyYR2IEPvrHsC7cDBlJJc":446,"/docs/components/bubble":459,"surround-/docs/components/bubble":1444},[4],{"title":5,"path":6,"stem":7,"children":8,"page":18},"Docs","/docs","docs",[9,294,320,338,351,377,390],{"title":10,"path":11,"stem":12,"children":13,"new":18,"type":293},"Components","/docs/components","docs/02.components",[14,20,24,28,32,37,41,45,49,53,57,61,65,69,73,77,81,85,89,93,97,101,105,109,113,117,121,125,129,133,137,141,145,149,153,157,161,165,169,173,177,181,185,189,193,197,201,205,209,213,217,221,225,229,233,237,241,245,249,253,257,261,265,269,273,277,281,285,289],{"title":15,"path":16,"stem":17,"new":18,"type":19,"children":-1},"Accordion","/docs/components/accordion","docs/components/accordion",false,"component",{"title":21,"path":22,"stem":23,"new":18,"type":19,"children":-1},"Alert","/docs/components/alert","docs/components/alert",{"title":25,"path":26,"stem":27,"new":18,"type":19,"children":-1},"Alert Dialog","/docs/components/alert-dialog","docs/components/alert-dialog",{"title":29,"path":30,"stem":31,"new":18,"type":19,"children":-1},"Aspect Ratio","/docs/components/aspect-ratio","docs/components/aspect-ratio",{"title":33,"path":34,"stem":35,"new":36,"type":19,"children":-1},"Attachment","/docs/components/attachment","docs/components/attachment",true,{"title":38,"path":39,"stem":40,"new":18,"type":19,"children":-1},"Avatar","/docs/components/avatar","docs/components/avatar",{"title":42,"path":43,"stem":44,"new":18,"type":19,"children":-1},"Badge","/docs/components/badge","docs/components/badge",{"title":46,"path":47,"stem":48,"new":18,"type":19,"children":-1},"Breadcrumb","/docs/components/breadcrumb","docs/components/breadcrumb",{"title":50,"path":51,"stem":52,"new":36,"type":19,"children":-1},"Bubble","/docs/components/bubble","docs/components/bubble",{"title":54,"path":55,"stem":56,"new":18,"type":19,"children":-1},"Button","/docs/components/button","docs/components/button",{"title":58,"path":59,"stem":60,"new":18,"type":19,"children":-1},"Button Group","/docs/components/button-group","docs/components/button-group",{"title":62,"path":63,"stem":64,"new":18,"type":19,"children":-1},"Calendar","/docs/components/calendar","docs/components/calendar",{"title":66,"path":67,"stem":68,"new":18,"type":19,"children":-1},"Card","/docs/components/card","docs/components/card",{"title":70,"path":71,"stem":72,"new":18,"type":19,"children":-1},"Carousel","/docs/components/carousel","docs/components/carousel",{"title":74,"path":75,"stem":76,"new":18,"type":19,"children":-1},"Chart","/docs/components/chart","docs/components/chart",{"title":78,"path":79,"stem":80,"new":18,"type":19,"children":-1},"Checkbox","/docs/components/checkbox","docs/components/checkbox",{"title":82,"path":83,"stem":84,"new":18,"type":19,"children":-1},"Collapsible","/docs/components/collapsible","docs/components/collapsible",{"title":86,"path":87,"stem":88,"new":18,"type":19,"children":-1},"Combobox","/docs/components/combobox","docs/components/combobox",{"title":90,"path":91,"stem":92,"new":18,"type":19,"children":-1},"Command","/docs/components/command","docs/components/command",{"title":94,"path":95,"stem":96,"new":18,"type":19,"children":-1},"Context Menu","/docs/components/context-menu","docs/components/context-menu",{"title":98,"path":99,"stem":100,"new":18,"type":19,"children":-1},"Data Table","/docs/components/data-table","docs/components/data-table",{"title":102,"path":103,"stem":104,"new":18,"type":19,"children":-1},"Date Picker","/docs/components/date-picker","docs/components/date-picker",{"title":106,"path":107,"stem":108,"new":18,"type":19,"children":-1},"Dialog","/docs/components/dialog","docs/components/dialog",{"title":110,"path":111,"stem":112,"new":18,"type":19,"children":-1},"Drawer","/docs/components/drawer","docs/components/drawer",{"title":114,"path":115,"stem":116,"new":18,"type":19,"children":-1},"Dropdown Menu","/docs/components/dropdown-menu","docs/components/dropdown-menu",{"title":118,"path":119,"stem":120,"new":18,"type":19,"children":-1},"Empty","/docs/components/empty","docs/components/empty",{"title":122,"path":123,"stem":124,"new":18,"type":19,"children":-1},"Field","/docs/components/field","docs/components/field",{"title":126,"path":127,"stem":128,"new":18,"type":19,"children":-1},"Form","/docs/components/form","docs/components/form",{"title":130,"path":131,"stem":132,"new":18,"type":19,"children":-1},"Hover Card","/docs/components/hover-card","docs/components/hover-card",{"title":134,"path":135,"stem":136,"new":18,"type":19,"children":-1},"Input","/docs/components/input","docs/components/input",{"title":138,"path":139,"stem":140,"new":18,"type":19,"children":-1},"Input Group","/docs/components/input-group","docs/components/input-group",{"title":142,"path":143,"stem":144,"new":18,"type":19,"children":-1},"Input OTP","/docs/components/input-otp","docs/components/input-otp",{"title":146,"path":147,"stem":148,"new":18,"type":19,"children":-1},"Item","/docs/components/item","docs/components/item",{"title":150,"path":151,"stem":152,"new":18,"type":19,"children":-1},"Kbd","/docs/components/kbd","docs/components/kbd",{"title":154,"path":155,"stem":156,"new":18,"type":19,"children":-1},"Label","/docs/components/label","docs/components/label",{"title":158,"path":159,"stem":160,"new":36,"type":19,"children":-1},"Marker","/docs/components/marker","docs/components/marker",{"title":162,"path":163,"stem":164,"new":18,"type":19,"children":-1},"Menubar","/docs/components/menubar","docs/components/menubar",{"title":166,"path":167,"stem":168,"new":36,"type":19,"children":-1},"Message","/docs/components/message","docs/components/message",{"title":170,"path":171,"stem":172,"new":36,"type":19,"children":-1},"Message Scroller","/docs/components/message-scroller","docs/components/message-scroller",{"title":174,"path":175,"stem":176,"new":18,"type":19,"children":-1},"Native Select","/docs/components/native-select","docs/components/native-select",{"title":178,"path":179,"stem":180,"new":18,"type":19,"children":-1},"Navigation Menu","/docs/components/navigation-menu","docs/components/navigation-menu",{"title":182,"path":183,"stem":184,"new":18,"type":19,"children":-1},"Number Field","/docs/components/number-field","docs/components/number-field",{"title":186,"path":187,"stem":188,"new":18,"type":19,"children":-1},"Pagination","/docs/components/pagination","docs/components/pagination",{"title":190,"path":191,"stem":192,"new":18,"type":19,"children":-1},"Pin Input","/docs/components/pin-input","docs/components/pin-input",{"title":194,"path":195,"stem":196,"new":18,"type":19,"children":-1},"Popover","/docs/components/popover","docs/components/popover",{"title":198,"path":199,"stem":200,"new":18,"type":19,"children":-1},"Progress","/docs/components/progress","docs/components/progress",{"title":202,"path":203,"stem":204,"new":18,"type":19,"children":-1},"Radio Group","/docs/components/radio-group","docs/components/radio-group",{"title":206,"path":207,"stem":208,"new":18,"type":19,"children":-1},"Range Calendar","/docs/components/range-calendar","docs/components/range-calendar",{"title":210,"path":211,"stem":212,"new":18,"type":19,"children":-1},"Resizable","/docs/components/resizable","docs/components/resizable",{"title":214,"path":215,"stem":216,"new":18,"type":19,"children":-1},"Scroll Area","/docs/components/scroll-area","docs/components/scroll-area",{"title":218,"path":219,"stem":220,"new":18,"type":19,"children":-1},"Select","/docs/components/select","docs/components/select",{"title":222,"path":223,"stem":224,"new":18,"type":19,"children":-1},"Separator","/docs/components/separator","docs/components/separator",{"title":226,"path":227,"stem":228,"new":18,"type":19,"children":-1},"Sheet","/docs/components/sheet","docs/components/sheet",{"title":230,"path":231,"stem":232,"new":18,"type":19,"children":-1},"Sidebar","/docs/components/sidebar","docs/components/sidebar",{"title":234,"path":235,"stem":236,"new":18,"type":19,"children":-1},"Skeleton","/docs/components/skeleton","docs/components/skeleton",{"title":238,"path":239,"stem":240,"new":18,"type":19,"children":-1},"Slider","/docs/components/slider","docs/components/slider",{"title":242,"path":243,"stem":244,"new":18,"type":19,"children":-1},"Sonner","/docs/components/sonner","docs/components/sonner",{"title":246,"path":247,"stem":248,"new":18,"type":19,"children":-1},"Spinner","/docs/components/spinner","docs/components/spinner",{"title":250,"path":251,"stem":252,"new":18,"type":19,"children":-1},"Stepper","/docs/components/stepper","docs/components/stepper",{"title":254,"path":255,"stem":256,"new":18,"type":19,"children":-1},"Switch","/docs/components/switch","docs/components/switch",{"title":258,"path":259,"stem":260,"new":18,"type":19,"children":-1},"Table","/docs/components/table","docs/components/table",{"title":262,"path":263,"stem":264,"new":18,"type":19,"children":-1},"Tabs","/docs/components/tabs","docs/components/tabs",{"title":266,"path":267,"stem":268,"new":18,"type":19,"children":-1},"Tags Input","/docs/components/tags-input","docs/components/tags-input",{"title":270,"path":271,"stem":272,"new":18,"type":19,"children":-1},"Textarea","/docs/components/textarea","docs/components/textarea",{"title":274,"path":275,"stem":276,"new":18,"type":19,"children":-1},"Toast","/docs/components/toast","docs/components/toast",{"title":278,"path":279,"stem":280,"new":18,"type":19,"children":-1},"Toggle","/docs/components/toggle","docs/components/toggle",{"title":282,"path":283,"stem":284,"new":18,"type":19,"children":-1},"Toggle Group","/docs/components/toggle-group","docs/components/toggle-group",{"title":286,"path":287,"stem":288,"new":18,"type":19,"children":-1},"Tooltip","/docs/components/tooltip","docs/components/tooltip",{"title":290,"path":291,"stem":292,"new":18,"type":19,"children":-1},"Typography","/docs/components/typography","docs/components/typography","group",{"title":295,"path":296,"stem":297,"children":298,"new":18,"type":293},"Installation","/docs/installation","docs/02.installation",[299,304,308,312,316],{"title":300,"path":301,"stem":302,"new":18,"type":303,"children":-1},"Vite","/docs/installation/vite","docs/installation/01.vite","page",{"title":305,"path":306,"stem":307,"new":18,"type":303,"children":-1},"Nuxt","/docs/installation/nuxt","docs/installation/02.nuxt",{"title":309,"path":310,"stem":311,"new":18,"type":303,"children":-1},"Astro","/docs/installation/astro","docs/installation/03.astro",{"title":313,"path":314,"stem":315,"new":18,"type":303,"children":-1},"Laravel","/docs/installation/laravel","docs/installation/04.laravel",{"title":317,"path":318,"stem":319,"new":18,"type":303,"children":-1},"Manual Installation","/docs/installation/manual","docs/installation/05.manual",{"title":321,"path":322,"stem":323,"children":324,"new":18,"type":293},"Dark Mode","/docs/dark-mode","docs/05.dark-mode",[325,328,331,335],{"title":300,"path":326,"stem":327,"new":18,"type":303,"children":-1},"/docs/dark-mode/vite","docs/dark-mode/01.vite",{"title":305,"path":329,"stem":330,"new":18,"type":303,"children":-1},"/docs/dark-mode/nuxt","docs/dark-mode/02.nuxt",{"title":332,"path":333,"stem":334,"new":18,"type":303,"children":-1},"Vitepress","/docs/dark-mode/vitepress","docs/dark-mode/03.vitepress",{"title":309,"path":336,"stem":337,"new":18,"type":303,"children":-1},"/docs/dark-mode/astro","docs/dark-mode/04.astro",{"title":339,"path":340,"stem":341,"children":342,"new":18,"type":293},"Forms","/docs/forms","docs/forms",[343,347],{"title":344,"path":345,"stem":346,"new":18,"type":303,"children":-1},"VeeValidate","/docs/forms/vee-validate","docs/forms/01.vee-validate",{"title":348,"path":349,"stem":350,"new":18,"type":303,"children":-1},"TanStack Form","/docs/forms/tanstack-form","docs/forms/02.tanstack-form",{"title":352,"path":353,"stem":354,"children":355,"new":18,"type":293},"Registry","/docs/registry","docs/registry/index",[356,357,361,365,369,373],{"title":352,"path":353,"stem":354,"new":18,"type":303,"children":-1},{"title":358,"path":359,"stem":360,"new":18,"type":303,"children":-1},"Examples","/docs/registry/examples","docs/registry/examples",{"title":362,"path":363,"stem":364,"new":18,"type":303,"children":-1},"FAQ","/docs/registry/faq","docs/registry/faq",{"title":366,"path":367,"stem":368,"new":18,"type":303,"children":-1},"Getting Started","/docs/registry/getting-started","docs/registry/getting-started",{"title":370,"path":371,"stem":372,"new":18,"type":303,"children":-1},"registry-item.json","/docs/registry/registry-item-json","docs/registry/registry-item-json",{"title":374,"path":375,"stem":376,"new":18,"type":303,"children":-1},"registry.json","/docs/registry/registry-json","docs/registry/registry-json",{"title":378,"path":379,"stem":380,"children":381,"page":18,"type":293},"Utilities","/docs/utilities","docs/utilities",[382,386],{"title":383,"path":384,"stem":385,"new":18,"type":303,"children":-1},"scroll-fade","/docs/utilities/scroll-fade","docs/utilities/scroll-fade",{"title":387,"path":388,"stem":389,"new":18,"type":303,"children":-1},"shimmer","/docs/utilities/shimmer","docs/utilities/shimmer",{"path":6,"stem":7,"title":391,"type":293,"children":392},"Get Started",[393,397,404,408,412,418,422,426,430,434,438,442],{"title":394,"path":395,"stem":396,"new":18,"type":303,"children":-1},"Introduction","/docs/introduction","docs/01.introduction",{"title":295,"path":296,"stem":297,"children":398,"new":18,"type":293},[399,400,401,402,403],{"title":300,"path":301,"stem":302,"new":18,"type":303,"children":-1},{"title":305,"path":306,"stem":307,"new":18,"type":303,"children":-1},{"title":309,"path":310,"stem":311,"new":18,"type":303,"children":-1},{"title":313,"path":314,"stem":315,"new":18,"type":303,"children":-1},{"title":317,"path":318,"stem":319,"new":18,"type":303,"children":-1},{"title":405,"path":406,"stem":407,"new":18,"type":303,"children":-1},"components.json","/docs/components-json","docs/03.components-json",{"title":409,"path":410,"stem":411,"new":18,"type":303,"children":-1},"Theming","/docs/theming","docs/04.theming",{"title":321,"path":322,"stem":323,"children":413,"new":18,"type":293},[414,415,416,417],{"title":300,"path":326,"stem":327,"new":18,"type":303,"children":-1},{"title":305,"path":329,"stem":330,"new":18,"type":303,"children":-1},{"title":332,"path":333,"stem":334,"new":18,"type":303,"children":-1},{"title":309,"path":336,"stem":337,"new":18,"type":303,"children":-1},{"title":419,"path":420,"stem":421,"new":18,"type":303,"children":-1},"CLI","/docs/cli","docs/06.cli",{"title":423,"path":424,"stem":425,"new":18,"type":303,"children":-1},"JavaScript","/docs/javascript","docs/07.javascript",{"title":427,"path":428,"stem":429,"new":18,"type":303,"children":-1},"Figma","/docs/figma","docs/09.figma",{"title":431,"path":432,"stem":433,"new":18,"type":303,"children":-1},"Changelog","/docs/changelog","docs/10.changelog",{"title":435,"path":436,"stem":437,"new":18,"type":303,"children":-1},"Legacy Docs","/docs/legacy","docs/11.legacy",{"title":439,"path":440,"stem":441,"new":18,"type":303,"children":-1},"Skills","/docs/skills","docs/skills",{"title":378,"path":379,"stem":380,"children":443,"page":18,"type":293},[444,445],{"title":383,"path":384,"stem":385,"new":18,"type":303,"children":-1},{"title":387,"path":388,"stem":389,"new":18,"type":303,"children":-1},{"repo":447},{"id":448,"name":449,"repo":450,"description":451,"createdAt":452,"updatedAt":453,"pushedAt":454,"stars":455,"watchers":456,"forks":457,"defaultBranch":458},658791894,"shadcn-vue","unovue/shadcn-vue","Vue port of shadcn-ui","2023-06-26T13:53:23Z","2026-07-10T15:52:04Z","2026-07-10T15:50:34Z",10260,37,665,"dev",{"id":460,"title":50,"body":461,"description":1437,"extension":1438,"links":1439,"meta":1440,"navigation":36,"new":36,"path":51,"rawbody":1441,"seo":1442,"stem":52,"__hash__":1443},"content/docs/components/bubble.md",{"type":462,"value":463,"toc":1408},"minimark",[464,470,478,495,499,553,557,566,570,573,581,588,594,598,632,635,640,646,650,740,746,750,759,763,795,812,816,830,835,839,843,852,856,862,866,887,891,895,907,911,914,922,926,929,937,941,945,950,954,973,979,984,990,994,1013,1019,1023,1029,1033,1046,1049,1052,1164,1167,1170,1233,1236,1239,1339,1342,1345],[465,466],"component-preview",{"className":467,"name":469},[468],"theme-blue","BubbleDemo",[471,472,473,474,477],"p",{},"The ",[475,476,50],"code",{}," component displays framed conversational content. Use it for chat text, short structured output, quoted replies, suggestions, and reactions.",[471,479,480,481,486,487,489,490,494],{},"For full-featured chat interfaces, use the ",[482,483,484],"a",{"href":167},[475,485,166],{}," component. ",[475,488,50],{}," is intentionally scoped to the bubble surface. Place avatars, names, timestamps, metadata, and message-level actions in ",[482,491,492],{"href":167},[475,493,166],{},".",[496,497,295],"h2",{"id":498},"installation",[500,501,502,517,530],"code-tabs",{},[503,504,505,511],"tabs-list",{},[506,507,509],"tabs-trigger",{"value":508},"cli",[471,510,419],{},[506,512,514],{"value":513},"manual",[471,515,516],{},"Manual",[518,519,520],"tabs-content",{"value":508},[521,522,528],"pre",{"className":523,"code":525,"language":526,"meta":527},[524],"language-bash","npx shadcn-vue@latest add bubble\n","bash","",[475,529,525],{"__ignoreMap":527},[518,531,532],{"value":513},[533,534,535,548],"steps",{},[536,537,538],"step",{},[471,539,540,541,547],{},"Copy and paste the ",[482,542,546],{"href":543,"rel":544},"https://github.com/unovue/shadcn-vue/tree/dev/apps/v4/registry/new-york-v4/ui/bubble",[545],"nofollow","GitHub source code"," into your project.",[536,549,550],{},[471,551,552],{},"Update the import paths to match your project setup.",[496,554,556],{"id":555},"usage","Usage",[521,558,564],{"className":559,"code":561,"language":562,"meta":563},[560],"language-vue","\u003Cscript setup lang=\"ts\">\nimport { Bubble, BubbleContent, BubbleReactions } from '@/components/ui/bubble'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CBubble>\n    \u003CBubbleContent>\n      I checked the registry output and removed the stale route.\n    \u003C/BubbleContent>\n    \u003CBubbleReactions>\n      \u003Cspan>👍\u003C/span>\n    \u003C/BubbleReactions>\n  \u003C/Bubble>\n\u003C/template>\n","vue","showLineNumbers",[475,565,561],{"__ignoreMap":527},[496,567,569],{"id":568},"composition","Composition",[471,571,572],{},"Use the following composition to build a bubble:",[521,574,579],{"className":575,"code":577,"language":578,"meta":527},[576],"language-text","Bubble\n├── BubbleContent\n└── BubbleReactions\n","text",[475,580,577],{"__ignoreMap":527},[471,582,583,584,587],{},"Use ",[475,585,586],{},"BubbleGroup"," to group consecutive bubbles from the same sender:",[521,589,592],{"className":590,"code":591,"language":578,"meta":527},[576],"BubbleGroup\n├── Bubble\n│   └── BubbleContent\n└── Bubble\n    └── BubbleContent\n",[475,593,591],{"__ignoreMap":527},[496,595,597],{"id":596},"features","Features",[599,600,601,605,608,611,614,625],"ul",{},[602,603,604],"li",{},"Seven visual variants, from a strong primary bubble to unframed ghost content",[602,606,607],{},"Start and end alignment for sender and receiver bubbles",[602,609,610],{},"Reactions that anchor to the bubble edge with configurable side and alignment",[602,612,613],{},"Bubbles size to their content, up to 80% of the container width",[602,615,616,617,620,621,624],{},"Polymorphic content via ",[475,618,619],{},"as"," or ",[475,622,623],{},"as-child"," for link and button bubbles",[602,626,627,628,631],{},"Customizable styling through the ",[475,629,630],{},"class"," prop on every part",[496,633,358],{"id":634},"examples",[636,637,639],"h3",{"id":638},"variants","Variants",[471,641,583,642,645],{},[475,643,644],{},"variant"," to change the visual treatment of the bubble.",[465,647],{"className":648,"name":649},[468],"BubbleVariantsDemo",[651,652,653,666],"table",{},[654,655,656],"thead",{},[657,658,659,663],"tr",{},[660,661,662],"th",{},"Variant",[660,664,665],{},"Description",[667,668,669,680,690,700,710,720,730],"tbody",{},[657,670,671,677],{},[672,673,674],"td",{},[475,675,676],{},"default",[672,678,679],{},"A strong primary bubble, usually for the current user.",[657,681,682,687],{},[672,683,684],{},[475,685,686],{},"secondary",[672,688,689],{},"The standard neutral bubble for conversation content.",[657,691,692,697],{},[672,693,694],{},[475,695,696],{},"muted",[672,698,699],{},"A lower-emphasis bubble for quiet supporting content.",[657,701,702,707],{},[672,703,704],{},[475,705,706],{},"tinted",[672,708,709],{},"A subtle primary-tinted bubble.",[657,711,712,717],{},[672,713,714],{},[475,715,716],{},"outline",[672,718,719],{},"A bordered bubble for secondary or rich content.",[657,721,722,727],{},[672,723,724],{},[475,725,726],{},"ghost",[672,728,729],{},"Unframed content for assistant text or rich content.",[657,731,732,737],{},[672,733,734],{},[475,735,736],{},"destructive",[672,738,739],{},"A destructive bubble for error or failed actions.",[471,741,742,743,745],{},"A bubble sizes to its content, up to 80% of the container width. The ",[475,744,726],{}," variant removes the max-width so assistant text and rich content can span the full row.",[636,747,749],{"id":748},"alignment","Alignment",[471,751,583,752,755,756,758],{},[475,753,754],{},"align"," on ",[475,757,50],{}," to align the bubble to the start or end of the conversation.",[465,760],{"className":761,"name":762},[468],"BubbleAlignmentDemo",[651,764,765,773],{},[654,766,767],{},[657,768,769,771],{},[660,770,754],{},[660,772,665],{},[667,774,775,785],{},[657,776,777,782],{},[672,778,779],{},[475,780,781],{},"start",[672,783,784],{},"Align the bubble to the start of the conversation.",[657,786,787,792],{},[672,788,789],{},[475,790,791],{},"end",[672,793,794],{},"Align the bubble to the end of the conversation.",[471,796,797,801,802,804,805,807,808,811],{},[798,799,800],"strong",{},"Note:"," When building chat interfaces, you probably want to set ",[475,803,754],{}," on the ",[475,806,166],{}," component itself. Bubbles inside ",[475,809,810],{},"MessageContent"," automatically follow the message alignment.",[636,813,815],{"id":814},"bubble-group","Bubble Group",[471,817,583,818,820,821,823,824,826,827,829],{},[475,819,586],{}," to group consecutive bubbles from the same sender. Note the ",[475,822,754],{}," prop should be set on the ",[475,825,50],{}," component itself, not the ",[475,828,586],{}," component.",[521,831,833],{"className":832,"code":591,"language":578,"meta":527},[576],[475,834,591],{"__ignoreMap":527},[465,836],{"className":837,"name":838},[468],"BubbleGroupDemo",[636,840,842],{"id":841},"links-and-buttons","Links and Buttons",[471,844,583,845,847,848,851],{},[475,846,623],{}," to merge ",[475,849,850],{},"BubbleContent"," styling and attributes onto a link or button passed through its default slot.",[465,853],{"className":854,"name":855},[468],"BubbleLinksAndButtonsDemo",[521,857,860],{"className":858,"code":859,"language":562,"meta":563},[560],"\u003Cscript setup lang=\"ts\">\nimport { Bubble, BubbleContent } from '@/components/ui/bubble'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CBubble variant=\"muted\">\n    \u003CBubbleContent as-child>\n      \u003Cbutton type=\"button\">Click here\u003C/button>\n    \u003C/BubbleContent>\n  \u003C/Bubble>\n\u003C/template>\n",[475,861,859],{"__ignoreMap":527},[636,863,865],{"id":864},"reactions","Reactions",[471,867,583,868,871,872,875,876,878,879,882,883,886],{},[475,869,870],{},"BubbleReactions"," for bubble reactions. You can use it to display reactions or quick action buttons. Use ",[475,873,874],{},"side"," and ",[475,877,754],{}," to position the row — ",[475,880,881],{},"side=\"top\""," anchors it to the upper edge. Reactions overlap the bubble edge, so leave vertical space between rows — the examples below use a larger ",[475,884,885],{},"gap"," for this reason.",[465,888],{"className":889,"name":890},[468],"BubbleReactionsDemo",[636,892,894],{"id":893},"show-more-collapsible","Show More / Collapsible",[471,896,897,898,902,903,906],{},"Long bubble content can be composed with ",[482,899,900],{"href":83},[475,901,82],{}," to allow for a show more or show less interaction. Use the ",[475,904,905],{},"CollapsibleTrigger"," component to trigger the collapsible content.",[465,908],{"className":909,"name":910},[468],"BubbleCollapsibleDemo",[636,912,286],{"id":913},"tooltip",[471,915,916,917,921],{},"Wrap a bubble in a ",[482,918,919],{"href":287},[475,920,286],{}," to reveal metadata on hover, such as when a message was read.",[465,923],{"className":924,"name":925},[468],"BubbleTooltipDemo",[636,927,194],{"id":928},"popover",[471,930,931,932,936],{},"Pair a bubble with a ",[482,933,934],{"href":195},[475,935,194],{}," to surface more information on demand, such as the full error message for a failed action.",[465,938],{"className":939,"name":940},[468],"BubblePopoverDemo",[496,942,944],{"id":943},"accessibility","Accessibility",[471,946,947,949],{},[475,948,50],{}," renders the presentational message surface. Keep conversation-level semantics on the surrounding container and follow the guidelines below.",[636,951,953],{"id":952},"labeling-reactions","Labeling Reactions",[471,955,956,957,960,961,964,965,968,969,972],{},"Reactions render as a row of emoji. A screen reader reads each glyph with no context, and counters like ",[475,958,959],{},"+8"," are announced as \"plus eight\". Group the row as a single image with a descriptive ",[475,962,963],{},"aria-label"," so it announces once. ",[475,966,967],{},"role=\"img\""," also hides the individual emoji from assistive tech, so no ",[475,970,971],{},"aria-hidden"," is needed.",[521,974,977],{"className":975,"code":976,"language":562,"meta":563},[560],"\u003CBubbleReactions role=\"img\" aria-label=\"Reactions: thumbs up, fire, and 8 more\">\n  \u003Cspan>👍\u003C/span>\n  \u003Cspan>🔥\u003C/span>\n  \u003Cspan>+8\u003C/span>\n\u003C/BubbleReactions>\n",[475,978,976],{"__ignoreMap":527},[471,980,981,982,494],{},"When reactions are interactive, render buttons instead and give icon-only buttons an ",[475,983,963],{},[521,985,988],{"className":986,"code":987,"language":562,"meta":563},[560],"\u003CBubbleReactions>\n  \u003CButton aria-label=\"Thumbs up\" variant=\"secondary\" size=\"icon-xs\">\n    \u003CThumbsUpIcon />\n  \u003C/Button>\n\u003C/BubbleReactions>\n",[475,989,987],{"__ignoreMap":527},[636,991,993],{"id":992},"interactive-bubbles","Interactive Bubbles",[471,995,996,997,620,1000,1003,1004,1006,1007,1009,1010,1012],{},"When a bubble is clickable, pass a real ",[475,998,999],{},"\u003Cbutton>",[475,1001,1002],{},"\u003Ca>"," through ",[475,1005,850],{}," with ",[475,1008,623],{}," so it is focusable and exposes the correct role. ",[475,1011,850],{}," ships a visible focus ring for interactive elements, and the accessible name comes from the bubble text. No extra label is needed.",[521,1014,1017],{"className":1015,"code":1016,"language":562,"meta":563},[560],"\u003CBubble variant=\"muted\" align=\"end\">\n  \u003CBubbleContent as-child>\n    \u003Cbutton type=\"button\" @click=\"onReply\">\n      I forgot my password\n    \u003C/button>\n  \u003C/BubbleContent>\n\u003C/Bubble>\n",[475,1018,1016],{"__ignoreMap":527},[636,1020,1022],{"id":1021},"meaning-beyond-color","Meaning Beyond Color",[471,1024,1025,1026,1028],{},"Bubble variants signal role and tone with color. Pair them with text, alignment, or icons so meaning is not conveyed by color alone. For a ",[475,1027,736],{}," bubble, keep the error context in the message text rather than relying on the color treatment.",[496,1030,1032],{"id":1031},"api-reference","API Reference",[471,1034,1035,1036,1039,1040,1042,1043,1045],{},"All Bubble parts render a ",[475,1037,1038],{},"\u003Cdiv>"," by default. Use ",[475,1041,619],{}," to choose another element, or ",[475,1044,623],{}," to merge the component's attributes and styles onto the single element or component in its default slot.",[636,1047,50],{"id":1048},"bubble",[471,1050,1051],{},"The root bubble wrapper.",[651,1053,1054,1069],{},[654,1055,1056],{},[657,1057,1058,1061,1064,1067],{},[660,1059,1060],{},"Prop",[660,1062,1063],{},"Type",[660,1065,1066],{},"Default",[660,1068,665],{},[667,1070,1071,1090,1109,1128,1147],{},[657,1072,1073,1077,1082,1087],{},[672,1074,1075],{},[475,1076,644],{},[672,1078,1079],{},[475,1080,1081],{},"\"default\" | \"secondary\" | \"muted\" | \"tinted\" | \"outline\" | \"ghost\" | \"destructive\"",[672,1083,1084],{},[475,1085,1086],{},"\"default\"",[672,1088,1089],{},"The bubble visual treatment.",[657,1091,1092,1096,1101,1106],{},[672,1093,1094],{},[475,1095,754],{},[672,1097,1098],{},[475,1099,1100],{},"\"start\" | \"end\"",[672,1102,1103],{},[475,1104,1105],{},"\"start\"",[672,1107,1108],{},"The inline alignment of the bubble.",[657,1110,1111,1115,1120,1125],{},[672,1112,1113],{},[475,1114,619],{},[672,1116,1117],{},[475,1118,1119],{},"string | Component",[672,1121,1122],{},[475,1123,1124],{},"\"div\"",[672,1126,1127],{},"The element or component to render.",[657,1129,1130,1134,1139,1144],{},[672,1131,1132],{},[475,1133,623],{},[672,1135,1136],{},[475,1137,1138],{},"boolean",[672,1140,1141],{},[475,1142,1143],{},"false",[672,1145,1146],{},"Render the default slot as the root and merge props onto it.",[657,1148,1149,1153,1158,1161],{},[672,1150,1151],{},[475,1152,630],{},[672,1154,1155],{},[475,1156,1157],{},"string",[672,1159,1160],{},"-",[672,1162,1163],{},"Additional classes to apply to the root element.",[636,1165,850],{"id":1166},"bubblecontent",[471,1168,1169],{},"The bubble content wrapper.",[651,1171,1172,1184],{},[654,1173,1174],{},[657,1175,1176,1178,1180,1182],{},[660,1177,1060],{},[660,1179,1063],{},[660,1181,1066],{},[660,1183,665],{},[667,1185,1186,1202,1218],{},[657,1187,1188,1192,1196,1200],{},[672,1189,1190],{},[475,1191,619],{},[672,1193,1194],{},[475,1195,1119],{},[672,1197,1198],{},[475,1199,1124],{},[672,1201,1127],{},[657,1203,1204,1208,1212,1216],{},[672,1205,1206],{},[475,1207,623],{},[672,1209,1210],{},[475,1211,1138],{},[672,1213,1214],{},[475,1215,1143],{},[672,1217,1146],{},[657,1219,1220,1224,1228,1230],{},[672,1221,1222],{},[475,1223,630],{},[672,1225,1226],{},[475,1227,1157],{},[672,1229,1160],{},[672,1231,1232],{},"Additional classes to apply to the content element.",[636,1234,870],{"id":1235},"bubblereactions",[471,1237,1238],{},"Displays overlapped reactions for a bubble.",[651,1240,1241,1253],{},[654,1242,1243],{},[657,1244,1245,1247,1249,1251],{},[660,1246,1060],{},[660,1248,1063],{},[660,1250,1066],{},[660,1252,665],{},[667,1254,1255,1274,1292,1308,1324],{},[657,1256,1257,1261,1266,1271],{},[672,1258,1259],{},[475,1260,874],{},[672,1262,1263],{},[475,1264,1265],{},"\"top\" | \"bottom\"",[672,1267,1268],{},[475,1269,1270],{},"\"bottom\"",[672,1272,1273],{},"The side of the bubble to anchor the reactions.",[657,1275,1276,1280,1284,1289],{},[672,1277,1278],{},[475,1279,754],{},[672,1281,1282],{},[475,1283,1100],{},[672,1285,1286],{},[475,1287,1288],{},"\"end\"",[672,1290,1291],{},"The inline alignment of the reactions.",[657,1293,1294,1298,1302,1306],{},[672,1295,1296],{},[475,1297,619],{},[672,1299,1300],{},[475,1301,1119],{},[672,1303,1304],{},[475,1305,1124],{},[672,1307,1127],{},[657,1309,1310,1314,1318,1322],{},[672,1311,1312],{},[475,1313,623],{},[672,1315,1316],{},[475,1317,1138],{},[672,1319,1320],{},[475,1321,1143],{},[672,1323,1146],{},[657,1325,1326,1330,1334,1336],{},[672,1327,1328],{},[475,1329,630],{},[672,1331,1332],{},[475,1333,1157],{},[672,1335,1160],{},[672,1337,1338],{},"Additional classes to apply to the reaction row.",[636,1340,586],{"id":1341},"bubblegroup",[471,1343,1344],{},"Groups consecutive bubbles from the same sender.",[651,1346,1347,1359],{},[654,1348,1349],{},[657,1350,1351,1353,1355,1357],{},[660,1352,1060],{},[660,1354,1063],{},[660,1356,1066],{},[660,1358,665],{},[667,1360,1361,1377,1393],{},[657,1362,1363,1367,1371,1375],{},[672,1364,1365],{},[475,1366,619],{},[672,1368,1369],{},[475,1370,1119],{},[672,1372,1373],{},[475,1374,1124],{},[672,1376,1127],{},[657,1378,1379,1383,1387,1391],{},[672,1380,1381],{},[475,1382,623],{},[672,1384,1385],{},[475,1386,1138],{},[672,1388,1389],{},[475,1390,1143],{},[672,1392,1146],{},[657,1394,1395,1399,1403,1405],{},[672,1396,1397],{},[475,1398,630],{},[672,1400,1401],{},[475,1402,1157],{},[672,1404,1160],{},[672,1406,1407],{},"Additional classes to apply to the group root.",{"title":527,"searchDepth":1409,"depth":1409,"links":1410},2,[1411,1412,1413,1414,1415,1426,1431],{"id":498,"depth":1409,"text":295},{"id":555,"depth":1409,"text":556},{"id":568,"depth":1409,"text":569},{"id":596,"depth":1409,"text":597},{"id":634,"depth":1409,"text":358,"children":1416},[1417,1419,1420,1421,1422,1423,1424,1425],{"id":638,"depth":1418,"text":639},3,{"id":748,"depth":1418,"text":749},{"id":814,"depth":1418,"text":815},{"id":841,"depth":1418,"text":842},{"id":864,"depth":1418,"text":865},{"id":893,"depth":1418,"text":894},{"id":913,"depth":1418,"text":286},{"id":928,"depth":1418,"text":194},{"id":943,"depth":1409,"text":944,"children":1427},[1428,1429,1430],{"id":952,"depth":1418,"text":953},{"id":992,"depth":1418,"text":993},{"id":1021,"depth":1418,"text":1022},{"id":1031,"depth":1409,"text":1032,"children":1432},[1433,1434,1435,1436],{"id":1048,"depth":1418,"text":50},{"id":1166,"depth":1418,"text":850},{"id":1235,"depth":1418,"text":870},{"id":1341,"depth":1418,"text":586},"Displays conversational content in a message bubble. Supports variants, alignment, grouping, reactions, and collapsible content.","md",null,{"component":36},"---\ntitle: Bubble\ndescription: Displays conversational content in a message bubble. Supports variants, alignment, grouping, reactions, and collapsible content.\ncomponent: true\nnew: true\n---\n\n::component-preview\n---\nname: BubbleDemo\nclass: theme-blue\n---\n::\n\nThe `Bubble` component displays framed conversational content. Use it for chat text, short structured output, quoted replies, suggestions, and reactions.\n\nFor full-featured chat interfaces, use the [`Message`](/docs/components/message) component. `Bubble` is intentionally scoped to the bubble surface. Place avatars, names, timestamps, metadata, and message-level actions in [`Message`](/docs/components/message).\n\n\n## Installation\n\n::code-tabs\n\n::tabs-list\n\n  ::tabs-trigger{value=\"cli\"}\n  CLI\n  ::\n\n  ::tabs-trigger{value=\"manual\"}\n  Manual\n  ::\n\n::\n\n::tabs-content{value=\"cli\"}\n\n```bash\nnpx shadcn-vue@latest add bubble\n```\n\n::\n\n::tabs-content{value=\"manual\"}\n  ::steps\n    ::step\n    Copy and paste the [GitHub source code](https://github.com/unovue/shadcn-vue/tree/dev/apps/v4/registry/new-york-v4/ui/bubble) into your project.\n    ::\n\n    ::step\n    Update the import paths to match your project setup.\n    ::\n  ::\n::\n\n::\n\n## Usage\n\n```vue showLineNumbers\n\u003Cscript setup lang=\"ts\">\nimport { Bubble, BubbleContent, BubbleReactions } from '@/components/ui/bubble'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CBubble>\n    \u003CBubbleContent>\n      I checked the registry output and removed the stale route.\n    \u003C/BubbleContent>\n    \u003CBubbleReactions>\n      \u003Cspan>👍\u003C/span>\n    \u003C/BubbleReactions>\n  \u003C/Bubble>\n\u003C/template>\n```\n\n## Composition\n\nUse the following composition to build a bubble:\n\n```text\nBubble\n├── BubbleContent\n└── BubbleReactions\n```\n\nUse `BubbleGroup` to group consecutive bubbles from the same sender:\n\n```text\nBubbleGroup\n├── Bubble\n│   └── BubbleContent\n└── Bubble\n    └── BubbleContent\n```\n\n## Features\n\n- Seven visual variants, from a strong primary bubble to unframed ghost content\n- Start and end alignment for sender and receiver bubbles\n- Reactions that anchor to the bubble edge with configurable side and alignment\n- Bubbles size to their content, up to 80% of the container width\n- Polymorphic content via `as` or `as-child` for link and button bubbles\n- Customizable styling through the `class` prop on every part\n\n## Examples\n\n### Variants\n\nUse `variant` to change the visual treatment of the bubble.\n\n::component-preview\n---\nname: BubbleVariantsDemo\nclass: theme-blue\n---\n::\n\n| Variant       | Description                                            |\n| ------------- | ------------------------------------------------------ |\n| `default`     | A strong primary bubble, usually for the current user. |\n| `secondary`   | The standard neutral bubble for conversation content.  |\n| `muted`       | A lower-emphasis bubble for quiet supporting content.  |\n| `tinted`      | A subtle primary-tinted bubble.                        |\n| `outline`     | A bordered bubble for secondary or rich content.       |\n| `ghost`       | Unframed content for assistant text or rich content.   |\n| `destructive` | A destructive bubble for error or failed actions.      |\n\nA bubble sizes to its content, up to 80% of the container width. The `ghost` variant removes the max-width so assistant text and rich content can span the full row.\n\n### Alignment\n\nUse `align` on `Bubble` to align the bubble to the start or end of the conversation.\n\n::component-preview\n---\nname: BubbleAlignmentDemo\nclass: theme-blue\n---\n::\n\n| align   | Description                                        |\n| ------- | -------------------------------------------------- |\n| `start` | Align the bubble to the start of the conversation. |\n| `end`   | Align the bubble to the end of the conversation.   |\n\n**Note:** When building chat interfaces, you probably want to set `align` on the `Message` component itself. Bubbles inside `MessageContent` automatically follow the message alignment.\n\n### Bubble Group\n\nUse `BubbleGroup` to group consecutive bubbles from the same sender. Note the `align` prop should be set on the `Bubble` component itself, not the `BubbleGroup` component.\n\n```text\nBubbleGroup\n├── Bubble\n│   └── BubbleContent\n└── Bubble\n    └── BubbleContent\n```\n\n::component-preview\n---\nname: BubbleGroupDemo\nclass: theme-blue\n---\n::\n\n### Links and Buttons\n\nUse `as-child` to merge `BubbleContent` styling and attributes onto a link or button passed through its default slot.\n\n::component-preview\n---\nname: BubbleLinksAndButtonsDemo\nclass: theme-blue\n---\n::\n\n```vue showLineNumbers\n\u003Cscript setup lang=\"ts\">\nimport { Bubble, BubbleContent } from '@/components/ui/bubble'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CBubble variant=\"muted\">\n    \u003CBubbleContent as-child>\n      \u003Cbutton type=\"button\">Click here\u003C/button>\n    \u003C/BubbleContent>\n  \u003C/Bubble>\n\u003C/template>\n```\n\n### Reactions\n\nUse `BubbleReactions` for bubble reactions. You can use it 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 — the examples below use a larger `gap` for this reason.\n\n::component-preview\n---\nname: BubbleReactionsDemo\nclass: theme-blue\n---\n::\n\n### Show More / Collapsible\n\nLong bubble content can be composed with [`Collapsible`](/docs/components/collapsible) to allow for a show more or show less interaction. Use the `CollapsibleTrigger` component to trigger the collapsible content.\n\n::component-preview\n---\nname: BubbleCollapsibleDemo\nclass: theme-blue\n---\n::\n\n### Tooltip\n\nWrap a bubble in a [`Tooltip`](/docs/components/tooltip) to reveal metadata on hover, such as when a message was read.\n\n::component-preview\n---\nname: BubbleTooltipDemo\nclass: theme-blue\n---\n::\n\n### Popover\n\nPair a bubble with a [`Popover`](/docs/components/popover) to surface more information on demand, such as the full error message for a failed action.\n\n::component-preview\n---\nname: BubblePopoverDemo\nclass: theme-blue\n---\n::\n\n## Accessibility\n\n`Bubble` renders the presentational message surface. Keep conversation-level semantics on the surrounding container and follow the guidelines below.\n\n### Labeling Reactions\n\nReactions render as a row of emoji. A screen reader reads each glyph with no context, and counters like `+8` are announced as \"plus eight\". Group the row as a single image with a descriptive `aria-label` so it announces once. `role=\"img\"` also hides the individual emoji from assistive tech, so no `aria-hidden` is needed.\n\n```vue showLineNumbers\n\u003CBubbleReactions role=\"img\" aria-label=\"Reactions: thumbs up, fire, and 8 more\">\n  \u003Cspan>👍\u003C/span>\n  \u003Cspan>🔥\u003C/span>\n  \u003Cspan>+8\u003C/span>\n\u003C/BubbleReactions>\n```\n\nWhen reactions are interactive, render buttons instead and give icon-only buttons an `aria-label`.\n\n```vue showLineNumbers\n\u003CBubbleReactions>\n  \u003CButton aria-label=\"Thumbs up\" variant=\"secondary\" size=\"icon-xs\">\n    \u003CThumbsUpIcon />\n  \u003C/Button>\n\u003C/BubbleReactions>\n```\n\n### Interactive Bubbles\n\nWhen a bubble is clickable, pass a real `\u003Cbutton>` or `\u003Ca>` through `BubbleContent` with `as-child` so it is focusable and exposes the correct role. `BubbleContent` ships a visible focus ring for interactive elements, and the accessible name comes from the bubble text. No extra label is needed.\n\n```vue showLineNumbers\n\u003CBubble variant=\"muted\" align=\"end\">\n  \u003CBubbleContent as-child>\n    \u003Cbutton type=\"button\" @click=\"onReply\">\n      I forgot my password\n    \u003C/button>\n  \u003C/BubbleContent>\n\u003C/Bubble>\n```\n\n### Meaning Beyond Color\n\nBubble variants signal role and tone with color. Pair them with text, alignment, or icons so meaning is not conveyed by color alone. For a `destructive` bubble, keep the error context in the message text rather than relying on the color treatment.\n\n## API Reference\n\nAll Bubble parts render a `\u003Cdiv>` by default. Use `as` to choose another element, or `as-child` to merge the component's attributes and styles onto the single element or component in its default slot.\n\n### Bubble\n\nThe root bubble wrapper.\n\n| Prop       | Type                                                                                       | Default     | Description                                                     |\n| ---------- | ------------------------------------------------------------------------------------------ | ----------- | --------------------------------------------------------------- |\n| `variant`  | `\"default\" \\| \"secondary\" \\| \"muted\" \\| \"tinted\" \\| \"outline\" \\| \"ghost\" \\| \"destructive\"` | `\"default\"` | The bubble visual treatment.                                    |\n| `align`    | `\"start\" \\| \"end\"`                                                                         | `\"start\"`   | The inline alignment of the bubble.                             |\n| `as`       | `string \\| Component`                                                                       | `\"div\"`     | The element or component to render.                             |\n| `as-child` | `boolean`                                                                                    | `false`     | Render the default slot as the root and merge props onto it.    |\n| `class`    | `string`                                                                                     | -           | Additional classes to apply to the root element.                |\n\n### BubbleContent\n\nThe bubble content wrapper.\n\n| Prop       | Type                 | Default | Description                                                  |\n| ---------- | -------------------- | ------- | ------------------------------------------------------------ |\n| `as`       | `string \\| Component` | `\"div\"` | The element or component to render.                          |\n| `as-child` | `boolean`            | `false` | Render the default slot as the root and merge props onto it. |\n| `class`    | `string`             | -       | Additional classes to apply to the content element.          |\n\n### BubbleReactions\n\nDisplays overlapped reactions for a bubble.\n\n| Prop       | Type                 | Default    | Description                                                  |\n| ---------- | -------------------- | ---------- | ------------------------------------------------------------ |\n| `side`     | `\"top\" \\| \"bottom\"` | `\"bottom\"` | The side of the bubble to anchor the reactions.              |\n| `align`    | `\"start\" \\| \"end\"`  | `\"end\"`    | The inline alignment of the reactions.                       |\n| `as`       | `string \\| Component` | `\"div\"`    | The element or component to render.                          |\n| `as-child` | `boolean`            | `false`    | Render the default slot as the root and merge props onto it. |\n| `class`    | `string`             | -          | Additional classes to apply to the reaction row.             |\n\n### BubbleGroup\n\nGroups consecutive bubbles from the same sender.\n\n| Prop       | Type                 | Default | Description                                                  |\n| ---------- | -------------------- | ------- | ------------------------------------------------------------ |\n| `as`       | `string \\| Component` | `\"div\"` | The element or component to render.                          |\n| `as-child` | `boolean`            | `false` | Render the default slot as the root and merge props onto it. |\n| `class`    | `string`             | -       | Additional classes to apply to the group root.               |\n",{"title":50,"description":1437},"-WcWrcBeJYPx6xNxiramfz93CCfX5SQy1LA8rmDweME",[1445,1446],{"title":46,"path":47,"stem":48,"children":-1},{"title":54,"path":55,"stem":56,"children":-1},1783698898222]