zhaoxi
f3a92a793e
当前阶段只保留regulatory+consciousness两个系统节点，control_node代码保留但不再实例化。 系统节点新增display_name字段支持自定义显示名称，前端新增人设管理Tab支持模板CRUD。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
358 lines
22 KiB
TypeScript
358 lines
22 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import apiClient from '../../api/client';
|
|
import { Save, Plus, Edit2, Trash2, X, Bot, Loader2, Users } from 'lucide-react';
|
|
import type { Provider } from '../../types';
|
|
|
|
interface WorkerIndividual {
|
|
agent_id: string;
|
|
agent_name: string;
|
|
agent_type: string;
|
|
description?: string;
|
|
provider_title: string;
|
|
model_id: string;
|
|
system_prompt?: string;
|
|
output_template?: string;
|
|
bound_skill?: string;
|
|
workspace?: string;
|
|
tools?: string;
|
|
}
|
|
|
|
export function WorkerIndividualSettings() {
|
|
const { t } = useTranslation();
|
|
const [providers, setProviders] = useState<Provider[]>([]);
|
|
const [workers, setWorkers] = useState<WorkerIndividual[]>([]);
|
|
const [systemNodes, setSystemNodes] = useState<any[]>([]);
|
|
const [availableSkills, setAvailableSkills] = useState<string[]>([]);
|
|
const [availableTools, setAvailableTools] = useState<string[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState('');
|
|
const [isEditing, setIsEditing] = useState(false);
|
|
const [editData, setEditData] = useState<Partial<WorkerIndividual>>({});
|
|
const [isNew, setIsNew] = useState(false);
|
|
const [modalMessage, setModalMessage] = useState('');
|
|
const [submitLoading, setSubmitLoading] = useState(false);
|
|
|
|
const fetchData = async () => {
|
|
setLoading(true);
|
|
try {
|
|
const [provRes, workRes, sysRes, toolsRes, skillsRes] = await Promise.all([
|
|
apiClient.get('/api/v1/provider/list'),
|
|
apiClient.get('/api/v1/agent/worker'),
|
|
apiClient.get('/api/v1/agent'),
|
|
apiClient.get('/api/v1/resource/tool'),
|
|
apiClient.get('/api/v1/resource/skill')
|
|
]);
|
|
setProviders(Object.values(provRes.data.provider_list || {}));
|
|
setWorkers(workRes.data.workers || []);
|
|
setAvailableTools(toolsRes.data.tools || []);
|
|
setAvailableSkills(Object.keys(skillsRes.data.skills || {}));
|
|
|
|
const providersList = Object.values(provRes.data.provider_list || {}) as Provider[];
|
|
const defaultProvider = providersList.length > 0 ? providersList[0].provider_title : '';
|
|
const sysNodesData = sysRes.data.system_nodes || [];
|
|
const defaultSysNodes = ['regulatory_node', 'consciousness_node'];
|
|
|
|
setSystemNodes(defaultSysNodes.map(nodeName => {
|
|
const found = sysNodesData.find((n: any) => n.node_name === nodeName);
|
|
return {
|
|
agent_id: nodeName, agent_name: nodeName, agent_type: 'System Node',
|
|
display_name: found?.display_name || '',
|
|
provider_title: found?.provider_title || defaultProvider,
|
|
model_id: found?.model_id || '',
|
|
tools: found?.tools ? JSON.stringify(found.tools) : '[]',
|
|
custom_system_prompt: found?.custom_system_prompt || '',
|
|
is_system: true
|
|
};
|
|
}));
|
|
} catch (err: any) {
|
|
setError(t('agent.loadFailed'));
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => { fetchData(); }, []);
|
|
|
|
const handleEdit = (worker: any) => {
|
|
setEditData({
|
|
...worker,
|
|
output_template: typeof worker.output_template === 'string' ? worker.output_template : JSON.stringify(worker.output_template || {}),
|
|
bound_skill: typeof worker.bound_skill === 'string' ? worker.bound_skill : JSON.stringify(worker.bound_skill || {}),
|
|
workspace: typeof worker.workspace === 'string' ? worker.workspace : JSON.stringify(worker.workspace || []),
|
|
tools: typeof worker.tools === 'string' ? worker.tools : JSON.stringify(worker.tools || [])
|
|
});
|
|
setIsNew(false);
|
|
setIsEditing(true);
|
|
setModalMessage('');
|
|
};
|
|
|
|
const handleAddNew = () => {
|
|
setEditData({ agent_name: '', agent_type: 'ordinary_individual', description: '',
|
|
provider_title: providers.length > 0 ? providers[0].provider_title : '', model_id: '',
|
|
system_prompt: '', output_template: '{}', bound_skill: '{}', workspace: '[]', tools: '[]' });
|
|
setIsNew(true);
|
|
setIsEditing(true);
|
|
setModalMessage('');
|
|
};
|
|
|
|
const handleDelete = async (agent_id: string) => {
|
|
if (!confirm(t('agent.deleteWorkerConfirm'))) return;
|
|
try { await apiClient.delete(`/api/v1/agent/worker/${agent_id}`); fetchData(); } catch { alert(t('common.deleteFailed')); }
|
|
};
|
|
|
|
const handleModalSave = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setModalMessage('');
|
|
setSubmitLoading(true);
|
|
try {
|
|
if ((editData as any).is_system) {
|
|
await apiClient.post('/api/v1/agent', {
|
|
individual_name: editData.agent_name,
|
|
provider_title: editData.provider_title,
|
|
model_id: editData.model_id,
|
|
tools: JSON.parse(editData.tools || '[]'),
|
|
custom_system_prompt: (editData as any).custom_system_prompt || null,
|
|
display_name: (editData as any).display_name || null
|
|
});
|
|
} else {
|
|
const payload = {
|
|
...editData,
|
|
output_template: JSON.parse(editData.output_template || '{}'),
|
|
bound_skill: JSON.parse(editData.bound_skill || '{}'),
|
|
workspace: JSON.parse(editData.workspace || '[]'),
|
|
tools: JSON.parse(editData.tools || '[]')
|
|
};
|
|
if (isNew) await apiClient.post('/api/v1/agent/worker', payload);
|
|
else await apiClient.put(`/api/v1/agent/worker/${editData.agent_id}`, payload);
|
|
}
|
|
setIsEditing(false);
|
|
fetchData();
|
|
} catch (err: any) {
|
|
setModalMessage(err.response?.data?.detail || err.message || t('common.saveFailed'));
|
|
} finally {
|
|
setSubmitLoading(false);
|
|
}
|
|
};
|
|
|
|
const getTypeBadge = (type: string, isSystem?: boolean) => {
|
|
if (isSystem) return <span className="px-2 py-0.5 rounded-md text-[10px] font-bold bg-accent-light text-accent uppercase tracking-wider">{t('agent.system')}</span>;
|
|
const colors: Record<string, string> = {
|
|
ordinary_individual: 'bg-bg-secondary text-text-muted',
|
|
skill_individual: 'bg-success-bg text-success',
|
|
special_individual: 'bg-warning-bg text-warning',
|
|
};
|
|
return <span className={`px-2 py-0.5 rounded-md text-[10px] font-medium ${colors[type] || colors.ordinary_individual}`}>{t(`agent.type.${type}`, type.replace('_', ' '))}</span>;
|
|
};
|
|
|
|
return (
|
|
<div className="max-w-5xl space-y-6">
|
|
<div className="flex justify-between items-end">
|
|
<div>
|
|
<h1 className="text-lg font-bold text-text-primary">{t('agent.individual')}</h1>
|
|
<p className="text-sm text-text-muted mt-0.5">{t('agent.individualDesc')}</p>
|
|
</div>
|
|
<button onClick={handleAddNew} className="flex items-center gap-2 px-4 py-2.5 bg-accent text-white rounded-xl hover:bg-accent-hover transition-all shadow-lg shadow-accent/15 text-sm font-medium">
|
|
<Plus size={14} /> {t('agent.addWorker')}
|
|
</button>
|
|
</div>
|
|
|
|
{error && <div className="text-sm text-danger bg-danger-bg border border-danger/20 rounded-xl p-3">{error}</div>}
|
|
|
|
<div className="bg-bg-card rounded-2xl border border-border-primary shadow-sm overflow-hidden">
|
|
{loading ? (
|
|
<div className="flex flex-col items-center justify-center py-12 text-text-muted">
|
|
<Loader2 size={24} className="animate-spin mb-3" />
|
|
<span className="text-sm">{t('common.loading')}</span>
|
|
</div>
|
|
) : (workers.length === 0 && systemNodes.length === 0) ? (
|
|
<div className="flex flex-col items-center justify-center py-12 text-text-muted">
|
|
<Users size={32} className="mb-3 opacity-40" />
|
|
<span className="text-sm">{t('agent.noIndividuals')}</span>
|
|
</div>
|
|
) : (
|
|
<table className="w-full text-left text-sm">
|
|
<thead>
|
|
<tr className="bg-bg-secondary border-b border-border-primary text-text-muted text-xs uppercase tracking-wider">
|
|
<th className="px-5 py-3 font-semibold">{t('agent.name')}</th>
|
|
<th className="px-5 py-3 font-semibold">{t('agent.type')}</th>
|
|
<th className="px-5 py-3 font-semibold">{t('agent.providerModel')}</th>
|
|
<th className="px-5 py-3 font-semibold text-right">{t('common.actions')}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-border-secondary">
|
|
{systemNodes.map((w) => (
|
|
<tr key={w.agent_id} className="bg-bg-secondary/50 hover:bg-bg-hover transition-colors">
|
|
<td className="px-5 py-3">
|
|
<div className="flex items-center gap-2.5">
|
|
<div className="w-7 h-7 rounded-lg bg-accent-light flex items-center justify-center">
|
|
<Bot size={14} className="text-accent" />
|
|
</div>
|
|
<div className="flex flex-col">
|
|
<span className="font-medium text-text-primary text-xs">{w.display_name || w.agent_name}</span>
|
|
{w.display_name && <span className="text-[10px] text-text-muted">{w.agent_name}</span>}
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td className="px-5 py-3">{getTypeBadge(w.agent_type, true)}</td>
|
|
<td className="px-5 py-3 text-xs text-text-muted">{w.provider_title} / {w.model_id}</td>
|
|
<td className="px-5 py-3 text-right">
|
|
<button onClick={() => handleEdit(w)} className="p-1.5 text-text-muted hover:text-accent hover:bg-accent-light rounded-lg transition-all"><Edit2 size={14} /></button>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
{workers.map((w) => (
|
|
<tr key={w.agent_id} className="hover:bg-bg-hover transition-colors">
|
|
<td className="px-5 py-3">
|
|
<div className="flex items-center gap-2.5">
|
|
<div className="w-7 h-7 rounded-lg bg-bg-secondary border border-border-primary flex items-center justify-center">
|
|
<Bot size={14} className="text-text-muted" />
|
|
</div>
|
|
<span className="font-medium text-text-primary text-xs">{w.agent_name}</span>
|
|
</div>
|
|
</td>
|
|
<td className="px-5 py-3">{getTypeBadge(w.agent_type)}</td>
|
|
<td className="px-5 py-3 text-xs text-text-muted">{w.provider_title} / {w.model_id}</td>
|
|
<td className="px-5 py-3 text-right">
|
|
<button onClick={() => handleEdit(w)} className="p-1.5 text-text-muted hover:text-accent hover:bg-accent-light rounded-lg transition-all mr-0.5"><Edit2 size={14} /></button>
|
|
<button onClick={() => handleDelete(w.agent_id)} className="p-1.5 text-text-muted hover:text-danger hover:bg-danger-bg rounded-lg transition-all"><Trash2 size={14} /></button>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
)}
|
|
</div>
|
|
|
|
{/* Modal */}
|
|
{isEditing && (
|
|
<div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
|
|
<div className="bg-bg-card rounded-2xl shadow-2xl w-full max-w-2xl max-h-[90vh] overflow-y-auto border border-border-primary animate-fade-in-scale">
|
|
<div className="flex justify-between items-center p-5 border-b border-border-primary sticky top-0 bg-bg-card z-10">
|
|
<h2 className="text-base font-bold text-text-primary">{(editData as any).is_system ? t('agent.editSystemNode') : (isNew ? t('agent.createWorker') : t('agent.editWorker'))}</h2>
|
|
<button onClick={() => setIsEditing(false)} className="p-1 text-text-muted hover:text-text-primary rounded-lg transition-colors"><X size={20} /></button>
|
|
</div>
|
|
<form onSubmit={handleModalSave} className="p-5 space-y-4">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-xs font-semibold text-text-secondary mb-1.5 uppercase tracking-wider">{(editData as any).is_system ? t('agent.displayName') : t('agent.name')}</label>
|
|
<input type="text" required={!(editData as any).is_system} value={(editData as any).is_system ? ((editData as any).display_name || '') : (editData.agent_name || '')} onChange={(e) => {
|
|
if ((editData as any).is_system) setEditData({...editData, display_name: e.target.value} as any);
|
|
else setEditData({...editData, agent_name: e.target.value});
|
|
}}
|
|
placeholder={(editData as any).is_system ? editData.agent_name : ''}
|
|
className="w-full px-3 py-2 bg-bg-input border border-border-primary rounded-xl text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-accent/20 focus:border-accent" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-semibold text-text-secondary mb-1.5 uppercase tracking-wider">{t('agent.type')}</label>
|
|
<select value={editData.agent_type || 'ordinary_individual'} onChange={(e) => setEditData({...editData, agent_type: e.target.value})}
|
|
className="w-full px-3 py-2 bg-bg-input border border-border-primary rounded-xl text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-accent/20 focus:border-accent" disabled={(editData as any).is_system}>
|
|
<option value="ordinary_individual">{t('agent.type.ordinary_individual')}</option>
|
|
<option value="skill_individual">{t('agent.type.skill_individual')}</option>
|
|
<option value="special_individual">{t('agent.type.special_individual')}</option>
|
|
{(editData as any).is_system && <option value="System Node">{t('agent.system')}</option>}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-xs font-semibold text-text-secondary mb-1.5 uppercase tracking-wider">{t('agent.provider')}</label>
|
|
<select value={editData.provider_title || ''} onChange={(e) => setEditData({...editData, provider_title: e.target.value, model_id: ''})} required
|
|
className="w-full px-3 py-2 bg-bg-input border border-border-primary rounded-xl text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-accent/20 focus:border-accent">
|
|
<option value="" disabled>{t('common.select')}</option>
|
|
{providers.map((p) => (<option key={p.provider_title} value={p.provider_title}>{p.provider_title}</option>))}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-semibold text-text-secondary mb-1.5 uppercase tracking-wider">{t('agent.model')}</label>
|
|
{(() => {
|
|
const sp = providers.find(p => p.provider_title === editData.provider_title);
|
|
const models = sp?.provider_models || [];
|
|
return (
|
|
<select value={editData.model_id || ''} onChange={(e) => setEditData({...editData, model_id: e.target.value})} required
|
|
className="w-full px-3 py-2 bg-bg-input border border-border-primary rounded-xl text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-accent/20 focus:border-accent">
|
|
<option value="" disabled>{t('common.select')}</option>
|
|
{models.map(m => <option key={m} value={m}>{m}</option>)}
|
|
</select>
|
|
);
|
|
})()}
|
|
</div>
|
|
</div>
|
|
{(editData as any).is_system && (
|
|
<div>
|
|
<label className="block text-xs font-semibold text-text-secondary mb-1.5 uppercase tracking-wider">{t('agent.customPrompt')}</label>
|
|
<textarea value={(editData as any).custom_system_prompt || ''} onChange={(e) => setEditData({...editData, custom_system_prompt: e.target.value} as any)} rows={3}
|
|
placeholder={t('agent.customPromptPlaceholder')}
|
|
className="w-full px-3 py-2 bg-bg-input border border-border-primary rounded-xl text-sm text-text-primary font-mono focus:outline-none focus:ring-2 focus:ring-accent/20 focus:border-accent" />
|
|
</div>
|
|
)}
|
|
{!(editData as any).is_system && (
|
|
<>
|
|
<div>
|
|
<label className="block text-xs font-semibold text-text-secondary mb-1.5 uppercase tracking-wider">{t('agent.description')}</label>
|
|
<textarea value={editData.description || ''} onChange={(e) => setEditData({...editData, description: e.target.value})} rows={2}
|
|
className="w-full px-3 py-2 bg-bg-input border border-border-primary rounded-xl text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-accent/20 focus:border-accent" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-semibold text-text-secondary mb-1.5 uppercase tracking-wider">{t('agent.systemPrompt')}</label>
|
|
<textarea value={editData.system_prompt || ''} onChange={(e) => setEditData({...editData, system_prompt: e.target.value})} rows={3}
|
|
className="w-full px-3 py-2 bg-bg-input border border-border-primary rounded-xl text-sm text-text-primary font-mono focus:outline-none focus:ring-2 focus:ring-accent/20 focus:border-accent" />
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-xs font-semibold text-text-secondary mb-1.5 uppercase tracking-wider">{t('agent.outputTemplate')}</label>
|
|
<textarea value={editData.output_template || '{}'} onChange={(e) => setEditData({...editData, output_template: e.target.value})} rows={3}
|
|
className="w-full px-3 py-2 bg-bg-input border border-border-primary rounded-xl text-sm text-text-primary font-mono focus:outline-none focus:ring-2 focus:ring-accent/20 focus:border-accent" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-semibold text-text-secondary mb-1.5 uppercase tracking-wider">{t('agent.boundSkill')}</label>
|
|
<select value={(() => { try { return Object.keys(JSON.parse(editData.bound_skill || '{}'))[0] || ''; } catch { return ''; } })()}
|
|
onChange={(e) => setEditData({...editData, bound_skill: JSON.stringify(e.target.value ? { [e.target.value]: [] } : {})})}
|
|
className="w-full px-3 py-2 bg-bg-input border border-border-primary rounded-xl text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-accent/20 focus:border-accent" disabled={editData.agent_type !== 'skill_individual'}>
|
|
<option value="">{t('common.none')}</option>
|
|
{availableSkills.map(s => <option key={s} value={s}>{s}</option>)}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-semibold text-text-secondary mb-1.5 uppercase tracking-wider">{t('agent.workspace')}</label>
|
|
<textarea value={editData.workspace || '[]'} onChange={(e) => setEditData({...editData, workspace: e.target.value})} rows={2}
|
|
className="w-full px-3 py-2 bg-bg-input border border-border-primary rounded-xl text-sm text-text-primary font-mono focus:outline-none focus:ring-2 focus:ring-accent/20 focus:border-accent" />
|
|
</div>
|
|
</>
|
|
)}
|
|
<div>
|
|
<label className="block text-xs font-semibold text-text-secondary mb-1.5 uppercase tracking-wider">{t('agent.tools')}</label>
|
|
<div className="flex flex-wrap gap-1.5 p-3 bg-bg-input border border-border-primary rounded-xl max-h-40 overflow-y-auto">
|
|
{availableTools.map(tool => {
|
|
let currentTools: string[] = [];
|
|
try { currentTools = JSON.parse(editData.tools || '[]'); } catch { }
|
|
const isSelected = currentTools.includes(tool);
|
|
return (
|
|
<button key={tool} type="button" onClick={() => {
|
|
const updated = isSelected ? currentTools.filter(t => t !== tool) : [...currentTools, tool];
|
|
setEditData({...editData, tools: JSON.stringify(updated)});
|
|
}}
|
|
className={`px-2.5 py-1 rounded-lg text-xs font-medium transition-all ${isSelected ? 'bg-accent-light text-accent border border-accent/20' : 'bg-bg-secondary text-text-muted border border-border-primary hover:border-text-muted'}`}>
|
|
{tool}
|
|
</button>
|
|
);
|
|
})}
|
|
{availableTools.length === 0 && <span className="text-xs text-text-muted">{t('agent.noTools')}</span>}
|
|
</div>
|
|
</div>
|
|
{modalMessage && <div className="p-3 bg-danger-bg text-danger text-sm rounded-xl border border-danger/20">{modalMessage}</div>}
|
|
<div className="pt-3 flex justify-end gap-2 border-t border-border-primary">
|
|
<button type="button" onClick={() => setIsEditing(false)} className="px-4 py-2 text-sm font-medium text-text-secondary hover:bg-bg-hover rounded-xl transition-colors">{t('common.cancel')}</button>
|
|
<button type="submit" disabled={submitLoading} className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-accent rounded-xl hover:bg-accent-hover transition-colors disabled:opacity-50">
|
|
<Save size={14} /> {submitLoading ? t('common.saving') : t('common.save')}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|