Connection made successfully at the handle nodes

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

@@ -36,6 +36,7 @@ export default function ParameterComponent({
   type,
   name = "",
   required = false,
+  optionalHandle = null,
 }: ParameterComponentType) {
   const ref = useRef(null);
   const refHtml = useRef(null);
@@ -132,13 +133,14 @@ export default function ParameterComponent({
           <span className="text-red-600">{required ? " *" : ""}</span>
         </div>
         {left &&
-        (type === "str" ||
+        ((type === "str" ||
           type === "bool" ||
           type === "float" ||
           type === "code" ||
           type === "prompt" ||
           type === "file" ||
-          type === "int") ? (
+          type === "int") && !optionalHandle
+          ) ? (
           <></>
         ) : (
           <ShadTooltip

src/frontend/src/CustomNodes/GenericNode/index.tsx

@@ -204,6 +204,7 @@ export default function GenericNode({
                       data={data}
                       color={
                         nodeColors[types[data.node.template[t].type]] ??
+                        nodeColors[data.node.template[t].type] ??
                         nodeColors.unknown
                       }
                       title={
@@ -214,11 +215,12 @@ export default function GenericNode({
                           : toTitleCase(t)
                       }
                       name={t}
-                      tooltipTitle={data.node.template[t].type}
+                      tooltipTitle={data.node.template[t].input_types?.join("\n") ?? data.node.template[t].type}
                       required={data.node.template[t].required}
-                      id={data.node.template[t].type + "|" + t + "|" + data.id}
+                      id={(data.node.template[t].input_types?.join(";") ?? data.node.template[t].type) + "|" + t + "|" + data.id}
                       left={true}
                       type={data.node.template[t].type}
+                      optionalHandle={data.node.template[t].input_types}
                     />
                   ) : (
                     <></>

src/frontend/src/types/api/index.ts

@@ -12,6 +12,7 @@ export type APIClassType = {
   description: string;
   template: APITemplateType;
   display_name: string;
+  input_types?: Array<string>;
   [key: string]: Array<string> | string | APITemplateType;
 };
 

src/frontend/src/types/components/index.ts

@@ -36,6 +36,7 @@ export type ParameterComponentType = {
   name?: string;
   tooltipTitle: string;
   dataContext?: typesContextType;
+  optionalHandle?: Array<String>;
 };
 export type InputListComponentType = {
   value: string[];

src/frontend/src/utils.ts

@@ -141,6 +141,7 @@ export const nodeColors: { [char: string]: string } = {
   wrappers: "#E6277A",
   utilities: "#31A3CC",
   output_parsers: "#E6A627",
+  str: "#049524",
   unknown: "#9CA3AF",
 };
 
@@ -631,11 +632,11 @@ export function isValidConnection(
   reactFlowInstance: ReactFlowInstance
 ) {
   if (
-    sourceHandle.split("|")[0] === targetHandle.split("|")[0] ||
+    targetHandle.split("|")[0].split(";").some((n) => n === sourceHandle.split("|")[0]) ||
     sourceHandle
       .split("|")
       .slice(2)
-      .some((t) => t === targetHandle.split("|")[0]) ||
+      .some((t) => targetHandle.split("|")[0].split(";").some((n) => n === t)) ||
     targetHandle.split("|")[0] === "str"
   ) {
     let targetNode = reactFlowInstance.getNode(target).data.node;