Hugging Face's logo

Spaces:
insight-ai
/
web
Running

App Files Community
web
File size: 2,322 Bytes 
1904e4c
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
 

import { useState, useEffect } from "react";

export const ThinkingAnimation = () => {
  const [dots, setDots] = useState(0);
  
  useEffect(() => {
    const interval = setInterval(() => {
      setDots((prev) => (prev + 1) % 4);
    }, 400);
    
    return () => clearInterval(interval);
  }, []);
  
  return (
    <div className="flex flex-col items-start gap-2 px-4 py-3">
      <div className="thinking-brain">
        <svg viewBox="0 0 24 24" width="24" height="24" className="thinking-brain-svg">
          <path d="M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-2.5 2.5h-5A2.5 2.5 0 0 1 2 19.5v-15A2.5 2.5 0 0 1 4.5 2h5Z" 
            className="fill-financial-accent/20 stroke-financial-accent stroke-[1.5]" />
          <path d="M12 4.5A2.5 2.5 0 0 1 14.5 2h5A2.5 2.5 0 0 1 22 4.5v15a2.5 2.5 0 0 1-2.5 2.5h-5A2.5 2.5 0 0 1 12 19.5v-15Z" 
            className="fill-financial-accent/10 stroke-financial-accent stroke-[1.5]" />
          <path d="M6 12h4" className="stroke-financial-accent stroke-[1.5]" />
          <path d="M14 12h4" className="stroke-financial-accent stroke-[1.5]" />
          <path d="M13.5 8h1" className="stroke-financial-accent stroke-[1.5]" />
          <path d="M16.5 8h1" className="stroke-financial-accent stroke-[1.5]" />
          <path d="M13.5 16h1" className="stroke-financial-accent stroke-[1.5]" />
          <path d="M16.5 16h1" className="stroke-financial-accent stroke-[1.5]" />
          <path d="M9.5 8h1" className="stroke-financial-accent stroke-[1.5]" />
          <path d="M6.5 8h1" className="stroke-financial-accent stroke-[1.5]" />
          <path d="M9.5 16h1" className="stroke-financial-accent stroke-[1.5]" />
          <path d="M6.5 16h1" className="stroke-financial-accent stroke-[1.5]" />
        </svg>
        <div className="thinking-waves">
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>
      <span className="text-sm font-medium text-muted-foreground flex items-center">
        Thinking
        <span className="thinking-dots-container ml-2">
          {Array(3).fill(0).map((_, i) => (
            <span 
              key={i} 
              className={`thinking-dot ${i <= dots ? 'thinking-dot-active' : ''}`}
            ></span>
          ))}
        </span>
      </span>
    </div>
  );
};