From 3d631bf92e4984d2ebf37d152238d5000d142122 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=98=9F=E5=BC=A6=E8=AF=AD?= <xu060805@gmail.com>
Date: Fri, 11 Jul 2025 20:41:58 +0800
Subject: [PATCH 1/5] style(inputcount): text-gray-400

---
 playground/src/Chat.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/playground/src/Chat.tsx b/playground/src/Chat.tsx
index ffd76e4..3d96f5e 100644
--- a/playground/src/Chat.tsx
+++ b/playground/src/Chat.tsx
@@ -96,7 +96,11 @@ export function Chat() {
             onMessageChange={setPrompt}
             toolbar={
               <div className="flex flex-row justify-between w-full">
-                <InputCount count={prompt.length} limit={500} />
+                <InputCount
+                  count={prompt.length}
+                  limit={500}
+                  className="text-gray-400"
+                />
                 <FileUpload />
               </div>
             }

From 70983c3e326f251d07473bdd7fdffdced3a3e3f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=98=9F=E5=BC=A6=E8=AF=AD?= <xu060805@gmail.com>
Date: Fri, 11 Jul 2025 20:53:08 +0800
Subject: [PATCH 2/5] feat(sender): optimize input count style

---
 playground/src/Chat.tsx | 1 -
 src/sender.tsx          | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/playground/src/Chat.tsx b/playground/src/Chat.tsx
index 3d96f5e..798e697 100644
--- a/playground/src/Chat.tsx
+++ b/playground/src/Chat.tsx
@@ -99,7 +99,6 @@ export function Chat() {
                 <InputCount
                   count={prompt.length}
                   limit={500}
-                  className="text-gray-400"
                 />
                 <FileUpload />
               </div>
diff --git a/src/sender.tsx b/src/sender.tsx
index 7df19f1..a82fa80 100644
--- a/src/sender.tsx
+++ b/src/sender.tsx
@@ -16,7 +16,7 @@ export interface InputCountProps extends React.ComponentProps<"span"> {
 export function InputCount({
   count,
   limit,
-  className,
+  className = "text-gray-400",
   ...props
 }: InputCountProps) {
   return (

From 6e798e16a0f9f88ff0376be62a7bd92610aa7ce5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=98=9F=E5=BC=A6=E8=AF=AD?= <xu060805@gmail.com>
Date: Fri, 11 Jul 2025 20:56:32 +0800
Subject: [PATCH 3/5] feat(sender): pnpm lint:fix

---
 playground/src/Chat.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/playground/src/Chat.tsx b/playground/src/Chat.tsx
index 798e697..ffd76e4 100644
--- a/playground/src/Chat.tsx
+++ b/playground/src/Chat.tsx
@@ -96,10 +96,7 @@ export function Chat() {
             onMessageChange={setPrompt}
             toolbar={
               <div className="flex flex-row justify-between w-full">
-                <InputCount
-                  count={prompt.length}
-                  limit={500}
-                />
+                <InputCount count={prompt.length} limit={500} />
                 <FileUpload />
               </div>
             }

From d65003117bd9a8212d11ba4ab848304661499ace Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=98=9F=E5=BC=A6=E8=AF=AD?= <xu060805@gmail.com>
Date: Fri, 11 Jul 2025 21:02:02 +0800
Subject: [PATCH 4/5] feat(sender): optimize input count style

---
 src/sender.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/sender.tsx b/src/sender.tsx
index a82fa80..0bd0653 100644
--- a/src/sender.tsx
+++ b/src/sender.tsx
@@ -16,11 +16,11 @@ export interface InputCountProps extends React.ComponentProps<"span"> {
 export function InputCount({
   count,
   limit,
-  className = "text-gray-400",
+  className,
   ...props
 }: InputCountProps) {
   return (
-    <span className={className} {...props}>
+    <span className={clsx("text-gray-400", className)} {...props}>
       {count} / {limit}
     </span>
   );

From 09a3304a2f4acdebfa8cce3c3c42518fc3475d94 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=98=9F=E5=BC=A6=E8=AF=AD?= <xu060805@gmail.com>
Date: Wed, 16 Jul 2025 21:05:14 +0800
Subject: [PATCH 5/5] add .md

---
 .changes/add-inputcount-component.md | 8 ++++++++
 1 file changed, 8 insertions(+)
 create mode 100644 .changes/add-inputcount-component.md

diff --git a/.changes/add-inputcount-component.md b/.changes/add-inputcount-component.md
new file mode 100644
index 0000000..8c585e7
--- /dev/null
+++ b/.changes/add-inputcount-component.md
@@ -0,0 +1,8 @@
+---
+"@matechat/react": patch:feat
+---
+
+Add `InputCount` component.
+
+-Remove the input count div container and wrap it into a new component, allowing users to customize the input limit.
+-Remove the justify-center style from the div container and add ml-auto to the SenderButton to ensure button remains on the right side.
\ No newline at end of file