File size: 1,326 Bytes
79b2fcc
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
import { Box, Typography } from '@mui/material';

/** Pulsing dots shown while the agent is processing. */
export default function ThinkingIndicator() {
  return (
    <Box sx={{ pt: 0.75 }}>
      <Typography
        variant="caption"
        sx={{
          fontWeight: 700,
          fontSize: '0.72rem',
          color: 'var(--muted-text)',
          textTransform: 'uppercase',
          letterSpacing: '0.04em',
          display: 'flex',
          alignItems: 'center',
          gap: 0.75,
        }}
      >
        Thinking
        <Box
          component="span"
          sx={{
            display: 'inline-flex',
            gap: '3px',
            '& span': {
              width: 4,
              height: 4,
              borderRadius: '50%',
              bgcolor: 'primary.main',
              animation: 'dotPulse 1.4s ease-in-out infinite',
            },
            '& span:nth-of-type(2)': { animationDelay: '0.2s' },
            '& span:nth-of-type(3)': { animationDelay: '0.4s' },
            '@keyframes dotPulse': {
              '0%, 80%, 100%': { opacity: 0.25, transform: 'scale(0.8)' },
              '40%': { opacity: 1, transform: 'scale(1)' },
            },
          }}
        >
          <span />
          <span />
          <span />
        </Box>
      </Typography>
    </Box>
  );
}