From 27de3b4534b0ef77340f538c51233e706c5a8e9e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9C=9F=E8=B4=A4?= Date: Sun, 24 Mar 2024 22:45:08 +0800 Subject: [PATCH] merge --- src/components/ChatItem/index.tsx | 32 ++++++++++--------- src/components/ChatItem/type.ts | 12 ++++--- src/components/ChatList/index.tsx | 20 +++++++++++- src/components/MessageContent.tsx | 38 ----------------------- src/components/ProChat/ProChat.tsx | 22 +++++++++++-- src/components/ProChatInputArea/index.tsx | 3 ++ src/components/Title.tsx | 4 ++- 7 files changed, 69 insertions(+), 62 deletions(-) delete mode 100644 src/components/MessageContent.tsx diff --git a/src/components/ChatItem/index.tsx b/src/components/ChatItem/index.tsx index ae0136c..0cd2c47 100644 --- a/src/components/ChatItem/index.tsx +++ b/src/components/ChatItem/index.tsx @@ -3,7 +3,6 @@ import { useContext } from 'react'; import { ConfigProvider, Flex } from 'antd'; import cx from 'classnames'; -import MessageContent from '../MessageContent'; import ProChatAvatar from '../ProChatAvatar'; import Title from '../Title'; import type { ChatItemProps } from './type'; @@ -16,10 +15,13 @@ export const ChatItem: React.FC = (props) => { children, placement = 'left', avatar, + style, time, - onChange, messageExtra, + chatListItemContentStyle, + chatListItemTitleStyle, chatItemRenderConfig, + chatListItemAvatarStyle, onDoubleClick, } = props; @@ -35,6 +37,7 @@ export const ChatItem: React.FC = (props) => { className={cx(`${prefixClass}-list-item`, `${prefixClass}-list-item-${placement}`, className)} style={{ flexDirection: placement === 'left' ? 'row' : 'row-reverse', + ...style, }} gap={mobile ? 6 : 12} > @@ -44,6 +47,7 @@ export const ChatItem: React.FC = (props) => { title={avatar?.title} onClick={onAvatarClick} loading={loading} + style={chatListItemAvatarStyle} /> = (props) => { className={cx(`${prefixClass}-list-item-message-container`)} > = (props) => { <Flex align={placement === 'left' ? 'flex-start' : 'flex-end'} className={cx(`${prefixClass}-message-content`)} - style={{ - flexDirection: placement === 'left' ? 'row' : 'row-reverse', - }} + vertical + onDoubleClick={onDoubleClick} gap={8} + style={chatListItemContentStyle} > - <MessageContent - className={`${prefixClass}-list-item-message-content`} - messageExtra={messageExtra} - onChange={onChange} - onDoubleClick={onDoubleClick} - placement={placement} - > - {children} - </MessageContent> + {children} + {messageExtra ? ( + <div + className={`${cx(`${prefixClass}-message-extra ${prefixClass}-message-extra-${placement}`)}`} + > + {messageExtra} + </div> + ) : null} </Flex> </Flex> </Flex> diff --git a/src/components/ChatItem/type.ts b/src/components/ChatItem/type.ts index 62b9487..925430b 100644 --- a/src/components/ChatItem/type.ts +++ b/src/components/ChatItem/type.ts @@ -23,11 +23,7 @@ export interface ChatItemProps<T = Record<string, any>> { children?: ReactNode; messageExtra?: ReactNode; onAvatarClick?: () => void; - /** - * @description Callback when the message content changes - * @param value - The new message content - */ - onChange?: (value: string) => void; + onDoubleClick?: DivProps['onDoubleClick']; /** * @description The placement of the chat item @@ -62,5 +58,11 @@ export interface ChatItemProps<T = Record<string, any>> { >; }; + style?: React.CSSProperties; + originData?: T; + + chatListItemContentStyle?: React.CSSProperties; + chatListItemTitleStyle?: React.CSSProperties; + chatListItemAvatarStyle?: React.CSSProperties; } diff --git a/src/components/ChatList/index.tsx b/src/components/ChatList/index.tsx index 0c0c549..5a4a5ce 100644 --- a/src/components/ChatList/index.tsx +++ b/src/components/ChatList/index.tsx @@ -17,10 +17,24 @@ export type ChatListProps = { className?: string; chatItemRenderConfig: ChatItemProps['chatItemRenderConfig']; style?: React.CSSProperties; + chatListItemStyle?: React.CSSProperties; + chatListItemContentStyle?: React.CSSProperties; + chatListItemTitleStyle?: React.CSSProperties; + chatListItemAvatarStyle?: React.CSSProperties; }; const ChatList: React.FC<ChatListProps> = (props) => { - const { chatItemRenderConfig, className, loading, loadingId, chatList, style } = props; + const { + chatItemRenderConfig, + className, + loading, + chatListItemContentStyle, + chatListItemTitleStyle, + chatListItemAvatarStyle, + loadingId, + chatList, + style, + } = props; const { getPrefixCls } = useContext(ConfigProvider.ConfigContext); const prefixClass = getPrefixCls('pro-chat'); @@ -45,11 +59,15 @@ const ChatList: React.FC<ChatListProps> = (props) => { title: 'Ant Design', } } + style={props.chatListItemStyle} originData={item} loading={loadingId === item.id} placement={item.role === 'user' ? 'right' : 'left'} time={item.updateAt || item.createAt} + chatListItemContentStyle={chatListItemContentStyle} + chatListItemTitleStyle={chatListItemTitleStyle} chatItemRenderConfig={chatItemRenderConfig} + chatListItemAvatarStyle={chatListItemAvatarStyle} > <MessageComponent {...item} /> </ChatItem> diff --git a/src/components/MessageContent.tsx b/src/components/MessageContent.tsx deleted file mode 100644 index fd6642d..0000000 --- a/src/components/MessageContent.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import { memo, useContext, type ReactNode } from 'react'; - -import { ConfigProvider, Flex } from 'antd'; - -import { getStatusClassNames } from 'antd/es/_util/statusUtils'; -import cx from 'classnames'; -import { ChatItemProps } from './ChatItem/type'; - -export interface MessageContentProps { - children?: ReactNode; - messageExtra?: ChatItemProps['messageExtra']; - onChange?: ChatItemProps['onChange']; - onDoubleClick?: ChatItemProps['onDoubleClick']; - placement?: ChatItemProps['placement']; - className?: string; -} - -const MessageContent = memo<MessageContentProps>( - ({ className, children, placement, messageExtra, onDoubleClick }) => { - const { getPrefixCls } = useContext(ConfigProvider.ConfigContext); - const prefixClass = getPrefixCls('pro-chat'); - - return ( - <Flex className={cx(className, getStatusClassNames)} onDoubleClick={onDoubleClick}> - {children} - {messageExtra ? ( - <div - className={`${cx(`${prefixClass}-message-extra ${prefixClass}-message-extra-${placement}`)}`} - > - {messageExtra} - </div> - ) : null} - </Flex> - ); - }, -); - -export default MessageContent; diff --git a/src/components/ProChat/ProChat.tsx b/src/components/ProChat/ProChat.tsx index 4657371..174d674 100644 --- a/src/components/ProChat/ProChat.tsx +++ b/src/components/ProChat/ProChat.tsx @@ -170,6 +170,15 @@ export interface ProChatProps<T extends Record<string, any>> extends ChatProps<T * 样式对象 */ style?: CSSProperties; + + styles: { + chatList?: CSSProperties; + chatInputAction?: CSSProperties; + chatInputArea?: CSSProperties; + chatListItem?: CSSProperties; + chatListItemContent?: CSSProperties; + chatListItemTitle?: CSSProperties; + }; /** * CSS类名 */ @@ -217,10 +226,11 @@ export function ProChat<T extends Record<string, any> = Record<string, any>>( meta, sendButtonRender, placeholder, + styles, } = props; const ref = useRef<HTMLDivElement>(null); const areaHtml = useRef<HTMLDivElement>(null); - const [isRender, setIsRender] = useState(false); + const [isInitRender, setIsRender] = useState(false); const [height, setHeight] = useState('100%' as string | number); useEffect(() => { @@ -246,7 +256,7 @@ export function ProChat<T extends Record<string, any> = Record<string, any>>( }); const backBottomDom = useMemo(() => { - if (!isRender) return null; + if (!isInitRender) return null; return ( <BackTop style={{ @@ -258,7 +268,7 @@ export function ProChat<T extends Record<string, any> = Record<string, any>>( {gLocaleObject('zh-CN').backToBottom} </BackTop> ); - }, [isRender]); + }, [isInitRender]); return ( <RcResizeObserver @@ -283,8 +293,12 @@ export function ProChat<T extends Record<string, any> = Record<string, any>>( loading={loading} chatItemRenderConfig={chatItemRenderConfig} style={{ + ...styles.chatList, height: (height as number) - (areaHtml.current?.clientHeight || 0) || '100%', }} + chatListItemStyle={styles.chatListItem} + chatListItemContentStyle={styles.chatListItemContent} + chatListItemTitleStyle={styles.chatListItemTitle} /> {backBottomDom} <ChatInputArea @@ -297,6 +311,8 @@ export function ProChat<T extends Record<string, any> = Record<string, any>>( inputAreaRender={inputAreaRender} inputRender={inputRender} inputAreaProps={inputAreaProps} + actionStyle={styles.chatInputAction} + areaStyle={styles.chatInputArea} /> </Flex> </RcResizeObserver> diff --git a/src/components/ProChatInputArea/index.tsx b/src/components/ProChatInputArea/index.tsx index c3cc39a..2c09e06 100644 --- a/src/components/ProChatInputArea/index.tsx +++ b/src/components/ProChatInputArea/index.tsx @@ -31,6 +31,7 @@ export type ChatInputAreaProps = { onMessageSend: (message: string) => void | Promise<any>; actionsRender?: (defaultDoms: React.ReactNode[]) => ReactNode; actionStyle?: React.CSSProperties; + areaStyle?: React.CSSProperties; locale?: ProChatLocale; }; @@ -42,6 +43,7 @@ export const ChatInputArea = (props: ChatInputAreaProps) => { inputAreaRender, areaRef, loading, + areaStyle, inputRender, sendButtonRender, inputAreaProps, @@ -185,6 +187,7 @@ export const ChatInputArea = (props: ChatInputAreaProps) => { gap={8} vertical align={'right'} + style={areaStyle} className={cx(`${prefixClass}`, className)} > {inputDom} diff --git a/src/components/Title.tsx b/src/components/Title.tsx index f2f5d7d..4b9a2bd 100644 --- a/src/components/Title.tsx +++ b/src/components/Title.tsx @@ -7,14 +7,16 @@ export interface TitleProps { placement?: ChatItemProps['placement']; time?: ChatItemProps['time']; className?: string; + style?: React.CSSProperties; } -const Title: React.FC<TitleProps> = ({ className, placement, time, avatar }) => { +const Title: React.FC<TitleProps> = ({ style, className, placement, time, avatar }) => { return ( <Flex className={className} style={{ flexDirection: placement === 'left' ? 'row' : 'row-reverse', + ...style, }} gap={4} >