|
|
import React from 'react';
|
|
|
import { Card, CardContent, Box, Typography, CircularProgress } from '@mui/material';
|
|
|
import { keyframes } from '@mui/system';
|
|
|
|
|
|
|
|
|
const borderPulse = keyframes`
|
|
|
0%, 100% {
|
|
|
border-color: rgba(79, 134, 198, 0.4);
|
|
|
box-shadow: 0 2px 8px rgba(79, 134, 198, 0.15);
|
|
|
}
|
|
|
50% {
|
|
|
border-color: rgba(79, 134, 198, 0.8);
|
|
|
box-shadow: 0 2px 12px rgba(79, 134, 198, 0.3);
|
|
|
}
|
|
|
`;
|
|
|
|
|
|
|
|
|
const backgroundPulse = keyframes`
|
|
|
0%, 100% {
|
|
|
background-color: rgba(79, 134, 198, 0.03);
|
|
|
}
|
|
|
50% {
|
|
|
background-color: rgba(79, 134, 198, 0.08);
|
|
|
}
|
|
|
`;
|
|
|
|
|
|
interface ThinkingStepCardProps {
|
|
|
isActive?: boolean;
|
|
|
}
|
|
|
|
|
|
export const ThinkingStepCard: React.FC<ThinkingStepCardProps> = ({ isActive = false }) => {
|
|
|
|
|
|
return (
|
|
|
<Card
|
|
|
elevation={0}
|
|
|
sx={{
|
|
|
backgroundColor: 'background.paper',
|
|
|
border: '1px solid',
|
|
|
borderColor: (theme) => `${isActive ? theme.palette.primary.main : theme.palette.divider} !important`,
|
|
|
borderRadius: 1.5,
|
|
|
animation: isActive ? `${borderPulse} 2s ease-in-out infinite` : 'none',
|
|
|
position: 'relative',
|
|
|
overflow: 'hidden',
|
|
|
boxShadow: isActive ? (theme) => `0 2px 8px ${theme.palette.mode === 'dark' ? 'rgba(79, 134, 198, 0.3)' : 'rgba(79, 134, 198, 0.2)'}` : 'none',
|
|
|
transition: 'all 0.2s ease',
|
|
|
'&::before': {
|
|
|
content: '""',
|
|
|
position: 'absolute',
|
|
|
top: 0,
|
|
|
left: 0,
|
|
|
right: 0,
|
|
|
bottom: 0,
|
|
|
animation: isActive ? `${backgroundPulse} 2s ease-in-out infinite` : 'none',
|
|
|
zIndex: 0,
|
|
|
},
|
|
|
}}
|
|
|
>
|
|
|
<CardContent sx={{ p: 1.5, '&:last-child': { pb: 1.5 }, position: 'relative', zIndex: 1 }}>
|
|
|
{/* Header with spinner */}
|
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
|
|
|
<Box
|
|
|
sx={{
|
|
|
display: 'flex',
|
|
|
alignItems: 'center',
|
|
|
justifyContent: 'center',
|
|
|
}}
|
|
|
>
|
|
|
{/* Spinner circulaire */}
|
|
|
<CircularProgress
|
|
|
size={32}
|
|
|
thickness={3.5}
|
|
|
sx={{
|
|
|
color: 'primary.main',
|
|
|
}}
|
|
|
/>
|
|
|
</Box>
|
|
|
|
|
|
<Box sx={{ flex: 1, minWidth: 0 }}>
|
|
|
<Typography
|
|
|
sx={{
|
|
|
fontSize: '0.85rem',
|
|
|
fontWeight: 700,
|
|
|
color: 'primary.main',
|
|
|
lineHeight: 1.3,
|
|
|
}}
|
|
|
>
|
|
|
Agent
|
|
|
</Typography>
|
|
|
<Typography
|
|
|
sx={{
|
|
|
fontSize: '0.7rem',
|
|
|
color: 'text.secondary',
|
|
|
lineHeight: 1.2,
|
|
|
fontStyle: 'italic',
|
|
|
}}
|
|
|
>
|
|
|
Thinking...
|
|
|
</Typography>
|
|
|
</Box>
|
|
|
</Box>
|
|
|
</CardContent>
|
|
|
</Card>
|
|
|
);
|
|
|
};
|
|
|
|
