oppy_google / frontend /src /components /ToolFeed.jsx
Luli Maruyama
pushed to hugging face
b040061
Raw History Blame Contribute Delete
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>
);
}