diff --git a/package.json b/package.json
index 9be6e4b..262411b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ant-design/pro-chat",
-  "version": "1.15.2",
+  "version": "1.15.2-cannay.0",
   "description": "a solution for ai chat",
   "keywords": [
     "ai",
@@ -62,6 +62,7 @@
   "dependencies": {
     "@ant-design/icons": "^5.3.7",
     "@ant-design/pro-editor": "latest",
+    "@ant-design/x": "^0.0.0-experimental-2024-08-13",
     "@babel/runtime": "^7.24.7",
     "@emotion/react": "^11.11.4",
     "@testing-library/jest-dom": "^6.4.6",
@@ -69,6 +70,7 @@
     "dayjs": "^1.11.11",
     "emoji-regex": "^10.3.0",
     "fast-deep-equal": "^3.1.3",
+    "idb": "^8.0.0",
     "immer": "^10.1.1",
     "lodash-es": "^4.17.21",
     "lucide-react": "^0.288.0",
@@ -79,6 +81,7 @@
     "react-intersection-observer": "^9.10.3",
     "react-layout-kit": "^1.9.0",
     "react-markdown": "^8.0.7",
+    "uuid": "^10.0.0",
     "zustand": "^4.5.2",
     "zustand-utils": "^1.3.2"
   },
@@ -90,6 +93,7 @@
     "@types/lodash-es": "^4.17.12",
     "@types/react": "18.2.31",
     "@types/react-dom": "^18.3.0",
+    "@types/uuid": "^10.0.0",
     "@umijs/lint": "^4.2.15",
     "@vitest/coverage-v8": "latest",
     "ai": "^2.2.37",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a33a0a5..213cecd 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,6 +11,9 @@ dependencies:
   '@ant-design/pro-editor':
     specifier: latest
     version: 1.2.1(@emotion/react@11.11.4)(@types/react@18.2.31)(antd-style@3.6.2)(antd@5.18.3)(react-dom@18.3.1)(react@18.3.1)
+  '@ant-design/x':
+    specifier: ^0.0.0-experimental-2024-08-13
+    version: 0.0.0-experimental-2024-08-13(antd@5.18.3)(react-dom@18.3.1)(react@18.3.1)
   '@babel/runtime':
     specifier: ^7.24.7
     version: 7.24.7
@@ -32,6 +35,9 @@ dependencies:
   fast-deep-equal:
     specifier: ^3.1.3
     version: 3.1.3
+  idb:
+    specifier: ^8.0.0
+    version: 8.0.0
   immer:
     specifier: ^10.1.1
     version: 10.1.1
@@ -62,6 +68,9 @@ dependencies:
   react-markdown:
     specifier: ^8.0.7
     version: 8.0.7(@types/react@18.2.31)(react@18.3.1)
+  uuid:
+    specifier: ^10.0.0
+    version: 10.0.0
   zustand:
     specifier: ^4.5.2
     version: 4.5.2(@types/react@18.2.31)(immer@10.1.1)(react@18.3.1)
@@ -91,6 +100,9 @@ devDependencies:
   '@types/react-dom':
     specifier: ^18.3.0
     version: 18.3.0
+  '@types/uuid':
+    specifier: ^10.0.0
+    version: 10.0.0
   '@umijs/lint':
     specifier: ^4.2.15
     version: 4.2.15(eslint@8.57.0)(jest@29.7.0)(stylelint@15.11.0)(typescript@5.5.2)
@@ -235,6 +247,25 @@ packages:
     dependencies:
       '@ctrl/tinycolor': 3.6.1
 
+  /@ant-design/colors@7.1.0:
+    resolution: {integrity: sha512-MMoDGWn1y9LdQJQSHiCC20x3uZ3CwQnv9QMz6pCmJOrqdgM9YxsoVVY0wtrdXbmfSgnV0KNk6zi09NAhMR2jvg==}
+    dependencies:
+      '@ctrl/tinycolor': 3.6.1
+    dev: false
+
+  /@ant-design/cssinjs-utils@1.0.3(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-BrztZZKuoYcJK8uEH40ylBemf/Mu/QPiDos56g2bv6eUoniQkgQHOCOvA3+pncoFO1TaS8xcUCIqGzDA0I+ZVQ==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@ant-design/cssinjs': 1.21.0(react-dom@18.3.1)(react@18.3.1)
+      '@babel/runtime': 7.25.0
+      rc-util: 5.43.0(react-dom@18.3.1)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
   /@ant-design/cssinjs@1.21.0(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-gIilraPl+9EoKdYxnupxjHB/Q6IHNRjEXszKbDxZdsgv4sAZ9pjkCq8yanDWNvyfjp4leir2OVAJm0vxwKK8YA==}
     peerDependencies:
@@ -269,6 +300,22 @@ packages:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
+  /@ant-design/icons@5.4.0(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-QZbWC5xQYexCI5q4/fehSEkchJr5UGtvAJweT743qKUQQGs9IH2DehNLP49DJ3Ii9m9CijD2HN6fNy3WKhIFdA==}
+    engines: {node: '>=8'}
+    peerDependencies:
+      react: '>=16.0.0'
+      react-dom: '>=16.0.0'
+    dependencies:
+      '@ant-design/colors': 7.1.0
+      '@ant-design/icons-svg': 4.4.2
+      '@babel/runtime': 7.25.0
+      classnames: 2.5.1
+      rc-util: 5.43.0(react-dom@18.3.1)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
   /@ant-design/pro-editor@1.2.1(@emotion/react@11.11.4)(@types/react@18.2.31)(antd-style@3.6.2)(antd@5.18.3)(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-pDAH/07KcnaySiQxImL7rG5aDYMPjNyGSd4VABPESnNCW2/PwHvqeMviwfWnwaBkgzoIqgAnzHgIV3xWuocNuA==}
     peerDependencies:
@@ -349,6 +396,26 @@ packages:
       resize-observer-polyfill: 1.5.1
       throttle-debounce: 5.0.2
 
+  /@ant-design/x@0.0.0-experimental-2024-08-13(antd@5.18.3)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-NDNxXxBZdFeeunoG5n1/mJiCmOXdC0DpV1ezIOQbY4P25Ig3+J2jEF0tht6GUilCOwFLFeT1x0nYThHajfnycw==}
+    peerDependencies:
+      antd: '>=5.0.0'
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@ant-design/colors': 7.1.0
+      '@ant-design/cssinjs': 1.21.0(react-dom@18.3.1)(react@18.3.1)
+      '@ant-design/cssinjs-utils': 1.0.3(react-dom@18.3.1)(react@18.3.1)
+      '@ant-design/icons': 5.4.0(react-dom@18.3.1)(react@18.3.1)
+      '@babel/runtime': 7.25.0
+      '@ctrl/tinycolor': 4.1.0
+      antd: 5.18.3(react-dom@18.3.1)(react@18.3.1)
+      classnames: 2.5.1
+      rc-util: 5.43.0(react-dom@18.3.1)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
   /@antfu/install-pkg@0.1.1:
     resolution: {integrity: sha512-LyB/8+bSfa0DFGC06zpCEfs89/XoWZwws5ygEa5D+Xsm3OfI+aXQ86VgVG7Acyef+rSZ5HE7J8rrxzrQeM3PjQ==}
     dependencies:
@@ -743,6 +810,13 @@ packages:
     dependencies:
       regenerator-runtime: 0.14.1
 
+  /@babel/runtime@7.25.0:
+    resolution: {integrity: sha512-7dRy4DwXwtzBrPbZflqxnvfxLF8kdZXPkhymtDeFoFqE6ldzjQFgYTtYIFARcLEYDrqfBfYcZt1WqFxRoyC9Rw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      regenerator-runtime: 0.14.1
+    dev: false
+
   /@babel/template@7.24.7:
     resolution: {integrity: sha512-jYqfPrU9JTF0PmPy1tLYHW4Mp4KlgxJD9l2nP9fD6yT/ICi554DmrWBAEYpIelzjHf1msDP3PxJIRt/nFNfBig==}
     engines: {node: '>=6.9.0'}
@@ -1107,6 +1181,11 @@ packages:
     resolution: {integrity: sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==}
     engines: {node: '>=10'}
 
+  /@ctrl/tinycolor@4.1.0:
+    resolution: {integrity: sha512-WyOx8cJQ+FQus4Mm4uPIZA64gbk3Wxh0so5Lcii0aJifqwoVOlfFtorjLE0Hen4OYyHZMXDWqMmaQemBhgxFRQ==}
+    engines: {node: '>=14'}
+    dev: false
+
   /@dnd-kit/accessibility@3.1.0(react@18.3.1):
     resolution: {integrity: sha512-ea7IkhKvlJUv9iSHJOnxinBcoOI3ppGnnL+VDJ75O45Nss6HtZd8IdN8touXPDtASfeI2T2LImb8VOZcL47wjQ==}
     peerDependencies:
@@ -4252,6 +4331,10 @@ packages:
   /@types/unist@2.0.10:
     resolution: {integrity: sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA==}
 
+  /@types/uuid@10.0.0:
+    resolution: {integrity: sha512-7gqG38EyHgyP1S+7+xomFtL+ZNHcKv6DwNaCZmJmo1vgMugyF3TCnXVg4t1uk89mLNwnLtnY3TpOpCOyp1/xHQ==}
+    dev: true
+
   /@types/yargs-parser@21.0.3:
     resolution: {integrity: sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ==}
 
@@ -10320,6 +10403,10 @@ packages:
       postcss: 8.4.38
     dev: true
 
+  /idb@8.0.0:
+    resolution: {integrity: sha512-l//qvlAKGmQO31Qn7xdzagVPPaHTxXx199MhrAFuVBTPqydcPYBWjkrbv4Y0ktB+GmWOiwHl237UUOrLmQxLvw==}
+    dev: false
+
   /identity-obj-proxy@3.0.0:
     resolution: {integrity: sha512-00n6YnVHKrinT9t0d9+5yZC6UBNJANpYEQvL2LlX6Ab9lnmxzIRcEmTPuyGScvl1+jKuCICX1Z0Ab1pPKKdikA==}
     engines: {node: '>=4'}
@@ -18452,6 +18539,11 @@ packages:
     engines: {node: '>= 0.4.0'}
     dev: true
 
+  /uuid@10.0.0:
+    resolution: {integrity: sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==}
+    hasBin: true
+    dev: false
+
   /uuid@8.3.2:
     resolution: {integrity: sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==}
     hasBin: true
diff --git a/src/ProSender/components/EnterTypeButton.tsx.tsx b/src/ProSender/components/EnterTypeButton.tsx.tsx
new file mode 100644
index 0000000..0f0cc44
--- /dev/null
+++ b/src/ProSender/components/EnterTypeButton.tsx.tsx
@@ -0,0 +1,28 @@
+import { Space } from 'antd';
+import { cx } from 'antd-style';
+import { CommandIcon, CornerDownLeft } from 'lucide-react';
+import { useStyles } from '../style';
+
+const EnterTypeButton: React.FC<
+  React.HTMLAttributes<HTMLDivElement> & {
+    enterType?: 'enter' | 'shiftEnter';
+  }
+> = ({ children, enterType = 'enter', ...props }) => {
+  const { styles } = useStyles();
+
+  return (
+    <Space {...props}>
+      <Space className={cx(styles.enterSelectButton)}>
+        <CommandIcon />
+        <CornerDownLeft />
+        <span>{enterType === 'enter' ? 'Send' : 'New Line'}</span>
+        <span>/</span>
+        <CornerDownLeft />
+        <span>{enterType === 'enter' ? 'New Line' : 'Send'}</span>
+      </Space>
+      {children}
+    </Space>
+  );
+};
+
+export default EnterTypeButton;
diff --git a/src/ProSender/demos/actionsRender.tsx b/src/ProSender/demos/actionsRender.tsx
new file mode 100644
index 0000000..61e4120
--- /dev/null
+++ b/src/ProSender/demos/actionsRender.tsx
@@ -0,0 +1,50 @@
+import { CheckCircleOutlined } from '@ant-design/icons';
+import { ProChat, ProSender } from '@ant-design/pro-chat';
+import { Space, Tag } from 'antd';
+import { useTheme } from 'antd-style';
+
+export default () => {
+  const theme = useTheme();
+  return (
+    <div style={{ background: theme.colorBgLayout }}>
+      <ProChat
+        inputAreaRender={(_, onMessageSend) => {
+          return (
+            <ProSender
+              actions={{
+                actionsInfoRender: (defaultdom, fileList, onRemove) => {
+                  if (!fileList || fileList.length === 0) {
+                    return;
+                  }
+                  return (
+                    <Space>
+                      {fileList.map((item) => {
+                        return (
+                          <Tag
+                            icon={<CheckCircleOutlined />}
+                            color="success"
+                            key={item.uid}
+                            closable
+                            onClose={() => {
+                              onRemove(item.uid);
+                            }}
+                          >
+                            {item.name}
+                          </Tag>
+                        );
+                      })}
+                    </Space>
+                  );
+                },
+              }}
+              onSubmit={(message, fileList) => {
+                console.log('onSubmit', message, fileList);
+                onMessageSend('send');
+              }}
+            />
+          );
+        }}
+      />
+    </div>
+  );
+};
diff --git a/src/ProSender/demos/base.tsx b/src/ProSender/demos/base.tsx
new file mode 100644
index 0000000..498e566
--- /dev/null
+++ b/src/ProSender/demos/base.tsx
@@ -0,0 +1,5 @@
+import { ProSender } from '@ant-design/pro-chat';
+
+export default () => {
+  return <ProSender />;
+};
diff --git a/src/ProSender/demos/baseFiles.tsx b/src/ProSender/demos/baseFiles.tsx
new file mode 100644
index 0000000..136e8cd
--- /dev/null
+++ b/src/ProSender/demos/baseFiles.tsx
@@ -0,0 +1,42 @@
+import { UploadOutlined } from '@ant-design/icons';
+import { ProChat, ProSender } from '@ant-design/pro-chat';
+import { Button, Upload } from 'antd';
+import { useTheme } from 'antd-style';
+import { useState } from 'react';
+
+export default () => {
+  const theme = useTheme();
+  const [files, setFiles] = useState([]);
+
+  const fileUpBtn = (
+    <Upload beforeUpload={(files) => setFiles((prevList) => [...prevList, files])}>
+      <Button icon={<UploadOutlined />} />
+    </Upload>
+  );
+
+  return (
+    <div style={{ background: theme.colorBgLayout }}>
+      <ProChat
+        inputAreaRender={() => {
+          return (
+            <ProSender
+              actions={{
+                actionsRender: () => <></>,
+              }}
+              sender={{
+                components: {
+                  actions: {
+                    clear: () => fileUpBtn,
+                  },
+                },
+              }}
+              upload={{
+                fileList: files,
+              }}
+            />
+          );
+        }}
+      />
+    </div>
+  );
+};
diff --git a/src/ProSender/index.md b/src/ProSender/index.md
new file mode 100644
index 0000000..aca8f25
--- /dev/null
+++ b/src/ProSender/index.md
@@ -0,0 +1,11 @@
+---
+nav: 组件
+group: Chat
+title: ProSender「Beta」
+order: 1
+description: a ProSender
+---
+
+## Default
+
+<code src="./demos/base.tsx"></code> <code src="./demos/actionsRender.tsx"></code> <code src="./demos/baseFiles.tsx"></code>
diff --git a/src/ProSender/index.tsx b/src/ProSender/index.tsx
new file mode 100644
index 0000000..fcf697c
--- /dev/null
+++ b/src/ProSender/index.tsx
@@ -0,0 +1,190 @@
+import { FileImageOutlined, UploadOutlined } from '@ant-design/icons';
+import { Sender } from '@ant-design/x';
+import { SenderProps } from '@ant-design/x/es/sender/interface';
+import {
+  Button,
+  ConfigProvider,
+  Divider,
+  message,
+  Space,
+  Upload,
+  UploadFile,
+  UploadProps,
+} from 'antd';
+import { RcFile } from 'antd/es/upload/interface.js';
+import { useMergedState } from 'rc-util';
+import { useContext, useEffect } from 'react';
+import EnterTypeButton from './components/EnterTypeButton.tsx';
+import LocalStorageManager from './storageManager.js';
+import { useStyles } from './style';
+
+type ActionsType = {
+  onFileUpload?: (file: RcFile) => void;
+  onRemoveFile?: (file: UploadFile) => void;
+  actionsRender?: (
+    [fileUpBtn, imgUpBtn]: Array<React.ReactNode>,
+    onFileUpload?: (file: File) => void,
+  ) => React.ReactNode;
+  actionsInfoRender?: (
+    defaultdom?: React.ReactNode,
+    []?: Array<UploadFile>,
+    onRemoveFile?: (uid: string) => Promise<{ key: string; success: boolean; error?: string }>,
+  ) => React.ReactNode;
+};
+
+const ProSender = (
+  props: Omit<SenderProps, 'onSubmit'> & {
+    className?: string;
+    upload?: UploadProps;
+    sender?: SenderProps;
+    actions?: ActionsType;
+    onSubmit?: (message: string, fileList?: UploadFile[]) => void;
+  },
+) => {
+  const { className, upload, sender, onSubmit, actions } = props || {};
+
+  const { cx, styles } = useStyles();
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const prefixClass = getPrefixCls('pro-chat');
+  const localStorageManager = new LocalStorageManager();
+
+  const [fileList, setFileList] = useMergedState<Array<RcFile>>([], {
+    // value: upload?.fileList,
+  });
+
+  useEffect(() => {
+    upload?.fileList?.map((file) => {
+      localStorageManager.storeFile(file).then(async (key) => {
+        const storedFiles = await localStorageManager.getFiles([key]);
+        setFileList((prevList) => [...prevList, ...storedFiles]);
+        actions?.onFileUpload?.(file as any);
+      });
+      return null;
+    });
+  }, [upload?.fileList]);
+
+  const senderActionsRender = () => {
+    const UploadCommanProps = {
+      ...upload,
+      fileList: [],
+      beforeUpload: (file) => {
+        localStorageManager
+          .storeFile(file)
+          .then(async (key) => {
+            const storedFiles = await localStorageManager.getFiles([key]);
+            setFileList((prevList) => [...prevList, ...storedFiles]);
+            actions?.onFileUpload?.(file);
+          })
+          .catch((error) => {
+            message.error(error);
+          });
+        return false;
+      },
+    };
+
+    const fileUpBtn = (
+      <Upload {...UploadCommanProps}>
+        <Button icon={<UploadOutlined />} />
+      </Upload>
+    );
+
+    const imgUpBtn = (
+      <Upload
+        {...UploadCommanProps}
+        listType="picture"
+        beforeUpload={(file) => {
+          if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
+            message.error('只能上传jpg/png格式的图片');
+            return Upload.LIST_IGNORE;
+          }
+          UploadCommanProps.beforeUpload(file);
+        }}
+      >
+        <Button icon={<FileImageOutlined />} />
+      </Upload>
+    );
+
+    if (actions?.actionsRender) {
+      return actions.actionsRender([fileUpBtn, imgUpBtn], (file) => {
+        return localStorageManager.storeFile(file);
+      });
+    }
+
+    return (
+      <Space className={cx(styles.actions, `${prefixClass}-sender-actions`)}>
+        {[fileUpBtn, imgUpBtn]}
+      </Space>
+    );
+  };
+
+  const senderFileInfoRender = () => {
+    const fileInputRender = () => {
+      if (fileList && fileList.length > 0) {
+        return (
+          <div className={cx(styles.fileInfo, `${prefixClass}-sender-file-info`)}>
+            <Upload
+              {...upload}
+              fileList={fileList}
+              listType="picture"
+              onRemove={async (file) => {
+                const result = await localStorageManager.removeFiles([file.uid]);
+                if (result[0].success) {
+                  setFileList((prevList) => prevList.filter((item) => item.uid !== file.uid));
+                  actions?.onRemoveFile?.(file);
+                } else {
+                  message.error(result[0].error);
+                }
+              }}
+            />
+            <Divider />
+          </div>
+        );
+      }
+      return <></>;
+    };
+
+    if (actions?.actionsInfoRender) {
+      return actions.actionsInfoRender(fileInputRender(), fileList, async (uid) => {
+        setFileList((prevList) => prevList.filter((item) => item.uid !== uid));
+        return await localStorageManager.removeFiles([uid]);
+      });
+    }
+    return fileInputRender();
+  };
+
+  const senderAreaRender = () => {
+    const { onSubmit: defaultSubmit, components, ...rest } = sender || {};
+    const { actions } = components || {};
+    return (
+      <Sender
+        // @ts-ignore
+        className={cx(styles.sender, `${prefixClass}-sender-inner`)}
+        enterType={sender?.enterType}
+        onSubmit={(message) => {
+          onSubmit?.(message, fileList);
+          defaultSubmit?.(message);
+          setFileList?.([]);
+          return true;
+        }}
+        components={{
+          actions: {
+            wrapper: (props) => <EnterTypeButton enterType={sender?.enterType} {...props} />,
+            clear: () => null,
+            ...actions,
+          },
+        }}
+        {...rest}
+      />
+    );
+  };
+
+  return (
+    <div className={cx(styles.container, `${prefixClass}-sender`, className)}>
+      {senderActionsRender()}
+      {senderFileInfoRender()}
+      {senderAreaRender()}
+    </div>
+  );
+};
+
+export default ProSender;
diff --git a/src/ProSender/storageManager.js b/src/ProSender/storageManager.js
new file mode 100644
index 0000000..4655e92
--- /dev/null
+++ b/src/ProSender/storageManager.js
@@ -0,0 +1,87 @@
+import { openDB } from 'idb';
+import { v4 as uuidv4 } from 'uuid';
+
+class IndexedDBManager {
+  constructor(defaultExpiryTime = 60 * 60 * 1000) {
+    this.defaultExpiryTime = defaultExpiryTime; // 默认过期时间为 1 小时
+    this.dbPromise = openDB('file-store', 1, {
+      upgrade(db) {
+        db.createObjectStore('files', { keyPath: 'uid' });
+      },
+    });
+  }
+
+  // 存储数据方法，返回生成的唯一 key
+  async storeFile(file) {
+    const key = file?.uid || uuidv4();
+    const expiry = new Date(new Date().getTime() + this.defaultExpiryTime);
+    const reader = new FileReader();
+
+    return new Promise((resolve, reject) => {
+      reader.readAsDataURL(file);
+      reader.onload = async () => {
+        const base64 = reader.result;
+        const fileInfo = {
+          uid: key,
+          name: file.name,
+          type: file.type,
+          size: file.size,
+          base64,
+          expiry,
+        };
+        try {
+          const db = await this.dbPromise;
+          await db.put('files', fileInfo);
+          resolve(key);
+        } catch (e) {
+          reject('IndexedDB 存储失败');
+        }
+      };
+      reader.onerror = (error) => {
+        reject('文件读取失败');
+      };
+    });
+  }
+
+  // 按照 keys 数组，返回批量取出存储的 files
+  async getFiles(keys) {
+    const db = await this.dbPromise;
+    const files = await Promise.all(
+      keys.map(async (key) => {
+        const file = await db.get('files', key);
+        if (file && new Date(file.expiry) > new Date()) {
+          return file;
+        } else if (file) {
+          await db.delete('files', key);
+          return null;
+        }
+        return null;
+      }),
+    );
+    return files.filter((file) => file !== null);
+  }
+
+  // 设置过期时间
+  setExpiryTime(milliseconds) {
+    this.defaultExpiryTime = milliseconds;
+  }
+
+  // 按照指定的 keys 从存储里面删除数据
+  async removeFiles(keys) {
+    const db = await this.dbPromise;
+    const results = await Promise.all(
+      keys.map(async (key) => {
+        const file = await db.get('files', key);
+        if (file) {
+          await db.delete('files', key);
+          return { key, success: true };
+        } else {
+          return { key, success: false, error: '文件不存在' };
+        }
+      }),
+    );
+    return results;
+  }
+}
+
+export default IndexedDBManager;
diff --git a/src/ProSender/style.ts b/src/ProSender/style.ts
new file mode 100644
index 0000000..12a7695
--- /dev/null
+++ b/src/ProSender/style.ts
@@ -0,0 +1,56 @@
+import { createStyles } from 'antd-style';
+
+export const useStyles = createStyles(({ css, token }) => {
+  return {
+    container: css`
+      position: relative;
+      border: 1px solid ${token.colorBorder};
+      border-radius: ${token.borderRadiusLG}px;
+      background-color: ${token.colorBgContainer};
+      box-shadow: ${token.boxShadow};
+      width: 100%;
+    `,
+
+    actions: css`
+      padding: ${token.paddingSM}px ${token.padding}px 0px ${token.padding}px;
+    `,
+
+    fileInfo: css`
+      padding: ${token.padding}px;
+      .ant-divider {
+        margin: 0;
+        margin-top: ${token.paddingSM}px;
+      }
+    `,
+    sender: css`
+      border: none;
+      .ant-sender-inputarea {
+        border: none !important;
+        background-color: ${token.colorBgContainer};
+        box-shadow: none;
+        min-height: 80px;
+      }
+    `,
+
+    enterSelectButton: css`
+      color: ${token.colorTextSecondary};
+      font-size: ${token.fontSizeSM}px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      column-gap: ${token.paddingSM / 4}px;
+
+      .ant-space-item {
+        height: 100%;
+        display: flex;
+
+        svg {
+          align-self: end;
+          justify-self: end;
+          width: 1em;
+          height: 1em;
+        }
+      }
+    `,
+  };
+});
diff --git a/src/index.ts b/src/index.ts
index 1a703aa..e3aa401 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -16,19 +16,22 @@ export type {
 export { default as ActionsBar, type ActionsBarProps } from './ChatList/ActionsBar';
 export * from './ProChat';
 
+export { default as CopyButton, type CopyButtonProps } from './components/CopyButton';
 export { default as EditableMessage, type EditableMessageProps } from './EditableMessage';
 export {
   default as EditableMessageList,
   type EditableMessageListProps,
 } from './EditableMessageList';
-export { default as CopyButton, type CopyButtonProps } from './components/CopyButton';
 
 export { default as List } from './List';
 
 export { default as MessageInput, type MessageInputProps } from './MessageInput';
 export { default as MessageModal, type MessageModalProps } from './MessageModal';
 
-export { default as TokenTag, type TokenTagProps } from './TokenTag';
 export { useChatListActionsBar } from './hooks/useChatListActionsBar';
+export { default as TokenTag, type TokenTagProps } from './TokenTag';
+
+export { default as ProSender } from './ProSender';
+
 export * from './styles';
 export type * from './types';