99 lines
3.3 KiB
TypeScript
99 lines
3.3 KiB
TypeScript
|
'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 (
|
||
|
|
<div className="absolute bottom-10 left-0 right-0 z-10 flex justify-center">
|
||
|
|
<div className="w-[69%] bg-slate-500/10 backdrop-blur-sm rounded-xl p-6">
|
||
|
|
<div className="flex justify-evenly">
|
||
|
|
{/* Agents Section */}
|
||
|
|
<div className="w-[77%] mr-6">
|
||
|
|
<h2 className="text-white text-sm font-medium mb-4 font-offbit">AGENTS</h2>
|
||
|
|
<div className="flex gap-3 overflow-x-auto custom-scrollbar">
|
||
|
|
{agents.map((agent, index) => (
|
||
|
|
<div
|
||
|
|
key={index}
|
||
|
|
draggable
|
||
|
|
onDragStart={(e) => 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]"
|
||
|
|
>
|
||
|
|
<h3 className="text-white text-sm font-medium mb-1 font-offbit">{agent.name}</h3>
|
||
|
|
<p className="text-gray-400 text-xs leading-relaxed">{agent.description}</p>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="w-[2px] bg-slate-500/20 bottom-4" />
|
||
|
|
|
||
|
|
|
||
|
|
{/* Tools Section */}
|
||
|
|
<div className="w-[22%] ml-6">
|
||
|
|
<h2 className="text-white text-sm font-medium mb-4 font-offbit">TOOLS</h2>
|
||
|
|
<div className="flex flex-col ">
|
||
|
|
{tools.map((tool, index) => (
|
||
|
|
<div
|
||
|
|
key={index}
|
||
|
|
draggable
|
||
|
|
onDragStart={(e) => 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]"
|
||
|
|
>
|
||
|
|
<h3 className="text-white text-sm font-medium mb-1 font-offbit">{tool.name}</h3>
|
||
|
|
<p className="text-gray-400 text-xs leading-relaxed">{tool.description}</p>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default Workspace;
|