feat: Replace Lucide icon demo with chat message actions in components

README.md

@@ -19,7 +19,7 @@ This project aims to make shadcn-vue easier to use in Nuxt by providing:
 Install an item with the shadcn-vue CLI:
 
 ```bash
-npx shadcn-vue@latest add "https://ui.stackhacker.io/r/lucide-icon.json"
+npx shadcn-vue@latest add "https://ui.stackhacker.io/r/chat-messages.json"
 ```
 
 ## Local development

app/components/demo/ChatMessageDemo.vue

@@ -1,5 +1,11 @@
 <script setup lang="ts">
+import { Copy, RotateCcw } from "@lucide/vue";
 import { ChatMessage } from "~/registry/blocks/chat-message";
+
+const assistantActions = [
+  { label: "Copy message", icon: Copy },
+  { label: "Retry message", icon: RotateCcw },
+];
 </script>
 
 <template>
@@ -9,6 +15,7 @@ import { ChatMessage } from "~/registry/blocks/chat-message";
       role="assistant"
       :parts="[{ type: 'text', text: 'Hello! How can I help you today?' }]"
       side="left"
+      :actions="assistantActions"
     />
     <ChatMessage
       id="2"

app/components/demo/ChatMessagesDemo.vue

@@ -1,6 +1,12 @@
 <script setup lang="ts">
+import { Copy, RotateCcw } from "@lucide/vue";
 import { ChatMessages } from "~/registry/blocks/chat-messages";
 
+const assistantActions = [
+  { label: "Copy message", icon: Copy },
+  { label: "Retry message", icon: RotateCcw },
+];
+
 const messages = ref([
   {
     id: "1",
@@ -34,6 +40,7 @@ const messages = ref([
     <ChatMessages
       :messages="messages"
       status="ready"
+      :assistant="{ actions: assistantActions }"
     />
   </div>
 </template>

app/registry/blocks/chat-message/ChatMessage.vue

@@ -1,14 +1,13 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue";
+import type { Component, HTMLAttributes } from "vue";
 import type { UIMessage } from "ai";
 import { Button } from "@/components/ui/button";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
-import { LucideIcon } from "@/components/ui/lucide-icon";
 import { cn } from "@/lib/utils";
 
 export interface ChatMessageAction {
   label: string;
-  icon: string;
+  icon: Component;
   onClick?: (e: MouseEvent, message: UIMessage) => void;
 }
 
@@ -92,8 +91,8 @@ function handleAction(e: MouseEvent, action: ChatMessageAction) {
                 :aria-label="action.label"
                 @click="handleAction($event, action)"
               >
-                <LucideIcon
-                  :name="action.icon"
+                <component
+                  :is="action.icon"
                   class="size-3.5"
                 />
               </Button>

content/docs/1.getting-started/2.installation.md

@@ -26,22 +26,22 @@ A Nuxt project with shadcn-vue already configured. If you haven't set up shadcn-
 Use the shadcn-vue CLI to add components from this registry:
 
 ```bash
-npx shadcn-vue@latest add "https://ui.stackhacker.io/r/lucide-icon.json"
+npx shadcn-vue@latest add "https://ui.stackhacker.io/r/chat-messages.json"
 ```
 
-This will install the component source into your `components/ui/` directory.
+This installs the message list component and its registry dependencies into your project.
 
 #### Usage
 
 Import and use the component in your app:
 
 ```vue
 <script setup lang="ts">
-import { LucideIcon } from '@/components/ui/lucide-icon'
+import { ChatMessages } from '@/components/chat-messages'
 </script>
 
 <template>
-  <LucideIcon name="i-lucide-sun" class="size-6" />
+  <ChatMessages :messages="messages" :status="status" should-auto-scroll />
 </template>
 ```
 

content/docs/2.components/1.chat.md

@@ -0,0 +1,66 @@
+---
+title: Chat
+description: Build Nuxt chat interfaces with installable shadcn-vue components you own and compose.
+category: chat
+---
+
+Stackhacker UI Chat is a starter kit for adding chat UI pieces to a shadcn-vue Nuxt project.
+
+Unlike an integrated UI module, these registry items are installed as source code in your app. You can read them, change them, and compose them with your own AI SDK state, server endpoints, markdown rendering, files, tools, and auth.
+
+## Components
+
+| Component | Description |
+|-----------|-------------|
+| [ChatMessages](/docs/components/chat-messages) | Message list component with loading state, optional auto-scroll, and assistant actions. |
+| [ChatMessage](/docs/components/chat-message) | Individual message bubble component with content slots, leading content, and action buttons. |
+| [ChatPrompt](/docs/components/chat-prompt) | Prompt input wrapper for composing text areas, errors, and footer controls. |
+| [ChatPromptSubmit](/docs/components/chat-prompt-submit) | Status-aware submit, stop, and retry button for prompt workflows. |
+
+## Install
+
+Install the message list when you want the primary display surface. It also installs `ChatMessage` because the list composes individual messages.
+
+```bash
+npx shadcn-vue@latest add "https://ui.stackhacker.io/r/chat-messages.json"
+```
+
+Install prompt pieces when you want the input surface.
+
+```bash
+npx shadcn-vue@latest add "https://ui.stackhacker.io/r/chat-prompt.json"
+npx shadcn-vue@latest add "https://ui.stackhacker.io/r/chat-prompt-submit.json"
+```
+
+## Basic Composition
+
+```vue
+<script setup lang="ts">
+import { ChatMessages } from '@/components/chat-messages'
+import { ChatPrompt } from '@/components/chat-prompt'
+import { ChatPromptSubmit } from '@/components/chat-prompt-submit'
+</script>
+
+<template>
+  <div class="flex min-h-0 flex-1 flex-col gap-4">
+    <ChatMessages :messages="messages" :status="status" should-auto-scroll />
+
+    <ChatPrompt v-model="input" @submit="sendMessage">
+      <template #footer>
+        <ChatPromptSubmit :status="status" @stop="stop" @reload="reload" />
+      </template>
+    </ChatPrompt>
+  </div>
+</template>
+```
+
+## App Responsibilities
+
+The registry items handle the UI boundaries. Your Nuxt app still owns the chat runtime:
+
+- AI SDK client state and message sending.
+- Server API endpoints and model provider setup.
+- Markdown, reasoning, tool, and file rendering.
+- Auth, persistence, layout, and deployment behavior.
+
+Use the component slots to connect those app-level concerns without turning the registry components into a full chat framework.