Hugging Face's logo

Spaces:
smolagents
/
computer-use-agent
Running

App Files Community
2
computer-use-agent
File size: 1,184 Bytes 
304e233
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
 
import React from 'react';

interface ConnectionStatusProps {
  isConnected: boolean;
}

export const ConnectionStatus: React.FC<ConnectionStatusProps> = ({ isConnected }) => {
  return (
    <div style={{
      display: 'flex',
      alignItems: 'center',
      gap: '8px',
      backgroundColor: 'rgba(255, 255, 255, 0.2)',
      padding: '8px 16px',
      borderRadius: '20px',
      backdropFilter: 'blur(10px)',
      border: '1px solid rgba(255, 255, 255, 0.3)'
    }}>
      <div style={{
        width: '8px',
        height: '8px',
        borderRadius: '50%',
        backgroundColor: isConnected ? '#10b981' : '#ef4444',
        boxShadow: isConnected ? '0 0 8px #10b981' : '0 0 8px #ef4444',
        animation: isConnected ? 'pulse 2s infinite' : 'none'
      }}></div>
      <div style={{ display: 'flex', flexDirection: 'column' }}>
        <span className="text-xs font-semibold text-white" style={{ lineHeight: '1.2' }}>
          {isConnected ? 'Connected' : 'Disconnected'}
        </span>
        <span className="text-xs text-white" style={{ opacity: 0.7, fontSize: '10px', lineHeight: '1.2' }}>
          WebSocket
        </span>
      </div>
    </div>
  );
};