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

Tooltips added to match the types

Browse source
This commit is contained in:
Lucas Oliveira 2023-02-16 00:22:02 -03:00
commit 7796450365
3 changed files with 44 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

3
space_flow/src/CustomNodes/ChatInputNode/index.tsx
View file

@ -2,10 +2,12 @@ import { ChatBubbleBottomCenterTextIcon } from "@heroicons/react/24/outline";
import Input from "../../components/inputComponent"; import Input from "../../components/inputComponent";
import { snakeToNormalCase } from "../../utils"; import { snakeToNormalCase } from "../../utils";
import { Handle, Position } from "reactflow"; import { Handle, Position } from "reactflow";
import Tooltip from "../../components/TooltipComponent";
export default function ChatInputNode({ data }) { export default function ChatInputNode({ data }) {
return ( return (
<div className="prompt-node relative rounded-lg solid border flex justify-center align-center py-3 px-6 bg-blue-600"> <div className="prompt-node relative rounded-lg solid border flex justify-center align-center py-3 px-6 bg-blue-600">
<Tooltip title={"Message: str"}>
<Handle <Handle
type="target" type="target"
position={Position.Right} position={Position.Right}
@ -13,6 +15,7 @@ export default function ChatInputNode({ data }) {
isValidConnection={({sourceHandle, targetHandle}) => (targetHandle === sourceHandle || data.types[targetHandle] === sourceHandle || sourceHandle === 'str')} isValidConnection={({sourceHandle, targetHandle}) => (targetHandle === sourceHandle || data.types[targetHandle] === sourceHandle || sourceHandle === 'str')}
className="-mr-1 bg-transparent border-solid border-l-8 border-l-blue-600 border-y-transparent border-y-8 border-r-0 rounded-none" className="-mr-1 bg-transparent border-solid border-l-8 border-l-blue-600 border-y-transparent border-y-8 border-r-0 rounded-none"
></Handle> ></Handle>
</Tooltip>
<div className="flex gap-3 text-lg font-medium text-white items-center"> <div className="flex gap-3 text-lg font-medium text-white items-center">
<ChatBubbleBottomCenterTextIcon className="h-8 w-8 mt-1" /> <ChatBubbleBottomCenterTextIcon className="h-8 w-8 mt-1" />
Input Input

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

@ -2,23 +2,29 @@ import { ChatBubbleBottomCenterTextIcon } from "@heroicons/react/24/outline";
import { Handle, Position } from "reactflow"; import { Handle, Position } from "reactflow";
import Input from "../../components/inputComponent"; import Input from "../../components/inputComponent";
import { snakeToNormalCase } from "../../utils"; import { snakeToNormalCase } from "../../utils";
import Tooltip from "../../components/TooltipComponent";
export default function ChatOutputNode({ data }) { export default function ChatOutputNode({ data }) {
return (
return ( <div className="prompt-node relative rounded-lg solid border flex justify-center align-center py-3 px-6 bg-blue-600">
<div className="prompt-node relative rounded-lg solid border flex justify-center align-center py-3 px-6 bg-blue-600"> <Tooltip title="Message: str">
<Handle <Handle
type="source" type="source"
isConnectable={false} isValidConnection={({ sourceHandle, targetHandle }) =>
targetHandle === sourceHandle ||
data.types[targetHandle] === sourceHandle ||
sourceHandle === "str"
}
position={Position.Left} position={Position.Left}
id="str" id="str"
className="ml-1 bg-transparent border-solid border-l-8 border-l-white border-y-transparent border-y-8 border-r-0 rounded-none" className="ml-1 bg-transparent border-solid border-l-8 border-l-white border-y-transparent border-y-8 border-r-0 rounded-none"
></Handle> ></Handle>
<div className="flex gap-3 text-lg font-medium text-white items-center"> </Tooltip>
Output
<ChatBubbleBottomCenterTextIcon className="h-8 w-8 mt-1" />
</div>
</div>
);
} <div className="flex gap-3 text-lg font-medium text-white items-center">
Output
<ChatBubbleBottomCenterTextIcon className="h-8 w-8 mt-1" />
</div>
</div>
);
}

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

@ -34,9 +34,17 @@ export default function GenericNode({ data }) {
type="source" type="source"
position={Position.Left} position={Position.Left}
id={data.node.template[t].type} id={data.node.template[t].type}
isValidConnection={({ sourceHandle, targetHandle }) =>
targetHandle === sourceHandle ||
data.types[targetHandle] === sourceHandle ||
sourceHandle === "str"
}
className="ml-1 bg-transparent border-solid border-l-8 border-y-transparent border-y-8 border-r-0 rounded-none" className="ml-1 bg-transparent border-solid border-l-8 border-y-transparent border-y-8 border-r-0 rounded-none"
style={{borderLeftColor: nodeColors[data.type], marginTop: ((idx*30)-50) + "px"}} style={{
></Handle> borderLeftColor: nodeColors[data.type],
marginTop: idx * 30 - 50 + "px",
}}
></Handle>
</Tooltip> </Tooltip>
</div> </div>
))} ))}
@ -48,14 +56,20 @@ export default function GenericNode({ data }) {
<TrashIcon className="w-6 h-6 hover:text-red-500"></TrashIcon> <TrashIcon className="w-6 h-6 hover:text-red-500"></TrashIcon>
</button> </button>
</div> </div>
<Handle <Tooltip title={"Output: " + data.name}>
type="target" <Handle
position={Position.Right} type="target"
id={data.name} position={Position.Right}
isValidConnection={({sourceHandle, targetHandle}) => (targetHandle === sourceHandle || data.types[targetHandle] === sourceHandle || sourceHandle === 'str')} id={data.name}
className="-mr-1 bg-transparent border-solid border-l-8 border-y-transparent border-y-8 border-r-0 rounded-none" isValidConnection={({ sourceHandle, targetHandle }) =>
style={{borderLeftColor: nodeColors[data.type]}} targetHandle === sourceHandle ||
></Handle> data.types[targetHandle] === sourceHandle ||
sourceHandle === "str"
}
className="-mr-1 bg-transparent border-solid border-l-8 border-y-transparent border-y-8 border-r-0 rounded-none"
style={{ borderLeftColor: nodeColors[data.type] }}
></Handle>
</Tooltip>
</div> </div>
); );
} }