116 lines
3.1 KiB
TypeScript
116 lines
3.1 KiB
TypeScript
import React, { useRef } from 'react';
|
|
import { Box, Paper, Typography, Avatar, useMediaQuery, useTheme } from '@mui/material';
|
|
import type { Message as MessageType } from '../types/types';
|
|
|
|
interface MessageProps {
|
|
message: MessageType;
|
|
isLast?: boolean;
|
|
}
|
|
|
|
const Message: React.FC<MessageProps> = ({ message, isLast = false }) => {
|
|
const isUser = message.sender === 'user';
|
|
const theme = useTheme();
|
|
const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
|
|
const paperRef = useRef(null);
|
|
|
|
// 计算气泡的borderRadius
|
|
const borderRadius = isUser
|
|
? '18px 18px 4px 18px'
|
|
: '18px 18px 18px 4px';
|
|
|
|
return (
|
|
<Box
|
|
display="flex"
|
|
marginBottom={2}
|
|
justifyContent={isUser ? "flex-end" : "flex-start"}
|
|
alignItems="flex-end"
|
|
>
|
|
<Box
|
|
display="flex"
|
|
alignItems="flex-end"
|
|
maxWidth={isMobile ? "85%" : "70%"}
|
|
gap={1.5}
|
|
>
|
|
{!isUser && (
|
|
<Avatar
|
|
sx={{
|
|
width: 36,
|
|
height: 36,
|
|
bgcolor: theme.palette.primary.main,
|
|
boxShadow: theme.shadows[2],
|
|
transition: 'transform 0.2s',
|
|
'&:hover': {
|
|
transform: 'scale(1.05)',
|
|
}
|
|
}}
|
|
>
|
|
🤖
|
|
</Avatar>
|
|
)}
|
|
|
|
<Paper
|
|
ref={paperRef}
|
|
elevation={isLast ? 2 : 1}
|
|
sx={{
|
|
padding: 2,
|
|
backgroundColor: isUser
|
|
? theme.palette.primary.main
|
|
: theme.palette.background.default,
|
|
color: isUser ? 'white' : theme.palette.text.primary,
|
|
borderRadius: borderRadius,
|
|
position: 'relative',
|
|
transition: 'all 0.3s ease',
|
|
'&:hover': {
|
|
boxShadow: theme.shadows[isLast ? 4 : 2],
|
|
transform: 'translateY(-1px)',
|
|
}
|
|
}}
|
|
>
|
|
<div style={{ lineHeight: 1.6 }}>
|
|
{message.content.split('\n').map((line, index) => (
|
|
<React.Fragment key={index}>
|
|
{line}
|
|
{index < message.content.split('\n').length - 1 && <br />}
|
|
</React.Fragment>
|
|
))}
|
|
</div>
|
|
|
|
<Typography
|
|
variant="caption"
|
|
sx={{
|
|
display: 'block',
|
|
marginTop: 1,
|
|
opacity: 0.7,
|
|
fontSize: '0.75rem',
|
|
textAlign: 'right'
|
|
}}
|
|
>
|
|
{message.timestamp.toLocaleTimeString([], {
|
|
hour: '2-digit',
|
|
minute: '2-digit'
|
|
})}
|
|
</Typography>
|
|
</Paper>
|
|
|
|
{isUser && (
|
|
<Avatar
|
|
sx={{
|
|
width: 36,
|
|
height: 36,
|
|
bgcolor: theme.palette.primary.dark,
|
|
boxShadow: theme.shadows[2],
|
|
transition: 'transform 0.2s',
|
|
'&:hover': {
|
|
transform: 'scale(1.05)',
|
|
}
|
|
}}
|
|
>
|
|
👤
|
|
</Avatar>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default Message; |