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