@mastra/playground-ui 5.1.11-alpha.0 → 5.1.11-alpha.2

package/dist/index.cjs.js

@@ -3239,7 +3239,7 @@ const ImageWithFallback = ({ alt, src, ...rest }) => {
   );
 };
 
-const SyntaxHighlighter$2 = reactSyntaxHighlighter.makePrismAsyncSyntaxHighlighter({
+const SyntaxHighlighter$3 = reactSyntaxHighlighter.makePrismAsyncSyntaxHighlighter({
   style: prism.coldarkDark,
   customStyle: {
     margin: 0,
@@ -3458,7 +3458,7 @@ const defaultComponents = reactMarkdown.unstable_memoizeMarkdownComponents({
     );
   },
   CodeHeader,
-  SyntaxHighlighter: SyntaxHighlighter$2,
+  SyntaxHighlighter: SyntaxHighlighter$3,
   img: ImageWithFallback
 });
 
@@ -4337,7 +4337,7 @@ const useCodemirrorTheme$1 = () => {
     []
   );
 };
-const SyntaxHighlighter$1 = ({ data, className }) => {
+const SyntaxHighlighter$2 = ({ data, className }) => {
   const formattedCode = JSON.stringify(data, null, 2);
   const theme = useCodemirrorTheme$1();
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx("rounded-md bg-surface4 p-1 font-mono relative", className), children: [
@@ -4364,7 +4364,7 @@ const ToolFallback$1 = ({ toolName, argsText, result }) => {
   let argSlot;
   try {
     const parsedArgs = JSON.parse(argsText);
-    argSlot = /* @__PURE__ */ jsxRuntime.jsx(SyntaxHighlighter$1, { data: parsedArgs });
+    argSlot = /* @__PURE__ */ jsxRuntime.jsx(SyntaxHighlighter$2, { data: parsedArgs });
   } catch {
     argSlot = /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "whitespace-pre-wrap", children: argsText });
   }
@@ -4380,7 +4380,7 @@ const ToolFallback$1 = ({ toolName, argsText, result }) => {
       ] }),
       result !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-2", children: [
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium pb-2", children: "Tool result" }),
-        typeof result === "string" ? /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "whitespace-pre-wrap", children: result }) : /* @__PURE__ */ jsxRuntime.jsx(SyntaxHighlighter$1, { data: result })
+        typeof result === "string" ? /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "whitespace-pre-wrap", children: result }) : /* @__PURE__ */ jsxRuntime.jsx(SyntaxHighlighter$2, { data: result })
       ] })
     ] }) })
   ] });
@@ -4761,7 +4761,7 @@ const SpeechInput$1 = () => {
       variant: "ghost",
       className: "rounded-full",
       onClick: () => isListening ? stop() : start(),
-      children: isListening ? /* @__PURE__ */ jsxRuntime.jsx(CircleStopIcon$2, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Mic, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" })
+      children: isListening ? /* @__PURE__ */ jsxRuntime.jsx(CircleStopIcon$1, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Mic, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" })
     }
   );
 };
@@ -4777,7 +4777,7 @@ const ComposerAction$1 = ({ showFileSupport }) => {
         children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" })
       }
     ) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(react.ThreadPrimitive.If, { running: true, children: /* @__PURE__ */ jsxRuntime.jsx(react.ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipIconButton, { tooltip: "Cancel", variant: "default", children: /* @__PURE__ */ jsxRuntime.jsx(CircleStopIcon$2, {}) }) }) })
+    /* @__PURE__ */ jsxRuntime.jsx(react.ThreadPrimitive.If, { running: true, children: /* @__PURE__ */ jsxRuntime.jsx(react.ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipIconButton, { tooltip: "Cancel", variant: "default", children: /* @__PURE__ */ jsxRuntime.jsx(CircleStopIcon$1, {}) }) }) })
   ] });
 };
 const EditComposer$1 = () => {
@@ -4789,7 +4789,7 @@ const EditComposer$1 = () => {
     ] })
   ] });
 };
-const CircleStopIcon$2 = () => {
+const CircleStopIcon$1 = () => {
   return /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "currentColor", width: "16", height: "16", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "10", height: "10", x: "3", y: "3", rx: "2" }) });
 };
 
@@ -6350,7 +6350,7 @@ const useCodemirrorTheme = () => {
     []
   );
 };
-const SyntaxHighlighter = ({ data }) => {
+const SyntaxHighlighter$1 = ({ data }) => {
   const formattedCode = JSON.stringify(data, null, 2);
   const theme = useCodemirrorTheme();
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md bg-[#1a1a1a] p-1 font-mono", children: /* @__PURE__ */ jsxRuntime.jsx(CodeMirror, { value: formattedCode, theme, extensions: [langJson.jsonLanguage] }) });
@@ -6465,10 +6465,10 @@ const AttributeValue = ({ value }) => {
     return /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "p", variant: "ui-md", className: "text-icon6", children: String(value) });
   }
   if (typeof value === "object") {
-    return /* @__PURE__ */ jsxRuntime.jsx(SyntaxHighlighter, { data: value });
+    return /* @__PURE__ */ jsxRuntime.jsx(SyntaxHighlighter$1, { data: value });
   }
   try {
-    return /* @__PURE__ */ jsxRuntime.jsx(SyntaxHighlighter, { data: JSON.parse(value) });
+    return /* @__PURE__ */ jsxRuntime.jsx(SyntaxHighlighter$1, { data: JSON.parse(value) });
   } catch {
     return /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "p", variant: "ui-md", className: "text-icon6", children: String(value) });
   }
@@ -8180,7 +8180,7 @@ const WorkflowRunEventForm = ({ event, runId, onSendEvent }) => {
     const formatted = await formatJSON(eventData);
     setEventData(formatted);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(TooltipProvider, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between pb-2", children: [
         /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "label", variant: "ui-md", className: "text-icon3", children: "Event data (JSON)" }),
@@ -8287,7 +8287,7 @@ const WorkflowStepActionBar = ({
     ] }),
     onShowTrace && /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: onShowTrace, children: "Show trace" }),
     showEventForm && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: () => setIsEventFormOpen(true), children: "Send event" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Button, { className: "ring-1 ring-accent5 !text-accent5", onClick: () => setIsEventFormOpen(true), children: "Send event" }),
       /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: isEventFormOpen, onOpenChange: setIsEventFormOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: dialogContentClass, children: [
         /* @__PURE__ */ jsxRuntime.jsxs(DialogTitle, { className: dialogTitleClass, children: [
           "Send ",
@@ -9346,7 +9346,7 @@ const SpeechInput = () => {
       variant: "ghost",
       className: "rounded-full",
       onClick: () => isListening ? stop() : start(),
-      children: isListening ? /* @__PURE__ */ jsxRuntime.jsx(CircleStopIcon$1, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Mic, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" })
+      children: isListening ? /* @__PURE__ */ jsxRuntime.jsx(CircleStopIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Mic, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" })
     }
   );
 };
@@ -9362,7 +9362,7 @@ const ComposerAction = ({ showFileSupport }) => {
         children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" })
       }
     ) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(react.ThreadPrimitive.If, { running: true, children: /* @__PURE__ */ jsxRuntime.jsx(react.ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipIconButton, { tooltip: "Cancel", variant: "default", children: /* @__PURE__ */ jsxRuntime.jsx(CircleStopIcon$1, {}) }) }) })
+    /* @__PURE__ */ jsxRuntime.jsx(react.ThreadPrimitive.If, { running: true, children: /* @__PURE__ */ jsxRuntime.jsx(react.ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipIconButton, { tooltip: "Cancel", variant: "default", children: /* @__PURE__ */ jsxRuntime.jsx(CircleStopIcon, {}) }) }) })
   ] });
 };
 const EditComposer = () => {
@@ -9374,7 +9374,7 @@ const EditComposer = () => {
     ] })
   ] });
 };
-const CircleStopIcon$1 = () => {
+const CircleStopIcon = () => {
   return /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "currentColor", width: "16", height: "16", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "10", height: "10", x: "3", y: "3", rx: "2" }) });
 };
 
@@ -11120,12 +11120,88 @@ const WorkflowStatus = ({ stepId, status, result }) => {
       ] }),
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-md bg-surface4 p-1 font-mono relative", children: [
         /* @__PURE__ */ jsxRuntime.jsx(CopyButton, { content: JSON.stringify(result, null, 2), className: "absolute top-2 right-2 z-10" }),
-        /* @__PURE__ */ jsxRuntime.jsx(SyntaxHighlighter, { data: result })
+        /* @__PURE__ */ jsxRuntime.jsx(SyntaxHighlighter$1, { data: result })
       ] })
     }
   );
 };
 
+const WorkflowInputData = ({
+  schema,
+  defaultValues,
+  isSubmitLoading,
+  submitButtonLabel,
+  onSubmit
+}) => {
+  const [type, setType] = React.useState("form");
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(RadioGroup, { value: type, onValueChange: (value) => setType(value), className: "pb-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(RadioGroupItem, { value: "form", id: "form" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "form", className: "!text-icon3 text-ui-sm", children: "Form" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(RadioGroupItem, { value: "json", id: "json" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "json", className: "!text-icon3 text-ui-sm", children: "JSON" })
+      ] })
+    ] }) }),
+    type === "form" ? /* @__PURE__ */ jsxRuntime.jsx(
+      DynamicForm,
+      {
+        schema,
+        defaultValues,
+        isSubmitLoading,
+        submitButtonLabel,
+        onSubmit
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(
+      JSONInput,
+      {
+        schema,
+        defaultValues,
+        isSubmitLoading,
+        submitButtonLabel,
+        onSubmit
+      }
+    )
+  ] });
+};
+const JSONInput = ({ schema, defaultValues, isSubmitLoading, submitButtonLabel, onSubmit }) => {
+  const [errors, setErrors] = React.useState([]);
+  const [inputData, setInputData] = React.useState(JSON.stringify(defaultValues ?? {}, null, 2));
+  const handleSubmit = () => {
+    setErrors([]);
+    try {
+      const result = schema.safeParse(JSON.parse(inputData));
+      if (!result.success) {
+        setErrors(result.error.issues.map((e) => `[${e.path.join(".")}] ${e.message}`));
+      } else {
+        onSubmit(result.data);
+      }
+    } catch (e) {
+      setErrors(["Invalid JSON provided"]);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
+    errors.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-sm border-accent2 rounded-lg p-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Txt, { as: "p", variant: "ui-md", className: "text-accent2 font-semibold", children: [
+        errors.length,
+        " errors found"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "list-disc list-inside", children: errors.map((error, idx) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "text-ui-sm text-accent2", children: error }, idx)) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(SyntaxHighlighter, { data: inputData, onChange: setInputData }),
+    /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "light", onClick: handleSubmit, className: "w-full", size: "lg", children: isSubmitLoading ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "animate-spin" }) : submitButtonLabel })
+  ] });
+};
+const SyntaxHighlighter = ({ data, onChange }) => {
+  const theme = useCodemirrorTheme$1();
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-md bg-[#1a1a1a] p-1 font-mono", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(CopyButton, { content: data, className: "absolute top-2 right-2 z-10" }),
+    /* @__PURE__ */ jsxRuntime.jsx(CodeMirror, { value: data, theme, extensions: [langJson.jsonLanguage], onChange })
+  ] });
+};
+
 function WorkflowTrigger({
   workflowId,
   setRunId,
@@ -11211,24 +11287,12 @@ function WorkflowTrigger({
   const hasWorkflowActivePaths = Object.values(workflowActivePaths).length > 0;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-full pt-3 pb-12", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 px-5 pb-5 border-b-sm border-border1", children: [
-      result?.runId && /* @__PURE__ */ jsxRuntime.jsxs(
-        Button,
-        {
-          variant: "light",
-          onClick: handleCancelWorkflowRun,
-          disabled: !!cancelResponse?.message || isCancellingWorkflowRun,
-          children: [
-            isCancellingWorkflowRun ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "animate-spin" }) }) : /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(CircleStopIcon, {}) }),
-            cancelResponse?.message || "Cancel Workflow Run"
-          ]
-        }
-      ),
       (isResumingWorkflow || isSuspendedSteps && isStreamingWorkflow) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-2 px-5 flex items-center gap-2 bg-surface5 -mx-5 -mt-5 border-b-sm border-border1", children: [
         /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "animate-spin text-icon6" }) }),
         /* @__PURE__ */ jsxRuntime.jsx(Txt, { children: "Resuming workflow" })
       ] }),
       !isSuspendedSteps && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: zodInputSchema ? /* @__PURE__ */ jsxRuntime.jsx(
-        DynamicForm,
+        WorkflowInputData,
         {
           schema: zodInputSchema,
           defaultValues: payload,
@@ -11264,7 +11328,7 @@ function WorkflowTrigger({
             }
           ) }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            DynamicForm,
+            WorkflowInputData,
             {
               schema: stepSchema,
               isSubmitLoading: isResumingWorkflow,
@@ -11281,6 +11345,20 @@ function WorkflowTrigger({
           )
         ] }, step.stepId);
       }),
+      result?.runId && /* @__PURE__ */ jsxRuntime.jsxs(
+        Button,
+        {
+          variant: "light",
+          className: "w-full",
+          size: "lg",
+          onClick: handleCancelWorkflowRun,
+          disabled: !!cancelResponse?.message || isCancellingWorkflowRun,
+          children: [
+            isCancellingWorkflowRun ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "animate-spin" }) }) : /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.StopCircle, {}) }),
+            cancelResponse?.message || "Cancel Workflow Run"
+          ]
+        }
+      ),
       hasWorkflowActivePaths && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "border-border1 border-sm my-5" }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
@@ -11303,13 +11381,10 @@ const WorkflowJsonDialog = ({ result }) => {
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxRuntime.jsx(DialogPortal, { children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "max-w-6xl max-h-[90vh] overflow-y-auto overflow-x-hidden bg-surface2", children: [
       /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: "Workflow Execution (JSON)" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full overflow-x-scroll", children: /* @__PURE__ */ jsxRuntime.jsx(SyntaxHighlighter$1, { data: result, className: "p-4" }) })
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full overflow-x-scroll", children: /* @__PURE__ */ jsxRuntime.jsx(SyntaxHighlighter$2, { data: result, className: "p-4" }) })
     ] }) }) })
   ] });
 };
-const CircleStopIcon = () => {
-  return /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "currentColor", width: "16", height: "16", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "10", height: "10", x: "3", y: "3", rx: "2" }) });
-};
 
 const WorkflowRuns = ({ workflowId, runId, isLoading, runs, onPressRun }) => {
   if (isLoading) {