diff --git a/.dumirc.ts b/.dumirc.ts
index 796dd2c5..ecdd74e4 100644
--- a/.dumirc.ts
+++ b/.dumirc.ts
@@ -5,6 +5,12 @@ export default defineConfig({
themeConfig: {
name: '@ant-design/pro-chat',
github: homepage,
+ siteToken: {
+ demoInheritSiteTheme: true,
+ },
},
+ mfsu: false,
+ outputPath: 'docs-dist',
html2sketch: {},
+ extraBabelPlugins: ['antd-style'],
});
diff --git a/.github/workflows/preview.yml b/.github/workflows/preview.yml
new file mode 100644
index 00000000..e80eee72
--- /dev/null
+++ b/.github/workflows/preview.yml
@@ -0,0 +1,30 @@
+name: Surge PR Preview
+
+on:
+ pull_request:
+
+ workflow_dispatch:
+
+jobs:
+ preview:
+ runs-on: ubuntu-latest
+ steps:
+ - uses: actions/checkout@v3
+
+ - name: Install pnpm
+ uses: pnpm/action-setup@v2
+ with:
+ version: 8
+
+ - uses: afc163/surge-preview@v1
+ id: preview_step
+ with:
+ surge_token: ${{ secrets.SURGE_TOKEN }}
+ github_token: ${{ secrets.GITHUB_TOKEN }}
+ build: |
+ pnpm i
+ pnpm run docs:build
+ dist: docs-dist
+
+ - name: Get the preview_url
+ run: echo "url => ${{ steps.preview_step.outputs.preview_url }}"
diff --git a/.gitignore b/.gitignore
index 064cd739..06643c8a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,9 +2,6 @@
# dependencies
**/node_modules
-# roadhog-api-doc ignore
-/src/utils/request-temp.js
-_roadhog-api-doc
# production
**/dist
@@ -40,3 +37,5 @@ screenshot
example/.temp/*
.eslintcache
techUI*
+.vercel
+bun.lockb
diff --git a/CHANGELOG.md b/CHANGELOG.md
index d8e526d9..8bde1fff 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,434 @@
# Changelog
-### [Version 0.1.1](https://github.com/arvinxx/pro-chat/compare/v0.1.0...v0.1.1)
+## [Version 0.2.0-beta.17](https://github.com/ant-design/pro-chat/compare/v0.2.0-beta.16...v0.2.0-beta.17)
+
+Released on **2023-11-22**
+
+#### ✨ 新特性
+
+- Support useChat and chatRef.
+
+
+
+
+Improvements and Fixes
+
+#### What's improved
+
+- Support useChat and chatRef ([cf98b0f](https://github.com/ant-design/pro-chat/commit/cf98b0f))
+
+
+
+
+
+[](#readme-top)
+
+
+
+## [Version 0.2.0-beta.16](https://github.com/ant-design/pro-chat/compare/v0.2.0-beta.15...v0.2.0-beta.16)
+
+Released on **2023-11-14**
+
+#### 🐛 修复
+
+- Fix onPressEnter no work error.
+
+
+
+
+Improvements and Fixes
+
+#### What's fixed
+
+- Fix onPressEnter no work error, closes [#11](https://github.com/ant-design/pro-chat/issues/11) ([1db28f7](https://github.com/ant-design/pro-chat/commit/1db28f7))
+
+
+
+
+
+[](#readme-top)
+
+
+
+## [Version 0.2.0-beta.15](https://github.com/ant-design/pro-chat/compare/v0.2.0-beta.14...v0.2.0-beta.15)
+
+Released on **2023-11-08**
+
+#### ✨ 新特性
+
+- Support extra userMeta and params.
+
+
+
+
+Improvements and Fixes
+
+#### What's improved
+
+- Support extra userMeta and params, closes [#10](https://github.com/ant-design/pro-chat/issues/10) ([8475b9a](https://github.com/ant-design/pro-chat/commit/8475b9a))
+
+
+
+
+
+[](#readme-top)
+
+
+
+## [Version 0.2.0-beta.14](https://github.com/ant-design/pro-chat/compare/v0.2.0-beta.13...v0.2.0-beta.14)
+
+Released on **2023-11-07**
+
+#### 🐛 修复
+
+- Change action group style problem.
+
+
+
+
+Improvements and Fixes
+
+#### What's fixed
+
+- Change action group style problem ([52c9104](https://github.com/ant-design/pro-chat/commit/52c9104))
+
+
+
+
+
+[](#readme-top)
+
+
+
+## [Version 0.2.0-beta.13](https://github.com/ant-design/pro-chat/compare/v0.2.0-beta.12...v0.2.0-beta.13)
+
+Released on **2023-11-07**
+
+#### ✨ 新特性
+
+- Change action & group as pro-editor.
+
+
+
+
+Improvements and Fixes
+
+#### What's improved
+
+- Change action & group as pro-editor ([4f1d5ee](https://github.com/ant-design/pro-chat/commit/4f1d5ee))
+
+
+
+
+
+[](#readme-top)
+
+
+
+## [Version 0.2.0-beta.12](https://github.com/ant-design/pro-chat/compare/v0.2.0-beta.11...v0.2.0-beta.12)
+
+Released on **2023-10-26**
+
+#### 🐛 修复
+
+- Fix send auto clear no work error.
+
+
+
+
+Improvements and Fixes
+
+#### What's fixed
+
+- Fix send auto clear no work error, closes [#5](https://github.com/ant-design/pro-chat/issues/5) ([06f6ebf](https://github.com/ant-design/pro-chat/commit/06f6ebf))
+
+
+
+
+
+[](#readme-top)
+
+
+
+## [Version 0.2.0-beta.11](https://github.com/ant-design/pro-chat/compare/v0.2.0-beta.10...v0.2.0-beta.11)
+
+Released on **2023-10-26**
+
+#### ✨ 新特性
+
+- Support autocompleteRequest and messageItemExtraRender.
+
+
+
+
+Improvements and Fixes
+
+#### What's improved
+
+- Support autocompleteRequest and messageItemExtraRender, closes [#4](https://github.com/ant-design/pro-chat/issues/4) ([5305e56](https://github.com/ant-design/pro-chat/commit/5305e56))
+
+
+
+
+
+[](#readme-top)
+
+
+
+## [Version 0.2.0-beta.10](https://github.com/ant-design/pro-chat/compare/v0.2.0-beta.9...v0.2.0-beta.10)
+
+Released on **2023-10-25**
+
+#### 🐛 修复
+
+- Fix onResetMessage.
+
+
+
+
+Improvements and Fixes
+
+#### What's fixed
+
+- Fix onResetMessage, closes [#3](https://github.com/ant-design/pro-chat/issues/3) ([078f277](https://github.com/ant-design/pro-chat/commit/078f277))
+
+
+
+
+
+[](#readme-top)
+
+
+
+## [Version 0.2.0-beta.9](https://github.com/ant-design/pro-chat/compare/v0.2.0-beta.8...v0.2.0-beta.9)
+
+Released on **2023-10-25**
+
+#### ✨ 新特性
+
+- Support onResetMessage funtion.
+
+
+
+
+Improvements and Fixes
+
+#### What's improved
+
+- Support onResetMessage funtion, closes [#2](https://github.com/ant-design/pro-chat/issues/2) ([418230a](https://github.com/ant-design/pro-chat/commit/418230a))
+
+
+
+
+
+[](#readme-top)
+
+
+
+## [Version 0.2.0-beta.8](https://github.com/ant-design/pro-chat/compare/v0.2.0-beta.7...v0.2.0-beta.8)
+
+Released on **2023-10-25**
+
+#### 🐛 修复
+
+- Fix avatar.
+
+
+
+
+Improvements and Fixes
+
+#### What's fixed
+
+- Fix avatar ([61a7efe](https://github.com/ant-design/pro-chat/commit/61a7efe))
+
+
+
+
+
+[](#readme-top)
+
+
+
+## [Version 0.2.0-beta.7](https://github.com/ant-design/pro-chat/compare/v0.2.0-beta.6...v0.2.0-beta.7)
+
+Released on **2023-10-22**
+
+#### 🐛 修复
+
+- Clean deps.
+
+
+
+
+Improvements and Fixes
+
+#### What's fixed
+
+- Clean deps ([1479fa3](https://github.com/ant-design/pro-chat/commit/1479fa3))
+
+
+
+
+
+[](#readme-top)
+
+
+
+## [Version 0.2.0-beta.6](https://github.com/ant-design/pro-chat/compare/v0.2.0-beta.5...v0.2.0-beta.6)
+
+Released on **2023-10-22**
+
+
+
+
+Improvements and Fixes
+
+
+
+
+
+[](#readme-top)
+
+
+
+## [Version 0.2.0-beta.5](https://github.com/ant-design/pro-chat/compare/v0.2.0-beta.4...v0.2.0-beta.5)
+
+Released on **2023-10-22**
+
+#### 🐛 修复
+
+- Lock father to fix build.
+
+
+
+
+Improvements and Fixes
+
+#### What's fixed
+
+- Lock father to fix build ([f6618e5](https://github.com/ant-design/pro-chat/commit/f6618e5))
+
+
+
+
+
+[](#readme-top)
+
+
+
+## [Version 0.2.0-beta.4](https://github.com/ant-design/pro-chat/compare/v0.2.0-beta.3...v0.2.0-beta.4)
+
+Released on **2023-10-22**
+
+#### ✨ 新特性
+
+- 支持非流式请求.
+
+#### 🐛 修复
+
+- Fix import.
+
+
+
+
+Improvements and Fixes
+
+#### What's improved
+
+- 支持非流式请求 ([211fad5](https://github.com/ant-design/pro-chat/commit/211fad5))
+
+#### What's fixed
+
+- Fix import ([ac81b1d](https://github.com/ant-design/pro-chat/commit/ac81b1d))
+
+
+
+
+
+[](#readme-top)
+
+
+
+## [Version 0.2.0-beta.3](https://github.com/ant-design/pro-chat/compare/v0.2.0-beta.2...v0.2.0-beta.3)
+
+Released on **2023-10-22**
+
+#### 🐛 修复
+
+- Fix import, fix import.
+
+
+
+
+Improvements and Fixes
+
+#### What's fixed
+
+- Fix import ([565e530](https://github.com/ant-design/pro-chat/commit/565e530))
+- Fix import ([0311e5f](https://github.com/ant-design/pro-chat/commit/0311e5f))
+
+
+
+
+
+[](#readme-top)
+
+
+
+## [Version 0.2.0-beta.2](https://github.com/ant-design/pro-chat/compare/v0.2.0-beta.1...v0.2.0-beta.2)
+
+Released on **2023-10-21**
+
+#### ✨ 新特性
+
+- Add ProChat, ProChat 初步组件化, 支持流式响应.
+
+
+
+
+Improvements and Fixes
+
+#### What's improved
+
+- Add ProChat ([ec20b42](https://github.com/ant-design/pro-chat/commit/ec20b42))
+- ProChat 初步组件化 ([86e8283](https://github.com/ant-design/pro-chat/commit/86e8283))
+- 支持流式响应 ([4e6d720](https://github.com/ant-design/pro-chat/commit/4e6d720))
+
+
+
+
+
+[](#readme-top)
+
+
+
+## [Version 0.2.0-beta.1](https://github.com/ant-design/pro-chat/compare/v0.1.1...v0.2.0-beta.1)
+
+Released on **2023-10-20**
+
+#### ✨ 新特性
+
+- Init basic components.
+
+
+
+
+Improvements and Fixes
+
+#### What's improved
+
+- Init basic components ([09d1284](https://github.com/ant-design/pro-chat/commit/09d1284))
+
+
+
+
+
+[](#readme-top)
+
+
+
+### [Version 0.1.1](https://github.com/ant-design/pro-chat/compare/v0.1.0...v0.1.1)
Released on **2023-10-20**
@@ -15,7 +443,7 @@
#### What's fixed
-- Only support esm ([072ca61](https://github.com/arvinxx/pro-chat/commit/072ca61))
+- Only support esm ([072ca61](https://github.com/ant-design/pro-chat/commit/072ca61))
diff --git a/README.md b/README.md
index b6ed159b..2994e7ac 100644
--- a/README.md
+++ b/README.md
@@ -41,15 +41,15 @@
-[coverage]: https://codecov.io/gh/arvinxx/pro-chat/branch/master/graph/badge.svg
-[codecov-url]: https://codecov.io/gh/arvinxx/pro-chat/branch/master
+[coverage]: https://codecov.io/gh/ant-design/pro-chat/branch/master/graph/badge.svg
+[codecov-url]: https://codecov.io/gh/ant-design/pro-chat/branch/master
-[test-ci]: https://github.com/arvinxx/pro-chat/workflows/Test%20CI/badge.svg
-[release-ci]: https://github.com/arvinxx/pro-chat/workflows/Release%20CI/badge.svg
-[test-ci-url]: https://github.com/arvinxx/pro-chat/actions?query=workflow%3ATest%20CI
-[release-ci-url]: https://github.com/arvinxx/pro-chat/actions?query=workflow%3ARelease%20CI
+[test-ci]: https://github.com/ant-design/pro-chat/workflows/Test%20CI/badge.svg
+[release-ci]: https://github.com/ant-design/pro-chat/workflows/Release%20CI/badge.svg
+[test-ci-url]: https://github.com/ant-design/pro-chat/actions?query=workflow%3ATest%20CI
+[release-ci-url]: https://github.com/ant-design/pro-chat/actions?query=workflow%3ARelease%20CI
[download-image]: https://img.shields.io/npm/dm/@ant-design/pro-chat.svg?style=flat-square
[download-url]: https://npmjs.org/package/@ant-design/pro-chat
@@ -126,20 +126,20 @@ This project is [MIT](./LICENSE) licensed.
-[contributors-shield]: https://img.shields.io/github/contributors/arvinxx/pro-chat.svg?style=flat
-[contributors-url]: https://github.com/arvinxx/pro-chat/graphs/contributors
+[contributors-shield]: https://img.shields.io/github/contributors/ant-design/pro-chat.svg?style=flat
+[contributors-url]: https://github.com/ant-design/pro-chat/graphs/contributors
-[forks-shield]: https://img.shields.io/github/forks/arvinxx/pro-chat.svg?style=flat
-[forks-url]: https://github.com/arvinxx/pro-chat/network/members
+[forks-shield]: https://img.shields.io/github/forks/ant-design/pro-chat.svg?style=flat
+[forks-url]: https://github.com/ant-design/pro-chat/network/members
-[stargazers-shield]: https://img.shields.io/github/stars/arvinxx/pro-chat.svg?style=flat
-[stargazers-url]: https://github.com/arvinxx/pro-chat/stargazers
+[stargazers-shield]: https://img.shields.io/github/stars/ant-design/pro-chat.svg?style=flat
+[stargazers-url]: https://github.com/ant-design/pro-chat/stargazers
-[issues-shield]: https://img.shields.io/github/issues/arvinxx/pro-chat.svg?style=flat
-[issues-url]: https://github.com/arvinxx/pro-chat/issues/new/choose
+[issues-shield]: https://img.shields.io/github/issues/ant-design/pro-chat.svg?style=flat
+[issues-url]: https://github.com/ant-design/pro-chat/issues/new/choose
diff --git a/api/chat.ts b/api/chat.ts
new file mode 100644
index 00000000..ee76f553
--- /dev/null
+++ b/api/chat.ts
@@ -0,0 +1,28 @@
+import { OpenAIStream, StreamingTextResponse } from 'ai';
+import OpenAI from 'openai';
+
+export const config = {
+ runtime: 'edge',
+};
+
+export default async (req: Request) => {
+ const openai = new OpenAI();
+ const payload = (await req.json()) as OpenAIChatStreamPayload;
+ const { messages, ...params } = payload;
+
+ const formatMessages = messages.map((m) => ({
+ content: m.content,
+ name: m.name,
+ role: m.role,
+ }));
+ const response = await openai.chat.completions.create(
+ {
+ messages: formatMessages,
+ ...params,
+ stream: true,
+ },
+ { headers: { Accept: '*/*' } },
+ );
+ const stream = OpenAIStream(response);
+ return new StreamingTextResponse(stream);
+};
diff --git a/api/package.json b/api/package.json
new file mode 100644
index 00000000..09be7f87
--- /dev/null
+++ b/api/package.json
@@ -0,0 +1,9 @@
+{
+ "name": "api",
+ "version": "0.0.0",
+ "description": "test openai api for pro chat",
+ "dependencies": {
+ "ai": "^2",
+ "openai": "^4"
+ }
+}
diff --git a/api/tsconfig.json b/api/tsconfig.json
new file mode 100644
index 00000000..51c21800
--- /dev/null
+++ b/api/tsconfig.json
@@ -0,0 +1,9 @@
+{
+ "compilerOptions": {
+ "strict": false,
+ "declaration": false,
+ "skipLibCheck": true,
+ "esModuleInterop": true,
+ "resolveJsonModule": true
+ }
+}
diff --git a/package.json b/package.json
index 59e79e54..47c5c35a 100644
--- a/package.json
+++ b/package.json
@@ -1,18 +1,18 @@
{
"name": "@ant-design/pro-chat",
- "version": "0.1.1",
+ "version": "0.2.0-beta.17",
"description": "a solution for ai chat",
"keywords": [
"npm",
"template"
],
- "homepage": "https://github.com/arvinxx/pro-chat",
+ "homepage": "https://github.com/ant-design/pro-chat",
"bugs": {
- "url": "https://github.com/arvinxx/pro-chat/issues/new"
+ "url": "https://github.com/ant-design/pro-chat/issues/new"
},
"repository": {
"type": "git",
- "url": "https://github.com/arvinxx/pro-chat.git"
+ "url": "https://github.com/ant-design/pro-chat.git"
},
"license": "MIT",
"author": "arvinxx(arvinx@foxmail.com)",
@@ -39,6 +39,7 @@
"release": "semantic-release",
"setup": "dumi setup",
"start": "dumi dev",
+ "start-with-api": "vercel dev",
"test": "vitest --passWithNoTests",
"test:coverage": "vitest run --coverage --passWithNoTests",
"test:update": "vitest -u",
@@ -57,13 +58,42 @@
"prettier --parser=typescript --write"
]
},
+ "dependencies": {
+ "@ant-design/icons": "^5",
+ "@ant-design/pro-editor": "latest",
+ "@babel/runtime": "^7",
+ "ahooks": "^3",
+ "chroma-js": "^2",
+ "copy-to-clipboard": "^3",
+ "dayjs": "^1",
+ "emoji-regex": "^10",
+ "fast-deep-equal": "^3",
+ "immer": "^10",
+ "lodash-es": "^4",
+ "lucide-react": "^0.288.0",
+ "nanoid": "^5",
+ "polished": "^4",
+ "react-error-boundary": "^4",
+ "react-intersection-observer": "^9.5.2",
+ "react-layout-kit": "^1.7.1",
+ "shikiji": "^0",
+ "swr": "^2",
+ "use-merge-value": "^1",
+ "zustand": "^4.4.1",
+ "zustand-utils": "^1.3.1"
+ },
"devDependencies": {
"@commitlint/cli": "^17",
"@testing-library/react": "^14",
- "@types/react": "^18",
+ "@types/chroma-js": "^2",
+ "@types/lodash-es": "^4",
+ "@types/react": "18.2.31",
"@types/react-dom": "^18",
"@umijs/lint": "^4",
"@vitest/coverage-v8": "latest",
+ "antd": "^5",
+ "antd-style": "^3",
+ "babel-plugin-antd-style": "^1.0.4",
"commitlint": "^17",
"commitlint-config-gitmoji": "^2",
"conventional-changelog-gitmoji-config": "^1",
@@ -71,9 +101,10 @@
"dumi": "^2",
"dumi-theme-antd-style": "latest",
"eslint": "^8",
- "father": "^4",
+ "father": "4.3.1",
"husky": "^8",
"jsdom": "^22",
+ "leva": "^0.9.35",
"lint-staged": "^15",
"prettier": "^3",
"prettier-plugin-organize-imports": "^3",
@@ -86,6 +117,11 @@
"typescript": "^5",
"vitest": "latest"
},
+ "peerDependencies": {
+ "antd": "^5",
+ "antd-style": "^3",
+ "react": "^18"
+ },
"publishConfig": {
"access": "public",
"registry": "https://registry.npmjs.org"
diff --git a/src/ActionIcon/index.tsx b/src/ActionIcon/index.tsx
new file mode 100644
index 00000000..d4aa8160
--- /dev/null
+++ b/src/ActionIcon/index.tsx
@@ -0,0 +1,178 @@
+import { Loader2 } from 'lucide-react';
+import { forwardRef, useMemo } from 'react';
+
+import Icon, { type IconProps } from '@/Icon';
+import Spotlight from '@/components/Spotlight';
+import { DivProps } from '@/types';
+import { type TooltipProps } from 'antd';
+
+import { useStyles } from './style';
+
+import { ActionIcon as ProEditorActionIcon } from '@ant-design/pro-editor';
+
+export type ActionIconSize =
+ | 'large'
+ | 'normal'
+ | 'small'
+ | 'site'
+ | {
+ blockSize?: number;
+ borderRadius?: number;
+ fontSize?: number;
+ strokeWidth?: number;
+ };
+
+const calcSize = (size?: ActionIconSize) => {
+ let blockSize: number;
+ let borderRadius: number;
+
+ switch (size) {
+ case 'large': {
+ blockSize = 44;
+ borderRadius = 8;
+ break;
+ }
+ case 'normal': {
+ blockSize = 36;
+ borderRadius = 5;
+ break;
+ }
+ case 'small': {
+ blockSize = 24;
+ borderRadius = 5;
+ break;
+ }
+ case 'site': {
+ blockSize = 34;
+ borderRadius = 5;
+ break;
+ }
+ default: {
+ blockSize = size?.blockSize || 36;
+ borderRadius = size?.borderRadius || 5;
+ break;
+ }
+ }
+
+ return {
+ blockSize,
+ borderRadius,
+ };
+};
+
+export interface ActionIconProps extends DivProps {
+ /**
+ * @description Whether the icon is active or not
+ * @default false
+ */
+ active?: boolean;
+ /**
+ * @description Change arrow's visible state and change whether the arrow is pointed at the center of target.
+ * @default false
+ */
+ arrow?: boolean;
+ color?: IconProps['color'];
+ fill?: IconProps['fill'];
+ /**
+ * @description Glass blur style
+ * @default 'false'
+ */
+ glass?: boolean;
+ /**
+ * @description The icon element to be rendered
+ * @type LucideIcon
+ */
+ icon?: IconProps['icon'];
+ /**
+ * @description Set the loading status of ActionIcon
+ */
+ loading?: boolean;
+
+ /**
+ * @description The position of the tooltip relative to the target
+ * @enum ["top","left","right","bottom","topLeft","topRight","bottomLeft","bottomRight","leftTop","leftBottom","rightTop","rightBottom"]
+ * @default "top"
+ */
+ placement?: TooltipProps['placement'];
+
+ /**
+ * @description Size of the icon
+ * @default 'normal'
+ */
+ size?: ActionIconSize;
+ /**
+ * @description Whether add spotlight background
+ * @default false
+ */
+ spotlight?: boolean;
+ /**
+ * @description The text shown in the tooltip
+ */
+ title?: string;
+ /**
+ * @description Mouse enter delay of tooltip
+ * @default 0.5
+ */
+ tooltipDelay?: number;
+}
+
+const ActionIcon = forwardRef(
+ (
+ {
+ color,
+ fill,
+ className,
+ active,
+ icon,
+ size = 'normal',
+ style,
+ glass,
+ spotlight,
+ onClick,
+ children,
+ loading,
+ ...props
+ },
+ ref,
+ ) => {
+ const { styles, cx } = useStyles({ active: Boolean(active), glass: Boolean(glass) });
+
+ const { blockSize, borderRadius } = useMemo(() => calcSize(size), [size]);
+
+ const content = (
+ <>
+ {icon && (
+
+ )}
+ {children}
+
+ );
+
+ const spin = (
+
+ );
+
+ const actionIconBlock = (
+
+ {spotlight && }
+ {loading ? spin : content}
+
+ );
+
+ return ;
+ },
+);
+
+export default ActionIcon;
diff --git a/src/ActionIcon/style.ts b/src/ActionIcon/style.ts
new file mode 100644
index 00000000..557e8023
--- /dev/null
+++ b/src/ActionIcon/style.ts
@@ -0,0 +1,47 @@
+import { createStyles } from 'antd-style';
+
+export const useStyles = createStyles(
+ ({ css, token, stylish, cx }, { active, glass }: { active: boolean; glass: boolean }) => {
+ return {
+ block: cx(
+ glass && stylish.blur,
+ css`
+ cursor: pointer;
+
+ position: relative;
+
+ display: flex;
+ flex: none;
+ align-items: center;
+ justify-content: center;
+
+ color: ${active ? token.colorText : token.colorTextTertiary};
+
+ background: ${active ? token.colorFillTertiary : 'transparent'};
+
+ transition:
+ color 600ms ${token.motionEaseOut},
+ scale 400ms ${token.motionEaseOut},
+ background-color 100ms ${token.motionEaseOut};
+
+ &:hover {
+ color: ${token.colorText};
+ background-color: ${token.colorFillSecondary};
+ }
+
+ &:active {
+ color: ${token.colorText};
+ background-color: ${token.colorFill};
+ }
+ `,
+ ),
+ icon: css`
+ transition: scale 400ms ${token.motionEaseOut};
+
+ &:active {
+ scale: 0.8;
+ }
+ `,
+ };
+ },
+);
diff --git a/src/ActionIconGroup/index.tsx b/src/ActionIconGroup/index.tsx
new file mode 100644
index 00000000..0755b9e7
--- /dev/null
+++ b/src/ActionIconGroup/index.tsx
@@ -0,0 +1,123 @@
+import ActionIcon, { ActionIconProps } from '@/ActionIcon';
+import Icon from '@/Icon';
+import Spotlight from '@/components/Spotlight';
+import { ActionGroup as ProEditorActionGroup } from '@ant-design/pro-editor';
+
+import { DropdownProps } from 'antd';
+import { type LucideIcon } from 'lucide-react';
+import { memo } from 'react';
+
+import { DivProps } from '@/types';
+
+export interface ActionIconGroupItems {
+ icon: LucideIcon;
+ key: string;
+ label: string;
+}
+
+export interface ActionEvent {
+ item: ActionIconGroupItems;
+ key: string;
+ keyPath: string[];
+}
+
+export interface ActionIconGroupProps extends DivProps {
+ /**
+ * @description The direction of the icons
+ * @default "row"
+ */
+ direction?: 'row' | 'column';
+ /**
+ * @description The menu items for the dropdown
+ */
+ dropdownMenu?: (ActionIconGroupItems | { type: 'divider' })[];
+ /**
+ * @description The items to be rendered
+ * @default []
+ */
+ items?: ActionIconGroupItems[];
+ onActionClick?: (action: ActionEvent) => void;
+ /**
+ * @description The position of the tooltip relative to the target
+ * @enum ["top","left","right","bottom","topLeft","topRight","bottomLeft","bottomRight","leftTop","leftBottom","rightTop","rightBottom"]
+ */
+ placement?: ActionIconProps['placement'];
+ /**
+ * @description Whether to add a spotlight background
+ * @default true
+ */
+ spotlight?: boolean;
+ /**
+ * @description The type of the group
+ * @default "block"
+ */
+ type?: 'ghost' | 'block' | 'pure';
+}
+
+const ActionIconGroup = memo(
+ ({
+ type = 'block',
+ items = [],
+ placement,
+ spotlight = false,
+ direction = 'row',
+ dropdownMenu = [],
+ onActionClick,
+ className,
+ style,
+ }) => {
+ const tooltipsPlacement = placement || (direction === 'column' ? 'right' : 'top');
+
+ const mergeDropDownList = dropdownMenu?.map((item: any) => {
+ return {
+ ...item,
+ icon: ,
+ onClick: onActionClick
+ ? (info: ActionEvent) =>
+ onActionClick({
+ item,
+ key: info.key,
+ keyPath: info.keyPath,
+ })
+ : undefined,
+ };
+ });
+
+ return (
+ {
+ return (
+ <>
+ {spotlight && }
+ {items?.length > 0 &&
+ items.map((item) => (
+ onActionClick?.({ item, key: item.key, keyPath: [item.key] })
+ : undefined
+ }
+ placement={tooltipsPlacement}
+ size="small"
+ title={item.label}
+ />
+ ))}
+
+ );
+ }}
+ />
+ );
+ },
+);
+
+export default ActionIconGroup;
diff --git a/src/BackBottom/demos/index.tsx b/src/BackBottom/demos/index.tsx
new file mode 100644
index 00000000..9b6c8520
--- /dev/null
+++ b/src/BackBottom/demos/index.tsx
@@ -0,0 +1,18 @@
+import { BackBottom } from '@ant-design/pro-chat';
+import { useRef } from 'react';
+
+export default () => {
+ const ref = useRef(null);
+ return (
+
+
+ {Array.from({ length: 40 })
+ .fill('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa')
+ .map((item: any, index) => (
+
{item}
+ ))}
+
+
+
{messageExtra}
+ ) : null}
+
+ );
+ },
+);
+
+export default MessageContent;
diff --git a/src/ChatItem/components/Title.tsx b/src/ChatItem/components/Title.tsx
new file mode 100644
index 00000000..dfc08f7d
--- /dev/null
+++ b/src/ChatItem/components/Title.tsx
@@ -0,0 +1,31 @@
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { ChatItemProps } from '@/ChatItem';
+import { formatTime } from '@/ChatItem/utils/formatTime';
+
+import { useStyles } from '../style';
+
+export interface TitleProps {
+ avatar: ChatItemProps['avatar'];
+ placement?: ChatItemProps['placement'];
+ showTitle?: ChatItemProps['showTitle'];
+ time?: ChatItemProps['time'];
+}
+
+const Title = memo(({ showTitle, placement, time, avatar }) => {
+ const { styles } = useStyles({ placement, showTitle });
+
+ return (
+
+ {showTitle ? avatar.title || 'untitled' : undefined}
+ {time && }
+
+ );
+});
+
+export default Title;
diff --git a/src/ChatItem/demos/Alert.tsx b/src/ChatItem/demos/Alert.tsx
new file mode 100644
index 00000000..5de3124f
--- /dev/null
+++ b/src/ChatItem/demos/Alert.tsx
@@ -0,0 +1,5 @@
+import { ChatItem } from '@ant-design/pro-chat';
+
+import { avatar } from './data';
+
+export default () => ;
diff --git a/src/ChatItem/demos/data.tsx b/src/ChatItem/demos/data.tsx
new file mode 100644
index 00000000..5a644cd2
--- /dev/null
+++ b/src/ChatItem/demos/data.tsx
@@ -0,0 +1,37 @@
+import type { ActionIconGroupProps, MetaData } from '@ant-design/pro-chat';
+import { Copy, Edit, RotateCw, Trash } from 'lucide-react';
+
+export const avatar: MetaData = {
+ avatar: '😎',
+ backgroundColor: '#E8DA5A',
+ title: 'Advertiser',
+};
+
+export const items: ActionIconGroupProps['items'] = [
+ {
+ icon: Edit,
+ key: 'edit',
+ label: 'Edit',
+ },
+];
+
+export const dropdownMenu: ActionIconGroupProps['dropdownMenu'] = [
+ {
+ icon: Copy,
+ key: 'copy',
+ label: 'Copy',
+ },
+ {
+ icon: RotateCw,
+ key: 'regenerate',
+ label: 'Regenerate',
+ },
+ {
+ type: 'divider',
+ },
+ {
+ icon: Trash,
+ key: 'delete',
+ label: 'Delete',
+ },
+];
diff --git a/src/ChatItem/demos/index.tsx b/src/ChatItem/demos/index.tsx
new file mode 100644
index 00000000..05b2c5a8
--- /dev/null
+++ b/src/ChatItem/demos/index.tsx
@@ -0,0 +1,48 @@
+import { ActionIconGroup, ChatItem, ChatItemProps } from '@ant-design/pro-chat';
+import { useState } from 'react';
+
+import { avatar, dropdownMenu, items } from './data';
+
+export default () => {
+ const [edit, setEdit] = useState(false);
+ const control: ChatItemProps | any = {
+ loading: false,
+ message: {
+ rows: true,
+ value:
+ "要使用 dayjs 的 fromNow 函数，需要先安装 dayjs 库并在代码中引入它。然后，可以使用以下语法来获取当前时间与给定时间之间的相对时间：\n\n```javascript\ndayjs().fromNow();\ndayjs('2021-05-01').fromNow();\n```",
+ },
+ placement: {
+ options: ['left', 'right'],
+ value: 'left',
+ },
+ primary: false,
+ showTitle: false,
+ time: 1_686_538_950_084,
+ type: {
+ options: ['block', 'pure'],
+ value: 'block',
+ },
+ };
+
+ return (
+ {
+ if (action.key === 'edit') {
+ setEdit(true);
+ }
+ }}
+ type="ghost"
+ />
+ }
+ avatar={avatar}
+ editing={edit}
+ onEditingChange={setEdit}
+ />
+ );
+};
diff --git a/src/ChatItem/index.md b/src/ChatItem/index.md
new file mode 100644
index 00000000..65584891
--- /dev/null
+++ b/src/ChatItem/index.md
@@ -0,0 +1,19 @@
+---
+nav: 组件
+group: Chat
+title: ChatItem
+description: ChatItem is a React component that represents a single item in a chat conversation. It displays the user's avatar, name, and message. It can also display a loading indicator if the message is still being sent.
+order: 10
+---
+
+## Default
+
+
+
+ }>{text || 'History Message'}
+
+
+ {data.map((item, index) => {
+ const itemProps = {
+ loading: loadingId === item.id,
+ onActionsClick,
+ onMessageChange,
+ renderActions,
+ renderErrorMessages,
+ renderItems,
+ renderMessages,
+ renderMessagesExtra,
+ showTitle,
+ text,
+ type,
+ };
+
+ const historyLength = data.length;
+ const enableHistoryDivider =
+ enableHistoryCount &&
+ historyLength > historyCount &&
+ historyCount === historyLength - index + 1;
+
+ return (
+
+
+
+ );
+ },
+);
+
+export default ChatList;
diff --git a/src/ChatList/style.ts b/src/ChatList/style.ts
new file mode 100644
index 00000000..e684626a
--- /dev/null
+++ b/src/ChatList/style.ts
@@ -0,0 +1,9 @@
+import { createStyles } from 'antd-style';
+
+export const useStyles = createStyles(({ css }) => {
+ return {
+ container: css`
+ position: relative;
+ `,
+ };
+});
diff --git a/src/EditableMessage/demos/index.tsx b/src/EditableMessage/demos/index.tsx
new file mode 100644
index 00000000..61801d6a
--- /dev/null
+++ b/src/EditableMessage/demos/index.tsx
@@ -0,0 +1,106 @@
+import { EditableMessage } from '@ant-design/pro-chat';
+import { useState } from 'react';
+
+export const content = `# This is an H1
+## This is an H2
+### This is an H3
+#### This is an H4
+##### This is an H5
+
+The point of reference-style links is not that they’re easier to write. The point is that with reference-style links, your document source is vastly more readable. Compare the above examples: using reference-style links, the paragraph itself is only 81 characters long; with inline-style links, it’s 176 characters; and as raw \`HTML\`, it’s 234 characters. In the raw \`HTML\`, there’s more markup than there is text.
+
+---
+
+> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
+> consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
+> Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
+>
+> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
+> id sem consectetuer libero luctus adipiscing.
+
+---
+
+an example | *an example* | **an example**
+
+---
+
+1. Bird
+1. McHale
+1. Parish
+ 1. Bird
+ 1. McHale
+ 1. Parish
+
+---
+
+- Red
+- Green
+- Blue
+ - Red
+ - Green
+ - Blue
+
+---
+
+This is [an example](http://example.com/ "Title") inline link.
+
+
+
+
+| title | title | title |
+| --- | --- | --- |
+| content | content | content |
+
+
+\`\`\`bash
+$ pnpm install
+\`\`\`
+
+
+\`\`\`javascript
+import { renderHook } from '@testing-library/react-hooks';
+import { act } from 'react-dom/test-utils';
+import { useDropNodeOnCanvas } from './useDropNodeOnCanvas';
+\`\`\`
+
+---
+
+以下是一段Markdown格式的LaTeX数学公式：
+
+我是一个行内公式：$E=mc^2$
+
+我是一个独立公式：
+$$
+\\sum_{i=1}^{n} x_i = x_1 + x_2 + \\ldots + x_n
+$$
+
+我是一个带有分式的公式：
+$$
+\\frac{{n!}}{{k!(n-k)!}} = \\binom{n}{k}
+$$
+
+我是一个带有上下标的公式：
+$$
+x^{2} + y^{2} = r^{2}
+$$
+
+我是一个带有积分符号的公式：
+$$
+\\int_{a}^{b} f(x) \\, dx
+$$
+`;
+
+export default () => {
+ const [openModal, setOpenModal] = useState(false);
+ const [editing, setEdit] = useState(false);
+
+ return (
+
+ );
+};
diff --git a/src/EditableMessage/index.md b/src/EditableMessage/index.md
new file mode 100644
index 00000000..41d196a0
--- /dev/null
+++ b/src/EditableMessage/index.md
@@ -0,0 +1,14 @@
+---
+nav: 组件
+group: Message
+title: EditableMessage
+description: The EditableMessage component is used to display a message that can be edited by the user. It consists of a Markdown component and an optional modal for editing the message. When the user clicks on the message, it enters editing mode and displays an input field for editing the message.
+---
+
+## Default
+
+
+ {emoji}
+
+ );
+});
+
+export default Emoji;
diff --git a/src/Emoji/style.ts b/src/Emoji/style.ts
new file mode 100644
index 00000000..f69517c6
--- /dev/null
+++ b/src/Emoji/style.ts
@@ -0,0 +1,29 @@
+import { createStyles } from 'antd-style';
+
+export const useStyles = createStyles(({ css, token }) => {
+ return {
+ container: css`
+ position: relative;
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ line-height: 1;
+ text-align: center;
+ `,
+ loading: css`
+ position: absolute;
+ inset: 0;
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ width: 100%;
+ height: 100%;
+
+ color: ${token.colorText};
+ `,
+ };
+});
diff --git a/src/Icon/index.tsx b/src/Icon/index.tsx
new file mode 100644
index 00000000..1412157d
--- /dev/null
+++ b/src/Icon/index.tsx
@@ -0,0 +1,92 @@
+import { LucideIcon } from 'lucide-react';
+import { memo, useMemo } from 'react';
+
+import { DivProps } from '@/types';
+
+import { useStyles } from './style';
+
+export type IconSize =
+ | 'large'
+ | 'normal'
+ | 'small'
+ | {
+ fontSize?: number;
+ strokeWidth?: number;
+ };
+
+const calcSize = (size?: IconSize) => {
+ let fontSize: number | string;
+ let strokeWidth: number;
+
+ switch (size) {
+ case 'large': {
+ fontSize = 24;
+ strokeWidth = 2;
+ break;
+ }
+ case 'normal': {
+ fontSize = 20;
+ strokeWidth = 2;
+ break;
+ }
+ case 'small': {
+ fontSize = 14;
+ strokeWidth = 1.5;
+ break;
+ }
+ default: {
+ if (size) {
+ fontSize = size?.fontSize || 24;
+ strokeWidth = size?.strokeWidth || 2;
+ } else {
+ fontSize = '1em';
+ strokeWidth = 2;
+ }
+ break;
+ }
+ }
+ return { fontSize, strokeWidth };
+};
+
+export interface IconProps extends DivProps {
+ color?: string;
+ fill?: string;
+ /**
+ * @description The icon element to be rendered
+ * @type LucideIcon
+ */
+ icon: LucideIcon;
+ /**
+ * @description Size of the icon
+ * @default 'normal'
+ */
+ size?: IconSize;
+ /**
+ * @description Rotate icon with animation
+ * @default false
+ */
+ spin?: boolean;
+}
+
+const Icon = memo(({ icon, size, color, fill, className, spin, ...props }) => {
+ const { styles, cx } = useStyles();
+ const SvgIcon = icon;
+
+ const { fontSize, strokeWidth } = useMemo(() => calcSize(size), [size]);
+
+ return (
+
+
+
+ );
+});
+
+export default Icon;
diff --git a/src/Icon/style.ts b/src/Icon/style.ts
new file mode 100644
index 00000000..0697cd39
--- /dev/null
+++ b/src/Icon/style.ts
@@ -0,0 +1,17 @@
+import { createStyles, keyframes } from 'antd-style';
+
+export const useStyles = createStyles(({ css }) => {
+ const spin = keyframes`
+ 0% {
+ rotate: 0deg;
+ }
+ 100% {
+ rotate: 360deg;
+ }
+ `;
+ return {
+ spin: css`
+ animation: ${spin} 1s linear infinite;
+ `,
+ };
+});
diff --git a/src/List/ListItem/index.tsx b/src/List/ListItem/index.tsx
new file mode 100644
index 00000000..92da1923
--- /dev/null
+++ b/src/List/ListItem/index.tsx
@@ -0,0 +1,160 @@
+import { LoadingOutlined, MessageOutlined } from '@ant-design/icons';
+import { CSSProperties, HTMLAttributes, ReactNode, forwardRef } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { useStyles } from './style';
+import { getChatItemTime } from './time';
+
+/**
+ * 卡片列表项的属性
+ */
+export interface ListItemProps {
+ /**
+ * 渲染操作区域的 React 节点
+ */
+ actions?: ReactNode;
+ /**
+ * 是否处于激活状态
+ */
+ active: boolean;
+ addon?: ReactNode;
+ /**
+ * 头像的 React 节点
+ */
+ avatar?: ReactNode;
+ /**
+ * 自定义样式类名
+ */
+ className?: string;
+ /**
+ * 自定义样式类名对象
+ * @property time - 时间的样式类名
+ */
+ classNames?: {
+ time?: string;
+ };
+ /**
+ * 日期时间戳
+ */
+ date?: number;
+ /**
+ * 描述信息
+ */
+ description?: ReactNode;
+ /**
+ * 是否处于加载状态
+ */
+ loading?: boolean;
+ /**
+ * 点击事件回调函数
+ */
+ onClick?: () => void;
+ /**
+ * 鼠标悬停状态变化事件回调函数
+ * @param hover - 是否悬停
+ */
+ onHoverChange?: (hover: boolean) => void;
+
+ pin?: boolean;
+ /**
+ * 是否显示操作区域
+ */
+ showAction?: boolean;
+ /**
+ * 自定义样式对象
+ */
+ style?: CSSProperties;
+ /**
+ * 标题
+ */
+ title: ReactNode;
+}
+
+const ListItem = forwardRef>(
+ (
+ {
+ active,
+ avatar,
+ loading,
+ description,
+ date,
+ title,
+ onHoverChange,
+ actions,
+ className,
+ style,
+ showAction,
+ children,
+ classNames,
+ addon,
+ pin,
+ ...props
+ },
+ ref,
+ ) => {
+ const { styles, cx } = useStyles();
+
+ return (
+ {
+ onHoverChange?.(true);
+ }}
+ onMouseLeave={() => {
+ onHoverChange?.(false);
+ }}
+ paddingBlock={12}
+ paddingInline={16}
+ ref={ref}
+ style={style}
+ {...props}
+ >
+ {avatar ?? }
+
+
+
+ {title}
+
+ {description && {description}
}
+ {addon}
+
+
+ {loading ? (
+
+ ) : (
+ <>
+ {showAction && (
+ {
+ e.preventDefault();
+ e.stopPropagation();
+ }}
+ style={{ display: showAction ? undefined : 'none' }}
+ >
+ {actions}
+
+ )}
+ {date && (
+
+ {getChatItemTime(date)}
+
+ )}
+
+ )}
+ {children}
+
+ );
+ },
+);
+
+export default ListItem;
diff --git a/src/List/ListItem/style.ts b/src/List/ListItem/style.ts
new file mode 100644
index 00000000..d379f224
--- /dev/null
+++ b/src/List/ListItem/style.ts
@@ -0,0 +1,79 @@
+import { createStyles } from 'antd-style';
+
+export const useStyles = createStyles(({ css, token }) => {
+ return {
+ actions: css`
+ position: absolute;
+ top: 50%;
+ right: 16px;
+ transform: translateY(-50%);
+ `,
+ active: css`
+ color: ${token.colorText};
+ background-color: ${token.colorFillSecondary};
+
+ &:hover {
+ background-color: ${token.colorFill};
+ }
+ `,
+ container: css`
+ cursor: pointer;
+ color: ${token.colorTextTertiary};
+ background: transparent;
+ transition: background-color 200ms ${token.motionEaseOut};
+
+ &:active {
+ background-color: ${token.colorFillSecondary};
+ }
+
+ &:hover {
+ background-color: ${token.colorFillTertiary};
+ }
+ `,
+ content: css`
+ position: relative;
+ overflow: hidden;
+ flex: 1;
+ align-self: center;
+ `,
+ desc: css`
+ overflow: hidden;
+
+ width: 100%;
+
+ font-size: 12px;
+ line-height: 1;
+ color: ${token.colorTextDescription};
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ `,
+
+ pin: css`
+ background-color: ${token.colorFillTertiary};
+
+ &:active {
+ background-color: ${token.colorFill} !important;
+ }
+
+ &:hover {
+ background-color: ${token.colorFill};
+ }
+ `,
+
+ time: css`
+ font-size: 12px;
+ color: ${token.colorTextPlaceholder};
+ `,
+ title: css`
+ overflow: hidden;
+
+ width: 100%;
+
+ font-size: 16px;
+ line-height: 1;
+ color: ${token.colorText};
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ `,
+ };
+});
diff --git a/src/List/ListItem/time.ts b/src/List/ListItem/time.ts
new file mode 100644
index 00000000..5234bbc4
--- /dev/null
+++ b/src/List/ListItem/time.ts
@@ -0,0 +1,15 @@
+import dayjs from 'dayjs';
+import 'dayjs/locale/zh-cn';
+
+dayjs.locale('zh-cn');
+
+export const getChatItemTime = (updateAt: number) => {
+ const time = dayjs(updateAt);
+ const diff = dayjs().day() - time.day();
+
+ if (time.isSame(dayjs(), 'day')) return time.format('HH:mm');
+
+ if (diff === 1) return '昨天';
+
+ return time.format('MM-DD');
+};
diff --git a/src/List/index.ts b/src/List/index.ts
new file mode 100644
index 00000000..57c950de
--- /dev/null
+++ b/src/List/index.ts
@@ -0,0 +1,7 @@
+import ListItem from './ListItem';
+
+const List = {
+ Item: ListItem,
+};
+
+export default List;
diff --git a/src/MessageInput/demos/index.tsx b/src/MessageInput/demos/index.tsx
new file mode 100644
index 00000000..b0a2924a
--- /dev/null
+++ b/src/MessageInput/demos/index.tsx
@@ -0,0 +1,6 @@
+import { content } from '@/EditableMessage/demos';
+import { MessageInput } from '@ant-design/pro-chat';
+
+export default () => {
+ return ;
+};
diff --git a/src/MessageInput/index.md b/src/MessageInput/index.md
new file mode 100644
index 00000000..b9bf04ca
--- /dev/null
+++ b/src/MessageInput/index.md
@@ -0,0 +1,14 @@
+---
+nav: 组件
+group: Message
+title: MessageInput
+description: CopyButton is a React component used to copy text content to the clipboard. It provides a button with a copy icon that, when clicked, copies the specified content to the user's clipboard. It also displays a tooltip indicating whether the copy action was successful or not.
+---
+
+## Default
+
+