[{"data":1,"prerenderedAt":374},["ShallowReactive",2],{"mobile-docs-navigation":3,"command-menu-docs":46,"navigation":63,"mobile-docs-page-meta":78,"docs-pages-category":89,"\u002Fdocs\u002Fcomponents\u002Fchat-message":98,"surround-\u002Fdocs\u002Fcomponents\u002Fchat-message":371},[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":30,"body":100,"category":84,"description":50,"extension":366,"meta":367,"navigation":368,"path":31,"seo":369,"stem":32,"__hash__":370},"docs\u002Fdocs\u002F2.components\u002F2.chat-message.md",{"type":101,"value":102,"toc":352},"minimark",[103,107,111,122,126,134,138,143,145,149,153,294,298,340,344],[104,105],"component-preview",{"name":106},"ChatMessageDemo",[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-message.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 { 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",[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,196,213,230,250,278],"tbody",{},[160,178,179,185,190,193],{},[180,181,182],"td",{},[120,183,184],{},"id",[180,186,187],{},[120,188,189],{},"string",[180,191,192],{},"—",[180,194,195],{},"Message ID.",[160,197,198,203,208,210],{},[180,199,200],{},[120,201,202],{},"role",[180,204,205],{},[120,206,207],{},"'user' | 'assistant' | 'system'",[180,209,192],{},[180,211,212],{},"Message role.",[160,214,215,220,225,227],{},[180,216,217],{},[120,218,219],{},"parts",[180,221,222],{},[120,223,224],{},"UIMessage['parts']",[180,226,192],{},[180,228,229],{},"Message parts from AI SDK.",[160,231,232,237,242,247],{},[180,233,234],{},[120,235,236],{},"side",[180,238,239],{},[120,240,241],{},"'left' | 'right'",[180,243,244],{},[120,245,246],{},"'left'",[180,248,249],{},"Which side to render the message.",[160,251,252,257,262,267],{},[180,253,254],{},[120,255,256],{},"actions",[180,258,259],{},[120,260,261],{},"ChatMessageAction[]",[180,263,264],{},[120,265,266],{},"[]",[180,268,269,270,273,274,277],{},"Action buttons shown on hover. Each ",[120,271,272],{},"icon"," is a Vue component and each ",[120,275,276],{},"label"," is used for the tooltip and accessible button name.",[160,279,280,285,289,291],{},[180,281,282],{},[120,283,284],{},"class",[180,286,287],{},[120,288,189],{},[180,290,192],{},[180,292,293],{},"Additional CSS classes.",[139,295,297],{"id":296},"slots","Slots",[154,299,300,311],{},[157,301,302],{},[160,303,304,307,309],{},[163,305,306],{},"Slot",[163,308,152],{},[163,310,173],{},[175,312,313,325],{},[160,314,315,320,322],{},[180,316,317],{},[120,318,319],{},"leading",[180,321,192],{},[180,323,324],{},"Content rendered before the message (e.g., avatar).",[160,326,327,332,337],{},[180,328,329],{},[120,330,331],{},"content",[180,333,334],{},[120,335,336],{},"{ id, role, parts }",[180,338,339],{},"Custom message content renderer.",[139,341,343],{"id":342},"types","Types",[112,345,350],{"className":346,"code":348,"language":349,"meta":118},[347],"language-ts","interface ChatMessageAction {\n  label: string\n  icon: Component\n  onClick?: (e: MouseEvent, message: UIMessage) => void\n}\n","ts",[120,351,348],{"__ignoreMap":118},{"title":118,"searchDepth":353,"depth":353,"links":354},2,[355,356,357,361],{"id":110,"depth":353,"text":16},{"id":124,"depth":353,"text":125},{"id":136,"depth":353,"text":137,"children":358},[359],{"id":141,"depth":360,"text":142},3,{"id":147,"depth":353,"text":148,"children":362},[363,364,365],{"id":151,"depth":360,"text":152},{"id":296,"depth":360,"text":297},{"id":342,"depth":360,"text":343},"md",{},true,{"title":30,"description":50},"RRL_pWjkGW27EfdOGzoOMaOkfm0pKA4qi958Uyj9V0Y",[372,373],{"title":26,"path":27,"stem":28,"children":-1},{"title":34,"path":35,"stem":36,"children":-1},1782298911284]