feat(shadcn): add registry alias support

.changes/shadcn-compatibility.md

@@ -0,0 +1,5 @@
+---
+"@matechat/react": "patch:feat"
+---
+
+Improve Shadcn components compatibility.

.changes/suggestion-to-func.md

@@ -0,0 +1,5 @@
+---
+"@matechat/react": "patch:feat"
+---
+
+Refactor `triggerOptions` to suggestion callback.

package.json

@@ -1,11 +1,44 @@
 {
+  "name": "@matechat/react",
+  "version": "0.1.1",
+  "type": "module",
+  "description": "Front-end AI scenario solution UI library based on Huawei DevUI Design.",
+  "homepage": "https://github.com/DevCloudFE/matechat-react",
+  "license": "MIT",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
   "author": {
     "email": "fu050409@163.com",
     "name": "苏向夜"
   },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/DevCloudFE/matechat-react.git"
+  },
   "bugs": {
     "url": "https://gitcode.com/DevCloudFE/matechat-react/issues"
   },
+  "scripts": {
+    "build": "vite build",
+    "dev": "tsx scripts/watch.ts",
+    "docs:build": "pnpm --filter @matechat/react-docs build",
+    "docs:dev": "tsx scripts/watch.ts --project docs",
+    "format": "biome format . --write",
+    "lint": "biome check .",
+    "lint:fix": "pnpm run lint --fix",
+    "playground:build": "pnpm --filter @matechat/react-playground build",
+    "prepublishOnly": "pnpm run build",
+    "preview": "pnpm --filter @matechat/react-playground dev",
+    "registry:build": "shadcn build --output docs/doc_build/r && tsx scripts/strip-tailwind-registry.ts docs/doc_build/r",
+    "test": "vitest",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-markdown": "^10.1.0",
+    "react-syntax-highlighter": "^15.5.13"
+  },
   "dependencies": {
     "@ai-sdk/openai": "^3.0.63",
     "@ai-sdk/react": "^3.0.179",
@@ -19,7 +52,6 @@
     "remark-math": "^6.0.0",
     "tailwind-merge": "^3.6.0"
   },
-  "description": "Front-end AI scenario solution UI library based on Huawei DevUI Design.",
   "devDependencies": {
     "@biomejs/biome": "^2.4.15",
     "@testing-library/jest-dom": "^6.9.1",
@@ -45,48 +77,16 @@
     "vite-plugin-lib-inject-css": "^2.2.2",
     "vitest": "^4.1.6"
   },
+  "publishConfig": {
+    "access": "public"
+  },
+  "types": "./dist/*.d.ts",
   "exports": {
     ".": "./dist/index.js",
     "./*": "./dist/*.js"
   },
   "files": [
     "dist"
   ],
-  "homepage": "https://gitcode.com/DevCloudFE/matechat-react",
-  "license": "MIT",
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "name": "@matechat/react",
-  "packageManager": "pnpm@10.14.0",
-  "peerDependencies": {
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "react-markdown": "^10.1.0",
-    "react-syntax-highlighter": "^15.5.13"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/DevCloudFE/matechat-react.git"
-  },
-  "scripts": {
-    "build": "vite build",
-    "dev": "tsx scripts/watch.ts",
-    "docs:build": "pnpm --filter @matechat/react-docs build",
-    "docs:dev": "tsx scripts/watch.ts --project docs",
-    "format": "biome format . --write",
-    "lint": "biome check .",
-    "lint:fix": "pnpm run lint --fix",
-    "playground:build": "pnpm --filter @matechat/react-playground build",
-    "prepublishOnly": "pnpm run build",
-    "preview": "pnpm --filter @matechat/react-playground dev",
-    "registry:build": "shadcn build --output docs/doc_build/r",
-    "test": "vitest",
-    "typecheck": "tsc --noEmit"
-  },
-  "type": "module",
-  "types": "./dist/*.d.ts",
-  "version": "0.1.1"
+  "packageManager": "pnpm@10.14.0"
 }

playground/src/App.tsx

@@ -15,7 +15,7 @@ function App() {
   return (
     <div
       className={clsx(
-        "min-h-screen bg-gradient-to-b",
+        "min-h-screen bg-linear-to-b",
         "from-blue-300 via-pink-100 via-10% to-violet-300",
         "dark:from-[#865f77] dark:via-[#133b5c] dark:via-80% dark:to-[#091e35]",
       )}
@@ -47,8 +47,8 @@ function App() {
         <div className="flex flex-row size-full">
           <div
             className={clsx(
-              "w-1/4 p-3 rounded-l-xl min-w-[240px] max-w-[380px]",
-              "bg-gradient-to-b from-gray-100/80 from-10% to-violet-100/80",
+              "w-1/4 p-3 rounded-l-xl min-w-60 max-w-95",
+              "bg-linear-to-b from-gray-100/80 from-10% to-violet-100/80",
               "dark:bg-none dark:bg-slate-900/40",
             )}
           >
@@ -57,7 +57,7 @@ function App() {
           <div
             className={clsx(
               "flex-1 rounded-r-xl",
-              "bg-gradient-to-b from-[#fffffff2] to-[#f8fafff2]",
+              "bg-linear-to-b from-[#fffffff2] to-[#f8fafff2]",
               "dark:bg-none dark:bg-black/35",
             )}
           >

playground/src/communicate.tsx

@@ -1,6 +1,6 @@
 import { createOpenAICompatible } from "@ai-sdk/openai-compatible";
 import { useChat } from "@ai-sdk/react";
-import { BubbleList } from "@matechat/react";
+import { BubbleList } from "@matechat/react/bubble";
 import { InputCount, Sender } from "@matechat/react/sender";
 import { DirectChatTransport, ToolLoopAgent } from "ai";
 import { useCallback, useMemo, useState } from "react";
@@ -39,7 +39,7 @@ function Communicate() {
   return (
     <div className="h-full flex flex-col pt-5 px-4 pb-2 items-center overflow-hidden">
       <div className="w-full max-w-3xl flex flex-col gap-3 items-center h-full">
-        <div className="flex-grow w-full min-h-0 relative">
+        <div className="grow w-full min-h-0 relative">
           <BubbleList
             className="size-full max-w-full"
             messages={messages}
@@ -60,7 +60,7 @@ function Communicate() {
           )}
         </div>
         <Sender
-          className="w-full flex-shrink-0 focus-within:border-[#a18dc2] focus-within:ring-2 focus-within:ring-[#a694c2] dark:focus-within:border-[#7a6994] dark:focus-within:ring-2 dark:focus-within:ring-[#706385]"
+          className="w-full shrink-0 focus-within:border-[#a18dc2] focus-within:ring-2 focus-within:ring-[#a694c2] dark:focus-within:border-[#7a6994] dark:focus-within:ring-2 dark:focus-within:ring-[#706385]"
           placeholder={t("placeholder")}
           sendMessage={handleSend}
           onMessageChange={setInput}
@@ -72,7 +72,7 @@ function Communicate() {
             </div>
           }
         />
-        <div className="flex-shrink-0 flex flex-row">
+        <div className="shrink-0 flex flex-row">
           <span className="text-[12px] text-gray-500">{t("attention")}</span>
           <hr className="h-4 w-px bg-gray-300 dark:bg-gray-600 border-0 mx-2" />
           <span className="text-[12px] text-gray-500 hover:text-gray-550 underline cursor-pointer">

registry.json

@@ -5,7 +5,7 @@
   "items": [
     {
       "name": "button",
-      "type": "registry:block",
+      "type": "registry:component",
       "title": "Button",
       "description": "MateChat Button",
       "files": [
@@ -17,7 +17,7 @@
     },
     {
       "name": "sender",
-      "type": "registry:block",
+      "type": "registry:component",
       "title": "Sender",
       "description": "MateChat Sender",
       "files": [
@@ -27,9 +27,25 @@
         }
       ]
     },
+    {
+      "name": "suggestion",
+      "type": "registry:component",
+      "title": "Suggestion",
+      "description": "MateChat Suggestion",
+      "files": [
+        {
+          "path": "src/suggestion.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "src/list.tsx",
+          "type": "registry:component"
+        }
+      ]
+    },
     {
       "name": "prompt",
-      "type": "registry:block",
+      "type": "registry:component",
       "title": "Prompt",
       "description": "MateChat Prompt",
       "files": [
@@ -39,23 +55,35 @@
         }
       ]
     },
+    {
+      "name": "file-upload",
+      "type": "registry:component",
+      "title": "File Upload",
+      "description": "MateChat File Upload",
+      "files": [
+        {
+          "path": "src/file-upload.tsx",
+          "type": "registry:component"
+        }
+      ]
+    },
     {
       "name": "bubble",
       "type": "registry:block",
       "title": "Bubble",
       "description": "MateChat Bubble",
       "files": [
         {
-          "path": "src/bubble/index.tsx",
+          "path": "src/bubble.tsx",
           "type": "registry:component"
         },
         {
-          "path": "src/bubble/markdown.tsx",
+          "path": "src/markdown.tsx",
           "type": "registry:component"
         },
         {
-          "path": "src/bubble/hooks.tsx",
-          "type": "registry:component"
+          "path": "src/hooks/use-theme.ts",
+          "type": "registry:hook"
         }
       ],
       "dependencies": [

scripts/strip-tailwind-registry.ts

@@ -0,0 +1,35 @@
+import { readdirSync, readFileSync, writeFileSync } from "node:fs";
+import { join } from "node:path";
+
+const registryDir = process.argv[2];
+if (!registryDir) {
+  console.error(
+    "Usage: tsx scripts/strip-tailwind-registry.ts <registry-output-dir>",
+  );
+  process.exit(1);
+}
+
+const tailwindImportRE = /^import\s+["']\.\.?\/tailwind\.css["'];?\s*\n?/m;
+
+let cleaned = 0;
+for (const file of readdirSync(registryDir)) {
+  if (!file.endsWith(".json") || file === "registry.json") continue;
+  const filePath = join(registryDir, file);
+  const raw = readFileSync(filePath, "utf-8");
+  const data = JSON.parse(raw);
+
+  if (!data.files) continue;
+
+  for (const f of data.files) {
+    if (!f.content) continue;
+    const original = f.content;
+    f.content = f.content.replace(tailwindImportRE, "");
+    if (f.content !== original) {
+      cleaned++;
+    }
+  }
+
+  writeFileSync(filePath, JSON.stringify(data, null, 2), "utf-8");
+}
+
+console.log(`Cleaned ${cleaned} tailwind.css imports across ${registryDir}`);

src/bubble/index.tsx → src/bubble.tsx

@@ -1,18 +1,18 @@
-import { cva, type VariantProps } from "class-variance-authority";
-import "../tailwind.css";
-
 import type { UIMessage } from "ai";
+import { cva, type VariantProps } from "class-variance-authority";
 import clsx from "clsx";
 import type React from "react";
 import { memo, useCallback, useEffect, useRef } from "react";
 import Markdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
 import { twMerge } from "tailwind-merge";
-import { BlockQuote, CodeBlock, Heading, Link } from "./markdown";
+import { BlockQuote, CodeBlock, Heading, Link } from "@/markdown";
+
+import "./tailwind.css";
 
 const bubbleVariants = cva(
-  "flex flex-col gap-1 justify-center rounded-lg dark:text-gray-200 text-gray-800 max-w-full whitespace-pre-wrap break-words",
+  "flex flex-col gap-1 justify-center rounded-lg dark:text-gray-200 text-gray-800 max-w-full whitespace-pre-wrap wrap-break-word",
   {
     variants: {
       size: {

src/button.tsx

@@ -1,10 +1,10 @@
-import "./tailwind.css";
-
 import { cva, type VariantProps } from "class-variance-authority";
 import clsx from "clsx";
 import type * as React from "react";
 import { twMerge } from "tailwind-merge";
 
+import "./tailwind.css";
+
 const buttonVariants = cva(
   "cursor-pointer inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors text-white dark:text-white/80",
   {

src/file-upload.tsx

@@ -2,7 +2,7 @@ import clsx from "clsx";
 import type React from "react";
 import { useCallback, useRef } from "react";
 import { twMerge } from "tailwind-merge";
-import Appendix from "./icons/appendix.svg";
+import Appendix from "@/icons/appendix.svg";
 
 export interface FileUploadProps extends React.ComponentProps<"button"> {
   onFilesSelect?: (files: File[]) => void;

src/bubble/hooks.tsx → src/hooks/use-theme.ts

@@ -20,7 +20,5 @@ export const useTheme = () => {
     };
   }, []);
 
-  console.log(isDark);
-
   return { isDark };
 };

src/index.ts

@@ -1,8 +1,9 @@
 export type { UseChatOptions } from "@ai-sdk/react";
 export { useChat } from "@ai-sdk/react";
-export * from "./bubble";
-export * from "./button";
-export * from "./file-upload";
-export * from "./list";
-export * from "./prompt";
-export * from "./sender";
+export * from "@/bubble";
+export * from "@/button";
+export * from "@/file-upload";
+export * from "@/list";
+export * from "@/prompt";
+export * from "@/sender";
+export * from "@/suggestion";

src/bubble/markdown.tsx → src/markdown.tsx

@@ -5,7 +5,7 @@ import {
   oneLight,
   vscDarkPlus,
 } from "react-syntax-highlighter/dist/esm/styles/prism";
-import { useTheme } from "./hooks";
+import { useTheme } from "@/hooks/use-theme";
 
 export interface HeadingProps extends React.ComponentProps<"h1"> {
   level: 1 | 2 | 3 | 4 | 5 | 6;

src/prompt.tsx

@@ -1,10 +1,10 @@
-import "./tailwind.css";
-
 import { cva, type VariantProps } from "class-variance-authority";
 import clsx from "clsx";
 import type * as React from "react";
 import { twMerge } from "tailwind-merge";
 
+import "./tailwind.css";
+
 const promptsVariants = cva("flex", {
   variants: {
     size: {