67 lines
1.8 KiB
TypeScript
67 lines
1.8 KiB
TypeScript
/*
|
|
* @Author : Eleanor Mao
|
|
* @Date : 2024-04-09 14:46:24
|
|
* @LastEditTime : 2024-04-09 14:46:24
|
|
*
|
|
*
|
|
*/
|
|
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';
|
|
import CircularProgress from '@mui/material/CircularProgress';
|
|
|
|
interface Props {
|
|
isMe: boolean;
|
|
message: string;
|
|
loading?: boolean;
|
|
}
|
|
|
|
|
|
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',
|
|
color: isMe ? 'rgba(0, 0, 0, 0.87)' : 'white'
|
|
}));
|
|
|
|
const ChatMessage = styled(Box)(() => ({
|
|
maxWidth: 'calc(100% - 50px)',
|
|
whiteSpace: 'pre-line'
|
|
}));
|
|
export const ChatItem: FC<Props> = ({ isMe, message, loading }) => {
|
|
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' }}>
|
|
{loading && <CircularProgress color="secondary" size={20}/>}
|
|
{!loading && message}
|
|
</ChatMessage>
|
|
</ChatMessageWrap>
|
|
</ChatWrap>
|
|
);
|
|
};
|