120 lines
4.4 KiB
JavaScript
120 lines
4.4 KiB
JavaScript
import PropTypes from 'prop-types';
|
|
import { useCallback, useEffect, useRef } from 'react';
|
|
|
|
// material-ui
|
|
import { Card, CardContent, Grid, Stack, Typography } from '@mui/material';
|
|
|
|
// project imports
|
|
import UserAvatar from './UserAvatar';
|
|
// import ChatMessageAction from './ChatMessageAction';
|
|
import IconButton from 'components/@extended/IconButton';
|
|
import { ThemeMode } from 'config';
|
|
|
|
// assets
|
|
import { EditOutlined } from '@ant-design/icons';
|
|
|
|
// ==============================|| CHAT MESSAGE HISTORY ||============================== //
|
|
|
|
const ChatHistory = ({ data, theme, user }) => {
|
|
// scroll to bottom when new message is sent or received
|
|
const wrapper = useRef(document.createElement('div'));
|
|
const el = wrapper.current;
|
|
const scrollToBottom = useCallback(() => {
|
|
el.scrollIntoView(false);
|
|
}, [el]);
|
|
|
|
useEffect(() => {
|
|
scrollToBottom();
|
|
}, [data.length, scrollToBottom]);
|
|
|
|
return (
|
|
<Grid container spacing={2.5} ref={wrapper}>
|
|
{data.map((history, index) => (
|
|
<Grid item xs={12} key={index}>
|
|
{history.from !== user.name ? (
|
|
<Stack spacing={1.25} direction="row">
|
|
<Grid container spacing={1} justifyContent="flex-end">
|
|
<Grid item xs={2} md={3} xl={4} />
|
|
|
|
<Grid item xs={10} md={9} xl={8}>
|
|
<Stack direction="row" justifyContent="flex-end" alignItems="flex-start">
|
|
{/* <ChatMessageAction index={index} /> */}
|
|
<IconButton size="small" color="secondary">
|
|
<EditOutlined />
|
|
</IconButton>
|
|
<Card
|
|
sx={{
|
|
display: 'inline-block',
|
|
float: 'right',
|
|
bgcolor: theme.palette.primary.main,
|
|
boxShadow: 'none',
|
|
ml: 1
|
|
}}
|
|
>
|
|
<CardContent sx={{ p: 1, pb: '8px !important', width: 'fit-content', ml: 'auto' }}>
|
|
<Grid container spacing={1}>
|
|
<Grid item xs={12}>
|
|
<Typography variant="h6" color={theme.palette.grey[0]} sx={{ overflowWrap: 'anywhere' }}>
|
|
{history.text}
|
|
</Typography>
|
|
</Grid>
|
|
</Grid>
|
|
</CardContent>
|
|
</Card>
|
|
</Stack>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<Typography align="right" variant="subtitle2" color="textSecondary">
|
|
{history.time}
|
|
</Typography>
|
|
</Grid>
|
|
</Grid>
|
|
<UserAvatar user={{ online_status: 'available', avatar: 'avatar-1.png', name: 'User 1' }} />
|
|
</Stack>
|
|
) : (
|
|
<Stack direction="row" spacing={1.25} alignItems="flext-start">
|
|
<UserAvatar user={{ online_status: user.online_status, avatar: user.avatar, name: user.name }} />
|
|
|
|
<Grid container>
|
|
<Grid item xs={12} sm={7}>
|
|
<Card
|
|
sx={{
|
|
display: 'inline-block',
|
|
float: 'left',
|
|
bgcolor: theme.palette.mode === ThemeMode.DARK ? 'background.background' : 'grey.0',
|
|
boxShadow: 'none'
|
|
}}
|
|
>
|
|
<CardContent sx={{ p: 1, pb: '8px !important' }}>
|
|
<Grid container spacing={1}>
|
|
<Grid item xs={12}>
|
|
<Typography variant="h6" color="textPrimary" sx={{ overflowWrap: 'anywhere' }}>
|
|
{history.text}
|
|
</Typography>
|
|
</Grid>
|
|
</Grid>
|
|
</CardContent>
|
|
</Card>
|
|
</Grid>
|
|
<Grid item xs={12} sx={{ mt: 1 }}>
|
|
<Typography align="left" variant="subtitle2" color="textSecondary">
|
|
{history.time}
|
|
</Typography>
|
|
</Grid>
|
|
</Grid>
|
|
</Stack>
|
|
)}
|
|
</Grid>
|
|
))}
|
|
</Grid>
|
|
);
|
|
};
|
|
|
|
ChatHistory.propTypes = {
|
|
data: PropTypes.array,
|
|
theme: PropTypes.object,
|
|
user: PropTypes.object
|
|
};
|
|
|
|
export default ChatHistory;
|