Spaces:
Build error
Build error
File size: 3,890 Bytes
d6ac7ff | 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 99 100 101 102 103 104 105 106 107 108 109 110 111 112 | import React from 'react'
export default function Node({
node,
isSelected,
color,
onSelect,
onEdit,
onDelete,
onAddConnection,
onDragStart
}) {
const getModelIcon = (model) => {
if (model?.includes('claude')) return '🧠'
if (model?.includes('gemini')) return '💎'
if (model?.includes('gpt')) return '🤖'
if (model?.includes('llama')) return '🦙'
return '⚡'
}
return (
<div
className={`absolute cursor-move select-none ${isSelected ? 'z-20' : 'z-10'}`}
style={{
left: node.position.x,
top: node.position.y
onMouseDown={onDragStart}
>
<div
className={`w-72 bg-slate-800 rounded-2xl border-2 transition-all ${
isSelected
? 'border-violet-500 shadow-lg shadow-violet-500/20'
: 'border-slate-700 hover:border-slate-600'
}`}
onClick={(e) => {
e.stopPropagation()
onSelect()
>
{/* Header */}
<div className={`bg-gradient-to-r ${color} p-3 rounded-t-xl flex items-center gap-3`}>
<div className="w-10 h-10 bg-white/20 rounded-xl flex items-center justify-center text-xl backdrop-blur-sm">
{node.type === 'ceo' ? '👑' : getModelIcon(node.model)}
</div>
<div className="flex-1 min-w-0">
<h3 className="font-bold text-white truncate">{node.name}</h3>
<p className="text-xs text-white/70 truncate">{node.model}</p>
</div>
{node.type === 'ceo' && (
<span className="px-2 py-0.5 bg-white/20 rounded-full text-xs text-white font-medium">
CEO
</span>
)}
</div>
{/* Body */}
<div className="p-3">
<p className="text-xs text-slate-400 line-clamp-2 mb-3">
{node.brief || 'No brief set'}
</p>
<div className="flex items-center gap-2 mb-3">
<div className={`w-2 h-2 rounded-full ${node.apiKey ? 'bg-emerald-400' : 'bg-red-400'}`}></div>
<span className="text-xs text-slate-500">
{node.apiKey ? 'API Key Set' : 'No API Key'}
</span>
</div>
{/* Actions */}
<div className="flex gap-2">
<button
onClick={(e) => {
e.stopPropagation()
onEdit()
className="flex-1 px-3 py-1.5 bg-slate-700 hover:bg-slate-600 rounded-lg text-xs text-slate-300 transition-colors"
>
⚙️ Settings
</button>
<button
onClick={(e) => {
e.stopPropagation()
onAddConnection()
className="flex-1 px-3 py-1.5 bg-slate-700 hover:bg-slate-600 rounded-lg text-xs text-slate-300 transition-colors"
>
🔗 Connect
</button>
{node.type !== 'ceo' && (
<button
onClick={(e) => {
e.stopPropagation()
if (confirm('Delete this node?')) {
onDelete()
}
className="px-3 py-1.5 bg-red-900/30 hover:bg-red-900/50 rounded-lg text-xs text-red-400 transition-colors"
>
🗑️
</button>
)}
</div>
</div>
{/* Connection Points */}
<div className="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-2 w-4 h-4 bg-slate-600 rounded-full border-2 border-slate-500 hover:bg-violet-500 hover:border-violet-400 transition-colors cursor-crosshair"></div>
<div className="absolute right-0 top-1/2 -translate-y-1/2 translate-x-2 w-4 h-4 bg-slate-600 rounded-full border-2 border-slate-500 hover:bg-violet-500 hover:border-violet-400 transition-colors cursor-crosshair"></div>
</div>
</div>
)
} |