Upload components/PropertiesPanel.jsx with huggingface_hub

components/PropertiesPanel.jsx

@@ -0,0 +1,98 @@
+export default function PropertiesPanel({ selectedNode, onUpdateNode, onDeleteNode }) {
+  if (!selectedNode) {
+    return (
+      <div className="flex flex-col h-full">
+        <h2 className="font-semibold mb-4 pb-2 border-b border-border">Properties</h2>
+        <div className="flex-1 flex items-center justify-center text-muted text-sm text-center px-4">
+          Select a node to configure its parameters.
+        </div>
+      </div>
+    );
+  }
+
+  const handleChange = (field, value) => {
+    onUpdateNode(selectedNode.id, { [field]: value });
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      <h2 className="font-semibold mb-4 pb-2 border-b border-border">Properties</h2>
+      
+      <div className="space-y-4 flex-1 overflow-y-auto pr-2">
+        <div className="space-y-1">
+          <label className="text-xs text-muted uppercase tracking-wider">Node ID</label>
+          <input 
+            type="text" 
+            value={selectedNode.id} 
+            disabled 
+            className="w-full bg-surface border border-border rounded px-2 py-1.5 text-sm text-muted cursor-not-allowed"
+          />
+        </div>
+
+        <div className="space-y-1">
+          <label className="text-xs text-muted uppercase tracking-wider">Label</label>
+          <input 
+            type="text" 
+            value={selectedNode.label} 
+            onChange={(e) => handleChange('label', e.target.value)}
+            className="w-full bg-surface border border-border rounded px-2 py-1.5 text-sm focus:border-primary focus:outline-none transition-colors"
+          />
+        </div>
+
+        {selectedNode.type === 'llm' && (
+          <>
+            <div className="space-y-1">
+              <label className="text-xs text-muted uppercase tracking-wider">Model</label>
+              <select 
+                value={selectedNode.model} 
+                onChange={(e) => handleChange('model', e.target.value)}
+                className="w-full bg-surface border border-border rounded px-2 py-1.5 text-sm focus:border-primary focus:outline-none transition-colors"
+              >
+                <option value="gpt-4-turbo">GPT-4 Turbo</option>
+                <option value="gpt-3.5-turbo">GPT-3.5 Turbo</option>
+                <option value="claude-3-opus">Claude 3 Opus</option>
+                <option value="llama-3-70b">Llama 3 70B</option>
+              </select>
+            </div>
+
+            <div className="space-y-1">
+              <label className="text-xs text-muted uppercase tracking-wider">Temperature: {selectedNode.temp}</label>
+              <input 
+                type="range" 
+                min="0" 
+                max="1" 
+                step="0.1" 
+                value={selectedNode.temp} 
+                onChange={(e) => handleChange('temp', parseFloat(e.target.value))}
+                className="w-full accent-primary"
+              />
+              <div className="flex justify-between text-[10px] text-muted">
+                <span>Precise</span>
+                <span>Creative</span>
+              </div>
+            </div>
+          </>
+        )}
+
+        <div className="space-y-1">
+          <label className="text-xs text-muted uppercase tracking-wider">System Prompt</label>
+          <textarea 
+            value={selectedNode.prompt} 
+            onChange={(e) => handleChange('prompt', e.target.value)}
+            placeholder="Enter system instructions..."
+            className="w-full bg-surface border border-border rounded px-2 py-1.5 text-sm font-mono h-24 focus:border-primary focus:outline-none resize-none transition-colors"
+          />
+        </div>
+      </div>
+
+      <div className="pt-4 border-t border-border mt-4 space-y-2">
+        <button 
+          onClick={() => onDeleteNode(selectedNode.id)}
+          className="w-full py-2 rounded border border-red-900/50 text-red-400 hover:bg-red-900/20 text-sm transition-colors"
+        >
+          Delete Node
+        </button>
+      </div>
+    </div>
+  );
+}