File size: 3,220 Bytes
7fcdb70 |
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 106 107 108 109 110 111 |
import React from 'react';
import { Card, CardContent, Box, Typography, CircularProgress } from '@mui/material';
import CableIcon from '@mui/icons-material/Cable';
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 ConnectionStepCardProps {
isConnecting: boolean;
}
export const ConnectionStepCard: React.FC<ConnectionStepCardProps> = ({ isConnecting }) => {
return (
<Card
elevation={0}
sx={{
backgroundColor: 'background.paper',
border: '2px solid',
borderColor: isConnecting ? 'primary.main' : 'success.main',
borderRadius: 1.5,
animation: isConnecting ? `${borderPulse} 2s ease-in-out infinite` : 'none',
position: 'relative',
overflow: 'hidden',
'&::before': isConnecting ? {
content: '""',
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
animation: `${backgroundPulse} 2s ease-in-out infinite`,
zIndex: 0,
} : {},
}}
>
<CardContent sx={{ p: 1.5, '&:last-child': { pb: 1.5 }, position: 'relative', zIndex: 1 }}>
{/* Header with spinner or check */}
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
<Box
sx={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
position: 'relative',
}}
>
{isConnecting ? (
<CircularProgress
size={32}
thickness={2.5}
sx={{
color: 'primary.main',
}}
/>
) : (
<CableIcon
sx={{
fontSize: 28,
color: 'success.main',
}}
/>
)}
</Box>
<Box sx={{ flex: 1, minWidth: 0 }}>
<Typography
sx={{
fontSize: '0.85rem',
fontWeight: 700,
color: isConnecting ? 'primary.main' : 'success.main',
lineHeight: 1.3,
}}
>
{isConnecting ? 'Starting FARA...' : 'Browser Ready'}
</Typography>
<Typography
sx={{
fontSize: '0.7rem',
color: 'text.secondary',
lineHeight: 1.2,
}}
>
{isConnecting ? 'Initializing browser environment' : 'Agent ready to execute tasks'}
</Typography>
</Box>
</Box>
</CardContent>
</Card>
);
};
|