晚上好，你吃过了吗？
@@ -81,28 +81,28 @@ exports[`renders components/chat-box/demo/avatar-and-placement.tsx extend contex
`;
-exports[`renders components/chat-box/demo/avatar-and-placement.tsx extend context correctly 2`] = `[]`;
+exports[`renders components/chatbox/demo/avatar-and-placement.tsx extend context correctly 2`] = `[]`;
-exports[`renders components/chat-box/demo/basic.tsx extend context correctly 1`] = `
+exports[`renders components/chatbox/demo/basic.tsx extend context correctly 1`] = `
`;
-exports[`renders components/chat-box/demo/basic.tsx extend context correctly 2`] = `[]`;
+exports[`renders components/chatbox/demo/basic.tsx extend context correctly 2`] = `[]`;
-exports[`renders components/chat-box/demo/contentRender.tsx extend context correctly 1`] = `
+exports[`renders components/chatbox/demo/contentRender.tsx extend context correctly 1`] = `
-
- Title
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
+
+
+ Title
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
…
-
+
+
`;
-exports[`renders components/chat-box/demo/contentRender.tsx extend context correctly 2`] = `[]`;
+exports[`renders components/chatbox/demo/contentRender.tsx extend context correctly 2`] = `[]`;
-exports[`renders components/chat-box/demo/loading.tsx extend context correctly 1`] = `
+exports[`renders components/chatbox/demo/loading.tsx extend context correctly 1`] = `
`;
-exports[`renders components/chat-box/demo/loading.tsx extend context correctly 2`] = `[]`;
+exports[`renders components/chatbox/demo/loading.tsx extend context correctly 2`] = `[]`;
-exports[`renders components/chat-box/demo/stream-output.tsx extend context correctly 1`] = `
+exports[`renders components/chatbox/demo/stream-output.tsx extend context correctly 1`] = `
`;
-exports[`renders components/chat-box/demo/stream-output.tsx extend context correctly 2`] = `[]`;
+exports[`renders components/chatbox/demo/stream-output.tsx extend context correctly 2`] = `[]`;
diff --git a/components/chatbox/__tests__/__snapshots__/demo.test.ts.snap b/components/chatbox/__tests__/__snapshots__/demo.test.ts.snap
index 1cf5ad429fe2..7729272500b5 100644
--- a/components/chatbox/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/chatbox/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,14 +1,14 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`renders components/chat-box/demo/avatar-and-placement.tsx correctly 1`] = `
+exports[`renders components/chatbox/demo/avatar-and-placement.tsx correctly 1`] = `
晚上好，你吃过了吗？
@@ -81,24 +81,24 @@ exports[`renders components/chat-box/demo/avatar-and-placement.tsx correctly 1`]
`;
-exports[`renders components/chat-box/demo/basic.tsx correctly 1`] = `
+exports[`renders components/chatbox/demo/basic.tsx correctly 1`] = `
`;
-exports[`renders components/chat-box/demo/contentRender.tsx correctly 1`] = `
+exports[`renders components/chatbox/demo/contentRender.tsx correctly 1`] = `
-
- Title
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
+
+
+ Title
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
…
-
+
+
`;
-exports[`renders components/chat-box/demo/loading.tsx correctly 1`] = `
+exports[`renders components/chatbox/demo/loading.tsx correctly 1`] = `
`;
-exports[`renders components/chat-box/demo/stream-output.tsx correctly 1`] = `
+exports[`renders components/chatbox/demo/stream-output.tsx correctly 1`] = `
`;
diff --git a/components/chatbox/__tests__/__snapshots__/index.test.tsx.snap b/components/chatbox/__tests__/__snapshots__/index.test.tsx.snap
index 7c4f226b3a86..c3dbc3f1388d 100644
--- a/components/chatbox/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/chatbox/__tests__/__snapshots__/index.test.tsx.snap
@@ -1,23 +1,23 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`chat-box Chatbox component work 1`] = `
+exports[`chatbox Chatbox component work 1`] = `
`;
-exports[`chat-box rtl render component should be rendered correctly in RTL direction 1`] = `
+exports[`chatbox rtl render component should be rendered correctly in RTL direction 1`] = `
test
diff --git a/components/chatbox/__tests__/demo-extend.test.ts b/components/chatbox/__tests__/demo-extend.test.ts
index b4d9d9c58948..4940e499e235 100644
--- a/components/chatbox/__tests__/demo-extend.test.ts
+++ b/components/chatbox/__tests__/demo-extend.test.ts
@@ -1,3 +1,3 @@
import { extendTest } from '../../../tests/shared/demoTest';
-extendTest('chat-box');
+extendTest('chatbox');
diff --git a/components/chatbox/__tests__/demo.test.ts b/components/chatbox/__tests__/demo.test.ts
index 818365aa325f..549211096c11 100644
--- a/components/chatbox/__tests__/demo.test.ts
+++ b/components/chatbox/__tests__/demo.test.ts
@@ -1,3 +1,3 @@
import demoTest from '../../../tests/shared/demoTest';
-demoTest('chat-box');
+demoTest('chatbox');
diff --git a/components/chatbox/__tests__/image.test.ts b/components/chatbox/__tests__/image.test.ts
index d1b453c649b1..7e79d7a14b77 100644
--- a/components/chatbox/__tests__/image.test.ts
+++ b/components/chatbox/__tests__/image.test.ts
@@ -1,5 +1,5 @@
import { imageDemoTest } from '../../../tests/shared/imageTest';
-describe('chat-box image', () => {
- imageDemoTest('chat-box');
+describe('chatbox image', () => {
+ imageDemoTest('chatbox');
});
diff --git a/components/chatbox/__tests__/index.test.tsx b/components/chatbox/__tests__/index.test.tsx
index ea2913ba0fa7..0b2ad516da65 100644
--- a/components/chatbox/__tests__/index.test.tsx
+++ b/components/chatbox/__tests__/index.test.tsx
@@ -5,19 +5,19 @@ import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest';
import { render } from '../../../tests/utils';
-describe('chat-box', () => {
+describe('chatbox', () => {
mountTest(() =>
);
rtlTest(() =>
);
it('Chatbox component work', () => {
const { container } = render(
);
- const element = container.querySelector
('.ant-chat-box');
+ const element = container.querySelector('.ant-chatbox');
expect(element).toBeTruthy();
expect(element).toMatchSnapshot();
});
it('Chatbox support content', () => {
const { container } = render();
- const element = container.querySelector('.ant-chat-box .ant-chat-box-content');
+ const element = container.querySelector('.ant-chatbox .ant-chatbox-content');
expect(element?.textContent).toBe('hello world');
});
@@ -28,16 +28,16 @@ describe('chat-box', () => {
contentRender={(content) => {content}}
/>,
);
- const element = container.querySelector('.ant-chat-box .test-contentRender');
+ const element = container.querySelector('.ant-chatbox .test-contentRender');
expect(element).toBeTruthy();
expect(element?.textContent).toBe('test-contentRender');
});
it('Chatbox support step', () => {
const { container } = render();
- const selectors = '.ant-chat-box .ant-chat-box-content';
+ const selectors = '.ant-chatbox .ant-chatbox-content';
expect(container.querySelector(selectors)).toHaveClass(
- 'ant-chat-box-content-cursorBlink',
+ 'ant-chatbox-content-cursorBlink',
);
});
@@ -45,21 +45,21 @@ describe('chat-box', () => {
const { container } = render(
avatar} content="" />,
);
- expect(container.querySelector('.ant-chat-box .test-avatar')).toBeTruthy();
+ expect(container.querySelector('.ant-chatbox .test-avatar')).toBeTruthy();
});
it('Chatbox support loading', () => {
const { container } = render();
expect(
- container.querySelector('.ant-chat-box .ant-spin.ant-spin-spinning'),
+ container.querySelector('.ant-chatbox .ant-spin.ant-spin-spinning'),
).toBeTruthy();
});
it('Chatbox support placement', () => {
const { container, rerender } = render();
- const element = container.querySelector('.ant-chat-box');
- expect(element).toHaveClass('ant-chat-box-start');
+ const element = container.querySelector('.ant-chatbox');
+ expect(element).toHaveClass('ant-chatbox-start');
rerender();
- expect(element).toHaveClass('ant-chat-box-end');
+ expect(element).toHaveClass('ant-chatbox-end');
});
});
diff --git a/components/chatbox/demo/contentRender.tsx b/components/chatbox/demo/contentRender.tsx
index 4347a000baa1..abeb813a75eb 100644
--- a/components/chatbox/demo/contentRender.tsx
+++ b/components/chatbox/demo/contentRender.tsx
@@ -2,31 +2,24 @@
import React from 'react';
import { UserOutlined } from '@ant-design/icons';
import { Avatar, Chatbox } from 'antd';
+import type { ChatboxProps } from 'antd';
import markdownit from 'markdown-it';
-const style: React.CSSProperties = {
- maxWidth: '100%',
- padding: '12px 16px',
- backgroundColor: '#f0f2f5',
- border: '1px solid #d9d9d9',
-};
-
const md = markdownit({ html: true, breaks: true, typographer: true });
-const App: React.FC = () => {
- const contentRender = React.useCallback((content?: string) => {
- if (!content) {
- return null;
- }
- return ;
- }, []);
- return (
- } />}
- content={'# Title \n Lorem ipsum dolor sit amet, consectetur adipiscing elit. \n ...'}
- contentRender={contentRender}
- />
- );
+const contentRender: ChatboxProps['contentRender'] = (content) => {
+ if (!content) {
+ return null;
+ }
+ return ;
};
+const App: React.FC = () => (
+ } />}
+ content={'# Title \n Lorem ipsum dolor sit amet, consectetur adipiscing elit. \n ...'}
+ contentRender={contentRender}
+ />
+);
+
export default App;
diff --git a/components/chatbox/index.tsx b/components/chatbox/index.tsx
index ab61aa14c995..8e7c707d0d2e 100644
--- a/components/chatbox/index.tsx
+++ b/components/chatbox/index.tsx
@@ -48,7 +48,7 @@ const Chatbox: React.FC = (props) => {
contentRender,
} = props;
const { direction, getPrefixCls } = React.useContext(ConfigContext);
- const prefixCls = getPrefixCls('chat-box', customizePrefixCls);
+ const prefixCls = getPrefixCls('chatbox', customizePrefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
const mergedStep = useStep(step);
@@ -65,20 +65,26 @@ const Chatbox: React.FC = (props) => {
{ [`${prefixCls}-rtl`]: direction === 'rtl' },
);
- const mergedContentCls = classNames(`${prefixCls}-content`, {
- [`${prefixCls}-content-cursorBlink`]: showCursor && !loading,
- });
-
- const contentNode = mergedStep !== false ? typedContent : content;
+ const mergedContent = React.useMemo(() => {
+ if (loading) {
+ return ;
+ }
+ if (mergedStep !== false) {
+ return typedContent;
+ }
+ return content;
+ }, [content, loading, mergedStep, typedContent]);
return wrapCSSVar(
{avatar &&
{avatar}
}
- {contentRender ? (
- contentRender(content)
- ) : (
-
{loading ? : contentNode}
- )}
+
+ {contentRender ? contentRender(content) : mergedContent}
+
- 晚上好，你吃过了吗？
+ Good morning, how are you ?
- 晚上好，你吃过了吗？
+ I'm fine, thank you !
diff --git a/components/chatbox/__tests__/__snapshots__/demo.test.ts.snap b/components/chatbox/__tests__/__snapshots__/demo.test.ts.snap
index 7729272500b5..b6fe332fae71 100644
--- a/components/chatbox/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/chatbox/__tests__/__snapshots__/demo.test.ts.snap
@@ -38,7 +38,7 @@ exports[`renders components/chatbox/demo/avatar-and-placement.tsx correctly 1`]
- 晚上好，你吃过了吗？
+ Good morning, how are you ?
- 晚上好，你吃过了吗？
+ I'm fine, thank you !
diff --git a/components/chatbox/__tests__/index.test.tsx b/components/chatbox/__tests__/index.test.tsx
index 0b2ad516da65..1ad8430a5b0a 100644
--- a/components/chatbox/__tests__/index.test.tsx
+++ b/components/chatbox/__tests__/index.test.tsx
@@ -33,8 +33,8 @@ describe('chatbox', () => {
expect(element?.textContent).toBe('test-contentRender');
});
- it('Chatbox support step', () => {
- const { container } = render(
);
+ it('Chatbox support typing', () => {
+ const { container } = render(
);
const selectors = '.ant-chatbox .ant-chatbox-content';
expect(container.querySelector
(selectors)).toHaveClass(
'ant-chatbox-content-cursorBlink',
diff --git a/components/chatbox/demo/avatar-and-placement.tsx b/components/chatbox/demo/avatar-and-placement.tsx
index 7102fa7eef79..d007a616db38 100644
--- a/components/chatbox/demo/avatar-and-placement.tsx
+++ b/components/chatbox/demo/avatar-and-placement.tsx
@@ -15,12 +15,12 @@ const barAvatar: React.CSSProperties = {
const App: React.FC = () => (
} style={fooAvatar} />}
/>
} style={barAvatar} />}
/>
diff --git a/components/chatbox/demo/stream-output.tsx b/components/chatbox/demo/stream-output.tsx
index a8c74bd2b18b..21b4086fd659 100644
--- a/components/chatbox/demo/stream-output.tsx
+++ b/components/chatbox/demo/stream-output.tsx
@@ -6,12 +6,12 @@ const sentences = ['Feel free to use Ant Design !', '欢迎使用 Ant Design！'
const useLoopSentence = () => {
const [index, setIndex] = React.useState(0);
- const timer = React.useRef>();
+ const timerRef = React.useRef>();
React.useEffect(() => {
- timer.current = setTimeout(() => {
+ timerRef.current = setTimeout(() => {
setIndex((prevState) => (prevState ? 0 : 1));
}, 4000);
- return () => clearTimeout(timer.current);
+ return () => clearTimeout(timerRef.current);
}, [index]);
return sentences[index];
};
@@ -21,7 +21,7 @@ const App: React.FC = () => {
return (
} />}
/>
);
diff --git a/components/chatbox/hooks/useStep.ts b/components/chatbox/hooks/useStep.ts
deleted file mode 100644
index 24c83f6b7ec8..000000000000
--- a/components/chatbox/hooks/useStep.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-
-import type { ChatboxProps, StepOption } from '..';
-
-const defaultStepOption: Required = {
- step: 1,
- interval: 100,
-};
-
-const useStep = (step: ChatboxProps['step']) => {
- const mergedStep = React.useMemo | false>(() => {
- if (step && typeof step === 'object') {
- return { ...defaultStepOption, ...step };
- }
- if (step === true) {
- return defaultStepOption;
- }
- return false;
- }, [step]);
- return mergedStep;
-};
-
-export default useStep;
diff --git a/components/chatbox/hooks/useTyped.ts b/components/chatbox/hooks/useTypedEffect.ts
similarity index 74%
rename from components/chatbox/hooks/useTyped.ts
rename to components/chatbox/hooks/useTypedEffect.ts
index 06f9b4fd98d9..2671a42cb081 100644
--- a/components/chatbox/hooks/useTyped.ts
+++ b/components/chatbox/hooks/useTypedEffect.ts
@@ -1,8 +1,8 @@
import React from 'react';
-import type { StepOption } from '..';
+import type { TypingOption } from '..';
-const useTyped = (content?: string, mergedStep?: Required | false) => {
+const useTypedEffect = (content?: string, mergedTyping?: Required | false) => {
const [typedContent, setTypedContent] = React.useState('');
const [showCursor, setShowCursor] = React.useState(false);
@@ -15,12 +15,12 @@ const useTyped = (content?: string, mergedStep?: Required | false) =
};
React.useEffect(() => {
- if (!content || !mergedStep) {
+ if (!content || !mergedTyping) {
return;
}
setShowCursor(true);
let stepCount = 0;
- const { step, interval } = mergedStep;
+ const { step, interval } = mergedTyping;
timerRef.current = setInterval(() => {
stepCount += step;
setTypedContent(content.slice(0, stepCount) ?? '');
@@ -33,9 +33,9 @@ const useTyped = (content?: string, mergedStep?: Required | false) =
clearTimer();
setShowCursor(false);
};
- }, [content, mergedStep]);
+ }, [content, mergedTyping]);
return { typedContent, showCursor };
};
-export default useTyped;
+export default useTypedEffect;
diff --git a/components/chatbox/hooks/useTypingValue.ts b/components/chatbox/hooks/useTypingValue.ts
new file mode 100644
index 000000000000..9bf2daaa1826
--- /dev/null
+++ b/components/chatbox/hooks/useTypingValue.ts
@@ -0,0 +1,23 @@
+import React from 'react';
+
+import type { ChatboxProps, TypingOption } from '..';
+
+const defaultTypingOption: Required = {
+ step: 1,
+ interval: 100,
+};
+
+const useTypingValue = (typing: ChatboxProps['typing']) => {
+ const mergedTyping = React.useMemo | false>(() => {
+ if (typing && typeof typing === 'object') {
+ return { ...defaultTypingOption, ...typing };
+ }
+ if (typing === true) {
+ return defaultTypingOption;
+ }
+ return false;
+ }, [typing]);
+ return mergedTyping;
+};
+
+export default useTypingValue;
diff --git a/components/chatbox/index.en-US.md b/components/chatbox/index.en-US.md
index 6e6a7539eed9..72eb43e74553 100644
--- a/components/chatbox/index.en-US.md
+++ b/components/chatbox/index.en-US.md
@@ -36,7 +36,7 @@ Common props ref：[Common props](/docs/react/common-props)
| avatar | Avatar component | `React.ReactNode` | - | |
| placement | Direction of Message | `start \| end` | `start` | |
| loading | Loading state of Message | `boolean` | - | |
-| step | Show message with stepping motion | `boolean \| { step?: number, interval?: number }` | `false` | |
+| typing | Show message with typing motion | `boolean \| { step?: number, interval?: number }` | `false` | |
| content | Content of Chatbox | `string` | - | |
| contentRender | Display cuztomized content (If use `contentRender` prop, the typed effect needs to be implemented by yourself) | `(content?: string) => ReactNode` | - | |
diff --git a/components/chatbox/index.tsx b/components/chatbox/index.tsx
index 8e7c707d0d2e..fed2ee686033 100644
--- a/components/chatbox/index.tsx
+++ b/components/chatbox/index.tsx
@@ -4,11 +4,11 @@ import classNames from 'classnames';
import { ConfigContext } from '../config-provider';
import type { ConfigConsumerProps } from '../config-provider';
import Spin from '../spin';
-import useStep from './hooks/useStep';
-import useTyped from './hooks/useTyped';
+import useTypedEffect from './hooks/useTypedEffect';
+import useTypingValue from './hooks/useTypingValue';
import useStyle from './style';
-export interface StepOption {
+export interface TypingOption {
/**
* @since 5.17.0
* @default 1
@@ -29,7 +29,7 @@ export interface ChatboxProps {
avatar?: React.ReactNode;
placement?: 'start' | 'end';
loading?: boolean;
- step?: boolean | StepOption;
+ typing?: boolean | TypingOption;
content: string;
contentRender?: (content?: string) => React.ReactNode;
}
@@ -43,7 +43,7 @@ const Chatbox: React.FC = (props) => {
avatar,
placement = 'start',
loading = false,
- step,
+ typing,
content,
contentRender,
} = props;
@@ -51,9 +51,9 @@ const Chatbox: React.FC = (props) => {
const prefixCls = getPrefixCls('chatbox', customizePrefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
- const mergedStep = useStep(step);
+ const mergedTyping = useTypingValue(typing);
- const { typedContent, showCursor } = useTyped(content, mergedStep);
+ const { typedContent, showCursor } = useTypedEffect(content, mergedTyping);
const mergedCls = classNames(
className,
@@ -69,11 +69,11 @@ const Chatbox: React.FC = (props) => {
if (loading) {
return ;
}
- if (mergedStep !== false) {
+ if (mergedTyping !== false) {
return typedContent;
}
return content;
- }, [content, loading, mergedStep, typedContent]);
+ }, [content, loading, mergedTyping, typedContent]);
return wrapCSSVar(
diff --git a/components/chatbox/index.zh-CN.md b/components/chatbox/index.zh-CN.md
index 207aaa488548..fa6c2e9923d9 100644
--- a/components/chatbox/index.zh-CN.md
+++ b/components/chatbox/index.zh-CN.md
@@ -37,7 +37,7 @@ tag: 5.17.0
| avatar | 展示头像 | `React.ReactNode` | - | |
| placement | 信息位置 | `start \| end` | `start` | |
| loading | 聊天内容加载状态 | `boolean` | - | |
-| step | 聊天内容动画 | `boolean \| { step?: number, interval?: number }` | `false` | |
+| typing | 设置聊天内容打字动画 | `boolean \| { step?: number, interval?: number }` | `false` | |
| content | 聊天内容 | `string` | - | |
| contentRender | 自定义渲染内容（使用 `contentRender` 的话，打字效果需要自行实现） | `(content?: string) => ReactNode` | - | |
From 1bc3e43fe51717e8839f86179c73b53d72428d1a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=97=E5=98=89=E7=94=B7?= <574980606@qq.com>
Date: Mon, 15 Apr 2024 22:32:01 +0800
Subject: [PATCH 32/72] fix: setInterval => setTimeout
---
components/chatbox/hooks/useTypedEffect.ts | 19 ++++++++++++-------
1 file changed, 12 insertions(+), 7 deletions(-)
diff --git a/components/chatbox/hooks/useTypedEffect.ts b/components/chatbox/hooks/useTypedEffect.ts
index 2671a42cb081..0e965880b8e2 100644
--- a/components/chatbox/hooks/useTypedEffect.ts
+++ b/components/chatbox/hooks/useTypedEffect.ts
@@ -4,13 +4,13 @@ import type { TypingOption } from '..';
const useTypedEffect = (content?: string, mergedTyping?: Required | false) => {
const [typedContent, setTypedContent] = React.useState('');
- const [showCursor, setShowCursor] = React.useState(false);
+ const [showCursor, setShowCursor] = React.useState(mergedTyping !== false);
- const timerRef = React.useRef>();
+ const timerRef = React.useRef>();
const clearTimer = () => {
if (timerRef.current) {
- clearInterval(timerRef.current);
+ clearTimeout(timerRef.current);
}
};
@@ -21,14 +21,19 @@ const useTypedEffect = (content?: string, mergedTyping?: Required
setShowCursor(true);
let stepCount = 0;
const { step, interval } = mergedTyping;
- timerRef.current = setInterval(() => {
+
+ const typedTimer = () => {
stepCount += step;
setTypedContent(content.slice(0, stepCount) ?? '');
- if (stepCount >= content.length) {
- clearTimer();
+ if (stepCount < content.length) {
+ timerRef.current = setTimeout(typedTimer, interval);
+ } else {
setShowCursor(false);
}
- }, interval);
+ };
+
+ typedTimer();
+
return () => {
clearTimer();
setShowCursor(false);
From 70edfe122e1e4b1367c57f5f959164dd6406dd03 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=97=E5=98=89=E7=94=B7?= <574980606@qq.com>
Date: Mon, 15 Apr 2024 22:47:00 +0800
Subject: [PATCH 33/72] test: update test snap
---
.../chatbox/__tests__/__snapshots__/demo-extend.test.ts.snap | 4 +++-
components/chatbox/__tests__/__snapshots__/demo.test.ts.snap | 2 +-
2 files changed, 4 insertions(+), 2 deletions(-)
diff --git a/components/chatbox/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/chatbox/__tests__/__snapshots__/demo-extend.test.ts.snap
index 68432f0f3b2b..d2ad853f3b2d 100644
--- a/components/chatbox/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/chatbox/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -274,7 +274,9 @@ exports[`renders components/chatbox/demo/stream-output.tsx extend context correc
+ >
+ F
+
`;
diff --git a/components/chatbox/__tests__/__snapshots__/demo.test.ts.snap b/components/chatbox/__tests__/__snapshots__/demo.test.ts.snap
index b6fe332fae71..3a75ef388c2d 100644
--- a/components/chatbox/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/chatbox/__tests__/__snapshots__/demo.test.ts.snap
@@ -265,7 +265,7 @@ exports[`renders components/chatbox/demo/stream-output.tsx correctly 1`] = `
`;
From 323ef283ed226cf31dbfcc4b27b8575e8df2e189 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=97=E5=98=89=E7=94=B7?= <574980606@qq.com>
Date: Mon, 15 Apr 2024 23:15:43 +0800
Subject: [PATCH 34/72] test: update test snap
---
scripts/__snapshots__/check-site.ts.snap | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/scripts/__snapshots__/check-site.ts.snap b/scripts/__snapshots__/check-site.ts.snap
index fc6a7e98decd..5f8a207d2ab2 100644
--- a/scripts/__snapshots__/check-site.ts.snap
+++ b/scripts/__snapshots__/check-site.ts.snap
@@ -56,9 +56,9 @@ exports[`site test Component components/checkbox en Page 1`] = `3`;
exports[`site test Component components/checkbox zh Page 1`] = `3`;
-exports[`site test Component components/chat-box en Page 1`] = `1`;
+exports[`site test Component components/chatbox en Page 1`] = `1`;
-exports[`site test Component components/chat-box zh Page 1`] = `1`;
+exports[`site test Component components/chatbox zh Page 1`] = `1`;
exports[`site test Component components/collapse en Page 1`] = `2`;
From 55fa7b0acaad1bdc409b0a8eb67c60df2edf7aab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=97=E5=98=89=E7=94=B7?= <574980606@qq.com>
Date: Tue, 16 Apr 2024 00:24:17 +0800
Subject: [PATCH 35/72] docs: update docs
---
components/chatbox/demo/stream-output.md | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/components/chatbox/demo/stream-output.md b/components/chatbox/demo/stream-output.md
index 27e52a5e6a9f..10d85de42da7 100644
--- a/components/chatbox/demo/stream-output.md
+++ b/components/chatbox/demo/stream-output.md
@@ -1,7 +1,7 @@
## zh-CN
-通过设置 `step` 属性，启用流式输出。
+通过设置 `typing` 属性，启用流式输出。
## en-US
-Enable streaming output by setting the `step` prop.
+Enable streaming output by setting the `typing` prop.
From 2182d102484bfe124ff5068cd042c9bdebb9762c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=97=E5=98=89=E7=94=B7?= <574980606@qq.com>
Date: Tue, 16 Apr 2024 09:22:13 +0800
Subject: [PATCH 36/72] demo: update demo
---
.../__tests__/__snapshots__/demo-extend.test.ts.snap | 4 ++--
.../chatbox/__tests__/__snapshots__/demo.test.ts.snap | 2 +-
components/chatbox/demo/stream-output.md | 7 -------
components/chatbox/demo/typing.md | 7 +++++++
components/chatbox/demo/{stream-output.tsx => typing.tsx} | 0
components/chatbox/index.en-US.md | 2 +-
components/chatbox/index.zh-CN.md | 2 +-
7 files changed, 12 insertions(+), 12 deletions(-)
delete mode 100644 components/chatbox/demo/stream-output.md
create mode 100644 components/chatbox/demo/typing.md
rename components/chatbox/demo/{stream-output.tsx => typing.tsx} (100%)
diff --git a/components/chatbox/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/chatbox/__tests__/__snapshots__/demo-extend.test.ts.snap
index d2ad853f3b2d..24a5dd5760ca 100644
--- a/components/chatbox/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/chatbox/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -240,7 +240,7 @@ exports[`renders components/chatbox/demo/loading.tsx extend context correctly 1`
exports[`renders components/chatbox/demo/loading.tsx extend context correctly 2`] = `[]`;
-exports[`renders components/chatbox/demo/stream-output.tsx extend context correctly 1`] = `
+exports[`renders components/chatbox/demo/typing.tsx extend context correctly 1`] = `
@@ -280,4 +280,4 @@ exports[`renders components/chatbox/demo/stream-output.tsx extend context correc
`;
-exports[`renders components/chatbox/demo/stream-output.tsx extend context correctly 2`] = `[]`;
+exports[`renders components/chatbox/demo/typing.tsx extend context correctly 2`] = `[]`;
diff --git a/components/chatbox/__tests__/__snapshots__/demo.test.ts.snap b/components/chatbox/__tests__/__snapshots__/demo.test.ts.snap
index 3a75ef388c2d..86588904062d 100644
--- a/components/chatbox/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/chatbox/__tests__/__snapshots__/demo.test.ts.snap
@@ -232,7 +232,7 @@ exports[`renders components/chatbox/demo/loading.tsx correctly 1`] = `
`;
-exports[`renders components/chatbox/demo/stream-output.tsx correctly 1`] = `
+exports[`renders components/chatbox/demo/typing.tsx correctly 1`] = `
diff --git a/components/chatbox/demo/stream-output.md b/components/chatbox/demo/stream-output.md
deleted file mode 100644
index 10d85de42da7..000000000000
--- a/components/chatbox/demo/stream-output.md
+++ /dev/null
@@ -1,7 +0,0 @@
-## zh-CN
-
-通过设置 `typing` 属性，启用流式输出。
-
-## en-US
-
-Enable streaming output by setting the `typing` prop.
diff --git a/components/chatbox/demo/typing.md b/components/chatbox/demo/typing.md
new file mode 100644
index 000000000000..0715f21b0875
--- /dev/null
+++ b/components/chatbox/demo/typing.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+通过设置 `typing` 属性，开启打字效果。
+
+## en-US
+
+Enable typing output by setting the `typing` prop.
diff --git a/components/chatbox/demo/stream-output.tsx b/components/chatbox/demo/typing.tsx
similarity index 100%
rename from components/chatbox/demo/stream-output.tsx
rename to components/chatbox/demo/typing.tsx
diff --git a/components/chatbox/index.en-US.md b/components/chatbox/index.en-US.md
index 72eb43e74553..f53315425a5b 100644
--- a/components/chatbox/index.en-US.md
+++ b/components/chatbox/index.en-US.md
@@ -19,8 +19,8 @@ Often used when chatting.
Basic
Placement and avatar
-
Stream output
Loading
+
Typing effect
Content render
## API
diff --git a/components/chatbox/index.zh-CN.md b/components/chatbox/index.zh-CN.md
index fa6c2e9923d9..fbb2c6b2e0d2 100644
--- a/components/chatbox/index.zh-CN.md
+++ b/components/chatbox/index.zh-CN.md
@@ -20,8 +20,8 @@ tag: 5.17.0
基本
支持位置和头像
-
流式输出
加载中
+
打字效果
自定义渲染
## API
From 9ee1fe638e281c5347e2718d588c2b63459d621d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=97=E5=98=89=E7=94=B7?= <574980606@qq.com>
Date: Tue, 16 Apr 2024 11:40:15 +0800
Subject: [PATCH 37/72] test: add test case
---
components/chatbox/__tests__/index.test.tsx | 20 ++++++++++++++++-
components/chatbox/hooks/useTypingValue.ts | 25 +++++++++++++--------
2 files changed, 35 insertions(+), 10 deletions(-)
diff --git a/components/chatbox/__tests__/index.test.tsx b/components/chatbox/__tests__/index.test.tsx
index 1ad8430a5b0a..3eec6087a5e6 100644
--- a/components/chatbox/__tests__/index.test.tsx
+++ b/components/chatbox/__tests__/index.test.tsx
@@ -1,13 +1,23 @@
+/* eslint-disable no-await-in-loop */
import React from 'react';
import Chatbox from '..';
import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest';
-import { render } from '../../../tests/utils';
+import { render, waitFakeTimer } from '../../../tests/utils';
describe('chatbox', () => {
mountTest(() =>
);
rtlTest(() =>
);
+
+ beforeAll(() => {
+ jest.useFakeTimers();
+ });
+
+ afterAll(() => {
+ jest.useRealTimers();
+ });
+
it('Chatbox component work', () => {
const { container } = render(
);
const element = container.querySelector
('.ant-chatbox');
@@ -62,4 +72,12 @@ describe('chatbox', () => {
rerender();
expect(element).toHaveClass('ant-chatbox-end');
});
+
+ it('Chatbox support typing effect', async () => {
+ const { container } = render();
+ const element = container.querySelector('.ant-chatbox .ant-chatbox-content');
+ expect(element?.textContent).toBe('你');
+ await waitFakeTimer();
+ expect(element?.textContent).toBe('你好你好你好');
+ });
});
diff --git a/components/chatbox/hooks/useTypingValue.ts b/components/chatbox/hooks/useTypingValue.ts
index 9bf2daaa1826..9deaa290bc61 100644
--- a/components/chatbox/hooks/useTypingValue.ts
+++ b/components/chatbox/hooks/useTypingValue.ts
@@ -2,21 +2,28 @@ import React from 'react';
import type { ChatboxProps, TypingOption } from '..';
+function isObject(value: any): value is Record {
+ return value && typeof value === 'object';
+}
+
const defaultTypingOption: Required = {
step: 1,
interval: 100,
};
const useTypingValue = (typing: ChatboxProps['typing']) => {
- const mergedTyping = React.useMemo | false>(() => {
- if (typing && typeof typing === 'object') {
- return { ...defaultTypingOption, ...typing };
- }
- if (typing === true) {
- return defaultTypingOption;
- }
- return false;
- }, [typing]);
+ const mergedTyping = React.useMemo | false>(
+ () => {
+ if (isObject(typing)) {
+ return { ...defaultTypingOption, ...typing };
+ }
+ if (typing === true) {
+ return defaultTypingOption;
+ }
+ return false;
+ },
+ isObject(typing) ? [typing.interval, typing.step] : [typing],
+ );
return mergedTyping;
};
From 4c37e55d40a69af79c6dda4dc1b46d16da30032a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=97=E5=98=89=E7=94=B7?= <574980606@qq.com>
Date: Tue, 16 Apr 2024 11:40:50 +0800
Subject: [PATCH 38/72] test: add test case
---
components/chatbox/__tests__/index.test.tsx | 1 -
1 file changed, 1 deletion(-)
diff --git a/components/chatbox/__tests__/index.test.tsx b/components/chatbox/__tests__/index.test.tsx
index 3eec6087a5e6..3750b914b337 100644
--- a/components/chatbox/__tests__/index.test.tsx
+++ b/components/chatbox/__tests__/index.test.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable no-await-in-loop */
import React from 'react';
import Chatbox from '..';
From ccdf17a6329d3b42d064028013ca4dff5ff559a2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=97=E5=98=89=E7=94=B7?= <574980606@qq.com>
Date: Tue, 16 Apr 2024 13:58:19 +0800
Subject: [PATCH 39/72] feat: CP support Chatbox
---
components/chatbox/hooks/useTypedEffect.ts | 2 +-
components/chatbox/hooks/useTypingValue.ts | 2 +-
components/chatbox/index.tsx | 63 ++++++++++------------
components/chatbox/interface.ts | 33 ++++++++++++
components/config-provider/context.ts | 4 ++
components/config-provider/index.en-US.md | 1 +
components/config-provider/index.tsx | 4 ++
components/config-provider/index.zh-CN.md | 1 +
components/index.ts | 2 +-
9 files changed, 73 insertions(+), 39 deletions(-)
create mode 100644 components/chatbox/interface.ts
diff --git a/components/chatbox/hooks/useTypedEffect.ts b/components/chatbox/hooks/useTypedEffect.ts
index 0e965880b8e2..67620bb97baf 100644
--- a/components/chatbox/hooks/useTypedEffect.ts
+++ b/components/chatbox/hooks/useTypedEffect.ts
@@ -1,6 +1,6 @@
import React from 'react';
-import type { TypingOption } from '..';
+import type { TypingOption } from '../interface';
const useTypedEffect = (content?: string, mergedTyping?: Required | false) => {
const [typedContent, setTypedContent] = React.useState('');
diff --git a/components/chatbox/hooks/useTypingValue.ts b/components/chatbox/hooks/useTypingValue.ts
index 9deaa290bc61..bd1975327f54 100644
--- a/components/chatbox/hooks/useTypingValue.ts
+++ b/components/chatbox/hooks/useTypingValue.ts
@@ -1,6 +1,6 @@
import React from 'react';
-import type { ChatboxProps, TypingOption } from '..';
+import type { ChatboxProps, TypingOption } from '../interface';
function isObject(value: any): value is Record {
return value && typeof value === 'object';
diff --git a/components/chatbox/index.tsx b/components/chatbox/index.tsx
index fed2ee686033..7e831aae6791 100644
--- a/components/chatbox/index.tsx
+++ b/components/chatbox/index.tsx
@@ -1,45 +1,22 @@
import React from 'react';
-import classNames from 'classnames';
+import classnames from 'classnames';
import { ConfigContext } from '../config-provider';
import type { ConfigConsumerProps } from '../config-provider';
import Spin from '../spin';
import useTypedEffect from './hooks/useTypedEffect';
import useTypingValue from './hooks/useTypingValue';
+import type { ChatboxProps } from './interface';
import useStyle from './style';
-export interface TypingOption {
- /**
- * @since 5.17.0
- * @default 1
- */
- step?: number;
- /**
- * @since 5.17.0
- * @default 100
- */
- interval?: number;
-}
-
-export interface ChatboxProps {
- prefixCls?: string;
- className?: string;
- rootClassName?: string;
- style?: React.CSSProperties;
- avatar?: React.ReactNode;
- placement?: 'start' | 'end';
- loading?: boolean;
- typing?: boolean | TypingOption;
- content: string;
- contentRender?: (content?: string) => React.ReactNode;
-}
-
const Chatbox: React.FC = (props) => {
const {
prefixCls: customizePrefixCls,
className,
rootClassName,
style,
+ classNames,
+ styles,
avatar,
placement = 'start',
loading = false,
@@ -47,7 +24,7 @@ const Chatbox: React.FC = (props) => {
content,
contentRender,
} = props;
- const { direction, getPrefixCls } = React.useContext(ConfigContext);
+ const { direction, chatbox, getPrefixCls } = React.useContext(ConfigContext);
const prefixCls = getPrefixCls('chatbox', customizePrefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
@@ -55,9 +32,10 @@ const Chatbox: React.FC = (props) => {
const { typedContent, showCursor } = useTypedEffect(content, mergedTyping);
- const mergedCls = classNames(
+ const mergedCls = classnames(
className,
rootClassName,
+ chatbox?.className,
prefixCls,
hashId,
cssVarCls,
@@ -65,6 +43,19 @@ const Chatbox: React.FC = (props) => {
{ [`${prefixCls}-rtl`]: direction === 'rtl' },
);
+ const mergedAvatarCls = classnames(
+ `${prefixCls}-avatar`,
+ classNames?.avatar,
+ chatbox?.classNames?.avatar,
+ );
+
+ const mergedContentCls = classnames(
+ `${prefixCls}-content`,
+ classNames?.content,
+ chatbox?.classNames?.content,
+ { [`${prefixCls}-content-cursorBlink`]: showCursor && !loading },
+ );
+
const mergedContent = React.useMemo(() => {
if (loading) {
return ;
@@ -76,13 +67,13 @@ const Chatbox: React.FC = (props) => {
}, [content, loading, mergedTyping, typedContent]);
return wrapCSSVar(
-
- {avatar &&
{avatar}
}
-
+
+ {avatar && (
+
+ {avatar}
+
+ )}
+
{contentRender ? contentRender(content) : mergedContent}
,
diff --git a/components/chatbox/interface.ts b/components/chatbox/interface.ts
new file mode 100644
index 000000000000..c89d5710c47b
--- /dev/null
+++ b/components/chatbox/interface.ts
@@ -0,0 +1,33 @@
+export interface TypingOption {
+ /**
+ * @since 5.17.0
+ * @default 1
+ */
+ step?: number;
+ /**
+ * @since 5.17.0
+ * @default 100
+ */
+ interval?: number;
+}
+
+export interface ChatboxProps {
+ prefixCls?: string;
+ rootClassName?: string;
+ className?: string;
+ style?: React.CSSProperties;
+ classNames?: {
+ avatar?: string;
+ content?: string;
+ };
+ styles?: {
+ avatar?: React.CSSProperties;
+ content?: React.CSSProperties;
+ };
+ avatar?: React.ReactNode;
+ placement?: 'start' | 'end';
+ loading?: boolean;
+ typing?: boolean | TypingOption;
+ content: string;
+ contentRender?: (content?: string) => React.ReactNode;
+}
diff --git a/components/config-provider/context.ts b/components/config-provider/context.ts
index a17eb6b1e28c..bf389c774a73 100644
--- a/components/config-provider/context.ts
+++ b/components/config-provider/context.ts
@@ -6,6 +6,7 @@ import type { AlertProps } from '../alert';
import type { BadgeProps } from '../badge';
import type { ButtonProps } from '../button';
import type { CardProps } from '../card';
+import type { ChatboxProps } from '../chatbox/interface';
import type { CollapseProps } from '../collapse';
import type { DrawerProps } from '../drawer';
import type { FlexProps } from '../flex/interface';
@@ -149,6 +150,8 @@ export type TagConfig = ComponentStyleConfig & Pick
;
+export type ChatboxConfig = ComponentStyleConfig & Pick;
+
export type DrawerConfig = ComponentStyleConfig &
Pick;
@@ -217,6 +220,7 @@ export interface ConfigConsumerProps {
calendar?: ComponentStyleConfig;
carousel?: ComponentStyleConfig;
cascader?: ComponentStyleConfig;
+ chatbox?: ChatboxConfig;
collapse?: CollapseConfig;
floatButtonGroup?: FloatButtonGroupConfig;
typography?: ComponentStyleConfig;
diff --git a/components/config-provider/index.en-US.md b/components/config-provider/index.en-US.md
index 9c5717683df9..f003e1f077ed 100644
--- a/components/config-provider/index.en-US.md
+++ b/components/config-provider/index.en-US.md
@@ -106,6 +106,7 @@ const {
| breadcrumb | Set Breadcrumb common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| button | Set Button common props | { className?: string, style?: React.CSSProperties, classNames?: { icon: string }, styles?: { icon: React.CSSProperties }, autoInsertSpace?: boolean } | - | 5.6.0, autoInsertSpace: 5.17.0 |
| card | Set Card common props | { className?: string, style?: React.CSSProperties, classNames?: [CardProps\["classNames"\]](/components/card#api), styles?: [CardProps\["styles"\]](/components/card#api) } | - | 5.7.0, `classNames` and `styles`: 5.14.0 |
+| chatbox | Set Chatbox common props | { className?: string, style?: React.CSSProperties, classNames?: { avatar?: string; content?: string; }, styles?: { avatar?: CSSProperties, content?: CSSProperties } } | - | 5.17.0 |
| calendar | Set Calendar common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| carousel | Set Carousel common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| cascader | Set Cascader common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx
index ec7d7a91f657..c05fb70a086d 100644
--- a/components/config-provider/index.tsx
+++ b/components/config-provider/index.tsx
@@ -19,6 +19,7 @@ import type {
BadgeConfig,
ButtonConfig,
CardConfig,
+ ChatboxConfig,
CollapseConfig,
ComponentStyleConfig,
ConfigConsumerProps,
@@ -161,6 +162,7 @@ export interface ConfigProviderProps {
calendar?: ComponentStyleConfig;
carousel?: ComponentStyleConfig;
cascader?: ComponentStyleConfig;
+ chatbox?: ChatboxConfig;
collapse?: CollapseConfig;
divider?: ComponentStyleConfig;
drawer?: DrawerConfig;
@@ -319,6 +321,7 @@ const ProviderChildren: React.FC = (props) => {
calendar,
carousel,
cascader,
+ chatbox,
collapse,
typography,
checkbox,
@@ -417,6 +420,7 @@ const ProviderChildren: React.FC = (props) => {
cascader,
collapse,
typography,
+ chatbox,
checkbox,
descriptions,
divider,
diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md
index f6fedb44675c..96d3d3bc1c33 100644
--- a/components/config-provider/index.zh-CN.md
+++ b/components/config-provider/index.zh-CN.md
@@ -109,6 +109,7 @@ const {
| button | 设置 Button 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: { icon: string }, styles?: { icon: React.CSSProperties }, autoInsertSpace?: boolean } | - | 5.6.0, autoInsertSpace: 5.17.0 |
| calendar | 设置 Calendar 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| card | 设置 Card 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: [CardProps\["classNames"\]](/components/card-cn#api), styles?: [CardProps\["styles"\]](/components/card-cn#api) } | - | 5.7.0, `classNames` 和 `styles`: 5.14.0 |
+| chatbox | 设置 Chatbox 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: { avatar?: string; content?: string; }, styles?: { avatar?: CSSProperties, content?: CSSProperties } } | - | 5.17.0 |
| carousel | 设置 Carousel 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| cascader | 设置 Cascader 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| checkbox | 设置 Checkbox 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
diff --git a/components/index.ts b/components/index.ts
index 9974ce0352d0..80232ae3cbe6 100644
--- a/components/index.ts
+++ b/components/index.ts
@@ -29,7 +29,7 @@ export type { CarouselProps } from './carousel';
export { default as Cascader } from './cascader';
export type { CascaderProps } from './cascader';
export { default as Chatbox } from './chatbox';
-export type { ChatboxProps } from './chatbox';
+export type { ChatboxProps } from './chatbox/interface';
export { default as Checkbox } from './checkbox';
export type { CheckboxOptionType, CheckboxProps, CheckboxRef } from './checkbox';
export { default as Col } from './col';
From 322bbb052e4e4d334274a583b39bbd6bc1ee2800 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=97=E5=98=89=E7=94=B7?= <574980606@qq.com>
Date: Tue, 16 Apr 2024 14:14:59 +0800
Subject: [PATCH 40/72] test: add test case
---
components/chatbox/__tests__/index.test.tsx | 22 ++++++++++++++++
.../config-provider/__tests__/style.test.tsx | 25 +++++++++++++++++++
2 files changed, 47 insertions(+)
diff --git a/components/chatbox/__tests__/index.test.tsx b/components/chatbox/__tests__/index.test.tsx
index 3750b914b337..4bbda57c6e93 100644
--- a/components/chatbox/__tests__/index.test.tsx
+++ b/components/chatbox/__tests__/index.test.tsx
@@ -79,4 +79,26 @@ describe('chatbox', () => {
await waitFakeTimer();
expect(element?.textContent).toBe('你好你好你好');
});
+
+ it('Chatbox Should support Chatbox', () => {
+ const { container } = render(
+ avatar}
+ className="test-className"
+ classNames={{ avatar: 'test-avatar', content: 'test-content' }}
+ style={{ backgroundColor: 'green' }}
+ styles={{ avatar: { color: 'red' }, content: { color: 'blue' } }}
+ />,
+ );
+ const element = container.querySelector('.ant-chatbox');
+ const avatarElement = element?.querySelector('.ant-chatbox-avatar');
+ const contentElement = element?.querySelector('.ant-chatbox-content');
+ expect(element).toHaveClass('test-className');
+ expect(avatarElement).toHaveClass('test-avatar');
+ expect(contentElement).toHaveClass('test-content');
+ expect(element).toHaveStyle({ backgroundColor: 'green' });
+ expect(avatarElement).toHaveStyle({ color: 'red' });
+ expect(contentElement).toHaveStyle({ color: 'blue' });
+ });
});
diff --git a/components/config-provider/__tests__/style.test.tsx b/components/config-provider/__tests__/style.test.tsx
index bfbbbef46e62..4488f4cb69a8 100644
--- a/components/config-provider/__tests__/style.test.tsx
+++ b/components/config-provider/__tests__/style.test.tsx
@@ -11,6 +11,7 @@ import Calendar from '../../calendar';
import Card from '../../card';
import Carousel from '../../carousel';
import Cascader from '../../cascader';
+import Chatbox from '../../chatbox';
import Checkbox from '../../checkbox';
import Collapse from '../../collapse';
import ColorPicker from '../../color-picker';
@@ -1575,4 +1576,28 @@ describe('ConfigProvider support style and className props', () => {
const element = container.querySelector('.test-cp-icon');
expect(element).toBeTruthy();
});
+
+ it('CP Should support Chatbox', () => {
+ const { container } = render(
+
+ avatar} />
+ ,
+ );
+ const element = container.querySelector('.ant-chatbox');
+ const avatarElement = element?.querySelector('.ant-chatbox-avatar');
+ const contentElement = element?.querySelector('.ant-chatbox-content');
+ expect(element).toHaveClass('test-cp-className');
+ expect(avatarElement).toHaveClass('test-cp-avatar');
+ expect(contentElement).toHaveClass('test-cp-content');
+ expect(element).toHaveStyle({ backgroundColor: 'green' });
+ expect(avatarElement).toHaveStyle({ color: 'red' });
+ expect(contentElement).toHaveStyle({ color: 'blue' });
+ });
});
From ebe1177dccfc23ecbcd040da079fe5ef93842ed5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=97=E5=98=89=E7=94=B7?= <574980606@qq.com>
Date: Tue, 16 Apr 2024 14:16:27 +0800
Subject: [PATCH 41/72] fix: fix type export
---
components/chatbox/index.tsx | 2 ++
components/index.ts | 2 +-
2 files changed, 3 insertions(+), 1 deletion(-)
diff --git a/components/chatbox/index.tsx b/components/chatbox/index.tsx
index 7e831aae6791..f2ef694cc445 100644
--- a/components/chatbox/index.tsx
+++ b/components/chatbox/index.tsx
@@ -84,4 +84,6 @@ if (process.env.NODE_ENV !== 'production') {
Chatbox.displayName = 'Chatbox';
}
+export type { ChatboxProps };
+
export default Chatbox;
diff --git a/components/index.ts b/components/index.ts
index 80232ae3cbe6..9974ce0352d0 100644
--- a/components/index.ts
+++ b/components/index.ts
@@ -29,7 +29,7 @@ export type { CarouselProps } from './carousel';
export { default as Cascader } from './cascader';
export type { CascaderProps } from './cascader';
export { default as Chatbox } from './chatbox';
-export type { ChatboxProps } from './chatbox/interface';
+export type { ChatboxProps } from './chatbox';
export { default as Checkbox } from './checkbox';
export type { CheckboxOptionType, CheckboxProps, CheckboxRef } from './checkbox';
export { default as Col } from './col';
From 0d370626402395b0af67375a10b460ee8017034c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=97=E5=98=89=E7=94=B7?= <574980606@qq.com>
Date: Tue, 16 Apr 2024 14:52:48 +0800
Subject: [PATCH 42/72] demo: update demo
---
.../__snapshots__/demo-extend.test.ts.snap | 48 ++++++++++++++++++-
.../__tests__/__snapshots__/demo.test.ts.snap | 48 ++++++++++++++++++-
.../chatbox/demo/avatar-and-placement.tsx | 20 +++++++-
3 files changed, 112 insertions(+), 4 deletions(-)
diff --git a/components/chatbox/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/chatbox/__tests__/__snapshots__/demo-extend.test.ts.snap
index 24a5dd5760ca..e646113ac460 100644
--- a/components/chatbox/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/chatbox/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -41,6 +41,29 @@ exports[`renders components/chatbox/demo/avatar-and-placement.tsx extend context
Good morning, how are you ?
+
+
+
+
+
+
+ What a beautiful day !
+
+
@@ -75,7 +98,30 @@ exports[`renders components/chatbox/demo/avatar-and-placement.tsx extend context
- I'm fine, thank you !
+ Hi, Good morning, I'm fine !
+
+
+
+
+
+
+
+
+ thank you !