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