Skip to content

Commit

Permalink
merge
Browse files Browse the repository at this point in the history
  • Loading branch information
chenshuai2144 committed Mar 24, 2024
1 parent c34e597 commit 27de3b4
Show file tree
Hide file tree
Showing 7 changed files with 69 additions and 62 deletions.
32 changes: 18 additions & 14 deletions src/components/ChatItem/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -16,10 +15,13 @@ export const ChatItem: React.FC<ChatItemProps> = (props) => {
children,
placement = 'left',
avatar,
style,
time,
onChange,
messageExtra,
chatListItemContentStyle,
chatListItemTitleStyle,
chatItemRenderConfig,
chatListItemAvatarStyle,
onDoubleClick,
} = props;

Expand All @@ -35,6 +37,7 @@ export const ChatItem: React.FC<ChatItemProps> = (props) => {
className={cx(`${prefixClass}-list-item`, `${prefixClass}-list-item-${placement}`, className)}
style={{
flexDirection: placement === 'left' ? 'row' : 'row-reverse',
...style,
}}
gap={mobile ? 6 : 12}
>
Expand All @@ -44,13 +47,15 @@ export const ChatItem: React.FC<ChatItemProps> = (props) => {
title={avatar?.title}
onClick={onAvatarClick}
loading={loading}
style={chatListItemAvatarStyle}
/>
<Flex
vertical
align={placement === 'left' ? 'flex-start' : 'flex-end'}
className={cx(`${prefixClass}-list-item-message-container`)}
>
<Title
style={chatListItemTitleStyle}
className={`${cx(`${prefixClass}-list-item-title`)}`}
avatar={avatar}
placement={placement}
Expand All @@ -59,20 +64,19 @@ export const ChatItem: React.FC<ChatItemProps> = (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>
Expand Down
12 changes: 7 additions & 5 deletions src/components/ChatItem/type.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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;
}
20 changes: 19 additions & 1 deletion src/components/ChatList/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand All @@ -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>
Expand Down
38 changes: 0 additions & 38 deletions src/components/MessageContent.tsx

This file was deleted.

22 changes: 19 additions & 3 deletions src/components/ProChat/ProChat.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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类名
*/
Expand Down Expand Up @@ -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(() => {
Expand All @@ -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={{
Expand All @@ -258,7 +268,7 @@ export function ProChat<T extends Record<string, any> = Record<string, any>>(
{gLocaleObject('zh-CN').backToBottom}
</BackTop>
);
}, [isRender]);
}, [isInitRender]);

return (
<RcResizeObserver
Expand All @@ -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
Expand All @@ -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>
Expand Down
3 changes: 3 additions & 0 deletions src/components/ProChatInputArea/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
};

Expand All @@ -42,6 +43,7 @@ export const ChatInputArea = (props: ChatInputAreaProps) => {
inputAreaRender,
areaRef,
loading,
areaStyle,
inputRender,
sendButtonRender,
inputAreaProps,
Expand Down Expand Up @@ -185,6 +187,7 @@ export const ChatInputArea = (props: ChatInputAreaProps) => {
gap={8}
vertical
align={'right'}
style={areaStyle}
className={cx(`${prefixClass}`, className)}
>
{inputDom}
Expand Down
4 changes: 3 additions & 1 deletion src/components/Title.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
>
Expand Down

0 comments on commit 27de3b4

Please sign in to comment.