59 lines
1.7 KiB
TypeScript
59 lines
1.7 KiB
TypeScript
import { Box } from '@mui/material';
|
|
import { useTheme } from '@mui/material/styles';
|
|
import { SxProps, Theme } from '@mui/material';
|
|
import React from 'react';
|
|
|
|
interface ChatBubbleProps {
|
|
isUser: boolean;
|
|
isFullWidth?: boolean;
|
|
children: React.ReactNode;
|
|
sx?: SxProps<Theme>;
|
|
}
|
|
|
|
function ChatBubble({ isUser, isFullWidth, children, sx }: ChatBubbleProps) {
|
|
const theme = useTheme();
|
|
|
|
const userStyle = {
|
|
backgroundColor: theme.palette.background.default, // Warm Gray (#D3CDBF)
|
|
border: `1px solid ${theme.palette.custom.highlight}`, // Golden Ochre (#D4A017)
|
|
borderRadius: '16px 16px 0 16px', // Rounded, flat bottom-right for user
|
|
padding: theme.spacing(1, 2),
|
|
maxWidth: isFullWidth ? '100%' : '70%',
|
|
minWidth: '70%',
|
|
alignSelf: 'flex-end', // Right-aligned for user
|
|
color: theme.palette.primary.main, // Midnight Blue (#1A2536) for text
|
|
'& > *': {
|
|
color: 'inherit', // Children inherit Midnight Blue unless overridden
|
|
},
|
|
};
|
|
|
|
const assistantStyle = {
|
|
backgroundColor: theme.palette.primary.main, // Midnight Blue (#1A2536)
|
|
border: `1px solid ${theme.palette.secondary.main}`, // Dusty Teal (#4A7A7D)
|
|
borderRadius: '16px 16px 16px 0', // Rounded, flat bottom-left for assistant
|
|
padding: theme.spacing(1, 2),
|
|
maxWidth: isFullWidth ? '100%' : '70%',
|
|
minWidth: '70%',
|
|
alignSelf: 'flex-start', // Left-aligned for assistant
|
|
color: theme.palette.primary.contrastText, // Warm Gray (#D3CDBF) for text
|
|
'& > *': {
|
|
color: 'inherit', // Children inherit Warm Gray unless overridden
|
|
},
|
|
};
|
|
|
|
return (
|
|
<Box sx={{ ...(isUser ? userStyle : assistantStyle), ...sx }}>
|
|
{children}
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
export type {
|
|
ChatBubbleProps
|
|
};
|
|
|
|
export {
|
|
ChatBubble
|
|
};
|
|
|