jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Generic nodes added

Browse source
This commit is contained in:
Lucas Oliveira 2023-02-14 14:50:18 -03:00
commit 8cdc38a3da
10 changed files with 435 additions and 83 deletions
Download patch file Download diff file Expand all files Collapse all files

77
space_flow/src/CustomNodes/GenericNode/index.tsx Normal file
View file

@ -0,0 +1,77 @@
import {
CommandLineIcon,
ArrowUpRightIcon,
TrashIcon,
PlayIcon,
} from "@heroicons/react/24/outline";
import { Handle, Position } from "reactflow";
import Dropdown from "../../components/dropdownComponent";
import Input from "../../components/inputComponent";
import { nodeColors, nodeIcons } from "../../utils";
export default function GenericNode({ data, onDelete, onRun }) {
const Icon = nodeIcons[data.type];
return (
<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">
<Icon
className="w-10 h-10 p-1 text-white rounded"
style={{ background: nodeColors[data.type] }}
/>
{data.name}
</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.description}
</div>
{data.template.map((t) => (
<div className="w-full mt-5">
{t.type === "dropdown" ? (
<Dropdown
title={t.title}
value={t.options[0]}
options={t.options}
onSelect={() => {}}
/>
) : t.type === "input" ? (
<Input
title={t.title}
placeholder={t.placeholder}
onChange={() => {}}
/>
) : (
<></>
)}
</div>
))}
<div className="w-full mt-5"></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">
<button onClick={onDelete}>
<TrashIcon className="w-6 h-6"></TrashIcon>
</button>
<button onClick={onRun}>
<PlayIcon className="w-6 h-6"></PlayIcon>
</button>
</div>
<Handle
type="target"
position={Position.Right}
id="b"
className=" w-3 h-3 -mr-0.5"
style={{ background: nodeColors[data.type] }}
></Handle>
</div>
);
}

45
space_flow/src/CustomNodes/PromptNode/index.tsx
View file

@ -2,6 +2,9 @@ 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);
@ -17,19 +20,39 @@ export default function PromptNode({ data }) {
leaveTo="transform opacity-0 scale-95"
>
<div
onClick={() =>
openPopUp(<div className="absolute top-1/2 left-1/2">teste</div>)
}
className="prompt-node relative bg-white h-16 w-40 border rounded-sm solid border-black flex flex-col justify-center"
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}></Handle>
<label className="absolute cursor-grab text-sm -top-3 left-1 bg-white w-14 text-center">
Prompt
</label>
<div className="w-full h-10 truncate bg-slate-50 text-xs">
{data.template}
<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>
<Handle type="target" position={Position.Right}></Handle>
<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>
);