feat: Migrate base classes to outputs in FrontendNode

This commit migrates the base classes of the FrontendNode to the outputs field. Each base class is converted into an OutputField with the same name and type. This change ensures consistency and improves the structure of the code.

src/backend/base/langflow/template/frontend_node/base.py

@@ -4,7 +4,7 @@ from typing import ClassVar, Dict, List, Optional, Union
 
 from pydantic import BaseModel, Field, field_serializer, model_serializer
 
-from langflow.template.field.base import InputField
+from langflow.template.field.base import InputField, OutputField
 from langflow.template.frontend_node.constants import FORCE_SHOW_FIELDS
 from langflow.template.frontend_node.formatter import field_formatters
 from langflow.template.template.base import Template
@@ -77,6 +77,8 @@ class FrontendNode(BaseModel):
     """List of conditional paths for the frontend node."""
     frozen: bool = False
     """Whether the frontend node is frozen."""
+    outputs: List[OutputField] = []
+    """List of output fields for the frontend node."""
 
     field_order: list[str] = []
     """Order of the fields in the frontend node."""
@@ -114,6 +116,15 @@ class FrontendNode(BaseModel):
             result["template"] = self.template.to_dict(format_func)
         name = result.pop("name")
 
+        # Migrate base classes to outputs
+        if "output_types" in result:
+            for base_class in result["output_types"]:
+                output = OutputField(
+                    name=base_class,
+                    types=[base_class],
+                )
+                result["outputs"].append(output.model_dump())
+
         return {name: result}
 
     # For backwards compatibility

src/frontend/src/utils/reactflowUtils.ts

@@ -444,9 +444,13 @@ export function updateNewOutput({ nodes, edges }: updateEdgesHandleIdsType) {
           !sourceNode.data.node?.outputs ||
           sourceNode.data.node!.outputs!.length === 0
         ) {
-          sourceNode.data.node!.outputs = [
-            { types: sourceNode.data.node!.base_classes, selected: selected },
-          ];
+          const outputTypes = sourceNode.data.node!.output_types;
+          // create a new output field for each output type
+          sourceNode.data.node!.outputs = outputTypes?.map((type) => ({
+            types: [type],
+            selected: selected,
+            name: type,
+          }));
         }
       }
       edge.sourceHandle = scapedJSONStringfy(newSourceHandle);