[{"data":1,"prerenderedAt":438},["ShallowReactive",2],{"mobile-docs-navigation":3,"command-menu-docs":74,"navigation":105,"mobile-docs-page-meta":127,"docs-pages-category":147,"\u002Fdocs\u002Fcomponents\u002Fchat-message":163,"surround-\u002Fdocs\u002Fcomponents\u002Fchat-message":435},[4],{"title":5,"path":6,"stem":7,"children":8,"page":73},"Docs","\u002Fdocs","docs",[9,19],{"title":10,"path":11,"stem":12,"children":13},"Introduction","\u002Fdocs\u002Fgetting-started","docs\u002F1.getting-started\u002F1.index",[14,15],{"title":10,"path":11,"stem":12},{"title":16,"path":17,"stem":18},"Installation","\u002Fdocs\u002Fgetting-started\u002Finstallation","docs\u002F1.getting-started\u002F2.installation",{"title":20,"path":21,"stem":22,"children":23},"Components","\u002Fdocs\u002Fcomponents","docs\u002F2.components\u002F0.index",[24,25,29,33,37,41,45,49,53,57,61,65,69],{"title":20,"path":21,"stem":22},{"title":26,"path":27,"stem":28},"Chat","\u002Fdocs\u002Fcomponents\u002Fchat","docs\u002F2.components\u002F1.chat",{"title":30,"path":31,"stem":32},"PolaroidCard","\u002Fdocs\u002Fcomponents\u002Fpolaroid-card","docs\u002F2.components\u002F10.polaroid-card",{"title":34,"path":35,"stem":36},"ChatMessage","\u002Fdocs\u002Fcomponents\u002Fchat-message","docs\u002F2.components\u002F2.chat-message",{"title":38,"path":39,"stem":40},"ChatMessages","\u002Fdocs\u002Fcomponents\u002Fchat-messages","docs\u002F2.components\u002F3.chat-messages",{"title":42,"path":43,"stem":44},"ChatPrompt","\u002Fdocs\u002Fcomponents\u002Fchat-prompt","docs\u002F2.components\u002F4.chat-prompt",{"title":46,"path":47,"stem":48},"ChatPromptSubmit","\u002Fdocs\u002Fcomponents\u002Fchat-prompt-submit","docs\u002F2.components\u002F5.chat-prompt-submit",{"title":50,"path":51,"stem":52},"DocsSearchModal","\u002Fdocs\u002Fcomponents\u002Fdocs-search-modal","docs\u002F2.components\u002F6.docs-search-modal",{"title":54,"path":55,"stem":56},"PricingPlans","\u002Fdocs\u002Fcomponents\u002Fpricing-plans","docs\u002F2.components\u002F7.pricing-plans",{"title":58,"path":59,"stem":60},"PageToc","\u002Fdocs\u002Fcomponents\u002Fpage-toc","docs\u002F2.components\u002F8.page-toc",{"title":62,"path":63,"stem":64},"ReasoningDisclosure","\u002Fdocs\u002Fcomponents\u002Freasoning-disclosure","docs\u002F2.components\u002F8.reasoning-disclosure",{"title":66,"path":67,"stem":68},"DocsPager","\u002Fdocs\u002Fcomponents\u002Fdocs-pager","docs\u002F2.components\u002F9.docs-pager",{"title":70,"path":71,"stem":72},"HomeCta","\u002Fdocs\u002Fcomponents\u002Fhome-cta","docs\u002F2.components\u002F9.home-cta",false,[75,77,79,81,83,85,87,89,91,93,95,97,99,101,103],{"path":27,"title":26,"description":76},"Build Nuxt chat interfaces with installable shadcn-vue components you own and compose.",{"path":35,"title":34,"description":78},"Render an individual chat message bubble with AI SDK parts, actions, and layout control.",{"path":39,"title":38,"description":80},"Compose chat message lists with scrolling behavior, loading states, and action-ready assistant output.",{"path":43,"title":42,"description":82},"Build chat input flows with an auto-resizing prompt, keyboard shortcuts, and flexible slot composition.",{"path":47,"title":46,"description":84},"Handle chat submit, stop, and retry actions with a status-aware control for prompt workflows.",{"path":21,"title":20,"description":86},"Explore reusable components that complement Nuxt templates and real app workflows.",{"path":67,"title":66,"description":88},"Render previous and next documentation links from app-owned page data.",{"path":51,"title":50,"description":90},"Add a lightweight local search modal to Nuxt documentation interfaces.",{"path":71,"title":70,"description":92},"Render a centered marketing CTA section with an integrated starfield background.",{"path":17,"title":16,"description":94},"Start from templates or install individual components in your Nuxt project.",{"path":11,"title":10,"description":96},"Stackhacker UI is an open-source collection of Nuxt templates and components for the shadcn-vue community.",{"path":59,"title":58,"description":98},"Render an on-page table of contents from app-supplied heading links.",{"path":31,"title":30,"description":100},"Render a tilted photo card with app-owned image data and explicit presentation controls.",{"path":55,"title":54,"description":102},"Render a responsive pricing plan section from app-owned data.",{"path":63,"title":62,"description":104},"Show app-owned AI reasoning text in a compact collapsible disclosure.",[106],{"title":5,"path":6,"stem":7,"children":107,"page":73},[108,112],{"title":10,"path":11,"stem":12,"children":109},[110,111],{"title":10,"path":11,"stem":12},{"title":16,"path":17,"stem":18},{"title":20,"path":21,"stem":22,"children":113},[114,115,116,117,118,119,120,121,122,123,124,125,126],{"title":20,"path":21,"stem":22},{"title":26,"path":27,"stem":28},{"title":30,"path":31,"stem":32},{"title":34,"path":35,"stem":36},{"title":38,"path":39,"stem":40},{"title":42,"path":43,"stem":44},{"title":46,"path":47,"stem":48},{"title":50,"path":51,"stem":52},{"title":54,"path":55,"stem":56},{"title":58,"path":59,"stem":60},{"title":62,"path":63,"stem":64},{"title":66,"path":67,"stem":68},{"title":70,"path":71,"stem":72},[128,130,131,132,134,136,137,138,139,140,141,143,144,145,146],{"path":11,"category":129},"overview",{"path":17,"category":129},{"path":21,"category":129},{"path":27,"category":133},"chat",{"path":31,"category":135},"content",{"path":35,"category":133},{"path":39,"category":133},{"path":43,"category":133},{"path":47,"category":133},{"path":51,"category":135},{"path":55,"category":142},"marketing",{"path":59,"category":135},{"path":63,"category":133},{"path":67,"category":135},{"path":71,"category":142},[148,149,150,151,152,153,154,155,156,157,158,159,160,161,162],{"path":11,"category":129},{"path":17,"category":129},{"path":21,"category":129},{"path":27,"category":133},{"path":31,"category":135},{"path":35,"category":133},{"path":39,"category":133},{"path":43,"category":133},{"path":47,"category":133},{"path":51,"category":135},{"path":55,"category":142},{"path":59,"category":135},{"path":63,"category":133},{"path":67,"category":135},{"path":71,"category":142},{"id":164,"title":34,"body":165,"category":133,"description":78,"extension":430,"meta":431,"navigation":432,"path":35,"seo":433,"stem":36,"__hash__":434},"docs\u002Fdocs\u002F2.components\u002F2.chat-message.md",{"type":166,"value":167,"toc":416},"minimark",[168,172,176,187,191,199,203,208,210,214,218,359,363,404,408],[169,170],"component-preview",{"name":171},"ChatMessageDemo",[173,174,16],"h2",{"id":175},"installation",[177,178,184],"pre",{"className":179,"code":181,"language":182,"meta":183},[180],"language-bash","npx shadcn-vue@latest add \"https:\u002F\u002Fui.stackhacker.io\u002Fr\u002Fchat-message.json\"\n","bash","",[185,186,181],"code",{"__ignoreMap":183},[173,188,190],{"id":189},"usage","Usage",[177,192,197],{"className":193,"code":195,"language":196,"meta":183},[194],"language-vue","\u003Cscript setup lang=\"ts\">\nimport { Copy } from '@lucide\u002Fvue'\nimport { ChatMessage } from '@\u002Fcomponents\u002Fchat-message'\n\nconst actions = [\n  { label: 'Copy message', icon: Copy }\n]\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CChatMessage\n    id=\"1\"\n    role=\"assistant\"\n    :parts=\"[{ type: 'text', text: 'Hello!' }]\"\n    side=\"left\"\n    :actions=\"actions\"\n  \u002F>\n\u003C\u002Ftemplate>\n","vue",[185,198,195],{"__ignoreMap":183},[173,200,202],{"id":201},"examples","Examples",[204,205,207],"h3",{"id":206},"default","Default",[169,209],{"name":171},[173,211,213],{"id":212},"api-reference","API Reference",[204,215,217],{"id":216},"props","Props",[219,220,221,239],"table",{},[222,223,224],"thead",{},[225,226,227,231,234,236],"tr",{},[228,229,230],"th",{},"Prop",[228,232,233],{},"Type",[228,235,207],{},[228,237,238],{},"Description",[240,241,242,261,278,295,315,343],"tbody",{},[225,243,244,250,255,258],{},[245,246,247],"td",{},[185,248,249],{},"id",[245,251,252],{},[185,253,254],{},"string",[245,256,257],{},"—",[245,259,260],{},"Message ID.",[225,262,263,268,273,275],{},[245,264,265],{},[185,266,267],{},"role",[245,269,270],{},[185,271,272],{},"'user' | 'assistant' | 'system'",[245,274,257],{},[245,276,277],{},"Message role.",[225,279,280,285,290,292],{},[245,281,282],{},[185,283,284],{},"parts",[245,286,287],{},[185,288,289],{},"UIMessage['parts']",[245,291,257],{},[245,293,294],{},"Message parts from AI SDK.",[225,296,297,302,307,312],{},[245,298,299],{},[185,300,301],{},"side",[245,303,304],{},[185,305,306],{},"'left' | 'right'",[245,308,309],{},[185,310,311],{},"'left'",[245,313,314],{},"Which side to render the message.",[225,316,317,322,327,332],{},[245,318,319],{},[185,320,321],{},"actions",[245,323,324],{},[185,325,326],{},"ChatMessageAction[]",[245,328,329],{},[185,330,331],{},"[]",[245,333,334,335,338,339,342],{},"Action buttons shown on hover. Each ",[185,336,337],{},"icon"," is a Vue component and each ",[185,340,341],{},"label"," is used for the tooltip and accessible button name.",[225,344,345,350,354,356],{},[245,346,347],{},[185,348,349],{},"class",[245,351,352],{},[185,353,254],{},[245,355,257],{},[245,357,358],{},"Additional CSS classes.",[204,360,362],{"id":361},"slots","Slots",[219,364,365,376],{},[222,366,367],{},[225,368,369,372,374],{},[228,370,371],{},"Slot",[228,373,217],{},[228,375,238],{},[240,377,378,390],{},[225,379,380,385,387],{},[245,381,382],{},[185,383,384],{},"leading",[245,386,257],{},[245,388,389],{},"Content rendered before the message (e.g., avatar).",[225,391,392,396,401],{},[245,393,394],{},[185,395,135],{},[245,397,398],{},[185,399,400],{},"{ id, role, parts }",[245,402,403],{},"Custom message content renderer.",[204,405,407],{"id":406},"types","Types",[177,409,414],{"className":410,"code":412,"language":413,"meta":183},[411],"language-ts","interface ChatMessageAction {\n  label: string\n  icon: Component\n  onClick?: (e: MouseEvent, message: UIMessage) => void\n}\n","ts",[185,415,412],{"__ignoreMap":183},{"title":183,"searchDepth":417,"depth":417,"links":418},2,[419,420,421,425],{"id":175,"depth":417,"text":16},{"id":189,"depth":417,"text":190},{"id":201,"depth":417,"text":202,"children":422},[423],{"id":206,"depth":424,"text":207},3,{"id":212,"depth":417,"text":213,"children":426},[427,428,429],{"id":216,"depth":424,"text":217},{"id":361,"depth":424,"text":362},{"id":406,"depth":424,"text":407},"md",{},true,{"title":34,"description":78},"RRL_pWjkGW27EfdOGzoOMaOkfm0pKA4qi958Uyj9V0Y",[436,437],{"title":30,"path":31,"stem":32,"children":-1},{"title":38,"path":39,"stem":40,"children":-1},1782454465964]