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

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, Network, PauseIcon, HourglassIcon, Loader2, CircleDashed, Footprints, CircleCheck, CircleX, Minus, Plus, Maximize, Workflow, AlertCircleIcon, AlertCircle, CalendarIcon, Braces, 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 } 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';
@@ -38,11 +38,11 @@ import '@xyflow/react/dist/style.css';
 import Dagre from '@dagrejs/dagre';
 import { Highlight, themes } from 'prism-react-renderer';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
-import { useDebouncedCallback } from 'use-debounce';
-import { v4 } from '@lukeed/uuid';
 import prettier from 'prettier';
 import prettierPluginBabel from 'prettier/plugins/babel';
 import prettierPluginEstree from 'prettier/plugins/estree';
+import { useDebouncedCallback } from 'use-debounce';
+import { v4 } from '@lukeed/uuid';
 import jsonSchemaToZod from 'json-schema-to-zod';
 import { parse } from 'superjson';
 import z$1, { z, ZodObject } from 'zod';
@@ -8085,6 +8085,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] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = 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 });
+      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__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between pb-2", children: [
+        /* @__PURE__ */ jsx(Txt, { as: "label", variant: "ui-md", className: "text-icon3", children: "Event data (JSON)" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { onClick: formatEventData, className: buttonClass, children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Braces, {}) }) }) }),
+            /* @__PURE__ */ jsx(TooltipContent, { children: "Format the event data JSON" })
+          ] }),
+          /* @__PURE__ */ jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { onClick: handleCopy, className: buttonClass, children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(CopyIcon, {}) }) }) }),
+            /* @__PURE__ */ jsx(TooltipContent, { children: "Copy event data" })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        CodeMirror,
+        {
+          value: eventData,
+          onChange: setEventData,
+          theme,
+          extensions: [jsonLanguage],
+          className: "h-[400px] overflow-y-scroll bg-surface3 rounded-lg overflow-hidden p-3"
+        }
+      ),
+      error && /* @__PURE__ */ jsx(Txt, { variant: "ui-md", className: "text-accent2", children: error })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex justify-end pt-4", children: /* @__PURE__ */ jsx(Button, { onClick: handleSendEvent, disabled: isLoading, children: isLoading ? /* @__PURE__ */ jsx(Loader2, { className: "w-4 h-4 animate-spin" }) : "Send" }) })
+  ] });
+};
+
 const WorkflowStepActionBar = ({
   input,
   output,
@@ -8092,17 +8178,22 @@ const WorkflowStepActionBar = ({
   error,
   mapConfig,
   stepName,
+  event,
   onShowTrace,
-  onShowNestedGraph
+  onShowNestedGraph,
+  onSendEvent,
+  runId
 }) => {
   const [isInputOpen, setIsInputOpen] = useState(false);
   const [isOutputOpen, setIsOutputOpen] = useState(false);
   const [isResumeDataOpen, setIsResumeDataOpen] = useState(false);
   const [isErrorOpen, setIsErrorOpen] = useState(false);
   const [isMapConfigOpen, setIsMapConfigOpen] = useState(false);
+  const [isEventFormOpen, setIsEventFormOpen] = 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__ */ jsx(Fragment, { children: (input || output || error || mapConfig || resumeData || onShowNestedGraph) && /* @__PURE__ */ 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__ */ jsx(Fragment, { children: (input || output || error || mapConfig || resumeData || onShowNestedGraph || showEventForm) && /* @__PURE__ */ 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__ */ jsx(Button, { onClick: onShowNestedGraph, children: "View nested graph" }),
     mapConfig && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(Button, { onClick: () => setIsMapConfigOpen(true), children: "Map config" }),
@@ -8154,7 +8245,18 @@ const WorkflowStepActionBar = ({
         /* @__PURE__ */ jsx("div", { className: "px-4 overflow-hidden", children: /* @__PURE__ */ jsx(CodeDialogContent, { data: error }) })
       ] }) })
     ] }),
-    onShowTrace && /* @__PURE__ */ jsx(Button, { onClick: onShowTrace, children: "Show trace" })
+    onShowTrace && /* @__PURE__ */ jsx(Button, { onClick: onShowTrace, children: "Show trace" }),
+    showEventForm && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Button, { onClick: () => setIsEventFormOpen(true), children: "Send event" }),
+      /* @__PURE__ */ jsx(Dialog, { open: isEventFormOpen, onOpenChange: setIsEventFormOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: dialogContentClass, children: [
+        /* @__PURE__ */ jsxs(DialogTitle, { className: dialogTitleClass, children: [
+          "Send ",
+          event,
+          " event"
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "px-4 overflow-hidden", children: /* @__PURE__ */ jsx(WorkflowRunEventForm, { event, runId, onSendEvent }) })
+      ] }) })
+    ] })
   ] }) });
 };
 
@@ -8264,7 +8366,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;
@@ -8323,7 +8426,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
             }
           )
         ]
@@ -8413,7 +8519,13 @@ const ZoomSlider = 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
   });
@@ -8422,11 +8534,27 @@ function WorkflowNestedGraph({ stepGraph, open, workflowName, onShowTrace }) {
   const [edges] = useEdgesState(initialEdges);
   const { steps } = useCurrentRun();
   const nodeTypes = {
-    "default-node": (props) => /* @__PURE__ */ jsx(WorkflowDefaultNode, { parentWorkflowName: workflowName, onShowTrace, ...props }),
+    "default-node": (props) => /* @__PURE__ */ jsx(
+      WorkflowDefaultNode,
+      {
+        parentWorkflowName: workflowName,
+        onShowTrace,
+        onSendEvent,
+        ...props
+      }
+    ),
     "condition-node": WorkflowConditionNode,
     "after-node": WorkflowAfterNode,
     "loop-result-node": WorkflowLoopResultNode,
-    "nested-node": (props) => /* @__PURE__ */ jsx(WorkflowNestedNode, { parentWorkflowName: workflowName, onShowTrace, ...props })
+    "nested-node": (props) => /* @__PURE__ */ jsx(
+      WorkflowNestedNode,
+      {
+        parentWorkflowName: workflowName,
+        onShowTrace,
+        onSendEvent,
+        ...props
+      }
+    )
   };
   useEffect(() => {
     if (open) {
@@ -8468,7 +8596,8 @@ const WorkflowNestedGraphContext = createContext(
 );
 function WorkflowNestedGraphProvider({
   children,
-  onShowTrace
+  onShowTrace,
+  onSendEvent
 }) {
   const [stepGraph, setStepGraph] = useState(null);
   const [parentStepGraphList, setParentStepGraphList] = useState([]);
@@ -8525,7 +8654,8 @@ function WorkflowNestedGraphProvider({
               stepGraph,
               open: openDialog,
               workflowName: fullStep,
-              onShowTrace
+              onShowTrace,
+              onSendEvent
             }
           ) })
         ] }) }) }, `${label}-${fullStep}`)
@@ -8537,11 +8667,12 @@ function WorkflowNestedGraphProvider({
 function WorkflowNestedNode({
   data,
   parentWorkflowName,
-  onShowTrace
+  onShowTrace,
+  onSendEvent
 }) {
   const { steps, isRunning, runId } = useCurrentRun();
   const { showNestedGraph } = 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__ */ jsxs(Fragment, { children: [
@@ -8552,14 +8683,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__ */ jsxs("div", { className: cn("flex items-center gap-2 px-3", !description && "pb-2"), children: [
             isRunning && /* @__PURE__ */ jsxs(Icon, { children: [
               step?.status === "failed" && /* @__PURE__ */ jsx(CrossIcon, { className: "text-accent2" }),
               step?.status === "success" && /* @__PURE__ */ jsx(CheckIcon, { className: "text-accent1" }),
-              step?.status === "suspended" && /* @__PURE__ */ jsx(PauseIcon, { className: "text-icon3" }),
+              step?.status === "suspended" && /* @__PURE__ */ jsx(PauseIcon, { className: "text-accent3" }),
+              step?.status === "waiting" && /* @__PURE__ */ jsx(HourglassIcon, { className: "text-accent5" }),
               step?.status === "running" && /* @__PURE__ */ jsx(Loader2, { className: "text-icon6 animate-spin" }),
               !step && /* @__PURE__ */ jsx(CircleDashed, { className: "text-icon2" })
             ] }),
@@ -8580,7 +8714,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
             }
           )
         ]
@@ -8590,17 +8727,17 @@ function WorkflowNestedNode({
   ] });
 }
 
-function WorkflowGraphInner({ workflow, onShowTrace }) {
+function WorkflowGraphInner({ workflow, onShowTrace, onSendEvent }) {
   const { nodes: initialNodes, edges: initialEdges } = constructNodesAndEdges(workflow);
   const [nodes, _, onNodesChange] = useNodesState(initialNodes);
   const [edges] = useEdgesState(initialEdges);
   const { steps, runId } = useCurrentRun();
   const nodeTypes = {
-    "default-node": (props) => /* @__PURE__ */ jsx(WorkflowDefaultNode, { onShowTrace, ...props }),
+    "default-node": (props) => /* @__PURE__ */ jsx(WorkflowDefaultNode, { onShowTrace, onSendEvent, ...props }),
     "condition-node": WorkflowConditionNode,
     "after-node": WorkflowAfterNode,
     "loop-result-node": WorkflowLoopResultNode,
-    "nested-node": (props) => /* @__PURE__ */ jsx(WorkflowNestedNode, { onShowTrace, ...props })
+    "nested-node": (props) => /* @__PURE__ */ jsx(WorkflowNestedNode, { onShowTrace, onSendEvent, ...props })
   };
   return /* @__PURE__ */ jsx("div", { className: "w-full h-full bg-surface1", children: /* @__PURE__ */ jsxs(
     ReactFlow,
@@ -8630,7 +8767,7 @@ function WorkflowGraphInner({ workflow, onShowTrace }) {
   ) });
 }
 
-function WorkflowGraph({ workflowId, onShowTrace, workflow, isLoading }) {
+function WorkflowGraph({ workflowId, onShowTrace, workflow, isLoading, onSendEvent }) {
   const { snapshot } = useContext(WorkflowRunContext);
   if (isLoading) {
     return /* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-full" }) });
@@ -8645,13 +8782,22 @@ function WorkflowGraph({ workflowId, onShowTrace, workflow, isLoading }) {
       ] })
     ] }) });
   }
-  return /* @__PURE__ */ jsx(WorkflowNestedGraphProvider, { onShowTrace, children: /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(
-    WorkflowGraphInner,
+  return /* @__PURE__ */ jsx(
+    WorkflowNestedGraphProvider,
     {
-      workflow: snapshot?.serializedStepGraph ? { stepGraph: snapshot?.serializedStepGraph } : workflow,
-      onShowTrace
-    }
-  ) }) }, snapshot?.runId ?? workflowId);
+      onShowTrace,
+      onSendEvent,
+      children: /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(
+        WorkflowGraphInner,
+        {
+          workflow: snapshot?.serializedStepGraph ? { stepGraph: snapshot?.serializedStepGraph } : workflow,
+          onShowTrace,
+          onSendEvent
+        }
+      ) })
+    },
+    snapshot?.runId ?? workflowId
+  );
 }
 
 const useWorkflowRuns = (workflowId) => {
@@ -9216,17 +9362,6 @@ const MessagesProvider = ({ children }) => {
 };
 const useMessages = () => 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;
 };