Input types working with the handles

space_flow/src/CustomNodes/ChatInputNode/index.tsx

@@ -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">

space_flow/src/CustomNodes/ChatOutputNode/index.tsx

@@ -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">

space_flow/src/CustomNodes/GenericNode/index.tsx

@@ -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" ? (
+            <Tooltip title={t + ": " + data.node.template[t].type}>
-              <Dropdown
+              <Handle
-                title={data.node.template[t].title}
+                type="source"
-                value={data.node.template[t].options[0]}
+                position={Position.Left}
-                options={data.node.template[t].options}
+                id={data.node.template[t].type}
-                onSelect={() => {}}
+                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"}}
-            ) : data.node.template[t].type === "str" ? (
+            ></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>

space_flow/src/CustomNodes/InputNode/index.tsx

@@ -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>

space_flow/src/pages/FlowPage/index.tsx

@@ -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));
     },