62 lines
1.6 KiB
TypeScript
62 lines
1.6 KiB
TypeScript
/*
|
|
* @Author : Eleanor Mao
|
|
* @Date : 2024-04-09 14:46:24
|
|
* @LastEditTime : 2024-04-09 14:46:24
|
|
*
|
|
* Copyright © RingCentral. All rights reserved.
|
|
*/
|
|
import React, { FC } from "react";
|
|
import { styled } from '@mui/material/styles';
|
|
import ListItem from '@mui/material/ListItem';
|
|
import SmartToyOutlinedIcon from '@mui/icons-material/SmartToyOutlined';
|
|
import Box from '@mui/material/Box';
|
|
import FaceIcon from '@mui/icons-material/Face';
|
|
|
|
interface Props {
|
|
isMe: boolean;
|
|
message: string;
|
|
}
|
|
|
|
|
|
const ChatWrap = styled(ListItem)<{ isMe: boolean }>(({ isMe }) => ({
|
|
display: 'flex',
|
|
flexDirection: isMe ? 'row-reverse' : 'row',
|
|
marginBottom: 8,
|
|
gap: 8
|
|
}));
|
|
|
|
const ChatAvatar = styled('div')(() => ({
|
|
minWidth: 42,
|
|
flexShrink: 0,
|
|
marginTop: 8,
|
|
}));
|
|
|
|
|
|
const ChatMessageWrap = styled(Box)<{ isMe: boolean }>(({ isMe }) => ({
|
|
flex: '1 1 auto',
|
|
minWidth: 0,
|
|
marginTop: 4,
|
|
marginBottom: 4,
|
|
display: 'flex',
|
|
justifyContent: isMe ? 'flex-end' : 'flex-start'
|
|
}));
|
|
|
|
const ChatMessage = styled(Box)(() => ({
|
|
maxWidth: '80%',
|
|
}));
|
|
export const ChatItem: FC<Props> = ({ isMe, message }) => {
|
|
return (
|
|
<ChatWrap isMe={isMe} alignItems="flex-start">
|
|
<ChatAvatar>
|
|
{isMe ? <FaceIcon style={{ fontSize: 42 }} color="primary"/> :
|
|
<SmartToyOutlinedIcon style={{ fontSize: 42 }} color="secondary"/>}
|
|
</ChatAvatar>
|
|
<ChatMessageWrap isMe={isMe}>
|
|
<ChatMessage sx={{ borderRadius: 2, p: 2, bgcolor: isMe ? 'primary.light' : 'secondary.light' }}>
|
|
{message}
|
|
</ChatMessage>
|
|
</ChatMessageWrap>
|
|
</ChatWrap>
|
|
);
|
|
};
|