Spaces:
Runtime error
Runtime error
Download frontend/src/components/ToolFeed.jsx from luli331/oppy_google: direct link, hf CLI and curl.
- Browser
- Download file 2.62 kB
-
https://huggingface.co/spaces/luli331/oppy_google/resolve/main/frontend/src/components/ToolFeed.jsx
- Command line
-
hf download hf://spaces/luli331/oppy_google/frontend/src/components/ToolFeed.jsx
-
curl -L -o ToolFeed.jsx https://huggingface.co/spaces/luli331/oppy_google/resolve/main/frontend/src/components/ToolFeed.jsx
2.62 kB
| const STATUS_ICONS = { | |
| running: '\u25CF', | |
| done: '\u2713', | |
| waiting: '\u25CB', | |
| }; | |
| const PROJECT_COLORS = { | |
| school: '#00FF88', | |
| company: '#FF4444', | |
| startup: '#FF8800', | |
| }; | |
| export default function ToolFeed({ toolCalls }) { | |
| if (!toolCalls || toolCalls.length === 0) { | |
| return ( | |
| <div style={{ | |
| background: 'var(--card-bg)', | |
| padding: '20px', | |
| borderTop: '1px solid var(--border)', | |
| }}> | |
| <h4 style={{ fontSize: '11px', color: 'var(--text-dim)', letterSpacing: '2px', marginBottom: '8px' }}> | |
| TOOL FEED | |
| </h4> | |
| <p style={{ fontSize: '12px', color: 'var(--text-dim)' }}> | |
| En attente du scan... | |
| </p> | |
| </div> | |
| ); | |
| } | |
| return ( | |
| <div style={{ | |
| background: 'var(--card-bg)', | |
| padding: '20px', | |
| borderTop: '1px solid var(--border)', | |
| maxHeight: '220px', | |
| overflowY: 'auto', | |
| }}> | |
| <h4 style={{ fontSize: '11px', color: 'var(--text-dim)', letterSpacing: '2px', marginBottom: '12px' }}> | |
| TOOL FEED | |
| </h4> | |
| {toolCalls.map((tc, i) => ( | |
| <div | |
| key={i} | |
| style={{ | |
| display: 'flex', | |
| alignItems: 'center', | |
| gap: '12px', | |
| padding: '6px 0', | |
| fontSize: '13px', | |
| animation: 'slideIn 0.3s ease-out', | |
| animationDelay: `${i * 0.1}s`, | |
| animationFillMode: 'both', | |
| }} | |
| > | |
| <span style={{ | |
| color: tc.status === 'done' ? '#00FF88' : tc.status === 'running' ? '#FF8800' : '#666', | |
| minWidth: '14px', | |
| }}> | |
| {STATUS_ICONS[tc.status] || STATUS_ICONS.waiting} | |
| </span> | |
| <span style={{ color: '#fff', minWidth: '180px', fontSize: '12px' }}> | |
| {tc.tool}(<span style={{ color: PROJECT_COLORS[tc.project] || '#888' }}>{tc.project}</span>) | |
| </span> | |
| <div style={{ | |
| flex: 1, | |
| height: '4px', | |
| background: '#222', | |
| borderRadius: '2px', | |
| overflow: 'hidden', | |
| }}> | |
| <div style={{ | |
| width: tc.status === 'done' ? '100%' : tc.status === 'running' ? '60%' : '0%', | |
| height: '100%', | |
| background: PROJECT_COLORS[tc.project] || 'var(--green)', | |
| transition: 'width 0.5s ease', | |
| }} /> | |
| </div> | |
| <span style={{ fontSize: '11px', color: 'var(--text-dim)', minWidth: '40px', textAlign: 'right' }}> | |
| {tc.status === 'done' ? 'done' : tc.status === 'running' ? '...' : 'wait'} | |
| </span> | |
| </div> | |
| ))} | |
| </div> | |
| ); | |
| } | |