「WIP」:sparkles: feat: proSender init

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,13 +62,15 @@
   "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",
     "copy-to-clipboard": "^3.3.3",
     "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",

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;

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>
+  );
+};

src/ProSender/demos/base.tsx

@@ -0,0 +1,5 @@
+import { ProSender } from '@ant-design/pro-chat';
+
+export default () => {
+  return <ProSender />;
+};

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>
+  );
+};

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>