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

Generic node working, passed object with types

Browse source
This commit is contained in:
Lucas Oliveira 2023-02-14 19:00:20 -03:00
commit fc3fe6a85d
14 changed files with 551 additions and 240 deletions
Download patch file Download diff file Expand all files Collapse all files

30
space_flow/src/CustomNodes/AgentNode/index.tsx
View file

@ -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>
);
}

29
space_flow/src/CustomNodes/ChainNode/index.tsx
View file

@ -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>
);
}

22
space_flow/src/CustomNodes/GenericNode/index.tsx
View file

@ -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={() => {}} />
) : (
<></>
)}

31
space_flow/src/CustomNodes/MemoryNode/index.tsx
View file

@ -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>
);
}

32
space_flow/src/CustomNodes/ModelNode/index.tsx
View file

@ -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>
);
}

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

@ -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>
);
}

30
space_flow/src/CustomNodes/ToolsNode/index.tsx
View file

@ -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>
);
}

17
space_flow/src/components/LightTooltipComponent/index.tsx Normal file
View file

@ -0,0 +1,17 @@
import { styled } from '@mui/material/styles';
import Tooltip, { TooltipProps, tooltipClasses } from '@mui/material/Tooltip';
export const LightTooltip = styled(({ className, ...props }: TooltipProps) => (
<Tooltip {...props} classes={{ popper: className }} />
))(({ theme }) => ({
[`& .${tooltipClasses.tooltip}`]: {
backgroundColor: theme.palette.common.white,
color: 'rgba(0, 0, 0, 0.87)',
boxShadow: theme.shadows[2],
fontSize: 14,
},
[`& .${tooltipClasses.arrow}:before`]: {
color: theme.palette.common.white,
boxShadow: theme.shadows[1],
},
}));

5
space_flow/src/components/TooltipComponent/index.tsx Normal file
View file

@ -0,0 +1,5 @@
import { LightTooltip } from "../LightTooltipComponent";
export default function Tooltip({ children, title }) {
return <LightTooltip title={title} arrow>{children}</LightTooltip>;
}

26
space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
View file

@ -7,11 +7,19 @@ import { useEffect, useState } from "react";
import { getAll } from "../../../../controllers/NodesServices";
export default function ExtraSidebar() {
const [data, setData] = useState({});
const types = Object.keys(data).reduce((acc, curr) => {
Object.keys(data[curr]).forEach((c) => {
acc[c] = curr;
});
return acc;
}, {});
useEffect(() => {
getAll().then((d) => { setData(d.data);});
getAll().then((d) => {
setData(d.data);
});
}, []);
function onDragStart(event: React.DragEvent<any>, data) {
@ -20,10 +28,11 @@ export default function ExtraSidebar() {
}
return (
<div className="mt-4">
<div className="mt-4">
{Object.keys(data).map((d, i) => (
<DisclosureComponent
key={i} button={{ title: toFirstUpperCase(d), Icon: nodeIcons[d] }}
key={i}
button={{ title: toFirstUpperCase(d), Icon: nodeIcons[d] }}
>
{Object.keys(data[d]).map((t, k) => (
<div key={k} className="p-2 pb-0">
@ -31,7 +40,14 @@ export default function ExtraSidebar() {
draggable
className={" cursor-grab border-l-8 rounded-l-md"}
style={{ borderLeftColor: nodeColors[d] }}
onDragStart={(event) => onDragStart(event, {type: d, name:t, node: data[d][t]})}
onDragStart={(event) =>
onDragStart(event, {
type: d,
name: t,
types: types,
node: data[d][t],
})
}
>
<div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed border-gray-400 border-l-0 rounded-md rounded-l-none border-2">
<span className="text-black w-36 truncate">{t}</span>

12
space_flow/src/pages/FlowPage/index.tsx
View file

@ -6,14 +6,8 @@ import ReactFlow, {
useEdgesState,
useNodesState,
} from "reactflow";
import PromptNode from "../../CustomNodes/PromptNode";
import ModelNode from "../../CustomNodes/ModelNode";
import { locationContext } from "../../contexts/locationContext";
import ExtraSidebar from "./components/extraSidebarComponent";
import AgentNode from "../../CustomNodes/AgentNode";
import ChainNode from "../../CustomNodes/ChainNode";
import ToolsNode from "../../CustomNodes/ToolsNode";
import MemoryNode from "../../CustomNodes/MemoryNode";
import axios from "axios";
import { generateUiNode } from "../../controllers/UiGenerator";
import Chat from "../../components/chatComponent";
@ -21,12 +15,6 @@ import { getAll } from "../../controllers/NodesServices";
import GenericNode from "../../CustomNodes/GenericNode";
const nodeTypes = {
promptNode: PromptNode,
modelNode: ModelNode,
chainNode: ChainNode,
agentNode: AgentNode,
toolNode: ToolsNode,
memoryNode:MemoryNode,
genericNode:GenericNode,
};