From 8ad4594fc26804266e3ec09b50f71ffeddec96c1 Mon Sep 17 00:00:00 2001
From: shiro <185361175+moeyue23@users.noreply.github.com>
Date: Sun, 12 Oct 2025 22:10:00 +0800
Subject: [PATCH 01/14] feat: introduce generic trigger system

---
 src/sender.tsx     | 41 +++++++++++++++++++++++-
 src/suggestion.tsx | 79 ++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 119 insertions(+), 1 deletion(-)
 create mode 100644 src/suggestion.tsx

diff --git a/src/sender.tsx b/src/sender.tsx
index 54f45af..241b3d6 100644
--- a/src/sender.tsx
+++ b/src/sender.tsx
@@ -5,6 +5,8 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { twMerge } from "tailwind-merge";
 import PublishNew from "./icons/publish-new.svg";
 import QuickStop from "./icons/quick-stop.svg";
+import type { OnTextInject, TriggerConfig } from "./suggestion";
+import Suggestion from "./suggestion";
 import type { Backend } from "./utils";
 
 export interface InputCountProps extends React.ComponentProps<"span"> {
@@ -105,6 +107,10 @@ export interface SenderProps extends React.ComponentProps<"div"> {
    */
   onSend?: (controller: AbortController) => void;
   toolbar?: React.ReactNode;
+  /**
+   * Trigger configurations for the suggestion list
+   */
+  triggerConfigs?: TriggerConfig[];
 }
 
 export function Sender({
@@ -115,11 +121,13 @@ export function Sender({
   input,
   onSend,
   toolbar,
+  triggerConfigs,
   ...props
 }: SenderProps) {
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const [message, setMessage] = useState(initialMessage);
   const [isSending, setIsSending] = useState(false);
+  const [caretPosition, setCaretPosition] = useState<number | null>(null);
 
   useEffect(() => {
     if (textareaRef.current) {
@@ -129,6 +137,15 @@ export function Sender({
     onMessageChange?.(message);
   }, [message, onMessageChange]);
 
+  useEffect(() => {
+    if (textareaRef.current && caretPosition !== null) {
+      textareaRef.current.focus();
+      textareaRef.current.selectionStart = caretPosition;
+      textareaRef.current.selectionEnd = caretPosition;
+      setCaretPosition(null);
+    }
+  }, [caretPosition]);
+
   const [controller, setController] = useState<AbortController | null>(null);
   const handleSend = useCallback(() => {
     if (isSending) {
@@ -175,12 +192,26 @@ export function Sender({
     [],
   );
 
+  const handleTextInject: OnTextInject = useCallback(
+    (newText, suggestionStartPosition) => {
+      setMessage((prevMessage) => {
+        const currentCaretPosition =
+          textareaRef.current?.selectionStart ?? prevMessage.length;
+        const textBefore = prevMessage.slice(0, suggestionStartPosition);
+        const textAfter = prevMessage.slice(currentCaretPosition);
+        const newMessage = textBefore + newText + textAfter;
+        return newMessage;
+      });
+      setCaretPosition(suggestionStartPosition + newText.length);
+    },
+    [],
+  );
   return (
     <div
       data-slot="sender"
       className={twMerge(
         clsx(
-          "px-1 flex flex-col items-center border rounded-2xl",
+          "relative px-1 flex flex-col items-center border rounded-2xl",
           "border-gray-200 dark:border-gray-700 shadow-sm transition-all duration-300 hover:shadow-md",
           "focus-within:ring-2 focus-within:ring-blue-500 focus-within:border-blue-500",
           className,
@@ -188,6 +219,14 @@ export function Sender({
       )}
       {...props}
     >
+      <div className="absolute bottom-full left-0 w-full bg-white dark:bg-gray-50 rounded-lg shadow-amber-50 max-h-64 overflow-y-auto">
+        <Suggestion
+          message={message}
+          textareaRef={textareaRef}
+          triggerConfigs={triggerConfigs ?? []}
+          onInject={handleTextInject}
+        />
+      </div>
       <textarea
         ref={textareaRef}
         value={message}
diff --git a/src/suggestion.tsx b/src/suggestion.tsx
new file mode 100644
index 0000000..47cbb3f
--- /dev/null
+++ b/src/suggestion.tsx
@@ -0,0 +1,79 @@
+import "./tailwind.css";
+import React from "react";
+import type { SelectItemOptionsType } from "./list";
+import { List } from "./list";
+
+export interface TriggerConfig {
+  char: string;
+  data: SelectItemOptionsType;
+  optionLabel: string;
+  optionGroupLabel?: string;
+  optionGroupChildren?: string;
+}
+
+export type OnTextInject = (newText: string, newCursorPosition: number) => void;
+
+interface SuggestionProps {
+  message: string;
+  textareaRef: React.RefObject<HTMLTextAreaElement | null>;
+  triggerConfigs: TriggerConfig[];
+  onInject: OnTextInject;
+}
+
+const useSuggestionContext = (
+  message: string,
+  textareaRef: React.RefObject<HTMLTextAreaElement | null>,
+  triggerConfigs: TriggerConfig[],
+) => {
+  const context = React.useMemo(() => {
+    const textarea = textareaRef?.current;
+    if (!textarea) return null;
+
+    const caretPostionIndex = textarea.selectionStart ?? message.length;
+    let currentConfig: TriggerConfig | undefined;
+    let triggerIndex = -1;
+    let queryText = "";
+
+    for (let i = caretPostionIndex - 1; i >= 0; i--) {
+      const char = message[i];
+      const matchedConfig = triggerConfigs.find(
+        (config) => config.char === char,
+      );
+      if (matchedConfig) {
+        currentConfig = matchedConfig;
+        triggerIndex = i;
+        queryText = message.slice(i + 1, caretPostionIndex);
+        break;
+      }
+    }
+    if (!currentConfig) return null;
+    return {
+      currentConfig,
+      triggerIndex,
+      queryText,
+    };
+  }, [message, textareaRef, triggerConfigs]);
+  return context;
+};
+export default function Suggestion({
+  message,
+  textareaRef,
+  triggerConfigs,
+  onInject,
+}: SuggestionProps) {
+  const context = useSuggestionContext(message, textareaRef, triggerConfigs);
+  return (
+    <div>
+      <List
+        options={context?.currentConfig.data}
+        optionLabel={context?.currentConfig.optionLabel ?? "default value"}
+        optionGroupLabel={context?.currentConfig.optionGroupLabel}
+        optionGroupChildren={context?.currentConfig.optionGroupChildren}
+        onChange={(e) => {
+          const newText: string = (e.value ?? e.target.value) as string;
+          onInject(newText, context?.triggerIndex ?? -1);
+        }}
+      />
+    </div>
+  );
+}

From f75af8ae008fc6b8f3b9573927d087b24e5beba8 Mon Sep 17 00:00:00 2001
From: moeyue23 <185361175+moeyue23@users.noreply.github.com>
Date: Tue, 12 May 2026 23:58:51 +0800
Subject: [PATCH 02/14] fix(shadcn): strip tailwind.css imports from registry
 build and clean up ui

---
 package.json                       |  2 +-
 scripts/strip-tailwind-registry.ts | 33 ++++++++++++++++++++++++++++++
 2 files changed, 34 insertions(+), 1 deletion(-)
 create mode 100644 scripts/strip-tailwind-registry.ts

diff --git a/package.json b/package.json
index f740f88..a8d8328 100644
--- a/package.json
+++ b/package.json
@@ -82,7 +82,7 @@
     "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",
+    "registry:build": "shadcn build --output docs/doc_build/r && tsx scripts/strip-tailwind-registry.ts docs/doc_build/r",
     "test": "vitest",
     "typecheck": "tsc --noEmit"
   },
diff --git a/scripts/strip-tailwind-registry.ts b/scripts/strip-tailwind-registry.ts
new file mode 100644
index 0000000..3a2e92e
--- /dev/null
+++ b/scripts/strip-tailwind-registry.ts
@@ -0,0 +1,33 @@
+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}`);

From 256ed6b771a8163597808f8af757c3f9ea32fb2a Mon Sep 17 00:00:00 2001
From: moeyue23 <185361175+moeyue23@users.noreply.github.com>
Date: Wed, 13 May 2026 00:18:44 +0800
Subject: [PATCH 03/14] fix(shadcn): correct registry types and bundle sender
 dependencies

---
 registry.json | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/registry.json b/registry.json
index 594c402..d5fedea 100644
--- a/registry.json
+++ b/registry.json
@@ -5,7 +5,7 @@
   "items": [
     {
       "name": "button",
-      "type": "registry:block",
+      "type": "registry:component",
       "title": "Button",
       "description": "MateChat Button",
       "files": [
@@ -24,12 +24,20 @@
         {
           "path": "src/sender.tsx",
           "type": "registry:component"
+        },
+        {
+          "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": [

From fa62a0c988f438b9dc49f21a72b851f23b10700c Mon Sep 17 00:00:00 2001
From: moeyue23 <185361175+moeyue23@users.noreply.github.com>
Date: Wed, 13 May 2026 00:19:03 +0800
Subject: [PATCH 04/14] chore: remove debug console.log in useTheme hook

---
 scripts/strip-tailwind-registry.ts | 4 +++-
 src/bubble/hooks.tsx               | 2 --
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/scripts/strip-tailwind-registry.ts b/scripts/strip-tailwind-registry.ts
index 3a2e92e..c0b043b 100644
--- a/scripts/strip-tailwind-registry.ts
+++ b/scripts/strip-tailwind-registry.ts
@@ -3,7 +3,9 @@ import { join } from "node:path";
 
 const registryDir = process.argv[2];
 if (!registryDir) {
-  console.error("Usage: tsx scripts/strip-tailwind-registry.ts <registry-output-dir>");
+  console.error(
+    "Usage: tsx scripts/strip-tailwind-registry.ts <registry-output-dir>",
+  );
   process.exit(1);
 }
 
diff --git a/src/bubble/hooks.tsx b/src/bubble/hooks.tsx
index ef4ab07..dc2c9fb 100644
--- a/src/bubble/hooks.tsx
+++ b/src/bubble/hooks.tsx
@@ -20,7 +20,5 @@ export const useTheme = () => {
     };
   }, []);
 
-  console.log(isDark);
-
   return { isDark };
 };

From 4514d86290dd1f9ec14d2668e386633f0c32bab6 Mon Sep 17 00:00:00 2001
From: moeyue23 <185361175+moeyue23@users.noreply.github.com>
Date: Sat, 16 May 2026 01:22:02 +0800
Subject: [PATCH 05/14] refactor(shadcn): flatten bubble directory and rename
 hooks

---
 src/{bubble/index.tsx => bubble.tsx}         | 0
 src/{bubble/hooks.tsx => hooks/use-theme.ts} | 0
 src/{bubble => }/markdown.tsx                | 0
 3 files changed, 0 insertions(+), 0 deletions(-)
 rename src/{bubble/index.tsx => bubble.tsx} (100%)
 rename src/{bubble/hooks.tsx => hooks/use-theme.ts} (100%)
 rename src/{bubble => }/markdown.tsx (100%)

diff --git a/src/bubble/index.tsx b/src/bubble.tsx
similarity index 100%
rename from src/bubble/index.tsx
rename to src/bubble.tsx
diff --git a/src/bubble/hooks.tsx b/src/hooks/use-theme.ts
similarity index 100%
rename from src/bubble/hooks.tsx
rename to src/hooks/use-theme.ts
diff --git a/src/bubble/markdown.tsx b/src/markdown.tsx
similarity index 100%
rename from src/bubble/markdown.tsx
rename to src/markdown.tsx

From 3d911d53b5969b759633f556d8399276bdeed87e Mon Sep 17 00:00:00 2001
From: moeyue23 <185361175+moeyue23@users.noreply.github.com>
Date: Sat, 16 May 2026 01:32:06 +0800
Subject: [PATCH 06/14] refactor(shadcn): update registry structure and fix
 imports after flatten

---
 registry.json    | 22 ++++++++++++++++------
 src/bubble.tsx   |  2 +-
 src/markdown.tsx |  2 +-
 src/sender.tsx   | 22 +++++++++++-----------
 4 files changed, 29 insertions(+), 19 deletions(-)

diff --git a/registry.json b/registry.json
index d5fedea..d1c24f6 100644
--- a/registry.json
+++ b/registry.json
@@ -17,14 +17,24 @@
     },
     {
       "name": "sender",
-      "type": "registry:block",
+      "type": "registry:component",
       "title": "Sender",
       "description": "MateChat Sender",
+      "dependencies": ["clsx", "tailwind-merge"],
       "files": [
         {
           "path": "src/sender.tsx",
           "type": "registry:component"
-        },
+        }
+      ]
+    },
+    {
+      "name": "suggestion",
+      "type": "registry:component",
+      "title": "Suggestion",
+      "description": "MateChat Suggestion",
+      "dependencies": ["clsx", "tailwind-merge"],
+      "files": [
         {
           "path": "src/suggestion.tsx",
           "type": "registry:component"
@@ -54,16 +64,16 @@
       "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": [
diff --git a/src/bubble.tsx b/src/bubble.tsx
index 4b94f26..9e913f1 100644
--- a/src/bubble.tsx
+++ b/src/bubble.tsx
@@ -1,5 +1,5 @@
 import { cva, type VariantProps } from "class-variance-authority";
-import "../tailwind.css";
+import "./tailwind.css";
 
 import type { UIMessage } from "ai";
 import clsx from "clsx";
diff --git a/src/markdown.tsx b/src/markdown.tsx
index 168e01b..74e84b1 100644
--- a/src/markdown.tsx
+++ b/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;
diff --git a/src/sender.tsx b/src/sender.tsx
index 832f446..d011ffd 100644
--- a/src/sender.tsx
+++ b/src/sender.tsx
@@ -3,9 +3,6 @@ import "./tailwind.css";
 import clsx from "clsx";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { twMerge } from "tailwind-merge";
-import type { TriggerConfig } from "./suggestion";
-import Suggestion from "./suggestion";
-
 export interface InputCountProps extends React.ComponentProps<"span"> {
   count: number;
   limit: number;
@@ -60,7 +57,11 @@ export interface SenderProps extends React.ComponentProps<"div"> {
   onMessageChange?: (message: string) => void;
   onSend?: () => void;
   toolbar?: React.ReactNode;
-  triggerConfigs?: TriggerConfig[];
+  suggestion?: (context: {
+    message: string;
+    textareaRef: React.RefObject<HTMLTextAreaElement | null>;
+    onInject: (text: string, position: number) => void;
+  }) => React.ReactNode;
 }
 
 export function Sender({
@@ -71,7 +72,7 @@ export function Sender({
   sendMessage,
   onSend,
   toolbar,
-  triggerConfigs,
+  suggestion,
   ...props
 }: SenderProps) {
   const textareaRef = useRef<HTMLTextAreaElement>(null);
@@ -150,12 +151,11 @@ export function Sender({
       )}
       {...props}
     >
-      <Suggestion
-        message={message}
-        textareaRef={textareaRef}
-        triggerConfigs={triggerConfigs ?? []}
-        onInject={handleTextInject}
-      />
+      {suggestion?.({
+        message,
+        textareaRef,
+        onInject: handleTextInject,
+      })}
       <textarea
         ref={textareaRef}
         value={message}

From 8104598a171ba629f5f0e3896f02bee6b9be88bf Mon Sep 17 00:00:00 2001
From: moeyue23 <185361175+moeyue23@users.noreply.github.com>
Date: Sat, 16 May 2026 10:12:06 +0800
Subject: [PATCH 07/14] refactor(shadcn): add necessary dependencies

---
 registry.json | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/registry.json b/registry.json
index d1c24f6..1abcb45 100644
--- a/registry.json
+++ b/registry.json
@@ -8,6 +8,7 @@
       "type": "registry:component",
       "title": "Button",
       "description": "MateChat Button",
+      "dependencies": ["clsx", "tailwind-merge", "class-variance-authority"],
       "files": [
         {
           "path": "src/button.tsx",
@@ -50,6 +51,7 @@
       "type": "registry:component",
       "title": "Prompt",
       "description": "MateChat Prompt",
+      "dependencies": ["clsx", "tailwind-merge", "class-variance-authority"],
       "files": [
         {
           "path": "src/prompt.tsx",
@@ -57,6 +59,19 @@
         }
       ]
     },
+    {
+      "name": "file-upload",
+      "type": "registry:component",
+      "title": "File Upload",
+      "description": "MateChat File Upload",
+      "dependencies": ["clsx", "tailwind-merge"],
+      "files": [
+        {
+          "path": "src/file-upload.tsx",
+          "type": "registry:component"
+        }
+      ]
+    },
     {
       "name": "bubble",
       "type": "registry:block",
@@ -77,6 +92,9 @@
         }
       ],
       "dependencies": [
+        "clsx",
+        "tailwind-merge",
+        "class-variance-authority",
         "react-markdown",
         "remark-gfm",
         "remark-math",

From d0480edb67c36ede624188198dcc3ee14554c687 Mon Sep 17 00:00:00 2001
From: moeyue23 <185361175+moeyue23@users.noreply.github.com>
Date: Sat, 16 May 2026 14:50:28 +0800
Subject: [PATCH 08/14] refactor: replace relative imports with @/ path aliases

---
 src/bubble.tsx      |  4 ++--
 src/button.tsx      |  2 +-
 src/file-upload.tsx |  2 +-
 src/index.ts        | 12 ++++++------
 src/markdown.tsx    |  2 +-
 src/prompt.tsx      |  2 +-
 src/sender.tsx      |  2 +-
 src/suggestion.tsx  |  6 +++---
 tsconfig.json       |  6 +++++-
 vite.config.ts      |  5 +++++
 vitest.config.ts    |  6 ++++++
 11 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/src/bubble.tsx b/src/bubble.tsx
index 9e913f1..219d093 100644
--- a/src/bubble.tsx
+++ b/src/bubble.tsx
@@ -1,5 +1,5 @@
 import { cva, type VariantProps } from "class-variance-authority";
-import "./tailwind.css";
+import "@/tailwind.css";
 
 import type { UIMessage } from "ai";
 import clsx from "clsx";
@@ -9,7 +9,7 @@ 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";
 
 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",
diff --git a/src/button.tsx b/src/button.tsx
index f7f0f58..77f2e30 100644
--- a/src/button.tsx
+++ b/src/button.tsx
@@ -1,4 +1,4 @@
-import "./tailwind.css";
+import "@/tailwind.css";
 
 import { cva, type VariantProps } from "class-variance-authority";
 import clsx from "clsx";
diff --git a/src/file-upload.tsx b/src/file-upload.tsx
index 9015282..5d01e56 100644
--- a/src/file-upload.tsx
+++ b/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;
diff --git a/src/index.ts b/src/index.ts
index d0939ad..7d7c0e5 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,8 +1,8 @@
 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";
diff --git a/src/markdown.tsx b/src/markdown.tsx
index 74e84b1..345122b 100644
--- a/src/markdown.tsx
+++ b/src/markdown.tsx
@@ -5,7 +5,7 @@ import {
   oneLight,
   vscDarkPlus,
 } from "react-syntax-highlighter/dist/esm/styles/prism";
-import { useTheme } from "./hooks/use-theme";
+import { useTheme } from "@/hooks/use-theme";
 
 export interface HeadingProps extends React.ComponentProps<"h1"> {
   level: 1 | 2 | 3 | 4 | 5 | 6;
diff --git a/src/prompt.tsx b/src/prompt.tsx
index a24b53f..fdd42ca 100644
--- a/src/prompt.tsx
+++ b/src/prompt.tsx
@@ -1,4 +1,4 @@
-import "./tailwind.css";
+import "@/tailwind.css";
 
 import { cva, type VariantProps } from "class-variance-authority";
 import clsx from "clsx";
diff --git a/src/sender.tsx b/src/sender.tsx
index d011ffd..0d27f87 100644
--- a/src/sender.tsx
+++ b/src/sender.tsx
@@ -1,4 +1,4 @@
-import "./tailwind.css";
+import "@/tailwind.css";
 
 import clsx from "clsx";
 import { useCallback, useEffect, useRef, useState } from "react";
diff --git a/src/suggestion.tsx b/src/suggestion.tsx
index 1a0fff4..2a0dcff 100644
--- a/src/suggestion.tsx
+++ b/src/suggestion.tsx
@@ -1,7 +1,7 @@
-import "./tailwind.css";
+import "@/tailwind.css";
 import React from "react";
-import type { SelectItemOptionsType } from "./list";
-import { List } from "./list";
+import type { SelectItemOptionsType } from "@/list";
+import { List } from "@/list";
 
 export interface TriggerConfig {
   char: string;
diff --git a/tsconfig.json b/tsconfig.json
index 7fde35a..d4edf21 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -15,7 +15,11 @@
     "esModuleInterop": true,
     "isolatedModules": true,
     "verbatimModuleSyntax": true,
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
   },
   "include": ["src"]
 }
diff --git a/vite.config.ts b/vite.config.ts
index e02a6bd..cd50e4c 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -6,6 +6,11 @@ import dts from "vite-plugin-dts";
 import { libInjectCss } from "vite-plugin-lib-inject-css";
 
 export default defineConfig({
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
   build: {
     lib: {
       name: "index",
diff --git a/vitest.config.ts b/vitest.config.ts
index 70ac3ab..10e184d 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -1,7 +1,13 @@
+import path from "node:path";
 import react from "@vitejs/plugin-react";
 import { defineConfig } from "vitest/config";
 
 export default defineConfig({
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
   // @ts-expect-error - Vitest types are not compatible with Rolldown Vite
   plugins: [react()],
   test: {

From 639b6651b72caeaf54dc315dbe4bb4d008ec18f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8B=8F=E5=90=91=E5=A4=9C?= <fu050409@163.com>
Date: Sun, 17 May 2026 19:54:49 +0800
Subject: [PATCH 09/14] feat(shadcn): improve compatibility

---
 .changes/shadcn-compatibility.md |  5 +++
 package.json                     | 76 ++++++++++++++++----------------
 playground/src/App.tsx           |  8 ++--
 playground/src/communicate.tsx   |  8 ++--
 registry.json                    |  8 ----
 src/bubble.tsx                   | 10 ++---
 src/button.tsx                   |  4 +-
 src/index.ts                     | 13 +++---
 src/prompt.tsx                   |  4 +-
 src/sender.tsx                   |  9 ++--
 src/suggestion.tsx               | 13 +++---
 tsconfig.json                    |  8 ++--
 vite.config.ts                   |  4 +-
 13 files changed, 87 insertions(+), 83 deletions(-)
 create mode 100644 .changes/shadcn-compatibility.md

diff --git a/.changes/shadcn-compatibility.md b/.changes/shadcn-compatibility.md
new file mode 100644
index 0000000..2c6e948
--- /dev/null
+++ b/.changes/shadcn-compatibility.md
@@ -0,0 +1,5 @@
+---
+"@matechat/react": "patch:feat"
+---
+
+Improve Shadcn components compatibility.
diff --git a/package.json b/package.json
index a8d8328..099bbeb 100644
--- a/package.json
+++ b/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,6 +77,10 @@
     "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"
@@ -52,41 +88,5 @@
   "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 && tsx scripts/strip-tailwind-registry.ts docs/doc_build/r",
-    "test": "vitest",
-    "typecheck": "tsc --noEmit"
-  },
-  "type": "module",
-  "types": "./dist/*.d.ts",
-  "version": "0.1.1"
+  "packageManager": "pnpm@10.14.0"
 }
diff --git a/playground/src/App.tsx b/playground/src/App.tsx
index 86a574c..72161a7 100644
--- a/playground/src/App.tsx
+++ b/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",
             )}
           >
diff --git a/playground/src/communicate.tsx b/playground/src/communicate.tsx
index 7acdc07..8e7736a 100644
--- a/playground/src/communicate.tsx
+++ b/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">
diff --git a/registry.json b/registry.json
index 1abcb45..b72ad67 100644
--- a/registry.json
+++ b/registry.json
@@ -8,7 +8,6 @@
       "type": "registry:component",
       "title": "Button",
       "description": "MateChat Button",
-      "dependencies": ["clsx", "tailwind-merge", "class-variance-authority"],
       "files": [
         {
           "path": "src/button.tsx",
@@ -21,7 +20,6 @@
       "type": "registry:component",
       "title": "Sender",
       "description": "MateChat Sender",
-      "dependencies": ["clsx", "tailwind-merge"],
       "files": [
         {
           "path": "src/sender.tsx",
@@ -34,7 +32,6 @@
       "type": "registry:component",
       "title": "Suggestion",
       "description": "MateChat Suggestion",
-      "dependencies": ["clsx", "tailwind-merge"],
       "files": [
         {
           "path": "src/suggestion.tsx",
@@ -51,7 +48,6 @@
       "type": "registry:component",
       "title": "Prompt",
       "description": "MateChat Prompt",
-      "dependencies": ["clsx", "tailwind-merge", "class-variance-authority"],
       "files": [
         {
           "path": "src/prompt.tsx",
@@ -64,7 +60,6 @@
       "type": "registry:component",
       "title": "File Upload",
       "description": "MateChat File Upload",
-      "dependencies": ["clsx", "tailwind-merge"],
       "files": [
         {
           "path": "src/file-upload.tsx",
@@ -92,9 +87,6 @@
         }
       ],
       "dependencies": [
-        "clsx",
-        "tailwind-merge",
-        "class-variance-authority",
         "react-markdown",
         "remark-gfm",
         "remark-math",
diff --git a/src/bubble.tsx b/src/bubble.tsx
index 219d093..1f90d64 100644
--- a/src/bubble.tsx
+++ b/src/bubble.tsx
@@ -1,7 +1,5 @@
-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";
@@ -9,10 +7,12 @@ 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 "@/components/markdown.js";
+
+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: {
diff --git a/src/button.tsx b/src/button.tsx
index 77f2e30..963ebe2 100644
--- a/src/button.tsx
+++ b/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",
   {
diff --git a/src/index.ts b/src/index.ts
index 7d7c0e5..e31466c 100644
--- a/src/index.ts
+++ b/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";
diff --git a/src/prompt.tsx b/src/prompt.tsx
index fdd42ca..3136f38 100644
--- a/src/prompt.tsx
+++ b/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: {
diff --git a/src/sender.tsx b/src/sender.tsx
index 0d27f87..033dd51 100644
--- a/src/sender.tsx
+++ b/src/sender.tsx
@@ -1,8 +1,9 @@
-import "@/tailwind.css";
-
 import clsx from "clsx";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { twMerge } from "tailwind-merge";
+
+import "./tailwind.css";
+
 export interface InputCountProps extends React.ComponentProps<"span"> {
   count: number;
   limit: number;
@@ -163,10 +164,10 @@ export function Sender({
         onKeyDown={handleKeyDown}
         placeholder={placeholder}
         className={clsx(
-          "w-full pt-4 px-4 border-0 rounded-2xl !resize-none bg-transparent",
+          "w-full pt-4 px-4 border-0 rounded-2xl resize-none! bg-transparent",
           "focus:ring-0 focus:outline-none text-gray-700 placeholder-gray-400",
           "overflow-y-auto max-h-32",
-          "[scrollbar-gutter:stable] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full",
+          "scrollbar-gutter-stable [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full",
           "[&::-webkit-scrollbar-thumb]:cursor-auto",
           "[&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-thumb]:bg-gray-600",
           "[&::-webkit-scrollbar-thumb:hover]:bg-gray-400 dark:[&::-webkit-scrollbar-thumb:hover]:bg-gray-500",
diff --git a/src/suggestion.tsx b/src/suggestion.tsx
index 2a0dcff..10287de 100644
--- a/src/suggestion.tsx
+++ b/src/suggestion.tsx
@@ -1,7 +1,8 @@
-import "@/tailwind.css";
 import React from "react";
-import type { SelectItemOptionsType } from "@/list";
-import { List } from "@/list";
+import type { SelectItemOptionsType } from "@/components/list";
+import { List } from "@/components/list";
+
+import "./tailwind.css";
 
 export interface TriggerConfig {
   char: string;
@@ -29,12 +30,12 @@ const useSuggestionContext = (
     const textarea = textareaRef?.current;
     if (!textarea) return null;
 
-    const caretPostionIndex = textarea.selectionStart ?? message.length;
+    const caretPositionIndex = textarea.selectionStart ?? message.length;
     let currentConfig: TriggerConfig | undefined;
     let triggerIndex = -1;
     let queryText = "";
 
-    for (let i = caretPostionIndex - 1; i >= 0; i--) {
+    for (let i = caretPositionIndex - 1; i >= 0; i--) {
       const char = message[i];
       const matchedConfig = triggerConfigs.find(
         (config) => config.char === char,
@@ -42,7 +43,7 @@ const useSuggestionContext = (
       if (matchedConfig) {
         currentConfig = matchedConfig;
         triggerIndex = i;
-        queryText = message.slice(i + 1, caretPostionIndex);
+        queryText = message.slice(i + 1, caretPositionIndex);
         break;
       }
     }
diff --git a/tsconfig.json b/tsconfig.json
index d4edf21..55f6e2a 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -18,8 +18,10 @@
     "skipLibCheck": true,
     "baseUrl": ".",
     "paths": {
-      "@/*": ["./src/*"]
-    }
+      "@/icons/*": ["./src/icons/*"],
+      "@/hooks/*": ["./src/hooks/*"],
+      "@/components/*": ["./src/*"],
+    },
   },
-  "include": ["src"]
+  "include": ["src"],
 }
diff --git a/vite.config.ts b/vite.config.ts
index cd50e4c..90b2034 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -8,7 +8,9 @@ import { libInjectCss } from "vite-plugin-lib-inject-css";
 export default defineConfig({
   resolve: {
     alias: {
-      "@": path.resolve(__dirname, "./src"),
+      "@/icons": path.resolve(__dirname, "./src/icons"),
+      "@/hooks": path.resolve(__dirname, "./src/hooks"),
+      "@/components": path.resolve(__dirname, "./src"),
     },
   },
   build: {

From 6de274201eb39b0755d9296eb6450ce277cde3af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8B=8F=E5=90=91=E5=A4=9C?= <fu050409@163.com>
Date: Sun, 17 May 2026 19:58:51 +0800
Subject: [PATCH 10/14] chore(ts): remove baseURL

---
 tsconfig.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/tsconfig.json b/tsconfig.json
index 55f6e2a..0146c90 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -16,7 +16,6 @@
     "isolatedModules": true,
     "verbatimModuleSyntax": true,
     "skipLibCheck": true,
-    "baseUrl": ".",
     "paths": {
       "@/icons/*": ["./src/icons/*"],
       "@/hooks/*": ["./src/hooks/*"],

From 791481477062c14406f2004ddad426851fd07526 Mon Sep 17 00:00:00 2001
From: moeyue23 <185361175+moeyue23@users.noreply.github.com>
Date: Sun, 17 May 2026 21:18:48 +0800
Subject: [PATCH 11/14] fix(shadcn): restore @/* path alias and registry
 dependencies

---
 src/bubble.tsx     |  2 +-
 src/index.ts       | 14 +++++++-------
 src/suggestion.tsx |  4 ++--
 tsconfig.json      |  5 ++---
 vite.config.ts     |  4 +---
 5 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/src/bubble.tsx b/src/bubble.tsx
index 1f90d64..4fb91ec 100644
--- a/src/bubble.tsx
+++ b/src/bubble.tsx
@@ -7,7 +7,7 @@ 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 "@/components/markdown.js";
+import { BlockQuote, CodeBlock, Heading, Link } from "@/markdown";
 
 import "./tailwind.css";
 
diff --git a/src/index.ts b/src/index.ts
index e31466c..d874275 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,9 +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 "./suggestion";
+export * from "@/bubble";
+export * from "@/button";
+export * from "@/file-upload";
+export * from "@/list";
+export * from "@/prompt";
+export * from "@/sender";
+export * from "@/suggestion";
diff --git a/src/suggestion.tsx b/src/suggestion.tsx
index 10287de..7c47bb0 100644
--- a/src/suggestion.tsx
+++ b/src/suggestion.tsx
@@ -1,6 +1,6 @@
 import React from "react";
-import type { SelectItemOptionsType } from "@/components/list";
-import { List } from "@/components/list";
+import type { SelectItemOptionsType } from "@/list";
+import { List } from "@/list";
 
 import "./tailwind.css";
 
diff --git a/tsconfig.json b/tsconfig.json
index 0146c90..42b2cda 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -16,10 +16,9 @@
     "isolatedModules": true,
     "verbatimModuleSyntax": true,
     "skipLibCheck": true,
+    "baseUrl": ".",
     "paths": {
-      "@/icons/*": ["./src/icons/*"],
-      "@/hooks/*": ["./src/hooks/*"],
-      "@/components/*": ["./src/*"],
+      "@/*": ["./src/*"]
     },
   },
   "include": ["src"],
diff --git a/vite.config.ts b/vite.config.ts
index 90b2034..cd50e4c 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -8,9 +8,7 @@ import { libInjectCss } from "vite-plugin-lib-inject-css";
 export default defineConfig({
   resolve: {
     alias: {
-      "@/icons": path.resolve(__dirname, "./src/icons"),
-      "@/hooks": path.resolve(__dirname, "./src/hooks"),
-      "@/components": path.resolve(__dirname, "./src"),
+      "@": path.resolve(__dirname, "./src"),
     },
   },
   build: {

From a3bc74ee495169633c2c232aa799af6e74779b3f Mon Sep 17 00:00:00 2001
From: moeyue23 <185361175+moeyue23@users.noreply.github.com>
Date: Sun, 17 May 2026 21:43:13 +0800
Subject: [PATCH 12/14] style(tsconfig): remove trailing commas

---
 tsconfig.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/tsconfig.json b/tsconfig.json
index 42b2cda..d4edf21 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -19,7 +19,7 @@
     "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]
-    },
+    }
   },
-  "include": ["src"],
+  "include": ["src"]
 }

From 64e8b5540b1abba0119248bd10493f6f6f431be2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8B=8F=E5=90=91=E5=A4=9C?= <fu050409@163.com>
Date: Mon, 18 May 2026 22:55:53 +0800
Subject: [PATCH 13/14] chore: remove legacy ts-expect-error

---
 vitest.config.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/vitest.config.ts b/vitest.config.ts
index 10e184d..a350b59 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -8,7 +8,6 @@ export default defineConfig({
       "@": path.resolve(__dirname, "./src"),
     },
   },
-  // @ts-expect-error - Vitest types are not compatible with Rolldown Vite
   plugins: [react()],
   test: {
     environment: "happy-dom",

From 3cfb838e928534212e5258b5dc97145561c4642c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8B=8F=E5=90=91=E5=A4=9C?= <fu050409@163.com>
Date: Mon, 18 May 2026 22:57:45 +0800
Subject: [PATCH 14/14] chore: bump version

---
 .changes/suggestion-to-func.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changes/suggestion-to-func.md

diff --git a/.changes/suggestion-to-func.md b/.changes/suggestion-to-func.md
new file mode 100644
index 0000000..ffe7f4d
--- /dev/null
+++ b/.changes/suggestion-to-func.md
@@ -0,0 +1,5 @@
+---
+"@matechat/react": "patch:feat"
+---
+
+Refactor `triggerOptions` to suggestion callback.