Validation with multiple base classes done

space_flow/src/CustomNodes/BooleanNode/index.tsx

@@ -1,4 +1,4 @@
-import { Bars3CenterLeftIcon, TrashIcon } from "@heroicons/react/24/outline";
+import { Bars3CenterLeftIcon, CheckCircleIcon, TrashIcon } from "@heroicons/react/24/outline";
 import { Input } from "@mui/material";
 import { Handle, Position } from "reactflow";
 import { isValidConnection, nodeColors } from "../../utils";
@@ -11,9 +11,9 @@ export default function BooleanNode({ data }) {
     <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
+          <CheckCircleIcon
-            className="w-10 h-10 p-1 text-white rounded"
+            className="w-10 h-10 p-1 rounded"
-            style={{ background: nodeColors[data.type] }}
+            style={{ color: nodeColors[data.type] }}
           />
           Boolean
         </div>

space_flow/src/CustomNodes/ChatInputNode/index.tsx

@@ -16,7 +16,7 @@ export default function ChatInputNode({ data }) {
             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: 'white' }}
+          style={{ borderLeftColor: nodeColors['chat'] }}
         ></Handle>
       </Tooltip>
         <Tooltip title={"Message: str"}>

space_flow/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx

@@ -18,6 +18,7 @@ export default function ParameterComponent({
   color,
   type,
   name = "",
+  required = false,
 }) {
   const ref = useRef(null);
   const updateNodeInternals = useUpdateNodeInternals();
@@ -38,8 +39,8 @@ export default function ParameterComponent({
   return (
     <div ref={ref} className="w-full flex flex-wrap justify-between items-center bg-gray-50 mt-1 px-5 py-2">
       <>
-        <div className="text-sm truncate">{title}</div>
+        <div className="text-sm truncate">{title}<span className="text-red-600">{required ? " *" : ""}</span></div>
-        <Tooltip title={tooltipTitle}>
+        <Tooltip title={tooltipTitle + (required ? " (required)" : "")}>
           <Handle
             type={left ? "source" : "target"}
             position={left ? Position.Left : Position.Right}
@@ -60,6 +61,7 @@ export default function ParameterComponent({
         {left === true && type === "str" ? (
           <div className="mt-2 w-full">
             <Input
+            value={data.node.template[name].value ?? ""}
               onChange={(t) => {
                 data.node.template[name].value = t;
               }}

space_flow/src/CustomNodes/GenericNode/index.tsx

@@ -35,7 +35,7 @@ export default function GenericNode({ data }) {
           {Object.keys(data.node.template)
             .filter((t) => t.charAt(0) !== "_")
             .map((t, idx) => (
-              <>
+              <div key={idx}>
                 {idx === 0 ? (
                   <div className="px-5 py-2 mt-2 text-center">Inputs:</div>
                 ) : (
@@ -43,23 +43,22 @@ export default function GenericNode({ data }) {
                 )}
                 {data.node.template[t].show ? (
                   <ParameterComponent
-                    key={idx}
+                    
                     data={data}
                     color={
                       nodeColors[data.types[data.node.template[t].type]] ??
                       "black"
                     }
                     title={
-                      snakeToNormalCase(t) +
+                      snakeToNormalCase(t)
-                      (data.node.template[t].required ? " (required)" : "")
                     }
                     name={t}
                     tooltipTitle={
                       "Type: " +
                       data.node.template[t].type +
-                      (data.node.template[t].list ? " list" : "") +
+                      (data.node.template[t].list ? " list" : "")
-                      (data.node.template[t].required ? " (required)" : "")
                     }
+                    required={data.node.template[t].required}
                     id={data.node.template[t].type + "|" + t + "|" + data.id}
                     left={true}
                     type={data.node.template[t].type}
@@ -67,15 +66,15 @@ export default function GenericNode({ data }) {
                 ) : (
                   <></>
                 )}
-              </>
+              </div>
             ))}
           <div className="px-5 py-2 mt-2 text-center">Output:</div>
           <ParameterComponent
             data={data}
             color={nodeColors[data.type]}
-            title={data.name + " | " + data.node.base_class}
+            title={data.name +" |" + data.node.base_classes.map((b) => (" " + b))}
             tooltipTitle={"Type: str"}
-            id={data.name + "|" + data.node.base_class + "|" + data.id}
+            id={data.name + "|" + data.id + data.node.base_classes.map((b) => ("|" + b))}
             type={'str'}
             left={false}
           />

space_flow/src/CustomNodes/InputNode/index.tsx

@@ -29,8 +29,8 @@ export default function InputNode({ data }) {
       <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"
+            className="w-10 h-10 p-1 rounded"
-            style={{ background: nodeColors[data.type] }}
+            style={{ color: nodeColors[data.type] }}
           />
           String
         </div>
@@ -44,6 +44,7 @@ export default function InputNode({ data }) {
       </div>
       <div className="w-full p-5 h-full">
         <Input
+          value=""
           onChange={(e) => {
             data.text = e;
           }}

space_flow/src/components/inputComponent/index.tsx

@@ -1,11 +1,16 @@
-export default function Input({onChange}){
+import { useState } from "react";
+
+export default function Input({value, onChange}){
+    const [myValue, setMyValue] = useState(value ?? "");
     return (
         <>
             <input
             type="text"
+            value={myValue}
             className="block w-full form-input rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
             placeholder="Type a text"
             onChange={(e) => {
+                setMyValue(e.target.value);
                 onChange(e.target.value);
             }}
             />

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

@@ -10,7 +10,7 @@ export default function ExtraSidebar() {
   const types = Object.keys(data).reduce((acc, curr) => {
     Object.keys(data[curr]).forEach((c) => {
       acc[c] = curr;
-      acc[data[curr][c].base_class] = curr;
+      data[curr][c].base_classes?.forEach((b) => {acc[b] = curr;})
     });
     console.log(acc);
     return acc;

space_flow/src/utils.ts

@@ -341,7 +341,7 @@ export function isValidConnection(
 ) {
   if (
     targetHandle.split('|')[0] === sourceHandle.split("|")[0] ||
-    targetHandle.split('|')[1] === sourceHandle.split("|")[0] ||
+    targetHandle.split('|').slice(2).some((t) => t === sourceHandle.split("|")[0]) ||
     sourceHandle.split("|")[0] === "str"
   ) {
     let sourceNode = data.reactFlowInstance.getNode(source).data.node;