@mastra/playground-ui 6.7.2-alpha.1 → 6.8.0

package/dist/index.es.js

@@ -16,7 +16,8 @@ import { jsonLanguage, json } from '@codemirror/lang-json';
 import { tags } from '@lezer/highlight';
 import { draculaInit } from '@uiw/codemirror-theme-dracula';
 import CodeMirror, { EditorView } from '@uiw/react-codemirror';
-import { toast } from 'sonner';
+import { toast as toast$1 } from 'sonner';
+import './index.css';export { Toaster } from 'sonner';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { MarkerType, Handle, Position, useViewport, useReactFlow, Panel, useNodesState, useEdgesState, ReactFlow, Background, BackgroundVariant, ReactFlowProvider } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
@@ -51,7 +52,7 @@ import z$2 from 'zod/v4';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import { useMastraClient, mapWorkflowStreamChunkToWatchResult, resolveToChildMessages, useChat, toAssistantUIMessage } from '@mastra/react';
 import { useQuery, useMutation, useQueryClient, QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import './index.css';export * from '@tanstack/react-query';
+export * from '@tanstack/react-query';
 import { useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table';
 import { RuntimeContext as RuntimeContext$1 } from '@mastra/core/runtime-context';
 import { I as IconColors } from './colors-Br49332d.js';
@@ -4299,7 +4300,7 @@ function useCopyToClipboard({ text, copyMessage = "Copied to clipboard!" }) {
   const timeoutRef = useRef(null);
   const handleCopy = useCallback(() => {
     navigator.clipboard.writeText(text).then(() => {
-      toast.success(copyMessage);
+      toast$1.success(copyMessage);
       setIsCopied(true);
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
@@ -4309,7 +4310,7 @@ function useCopyToClipboard({ text, copyMessage = "Copied to clipboard!" }) {
         setIsCopied(false);
       }, 2e3);
     }).catch(() => {
-      toast.error("Failed to copy to clipboard.");
+      toast$1.error("Failed to copy to clipboard.");
     });
   }, [text, copyMessage]);
   return { isCopied, handleCopy };
@@ -5340,7 +5341,7 @@ const WorkflowRunEventForm = ({ event, runId, onSendEvent }) => {
     try {
       setError(null);
       const result = await onSendEvent({ event, data, runId });
-      toast.success(result.message);
+      toast$1.success(result.message);
     } catch (error2) {
       console.error("Error sending event", error2);
       setError("Error sending event");
@@ -7426,7 +7427,7 @@ function WorkflowTrigger({
       streamWorkflow({ workflowId, runId, inputData: data, runtimeContext });
     } catch (err) {
       setIsRunning(false);
-      toast.error("Error executing workflow");
+      toast$1.error("Error executing workflow");
     }
   };
   const handleResumeWorkflow = async (step) => {
@@ -8098,6 +8099,110 @@ const useWorkflows = () => {
   });
 };
 
+const defaultOptions = {
+  duration: 3e3,
+  cancel: {
+    label: /* @__PURE__ */ jsx(X, { size: "14" }),
+    onClick: () => {
+    }
+  },
+  unstyled: true,
+  classNames: {
+    toast: "bg-[#0F0F0F] w-full backdrop-accent h-auto rounded-lg gap-2 border border p-4 flex items-start rounded-lg pointer-events-auto",
+    title: "text-white font-semibold text-xs mb-1 -mt-1",
+    description: "!text-text text-sm !font-light",
+    cancelButton: "self-start !bg-transparent !p-0 flex items-center justify-center !text-text opacity-50 order-last hover:opacity-100",
+    actionButton: "!bg-white flex items-center justify-center font-medium !text-black order-last hover:opacity-80"
+  }
+};
+function getToastOptions(options) {
+  const { classNames, ...rest } = defaultOptions;
+  const { classNames: optionsClassNames, ...restOptions } = options || {};
+  return {
+    ...rest,
+    classNames: {
+      ...classNames,
+      title: cn(classNames?.title, "mt-auto", optionsClassNames?.title),
+      toast: cn(classNames?.toast, "!items-center", optionsClassNames?.toast),
+      cancelButton: cn(classNames?.cancelButton, "!self-center", optionsClassNames?.cancelButton),
+      actionButton: cn(classNames?.actionButton, optionsClassNames?.actionButton)
+    },
+    ...restOptions
+  };
+}
+const toast = (message, options = {}) => {
+  if (Array.isArray(message)) {
+    return message.forEach((msg) => toast$1(msg, getToastOptions(options)));
+  } else if (React__default.isValidElement(message)) {
+    return toast$1(message, getToastOptions(options));
+  } else if (typeof message === "string") {
+    return toast$1(message, getToastOptions(options));
+  }
+  throw new Error("Invalid message type");
+};
+toast.success = (message, options = {}) => {
+  switch (typeof message) {
+    case "string":
+      return toast$1.success(message, getToastOptions(options));
+    case "object":
+      return message.forEach((message2) => toast$1.success(message2, getToastOptions(options)));
+  }
+};
+toast.error = (message, options = {}) => {
+  switch (typeof message) {
+    case "string":
+      return toast$1.error(message, getToastOptions(options));
+    case "object":
+      return message.forEach((message2) => toast$1.error(message2, getToastOptions(options)));
+  }
+};
+toast.warning = (message, options = {}) => {
+  switch (typeof message) {
+    case "string":
+      return toast$1.warning(message, getToastOptions(options));
+    case "object":
+      return message.forEach((message2) => toast$1.warning(message2, getToastOptions(options)));
+  }
+};
+toast.info = (message, options = {}) => {
+  switch (typeof message) {
+    case "string":
+      return toast$1.info(message, getToastOptions(options));
+    case "object":
+      return message.forEach((message2) => toast$1.info(message2, getToastOptions(options)));
+  }
+};
+toast.custom = (message, options = {}) => {
+  return toast$1(message, getToastOptions(options));
+};
+toast.dismiss = (toastId) => {
+  if (toastId) {
+    toast$1.dismiss(toastId);
+  }
+};
+toast.promise = ({
+  myPromise,
+  loadingMessage,
+  successMessage,
+  errorMessage,
+  onSuccess,
+  onError,
+  options = {}
+}) => {
+  return toast$1.promise(myPromise, {
+    loading: loadingMessage ?? "Loading...",
+    success: (data) => {
+      onSuccess?.(data);
+      return successMessage;
+    },
+    error: (err) => {
+      onError?.(err);
+      return errorMessage || err?.message || "Error...";
+    },
+    ...getToastOptions(options)
+  });
+};
+
 const useExecuteWorkflow = () => {
   const client = useMastraClient();
   const createWorkflowRun = useMutation({
@@ -8194,6 +8299,23 @@ const useStreamWorkflow = () => {
       }
     };
   }, []);
+  const handleStreamError = (err, defaultMessage, setIsStreaming2) => {
+    if (err instanceof TypeError) {
+      return;
+    }
+    const errorMessage = err instanceof Error ? err.message : defaultMessage;
+    toast.error(errorMessage);
+    setIsStreaming2?.(false);
+  };
+  const handleWorkflowFinish = (value) => {
+    if (value.type === "workflow-finish") {
+      const streamStatus = value.payload?.workflowStatus;
+      const metadata = value.payload?.metadata;
+      if (streamStatus === "failed") {
+        throw new Error(metadata?.errorMessage || "Workflow execution failed");
+      }
+    }
+  };
   const streamWorkflow = useMutation({
     mutationFn: async ({
       workflowId,
@@ -8213,7 +8335,9 @@ const useStreamWorkflow = () => {
       });
       const workflow = client.getWorkflow(workflowId);
       const stream = await workflow.streamVNext({ runId, inputData, runtimeContext, closeOnSuspend: true });
-      if (!stream) throw new Error("No stream returned");
+      if (!stream) {
+        return handleStreamError(new Error("No stream returned"), "No stream returned", setIsStreaming);
+      }
       const reader = stream.getReader();
       readerRef.current = reader;
       try {
@@ -8232,10 +8356,13 @@ const useStreamWorkflow = () => {
             if (value.type === "workflow-step-suspended") {
               setIsStreaming(false);
             }
+            if (value.type === "workflow-finish") {
+              handleWorkflowFinish(value);
+            }
           }
         }
-      } catch (error) {
-        console.error("Error streaming workflow:", error);
+      } catch (err) {
+        handleStreamError(err, "Error streaming workflow");
       } finally {
         if (isMountedRef.current) {
           setIsStreaming(false);
@@ -8265,7 +8392,9 @@ const useStreamWorkflow = () => {
       }
       const workflow = client.getWorkflow(workflowId);
       const stream = await workflow.observeStreamVNext({ runId });
-      if (!stream) throw new Error("No stream returned");
+      if (!stream) {
+        return handleStreamError(new Error("No stream returned"), "No stream returned", setIsStreaming);
+      }
       const reader = stream.getReader();
       observerRef.current = reader;
       try {
@@ -8284,10 +8413,13 @@ const useStreamWorkflow = () => {
             if (value.type === "workflow-step-suspended") {
               setIsStreaming(false);
             }
+            if (value.type === "workflow-finish") {
+              handleWorkflowFinish(value);
+            }
           }
         }
-      } catch (error) {
-        console.error("Error streaming workflow:", error);
+      } catch (err) {
+        handleStreamError(err, "Error observing workflow");
       } finally {
         if (isMountedRef.current) {
           setIsStreaming(false);
@@ -8318,7 +8450,9 @@ const useStreamWorkflow = () => {
         runtimeContext.set(key, value);
       });
       const stream = await workflow.resumeStreamVNext({ runId, step, resumeData, runtimeContext });
-      if (!stream) throw new Error("No stream returned");
+      if (!stream) {
+        return handleStreamError(new Error("No stream returned"), "No stream returned", setIsStreaming);
+      }
       const reader = stream.getReader();
       resumeStreamRef.current = reader;
       try {
@@ -8337,10 +8471,13 @@ const useStreamWorkflow = () => {
             if (value.type === "workflow-step-suspended") {
               setIsStreaming(false);
             }
+            if (value.type === "workflow-finish") {
+              handleWorkflowFinish(value);
+            }
           }
         }
-      } catch (error) {
-        console.error("Error resuming workflow stream:", error);
+      } catch (err) {
+        handleStreamError(err, "Error resuming workflow stream");
       } finally {
         if (isMountedRef.current) {
           setIsStreaming(false);
@@ -11820,7 +11957,7 @@ const RuntimeContext = () => {
   useEffect(() => {
     const run = async () => {
       if (!isValidJson(runtimeContextStr)) {
-        toast.error("Invalid JSON");
+        toast$1.error("Invalid JSON");
         return;
       }
       const formatted = await formatJSON(runtimeContextStr);
@@ -11832,16 +11969,16 @@ const RuntimeContext = () => {
     try {
       const parsedContext = JSON.parse(runtimeContextValue);
       setRuntimeContext(parsedContext);
-      toast.success("Runtime context saved successfully");
+      toast$1.success("Runtime context saved successfully");
     } catch (error) {
       console.error("error", error);
-      toast.error("Invalid JSON");
+      toast$1.error("Invalid JSON");
     }
   };
   const buttonClass = "text-icon3 hover:text-icon6";
   const formatRuntimeContext = async () => {
     if (!isValidJson(runtimeContextValue)) {
-      toast.error("Invalid JSON");
+      toast$1.error("Invalid JSON");
       return;
     }
     const formatted = await formatJSON(runtimeContextValue);
@@ -13854,7 +13991,7 @@ const useScorer = (scorerId) => {
       } catch (error) {
         setScorer(null);
         console.error("Error fetching scorer", error);
-        toast.error("Error fetching scorer");
+        toast$1.error("Error fetching scorer");
       } finally {
         setIsLoading(false);
       }
@@ -15089,7 +15226,7 @@ const useExecuteAgentTool = () => {
         const response = await agent.executeTool(toolId, { data: input, runtimeContext });
         return response;
       } catch (error) {
-        toast.error("Error executing agent tool");
+        toast$1.error("Error executing agent tool");
         console.error("Error executing tool:", error);
         throw error;
       }
@@ -15233,10 +15370,10 @@ const useDeleteThread = () => {
       if (networkId) {
         queryClient.invalidateQueries({ queryKey: ["network", "threads", networkId, networkId] });
       }
-      toast.success("Chat deleted successfully");
+      toast$1.success("Chat deleted successfully");
     },
     onError: () => {
-      toast.error("Failed to delete chat");
+      toast$1.error("Failed to delete chat");
     }
   });
 };
@@ -15490,7 +15627,7 @@ const AgentWorkingMemory = ({ agentId }) => {
                 setIsEditing(false);
               } catch (error) {
                 console.error("Failed to update working memory:", error);
-                toast.error("Failed to update working memory");
+                toast$1.error("Failed to update working memory");
               }
             },
             disabled: isUpdating,
@@ -16822,7 +16959,7 @@ const useExecuteTool = () => {
         const response = await tool.execute({ data: input, runtimeContext });
         return response;
       } catch (error) {
-        toast.error("Error executing dev tool");
+        toast$1.error("Error executing dev tool");
         console.error("Error executing dev tool:", error);
         throw error;
       }
@@ -20114,7 +20251,7 @@ const MCPToolPanel = ({ toolId, serverId }) => {
     zodInputSchema = resolveSerializedZodOutput(jsonSchemaToZod(tool.inputSchema));
   } catch (e) {
     console.error("Error processing input schema:", e);
-    toast.error("Failed to process tool input schema.");
+    toast$1.error("Failed to process tool input schema.");
     zodInputSchema = z.object({});
   }
   return /* @__PURE__ */ jsx(
@@ -20304,5 +20441,5 @@ const useEvalsByAgentId = (agentId, type) => {
   });
 };
 
-export { AgentChat, AgentCoinIcon, AgentEntityHeader, AgentEvals, AgentIcon, AgentInformation, AgentMetadata, AgentMetadataList, AgentMetadataListEmpty, AgentMetadataListItem, AgentMetadataNetworkList, AgentMetadataPrompt, AgentMetadataScorerList, AgentMetadataSection, AgentMetadataToolList, AgentMetadataWorkflowList, AgentMetadataWrapper, AgentNetworkCoinIcon, AgentSettings, AgentSettingsContext, AgentSettingsProvider, AgentToolPanel, AgentsTable, AiIcon, Alert$1 as Alert, AlertDescription$1 as AlertDescription, AlertDialog, AlertTitle$1 as AlertTitle, ApiIcon, Badge$1 as Badge, BranchIcon, Breadcrumb, Button$1 as Button, ButtonsGroup, Cell, ChatThreads, CheckIcon, ChevronIcon, Collapsible, CollapsibleContent, CollapsibleTrigger, CommitIcon, CrossIcon, Crumb, DarkLogo, DateTimeCell, DateTimePicker, DateTimePickerContent, DbIcon, DebugIcon, DefaultTrigger, DeploymentIcon, DividerIcon, DocsIcon, DynamicForm, EmptyState, Entity, EntityContent, EntityDescription, EntityHeader, EntityIcon, EntityMainHeader, EntityName, Entry, EntryCell, EntryList, EntryListSkeleton, EnvIcon, EvaluatorCoinIcon, FiltersIcon, FolderIcon, FormActions, GithubCoinIcon, GithubIcon, GoogleIcon, Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, Icon, InfoIcon, InputField, JudgeIcon, Kbd, KeyValueList, LatencyIcon, LinkComponentProvider, LogsIcon, MCPDetail, MCPTable, MCPToolPanel, MainContentContent, MainContentLayout, MainSidebar, MainSidebarProvider, MastraResizablePanel, McpCoinIcon, McpServerIcon, MemoryIcon, MemorySearch, ModelResetProvider, Notification, OpenAIIcon, PageHeader, PlaygroundQueryClient, PlaygroundTabs, PromptIcon, RadioGroup, RadioGroupField, RadioGroupItem, RepoIcon, Row, RuntimeContext, RuntimeContextWrapper, ScoreDialog, ScoreIcon, ScorersTable, ScoresList, ScoresTools, SearchField, Searchbar, SearchbarWrapper, Section, Sections, SelectField, SettingsIcon, SideDialog, SlashIcon, SliderField, SpanScoreList, SpanScoring, SpanTabs, Tab$1 as Tab, TabContent$1 as TabContent, TabList$1 as TabList, Table$1 as Table, Tbody, TemplateFailure, TemplateForm, TemplateInfo, TemplateInstallation, TemplateSuccess, TemplatesList, TemplatesTools, TextAndIcon, TextareaField, Th, Thead, ThreadDeleteButton, ThreadInputProvider, ThreadItem, ThreadLink, ThreadList, Threads, ToolCoinIcon, ToolFallback, ToolIconMap, ToolInformation, ToolPanel, ToolTable, ToolsIcon, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TraceDialog, TraceIcon, TraceTimeline, TraceTimelineLegend, TraceTimelineSpan, TracesList, TracesTools, TracesView, TracesViewSkeleton, TsIcon, Txt, TxtCell, UnitCell, VariablesIcon, WorkflowCoinIcon, WorkflowGraph, WorkflowIcon, WorkflowRunContext, WorkflowRunDetail, WorkflowRunList, WorkflowRunProvider, WorkflowTable, WorkflowTrigger, WorkingMemoryContext, WorkingMemoryProvider, allowedAiSpanAttributes, cleanString, convertWorkflowRunStateToStreamResult, extractPrompt, formatDuration, formatHierarchicalSpans, formatOtelTimestamp, formatOtelTimestamp2, getColumnTemplate, getShortId, getSpanTypeUi, getToNextEntryFn, getToPreviousEntryFn, parseError, providerMapToIcon, scoresListColumns, spanTypePrefixes, traceScoresListColumns, tracesListColumns, transformKey, useAgent, useAgentSettings, useAgents, useCancelWorkflowRun, useCurrentRun, useDeleteThread, useEvalsByAgentId, useExecuteAgentTool, useExecuteMCPTool, useExecuteTool, useExecuteWorkflow, useInView, useLinkComponent, useMCPServerTool, useMCPServerTools, useMCPServers, useMainSidebar, useMemory, useMemoryConfig, useMemorySearch, useModelProviders, useModelReset, usePlaygroundStore, usePolling, useReorderModelList, useScorer, useScorers, useScoresByEntityId, useScoresByScorerId, useSendWorkflowRunEvent, useSpeechRecognition, useStreamWorkflow, useThreadInput, useThreads, useTool, useTools, useTraceSpanScores, useUpdateAgentModel, useUpdateModelInModelList, useWorkflow, useWorkflowRuns, useWorkflows, useWorkingMemory };
+export { AgentChat, AgentCoinIcon, AgentEntityHeader, AgentEvals, AgentIcon, AgentInformation, AgentMetadata, AgentMetadataList, AgentMetadataListEmpty, AgentMetadataListItem, AgentMetadataNetworkList, AgentMetadataPrompt, AgentMetadataScorerList, AgentMetadataSection, AgentMetadataToolList, AgentMetadataWorkflowList, AgentMetadataWrapper, AgentNetworkCoinIcon, AgentSettings, AgentSettingsContext, AgentSettingsProvider, AgentToolPanel, AgentsTable, AiIcon, Alert$1 as Alert, AlertDescription$1 as AlertDescription, AlertDialog, AlertTitle$1 as AlertTitle, ApiIcon, Badge$1 as Badge, BranchIcon, Breadcrumb, Button$1 as Button, ButtonsGroup, Cell, ChatThreads, CheckIcon, ChevronIcon, Collapsible, CollapsibleContent, CollapsibleTrigger, CommitIcon, CrossIcon, Crumb, DarkLogo, DateTimeCell, DateTimePicker, DateTimePickerContent, DbIcon, DebugIcon, DefaultTrigger, DeploymentIcon, DividerIcon, DocsIcon, DynamicForm, EmptyState, Entity, EntityContent, EntityDescription, EntityHeader, EntityIcon, EntityMainHeader, EntityName, Entry, EntryCell, EntryList, EntryListSkeleton, EnvIcon, EvaluatorCoinIcon, FiltersIcon, FolderIcon, FormActions, GithubCoinIcon, GithubIcon, GoogleIcon, Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, Icon, InfoIcon, InputField, JudgeIcon, Kbd, KeyValueList, LatencyIcon, LinkComponentProvider, LogsIcon, MCPDetail, MCPTable, MCPToolPanel, MainContentContent, MainContentLayout, MainSidebar, MainSidebarProvider, MastraResizablePanel, McpCoinIcon, McpServerIcon, MemoryIcon, MemorySearch, ModelResetProvider, Notification, OpenAIIcon, PageHeader, PlaygroundQueryClient, PlaygroundTabs, PromptIcon, RadioGroup, RadioGroupField, RadioGroupItem, RepoIcon, Row, RuntimeContext, RuntimeContextWrapper, ScoreDialog, ScoreIcon, ScorersTable, ScoresList, ScoresTools, SearchField, Searchbar, SearchbarWrapper, Section, Sections, SelectField, SettingsIcon, SideDialog, SlashIcon, SliderField, SpanScoreList, SpanScoring, SpanTabs, Tab$1 as Tab, TabContent$1 as TabContent, TabList$1 as TabList, Table$1 as Table, Tbody, TemplateFailure, TemplateForm, TemplateInfo, TemplateInstallation, TemplateSuccess, TemplatesList, TemplatesTools, TextAndIcon, TextareaField, Th, Thead, ThreadDeleteButton, ThreadInputProvider, ThreadItem, ThreadLink, ThreadList, Threads, ToolCoinIcon, ToolFallback, ToolIconMap, ToolInformation, ToolPanel, ToolTable, ToolsIcon, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TraceDialog, TraceIcon, TraceTimeline, TraceTimelineLegend, TraceTimelineSpan, TracesList, TracesTools, TracesView, TracesViewSkeleton, TsIcon, Txt, TxtCell, UnitCell, VariablesIcon, WorkflowCoinIcon, WorkflowGraph, WorkflowIcon, WorkflowRunContext, WorkflowRunDetail, WorkflowRunList, WorkflowRunProvider, WorkflowTable, WorkflowTrigger, WorkingMemoryContext, WorkingMemoryProvider, allowedAiSpanAttributes, cleanString, convertWorkflowRunStateToStreamResult, extractPrompt, formatDuration, formatHierarchicalSpans, formatOtelTimestamp, formatOtelTimestamp2, getColumnTemplate, getShortId, getSpanTypeUi, getToNextEntryFn, getToPreviousEntryFn, parseError, providerMapToIcon, scoresListColumns, spanTypePrefixes, toast, traceScoresListColumns, tracesListColumns, transformKey, useAgent, useAgentSettings, useAgents, useCancelWorkflowRun, useCurrentRun, useDeleteThread, useEvalsByAgentId, useExecuteAgentTool, useExecuteMCPTool, useExecuteTool, useExecuteWorkflow, useInView, useLinkComponent, useMCPServerTool, useMCPServerTools, useMCPServers, useMainSidebar, useMemory, useMemoryConfig, useMemorySearch, useModelProviders, useModelReset, usePlaygroundStore, usePolling, useReorderModelList, useScorer, useScorers, useScoresByEntityId, useScoresByScorerId, useSendWorkflowRunEvent, useSpeechRecognition, useStreamWorkflow, useThreadInput, useThreads, useTool, useTools, useTraceSpanScores, useUpdateAgentModel, useUpdateModelInModelList, useWorkflow, useWorkflowRuns, useWorkflows, useWorkingMemory };
 //# sourceMappingURL=index.es.js.map