Spaces:
Sleeping
Sleeping
File size: 3,986 Bytes
b0b150b |
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 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 |
import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import {
Box,
FormControl,
Select,
MenuItem,
Typography,
Chip,
Avatar,
IconButton,
Tooltip
} from '@mui/material';
import {
Diamond as DiamondIcon,
SwapHoriz as SwitchIcon,
Add as AddIcon
} from '@mui/icons-material';
import { useAgents } from '../contexts/AgentContext';
const AgentSwitcher = ({ currentAgentName, onSwitch }) => {
const navigate = useNavigate();
const { agents, loading } = useAgents();
// Filter only ready agents
const readyAgents = agents.filter(a => a.status === 'ready');
const handleChange = (event) => {
const newAgentName = event.target.value;
if (newAgentName === '__create__') {
navigate('/create');
} else if (newAgentName !== currentAgentName) {
if (onSwitch) {
onSwitch(newAgentName);
} else {
navigate(`/chat/${newAgentName}`);
}
}
};
const getStatusColor = (status) => {
switch (status) {
case 'ready': return 'success';
case 'failed': return 'error';
case 'compiling': return 'warning';
default: return 'default';
}
};
if (loading) {
return null;
}
return (
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<Tooltip title="Switch Agent">
<SwitchIcon sx={{ color: 'text.secondary' }} />
</Tooltip>
<FormControl size="small" sx={{ minWidth: 200 }}>
<Select
value={readyAgents.some(a => a.name === currentAgentName) ? currentAgentName : ''}
onChange={handleChange}
displayEmpty
renderValue={(selected) => {
if (!selected) {
return <Typography variant="body2">{currentAgentName || 'Select Agent'}</Typography>;
}
return selected.replace(/_/g, ' ');
}}
sx={{
bgcolor: 'rgba(255,255,255,0.05)',
'& .MuiSelect-select': {
display: 'flex',
alignItems: 'center',
gap: 1
}
}}
>
{readyAgents.map((agent) => (
<MenuItem key={agent.name} value={agent.name}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<Avatar sx={{ width: 24, height: 24, bgcolor: 'primary.main' }}>
<DiamondIcon sx={{ fontSize: 14 }} />
</Avatar>
<Typography variant="body2">
{agent.name.replace(/_/g, ' ')}
</Typography>
<Chip
label={agent.status}
size="small"
color={getStatusColor(agent.status)}
sx={{ height: 18, fontSize: '0.65rem' }}
/>
</Box>
</MenuItem>
))}
<MenuItem value="__create__">
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, color: 'primary.main' }}>
<AddIcon sx={{ fontSize: 20 }} />
<Typography variant="body2">Create New Agent</Typography>
</Box>
</MenuItem>
</Select>
</FormControl>
</Box>
);
};
export default AgentSwitcher;
|