Spaces:
Running
Running
File size: 2,927 Bytes
67b042f 09644e5 67b042f 09644e5 67b042f 26f5120 67b042f 26f5120 67b042f 26f5120 67b042f 26f5120 67b042f 26f5120 67b042f 09644e5 67b042f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 |
import React from 'react';
import { Card, CardContent, Box, Typography, CircularProgress } from '@mui/material';
import { keyframes } from '@mui/system';
// Border pulse animation
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);
}
`;
// Background pulse animation
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>
);
};
|