[{"data":1,"prerenderedAt":1304},["ShallowReactive",2],{"navigation":3,"$fMW9jOOkNpZriWVK3P_bZYNOyYR2IEPvrHsC7cDBlJJc":446,"/docs/components/message":459,"surround-/docs/components/message":1301},[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":166,"body":461,"description":1294,"extension":1295,"links":1296,"meta":1297,"navigation":36,"new":36,"path":167,"rawbody":1298,"seo":1299,"stem":168,"__hash__":1300},"content/docs/components/message.md",{"type":462,"value":463,"toc":1268},"minimark",[464,470,478,484,488,543,547,556,571,575,578,586,593,599,603,647,650,654,663,667,706,709,717,721,725,735,739,743,749,753,757,762,766,775,781,785,797,803,807,820,823,826,919,922,925,988,991,997,1060,1064,1067,1130,1133,1136,1199,1202,1205],[465,466],"component-preview",{"className":467,"name":469},[468],"theme-blue","MessageDemo",[471,472,473,474,477],"p",{},"The ",[475,476,166],"code",{}," component lays out a single message in a conversation. It handles the avatar, alignment, header, and footer around the message surface.",[471,479,480,481,483],{},"For AI apps, you can render reasoning steps, tool calls and assistant messages using the ",[475,482,166],{}," component.",[485,486,295],"h2",{"id":487},"installation",[489,490,491,506,519],"code-tabs",{},[492,493,494,500],"tabs-list",{},[495,496,498],"tabs-trigger",{"value":497},"cli",[471,499,419],{},[495,501,503],{"value":502},"manual",[471,504,505],{},"Manual",[507,508,509],"tabs-content",{"value":497},[510,511,517],"pre",{"className":512,"code":514,"language":515,"meta":516},[513],"language-bash","npx shadcn-vue@latest add message\n","bash","",[475,518,514],{"__ignoreMap":516},[507,520,521],{"value":502},[522,523,524,538],"steps",{},[525,526,527],"step",{},[471,528,529,530,537],{},"Copy and paste the ",[531,532,536],"a",{"href":533,"rel":534},"https://github.com/unovue/shadcn-vue/tree/dev/apps/v4/registry/new-york-v4/ui/message",[535],"nofollow","GitHub source code"," into your project.",[525,539,540],{},[471,541,542],{},"Update the import paths to match your project setup.",[485,544,546],{"id":545},"usage","Usage",[510,548,554],{"className":549,"code":551,"language":552,"meta":553},[550],"language-vue","\u003Cscript setup lang=\"ts\">\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Bubble, BubbleContent } from \"@/components/ui/bubble\"\nimport { Message, MessageAvatar, MessageContent } from \"@/components/ui/message\"\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CMessage>\n    \u003CMessageAvatar>\n      \u003CAvatar>\n        \u003CAvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n        \u003CAvatarFallback>CN\u003C/AvatarFallback>\n      \u003C/Avatar>\n    \u003C/MessageAvatar>\n    \u003CMessageContent>\n      \u003CBubble>\n        \u003CBubbleContent>How can I help you today?\u003C/BubbleContent>\n      \u003C/Bubble>\n    \u003C/MessageContent>\n  \u003C/Message>\n\u003C/template>\n","vue","showLineNumbers",[475,555,551],{"__ignoreMap":516},[471,557,558,562,563,565,566,570],{},[559,560,561],"strong",{},"Note:"," ",[475,564,166],{}," owns the row layout—avatar, alignment, header, and footer.\nRender the visible message surface inside it with\n",[531,567,568],{"href":51},[475,569,50],{},".",[485,572,574],{"id":573},"composition","Composition",[471,576,577],{},"Use the following composition to build a message:",[510,579,584],{"className":580,"code":582,"language":583,"meta":516},[581],"language-text","Message\n├── MessageAvatar\n└── MessageContent\n    ├── MessageHeader\n    ├── Bubble\n    └── MessageFooter\n","text",[475,585,582],{"__ignoreMap":516},[471,587,588,589,592],{},"Use ",[475,590,591],{},"MessageGroup"," to stack consecutive messages from the same sender:",[510,594,597],{"className":595,"code":596,"language":583,"meta":516},[581],"MessageGroup\n├── Message\n└── Message\n",[475,598,596],{"__ignoreMap":516},[485,600,602],{"id":601},"features","Features",[604,605,606,614,617,620,627,630,640],"ul",{},[607,608,609,610,613],"li",{},"Start and end alignment for sender and receiver rows via the ",[475,611,612],{},"align"," prop",[607,615,616],{},"Avatar slot that anchors to the bottom of the message and stays clear of the footer",[607,618,619],{},"Header and footer slots for sender names, status, and message actions",[607,621,622,623,626],{},"Footer follows the message side; actions stay aligned on ",[475,624,625],{},"align=\"end\""," rows",[607,628,629],{},"Group wrapper for stacking consecutive messages from the same sender",[607,631,632,633,636,637],{},"Polymorphic wrappers via ",[475,634,635],{},"as"," or ",[475,638,639],{},"as-child",[607,641,642,643,646],{},"Customizable styling through the ",[475,644,645],{},"class"," prop on every part",[485,648,358],{"id":649},"examples",[651,652,38],"h3",{"id":653},"avatar",[471,655,588,656,659,660,662],{},[475,657,658],{},"MessageAvatar"," to render an avatar next to the message. Set ",[475,661,625],{}," on the message to align the avatar to the end of the message.",[465,664],{"className":665,"name":666},[468],"MessageAvatarDemo",[668,669,670,682],"table",{},[671,672,673],"thead",{},[674,675,676,679],"tr",{},[677,678,612],"th",{},[677,680,681],{},"Description",[683,684,685,696],"tbody",{},[674,686,687,693],{},[688,689,690],"td",{},[475,691,692],{},"start",[688,694,695],{},"Align the message to the start of the conversation.",[674,697,698,703],{},[688,699,700],{},[475,701,702],{},"end",[688,704,705],{},"Align the message to the end of the conversation.",[651,707,708],{"id":293},"Group",[471,710,588,711,713,714,716],{},[475,712,591],{}," to stack consecutive messages from the same sender. Render an empty ",[475,715,658],{}," on the earlier messages to keep them aligned with the avatar on the last one.",[465,718],{"className":719,"name":720},[468],"MessageGroupDemo",[651,722,724],{"id":723},"header-and-footer","Header and Footer",[471,726,588,727,730,731,734],{},[475,728,729],{},"MessageHeader"," for a sender name and ",[475,732,733],{},"MessageFooter"," for metadata such as a delivery or read status.",[465,736],{"className":737,"name":738},[468],"MessageHeaderAndFooterDemo",[651,740,742],{"id":741},"actions","Actions",[471,744,745,746,748],{},"Place message-level actions in ",[475,747,733],{},", such as copy, retry, or feedback buttons.",[465,750],{"className":751,"name":752},[468],"MessageActionsDemo",[485,754,756],{"id":755},"accessibility","Accessibility",[471,758,759,761],{},[475,760,166],{}," is a presentational layout wrapper. Accessibility comes from the content you place inside it.",[651,763,765],{"id":764},"label-icon-only-actions","Label icon-only actions",[471,767,768,769,771,772,570],{},"Action buttons in ",[475,770,733],{}," are usually icon-only, so give each one an ",[475,773,774],{},"aria-label",[510,776,779],{"className":777,"code":778,"language":552,"meta":553},[550],"\u003CMessageFooter>\n  \u003CButton variant=\"ghost\" size=\"icon\" aria-label=\"Copy\">\n    \u003CCopyIcon />\n  \u003C/Button>\n\u003C/MessageFooter>\n",[475,780,778],{"__ignoreMap":516},[651,782,784],{"id":783},"status-updates","Status updates",[471,786,787,788,792,793,796],{},"For in-progress messages, use a ",[531,789,790],{"href":159},[475,791,158],{}," with ",[475,794,795],{},"role=\"status\""," so assistive tech announces the update as it appears.",[510,798,801],{"className":799,"code":800,"language":552,"meta":553},[550],"\u003CMessage>\n  \u003CMarker role=\"status\">\n    \u003CMarkerIcon>\n      \u003CSpinner />\n    \u003C/MarkerIcon>\n    \u003CMarkerContent>Checking the logs...\u003C/MarkerContent>\n  \u003C/Marker>\n\u003C/Message>\n",[475,802,800],{"__ignoreMap":516},[485,804,806],{"id":805},"api-reference","API Reference",[471,808,809,810,813,814,816,817,819],{},"All Message parts render a ",[475,811,812],{},"\u003Cdiv>"," by default. Use ",[475,815,635],{}," to choose another element, or ",[475,818,639],{}," to merge the component's attributes and styles onto the single element or component in its default slot.",[651,821,166],{"id":822},"message",[471,824,825],{},"The message row wrapper.",[668,827,828,843],{},[671,829,830],{},[674,831,832,835,838,841],{},[677,833,834],{},"Prop",[677,836,837],{},"Type",[677,839,840],{},"Default",[677,842,681],{},[683,844,845,864,883,902],{},[674,846,847,851,856,861],{},[688,848,849],{},[475,850,612],{},[688,852,853],{},[475,854,855],{},"\"start\" | \"end\"",[688,857,858],{},[475,859,860],{},"\"start\"",[688,862,863],{},"The alignment of the message in the conversation.",[674,865,866,870,875,880],{},[688,867,868],{},[475,869,635],{},[688,871,872],{},[475,873,874],{},"string | Component",[688,876,877],{},[475,878,879],{},"\"div\"",[688,881,882],{},"The element or component to render.",[674,884,885,889,894,899],{},[688,886,887],{},[475,888,639],{},[688,890,891],{},[475,892,893],{},"boolean",[688,895,896],{},[475,897,898],{},"false",[688,900,901],{},"Render the default slot as the root and merge props onto it.",[674,903,904,908,913,916],{},[688,905,906],{},[475,907,645],{},[688,909,910],{},[475,911,912],{},"string",[688,914,915],{},"-",[688,917,918],{},"Additional classes to apply to the row.",[651,920,591],{"id":921},"messagegroup",[471,923,924],{},"Groups consecutive messages from the same sender.",[668,926,927,939],{},[671,928,929],{},[674,930,931,933,935,937],{},[677,932,834],{},[677,934,837],{},[677,936,840],{},[677,938,681],{},[683,940,941,957,973],{},[674,942,943,947,951,955],{},[688,944,945],{},[475,946,635],{},[688,948,949],{},[475,950,874],{},[688,952,953],{},[475,954,879],{},[688,956,882],{},[674,958,959,963,967,971],{},[688,960,961],{},[475,962,639],{},[688,964,965],{},[475,966,893],{},[688,968,969],{},[475,970,898],{},[688,972,901],{},[674,974,975,979,983,985],{},[688,976,977],{},[475,978,645],{},[688,980,981],{},[475,982,912],{},[688,984,915],{},[688,986,987],{},"Additional classes to apply to the group root.",[651,989,658],{"id":990},"messageavatar",[471,992,993,994,996],{},"The avatar slot, aligned to the bottom of the message. When the message has a ",[475,995,733],{},", the avatar shifts up to stay aligned with the message surface instead of the footer.",[668,998,999,1011],{},[671,1000,1001],{},[674,1002,1003,1005,1007,1009],{},[677,1004,834],{},[677,1006,837],{},[677,1008,840],{},[677,1010,681],{},[683,1012,1013,1029,1045],{},[674,1014,1015,1019,1023,1027],{},[688,1016,1017],{},[475,1018,635],{},[688,1020,1021],{},[475,1022,874],{},[688,1024,1025],{},[475,1026,879],{},[688,1028,882],{},[674,1030,1031,1035,1039,1043],{},[688,1032,1033],{},[475,1034,639],{},[688,1036,1037],{},[475,1038,893],{},[688,1040,1041],{},[475,1042,898],{},[688,1044,901],{},[674,1046,1047,1051,1055,1057],{},[688,1048,1049],{},[475,1050,645],{},[688,1052,1053],{},[475,1054,912],{},[688,1056,915],{},[688,1058,1059],{},"Additional classes to apply to the avatar wrapper.",[651,1061,1063],{"id":1062},"messagecontent","MessageContent",[471,1065,1066],{},"Wraps the header, message surface, and footer.",[668,1068,1069,1081],{},[671,1070,1071],{},[674,1072,1073,1075,1077,1079],{},[677,1074,834],{},[677,1076,837],{},[677,1078,840],{},[677,1080,681],{},[683,1082,1083,1099,1115],{},[674,1084,1085,1089,1093,1097],{},[688,1086,1087],{},[475,1088,635],{},[688,1090,1091],{},[475,1092,874],{},[688,1094,1095],{},[475,1096,879],{},[688,1098,882],{},[674,1100,1101,1105,1109,1113],{},[688,1102,1103],{},[475,1104,639],{},[688,1106,1107],{},[475,1108,893],{},[688,1110,1111],{},[475,1112,898],{},[688,1114,901],{},[674,1116,1117,1121,1125,1127],{},[688,1118,1119],{},[475,1120,645],{},[688,1122,1123],{},[475,1124,912],{},[688,1126,915],{},[688,1128,1129],{},"Additional classes to apply to the content wrapper.",[651,1131,729],{"id":1132},"messageheader",[471,1134,1135],{},"Displays content above the message, such as a sender name. Aligns to the message side.",[668,1137,1138,1150],{},[671,1139,1140],{},[674,1141,1142,1144,1146,1148],{},[677,1143,834],{},[677,1145,837],{},[677,1147,840],{},[677,1149,681],{},[683,1151,1152,1168,1184],{},[674,1153,1154,1158,1162,1166],{},[688,1155,1156],{},[475,1157,635],{},[688,1159,1160],{},[475,1161,874],{},[688,1163,1164],{},[475,1165,879],{},[688,1167,882],{},[674,1169,1170,1174,1178,1182],{},[688,1171,1172],{},[475,1173,639],{},[688,1175,1176],{},[475,1177,893],{},[688,1179,1180],{},[475,1181,898],{},[688,1183,901],{},[674,1185,1186,1190,1194,1196],{},[688,1187,1188],{},[475,1189,645],{},[688,1191,1192],{},[475,1193,912],{},[688,1195,915],{},[688,1197,1198],{},"Additional classes to apply to the header.",[651,1200,733],{"id":1201},"messagefooter",[471,1203,1204],{},"Displays content below the message, such as status or actions. Aligns to the message side.",[668,1206,1207,1219],{},[671,1208,1209],{},[674,1210,1211,1213,1215,1217],{},[677,1212,834],{},[677,1214,837],{},[677,1216,840],{},[677,1218,681],{},[683,1220,1221,1237,1253],{},[674,1222,1223,1227,1231,1235],{},[688,1224,1225],{},[475,1226,635],{},[688,1228,1229],{},[475,1230,874],{},[688,1232,1233],{},[475,1234,879],{},[688,1236,882],{},[674,1238,1239,1243,1247,1251],{},[688,1240,1241],{},[475,1242,639],{},[688,1244,1245],{},[475,1246,893],{},[688,1248,1249],{},[475,1250,898],{},[688,1252,901],{},[674,1254,1255,1259,1263,1265],{},[688,1256,1257],{},[475,1258,645],{},[688,1260,1261],{},[475,1262,912],{},[688,1264,915],{},[688,1266,1267],{},"Additional classes to apply to the footer.",{"title":516,"searchDepth":1269,"depth":1269,"links":1270},2,[1271,1272,1273,1274,1275,1282,1286],{"id":487,"depth":1269,"text":295},{"id":545,"depth":1269,"text":546},{"id":573,"depth":1269,"text":574},{"id":601,"depth":1269,"text":602},{"id":649,"depth":1269,"text":358,"children":1276},[1277,1279,1280,1281],{"id":653,"depth":1278,"text":38},3,{"id":293,"depth":1278,"text":708},{"id":723,"depth":1278,"text":724},{"id":741,"depth":1278,"text":742},{"id":755,"depth":1269,"text":756,"children":1283},[1284,1285],{"id":764,"depth":1278,"text":765},{"id":783,"depth":1278,"text":784},{"id":805,"depth":1269,"text":806,"children":1287},[1288,1289,1290,1291,1292,1293],{"id":822,"depth":1278,"text":166},{"id":921,"depth":1278,"text":591},{"id":990,"depth":1278,"text":658},{"id":1062,"depth":1278,"text":1063},{"id":1132,"depth":1278,"text":729},{"id":1201,"depth":1278,"text":733},"Displays a message in a conversation, with optional avatar, header, footer, and alignment.","md",null,{"component":36},"---\ntitle: Message\ndescription: Displays a message in a conversation, with optional avatar, header, footer, and alignment.\ncomponent: true\nnew: true\n---\n\n::component-preview\n---\nname: MessageDemo\nclass: theme-blue\n---\n::\n\nThe `Message` component lays out a single message in a conversation. It handles the avatar, alignment, header, and footer around the message surface.\n\nFor AI apps, you can render reasoning steps, tool calls and assistant messages using the `Message` component.\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 message\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/message) 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 { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Bubble, BubbleContent } from \"@/components/ui/bubble\"\nimport { Message, MessageAvatar, MessageContent } from \"@/components/ui/message\"\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CMessage>\n    \u003CMessageAvatar>\n      \u003CAvatar>\n        \u003CAvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n        \u003CAvatarFallback>CN\u003C/AvatarFallback>\n      \u003C/Avatar>\n    \u003C/MessageAvatar>\n    \u003CMessageContent>\n      \u003CBubble>\n        \u003CBubbleContent>How can I help you today?\u003C/BubbleContent>\n      \u003C/Bubble>\n    \u003C/MessageContent>\n  \u003C/Message>\n\u003C/template>\n```\n\n\n**Note:** `Message` owns the row layout—avatar, alignment, header, and footer.\nRender the visible message surface inside it with\n[`Bubble`](/docs/components/bubble).\n\n## Composition\n\nUse the following composition to build a message:\n\n```text\nMessage\n├── MessageAvatar\n└── MessageContent\n    ├── MessageHeader\n    ├── Bubble\n    └── MessageFooter\n```\n\nUse `MessageGroup` to stack consecutive messages from the same sender:\n\n```text\nMessageGroup\n├── Message\n└── Message\n```\n\n## Features\n\n- Start and end alignment for sender and receiver rows via the `align` prop\n- Avatar slot that anchors to the bottom of the message and stays clear of the footer\n- Header and footer slots for sender names, status, and message actions\n- Footer follows the message side; actions stay aligned on `align=\"end\"` rows\n- Group wrapper for stacking consecutive messages from the same sender\n- Polymorphic wrappers via `as` or `as-child`\n- Customizable styling through the `class` prop on every part\n\n## Examples\n\n### Avatar\n\nUse `MessageAvatar` to render an avatar next to the message. Set `align=\"end\"` on the message to align the avatar to the end of the message.\n\n::component-preview\n---\nname: MessageAvatarDemo\nclass: theme-blue\n---\n::\n\n| align   | Description                                         |\n| ------- | --------------------------------------------------- |\n| `start` | Align the message to the start of the conversation. |\n| `end`   | Align the message to the end of the conversation.   |\n\n### Group\n\nUse `MessageGroup` to stack consecutive messages from the same sender. Render an empty `MessageAvatar` on the earlier messages to keep them aligned with the avatar on the last one.\n\n::component-preview\n---\nname: MessageGroupDemo\nclass: theme-blue\n---\n::\n\n### Header and Footer\n\nUse `MessageHeader` for a sender name and `MessageFooter` for metadata such as a delivery or read status.\n\n::component-preview\n---\nname: MessageHeaderAndFooterDemo\nclass: theme-blue\n---\n::\n\n### Actions\n\nPlace message-level actions in `MessageFooter`, such as copy, retry, or feedback buttons.\n\n::component-preview\n---\nname: MessageActionsDemo\nclass: theme-blue\n---\n::\n\n## Accessibility\n\n`Message` is a presentational layout wrapper. Accessibility comes from the content you place inside it.\n\n### Label icon-only actions\n\nAction buttons in `MessageFooter` are usually icon-only, so give each one an `aria-label`.\n\n```vue showLineNumbers\n\u003CMessageFooter>\n  \u003CButton variant=\"ghost\" size=\"icon\" aria-label=\"Copy\">\n    \u003CCopyIcon />\n  \u003C/Button>\n\u003C/MessageFooter>\n```\n\n### Status updates\n\nFor in-progress messages, use a [`Marker`](/docs/components/marker) with `role=\"status\"` so assistive tech announces the update as it appears.\n\n```vue showLineNumbers\n\u003CMessage>\n  \u003CMarker role=\"status\">\n    \u003CMarkerIcon>\n      \u003CSpinner />\n    \u003C/MarkerIcon>\n    \u003CMarkerContent>Checking the logs...\u003C/MarkerContent>\n  \u003C/Marker>\n\u003C/Message>\n```\n\n## API Reference\n\nAll Message 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### Message\n\nThe message row wrapper.\n\n| Prop       | Type                 | Default   | Description                                                  |\n| ---------- | -------------------- | --------- | ------------------------------------------------------------ |\n| `align`    | `\"start\" \\| \"end\"` | `\"start\"` | The alignment of the message in the conversation.            |\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 row.                      |\n\n### MessageGroup\n\nGroups consecutive messages 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\n### MessageAvatar\n\nThe avatar slot, aligned to the bottom of the message. When the message has a `MessageFooter`, the avatar shifts up to stay aligned with the message surface instead of the footer.\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 avatar wrapper.           |\n\n### MessageContent\n\nWraps the header, message surface, and footer.\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 wrapper.          |\n\n### MessageHeader\n\nDisplays content above the message, such as a sender name. Aligns to the message side.\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 header.                   |\n\n### MessageFooter\n\nDisplays content below the message, such as status or actions. Aligns to the message side.\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 footer.                   |\n",{"title":166,"description":1294},"copqGBavQr0qJ1effp5tZEfRPIyLADgyykOoPo5CDH0",[1302,1303],{"title":162,"path":163,"stem":164,"children":-1},{"title":170,"path":171,"stem":172,"children":-1},1783698905059]