[{"data":1,"prerenderedAt":368},["ShallowReactive",2],{"mobile-docs-navigation":3,"command-menu-docs":54,"navigation":75,"mobile-docs-page-meta":92,"docs-pages-category":107,"\u002Fdocs\u002Fcomponents\u002Fchat-messages":118,"surround-\u002Fdocs\u002Fcomponents\u002Fchat-messages":365},[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":34,"body":120,"category":98,"description":60,"extension":360,"meta":361,"navigation":362,"path":35,"seo":363,"stem":36,"__hash__":364},"docs\u002Fdocs\u002F2.components\u002F3.chat-messages.md",{"type":121,"value":122,"toc":347},"minimark",[123,127,131,142,146,154,158,163,165,169,173,299,303],[124,125],"component-preview",{"name":126},"ChatMessagesDemo",[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-messages.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 { ChatMessages } from '@\u002Fcomponents\u002Fchat-messages'\n\nconst assistant = {\n  actions: [{ label: 'Copy message', icon: Copy }]\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CChatMessages :messages=\"messages\" :status=\"status\" :assistant=\"assistant\" should-auto-scroll \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,218,242,262,282],"tbody",{},[180,198,199,205,210,215],{},[200,201,202],"td",{},[140,203,204],{},"messages",[200,206,207],{},[140,208,209],{},"UIMessage[]",[200,211,212],{},[140,213,214],{},"[]",[200,216,217],{},"Array of messages to display.",[180,219,220,225,230,235],{},[200,221,222],{},[140,223,224],{},"status",[200,226,227],{},[140,228,229],{},"'ready' | 'streaming' | 'submitted' | 'error'",[200,231,232],{},[140,233,234],{},"'ready'",[200,236,237,238,241],{},"Current chat status. Shows loading indicator when ",[140,239,240],{},"submitted",".",[180,243,244,249,254,259],{},[200,245,246],{},[140,247,248],{},"shouldAutoScroll",[200,250,251],{},[140,252,253],{},"boolean",[200,255,256],{},[140,257,258],{},"false",[200,260,261],{},"Enable auto-scroll to bottom on new messages.",[180,263,264,269,274,277],{},[200,265,266],{},[140,267,268],{},"assistant",[200,270,271],{},[140,272,273],{},"{ actions?: ChatMessageAction[] }",[200,275,276],{},"—",[200,278,279,280,241],{},"Assistant-specific configuration. Action icons are Vue components passed through to ",[140,281,30],{},[180,283,284,289,294,296],{},[200,285,286],{},[140,287,288],{},"class",[200,290,291],{},[140,292,293],{},"string",[200,295,276],{},[200,297,298],{},"Additional CSS classes.",[159,300,302],{"id":301},"slots","Slots",[174,304,305,316],{},[177,306,307],{},[180,308,309,312,314],{},[183,310,311],{},"Slot",[183,313,172],{},[183,315,193],{},[195,317,318,332],{},[180,319,320,324,329],{},[200,321,322],{},[140,323,104],{},[200,325,326],{},[140,327,328],{},"{ message, index, id, role, parts }",[200,330,331],{},"Custom message content renderer.",[180,333,334,339,341],{},[200,335,336],{},[140,337,338],{},"indicator",[200,340,276],{},[200,342,343,344,346],{},"Custom loading indicator (shown when status is ",[140,345,240],{},").",{"title":138,"searchDepth":348,"depth":348,"links":349},2,[350,351,352,356],{"id":130,"depth":348,"text":16},{"id":144,"depth":348,"text":145},{"id":156,"depth":348,"text":157,"children":353},[354],{"id":161,"depth":355,"text":162},3,{"id":167,"depth":348,"text":168,"children":357},[358,359],{"id":171,"depth":355,"text":172},{"id":301,"depth":355,"text":302},"md",{},true,{"title":34,"description":60},"J7Bcy52gWvMuNNbRuKjSao1AwVBC0ycER69Eg6ovbF4",[366,367],{"title":30,"path":31,"stem":32,"children":-1},{"title":38,"path":39,"stem":40,"children":-1},1782359681496]