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