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