From 003535048709b3952e54ae54caee819aca4c6d0e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=98=9F=E5=BC=A6=E8=AF=AD?= <xu060805@gmail.com>
Date: Sun, 29 Jun 2025 21:41:43 +0800
Subject: [PATCH 1/3] feat(file-upload): add file-upload component

---
 src/file-upload.tsx | 41 +++++++++++++++++++++++++++++++++++++++++
 src/index.ts        |  1 +
 2 files changed, 42 insertions(+)
 create mode 100644 src/file-upload.tsx

diff --git a/src/file-upload.tsx b/src/file-upload.tsx
new file mode 100644
index 0000000..cba53cf
--- /dev/null
+++ b/src/file-upload.tsx
@@ -0,0 +1,41 @@
+import clsx from "clsx";
+import type React from "react";
+import { useRef } from "react";
+import { twMerge } from "tailwind-merge";
+
+export interface FileUploadProps extends React.ComponentProps<"button"> {
+  onFilesSelect: (files: File[]) => void;
+}
+
+export function FileUpload({
+  className,
+  onFilesSelect,
+  ...props
+}: FileUploadProps) {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(e.target.files ?? []);
+    onFilesSelect(files);
+    if (fileInputRef.current) fileInputRef.current.value = "";
+  };
+
+  return (
+    <button
+      type="button"
+      className={twMerge(
+        clsx("cursor-pointer text-gray-500 hover:text-gray-500/80", className),
+      )}
+      onClick={() => fileInputRef.current?.click()}
+      {...props}
+    >
+      下载
+      <input
+        type="file"
+        className="hidden"
+        ref={fileInputRef}
+        onChange={handleChange}
+        multiple
+      />
+    </button>
+  );
+}
diff --git a/src/index.ts b/src/index.ts
index 34a7e78..e4e1636 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,5 +1,6 @@
 export * from "./bubble";
 export * from "./button";
+export * from "./file-upload";
 export * from "./list";
 export * from "./prompt";
 export * from "./sender";

From 346135f2c592994d1add976b9d592078587b8ec4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=98=9F=E5=BC=A6=E8=AF=AD?= <xu060805@gmail.com>
Date: Sun, 29 Jun 2025 21:51:50 +0800
Subject: [PATCH 2/3] feat(file-upload): use svg icon instead of text

---
 src/file-upload.tsx    | 8 +++++++-
 src/icons/appendix.svg | 9 +++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)
 create mode 100644 src/icons/appendix.svg

diff --git a/src/file-upload.tsx b/src/file-upload.tsx
index cba53cf..08d5c96 100644
--- a/src/file-upload.tsx
+++ b/src/file-upload.tsx
@@ -2,6 +2,7 @@ import clsx from "clsx";
 import type React from "react";
 import { useRef } from "react";
 import { twMerge } from "tailwind-merge";
+import Appendix from "./icons/appendix.svg";
 
 export interface FileUploadProps extends React.ComponentProps<"button"> {
   onFilesSelect: (files: File[]) => void;
@@ -21,6 +22,7 @@ export function FileUpload({
 
   return (
     <button
+      data-slot="file-upload"
       type="button"
       className={twMerge(
         clsx("cursor-pointer text-gray-500 hover:text-gray-500/80", className),
@@ -28,7 +30,11 @@ export function FileUpload({
       onClick={() => fileInputRef.current?.click()}
       {...props}
     >
-      下载
+      <img
+        src={Appendix}
+        alt="upload"
+        className="w-5 h-5 dark:filter dark:filter-invert hover:scale-105"
+      />
       <input
         type="file"
         className="hidden"
diff --git a/src/icons/appendix.svg b/src/icons/appendix.svg
new file mode 100644
index 0000000..21ae624
--- /dev/null
+++ b/src/icons/appendix.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>appendix</title>
+    <g id="appendix" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="ipd_appendix" transform="translate(1.500000, 2.292462)" fill="#71757F" fill-rule="nonzero">
+            <path d="M8.82006978,0.302937874 C9.89069143,-0.767647215 11.6264797,-0.767647215 12.6970692,0.302951454 C13.7230375,1.32896353 13.7657862,2.96586468 12.8253086,4.0427506 L12.6970617,4.17994186 L6.09312488,10.7838787 C4.58486058,12.292143 2.13946378,12.292143 0.631204773,10.7838797 C-0.825058843,9.32762435 -0.875274829,6.99775109 0.480555907,5.48124715 L0.631203767,5.32195382 L6.17851891,-0.225361323 C6.37378105,-0.420623469 6.69036354,-0.420623469 6.88562569,-0.225361323 C7.05919204,-0.0517949709 7.07847719,0.21762943 6.94348114,0.412497571 L6.88562569,0.481745458 L1.33830954,6.02906161 C0.220563486,7.1468013 0.220563486,8.95903119 1.33831105,10.0767724 C2.41133776,11.1498022 4.12441097,11.1927233 5.24864466,10.2055355 L5.3860181,10.0767719 L11.9899549,3.47283507 C12.6700163,2.7927737 12.6700163,1.69014109 11.9899534,1.01004918 C11.349896,0.36998628 10.3355211,0.332335521 9.65140172,0.897097329 L9.52717153,1.01004969 L2.92327107,7.6139875 C2.68085592,7.85640265 2.68085592,8.24941317 2.92328616,8.49182272 C3.13873449,8.70728944 3.47320002,8.73123018 3.71512175,8.56363436 L3.8010912,8.49180763 L9.34837272,2.94452611 C9.54363486,2.74926396 9.86021735,2.74926396 10.0554795,2.94452611 C10.2290458,3.11809246 10.248331,3.38751686 10.1133349,3.582385 L10.0554795,3.65163289 L4.50819798,9.19891441 C3.87525351,9.83185888 2.84905474,9.83185888 2.21617938,9.1989295 C1.62045274,8.6032537 1.58540999,7.65919358 2.11103774,7.02249977 L2.21616329,6.90688172 L8.82006978,0.302937874 Z" id="路径"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

From 7a7c4d627df440532a61c7edc0a711362da72d13 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=98=9F=E5=BC=A6=E8=AF=AD?= <xu060805@gmail.com>
Date: Sun, 29 Jun 2025 21:58:33 +0800
Subject: [PATCH 3/3] chore: add version bump file

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

diff --git a/.changes/file-upload.md b/.changes/file-upload.md
new file mode 100644
index 0000000..b60dc52
--- /dev/null
+++ b/.changes/file-upload.md
@@ -0,0 +1,5 @@
+---
+"@matechat/react": patch:feat
+---
+
+Add `FileUpload` component for file selections.