From 7940a249868c09004fb209b221ce126460f2a504 Mon Sep 17 00:00:00 2001
From: Hirotaka Mizutani <52546+hirotaka@users.noreply.github.com>
Date: Wed, 24 Jun 2026 13:51:40 +0900
Subject: [PATCH] feat: Improve Chat components

---
 .gitignore                                    |   1 +
 AGENTS.md                                     |   5 +-
 .../blocks/chat-message/ChatMessage.vue       |   1 +
 .../blocks/chat-messages/ChatMessages.vue     |   6 +-
 .../chat-prompt-submit/ChatPromptSubmit.vue   |  14 +-
 .../blocks/chat-prompt/ChatPrompt.vue         |   2 +-
 app/registry/ui/lucide-icon/LucideIcon.vue    |   3 +-
 content/docs/2.components/2.chat-message.md   |   4 +-
 content/docs/2.components/3.chat-messages.md  |   2 +-
 content/docs/2.components/4.chat-prompt.md    |   2 +-
 .../docs/2.components/5.chat-prompt-submit.md |   3 +-
 package.json                                  |   4 +-
 pnpm-lock.yaml                                |  12 ++
 renovate.json                                 |   1 +
 scripts/registry-build.ts                     |  27 +++-
 scripts/registry-verify.ts                    | 133 ++++++++++++++++++
 16 files changed, 206 insertions(+), 14 deletions(-)
 create mode 100644 scripts/registry-verify.ts

diff --git a/.gitignore b/.gitignore
index 8a54be3..52c1a80 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,6 +8,7 @@ dist
 
 # Generated shadcn registry output
 public/r/
+app/registry/registry.json
 
 # Node dependencies
 node_modules
diff --git a/AGENTS.md b/AGENTS.md
index 7c11689..5b2d5db 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -11,6 +11,7 @@ Nuxt 4 documentation site with a built-in shadcn-vue component registry for dist
 - `pnpm lint:fix` — auto-fix
 - `pnpm typecheck` — `nuxt typecheck`
 - `pnpm registry:build` — generate registry JSON files into `public/r/`
+- `pnpm registry:verify` — verify generated registry dependency metadata after `registry:build`
 
 CI order: **lint → typecheck** (no tests)
 
@@ -32,6 +33,8 @@ CI order: **lint → typecheck** (no tests)
 2. `shadcn-vue build` outputs per-item JSON to `public/r/*.json`
 3. Intermediate file `app/registry/registry.json` is auto-deleted
 
+Run `pnpm registry:verify` after `pnpm registry:build` when registry dependencies change.
+
 Config: `registry.config.ts` and `components.json` `registries` field.
 
 ## Style conventions
@@ -39,7 +42,7 @@ Config: `registry.config.ts` and `components.json` `registries` field.
 - ESLint stylistic: **double quotes**, **semicolons**
 - Tailwind v4 via `@tailwindcss/vite` plugin — no `tailwind.config` file
 - shadcn-vue style: `new-york`, baseColor: `neutral`, CSS variables enabled
-- Icons: `lucide-vue-next`
+- Icons: `lucide-vue-next` for app and local shadcn primitives; registry-distributed items targeting shadcn-vue Create may use `@lucide/vue` when fresh `shadcn-vue add` verification requires it
 
 ## Content
 
diff --git a/app/registry/blocks/chat-message/ChatMessage.vue b/app/registry/blocks/chat-message/ChatMessage.vue
index 38b7555..0038de6 100644
--- a/app/registry/blocks/chat-message/ChatMessage.vue
+++ b/app/registry/blocks/chat-message/ChatMessage.vue
@@ -89,6 +89,7 @@ function handleAction(e: MouseEvent, action: ChatMessageAction) {
               <Button
                 variant="ghost"
                 size="icon-sm"
+                :aria-label="action.label"
                 @click="handleAction($event, action)"
               >
                 <LucideIcon
diff --git a/app/registry/blocks/chat-messages/ChatMessages.vue b/app/registry/blocks/chat-messages/ChatMessages.vue
index 98362fa..adbf924 100644
--- a/app/registry/blocks/chat-messages/ChatMessages.vue
+++ b/app/registry/blocks/chat-messages/ChatMessages.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from "vue";
 import type { UIMessage } from "ai";
-import { ArrowDown } from "lucide-vue-next";
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { ArrowDown } from "@lucide/vue";
 import type { ChatMessageAction } from "../chat-message/ChatMessage.vue";
 import { ChatMessage } from "../chat-message";
 import { Button } from "@/components/ui/button";
@@ -105,7 +106,7 @@ watch(
   <div
     ref="containerRef"
     data-slot="chat-messages"
-    :class="cn('flex flex-col gap-4', props.class)"
+    :class="cn('relative flex flex-col gap-4', props.class)"
   >
     <ChatMessage
       v-for="(message, index) in messages"
@@ -152,6 +153,7 @@ watch(
         variant="outline"
         size="icon-sm"
         class="absolute right-1/2 translate-x-1/2 bottom-0 rounded-full shadow-md"
+        aria-label="Scroll to bottom"
         @click="scrollToBottom"
       >
         <ArrowDown class="size-4" />
diff --git a/app/registry/blocks/chat-prompt-submit/ChatPromptSubmit.vue b/app/registry/blocks/chat-prompt-submit/ChatPromptSubmit.vue
index b03dc31..6fec8d4 100644
--- a/app/registry/blocks/chat-prompt-submit/ChatPromptSubmit.vue
+++ b/app/registry/blocks/chat-prompt-submit/ChatPromptSubmit.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue";
-import { ArrowUp, RotateCcw, Square } from "lucide-vue-next";
+import { computed, type HTMLAttributes } from "vue";
+import { ArrowUp, RotateCcw, Square } from "@lucide/vue";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 
@@ -9,6 +9,8 @@ export interface ChatPromptSubmitProps {
   status?: "ready" | "streaming" | "submitted" | "error";
   /** Disable the button */
   disabled?: boolean;
+  /** Accessible label for the icon-only button */
+  ariaLabel?: string;
   /** Additional CSS classes */
   class?: HTMLAttributes["class"];
 }
@@ -30,6 +32,13 @@ const icon = computed(() => {
 
 const isSubmit = computed(() => props.status === "ready");
 
+const label = computed(() => {
+  if (props.ariaLabel) return props.ariaLabel;
+  if (props.status === "error") return "Retry message";
+  if (props.status === "streaming" || props.status === "submitted") return "Stop response";
+  return "Submit message";
+});
+
 function onClick() {
   if (props.status === "error") {
     emit("reload");
@@ -47,6 +56,7 @@ function onClick() {
     variant="default"
     size="icon-sm"
     :disabled="disabled"
+    :aria-label="label"
     :class="cn('size-7 rounded-md', props.class)"
     @click="!isSubmit && onClick()"
   >
diff --git a/app/registry/blocks/chat-prompt/ChatPrompt.vue b/app/registry/blocks/chat-prompt/ChatPrompt.vue
index 8f389c9..7904a6b 100644
--- a/app/registry/blocks/chat-prompt/ChatPrompt.vue
+++ b/app/registry/blocks/chat-prompt/ChatPrompt.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue";
+import { nextTick, onMounted, ref, watch, type HTMLAttributes } from "vue";
 import { cn } from "@/lib/utils";
 
 export interface ChatPromptProps {
diff --git a/app/registry/ui/lucide-icon/LucideIcon.vue b/app/registry/ui/lucide-icon/LucideIcon.vue
index 1c9ce3c..86f142c 100644
--- a/app/registry/ui/lucide-icon/LucideIcon.vue
+++ b/app/registry/ui/lucide-icon/LucideIcon.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { Component } from "vue";
-import { icons } from "lucide-vue-next";
+import { computed } from "vue";
+import { icons } from "@lucide/vue";
 
 export interface LucideIconProps {
   /** Icon identifier - accepts `i-lucide-*` style names or Vue components */
diff --git a/content/docs/2.components/2.chat-message.md b/content/docs/2.components/2.chat-message.md
index 4720d5b..d95aff3 100644
--- a/content/docs/2.components/2.chat-message.md
+++ b/content/docs/2.components/2.chat-message.md
@@ -22,7 +22,7 @@ npx shadcn-vue@latest add "https://ui.stackhacker.io/r/chat-message.json"
 
 ```vue
 <script setup lang="ts">
-import { ChatMessage } from '@/components/ui/chat-message'
+import { ChatMessage } from '@/components/chat-message'
 </script>
 
 <template>
@@ -57,7 +57,7 @@ name: ChatMessageDemo
 | `role` | `'user' \| 'assistant' \| 'system'` | — | Message role. |
 | `parts` | `UIMessage['parts']` | — | Message parts from AI SDK. |
 | `side` | `'left' \| 'right'` | `'left'` | Which side to render the message. |
-| `actions` | `ChatMessageAction[]` | `[]` | Action buttons shown on hover. |
+| `actions` | `ChatMessageAction[]` | `[]` | Action buttons shown on hover. Each `label` is used for the tooltip and accessible button name. |
 | `class` | `string` | — | Additional CSS classes. |
 
 ### Slots
diff --git a/content/docs/2.components/3.chat-messages.md b/content/docs/2.components/3.chat-messages.md
index 0b6614e..3d91241 100644
--- a/content/docs/2.components/3.chat-messages.md
+++ b/content/docs/2.components/3.chat-messages.md
@@ -20,7 +20,7 @@ npx shadcn-vue@latest add "https://ui.stackhacker.io/r/chat-messages.json"
 
 ```vue
 <script setup lang="ts">
-import { ChatMessages } from '@/components/ui/chat-messages'
+import { ChatMessages } from '@/components/chat-messages'
 </script>
 
 <template>
diff --git a/content/docs/2.components/4.chat-prompt.md b/content/docs/2.components/4.chat-prompt.md
index 4fc49c9..8de1289 100644
--- a/content/docs/2.components/4.chat-prompt.md
+++ b/content/docs/2.components/4.chat-prompt.md
@@ -20,7 +20,7 @@ npx shadcn-vue@latest add "https://ui.stackhacker.io/r/chat-prompt.json"
 
 ```vue
 <script setup lang="ts">
-import { ChatPrompt } from '@/components/ui/chat-prompt'
+import { ChatPrompt } from '@/components/chat-prompt'
 
 const input = ref('')
 </script>
diff --git a/content/docs/2.components/5.chat-prompt-submit.md b/content/docs/2.components/5.chat-prompt-submit.md
index c8bd561..c60985e 100644
--- a/content/docs/2.components/5.chat-prompt-submit.md
+++ b/content/docs/2.components/5.chat-prompt-submit.md
@@ -20,7 +20,7 @@ npx shadcn-vue@latest add "https://ui.stackhacker.io/r/chat-prompt-submit.json"
 
 ```vue
 <script setup lang="ts">
-import { ChatPromptSubmit } from '@/components/ui/chat-prompt-submit'
+import { ChatPromptSubmit } from '@/components/chat-prompt-submit'
 </script>
 
 <template>
@@ -46,6 +46,7 @@ name: ChatPromptSubmitDemo
 |------|------|---------|-------------|
 | `status` | `'ready' \| 'streaming' \| 'submitted' \| 'error'` | `'ready'` | Current chat status. Controls the displayed icon. |
 | `disabled` | `boolean` | `false` | Disable the button. |
+| `ariaLabel` | `string` | status-aware label | Accessible label for the icon-only button. |
 | `class` | `string` | — | Additional CSS classes. |
 
 ### Emits
diff --git a/package.json b/package.json
index 54ec137..bf100d7 100644
--- a/package.json
+++ b/package.json
@@ -14,10 +14,12 @@
         "typecheck": "nuxt typecheck",
         "lint": "eslint .",
         "lint:fix": "eslint --fix",
-        "registry:build": "tsx ./scripts/registry-build.ts"
+        "registry:build": "tsx ./scripts/registry-build.ts",
+        "registry:verify": "tsx ./scripts/registry-verify.ts"
     },
     "dependencies": {
         "@libsql/client": "^0.17.3",
+        "@lucide/vue": "^1.21.0",
         "@nuxt/content": "^3.13.0",
         "@nuxt/eslint": "^1.15.2",
         "@nuxt/icon": "^2.2.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ca28043..6ffd859 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -24,6 +24,9 @@ importers:
       '@libsql/client':
         specifier: ^0.17.3
         version: 0.17.3
+      '@lucide/vue':
+        specifier: ^1.21.0
+        version: 1.21.0(vue@3.5.33(typescript@5.9.3))
       '@nuxt/content':
         specifier: ^3.13.0
         version: 3.13.0(@libsql/client@0.17.3)(drizzle-orm@0.45.2(@cloudflare/workers-types@4.20260307.1)(@libsql/client@0.17.3)(@opentelemetry/api@1.9.0))(magicast@0.5.2)
@@ -1059,6 +1062,11 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@lucide/vue@1.21.0':
+    resolution: {integrity: sha512-eoFn3tppjKAc12ZqdnRSMFdtwQ1ZMRQFb6SV1Eub6Y8kU28ccnqKeSFdnur9hMg8gIbosU2Y3WFJr/J/xS/IlQ==}
+    peerDependencies:
+      vue: '>=3.0.1'
+
   '@mapbox/node-pre-gyp@2.0.3':
     resolution: {integrity: sha512-uwPAhccfFJlsfCxMYTwOdVfOz3xqyj8xYL3zJj8f0pb30tLohnnFPhLuqp4/qoEz8sNxe4SESZedcBojRefIzg==}
     engines: {node: '>=18'}
@@ -7862,6 +7870,10 @@ snapshots:
   '@libsql/win32-x64-msvc@0.5.29':
     optional: true
 
+  '@lucide/vue@1.21.0(vue@3.5.33(typescript@5.9.3))':
+    dependencies:
+      vue: 3.5.33(typescript@5.9.3)
+
   '@mapbox/node-pre-gyp@2.0.3':
     dependencies:
       consola: 3.4.2
diff --git a/renovate.json b/renovate.json
index fe9908d..cb2d3ef 100644
--- a/renovate.json
+++ b/renovate.json
@@ -38,6 +38,7 @@
         "shadcn-vue",
         "shadcn-vue-registry",
         "reka-ui",
+        "@lucide/vue",
         "lucide-vue-next"
       ]
     },
diff --git a/scripts/registry-build.ts b/scripts/registry-build.ts
index 61e1485..e277d1b 100644
--- a/scripts/registry-build.ts
+++ b/scripts/registry-build.ts
@@ -1,6 +1,6 @@
 import { dirname, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
-import { mkdir, unlink, writeFile } from "node:fs/promises";
+import { mkdir, readFile, unlink, writeFile } from "node:fs/promises";
 import pkg from "../package.json";
 import components from "../components.json";
 import { generateShadcnRegistry } from "shadcn-vue-registry";
@@ -24,6 +24,31 @@ import { x } from "tinyexec";
 
   const registryJson = await generateShadcnRegistry(config);
 
+  const customItemNames = new Set(registryJson.items.map(item => item.name));
+  for (const item of registryJson.items) {
+    const registryDependencies = new Set(item.registryDependencies ?? []);
+
+    for (const file of item.files) {
+      const filePath = resolve(registryPath, file.path);
+      const content = await readFile(filePath, "utf8").catch(() => "");
+
+      for (const dependency of customItemNames) {
+        if (dependency === item.name) continue;
+        if (
+          content.includes(`../${dependency}`)
+          || content.includes(`@/components/${dependency}`)
+        ) {
+          registryDependencies.add(dependency);
+        }
+      }
+    }
+
+    item.registryDependencies = [...registryDependencies].map((dependency) => {
+      if (!customItemNames.has(dependency)) return dependency;
+      return `${config.homepage}/r/${dependency}.json`;
+    });
+  }
+
   const registryJsonPath = resolve(registryPath, "registry.json");
   await mkdir(dirname(registryJsonPath), { recursive: true });
   await writeFile(registryJsonPath, JSON.stringify(registryJson, null, 2));
diff --git a/scripts/registry-verify.ts b/scripts/registry-verify.ts
new file mode 100644
index 0000000..6ce10ef
--- /dev/null
+++ b/scripts/registry-verify.ts
@@ -0,0 +1,133 @@
+import { readFile } from "node:fs/promises";
+import { resolve } from "node:path";
+import registryConfig from "../registry.config";
+
+interface RegistryItem {
+  name: string;
+  dependencies?: string[];
+  registryDependencies?: string[];
+}
+
+interface RegistryIndex {
+  homepage: string;
+  items: Array<{ name: string }>;
+}
+
+interface ExpectedRegistryItem {
+  dependencies?: string[];
+  registryDependencies?: string[];
+}
+
+const root = resolve(import.meta.dirname, "..");
+const registryOutputPath = resolve(root, "public/r");
+const expectedHomepage = registryConfig.homepage;
+const errors: string[] = [];
+
+async function readRegistryIndex() {
+  const filePath = resolve(registryOutputPath, "registry.json");
+
+  try {
+    return JSON.parse(await readFile(filePath, "utf8")) as RegistryIndex;
+  }
+  catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    errors.push(`registry: failed to read ${filePath}. Run pnpm registry:build first. ${message}`);
+    return null;
+  }
+}
+
+async function readRegistryItem(name: string) {
+  const filePath = resolve(registryOutputPath, `${name}.json`);
+
+  try {
+    return JSON.parse(await readFile(filePath, "utf8")) as RegistryItem;
+  }
+  catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    errors.push(`${name}: failed to read ${filePath}. Run pnpm registry:build first. ${message}`);
+    return null;
+  }
+}
+
+function assertExactValues(itemName: string, fieldName: string, actual: string[], expected: string[]) {
+  const actualSet = new Set(actual);
+  const expectedSet = new Set(expected);
+
+  for (const value of expectedSet) {
+    if (!actualSet.has(value)) {
+      errors.push(`${itemName}: missing ${fieldName} ${value}`);
+    }
+  }
+
+  for (const value of actualSet) {
+    if (!expectedSet.has(value)) {
+      errors.push(`${itemName}: unexpected ${fieldName} ${value}`);
+    }
+  }
+}
+
+const registryIndex = await readRegistryIndex();
+if (registryIndex?.homepage !== expectedHomepage) {
+  errors.push(`registry: expected homepage ${expectedHomepage}, received ${registryIndex?.homepage ?? "missing"}`);
+}
+
+const stackhackerRegistryUrl = `${expectedHomepage}/r`;
+const stackhackerDependency = (name: string) => `${stackhackerRegistryUrl}/${name}.json`;
+
+const expectedItems: Record<string, ExpectedRegistryItem> = {
+  "lucide-icon": {
+    dependencies: ["@lucide/vue"],
+    registryDependencies: [],
+  },
+  "chat-prompt-submit": {
+    dependencies: ["@lucide/vue"],
+    registryDependencies: ["button"],
+  },
+  "chat-prompt": {
+    dependencies: [],
+    registryDependencies: [],
+  },
+  "chat-messages": {
+    dependencies: ["@lucide/vue", "ai"],
+    registryDependencies: ["button", stackhackerDependency("chat-message")],
+  },
+  "chat-message": {
+    dependencies: ["ai"],
+    registryDependencies: ["button", stackhackerDependency("lucide-icon"), "tooltip"],
+  },
+};
+
+if (registryIndex) {
+  const expectedNames = new Set(Object.keys(expectedItems));
+  const actualNames = new Set(registryIndex.items.map(item => item.name));
+
+  for (const name of expectedNames) {
+    if (!actualNames.has(name)) {
+      errors.push(`registry: missing item ${name}`);
+    }
+  }
+
+  for (const name of actualNames) {
+    if (!expectedNames.has(name)) {
+      errors.push(`registry: unexpected item ${name}. Add registry:verify expectations for this item.`);
+    }
+  }
+}
+
+for (const [name, expected] of Object.entries(expectedItems)) {
+  const item = await readRegistryItem(name);
+  if (!item) continue;
+
+  assertExactValues(name, "package dependency", item.dependencies ?? [], expected.dependencies ?? []);
+  assertExactValues(name, "registry dependency", item.registryDependencies ?? [], expected.registryDependencies ?? []);
+}
+
+if (errors.length > 0) {
+  console.error("Registry verification failed:");
+  for (const error of errors) {
+    console.error(`- ${error}`);
+  }
+  process.exit(1);
+}
+
+console.log("✓ Registry dependency verification passed");