'use client'; import React from 'react'; import { DotbaseNodesEnum, DOTBASE_NODES } from '@/components/dashboard/nodes/types/nodeTypes'; import { v4 as uuidv4 } from 'uuid'; import '@/styles/styles.css'; const Workspace = () => { const onDragStart = (event: React.DragEvent, nodeType: DotbaseNodesEnum) => { const newNode = { ...DOTBASE_NODES[nodeType], id: `${nodeType}__${uuidv4()}` }; event.dataTransfer.setData('application/reactflow', JSON.stringify(newNode)); event.dataTransfer.effectAllowed = 'move'; }; const agents = [ { name: "HUB", description: "Enables agent collaboration", nodeType: DotbaseNodesEnum.HUB }, { name: "BRIDGE", description: "Mediates between agents and users", nodeType: DotbaseNodesEnum.BRIDGE }, { name: "NEXUS", description: "System message-configured agent", nodeType: DotbaseNodesEnum.NEXUS }, { name: "LUMINA", description: "OpenAI Assistant API integration", nodeType: DotbaseNodesEnum.LUMINA } ]; const tools = [ { name: "SPARK", description: "Custom function support for agents", nodeType: DotbaseNodesEnum.SPARK } ]; return (
{/* Agents Section */}

AGENTS

{agents.map((agent, index) => (
onDragStart(e, agent.nodeType)} className="w-[185px] flex-shrink-0 bg-[#1c1c1c] p-3 rounded-lg cursor-move hover:bg-[#252525] transition-colors border border-[#333333] hover:border-[#444444]" >

{agent.name}

{agent.description}

))}
{/* Tools Section */}

TOOLS

{tools.map((tool, index) => (
onDragStart(e, tool.nodeType)} className="w-[185px] bg-[#1c1c1c] rounded-lg p-3 cursor-move hover:bg-[#252525] transition-colors border border-[#333333] hover:border-[#444444] min-h-[85px]" >

{tool.name}

{tool.description}

))}
); }; export default Workspace;