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

package/dist/index.es.js

@@ -4035,13 +4035,16 @@ function MastraRuntimeProvider({
           if (message?.toolInvocations?.length > 0) {
             return {
               ...message,
-              content: message.toolInvocations.map((toolInvocation) => ({
-                type: "tool-call",
-                toolCallId: toolInvocation?.toolCallId,
-                toolName: toolInvocation?.toolName,
-                args: toolInvocation?.args,
-                result: toolInvocation?.result
-              }))
+              content: [
+                ...typeof message.content === "string" ? [{ type: "text", text: message.content }] : [],
+                ...message.toolInvocations.map((toolInvocation) => ({
+                  type: "tool-call",
+                  toolCallId: toolInvocation?.toolCallId,
+                  toolName: toolInvocation?.toolName,
+                  args: toolInvocation?.args,
+                  result: toolInvocation?.result
+                }))
+              ]
             };
           }
           return message;
@@ -4156,6 +4159,13 @@ function MastraRuntimeProvider({
             };
             if (!assistantMessageAdded) {
               assistantMessageAdded = true;
+              if (assistantToolCallAddedForUpdater) {
+                assistantToolCallAddedForUpdater = false;
+              }
+              return [...currentConversation, message2];
+            }
+            if (assistantToolCallAddedForUpdater) {
+              assistantToolCallAddedForUpdater = false;
               return [...currentConversation, message2];
             }
             return [...currentConversation.slice(0, -1), message2];
@@ -4183,22 +4193,18 @@ function MastraRuntimeProvider({
         if (!response.body) {
           throw new Error("No response body");
         }
-        const parts = [];
         let content = "";
-        let currentTextPart = null;
         let assistantMessageAdded = false;
+        let assistantToolCallAddedForUpdater = false;
+        let assistantToolCallAddedForContent = false;
         await response.processDataStream({
           onTextPart(value) {
-            if (currentTextPart == null) {
-              currentTextPart = {
-                type: "text",
-                text: value
-              };
-              parts.push(currentTextPart);
+            if (assistantToolCallAddedForContent) {
+              assistantToolCallAddedForContent = false;
+              content = value;
             } else {
-              currentTextPart.text += value;
+              content += value;
             }
-            content += value;
             updater();
           },
           async onToolCallPart(value) {
@@ -4225,6 +4231,8 @@ function MastraRuntimeProvider({
                     }
                   ]
                 };
+                assistantToolCallAddedForUpdater = true;
+                assistantToolCallAddedForContent = true;
                 return [...currentConversation.slice(0, -1), updatedMessage];
               }
               const newMessage = {
@@ -4239,6 +4247,8 @@ function MastraRuntimeProvider({
                   }
                 ]
               };
+              assistantToolCallAddedForUpdater = true;
+              assistantToolCallAddedForContent = true;
               return [...currentConversation, newMessage];
             });
           },
@@ -6711,20 +6721,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 ? [
         {
@@ -6741,7 +6758,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: {
@@ -6749,7 +6766,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
         }
       }
     ];
@@ -6762,25 +6779,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;
@@ -6795,7 +6812,7 @@ const getStepNodeAndEdge = ({
           description: _step.description,
           withoutTopHandle: !prevNodeIds.length,
           withoutBottomHandle: false,
-          stepGraph: hasGraph ? _step.stepFlow : void 0
+          stepGraph: hasGraph ? _step.serializedStepFlow : void 0
         }
       },
       {
@@ -6842,7 +6859,8 @@ const getStepNodeAndEdge = ({
         xIndex: index,
         yIndex,
         prevNodeIds,
-        nextStepFlow
+        nextStepFlow,
+        allPrevNodeIds
       });
       nodes.push(..._nodes);
       edges.push(..._edges);
@@ -6859,12 +6877,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: [] };
 };
@@ -6880,6 +6903,7 @@ const constructVNextNodesAndEdges = ({
   let nodes = [];
   let edges = [];
   let prevNodeIds = [];
+  let allPrevNodeIds = [];
   for (let index = 0; index < stepGraph.length; index++) {
     const {
       nodes: _nodes,
@@ -6890,11 +6914,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 };
@@ -7427,6 +7453,13 @@ const StringField = ({ inputProps, error, field, id }) => {
 
 const NumberField = ({ inputProps, error, field, id }) => {
   const { key, ...props } = inputProps;
+  useEffect(() => {
+    if (field.default !== void 0) {
+      props.onChange({
+        target: { value: Number(field.default), name: inputProps.name }
+      });
+    }
+  }, [field.default]);
   return /* @__PURE__ */ jsx(
     Input,
     {
@@ -7434,7 +7467,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))) {
@@ -8334,7 +8367,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
   };
   useEffect(() => {
     if (open) {
@@ -8366,17 +8400,40 @@ const VNextWorkflowNestedGraphContext = createContext(
 );
 function VNextWorkflowNestedGraphProvider({ children }) {
   const [stepGraph, setStepGraph] = useState(null);
+  const [parentStepGraphList, setParentStepGraphList] = useState([]);
   const [openDialog, setOpenDialog] = useState(false);
   const [label, setLabel] = useState("");
+  const [switching, setSwitching] = 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__ */ jsxs(
     VNextWorkflowNestedGraphContext.Provider,
@@ -8395,7 +8452,7 @@ function VNextWorkflowNestedGraphProvider({ children }) {
               " workflow"
             ] })
           ] }),
-          /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(VNextWorkflowNestedGraph, { stepGraph, open: openDialog }) })
+          switching ? /* @__PURE__ */ jsx("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsx(Spinner, {}) }) : /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(VNextWorkflowNestedGraph, { stepGraph, open: openDialog }) })
         ] }) }) })
       ]
     }