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

Input types working with the handles

Browse source
This commit is contained in:
Lucas Oliveira 2023-02-16 00:15:25 -03:00
commit 29dbc3ff31
5 changed files with 20 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -9,7 +9,8 @@ export default function ChatInputNode({ data }) {
<Handle
type="target"
position={Position.Right}
id="b"
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-l-blue-600 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">

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

@ -9,8 +9,9 @@ export default function ChatOutputNode({ data }) {
<div className="prompt-node relative rounded-lg solid border flex justify-center align-center py-3 px-6 bg-blue-600">
<Handle
type="source"
isConnectable={false}
position={Position.Left}
id="b"
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">

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

@ -13,16 +13,6 @@ 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">
<Tooltip title="teste">
<Handle
type="source"
position={Position.Left}
id="b"
isConnectable={false}
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]}}
></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
@ -39,18 +29,15 @@ export default function GenericNode({ data }) {
</div>
{Object.keys(data.node.template).map((t, idx) => (
<div key={idx} className="w-full mt-5">
{data.node.template[t].type === "dropdown" ? (
<Dropdown
title={data.node.template[t].title}
value={data.node.template[t].options[0]}
options={data.node.template[t].options}
onSelect={() => {}}
/>
) : data.node.template[t].type === "str" ? (
<></>
) : (
<></>
)}
<Tooltip title={t + ": " + data.node.template[t].type}>
<Handle
type="source"
position={Position.Left}
id={data.node.template[t].type}
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>
</Tooltip>
</div>
))}
<div className="w-full mt-5"></div>
@ -64,7 +51,8 @@ export default function GenericNode({ data }) {
<Handle
type="target"
position={Position.Right}
id="b"
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>

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

@ -32,7 +32,8 @@ export default function InputNode({ data }) {
<Handle
type="target"
position={Position.Right}
id="b"
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>

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

@ -44,9 +44,9 @@ export default function FlowPage() {
const [reactFlowInstance, setReactFlowInstance] = useState(null);
const onConnect = useCallback(
(params) => {
console.log(params)
/* console.log(params)
console.log(reactFlowInstance.getNodes())
console.log(getConnectedNodes(params,reactFlowInstance.getNodes()))
console.log(getConnectedNodes(params,reactFlowInstance.getNodes())) */
setEdges((eds) => addEdge({...params}, eds))
},
[reactFlowInstance]
@ -72,7 +72,7 @@ export default function FlowPage() {
id: newId,
type: data.name === 'str' ? 'inputNode' : (data.name === 'chatInput' ? 'chatInputNode' : (data.name === 'chatOutput' ? 'chatOutputNode' : 'genericNode')),
position,
data: { ...data, onDelete: () => {setNodes(reactFlowInstance.getNodes().filter((n)=>n.id !== newId))} },
data: { ...data, instance: reactFlowInstance, onDelete: () => {setNodes(reactFlowInstance.getNodes().filter((n)=>n.id !== newId))} },
};
setNodes((nds) => nds.concat(newNode));
},