From db692237b2aa758ef1333be871366f02f38a55a7 Mon Sep 17 00:00:00 2001
From: ONLY-yours <1349021570@qq.com>
Date: Wed, 14 Aug 2024 17:46:42 +0800
Subject: [PATCH 1/6] :sparkles: feat: proSender init

---
 package.json                                  |  1 +
 .../components/EnterTypeButton.tsx.tsx        | 28 ++++++
 src/ProSender/demos/base.tsx                  |  5 +
 src/ProSender/index.md                        | 11 +++
 src/ProSender/index.tsx                       | 95 +++++++++++++++++++
 src/ProSender/style.ts                        | 56 +++++++++++
 src/index.ts                                  |  7 +-
 7 files changed, 201 insertions(+), 2 deletions(-)
 create mode 100644 src/ProSender/components/EnterTypeButton.tsx.tsx
 create mode 100644 src/ProSender/demos/base.tsx
 create mode 100644 src/ProSender/index.md
 create mode 100644 src/ProSender/index.tsx
 create mode 100644 src/ProSender/style.ts

diff --git a/package.json b/package.json
index 9be6e4b7..d98199ab 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/src/ProSender/components/EnterTypeButton.tsx.tsx b/src/ProSender/components/EnterTypeButton.tsx.tsx
new file mode 100644
index 00000000..0f0cc445
--- /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/base.tsx b/src/ProSender/demos/base.tsx
new file mode 100644
index 00000000..498e566a
--- /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/index.md b/src/ProSender/index.md
new file mode 100644
index 00000000..ee31bd94
--- /dev/null
+++ b/src/ProSender/index.md
@@ -0,0 +1,11 @@
+---
+nav: 组件
+group: Chat
+title: ProSender
+order: 1
+description: a ProSender
+---
+
+## Default
+
+<code src="./demos/base.tsx"></code>
diff --git a/src/ProSender/index.tsx b/src/ProSender/index.tsx
new file mode 100644
index 00000000..a5495379
--- /dev/null
+++ b/src/ProSender/index.tsx
@@ -0,0 +1,95 @@
+import { UploadOutlined } from '@ant-design/icons';
+import { Sender } from '@ant-design/x';
+import { SenderProps } from '@ant-design/x/es/sender/interface';
+import { Button, ConfigProvider, Divider, Space, Upload, UploadFile, UploadProps } from 'antd';
+import { useContext, useEffect, useState } from 'react';
+import EnterTypeButton from './components/EnterTypeButton.tsx';
+import { useStyles } from './style';
+
+const ProSender = (
+  props: SenderProps & {
+    className?: string;
+    upload?: UploadProps;
+    sender?: SenderProps;
+  },
+) => {
+  const { className, upload, sender } = props || {};
+
+  const { cx, styles } = useStyles();
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const prefixClass = getPrefixCls('pro-chat');
+
+  const [fileList, setFileList] = useState<Array<UploadFile>>();
+
+  useEffect(() => {
+    setFileList(upload?.fileList || upload?.defaultFileList || []);
+  }, []);
+
+  const ProSenderActions = () => {
+    return (
+      <Space className={cx(styles.actions, `${prefixClass}-sender-actions`)}>
+        <Upload
+          {...upload}
+          fileList={[]}
+          onChange={(info) => {
+            setFileList(info.fileList);
+          }}
+        >
+          <Button icon={<UploadOutlined />} />
+        </Upload>
+      </Space>
+    );
+  };
+
+  const SenderFileInfo = () => {
+    if (fileList && fileList.length > 0) {
+      return (
+        <div className={cx(styles.fileInfo, `${prefixClass}-sender-file-info`)}>
+          <Upload
+            {...upload}
+            fileList={fileList}
+            listType="picture"
+            onRemove={(file) => {
+              setFileList(fileList?.filter((item) => item.uid !== file.uid));
+            }}
+          />
+          <Divider />
+        </div>
+      );
+    }
+    return <></>;
+  };
+
+  const SenderArea = () => {
+    return (
+      <Sender
+        // @ts-ignore
+        className={cx(styles.sender, `${prefixClass}-sender-inner`)}
+        enterType={sender?.enterType}
+        components={{
+          actions: {
+            wrapper: (props) => <EnterTypeButton enterType={sender?.enterType} {...props} />,
+            clear: () => null,
+          },
+        }}
+        {...sender}
+      />
+    );
+  };
+
+  const Wrapper = ({ children }) => {
+    return (
+      <div className={cx(styles.container, `${prefixClass}-sender`, className)}>{children}</div>
+    );
+  };
+
+  return (
+    <Wrapper>
+      <ProSenderActions />
+      <SenderFileInfo />
+      <SenderArea />
+    </Wrapper>
+  );
+};
+
+export default ProSender;
diff --git a/src/ProSender/style.ts b/src/ProSender/style.ts
new file mode 100644
index 00000000..12a7695a
--- /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 1a703aa2..e3aa4019 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';

From 22ccb93d50b1e8b3cd8f0c408f4fb515eea3a534 Mon Sep 17 00:00:00 2001
From: ONLY-yours <1349021570@qq.com>
Date: Thu, 15 Aug 2024 18:03:13 +0800
Subject: [PATCH 2/6] :goal_net: feat: update

---
 src/ProSender/index.md          |  2 +-
 src/ProSender/index.tsx         | 49 +++++++++++++++++++---
 src/ProSender/storageManager.js | 72 +++++++++++++++++++++++++++++++++
 3 files changed, 117 insertions(+), 6 deletions(-)
 create mode 100644 src/ProSender/storageManager.js

diff --git a/src/ProSender/index.md b/src/ProSender/index.md
index ee31bd94..0a5f7f14 100644
--- a/src/ProSender/index.md
+++ b/src/ProSender/index.md
@@ -1,7 +1,7 @@
 ---
 nav: 组件
 group: Chat
-title: ProSender
+title: ProSender「Beta」
 order: 1
 description: a ProSender
 ---
diff --git a/src/ProSender/index.tsx b/src/ProSender/index.tsx
index a5495379..547843b8 100644
--- a/src/ProSender/index.tsx
+++ b/src/ProSender/index.tsx
@@ -1,9 +1,19 @@
 import { UploadOutlined } from '@ant-design/icons';
 import { Sender } from '@ant-design/x';
 import { SenderProps } from '@ant-design/x/es/sender/interface';
-import { Button, ConfigProvider, Divider, Space, Upload, UploadFile, UploadProps } from 'antd';
+import {
+  Button,
+  ConfigProvider,
+  Divider,
+  message,
+  Space,
+  Upload,
+  UploadFile,
+  UploadProps,
+} from 'antd';
 import { useContext, useEffect, useState } from 'react';
 import EnterTypeButton from './components/EnterTypeButton.tsx';
+import LocalStorageManager from './storageManager'; // 引入类文件
 import { useStyles } from './style';
 
 const ProSender = (
@@ -11,14 +21,17 @@ const ProSender = (
     className?: string;
     upload?: UploadProps;
     sender?: SenderProps;
+    onSubmit?: (message: string, fileList?: UploadFile[]) => void;
   },
 ) => {
-  const { className, upload, sender } = props || {};
+  const { className, upload, sender, onSubmit } = props || {};
 
   const { cx, styles } = useStyles();
   const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
   const prefixClass = getPrefixCls('pro-chat');
 
+  const localStorageManager = new LocalStorageManager();
+
   const [fileList, setFileList] = useState<Array<UploadFile>>();
 
   useEffect(() => {
@@ -31,8 +44,22 @@ const ProSender = (
         <Upload
           {...upload}
           fileList={[]}
-          onChange={(info) => {
-            setFileList(info.fileList);
+          beforeUpload={(file) => {
+            console.log('file', file, localStorageManager);
+
+            localStorageManager
+              .storeFile(file)
+              .then((key) => {
+                console.log('key', key);
+
+                const storedFiles = localStorageManager.getFiles([key]);
+                setFileList((prevList) => [...prevList, ...storedFiles]);
+              })
+              .catch((error) => {
+                message.error(error);
+              });
+
+            return false;
           }}
         >
           <Button icon={<UploadOutlined />} />
@@ -50,7 +77,12 @@ const ProSender = (
             fileList={fileList}
             listType="picture"
             onRemove={(file) => {
-              setFileList(fileList?.filter((item) => item.uid !== file.uid));
+              const result = localStorageManager.removeFiles([file.uid]);
+              if (result[0].success) {
+                setFileList((prevList) => prevList.filter((item) => item.uid !== file.uid));
+              } else {
+                message.error(result[0].error);
+              }
             }}
           />
           <Divider />
@@ -61,11 +93,18 @@ const ProSender = (
   };
 
   const SenderArea = () => {
+    const { onSubmit: defaultSubmit } = sender || {};
     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} />,
diff --git a/src/ProSender/storageManager.js b/src/ProSender/storageManager.js
new file mode 100644
index 00000000..1dd1850b
--- /dev/null
+++ b/src/ProSender/storageManager.js
@@ -0,0 +1,72 @@
+import { v4 as uuidv4 } from 'uuid';
+
+class LocalStorageManager {
+  constructor(defaultExpiryTime = 60 * 60 * 1000) {
+    this.defaultExpiryTime = defaultExpiryTime; // 默认过期时间为 1 小时
+  }
+
+  // 存储数据方法，返回生成的唯一 key
+  storeFile(file) {
+    const key = uuidv4();
+    const expiry = new Date(new Date().getTime() + this.defaultExpiryTime);
+    const reader = new FileReader();
+
+    return new Promise((resolve, reject) => {
+      reader.readAsDataURL(file);
+      reader.onload = () => {
+        const base64 = reader.result;
+        const fileInfo = {
+          name: file.name,
+          type: file.type,
+          size: file.size,
+          base64,
+          expiry,
+        };
+        localStorage.setItem(key, JSON.stringify(fileInfo));
+        resolve(key);
+      };
+      reader.onerror = (error) => {
+        reject('文件读取失败');
+      };
+    });
+  }
+
+  // 按照 keys 数组，返回批量取出存储的 files
+  getFiles(keys) {
+    return keys
+      .map((key) => {
+        const item = localStorage.getItem(key);
+        if (item) {
+          const fileInfo = JSON.parse(item);
+          if (new Date(fileInfo.expiry) > new Date()) {
+            return { ...fileInfo, uid: key };
+          } else {
+            localStorage.removeItem(key);
+            return null;
+          }
+        }
+        return null;
+      })
+      .filter((file) => file !== null);
+  }
+
+  // 设置过期时间
+  setExpiryTime(milliseconds) {
+    this.defaultExpiryTime = milliseconds;
+  }
+
+  // 按照指定的 keys 从存储里面删除数据
+  removeFiles(keys) {
+    return keys.map((key) => {
+      const item = localStorage.getItem(key);
+      if (item) {
+        localStorage.removeItem(key);
+        return { key, success: true };
+      } else {
+        return { key, success: false, error: '文件不存在' };
+      }
+    });
+  }
+}
+
+export default LocalStorageManager;

From bdaa7c55e136e8d8e40a041d3e93c86ff7cb60eb Mon Sep 17 00:00:00 2001
From: ONLY-yours <1349021570@qq.com>
Date: Mon, 19 Aug 2024 16:09:41 +0800
Subject: [PATCH 3/6] :sparkles: feat: add actions config & render

---
 package.json                          |   5 +-
 src/ProSender/demos/actionsRender.tsx |  39 +++++++
 src/ProSender/index.md                |   2 +-
 src/ProSender/index.tsx               | 150 +++++++++++++++-----------
 4 files changed, 133 insertions(+), 63 deletions(-)
 create mode 100644 src/ProSender/demos/actionsRender.tsx

diff --git a/package.json b/package.json
index d98199ab..262411b3 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",
@@ -70,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",
@@ -80,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"
   },
@@ -91,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/src/ProSender/demos/actionsRender.tsx b/src/ProSender/demos/actionsRender.tsx
new file mode 100644
index 00000000..b8a27841
--- /dev/null
+++ b/src/ProSender/demos/actionsRender.tsx
@@ -0,0 +1,39 @@
+import { ProChat, ProSender } from '@ant-design/pro-chat';
+import { Card, Empty, Space } 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) => {
+                  if (!fileList || fileList.length === 0) {
+                    return <Empty />;
+                  }
+                  return (
+                    <Space>
+                      {fileList.map((item) => {
+                        console.log('item', item);
+
+                        return <Card key={item.uid} style={{ width: 300 }} title={item.fileName} />;
+                      })}
+                    </Space>
+                  );
+                },
+              }}
+              onSubmit={(message, fileList) => {
+                console.log('onSubmit', message, fileList);
+                onMessageSend('send');
+              }}
+            />
+          );
+        }}
+      />
+    </div>
+  );
+};
diff --git a/src/ProSender/index.md b/src/ProSender/index.md
index 0a5f7f14..59eb376b 100644
--- a/src/ProSender/index.md
+++ b/src/ProSender/index.md
@@ -8,4 +8,4 @@ description: a ProSender
 
 ## Default
 
-<code src="./demos/base.tsx"></code>
+<code src="./demos/base.tsx"></code> <code src="./demos/actionsRender.tsx"></code>
diff --git a/src/ProSender/index.tsx b/src/ProSender/index.tsx
index 547843b8..a652d4da 100644
--- a/src/ProSender/index.tsx
+++ b/src/ProSender/index.tsx
@@ -1,4 +1,4 @@
-import { UploadOutlined } from '@ant-design/icons';
+import { FileImageOutlined, UploadOutlined } from '@ant-design/icons';
 import { Sender } from '@ant-design/x';
 import { SenderProps } from '@ant-design/x/es/sender/interface';
 import {
@@ -13,18 +13,24 @@ import {
 } from 'antd';
 import { useContext, useEffect, useState } from 'react';
 import EnterTypeButton from './components/EnterTypeButton.tsx';
-import LocalStorageManager from './storageManager'; // 引入类文件
+import LocalStorageManager from './storageManager';
 import { useStyles } from './style';
 
+type ActionsType = {
+  actionsRender?: ([fileUpBtn, imgUpBtn]: Array<React.ReactNode>) => React.ReactNode;
+  actionsInfoRender?: (defaultdom: React.ReactNode, []: Array<UploadFile>) => React.ReactNode;
+};
+
 const ProSender = (
-  props: SenderProps & {
+  props: Omit<SenderProps, 'onSubmit'> & {
     className?: string;
     upload?: UploadProps;
     sender?: SenderProps;
+    actions?: ActionsType;
     onSubmit?: (message: string, fileList?: UploadFile[]) => void;
   },
 ) => {
-  const { className, upload, sender, onSubmit } = props || {};
+  const { className, upload, sender, onSubmit, actions } = props || {};
 
   const { cx, styles } = useStyles();
   const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
@@ -38,61 +44,89 @@ const ProSender = (
     setFileList(upload?.fileList || upload?.defaultFileList || []);
   }, []);
 
-  const ProSenderActions = () => {
+  const senderActionsRender = () => {
+    const UploadCommanProps = {
+      ...upload,
+      fileList: [],
+      beforeUpload: (file) => {
+        localStorageManager
+          .storeFile(file)
+          .then((key) => {
+            const storedFiles = localStorageManager.getFiles([key]);
+            setFileList((prevList) => [...prevList, ...storedFiles]);
+          })
+          .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]);
+    }
+
     return (
       <Space className={cx(styles.actions, `${prefixClass}-sender-actions`)}>
-        <Upload
-          {...upload}
-          fileList={[]}
-          beforeUpload={(file) => {
-            console.log('file', file, localStorageManager);
-
-            localStorageManager
-              .storeFile(file)
-              .then((key) => {
-                console.log('key', key);
-
-                const storedFiles = localStorageManager.getFiles([key]);
-                setFileList((prevList) => [...prevList, ...storedFiles]);
-              })
-              .catch((error) => {
-                message.error(error);
-              });
-
-            return false;
-          }}
-        >
-          <Button icon={<UploadOutlined />} />
-        </Upload>
+        {[fileUpBtn, imgUpBtn]}
       </Space>
     );
   };
 
-  const SenderFileInfo = () => {
-    if (fileList && fileList.length > 0) {
-      return (
-        <div className={cx(styles.fileInfo, `${prefixClass}-sender-file-info`)}>
-          <Upload
-            {...upload}
-            fileList={fileList}
-            listType="picture"
-            onRemove={(file) => {
-              const result = localStorageManager.removeFiles([file.uid]);
-              if (result[0].success) {
-                setFileList((prevList) => prevList.filter((item) => item.uid !== file.uid));
-              } else {
-                message.error(result[0].error);
-              }
-            }}
-          />
-          <Divider />
-        </div>
-      );
+  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={(file) => {
+                const result = localStorageManager.removeFiles([file.uid]);
+                if (result[0].success) {
+                  setFileList((prevList) => prevList.filter((item) => item.uid !== file.uid));
+                } else {
+                  message.error(result[0].error);
+                }
+              }}
+            />
+            <Divider />
+          </div>
+        );
+      }
+      return <></>;
+    };
+
+    if (actions?.actionsInfoRender) {
+      return actions.actionsInfoRender(fileInputRender(), fileList);
     }
-    return <></>;
+    return fileInputRender();
   };
 
-  const SenderArea = () => {
+  const senderAreaRender = () => {
     const { onSubmit: defaultSubmit } = sender || {};
     return (
       <Sender
@@ -116,18 +150,12 @@ const ProSender = (
     );
   };
 
-  const Wrapper = ({ children }) => {
-    return (
-      <div className={cx(styles.container, `${prefixClass}-sender`, className)}>{children}</div>
-    );
-  };
-
   return (
-    <Wrapper>
-      <ProSenderActions />
-      <SenderFileInfo />
-      <SenderArea />
-    </Wrapper>
+    <div className={cx(styles.container, `${prefixClass}-sender`, className)}>
+      {senderActionsRender()}
+      {senderFileInfoRender()}
+      {senderAreaRender()}
+    </div>
   );
 };
 

From 401e352bc67fedab92ec191c3b438e9c8747670d Mon Sep 17 00:00:00 2001
From: ONLY-yours <1349021570@qq.com>
Date: Mon, 19 Aug 2024 16:32:56 +0800
Subject: [PATCH 4/6] :sparkles: feat: support actions render

---
 src/ProSender/demos/actionsRender.tsx | 23 +++++---
 src/ProSender/index.tsx               | 25 ++++++---
 src/ProSender/storageManager.js       | 75 ++++++++++++++++-----------
 3 files changed, 80 insertions(+), 43 deletions(-)

diff --git a/src/ProSender/demos/actionsRender.tsx b/src/ProSender/demos/actionsRender.tsx
index b8a27841..61e4120f 100644
--- a/src/ProSender/demos/actionsRender.tsx
+++ b/src/ProSender/demos/actionsRender.tsx
@@ -1,5 +1,6 @@
+import { CheckCircleOutlined } from '@ant-design/icons';
 import { ProChat, ProSender } from '@ant-design/pro-chat';
-import { Card, Empty, Space } from 'antd';
+import { Space, Tag } from 'antd';
 import { useTheme } from 'antd-style';
 
 export default () => {
@@ -11,16 +12,26 @@ export default () => {
           return (
             <ProSender
               actions={{
-                actionsInfoRender: (defaultdom, fileList) => {
+                actionsInfoRender: (defaultdom, fileList, onRemove) => {
                   if (!fileList || fileList.length === 0) {
-                    return <Empty />;
+                    return;
                   }
                   return (
                     <Space>
                       {fileList.map((item) => {
-                        console.log('item', item);
-
-                        return <Card key={item.uid} style={{ width: 300 }} title={item.fileName} />;
+                        return (
+                          <Tag
+                            icon={<CheckCircleOutlined />}
+                            color="success"
+                            key={item.uid}
+                            closable
+                            onClose={() => {
+                              onRemove(item.uid);
+                            }}
+                          >
+                            {item.name}
+                          </Tag>
+                        );
                       })}
                     </Space>
                   );
diff --git a/src/ProSender/index.tsx b/src/ProSender/index.tsx
index a652d4da..083e02bc 100644
--- a/src/ProSender/index.tsx
+++ b/src/ProSender/index.tsx
@@ -13,12 +13,18 @@ import {
 } from 'antd';
 import { useContext, useEffect, useState } from 'react';
 import EnterTypeButton from './components/EnterTypeButton.tsx';
-import LocalStorageManager from './storageManager';
+import LocalStorageManager from './storageManager.js';
 import { useStyles } from './style';
 
 type ActionsType = {
+  onFileUpload?: (file: File) => void;
+  onRemoveFile?: (file: UploadFile) => void;
   actionsRender?: ([fileUpBtn, imgUpBtn]: Array<React.ReactNode>) => React.ReactNode;
-  actionsInfoRender?: (defaultdom: React.ReactNode, []: Array<UploadFile>) => React.ReactNode;
+  actionsInfoRender?: (
+    defaultdom?: React.ReactNode,
+    []?: Array<UploadFile>,
+    onRemoveFile?: (uid: string) => Promise<{ key: string; success: boolean; error?: string }>,
+  ) => React.ReactNode;
 };
 
 const ProSender = (
@@ -51,9 +57,10 @@ const ProSender = (
       beforeUpload: (file) => {
         localStorageManager
           .storeFile(file)
-          .then((key) => {
-            const storedFiles = localStorageManager.getFiles([key]);
+          .then(async (key) => {
+            const storedFiles = await localStorageManager.getFiles([key]);
             setFileList((prevList) => [...prevList, ...storedFiles]);
+            actions?.onFileUpload?.(file);
           })
           .catch((error) => {
             message.error(error);
@@ -104,10 +111,11 @@ const ProSender = (
               {...upload}
               fileList={fileList}
               listType="picture"
-              onRemove={(file) => {
-                const result = localStorageManager.removeFiles([file.uid]);
+              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);
                 }
@@ -121,7 +129,10 @@ const ProSender = (
     };
 
     if (actions?.actionsInfoRender) {
-      return actions.actionsInfoRender(fileInputRender(), fileList);
+      return actions.actionsInfoRender(fileInputRender(), fileList, async (uid) => {
+        setFileList((prevList) => prevList.filter((item) => item.uid !== uid));
+        return await localStorageManager.removeFiles([uid]);
+      });
     }
     return fileInputRender();
   };
diff --git a/src/ProSender/storageManager.js b/src/ProSender/storageManager.js
index 1dd1850b..753a4dcc 100644
--- a/src/ProSender/storageManager.js
+++ b/src/ProSender/storageManager.js
@@ -1,29 +1,41 @@
+import { openDB } from 'idb';
 import { v4 as uuidv4 } from 'uuid';
 
-class LocalStorageManager {
+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
-  storeFile(file) {
+  async storeFile(file) {
     const key = uuidv4();
     const expiry = new Date(new Date().getTime() + this.defaultExpiryTime);
     const reader = new FileReader();
 
     return new Promise((resolve, reject) => {
       reader.readAsDataURL(file);
-      reader.onload = () => {
+      reader.onload = async () => {
         const base64 = reader.result;
         const fileInfo = {
+          uid: key,
           name: file.name,
           type: file.type,
           size: file.size,
           base64,
           expiry,
         };
-        localStorage.setItem(key, JSON.stringify(fileInfo));
-        resolve(key);
+        try {
+          const db = await this.dbPromise;
+          await db.put('files', fileInfo);
+          resolve(key);
+        } catch (e) {
+          reject('IndexedDB 存储失败');
+        }
       };
       reader.onerror = (error) => {
         reject('文件读取失败');
@@ -32,22 +44,21 @@ class LocalStorageManager {
   }
 
   // 按照 keys 数组，返回批量取出存储的 files
-  getFiles(keys) {
-    return keys
-      .map((key) => {
-        const item = localStorage.getItem(key);
-        if (item) {
-          const fileInfo = JSON.parse(item);
-          if (new Date(fileInfo.expiry) > new Date()) {
-            return { ...fileInfo, uid: key };
-          } else {
-            localStorage.removeItem(key);
-            return null;
-          }
+  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;
-      })
-      .filter((file) => file !== null);
+      }),
+    );
+    return files.filter((file) => file !== null);
   }
 
   // 设置过期时间
@@ -56,17 +67,21 @@ class LocalStorageManager {
   }
 
   // 按照指定的 keys 从存储里面删除数据
-  removeFiles(keys) {
-    return keys.map((key) => {
-      const item = localStorage.getItem(key);
-      if (item) {
-        localStorage.removeItem(key);
-        return { key, success: true };
-      } else {
-        return { key, success: false, error: '文件不存在' };
-      }
-    });
+  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 LocalStorageManager;
+export default IndexedDBManager;

From 3813a17c2ce7589e50596451eb9220fc27ac8752 Mon Sep 17 00:00:00 2001
From: ONLY-yours <1349021570@qq.com>
Date: Mon, 19 Aug 2024 17:01:58 +0800
Subject: [PATCH 5/6] :sparkles: feat: update pnpm lockfile

---
 pnpm-lock.yaml | 92 ++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 92 insertions(+)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a33a0a5d..213cecd7 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

From af5453d04ecf49bb35f7bc5a5e29226ad786fccc Mon Sep 17 00:00:00 2001
From: ONLY-yours <1349021570@qq.com>
Date: Mon, 2 Sep 2024 11:22:07 +0800
Subject: [PATCH 6/6] :memo: docs: update some docs

---
 src/ProSender/demos/baseFiles.tsx | 42 +++++++++++++++++++++++++++++++
 src/ProSender/index.md            |  2 +-
 src/ProSender/index.tsx           | 37 +++++++++++++++++++--------
 src/ProSender/storageManager.js   |  2 +-
 4 files changed, 71 insertions(+), 12 deletions(-)
 create mode 100644 src/ProSender/demos/baseFiles.tsx

diff --git a/src/ProSender/demos/baseFiles.tsx b/src/ProSender/demos/baseFiles.tsx
new file mode 100644
index 00000000..136e8cdd
--- /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
index 59eb376b..aca8f25d 100644
--- a/src/ProSender/index.md
+++ b/src/ProSender/index.md
@@ -8,4 +8,4 @@ description: a ProSender
 
 ## Default
 
-<code src="./demos/base.tsx"></code> <code src="./demos/actionsRender.tsx"></code>
+<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
index 083e02bc..fcf697c7 100644
--- a/src/ProSender/index.tsx
+++ b/src/ProSender/index.tsx
@@ -11,15 +11,20 @@ import {
   UploadFile,
   UploadProps,
 } from 'antd';
-import { useContext, useEffect, useState } from 'react';
+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: File) => void;
+  onFileUpload?: (file: RcFile) => void;
   onRemoveFile?: (file: UploadFile) => void;
-  actionsRender?: ([fileUpBtn, imgUpBtn]: Array<React.ReactNode>) => React.ReactNode;
+  actionsRender?: (
+    [fileUpBtn, imgUpBtn]: Array<React.ReactNode>,
+    onFileUpload?: (file: File) => void,
+  ) => React.ReactNode;
   actionsInfoRender?: (
     defaultdom?: React.ReactNode,
     []?: Array<UploadFile>,
@@ -41,14 +46,22 @@ const ProSender = (
   const { cx, styles } = useStyles();
   const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
   const prefixClass = getPrefixCls('pro-chat');
-
   const localStorageManager = new LocalStorageManager();
 
-  const [fileList, setFileList] = useState<Array<UploadFile>>();
+  const [fileList, setFileList] = useMergedState<Array<RcFile>>([], {
+    // value: upload?.fileList,
+  });
 
   useEffect(() => {
-    setFileList(upload?.fileList || upload?.defaultFileList || []);
-  }, []);
+    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 = {
@@ -92,7 +105,9 @@ const ProSender = (
     );
 
     if (actions?.actionsRender) {
-      return actions.actionsRender([fileUpBtn, imgUpBtn]);
+      return actions.actionsRender([fileUpBtn, imgUpBtn], (file) => {
+        return localStorageManager.storeFile(file);
+      });
     }
 
     return (
@@ -138,7 +153,8 @@ const ProSender = (
   };
 
   const senderAreaRender = () => {
-    const { onSubmit: defaultSubmit } = sender || {};
+    const { onSubmit: defaultSubmit, components, ...rest } = sender || {};
+    const { actions } = components || {};
     return (
       <Sender
         // @ts-ignore
@@ -154,9 +170,10 @@ const ProSender = (
           actions: {
             wrapper: (props) => <EnterTypeButton enterType={sender?.enterType} {...props} />,
             clear: () => null,
+            ...actions,
           },
         }}
-        {...sender}
+        {...rest}
       />
     );
   };
diff --git a/src/ProSender/storageManager.js b/src/ProSender/storageManager.js
index 753a4dcc..4655e92d 100644
--- a/src/ProSender/storageManager.js
+++ b/src/ProSender/storageManager.js
@@ -13,7 +13,7 @@ class IndexedDBManager {
 
   // 存储数据方法，返回生成的唯一 key
   async storeFile(file) {
-    const key = uuidv4();
+    const key = file?.uid || uuidv4();
     const expiry = new Date(new Date().getTime() + this.defaultExpiryTime);
     const reader = new FileReader();