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

Fixed sidebar and added transitions on the nodes

Browse source
This commit is contained in:
Lucas Oliveira 2023-02-10 17:49:47 -03:00
commit 868356c11e
11 changed files with 239 additions and 122 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,17 +1,30 @@
import { Transition } from "@headlessui/react";
import { Handle, Position } from "reactflow";
export default function AgentNode({ data }) {
console.log(data)
console.log(data);
return (
<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
<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>
<Handle type="target" position={Position.Right}></Handle>
</div>
</Transition>
);
}

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

@ -1,8 +1,19 @@
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">
@ -13,5 +24,6 @@ export default function ChainNode({ data }) {
</div>
<Handle type="target" position={Position.Right}></Handle>
</div>
</Transition>
);
}

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

@ -1,17 +1,32 @@
import { Transition } from "@headlessui/react";
import { Handle, Position } from "reactflow";
export default function ModelNode({ data }) {
console.log(data)
console.log(data);
return (
<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}
<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>
<Handle type="target" position={Position.Right}></Handle>
</div>
</Transition>
);
}

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

@ -1,23 +1,36 @@
import { Handle, Position } from "reactflow";
import { useContext } from "react";
import { PopUpContext } from "../../contexts/popUpContext";
import { Transition } from "@headlessui/react";
export default function PromptNode({ data }) {
const {openPopUp} = useContext(PopUpContext)
const { openPopUp } = useContext(PopUpContext);
return (
<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"
<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"
>
<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}
<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"
>
<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}
</div>
<Handle type="target" position={Position.Right}></Handle>
</div>
<Handle type="target" position={Position.Right}></Handle>
</div>
</Transition>
);
}

33
space_flow/src/CustomNodes/ValidatorNode/index.tsx
View file

@ -1,17 +1,30 @@
import { Transition } from "@headlessui/react";
import { Handle, Position } from "reactflow";
export default function ValidatorNode({ data }) {
console.log(data)
console.log(data);
return (
<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">
Validator
</label>
<div className="w-full h-min text-xs text-center">
validator data
<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">
Validator
</label>
<div className="w-full h-min text-xs text-center">validator data</div>
<Handle type="target" position={Position.Right}></Handle>
</div>
<Handle type="target" position={Position.Right}></Handle>
</div>
</Transition>
);
}

28
space_flow/src/CustomNodes/inputTextFolder/index.tsx
View file

@ -1,28 +0,0 @@
import { useCallback } from 'react';
import { Handle, Position } from 'reactflow';
const handleStyle = {left:10};
export default function TextUpdaterNode({data})
{
const onChange = useCallback((evt)=>{
console.log(evt.target.value)
},[])
return (
<div className="text-updater-node">
<Handle type='target' position={Position.Top}/>
<div>
<label htmlFor='text'>Text:</label>
<input id="text" name="text" onChange={onChange}></input>
</div>
<Handle type='source' id='a' position={Position.Bottom} style={handleStyle}/>
<Handle type='source' id='b' position={Position.Bottom}/>
</div>
)
}

14
space_flow/src/CustomNodes/inputTextFolder/inputText.css
View file

@ -1,14 +0,0 @@
.text-updater-node {
height: 50px;
border: 1px solid black;
padding: 5px;
border-radius: 5px;
background: white;
}
.text-updater-node label {
display: block;
color: #777;
font-size: 12px;
}