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

Input and Output handles fixed

Browse source
This commit is contained in:
Lucas Oliveira 2023-02-20 21:53:53 -03:00
commit 8223ff5d32
2 changed files with 37 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,4 +1,7 @@
import { Bars3CenterLeftIcon, ChatBubbleBottomCenterTextIcon } from "@heroicons/react/24/outline";
import {
Bars3CenterLeftIcon,
ChatBubbleBottomCenterTextIcon,
} from "@heroicons/react/24/outline";
import InputComponent from "../../components/inputComponent";
import { isValidConnection, nodeColors, snakeToNormalCase } from "../../utils";
import { Handle, Position } from "reactflow";
@ -7,32 +10,44 @@ import { typesContext } from "../../contexts/typesContext";
import { useContext } from "react";
export default function ChatInputNode({ data }) {
const {types} = useContext(typesContext);
const { types } = useContext(typesContext);
return (
<div className="prompt-node relative rounded-lg solid border flex justify-center align-center py-3 px-6 bg-gray-50" style={{color: nodeColors[types[data.type]]}}>
<div
className="prompt-node relative rounded-lg solid border flex justify-center align-center py-3 px-6 bg-gray-50"
style={{ color: nodeColors[types[data.type]] }}
>
<Tooltip title="Prefix: str">
<Handle
type="target"
position={Position.Left}
id={"str|Prefix|" + data.id}
isValidConnection={(connection) =>
isValidConnection(data, connection)
}
className="ml-1 bg-transparent border-solid border-l-8 border-y-transparent border-y-8 border-r-0 rounded-none"
style={{ borderLeftColor: nodeColors[types[data.type]] }}
position={Position.Left}
id={"str|Prefix|" + data.id}
className={"-ml-0.5 w-3 h-3 rounded-full border-2 bg-white"}
style={{
borderColor: nodeColors[types[data.type]],
}}
></Handle>
</Tooltip>
<Tooltip title={"Message: str"}>
<Handle
type="source"
position={Position.Right}
id={'str|str|'+data.id}
isValidConnection={(connection) => isValidConnection(data,connection)}
className="-mr-1 bg-transparent border-solid border-l-8 border-y-transparent border-y-8 border-r-0 rounded-none"
style={{borderLeftColor: nodeColors[types[data.type]]}}
></Handle>
<Tooltip title={"Message: str"}>
<Handle
type="source"
isValidConnection={(connection) =>
isValidConnection(data, connection)
}
position={Position.Right}
id={"str|str|" + data.id}
className={"-mr-0.5 w-3 h-3 rounded-full border-2 bg-white"}
style={{
borderColor: nodeColors[types[data.type]],
}}
></Handle>
</Tooltip>
<div className="flex gap-3 text-lg font-medium items-center" style={{color: nodeColors[types[data.type]]}}>
<div
className="flex gap-3 text-lg font-medium items-center"
style={{ color: nodeColors[types[data.type]] }}
>
<Bars3CenterLeftIcon className="h-8 w-8 mt-1" />
Input
</div>

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

@ -16,8 +16,11 @@ export default function ChatOutputNode({ data }) {
isValidConnection={(connection) => isValidConnection(data,connection)}
position={Position.Left}
id={"str|output|"+data.id}
className="ml-1 bg-transparent border-solid border-l-8 border-y-transparent border-y-8 border-r-0 rounded-none"
style={{borderLeftColor: nodeColors['chat']}}
className={"-ml-0.5 w-3 h-3 rounded-full border-2 bg-white"
}
style={{
borderColor: nodeColors[types[data.type]],
}}
></Handle>
</Tooltip>