Generic node working, passed object with types
This commit is contained in:
parent
dfff0ee05f
commit
fc3fe6a85d
14 changed files with 551 additions and 240 deletions
|
|
@ -1,30 +0,0 @@
|
|||
import { Transition } from "@headlessui/react";
|
||||
import { Handle, Position } from "reactflow";
|
||||
|
||||
export default function AgentNode({ data }) {
|
||||
console.log(data);
|
||||
return (
|
||||
<Transition
|
||||
appear={true}
|
||||
show={true}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<div
|
||||
onClick={data.delete}
|
||||
className="agent-node relative bg-white h-16 w-40 border rounded-sm solid border-black flex flex-col justify-center"
|
||||
>
|
||||
<Handle type="source" position={Position.Left}></Handle>
|
||||
<label className="absolute cursor-grab text-sm -top-3 left-1 bg-white w-14 text-center">
|
||||
Agent
|
||||
</label>
|
||||
<div className="w-full h-min text-xs text-center">Agent data</div>
|
||||
<Handle type="target" position={Position.Right}></Handle>
|
||||
</div>
|
||||
</Transition>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
import { Transition } from "@headlessui/react";
|
||||
import { Handle, Position } from "reactflow";
|
||||
|
||||
export default function ChainNode({ data }) {
|
||||
console.log(data)
|
||||
return (
|
||||
<Transition
|
||||
appear={true}
|
||||
show={true}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<div onClick={data.delete} className="chain-node relative bg-white h-16 w-40 border rounded-sm solid border-black flex flex-col justify-center">
|
||||
<Handle type="source" position={Position.Left}></Handle>
|
||||
<label className="absolute cursor-grab text-sm -top-3 left-1 bg-white w-14 text-center">
|
||||
Chain
|
||||
</label>
|
||||
<div className="w-full h-min text-xs text-center">
|
||||
Chain data
|
||||
</div>
|
||||
<Handle type="target" position={Position.Right}></Handle>
|
||||
</div>
|
||||
</Transition>
|
||||
);
|
||||
}
|
||||
|
|
@ -8,17 +8,21 @@ import { Handle, Position } from "reactflow";
|
|||
import Dropdown from "../../components/dropdownComponent";
|
||||
import Input from "../../components/inputComponent";
|
||||
import { nodeColors, nodeIcons } from "../../utils";
|
||||
import Tooltip from "../../components/TooltipComponent";
|
||||
import { useEffect } from "react";
|
||||
|
||||
export default function GenericNode({ data }) {
|
||||
const Icon = nodeIcons[data.type];
|
||||
return (
|
||||
<div className="prompt-node relative bg-white w-96 rounded-lg solid border flex flex-col justify-center">
|
||||
<Handle
|
||||
type="source"
|
||||
position={Position.Left}
|
||||
id="b"
|
||||
className="bg-gray-400 w-3 h-3 -ml-0.5"
|
||||
></Handle>
|
||||
<Tooltip title="teste">
|
||||
<Handle
|
||||
type="source"
|
||||
position={Position.Left}
|
||||
id="b"
|
||||
className="bg-gray-400 w-3 h-3 -ml-0.5"
|
||||
></Handle>
|
||||
</Tooltip>
|
||||
<div className="w-full flex items-center justify-between p-4 bg-gray-50 border-b ">
|
||||
<div className="flex items-center gap-4 text-lg">
|
||||
<Icon
|
||||
|
|
@ -44,11 +48,7 @@ export default function GenericNode({ data }) {
|
|||
onSelect={() => {}}
|
||||
/>
|
||||
) : data.node.template[t].type === "str" ? (
|
||||
<Input
|
||||
title={t}
|
||||
placeholder="pleicerolder"
|
||||
onChange={() => {}}
|
||||
/>
|
||||
<Input title={t} placeholder="pleicerolder" onChange={() => {}} />
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -1,31 +0,0 @@
|
|||
import { Transition } from "@headlessui/react";
|
||||
import { Handle, Position } from "reactflow";
|
||||
|
||||
export default function MemoryNode({ data }) {
|
||||
return (
|
||||
<Transition
|
||||
appear={true}
|
||||
show={true}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<div
|
||||
onClick={data.delete}
|
||||
className="memory-node relative bg-white h-16 w-40 border rounded-sm solid border-black flex flex-col justify-center"
|
||||
>
|
||||
<Handle type="source" position={Position.Left}></Handle>
|
||||
<label className="absolute cursor-grab text-sm -top-3 left-1 bg-white w-14 text-center">
|
||||
Memory
|
||||
</label>
|
||||
<div className="w-full h-min text-xs text-center">
|
||||
Memory
|
||||
</div>
|
||||
<Handle type="target" position={Position.Right}></Handle>
|
||||
</div>
|
||||
</Transition>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
import { Transition } from "@headlessui/react";
|
||||
import { Handle, Position } from "reactflow";
|
||||
|
||||
export default function ModelNode({ data }) {
|
||||
console.log(data);
|
||||
return (
|
||||
<Transition
|
||||
appear={true}
|
||||
show={true}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<div
|
||||
onClick={data.delete}
|
||||
className="model-node relative bg-white h-16 w-40 border rounded-sm solid border-black flex flex-col justify-center"
|
||||
>
|
||||
<Handle type="source" position={Position.Left}></Handle>
|
||||
<label className="absolute cursor-grab text-sm -top-3 left-1 bg-white w-14 text-center">
|
||||
Model
|
||||
</label>
|
||||
<div className="w-full h-min text-xs text-center">
|
||||
{data.llm.model_name}
|
||||
</div>
|
||||
<Handle type="target" position={Position.Right}></Handle>
|
||||
</div>
|
||||
</Transition>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,59 +0,0 @@
|
|||
import { Handle, Position } from "reactflow";
|
||||
import { useContext } from "react";
|
||||
import { PopUpContext } from "../../contexts/popUpContext";
|
||||
import { Transition } from "@headlessui/react";
|
||||
import { ArrowUpRightIcon, CommandLineIcon, PlayIcon, TrashIcon } from "@heroicons/react/24/outline";
|
||||
import Dropdown from "../../components/dropdownComponent";
|
||||
import Input from "../../components/inputComponent";
|
||||
|
||||
export default function PromptNode({ data }) {
|
||||
const { openPopUp } = useContext(PopUpContext);
|
||||
return (
|
||||
<Transition
|
||||
appear={true}
|
||||
show={true}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<div
|
||||
className="prompt-node relative bg-white h-96 w-96 rounded-lg solid border flex flex-col justify-center"
|
||||
>
|
||||
<Handle type="source"
|
||||
position={Position.Left}
|
||||
id="b"
|
||||
className="bg-gray-400 w-3 h-3 -ml-0.5"></Handle>
|
||||
<div className="w-full flex items-center justify-between p-4 bg-gray-50 border-b ">
|
||||
<div className="flex items-center gap-4 text-lg">
|
||||
<CommandLineIcon className="w-10 h-10 p-1 bg-sky-600 text-white rounded" />
|
||||
Prompt
|
||||
</div>
|
||||
<ArrowUpRightIcon className="w-4 h-4" />
|
||||
</div>
|
||||
|
||||
<div className="w-full p-5 h-full">
|
||||
<div className="w-full text-gray-500 text-sm truncate">
|
||||
{data.template}
|
||||
</div>
|
||||
<div className="w-full mt-5">
|
||||
<Dropdown title="Select item:" value="item" options={["item1", "item2", "item3"]} onSelect={() => {}} />
|
||||
</div>
|
||||
<div className="w-full mt-5">
|
||||
<Input title="Enter text:" placeholder="text" onChange={() => {}} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex w-full justify-between items-center bg-gray-50 gap-2 border-t text-gray-600 p-4 text-sm">
|
||||
<TrashIcon className="w-6 h-6"></TrashIcon>
|
||||
<PlayIcon className="w-6 h-6"></PlayIcon>
|
||||
</div>
|
||||
<Handle type="target"
|
||||
position={Position.Right}
|
||||
id="b" className="bg-sky-600 w-3 h-3 -mr-0.5"></Handle>
|
||||
</div>
|
||||
</Transition>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
import { Transition } from "@headlessui/react";
|
||||
import { Handle, Position } from "reactflow";
|
||||
|
||||
export default function ToolsNode({ data }) {
|
||||
console.log(data);
|
||||
return (
|
||||
<Transition
|
||||
appear={true}
|
||||
show={true}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<div
|
||||
onClick={data.delete}
|
||||
className="validator-node relative bg-white h-16 w-40 border rounded-sm solid border-black flex flex-col justify-center"
|
||||
>
|
||||
<Handle type="source" position={Position.Left}></Handle>
|
||||
<label className="absolute cursor-grab text-sm -top-3 left-1 bg-white w-14 text-center">
|
||||
Tools
|
||||
</label>
|
||||
<div className="w-full h-min text-xs text-center">Tools data</div>
|
||||
<Handle type="target" position={Position.Right}></Handle>
|
||||
</div>
|
||||
</Transition>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue