Upload components/Sidebar.jsx with huggingface_hub

components/Sidebar.jsx

@@ -0,0 +1,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>
+  );
+}