@mastra/playground-ui 5.1.7 → 5.1.8-alpha.0

package/dist/index.es.js

@@ -6861,8 +6861,12 @@ const defaultModelSettings = {
 const NetworkContext = createContext({});
 function NetworkProvider({ children }) {
   const [modelSettings, setModelSettings] = useState(defaultModelSettings);
+  const [chatWithLoop, setChatWithLoop] = useState(false);
+  const [maxIterations, setMaxIterations] = useState(void 0);
   const resetModelSettings = () => {
     setModelSettings(defaultModelSettings);
+    setChatWithLoop(false);
+    setMaxIterations(void 0);
   };
   return /* @__PURE__ */ jsx(
     NetworkContext.Provider,
@@ -6870,7 +6874,11 @@ function NetworkProvider({ children }) {
       value: {
         modelSettings,
         setModelSettings,
-        resetModelSettings
+        resetModelSettings,
+        chatWithLoop,
+        setChatWithLoop,
+        maxIterations,
+        setMaxIterations
       },
       children
     }
@@ -6883,9 +6891,11 @@ const NetworkChat = ({ agentId, memory }) => {
 };
 
 const VNextNetworkChatContext = createContext(void 0);
-const VNextNetworkChatProvider = ({ children, networkId }) => {
+const VNextNetworkChatProvider = ({ children }) => {
   const [state, setState] = useState({});
+  const { chatWithLoop } = useContext(NetworkContext);
   const handleStep = (uuid, record) => {
+    const addFinishStep = chatWithLoop && record.type === "step-finish" && record.payload?.id === "final-step";
     const id = record?.type === "finish" ? "finish" : record.type === "start" ? "start" : record.payload?.id;
     if (id.includes("mapping_")) return;
     setState((prevState) => {
@@ -6904,7 +6914,7 @@ const VNextNetworkChatProvider = ({ children, networkId }) => {
         [uuid]: {
           ...current,
           runId: current?.runId || record?.payload?.runId,
-          executionSteps: current?.steps?.[id] ? current?.executionSteps : [...current?.executionSteps || [], id],
+          executionSteps: current?.steps?.[id] ? [...current?.executionSteps, ...addFinishStep ? ["finish"] : []] : [...current?.executionSteps || [], id],
           steps: {
             ...current?.steps,
             [id]: {
@@ -8587,7 +8597,8 @@ const useResumeWorkflow = () => {
 const LabelMappings = {
   "routing-step": "Decision making process",
   "agent-step": "Agent execution",
-  "workflow-step": "Workflow execution"
+  "workflow-step": "Workflow execution",
+  "final-step": "Task completed"
 };
 const StepDropdown = () => {
   const [isExpanded, setIsExpanded] = useState(false);
@@ -8615,7 +8626,7 @@ const StepDropdown = () => {
 const Steps = ({ id }) => {
   const { state } = useVNextNetworkChat();
   const currentState = state[id];
-  return /* @__PURE__ */ jsx("ol", { className: "flex flex-col gap-px rounded-lg overflow-hidden", children: currentState.executionSteps.filter((stepId) => stepId !== "start").map((stepId, index) => /* @__PURE__ */ jsx(StepEntry, { stepId, step: currentState.steps[stepId], runId: currentState.runId }, index)) });
+  return /* @__PURE__ */ jsx("ol", { className: "flex flex-col gap-px rounded-lg overflow-hidden", children: currentState.executionSteps.filter((stepId) => stepId !== "start").map((stepId, index) => /* @__PURE__ */ jsx(StepEntry, { stepId, step: currentState.steps[stepId] || {}, runId: currentState.runId }, index)) });
 };
 const StepEntry = ({ stepId, step, runId }) => {
   const [expanded, setExpanded] = useState(false);
@@ -8648,6 +8659,16 @@ const StepEntry = ({ stepId, step, runId }) => {
         /* @__PURE__ */ jsx(Txt, { variant: "ui-sm", className: "text-icon6", children: stepResult?.output?.resourceId || "N/A" })
       ] })
     ] }),
+    stepId === "final-step" && expanded && /* @__PURE__ */ jsxs("div", { className: "bg-surface1 p-3 space-y-4", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(Txt, { variant: "ui-sm", className: "text-icon3 font-medium", children: "Task:" }),
+        /* @__PURE__ */ jsx(Txt, { variant: "ui-sm", className: "text-icon6", children: stepResult?.output?.task || "N/A" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(Txt, { variant: "ui-sm", className: "text-icon3 font-medium", children: "Number of iterations:" }),
+        /* @__PURE__ */ jsx(Txt, { variant: "ui-sm", className: "text-icon6", children: stepResult?.output?.iteration || "N/A" })
+      ] })
+    ] }),
     stepId === "workflow-step" && stepResult?.output?.resourceId ? /* @__PURE__ */ jsx(
       WorkflowStepResultDialog,
       {
@@ -8903,6 +8924,7 @@ function VNextMastraNetworkRuntimeProvider({
   const { messages, setMessages, appendToLastMessage } = useMessages();
   const [currentThreadId, setCurrentThreadId] = useState(threadId);
   const { handleStep, state, setState } = useVNextNetworkChat();
+  const { chatWithLoop, maxIterations } = useContext(NetworkContext);
   const id = runIdRef.current;
   const currentState = id ? state[id] : void 0;
   useEffect(() => {
@@ -9037,53 +9059,161 @@ ${formatted}\`\`\``;
     setMessages((currentConversation) => [...currentConversation, { role: "user", content: input }]);
     setIsRunning(true);
     try {
-      await network.stream(
-        {
-          message: input,
-          threadId,
-          resourceId: networkId
-        },
-        (record) => {
-          if (runIdRef.current) {
-            if (record.type === "tool-call-delta") {
-              appendToLastMessage(record.argsTextDelta);
-            } else if (record.type === "tool-call-streaming-start") {
-              setMessages((msgs) => [...msgs, { role: "assistant", content: [{ type: "text", text: "" }] }]);
-              setTimeout(() => {
-                refreshThreadList?.();
-              }, 500);
-              return;
-            } else {
-              handleStep(runIdRef.current, record);
-            }
-          } else if (record.type === "start") {
-            const id2 = v4();
-            runIdRef.current = id2;
-            setMessages((currentConversation) => {
-              return [
-                ...currentConversation,
-                {
-                  role: "assistant",
-                  metadata: {
-                    custom: {
-                      id: id2
-                    }
-                  },
-                  content: [
+      if (chatWithLoop) {
+        const run = async (result, messageId) => {
+          const formatted = await formatJSON(result);
+          const finalResponse = `\`\`\`json
+${formatted}\`\`\``;
+          setMessages((currentConversation) => {
+            return currentConversation.map((message2) => {
+              if (message2.metadata?.custom?.id === messageId) {
+                return { ...message2, content: [{ type: "text", text: finalResponse }] };
+              }
+              return message2;
+            });
+          });
+        };
+        let isAgentNetworkOuterWorkflowCompleted = false;
+        await network.loopStream(
+          {
+            message: input,
+            threadId,
+            resourceId: networkId,
+            maxIterations
+          },
+          async (record) => {
+            if (record.type === "step-start" && record.payload?.id === "Agent-Network-Outer-Workflow") {
+              const id2 = v4();
+              runIdRef.current = id2;
+              setMessages((currentConversation) => {
+                return [
+                  ...currentConversation,
+                  {
+                    role: "assistant",
+                    metadata: {
+                      custom: {
+                        id: id2
+                      }
+                    },
+                    content: [
+                      {
+                        type: "text",
+                        text: "start"
+                      }
+                    ]
+                  }
+                ];
+              });
+            } else if (runIdRef.current) {
+              if (record.type === "tool-call-delta") {
+                appendToLastMessage(record.argsTextDelta);
+              } else if (record.type === "tool-call-streaming-start") {
+                setMessages((msgs) => [...msgs, { role: "assistant", content: [{ type: "text", text: "" }] }]);
+                setTimeout(() => {
+                  refreshThreadList?.();
+                }, 500);
+                return;
+              } else {
+                if (record.type === "step-finish" && record.payload?.id === "Agent-Network-Outer-Workflow") {
+                  if (!isAgentNetworkOuterWorkflowCompleted) {
+                    handleStep(runIdRef.current, { ...record, type: "finish" });
+                    runIdRef.current = void 0;
+                  }
+                } else if (record.type === "step-result" && record.payload?.id === "workflow-step") {
+                  handleStep(runIdRef.current, record);
+                  const parsedResult = JSON.parse(record?.payload?.output?.result ?? "{}") ?? {};
+                  const runResult = parsedResult?.runResult ?? {};
+                  const formatedOutputId = v4();
+                  setMessages((msgs) => [
+                    ...msgs,
                     {
-                      type: "text",
-                      text: "start"
+                      role: "assistant",
+                      content: [
+                        {
+                          type: "text",
+                          text: ""
+                        }
+                      ],
+                      metadata: {
+                        custom: {
+                          id: formatedOutputId
+                        }
+                      }
                     }
-                  ]
+                  ]);
+                  run(JSON.stringify(runResult), formatedOutputId);
+                } else if (record.payload?.id === "Agent-Network-Outer-Workflow" || record.payload?.id === "finish-step") {
+                  if (record.type === "step-result" && record.payload?.id === "Agent-Network-Outer-Workflow") {
+                    isAgentNetworkOuterWorkflowCompleted = record?.payload?.output?.isComplete;
+                  }
+                } else {
+                  handleStep(runIdRef.current, record);
                 }
-              ];
-            });
+              }
+            }
+            if (record.type === "step-result" && record.payload?.id === "final-step") {
+              setMessages((msgs) => [
+                ...msgs,
+                { role: "assistant", content: [{ type: "text", text: record.payload?.output?.result }] }
+              ]);
+            }
+            if (record.type === "step-finish" && record.payload?.id === "final-step") {
+              runIdRef.current = void 0;
+            }
+            setTimeout(() => {
+              refreshThreadList?.();
+            }, 500);
           }
-          setTimeout(() => {
-            refreshThreadList?.();
-          }, 500);
-        }
-      );
+        );
+      } else {
+        await network.stream(
+          {
+            message: input,
+            threadId,
+            resourceId: networkId
+          },
+          (record) => {
+            if (runIdRef.current) {
+              if (record.type === "tool-call-delta") {
+                appendToLastMessage(record.argsTextDelta);
+              } else if (record.type === "tool-call-streaming-start") {
+                setMessages((msgs) => [...msgs, { role: "assistant", content: [{ type: "text", text: "" }] }]);
+                setTimeout(() => {
+                  refreshThreadList?.();
+                }, 500);
+                return;
+              } else {
+                handleStep(runIdRef.current, record);
+              }
+            } else if (record.type === "start") {
+              const id2 = v4();
+              runIdRef.current = id2;
+              setMessages((currentConversation) => {
+                return [
+                  ...currentConversation,
+                  {
+                    role: "assistant",
+                    metadata: {
+                      custom: {
+                        id: id2
+                      }
+                    },
+                    content: [
+                      {
+                        type: "text",
+                        text: "start"
+                      }
+                    ]
+                  }
+                ];
+              });
+            }
+            setTimeout(() => {
+              refreshThreadList?.();
+            }, 500);
+          }
+        );
+      }
       setIsRunning(false);
     } catch (error) {
       console.error("Error occurred in VNextMastraNetworkRuntimeProvider", error);
@@ -9111,7 +9241,7 @@ const VNextNetworkChat = ({
   memory,
   refreshThreadList
 }) => {
-  return /* @__PURE__ */ jsx(MessagesProvider, { children: /* @__PURE__ */ jsx(VNextNetworkChatProvider, { networkId, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(MessagesProvider, { children: /* @__PURE__ */ jsx(VNextNetworkChatProvider, { children: /* @__PURE__ */ jsx(
     VNextMastraNetworkRuntimeProvider,
     {
       networkId,