File size: 1,374 Bytes
1a12d36
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>
  );
}