HyperCluster/Fara-BrowserUse

1import React from 'react';
2import { Box, CircularProgress, Typography } from '@mui/material';
3
4interface ProcessingIndicatorProps {
5  isAgentProcessing: boolean;
6}
7
8export const ProcessingIndicator: React.FC<ProcessingIndicatorProps> = ({ isAgentProcessing }) => {
9  if (!isAgentProcessing) return null;
10
11  return (
12    <Box
13      sx={{
14        display: 'flex',
15        alignItems: 'center',
16        gap: 2,
17        backgroundColor: 'rgba(255, 255, 255, 0.9)',
18        px: 2,
19        py: 1,
20        borderRadius: 2,
21        backdropFilter: 'blur(10px)',
22        border: '1px solid rgba(0, 0, 0, 0.1)',
23      }}
24    >
25      <CircularProgress size={20} thickness={4} />
26      <Typography variant="body2" sx={{ fontWeight: 600, color: 'text.primary' }}>
27        Agent is running...
28      </Typography>
29    </Box>
30  );
31};
32