Spaces:
Running
Running
File size: 3,201 Bytes
2c4ce17 |
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 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 |
import { useState, useEffect } from 'react'
import { Shield, Zap, Eye, Volume2, Video, Search, Lightbulb, CheckCircle, AlertCircle } from 'lucide-react'
const agentIcons = {
'text-analyzer': Search,
'image-processor': Eye,
'audio-guard': Volume2,
'video-shield': Video,
'security-auditor': Shield,
'creative-solver': Lightbulb
}
const statusColors = {
active: 'text-green-500',
monitoring: 'text-yellow-500',
idle: 'text-gray-500'
}
export default function AgentSelector({ onAgentSelect, selectedAgent }) {
const [agents, setAgents] = useState([])
const [loading, setLoading] = useState(true)
useEffect(() => {
fetchAgents()
}, [])
const fetchAgents = async () => {
try {
const response = await fetch('/api/agents/status')
const data = await response.json()
setAgents(data.agents)
} catch (error) {
console.error('Failed to fetch agents:', error)
} finally {
setLoading(false)
}
}
if (loading) {
return (
<div className="card">
<div className="animate-pulse space-y-4">
<div className="h-4 bg-dark-300 dark:bg-dark-600 rounded w-3/4"></div>
<div className="h-4 bg-dark-300 dark:bg-dark-600 rounded w-1/2"></div>
</div>
</div>
)
}
return (
<div className="card">
<h2 className="text-2xl font-bold mb-6 flex items-center">
<Zap className="mr-2 h-6 w-6 text-primary-500" />
Agent Selection
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{agents.map((agent) => {
const Icon = agentIcons[agent.id] || Shield
return (
<button
key={agent.id}
onClick={() => onAgentSelect(agent)}
className={`p-4 rounded-lg border-2 transition-all duration-200 text-left ${
selectedAgent?.id === agent.id
? 'border-primary-500 bg-primary-50 dark:bg-primary-900/20'
: 'border-dark-300 dark:border-dark-600 hover:border-dark-400 dark:hover:border-dark-500'
}`}
>
<div className="flex items-start justify-between mb-2">
<div className="flex items-center space-x-3">
<Icon className="h-5 w-5 text-primary-500" />
<h3 className="font-semibold">{agent.name}</h3>
</div>
{agent.status === 'active' ? (
<CheckCircle className={`h-4 w-4 ${statusColors.active}`} />
) : (
<AlertCircle className={`h-4 w-4 ${statusColors.monitoring}`} />
)}
</div>
<p className="text-sm text-dark-600 dark:text-dark-400 mb-2">{agent.type}</p>
<div className="flex flex-wrap gap-1">
{agent.capabilities.slice(0, 2).map((cap, idx) => (
<span
key={idx}
className="text-xs px-2 py-1 bg-dark-100 dark:bg-dark-700 rounded-full"
>
{cap}
</span>
))}
</div>
</button>
)
})}
</div>
</div>
)
} |