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

package/dist/index.es.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import React__default, { createContext, useContext, forwardRef, useState, useEffect, memo, useRef, useCallback, useMemo, Suspense, Fragment as Fragment$1 } from 'react';
 import { MastraClient } from '@mastra/client-js';
 import { useMessage, MessagePrimitive, ActionBarPrimitive, useComposerRuntime, ComposerPrimitive, useAttachment, AttachmentPrimitive, ThreadPrimitive, useExternalStoreRuntime, CompositeAttachmentAdapter, SimpleImageAttachmentAdapter, SimpleTextAttachmentAdapter, AssistantRuntimeProvider } from '@assistant-ui/react';
-import { CheckIcon as CheckIcon$1, CopyIcon, Check, Copy, ChevronUpIcon, X, FileText, FileIcon, CircleXIcon, Mic, PlusIcon, ArrowUp, Search, RefreshCcwIcon, ChevronRight, SortAsc, SortDesc, ChevronUp, ChevronDown, Circle, RefreshCw, LoaderCircle, ChevronDownIcon, ExternalLinkIcon, Braces, Loader2, Network, PauseIcon, HourglassIcon, CircleDashed, Footprints, CircleCheck, CircleX, Minus, Plus, Maximize, Workflow, AlertCircleIcon, AlertCircle, CalendarIcon, Brackets, TrashIcon, CirclePause } from 'lucide-react';
+import { CheckIcon as CheckIcon$1, CopyIcon, Check, Copy, ChevronUpIcon, X, FileText, FileIcon, CircleXIcon, Mic, PlusIcon, ArrowUp, Search, RefreshCcwIcon, ChevronRight, SortAsc, SortDesc, ChevronUp, ChevronDown, Circle, RefreshCw, LoaderCircle, ChevronDownIcon, ExternalLinkIcon, Braces, Loader2, Network, PauseIcon, HourglassIcon, CircleDashed, Footprints, CircleCheck, CircleX, Minus, Plus, Maximize, Workflow, AlertCircleIcon, AlertCircle, CalendarIcon, Brackets, TrashIcon, CirclePause, StopCircle } from 'lucide-react';
 import { Slot } from '@radix-ui/react-slot';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { TooltipProvider as TooltipProvider$1 } from '@radix-ui/react-tooltip';
@@ -3206,7 +3206,7 @@ const ImageWithFallback = ({ alt, src, ...rest }) => {
   );
 };
 
-const SyntaxHighlighter$2 = makePrismAsyncSyntaxHighlighter({
+const SyntaxHighlighter$3 = makePrismAsyncSyntaxHighlighter({
   style: coldarkDark,
   customStyle: {
     margin: 0,
@@ -3425,7 +3425,7 @@ const defaultComponents = unstable_memoizeMarkdownComponents({
     );
   },
   CodeHeader,
-  SyntaxHighlighter: SyntaxHighlighter$2,
+  SyntaxHighlighter: SyntaxHighlighter$3,
   img: ImageWithFallback
 });
 
@@ -4304,7 +4304,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__ */ jsxs("div", { className: clsx("rounded-md bg-surface4 p-1 font-mono relative", className), children: [
@@ -4331,7 +4331,7 @@ const ToolFallback$1 = ({ toolName, argsText, result }) => {
   let argSlot;
   try {
     const parsedArgs = JSON.parse(argsText);
-    argSlot = /* @__PURE__ */ jsx(SyntaxHighlighter$1, { data: parsedArgs });
+    argSlot = /* @__PURE__ */ jsx(SyntaxHighlighter$2, { data: parsedArgs });
   } catch {
     argSlot = /* @__PURE__ */ jsx("pre", { className: "whitespace-pre-wrap", children: argsText });
   }
@@ -4347,7 +4347,7 @@ const ToolFallback$1 = ({ toolName, argsText, result }) => {
       ] }),
       result !== void 0 && /* @__PURE__ */ jsxs("div", { className: "px-4 py-2", children: [
         /* @__PURE__ */ jsx("p", { className: "font-medium pb-2", children: "Tool result" }),
-        typeof result === "string" ? /* @__PURE__ */ jsx("pre", { className: "whitespace-pre-wrap", children: result }) : /* @__PURE__ */ jsx(SyntaxHighlighter$1, { data: result })
+        typeof result === "string" ? /* @__PURE__ */ jsx("pre", { className: "whitespace-pre-wrap", children: result }) : /* @__PURE__ */ jsx(SyntaxHighlighter$2, { data: result })
       ] })
     ] }) })
   ] });
@@ -4728,7 +4728,7 @@ const SpeechInput$1 = () => {
       variant: "ghost",
       className: "rounded-full",
       onClick: () => isListening ? stop() : start(),
-      children: isListening ? /* @__PURE__ */ jsx(CircleStopIcon$2, {}) : /* @__PURE__ */ jsx(Mic, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" })
+      children: isListening ? /* @__PURE__ */ jsx(CircleStopIcon$1, {}) : /* @__PURE__ */ jsx(Mic, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" })
     }
   );
 };
@@ -4744,7 +4744,7 @@ const ComposerAction$1 = ({ showFileSupport }) => {
         children: /* @__PURE__ */ jsx(ArrowUp, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" })
       }
     ) }) }),
-    /* @__PURE__ */ jsx(ThreadPrimitive.If, { running: true, children: /* @__PURE__ */ jsx(ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ jsx(TooltipIconButton, { tooltip: "Cancel", variant: "default", children: /* @__PURE__ */ jsx(CircleStopIcon$2, {}) }) }) })
+    /* @__PURE__ */ jsx(ThreadPrimitive.If, { running: true, children: /* @__PURE__ */ jsx(ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ jsx(TooltipIconButton, { tooltip: "Cancel", variant: "default", children: /* @__PURE__ */ jsx(CircleStopIcon$1, {}) }) }) })
   ] });
 };
 const EditComposer$1 = () => {
@@ -4756,7 +4756,7 @@ const EditComposer$1 = () => {
     ] })
   ] });
 };
-const CircleStopIcon$2 = () => {
+const CircleStopIcon$1 = () => {
   return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "currentColor", width: "16", height: "16", children: /* @__PURE__ */ jsx("rect", { width: "10", height: "10", x: "3", y: "3", rx: "2" }) });
 };
 
@@ -6317,7 +6317,7 @@ const useCodemirrorTheme = () => {
     []
   );
 };
-const SyntaxHighlighter = ({ data }) => {
+const SyntaxHighlighter$1 = ({ data }) => {
   const formattedCode = JSON.stringify(data, null, 2);
   const theme = useCodemirrorTheme();
   return /* @__PURE__ */ jsx("div", { className: "rounded-md bg-[#1a1a1a] p-1 font-mono", children: /* @__PURE__ */ jsx(CodeMirror, { value: formattedCode, theme, extensions: [jsonLanguage] }) });
@@ -6432,10 +6432,10 @@ const AttributeValue = ({ value }) => {
     return /* @__PURE__ */ jsx(Txt, { as: "p", variant: "ui-md", className: "text-icon6", children: String(value) });
   }
   if (typeof value === "object") {
-    return /* @__PURE__ */ jsx(SyntaxHighlighter, { data: value });
+    return /* @__PURE__ */ jsx(SyntaxHighlighter$1, { data: value });
   }
   try {
-    return /* @__PURE__ */ jsx(SyntaxHighlighter, { data: JSON.parse(value) });
+    return /* @__PURE__ */ jsx(SyntaxHighlighter$1, { data: JSON.parse(value) });
   } catch {
     return /* @__PURE__ */ jsx(Txt, { as: "p", variant: "ui-md", className: "text-icon6", children: String(value) });
   }
@@ -9313,7 +9313,7 @@ const SpeechInput = () => {
       variant: "ghost",
       className: "rounded-full",
       onClick: () => isListening ? stop() : start(),
-      children: isListening ? /* @__PURE__ */ jsx(CircleStopIcon$1, {}) : /* @__PURE__ */ jsx(Mic, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" })
+      children: isListening ? /* @__PURE__ */ jsx(CircleStopIcon, {}) : /* @__PURE__ */ jsx(Mic, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" })
     }
   );
 };
@@ -9329,7 +9329,7 @@ const ComposerAction = ({ showFileSupport }) => {
         children: /* @__PURE__ */ jsx(ArrowUp, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" })
       }
     ) }) }),
-    /* @__PURE__ */ jsx(ThreadPrimitive.If, { running: true, children: /* @__PURE__ */ jsx(ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ jsx(TooltipIconButton, { tooltip: "Cancel", variant: "default", children: /* @__PURE__ */ jsx(CircleStopIcon$1, {}) }) }) })
+    /* @__PURE__ */ jsx(ThreadPrimitive.If, { running: true, children: /* @__PURE__ */ jsx(ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ jsx(TooltipIconButton, { tooltip: "Cancel", variant: "default", children: /* @__PURE__ */ jsx(CircleStopIcon, {}) }) }) })
   ] });
 };
 const EditComposer = () => {
@@ -9341,7 +9341,7 @@ const EditComposer = () => {
     ] })
   ] });
 };
-const CircleStopIcon$1 = () => {
+const CircleStopIcon = () => {
   return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "currentColor", width: "16", height: "16", children: /* @__PURE__ */ jsx("rect", { width: "10", height: "10", x: "3", y: "3", rx: "2" }) });
 };
 
@@ -11087,12 +11087,88 @@ const WorkflowStatus = ({ stepId, status, result }) => {
       ] }),
       children: /* @__PURE__ */ jsxs("div", { className: "rounded-md bg-surface4 p-1 font-mono relative", children: [
         /* @__PURE__ */ jsx(CopyButton, { content: JSON.stringify(result, null, 2), className: "absolute top-2 right-2 z-10" }),
-        /* @__PURE__ */ jsx(SyntaxHighlighter, { data: result })
+        /* @__PURE__ */ jsx(SyntaxHighlighter$1, { data: result })
       ] })
     }
   );
 };
 
+const WorkflowInputData = ({
+  schema,
+  defaultValues,
+  isSubmitLoading,
+  submitButtonLabel,
+  onSubmit
+}) => {
+  const [type, setType] = useState("form");
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(RadioGroup, { value: type, onValueChange: (value) => setType(value), className: "pb-4", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx(RadioGroupItem, { value: "form", id: "form" }),
+        /* @__PURE__ */ jsx(Label, { htmlFor: "form", className: "!text-icon3 text-ui-sm", children: "Form" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx(RadioGroupItem, { value: "json", id: "json" }),
+        /* @__PURE__ */ jsx(Label, { htmlFor: "json", className: "!text-icon3 text-ui-sm", children: "JSON" })
+      ] })
+    ] }) }),
+    type === "form" ? /* @__PURE__ */ jsx(
+      DynamicForm,
+      {
+        schema,
+        defaultValues,
+        isSubmitLoading,
+        submitButtonLabel,
+        onSubmit
+      }
+    ) : /* @__PURE__ */ jsx(
+      JSONInput,
+      {
+        schema,
+        defaultValues,
+        isSubmitLoading,
+        submitButtonLabel,
+        onSubmit
+      }
+    )
+  ] });
+};
+const JSONInput = ({ schema, defaultValues, isSubmitLoading, submitButtonLabel, onSubmit }) => {
+  const [errors, setErrors] = useState([]);
+  const [inputData, setInputData] = 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__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+    errors.length > 0 && /* @__PURE__ */ jsxs("div", { className: "border-sm border-accent2 rounded-lg p-2", children: [
+      /* @__PURE__ */ jsxs(Txt, { as: "p", variant: "ui-md", className: "text-accent2 font-semibold", children: [
+        errors.length,
+        " errors found"
+      ] }),
+      /* @__PURE__ */ jsx("ul", { className: "list-disc list-inside", children: errors.map((error, idx) => /* @__PURE__ */ jsx("li", { className: "text-ui-sm text-accent2", children: error }, idx)) })
+    ] }),
+    /* @__PURE__ */ jsx(SyntaxHighlighter, { data: inputData, onChange: setInputData }),
+    /* @__PURE__ */ jsx(Button, { variant: "light", onClick: handleSubmit, className: "w-full", size: "lg", children: isSubmitLoading ? /* @__PURE__ */ jsx(Loader2, { className: "animate-spin" }) : submitButtonLabel })
+  ] });
+};
+const SyntaxHighlighter = ({ data, onChange }) => {
+  const theme = useCodemirrorTheme$1();
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-md bg-[#1a1a1a] p-1 font-mono", children: [
+    /* @__PURE__ */ jsx(CopyButton, { content: data, className: "absolute top-2 right-2 z-10" }),
+    /* @__PURE__ */ jsx(CodeMirror, { value: data, theme, extensions: [jsonLanguage], onChange })
+  ] });
+};
+
 function WorkflowTrigger({
   workflowId,
   setRunId,
@@ -11178,24 +11254,12 @@ function WorkflowTrigger({
   const hasWorkflowActivePaths = Object.values(workflowActivePaths).length > 0;
   return /* @__PURE__ */ jsxs("div", { className: "h-full pt-3 pb-12", children: [
     /* @__PURE__ */ jsxs("div", { className: "space-y-4 px-5 pb-5 border-b-sm border-border1", children: [
-      result?.runId && /* @__PURE__ */ jsxs(
-        Button,
-        {
-          variant: "light",
-          onClick: handleCancelWorkflowRun,
-          disabled: !!cancelResponse?.message || isCancellingWorkflowRun,
-          children: [
-            isCancellingWorkflowRun ? /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Loader2, { className: "animate-spin" }) }) : /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(CircleStopIcon, {}) }),
-            cancelResponse?.message || "Cancel Workflow Run"
-          ]
-        }
-      ),
       (isResumingWorkflow || isSuspendedSteps && isStreamingWorkflow) && /* @__PURE__ */ 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__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Loader2, { className: "animate-spin text-icon6" }) }),
         /* @__PURE__ */ jsx(Txt, { children: "Resuming workflow" })
       ] }),
       !isSuspendedSteps && /* @__PURE__ */ jsx(Fragment, { children: zodInputSchema ? /* @__PURE__ */ jsx(
-        DynamicForm,
+        WorkflowInputData,
         {
           schema: zodInputSchema,
           defaultValues: payload,
@@ -11231,7 +11295,7 @@ function WorkflowTrigger({
             }
           ) }),
           /* @__PURE__ */ jsx(
-            DynamicForm,
+            WorkflowInputData,
             {
               schema: stepSchema,
               isSubmitLoading: isResumingWorkflow,
@@ -11248,6 +11312,20 @@ function WorkflowTrigger({
           )
         ] }, step.stepId);
       }),
+      result?.runId && /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "light",
+          className: "w-full",
+          size: "lg",
+          onClick: handleCancelWorkflowRun,
+          disabled: !!cancelResponse?.message || isCancellingWorkflowRun,
+          children: [
+            isCancellingWorkflowRun ? /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Loader2, { className: "animate-spin" }) }) : /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(StopCircle, {}) }),
+            cancelResponse?.message || "Cancel Workflow Run"
+          ]
+        }
+      ),
       hasWorkflowActivePaths && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx("hr", { className: "border-border1 border-sm my-5" }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
@@ -11270,13 +11348,10 @@ const WorkflowJsonDialog = ({ result }) => {
     ] }),
     /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsx(DialogPortal, { children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-6xl max-h-[90vh] overflow-y-auto overflow-x-hidden bg-surface2", children: [
       /* @__PURE__ */ jsx(DialogTitle, { children: "Workflow Execution (JSON)" }),
-      /* @__PURE__ */ jsx("div", { className: "w-full h-full overflow-x-scroll", children: /* @__PURE__ */ jsx(SyntaxHighlighter$1, { data: result, className: "p-4" }) })
+      /* @__PURE__ */ jsx("div", { className: "w-full h-full overflow-x-scroll", children: /* @__PURE__ */ jsx(SyntaxHighlighter$2, { data: result, className: "p-4" }) })
     ] }) }) })
   ] });
 };
-const CircleStopIcon = () => {
-  return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "currentColor", width: "16", height: "16", children: /* @__PURE__ */ jsx("rect", { width: "10", height: "10", x: "3", y: "3", rx: "2" }) });
-};
 
 const WorkflowRuns = ({ workflowId, runId, isLoading, runs, onPressRun }) => {
   if (isLoading) {