Kirill
47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
import type { ReactNode } from 'react'
|
|
import Box from '@mui/material/Box'
|
|
import Stack from '@mui/material/Stack'
|
|
import { alpha } from '@mui/material/styles'
|
|
|
|
type Author = 'admin' | 'user'
|
|
|
|
type Props = {
|
|
authorType: Author
|
|
avatar?: ReactNode
|
|
children: ReactNode
|
|
}
|
|
|
|
export function ChatMessageBubble({ authorType, avatar, children }: Props) {
|
|
const isAdmin = authorType === 'admin'
|
|
return (
|
|
<Stack
|
|
direction="row"
|
|
spacing={1}
|
|
sx={{
|
|
alignSelf: isAdmin ? 'flex-start' : 'flex-end',
|
|
maxWidth: '85%',
|
|
alignItems: 'flex-end',
|
|
}}
|
|
>
|
|
{isAdmin && avatar && <Box sx={{ flexShrink: 0, pb: 0.5 }}>{avatar}</Box>}
|
|
<Box
|
|
sx={{
|
|
p: 1.25,
|
|
borderRadius: 2,
|
|
border: 1,
|
|
borderColor: 'divider',
|
|
width: 'fit-content',
|
|
color: 'text.primary',
|
|
bgcolor: (theme) =>
|
|
isAdmin
|
|
? alpha(theme.palette.grey[500], theme.palette.mode === 'dark' ? 0.28 : 0.14)
|
|
: alpha(theme.palette.primary.main, theme.palette.mode === 'dark' ? 0.28 : 0.1),
|
|
}}
|
|
>
|
|
{children}
|
|
</Box>
|
|
{!isAdmin && avatar && <Box sx={{ flexShrink: 0, pb: 0.5 }}>{avatar}</Box>}
|
|
</Stack>
|
|
)
|
|
}
|