@mastra/playground-ui 5.0.2 → 5.0.3-alpha.0

package/dist/index.cjs.js

@@ -6743,20 +6743,27 @@ const getStepNodeAndEdge = ({
   yIndex,
   prevNodeIds,
   nextStepFlow,
-  condition
+  condition,
+  allPrevNodeIds
 }) => {
   let nextNodeIds = [];
   if (nextStepFlow?.type === "step" || nextStepFlow?.type === "foreach" || nextStepFlow?.type === "loop") {
-    nextNodeIds = [nextStepFlow?.step.id];
+    const nextStepId = allPrevNodeIds?.includes(nextStepFlow.step.id) ? `${nextStepFlow.step.id}-${yIndex + 1}` : nextStepFlow.step.id;
+    nextNodeIds = [nextStepId];
   }
   if (nextStepFlow?.type === "parallel") {
-    nextNodeIds = nextStepFlow?.steps.map((step) => step.step.id) || [];
+    nextNodeIds = nextStepFlow?.steps.map((step) => {
+      const stepId = step.step.id;
+      const nextStepId = allPrevNodeIds?.includes(stepId) ? `${stepId}-${yIndex + 1}` : stepId;
+      return nextStepId;
+    }) || [];
   }
   if (nextStepFlow?.type === "conditional") {
     nextNodeIds = nextStepFlow?.serializedConditions.map((cond) => cond.id) || [];
   }
   if (stepFlow.type === "step" || stepFlow.type === "foreach") {
     const hasGraph = stepFlow.step.component === "WORKFLOW";
+    const nodeId = allPrevNodeIds?.includes(stepFlow.step.id) ? `${stepFlow.step.id}-${yIndex}` : stepFlow.step.id;
     const nodes = [
       ...condition ? [
         {
@@ -6773,7 +6780,7 @@ const getStepNodeAndEdge = ({
         }
       ] : [],
       {
-        id: stepFlow.step.id,
+        id: nodeId,
         position: { x: xIndex * 300, y: (yIndex + (condition ? 1 : 0)) * 100 },
         type: hasGraph ? "nested-node" : "default-node",
         data: {
@@ -6781,7 +6788,7 @@ const getStepNodeAndEdge = ({
           description: stepFlow.step.description,
           withoutTopHandle: condition ? false : !prevNodeIds.length,
           withoutBottomHandle: !nextNodeIds.length,
-          stepGraph: hasGraph ? stepFlow.step.stepFlow : void 0
+          stepGraph: hasGraph ? stepFlow.step.serializedStepFlow : void 0
         }
       }
     ];
@@ -6794,25 +6801,25 @@ const getStepNodeAndEdge = ({
           ...defaultEdgeOptions
         })),
         {
-          id: `e${condition.id}-${stepFlow.step.id}`,
+          id: `e${condition.id}-${nodeId}`,
           source: condition.id,
-          target: stepFlow.step.id,
+          target: nodeId,
           ...defaultEdgeOptions
         }
       ] : prevNodeIds.map((prevNodeId) => ({
-        id: `e${prevNodeId}-${stepFlow.step.id}`,
+        id: `e${prevNodeId}-${nodeId}`,
         source: prevNodeId,
-        target: stepFlow.step.id,
+        target: nodeId,
         ...defaultEdgeOptions
       })),
       ...!nextNodeIds.length ? [] : nextNodeIds.map((nextNodeId) => ({
-        id: `e${stepFlow.step.id}-${nextNodeId}`,
-        source: stepFlow.step.id,
+        id: `e${nodeId}-${nextNodeId}`,
+        source: nodeId,
         target: nextNodeId,
         ...defaultEdgeOptions
       }))
     ];
-    return { nodes, edges, nextPrevNodeIds: [stepFlow.step.id] };
+    return { nodes, edges, nextPrevNodeIds: [nodeId] };
   }
   if (stepFlow.type === "loop") {
     const { step: _step, serializedCondition, loopType } = stepFlow;
@@ -6827,7 +6834,7 @@ const getStepNodeAndEdge = ({
           description: _step.description,
           withoutTopHandle: !prevNodeIds.length,
           withoutBottomHandle: false,
-          stepGraph: hasGraph ? _step.stepFlow : void 0
+          stepGraph: hasGraph ? _step.serializedStepFlow : void 0
         }
       },
       {
@@ -6874,7 +6881,8 @@ const getStepNodeAndEdge = ({
         xIndex: index,
         yIndex,
         prevNodeIds,
-        nextStepFlow
+        nextStepFlow,
+        allPrevNodeIds
       });
       nodes.push(..._nodes);
       edges.push(..._edges);
@@ -6891,12 +6899,17 @@ const getStepNodeAndEdge = ({
         yIndex,
         prevNodeIds,
         nextStepFlow,
-        condition: stepFlow.serializedConditions[index]
+        condition: stepFlow.serializedConditions[index],
+        allPrevNodeIds
       });
       nodes.push(..._nodes);
       edges.push(..._edges);
     });
-    return { nodes, edges, nextPrevNodeIds: nodes.map((node) => node.id) };
+    return {
+      nodes,
+      edges,
+      nextPrevNodeIds: nodes.filter(({ type }) => type !== "condition-node").map((node) => node.id)
+    };
   }
   return { nodes: [], edges: [], nextPrevNodeIds: [] };
 };
@@ -6912,6 +6925,7 @@ const constructVNextNodesAndEdges = ({
   let nodes = [];
   let edges = [];
   let prevNodeIds = [];
+  let allPrevNodeIds = [];
   for (let index = 0; index < stepGraph.length; index++) {
     const {
       nodes: _nodes,
@@ -6922,11 +6936,13 @@ const constructVNextNodesAndEdges = ({
       xIndex: index,
       yIndex: index,
       prevNodeIds,
-      nextStepFlow: index === stepGraph.length - 1 ? void 0 : stepGraph[index + 1]
+      nextStepFlow: index === stepGraph.length - 1 ? void 0 : stepGraph[index + 1],
+      allPrevNodeIds
     });
     nodes.push(..._nodes);
     edges.push(..._edges);
     prevNodeIds = nextPrevNodeIds;
+    allPrevNodeIds.push(...prevNodeIds);
   }
   const { nodes: layoutedNodes, edges: layoutedEdges } = getLayoutedElements(nodes, edges);
   return { nodes: layoutedNodes, edges: layoutedEdges };
@@ -7459,6 +7475,13 @@ const StringField = ({ inputProps, error, field, id }) => {
 
 const NumberField = ({ inputProps, error, field, id }) => {
   const { key, ...props } = inputProps;
+  React.useEffect(() => {
+    if (field.default !== void 0) {
+      props.onChange({
+        target: { value: Number(field.default), name: inputProps.name }
+      });
+    }
+  }, [field.default]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Input,
     {
@@ -7466,7 +7489,7 @@ const NumberField = ({ inputProps, error, field, id }) => {
       type: "number",
       className: error ? "border-destructive" : "",
       ...props,
-      defaultValue: field.default,
+      defaultValue: field.default !== void 0 ? Number(field.default) : void 0,
       onChange: (e) => {
         const value = e.target.value;
         if (value !== "" && !isNaN(Number(value))) {
@@ -8366,7 +8389,8 @@ function VNextWorkflowNestedGraph({ stepGraph, open }) {
     "default-node": WorkflowDefaultNode,
     "condition-node": WorkflowConditionNode,
     "after-node": WorkflowAfterNode,
-    "loop-result-node": WorkflowLoopResultNode
+    "loop-result-node": WorkflowLoopResultNode,
+    "nested-node": VNextWorkflowNestedNode
   };
   React.useEffect(() => {
     if (open) {
@@ -8398,17 +8422,40 @@ const VNextWorkflowNestedGraphContext = React.createContext(
 );
 function VNextWorkflowNestedGraphProvider({ children }) {
   const [stepGraph, setStepGraph] = React.useState(null);
+  const [parentStepGraphList, setParentStepGraphList] = React.useState([]);
   const [openDialog, setOpenDialog] = React.useState(false);
   const [label, setLabel] = React.useState("");
+  const [switching, setSwitching] = React.useState(false);
   const closeNestedGraph = () => {
-    setOpenDialog(false);
-    setStepGraph(null);
-    setLabel("");
+    if (parentStepGraphList.length) {
+      setSwitching(true);
+      const lastStepGraph = parentStepGraphList[parentStepGraphList.length - 1];
+      setStepGraph(lastStepGraph.stepGraph);
+      setLabel(lastStepGraph.label);
+      setParentStepGraphList(parentStepGraphList.slice(0, -1));
+      setTimeout(() => {
+        setSwitching(false);
+      }, 500);
+    } else {
+      setOpenDialog(false);
+      setStepGraph(null);
+      setLabel("");
+    }
   };
-  const showNestedGraph = ({ label: label2, stepGraph: stepGraph2 }) => {
-    setLabel(label2);
-    setStepGraph(stepGraph2);
+  const showNestedGraph = ({
+    label: newLabel,
+    stepGraph: newStepGraph
+  }) => {
+    if (stepGraph) {
+      setSwitching(true);
+      setParentStepGraphList([...parentStepGraphList, { stepGraph, label }]);
+    }
+    setLabel(newLabel);
+    setStepGraph(newStepGraph);
     setOpenDialog(true);
+    setTimeout(() => {
+      setSwitching(false);
+    }, 500);
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     VNextWorkflowNestedGraphContext.Provider,
@@ -8427,7 +8474,7 @@ function VNextWorkflowNestedGraphProvider({ children }) {
               " workflow"
             ] })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(react$2.ReactFlowProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(VNextWorkflowNestedGraph, { stepGraph, open: openDialog }) })
+          switching ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}) }) : /* @__PURE__ */ jsxRuntime.jsx(react$2.ReactFlowProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(VNextWorkflowNestedGraph, { stepGraph, open: openDialog }) })
         ] }) }) })
       ]
     }