diff --git a/src/ChatItem/components/Actions.tsx b/src/ChatItem/components/Actions.tsx index 7e4ce296..980d4c1c 100644 --- a/src/ChatItem/components/Actions.tsx +++ b/src/ChatItem/components/Actions.tsx @@ -3,20 +3,14 @@ import { Flexbox } from 'react-layout-kit'; import { ChatItemProps } from '@/ChatItem'; -import { useStyles } from '../style'; - export interface ActionsProps { actions: ChatItemProps['actions']; - editing?: boolean; - placement?: ChatItemProps['placement']; - type?: ChatItemProps['type']; + className?: string; } -const Actions = memo(({ actions, placement, type, editing }) => { - const { styles } = useStyles({ editing, placement, type }); - +const Actions = memo(({ actions, className }) => { return ( - + {actions} ); diff --git a/src/ChatItem/components/Avatar.tsx b/src/ChatItem/components/Avatar.tsx index 135d8348..2ebca665 100644 --- a/src/ChatItem/components/Avatar.tsx +++ b/src/ChatItem/components/Avatar.tsx @@ -1,7 +1,7 @@ import { memo } from 'react'; import { Flexbox } from 'react-layout-kit'; -import A from '@/components/Avatar'; +import AvatarComponent from '@/components/Avatar'; import { useStyles } from '../style'; import type { ChatItemProps } from '../type'; @@ -16,28 +16,30 @@ export interface AvatarProps { size?: number; } -const Avatar = memo(({ loading, avatar, placement, addon, onClick, size = 40 }) => { - const { styles } = useStyles({ avatarSize: size }); - const avatarContent = ( -
- - -
- ); +const Avatar = memo( + ({ loading, avatar = {}, placement, addon, onClick, size = 40 }) => { + const { styles } = useStyles({ avatarSize: size }); + const avatarContent = ( +
+ + +
+ ); - if (!addon) return avatarContent; - return ( - - {avatarContent} - {addon} - - ); -}); + if (!addon) return avatarContent; + return ( + + {avatarContent} + {addon} + + ); + }, +); export default Avatar; diff --git a/src/ChatItem/components/MessageContent.tsx b/src/ChatItem/components/MessageContent.tsx index 0e0724fd..80d3dcdb 100644 --- a/src/ChatItem/components/MessageContent.tsx +++ b/src/ChatItem/components/MessageContent.tsx @@ -19,6 +19,7 @@ export interface MessageContentProps { renderMessage?: ChatItemProps['renderMessage']; text?: ChatItemProps['text']; type?: ChatItemProps['type']; + className?: string; } const MessageContent = memo( @@ -26,6 +27,7 @@ const MessageContent = memo( editing, onChange, onEditingChange, + className, text, message, placement, @@ -55,7 +57,7 @@ const MessageContent = memo( return ( {messageContent} diff --git a/src/ChatItem/components/Title.tsx b/src/ChatItem/components/Title.tsx index dfc08f7d..b5b77d0e 100644 --- a/src/ChatItem/components/Title.tsx +++ b/src/ChatItem/components/Title.tsx @@ -4,21 +4,18 @@ 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']; + className?: string; } -const Title = memo(({ showTitle, placement, time, avatar }) => { - const { styles } = useStyles({ placement, showTitle }); - +const Title = memo(({ showTitle, className, placement, time, avatar }) => { return ( diff --git a/src/ChatItem/index.tsx b/src/ChatItem/index.tsx index eac80683..f70d3b40 100644 --- a/src/ChatItem/index.tsx +++ b/src/ChatItem/index.tsx @@ -1,7 +1,8 @@ import { useResponsive } from 'antd-style'; -import { memo, useMemo } from 'react'; +import { memo, useContext, useMemo } from 'react'; import { Flexbox } from 'react-layout-kit'; +import { ConfigProvider } from 'antd'; import Actions from './components/Actions'; import Avatar from './components/Avatar'; import BorderSpacing from './components/BorderSpacing'; @@ -37,7 +38,7 @@ const ChatItem = memo((props) => { errorMessage, chatItemRenderConfig, onDoubleClick, - originData = {}, + originData, ...restProps } = props; const { mobile } = useResponsive(); @@ -50,13 +51,15 @@ const ChatItem = memo((props) => { type, }); + const { getPrefixCls } = useContext(ConfigProvider.ConfigContext); + const prefixClass = getPrefixCls('pro-chat'); + const avatarDom = useMemo(() => { if (chatItemRenderConfig?.avatarRender === false) return null; - const dom = ( ((props) => { /> ); return chatItemRenderConfig?.avatarRender?.(props, dom) || dom; - }, [originData.avatar, placement, mobile, loading]); + }, [avatar, placement, mobile, loading]); const messageContentDom = useMemo(() => { if (chatItemRenderConfig?.contentRender === false) return null; @@ -74,6 +77,7 @@ const ChatItem = memo((props) => { ((props) => { type, editing, errorMessage, + originData, ]); const actionsDom = useMemo(() => { if (chatItemRenderConfig?.actionsRender === false) return null; - const dom = ; + const dom = ( + + ); return chatItemRenderConfig?.actionsRender?.(props, dom) || dom; }, [actions]); const titleDom = useMemo(() => { if (chatItemRenderConfig?.titleRender === false) return null; - const dom = ; + const dom = ( + <Title + className={`${cx(styles.name, `${prefixClass}-list-item-title`)}`} + avatar={avatar} + placement={placement} + showTitle={showTitle} + time={time} + /> + ); return chatItemRenderConfig?.titleRender?.(props, dom) || dom; }, [time, avatar]); @@ -115,7 +133,12 @@ const ChatItem = memo<ChatItemProps>((props) => { const itemDom = ( <Flexbox - className={cx(styles.container, className)} + className={cx( + styles.container, + `${prefixClass}-list-item`, + `${prefixClass}-list-item-${placement}`, + className, + )} direction={placement === 'left' ? 'horizontal' : 'horizontal-reverse'} gap={mobile ? 6 : 12} {...restProps} @@ -123,7 +146,7 @@ const ChatItem = memo<ChatItemProps>((props) => { {avatarDom} <Flexbox align={placement === 'left' ? 'flex-start' : 'flex-end'} - className={styles.messageContainer} + className={cx(styles.messageContainer, `${prefixClass}-list-item-message-container`)} > {titleDom} <Flexbox diff --git a/src/ChatList/index.tsx b/src/ChatList/index.tsx index c74dc4a4..17b5f6f9 100644 --- a/src/ChatList/index.tsx +++ b/src/ChatList/index.tsx @@ -1,7 +1,8 @@ -import { Fragment, memo } from 'react'; +import { Fragment, memo, useContext } from 'react'; import type { ChatMessage, DivProps } from '@/types'; +import { ConfigProvider } from 'antd'; import ChatItem, { ChatListItemProps, ListItemProps } from './ChatListItem'; import HistoryDivider from './HistoryDivider'; import ShouldUpdateItem from './ShouldUpdateItem'; @@ -49,9 +50,10 @@ const ChatList = memo<ChatListProps>( ...props }) => { const { cx, styles } = useStyles(); - + const { getPrefixCls } = useContext(ConfigProvider.ConfigContext); + const prefixClass = getPrefixCls('pro-chat'); return ( - <div className={cx(styles.container, className)} {...props}> + <div className={cx(styles.container, `${prefixClass}-list`, className)} {...props}> {data.map((item, index) => { const itemProps = { loading: loadingId === item.id, diff --git a/src/ProChat/container/App.tsx b/src/ProChat/container/App.tsx index 15705e00..44ce089d 100644 --- a/src/ProChat/container/App.tsx +++ b/src/ProChat/container/App.tsx @@ -1,9 +1,10 @@ import BackBottom from '@/BackBottom'; import { createStyles } from 'antd-style'; import RcResizeObserver from 'rc-resize-observer'; -import { CSSProperties, ReactNode, memo, useEffect, useRef, useState } from 'react'; +import { CSSProperties, ReactNode, memo, useContext, useEffect, useRef, useState } from 'react'; import { Flexbox } from 'react-layout-kit'; +import { ConfigProvider } from 'antd'; import ChatList from '../components/ChatList'; import InputArea from '../components/InputArea'; import ChatScrollAnchor from '../components/ScrollAnchor'; @@ -38,6 +39,7 @@ const App = memo<ConversationProps>( const { styles: override } = useOverrideStyles(); const [isRender, setIsRender] = useState(false); const [height, setHeight] = useState('100%' as string | number); + const { getPrefixCls } = useContext(ConfigProvider.ConfigContext); useEffect(() => { // 保证 ref 永远存在 setIsRender(true); @@ -51,6 +53,8 @@ const App = memo<ConversationProps>( }; } }, []); + + const prefixClass = getPrefixCls('pro-chat'); return ( <RcResizeObserver onResize={(e) => { @@ -60,17 +64,17 @@ const App = memo<ConversationProps>( }} > <Flexbox - className={cx(override.container, className)} + className={cx(override.container, className, `${prefixClass}-container`)} style={{ maxHeight: '100vh', height: '100%', ...style, }} > - <div style={{ position: 'relative' }}> + <> <div - className={styles} ref={ref} + className={cx(`${prefixClass}-chat-list-container`, styles)} style={{ height: (height as number) - (areaHtml.current?.clientHeight || 120) || '100%', }} @@ -83,7 +87,7 @@ const App = memo<ConversationProps>( <ChatScrollAnchor /> </div> {isRender ? <BackBottom target={ref} text={'返回底部'} /> : null} - </div> + </> <div ref={areaHtml}>{chatInput ?? <InputArea />}</div> </Flexbox> </RcResizeObserver>