@mastra/playground-ui 5.1.10-alpha.0 → 5.1.10

package/dist/index.cjs.js

@@ -40,11 +40,11 @@ require('@xyflow/react/dist/style.css');
 const Dagre = require('@dagrejs/dagre');
 const prismReactRenderer = require('prism-react-renderer');
 const ScrollAreaPrimitive = require('@radix-ui/react-scroll-area');
-const useDebounce = require('use-debounce');
-const uuid = require('@lukeed/uuid');
 const prettier = require('prettier');
 const prettierPluginBabel = require('prettier/plugins/babel');
 const prettierPluginEstree = require('prettier/plugins/estree');
+const useDebounce = require('use-debounce');
+const uuid = require('@lukeed/uuid');
 const jsonSchemaToZod = require('json-schema-to-zod');
 const superjson = require('superjson');
 const z = require('zod');
@@ -8118,6 +8118,92 @@ const CodeDialogContent = ({ data }) => {
   }
 };
 
+const formatJSON = async (code) => {
+  const formatted = await prettier.format(code, {
+    semi: false,
+    parser: "json",
+    printWidth: 80,
+    tabWidth: 2,
+    plugins: [prettierPluginBabel, prettierPluginEstree]
+  });
+  return formatted;
+};
+const isValidJson = (str) => {
+  try {
+    const obj = JSON.parse(str);
+    return !!obj && typeof obj === "object";
+  } catch (e) {
+    return false;
+  }
+};
+
+const WorkflowRunEventForm = ({ event, runId, onSendEvent }) => {
+  const [eventData, setEventData] = React.useState("");
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [error, setError] = React.useState(null);
+  const theme = useCodemirrorTheme();
+  const { handleCopy } = useCopyToClipboard({ text: eventData });
+  const handleSendEvent = async () => {
+    let data;
+    setIsLoading(true);
+    setError(null);
+    try {
+      data = JSON.parse(eventData);
+    } catch (error2) {
+      setError("Invalid JSON");
+      setIsLoading(false);
+      return;
+    }
+    try {
+      const result = await onSendEvent({ event, data, runId });
+      sonner.toast.success(result.message);
+    } catch (error2) {
+      console.error("Error sending event", error2);
+      setError("Error sending event");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const buttonClass = "text-icon3 hover:text-icon6";
+  const formatEventData = async () => {
+    if (!isValidJson(eventData)) {
+      setError("Invalid JSON");
+      return;
+    }
+    const formatted = await formatJSON(eventData);
+    setEventData(formatted);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { 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)" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: formatEventData, className: buttonClass, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Braces, {}) }) }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: "Format the event data JSON" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: handleCopy, className: buttonClass, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CopyIcon, {}) }) }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: "Copy event data" })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        CodeMirror,
+        {
+          value: eventData,
+          onChange: setEventData,
+          theme,
+          extensions: [langJson.jsonLanguage],
+          className: "h-[400px] overflow-y-scroll bg-surface3 rounded-lg overflow-hidden p-3"
+        }
+      ),
+      error && /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-md", className: "text-accent2", children: error })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end pt-4", children: /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: handleSendEvent, disabled: isLoading, children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "w-4 h-4 animate-spin" }) : "Send" }) })
+  ] });
+};
+
 const WorkflowStepActionBar = ({
   input,
   output,
@@ -8125,17 +8211,22 @@ const WorkflowStepActionBar = ({
   error,
   mapConfig,
   stepName,
+  event,
   onShowTrace,
-  onShowNestedGraph
+  onShowNestedGraph,
+  onSendEvent,
+  runId
 }) => {
   const [isInputOpen, setIsInputOpen] = React.useState(false);
   const [isOutputOpen, setIsOutputOpen] = React.useState(false);
   const [isResumeDataOpen, setIsResumeDataOpen] = React.useState(false);
   const [isErrorOpen, setIsErrorOpen] = React.useState(false);
   const [isMapConfigOpen, setIsMapConfigOpen] = React.useState(false);
+  const [isEventFormOpen, setIsEventFormOpen] = React.useState(false);
   const dialogContentClass = "bg-surface2 rounded-lg border-sm border-border1 max-w-4xl w-full px-0";
   const dialogTitleClass = "border-b-sm border-border1 pb-4 px-6";
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: (input || output || error || mapConfig || resumeData || onShowNestedGraph) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center bg-surface4 border-t-sm border-border1 px-2 py-1 gap-2 rounded-b-lg", children: [
+  const showEventForm = event && onSendEvent && runId;
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: (input || output || error || mapConfig || resumeData || onShowNestedGraph || showEventForm) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center bg-surface4 border-t-sm border-border1 px-2 py-1 gap-2 rounded-b-lg", children: [
     onShowNestedGraph && /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: onShowNestedGraph, children: "View nested graph" }),
     mapConfig && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: () => setIsMapConfigOpen(true), children: "Map config" }),
@@ -8187,7 +8278,18 @@ const WorkflowStepActionBar = ({
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(CodeDialogContent, { data: error }) })
       ] }) })
     ] }),
-    onShowTrace && /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: onShowTrace, children: "Show trace" })
+    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(Dialog, { open: isEventFormOpen, onOpenChange: setIsEventFormOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: dialogContentClass, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(DialogTitle, { className: dialogTitleClass, children: [
+          "Send ",
+          event,
+          " event"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(WorkflowRunEventForm, { event, runId, onSendEvent }) })
+      ] }) })
+    ] })
   ] }) });
 };
 
@@ -8297,7 +8399,8 @@ function WorkflowConditionNode({ data }) {
 function WorkflowDefaultNode({
   data,
   onShowTrace,
-  parentWorkflowName
+  parentWorkflowName,
+  onSendEvent
 }) {
   const { steps, isRunning, runId } = useCurrentRun();
   const { label, description, withoutTopHandle, withoutBottomHandle, mapConfig, event, duration, date } = data;
@@ -8356,7 +8459,10 @@ function WorkflowDefaultNode({
               output: step?.output,
               error: step?.error,
               mapConfig,
-              onShowTrace: runId && onShowTrace ? () => onShowTrace?.({ runId, stepName: fullLabel }) : void 0
+              event: step?.status === "waiting" ? event : void 0,
+              onShowTrace: runId && onShowTrace ? () => onShowTrace?.({ runId, stepName: fullLabel }) : void 0,
+              runId,
+              onSendEvent
             }
           )
         ]
@@ -8446,7 +8552,13 @@ const ZoomSlider = React.forwardRef(({ className, ...props }) => {
 });
 ZoomSlider.displayName = "ZoomSlider";
 
-function WorkflowNestedGraph({ stepGraph, open, workflowName, onShowTrace }) {
+function WorkflowNestedGraph({
+  stepGraph,
+  open,
+  workflowName,
+  onShowTrace,
+  onSendEvent
+}) {
   const { nodes: initialNodes, edges: initialEdges } = constructNodesAndEdges({
     stepGraph
   });
@@ -8455,11 +8567,27 @@ function WorkflowNestedGraph({ stepGraph, open, workflowName, onShowTrace }) {
   const [edges] = react$2.useEdgesState(initialEdges);
   const { steps } = useCurrentRun();
   const nodeTypes = {
-    "default-node": (props) => /* @__PURE__ */ jsxRuntime.jsx(WorkflowDefaultNode, { parentWorkflowName: workflowName, onShowTrace, ...props }),
+    "default-node": (props) => /* @__PURE__ */ jsxRuntime.jsx(
+      WorkflowDefaultNode,
+      {
+        parentWorkflowName: workflowName,
+        onShowTrace,
+        onSendEvent,
+        ...props
+      }
+    ),
     "condition-node": WorkflowConditionNode,
     "after-node": WorkflowAfterNode,
     "loop-result-node": WorkflowLoopResultNode,
-    "nested-node": (props) => /* @__PURE__ */ jsxRuntime.jsx(WorkflowNestedNode, { parentWorkflowName: workflowName, onShowTrace, ...props })
+    "nested-node": (props) => /* @__PURE__ */ jsxRuntime.jsx(
+      WorkflowNestedNode,
+      {
+        parentWorkflowName: workflowName,
+        onShowTrace,
+        onSendEvent,
+        ...props
+      }
+    )
   };
   React.useEffect(() => {
     if (open) {
@@ -8501,7 +8629,8 @@ const WorkflowNestedGraphContext = React.createContext(
 );
 function WorkflowNestedGraphProvider({
   children,
-  onShowTrace
+  onShowTrace,
+  onSendEvent
 }) {
   const [stepGraph, setStepGraph] = React.useState(null);
   const [parentStepGraphList, setParentStepGraphList] = React.useState([]);
@@ -8558,7 +8687,8 @@ function WorkflowNestedGraphProvider({
               stepGraph,
               open: openDialog,
               workflowName: fullStep,
-              onShowTrace
+              onShowTrace,
+              onSendEvent
             }
           ) })
         ] }) }) }, `${label}-${fullStep}`)
@@ -8570,11 +8700,12 @@ function WorkflowNestedGraphProvider({
 function WorkflowNestedNode({
   data,
   parentWorkflowName,
-  onShowTrace
+  onShowTrace,
+  onSendEvent
 }) {
   const { steps, isRunning, runId } = useCurrentRun();
   const { showNestedGraph } = React.useContext(WorkflowNestedGraphContext);
-  const { label, description, withoutTopHandle, withoutBottomHandle, stepGraph, mapConfig } = data;
+  const { label, description, withoutTopHandle, withoutBottomHandle, stepGraph, mapConfig, event } = data;
   const fullLabel = parentWorkflowName ? `${parentWorkflowName}.${label}` : label;
   const step = steps[fullLabel];
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -8585,14 +8716,17 @@ function WorkflowNestedNode({
         className: cn(
           "bg-surface3 rounded-lg w-[274px] border-sm border-border1 pt-2",
           step?.status === "success" && "ring-2 ring-accent1",
-          step?.status === "failed" && "ring-2 ring-accent2"
+          step?.status === "failed" && "ring-2 ring-accent2",
+          step?.status === "suspended" && "ring-2 ring-accent3",
+          step?.status === "waiting" && "ring-2 ring-accent5"
         ),
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2 px-3", !description && "pb-2"), children: [
             isRunning && /* @__PURE__ */ jsxRuntime.jsxs(Icon, { children: [
               step?.status === "failed" && /* @__PURE__ */ jsxRuntime.jsx(CrossIcon, { className: "text-accent2" }),
               step?.status === "success" && /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: "text-accent1" }),
-              step?.status === "suspended" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PauseIcon, { className: "text-icon3" }),
+              step?.status === "suspended" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PauseIcon, { className: "text-accent3" }),
+              step?.status === "waiting" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.HourglassIcon, { className: "text-accent5" }),
               step?.status === "running" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "text-icon6 animate-spin" }),
               !step && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleDashed, { className: "text-icon2" })
             ] }),
@@ -8613,7 +8747,10 @@ function WorkflowNestedNode({
               error: step?.error,
               mapConfig,
               onShowTrace: runId && onShowTrace ? () => onShowTrace?.({ runId, stepName: fullLabel }) : void 0,
-              onShowNestedGraph: () => showNestedGraph({ label, fullStep: fullLabel, stepGraph })
+              onShowNestedGraph: () => showNestedGraph({ label, fullStep: fullLabel, stepGraph }),
+              onSendEvent,
+              event: step?.status === "waiting" ? event : void 0,
+              runId
             }
           )
         ]
@@ -8623,17 +8760,17 @@ function WorkflowNestedNode({
   ] });
 }
 
-function WorkflowGraphInner({ workflow, onShowTrace }) {
+function WorkflowGraphInner({ workflow, onShowTrace, onSendEvent }) {
   const { nodes: initialNodes, edges: initialEdges } = constructNodesAndEdges(workflow);
   const [nodes, _, onNodesChange] = react$2.useNodesState(initialNodes);
   const [edges] = react$2.useEdgesState(initialEdges);
   const { steps, runId } = useCurrentRun();
   const nodeTypes = {
-    "default-node": (props) => /* @__PURE__ */ jsxRuntime.jsx(WorkflowDefaultNode, { onShowTrace, ...props }),
+    "default-node": (props) => /* @__PURE__ */ jsxRuntime.jsx(WorkflowDefaultNode, { onShowTrace, onSendEvent, ...props }),
     "condition-node": WorkflowConditionNode,
     "after-node": WorkflowAfterNode,
     "loop-result-node": WorkflowLoopResultNode,
-    "nested-node": (props) => /* @__PURE__ */ jsxRuntime.jsx(WorkflowNestedNode, { onShowTrace, ...props })
+    "nested-node": (props) => /* @__PURE__ */ jsxRuntime.jsx(WorkflowNestedNode, { onShowTrace, onSendEvent, ...props })
   };
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full bg-surface1", children: /* @__PURE__ */ jsxRuntime.jsxs(
     react$2.ReactFlow,
@@ -8663,7 +8800,7 @@ function WorkflowGraphInner({ workflow, onShowTrace }) {
   ) });
 }
 
-function WorkflowGraph({ workflowId, onShowTrace, workflow, isLoading }) {
+function WorkflowGraph({ workflowId, onShowTrace, workflow, isLoading, onSendEvent }) {
   const { snapshot } = React.useContext(WorkflowRunContext);
   if (isLoading) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-full" }) });
@@ -8678,13 +8815,22 @@ function WorkflowGraph({ workflowId, onShowTrace, workflow, isLoading }) {
       ] })
     ] }) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(WorkflowNestedGraphProvider, { onShowTrace, children: /* @__PURE__ */ jsxRuntime.jsx(react$2.ReactFlowProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(
-    WorkflowGraphInner,
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    WorkflowNestedGraphProvider,
     {
-      workflow: snapshot?.serializedStepGraph ? { stepGraph: snapshot?.serializedStepGraph } : workflow,
-      onShowTrace
-    }
-  ) }) }, snapshot?.runId ?? workflowId);
+      onShowTrace,
+      onSendEvent,
+      children: /* @__PURE__ */ jsxRuntime.jsx(react$2.ReactFlowProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        WorkflowGraphInner,
+        {
+          workflow: snapshot?.serializedStepGraph ? { stepGraph: snapshot?.serializedStepGraph } : workflow,
+          onShowTrace,
+          onSendEvent
+        }
+      ) })
+    },
+    snapshot?.runId ?? workflowId
+  );
 }
 
 const useWorkflowRuns = (workflowId) => {
@@ -9249,17 +9395,6 @@ const MessagesProvider = ({ children }) => {
 };
 const useMessages = () => React.useContext(MessagesContext);
 
-const formatJSON = async (code) => {
-  const formatted = await prettier.format(code, {
-    semi: false,
-    parser: "json",
-    printWidth: 80,
-    tabWidth: 2,
-    plugins: [prettierPluginBabel, prettierPluginEstree]
-  });
-  return formatted;
-};
-
 const convertMessage = (message) => {
   return message;
 };