File size: 3,977 Bytes
9c72c43 | 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 | 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>
);
} |