Upload pages/index.js with huggingface_hub

pages/index.js

@@ -0,0 +1,202 @@
+import { useState, useCallback, useRef, useEffect } from 'react'
+import Header from '../components/Header'
+import NodeCanvas from '../components/NodeCanvas'
+import NodeEditor from '../components/NodeEditor'
+import ChatPanel from '../components/ChatPanel'
+import ConnectionModal from '../components/ConnectionModal'
+
+const initialNodes = [
+  {
+    id: 'ceo-1',
+    type: 'ceo',
+    name: 'CEO Agent',
+    model: 'claude-3-opus',
+    apiKey: '',
+    brief: 'You are the CEO agent. Your role is to coordinate communication between all agents, delegate tasks, and ensure efficient workflow. Summarize and relay information between agents.',
+    position: { x: 400, y: 150 },
+    connections: [],
+  },
+]
+
+const modelOptions = {
+  claude: ['claude-3-opus', 'claude-3-sonnet', 'claude-3-haiku'],
+  gemini: ['gemini-pro', 'gemini-pro-vision'],
+  openai: ['gpt-4-turbo', 'gpt-4', 'gpt-3.5-turbo'],
+  llama: ['llama-2-70b', 'llama-2-13b', 'llama-2-7b'],
+  mistral: ['mistral-large', 'mistral-medium', 'mistral-small'],
+}
+
+export default function Home() {
+  const [nodes, setNodes] = useState(initialNodes)
+  const [connections, setConnections] = useState([])
+  const [selectedNode, setSelectedNode] = useState(null)
+  const [editingNode, setEditingNode] = useState(null)
+  const [showChat, setShowChat] = useState(false)
+  const [chatMessages, setChatMessages] = useState([])
+  const [connectionModal, setConnectionModal] = useState(null)
+  const [draggedNode, setDraggedNode] = useState(null)
+  const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 })
+
+  const handleAddNode = useCallback(() => {
+    const newNode = {
+      id: `node-${Date.now()}`,
+      type: 'agent',
+      name: `Agent ${nodes.length}`,
+      model: 'gpt-4-turbo',
+      apiKey: '',
+      brief: 'You are a helpful AI agent. Follow instructions from the CEO and collaborate with other agents.',
+      position: { x: 100 + Math.random() * 300, y: 100 + Math.random() * 300 },
+      connections: [],
+    }
+    setNodes(prev => [...prev, newNode])
+  }, [nodes.length])
+
+  const handleDeleteNode = useCallback((nodeId) => {
+    setNodes(prev => prev.filter(n => n.id !== nodeId))
+    setConnections(prev => prev.filter(c => c.from !== nodeId && c.to !== nodeId))
+    if (selectedNode?.id === nodeId) setSelectedNode(null)
+    if (editingNode?.id === nodeId) setEditingNode(null)
+  }, [selectedNode, editingNode])
+
+  const handleUpdateNode = useCallback((nodeId, updates) => {
+    setNodes(prev => prev.map(n => n.id === nodeId ? { ...n, ...updates } : n))
+  }, [])
+
+  const handleAddConnection = useCallback((fromId, toId) => {
+    if (fromId === toId) return
+    const exists = connections.some(c => c.from === fromId && c.to === toId)
+    if (!exists) {
+      setConnections(prev => [...prev, { id: `conn-${Date.now()}`, from: fromId, to: toId, active: false }])
+    }
+  }, [connections])
+
+  const handleDeleteConnection = useCallback((connectionId) => {
+    setConnections(prev => prev.filter(c => c.id !== connectionId))
+  }, [])
+
+  const handleNodeDragStart = useCallback((e, node) => {
+    const rect = e.currentTarget.getBoundingClientRect()
+    setDragOffset({
+      x: e.clientX - rect.left,
+      y: e.clientY - rect.top
+    })
+    setDraggedNode(node)
+  }, [])
+
+  const handleNodeDrag = useCallback((e) => {
+    if (!draggedNode) return
+    const canvas = document.getElementById('node-canvas')
+    const canvasRect = canvas.getBoundingClientRect()
+    const newX = e.clientX - canvasRect.left - dragOffset.x
+    const newY = e.clientY - canvasRect.top - dragOffset.y
+    
+    handleUpdateNode(draggedNode.id, {
+      position: { x: Math.max(0, newX), y: Math.max(0, newY) }
+    })
+  }, [draggedNode, dragOffset, handleUpdateNode])
+
+  const handleNodeDragEnd = useCallback(() => {
+    setDraggedNode(null)
+  }, [])
+
+  useEffect(() => {
+    if (draggedNode) {
+      window.addEventListener('mousemove', handleNodeDrag)
+      window.addEventListener('mouseup', handleNodeDragEnd)
+      return () => {
+        window.removeEventListener('mousemove', handleNodeDrag)
+        window.removeEventListener('mouseup', handleNodeDragEnd)
+      }
+    }
+  }, [draggedNode, handleNodeDrag, handleNodeDragEnd])
+
+  const handleSendMessage = useCallback(async (message, targetNodeId) => {
+    const newMessage = {
+      id: `msg-${Date.now()}`,
+      sender: 'user',
+      content: message,
+      targetNode: targetNodeId,
+      timestamp: new Date().toISOString(),
+    }
+    setChatMessages(prev => [...prev, newMessage])
+
+    // Simulate agent response
+    setTimeout(() => {
+      const targetNode = nodes.find(n => n.id === targetNodeId)
+      const responseMessage = {
+        id: `msg-${Date.now()}-response`,
+        sender: targetNodeId,
+        senderName: targetNode?.name || 'Agent',
+        content: `[${targetNode?.name || 'Agent'}] Received your message: "${message}". Processing based on my brief: "${targetNode?.brief?.substring(0, 100)}..."`,
+        timestamp: new Date().toISOString(),
+      }
+      setChatMessages(prev => [...prev, responseMessage])
+    }, 1000)
+  }, [nodes])
+
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Header 
+        onAddNode={handleAddNode}
+        onToggleChat={() => setShowChat(!showChat)}
+        showChat={showChat}
+        nodeCount={nodes.length}
+        connectionCount={connections.length}
+      />
+      
+      <div className="flex-1 flex overflow-hidden">
+        <div className="flex-1 relative">
+          <NodeCanvas
+            nodes={nodes}
+            connections={connections}
+            selectedNode={selectedNode}
+            onSelectNode={setSelectedNode}
+            onEditNode={setEditingNode}
+            onDeleteNode={handleDeleteNode}
+            onAddConnection={(fromId) => setConnectionModal({ from: fromId })}
+            onNodeDragStart={handleNodeDragStart}
+          />
+        </div>
+        
+        {showChat && (
+          <ChatPanel
+            nodes={nodes}
+            messages={chatMessages}
+            onSendMessage={handleSendMessage}
+            onClose={() => setShowChat(false)}
+          />
+        )}
+      </div>
+
+      {editingNode && (
+        <NodeEditor
+          node={editingNode}
+          modelOptions={modelOptions}
+          onSave={(updates) => {
+            handleUpdateNode(editingNode.id, updates)
+            setEditingNode(null)
+
+          onClose={() => setEditingNode(null)}
+          onDelete={() => {
+            handleDeleteNode(editingNode.id)
+            setEditingNode(null)
+
+        />
+      )}
+
+      {connectionModal && (
+        <ConnectionModal
+          fromNode={nodes.find(n => n.id === connectionModal.from)}
+          nodes={nodes.filter(n => n.id !== connectionModal.from)}
+          existingConnections={connections.filter(c => c.from === connectionModal.from)}
+          onConnect={(toId) => {
+            handleAddConnection(connectionModal.from, toId)
+            setConnectionModal(null)
+
+          onDisconnect={handleDeleteConnection}
+          onClose={() => setConnectionModal(null)}
+        />
+      )}
+    </div>
+  )
+}