implemented boolean node and wrote if it is a list

space_flow/src/CustomNodes/BooleanNode/index.tsx

@@ -0,0 +1,45 @@
+import { Bars3CenterLeftIcon, TrashIcon } from "@heroicons/react/24/outline";
+import { Input } from "@mui/material";
+import { Handle, Position } from "reactflow";
+import { nodeColors } from "../../utils";
+import ToggleComponent from "../../components/toggleComponent";
+import { useEffect, useState } from "react";
+
+export default function BooleanNode({ data }) {
+  const [enabled, setEnabled] = useState(false);
+  return (
+    <div className="prompt-node relative bg-white rounded-lg solid border flex flex-col justify-center">
+      <div className="w-full flex items-center justify-between gap-8 p-4 bg-gray-50 border-b ">
+        <div className="flex items-center gap-4 text-lg">
+          <Bars3CenterLeftIcon
+            className="w-10 h-10 p-1 text-white rounded"
+            style={{ background: nodeColors[data.type] }}
+          />
+          Boolean
+        </div>
+        <button
+          onClick={() => {
+            data.onDelete(data);
+          }}
+        >
+          <TrashIcon className="text-gray-600 w-6 h-6 hover:text-red-500"></TrashIcon>
+        </button>
+      </div>
+      <div className="w-full flex justify-center p-5 h-full">
+        <ToggleComponent enabled={enabled} setEnabled={(x) => {setEnabled(x); data.enabled = x}} />
+      </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>
+    </div>
+  );
+}

space_flow/src/CustomNodes/GenericNode/index.tsx

@@ -13,7 +13,7 @@ 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">
-      <div className="w-full flex items-center justify-between p-4 bg-gray-50 border-b ">
+      <div className="w-full flex items-center justify-between p-4 gap-8 bg-gray-50 border-b ">
         <div className="flex items-center gap-4 text-lg">
           <Icon
             className="w-10 h-10 p-1 text-white rounded"
@@ -21,15 +21,18 @@ export default function GenericNode({ data }) {
           />
           {data.name}
         </div>
+        <button onClick={data.onDelete}>
+          <TrashIcon className="w-6 h-6 hover:text-red-500"></TrashIcon>
+        </button>
       </div>
 
       <div className="w-full p-5 h-full">
-        <div className="w-full text-gray-500 text-sm truncate">
+        <div className="w-full text-gray-500 text-sm">
           {data.node.description}
         </div>
         {Object.keys(data.node.template).map((t, idx) => (
           <div key={idx} className="w-full mt-5">
-            <Tooltip title={t + ": " + data.node.template[t].type}>
+            <Tooltip title={t + ": " + data.node.template[t].type + (data.node.template[t].list ? " list" : "") + (data.node.template[t].required ? " (required)" : "")}>
               <Handle
                 type="source"
                 position={Position.Left}
@@ -41,7 +44,7 @@ export default function GenericNode({ data }) {
                 }
                 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],
+                  borderLeftColor: (nodeColors[(data.types[data.node.template[t].type] ?? data.node.template[t].type)]) ?? "gray",
                   marginTop: idx * 30 - 50 + "px",
                 }}
               ></Handle>
@@ -50,12 +53,6 @@ export default function GenericNode({ data }) {
         ))}
         <div className="w-full mt-5"></div>
       </div>
-
-      <div className="flex w-full justify-between items-center bg-gray-50 gap-2 border-t text-gray-600 p-4 text-sm">
-        <button onClick={data.onDelete}>
-          <TrashIcon className="w-6 h-6 hover:text-red-500"></TrashIcon>
-        </button>
-      </div>
       <Tooltip title={"Output: " + data.name}>
         <Handle
           type="target"

space_flow/src/CustomNodes/InputNode/index.tsx

@@ -2,11 +2,12 @@ import { Bars3CenterLeftIcon, TrashIcon } from "@heroicons/react/24/outline";
 import Input from "../../components/inputComponent";
 import { nodeColors, nodeIcons, snakeToNormalCase } from "../../utils";
 import { Handle, Position } from "reactflow";
+import { useEffect } from "react";
 
 export default function InputNode({ data }) {
   return (
     <div className="prompt-node relative bg-white w-96 rounded-lg solid border flex flex-col justify-center">
-      <div className="w-full flex items-center justify-between p-4 bg-gray-50 border-b ">
+      <div className="w-full flex items-center justify-between p-4 gap-8 bg-gray-50 border-b ">
         <div className="flex items-center gap-4 text-lg">
           <Bars3CenterLeftIcon
             className="w-10 h-10 p-1 text-white rounded"
@@ -14,6 +15,13 @@ export default function InputNode({ data }) {
           />
           String
         </div>
+        <button
+          onClick={() => {
+            data.onDelete(data);
+          }}
+        >
+          <TrashIcon className="text-gray-600 w-6 h-6 hover:text-red-500"></TrashIcon>
+        </button>
       </div>
       <div className="w-full p-5 h-full">
         <Input
@@ -22,13 +30,6 @@ export default function InputNode({ data }) {
           }}
         />
       </div>
-
-      <div className="flex w-full justify-between items-center bg-gray-50 gap-2 border-t text-gray-600 p-4 text-sm">
-        <button onClick={() => {data.onDelete(data)}}>
-          <TrashIcon className="w-6 h-6 hover:text-red-500"></TrashIcon>
-        </button>
-        <button onClick={data.onRun}></button>
-      </div>
       <Handle
         type="target"
         position={Position.Right}

space_flow/src/components/toggleComponent/index.tsx

@@ -0,0 +1,50 @@
+import { Switch } from "@headlessui/react";
+import { classNames } from "../../utils";
+
+export default function ToggleComponent({enabled, setEnabled}){
+    return (<Switch
+        checked={enabled}
+        onChange={setEnabled}
+        className={classNames(
+          enabled ? 'bg-indigo-600' : 'bg-gray-200',
+          'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2'
+        )}
+      >
+        <span className="sr-only">Use setting</span>
+        <span
+          className={classNames(
+            enabled ? 'translate-x-5' : 'translate-x-0',
+            'pointer-events-none relative inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out'
+          )}
+        >
+          <span
+            className={classNames(
+              enabled ? 'opacity-0 ease-out duration-100' : 'opacity-100 ease-in duration-200',
+              'absolute inset-0 flex h-full w-full items-center justify-center transition-opacity'
+            )}
+            aria-hidden="true"
+          >
+            <svg className="h-3 w-3 text-gray-400" fill="none" viewBox="0 0 12 12">
+              <path
+                d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2"
+                stroke="currentColor"
+                strokeWidth={2}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+          </span>
+          <span
+            className={classNames(
+              enabled ? 'opacity-100 ease-in duration-200' : 'opacity-0 ease-out duration-100',
+              'absolute inset-0 flex h-full w-full items-center justify-center transition-opacity'
+            )}
+            aria-hidden="true"
+          >
+            <svg className="h-3 w-3 text-indigo-600" fill="currentColor" viewBox="0 0 12 12">
+              <path d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z" />
+            </svg>
+          </span>
+        </span>
+      </Switch>)
+}

space_flow/src/controllers/NodesServices/index.ts

@@ -5,5 +5,6 @@ export async function getAll() {
 }
 
 export async function sendAll(data) {
+    console.log(data);
     return await axios.post("http://localhost:5003/send", JSON.stringify(data));
 }

space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx

@@ -12,7 +12,7 @@ export default function ExtraSidebar() {
       acc[c] = curr;
     });
     return acc;
-  }, {});
+  }, {str: 'elements', bool: 'elements'});
 
   useEffect(() => {
     getAll().then((d) => {
@@ -117,6 +117,24 @@ export default function ExtraSidebar() {
                 </div>
               </div>
             </div>
+            <div>
+              <div
+                draggable
+                className={" cursor-grab border-l-8 rounded-l-md"}
+                style={{ borderLeftColor: nodeColors['elements'] }}
+                onDragStart={(event) =>
+                  onDragStart(event, {
+                    type: 'elements',
+                    name: 'bool',
+                  })
+                }
+              >
+                <div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed border-gray-400 border-l-0 rounded-md rounded-l-none border-2">
+                  <span className="text-black w-36 truncate">Boolean</span>
+                  <Bars2Icon className="w-6 h-6 text-gray-400" />
+                </div>
+              </div>
+            </div>
             </div>
         </DisclosureComponent>
     </div>

space_flow/src/pages/FlowPage/index.tsx

@@ -16,11 +16,13 @@ import { getConnectedNodes } from "../../utils";
 import ChatInputNode from "../../CustomNodes/ChatInputNode";
 import ChatOutputNode from "../../CustomNodes/ChatOutputNode";
 import InputNode from "../../CustomNodes/InputNode";
+import BooleanNode from "../../CustomNodes/BooleanNode";
 const nodeTypes = {
   genericNode:GenericNode,
   inputNode: InputNode,
   chatInputNode:ChatInputNode,
   chatOutputNode:ChatOutputNode,
+  booleanNode: BooleanNode,
 };
 
 export default function FlowPage() {
@@ -70,9 +72,9 @@ export default function FlowPage() {
       let newId = getId();
       const newNode = {
         id: newId,
-        type: data.name === 'str' ? 'inputNode' : (data.name === 'chatInput' ? 'chatInputNode' : (data.name === 'chatOutput' ? 'chatOutputNode' : 'genericNode')),
+        type: data.name === 'str' ? 'inputNode' : (data.name === 'chatInput' ? 'chatInputNode' : (data.name === 'chatOutput' ? 'chatOutputNode' : (data.name === 'bool' ? 'booleanNode' : 'genericNode'))),
         position,
-        data: { ...data, instance: reactFlowInstance, onDelete: () => {setNodes(reactFlowInstance.getNodes().filter((n)=>n.id !== newId))} },
+        data: { ...data, input: '', enabled: false, instance: reactFlowInstance, onDelete: () => {setNodes(reactFlowInstance.getNodes().filter((n)=>n.id !== newId))} },
       };
       setNodes((nds) => nds.concat(newNode));
     },