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 { snakeToNormalCase } from "../../utils";
import { Handle, Position } from "reactflow";
import Tooltip from "../../components/TooltipComponent";
export default function ChatInputNode({ data }) {
return (
<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
type="target"
position={Position.Right}
@ -13,6 +15,7 @@ export default function ChatInputNode({ data }) {
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"
></Handle>
</Tooltip>
<div className="flex gap-3 text-lg font-medium text-white items-center">
<ChatBubbleBottomCenterTextIcon className="h-8 w-8 mt-1" />
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 Input from "../../components/inputComponent";
import { snakeToNormalCase } from "../../utils";
import Tooltip from "../../components/TooltipComponent";
export default function ChatOutputNode({ data }) {
return (
<div className="prompt-node relative rounded-lg solid border flex justify-center align-center py-3 px-6 bg-blue-600">
return (
<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
type="source"
isConnectable={false}
isValidConnection={({ sourceHandle, targetHandle }) =>
targetHandle === sourceHandle ||
data.types[targetHandle] === sourceHandle ||
sourceHandle === "str"
}
position={Position.Left}
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"
></Handle>
<div className="flex gap-3 text-lg font-medium text-white items-center">
Output
<ChatBubbleBottomCenterTextIcon className="h-8 w-8 mt-1" />
</div>
</div>
);
</Tooltip>
}
<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"
position={Position.Left}
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"
style={{borderLeftColor: nodeColors[data.type], marginTop: ((idx*30)-50) + "px"}}
></Handle>
style={{
borderLeftColor: nodeColors[data.type],
marginTop: idx * 30 - 50 + "px",
}}
></Handle>
</Tooltip>
</div>
))}
@ -48,14 +56,20 @@ export default function GenericNode({ data }) {
<TrashIcon className="w-6 h-6 hover:text-red-500"></TrashIcon>
</button>
</div>
<Handle
type="target"
position={Position.Right}
id={data.name}
isValidConnection={({sourceHandle, targetHandle}) => (targetHandle === sourceHandle || 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 title={"Output: " + data.name}>
<Handle
type="target"
position={Position.Right}
id={data.name}
isValidConnection={({ sourceHandle, targetHandle }) =>
targetHandle === sourceHandle ||
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>
);
}