File size: 2,816 Bytes
1904c51 | 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 | import { FileText, Database, Cpu, Waypoints, ArrowRight, Send, Trash2, Link } from 'lucide-react';
const tools = [
{ id: 'input', label: 'Data Source', icon: FileText, group: 'Data Ingestion' },
{ id: 'vector-db', label: 'Vector Store', icon: Database, group: 'Data Ingestion' },
{ id: 'llm', label: 'LLM Core', icon: Cpu, group: 'AI Processing' },
{ id: 'embedder', label: 'Embeddings', icon: Waypoints, group: 'AI Processing' },
{ id: 'router', label: 'Semantic Router', icon: ArrowRight, group: 'Logic' },
{ id: 'output', label: 'Response', icon: Send, group: 'Output' },
];
export default function Sidebar({ onAddNode, onClear, onConnectSelected, hasSelection }) {
return (
<aside className="w-64 bg-panel border-r border-border flex flex-col">
<div className="p-4 flex-1 overflow-y-auto">
{['Data Ingestion', 'AI Processing', 'Logic', 'Output'].map(group => (
<div key={group} className="mb-6">
<h3 className="text-[10px] uppercase tracking-widest text-muted font-bold mb-3">{group}</h3>
<div className="space-y-2">
{tools.filter(t => t.group === group).map(tool => {
const Icon = tool.icon;
return (
<button
key={tool.id}
onClick={() => onAddNode(tool.id)}
className="w-full flex items-center gap-3 px-3 py-2.5 rounded bg-surface border border-border hover:border-primary hover:bg-primary/5 transition-all text-sm text-main text-left group"
>
<div className="w-8 h-8 rounded bg-white/5 flex items-center justify-center group-hover:bg-primary/10 transition-colors">
<Icon size={16} className="text-muted group-hover:text-primary" />
</div>
{tool.label}
</button>
);
})}
</div>
</div>
))}
</div>
<div className="p-4 border-t border-border space-y-2 bg-surface/30">
<button
onClick={onConnectSelected}
disabled={!hasSelection}
className="w-full flex items-center justify-center gap-2 py-2 rounded bg-surface border border-border hover:border-success hover:text-success transition-all text-sm disabled:opacity-50 disabled:cursor-not-allowed"
title="Connect currently selected nodes"
>
<Link size={16} /> Connect Selected
</button>
<button
onClick={onClear}
className="w-full flex items-center justify-center gap-2 py-2 rounded bg-surface border border-border hover:border-red-500 hover:text-red-400 transition-all text-sm"
>
<Trash2 size={16} /> Clear Canvas
</button>
</div>
</aside>
);
} |