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

package/dist/index.es.js

@@ -1,8 +1,9 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
+import React__default, { createContext, useContext, forwardRef, useState, useEffect, memo, useMemo, useRef, useCallback, 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, AssistantRuntimeProvider } from '@assistant-ui/react';
 import { CheckIcon as CheckIcon$1, CopyIcon, ChevronUpIcon, X, FileIcon, CircleXIcon, Mic, PlusIcon, ArrowUp, Copy, Search, RefreshCcwIcon, ChevronRight, SortAsc, SortDesc, Check, ChevronUp, ChevronDown, LoaderCircle, ChevronDownIcon, ExternalLinkIcon, Network, PauseIcon, Loader2, CircleDashed, Footprints, CircleCheck, CircleX, Workflow, AlertCircleIcon, AlertCircle, CalendarIcon, Braces, Brackets, TrashIcon, Plus, Minus, Maximize, CirclePause } from 'lucide-react';
-import * as React from 'react';
-import React__default, { forwardRef, useState, useEffect, memo, useMemo, useRef, createContext, useContext, useCallback, Suspense, Fragment as Fragment$1 } from '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';
@@ -19,7 +20,6 @@ import CodeMirror from '@uiw/react-codemirror';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { useShallow } from 'zustand/shallow';
 import { RuntimeContext } from '@mastra/core/di';
-import { MastraClient } from '@mastra/client-js';
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 import { format, formatDistanceToNow, isValid } from 'date-fns';
@@ -52,7 +52,32 @@ import { CodeBlock as CodeBlock$1 } from 'react-code-block';
 import * as SliderPrimitive from '@radix-ui/react-slider';
 import { useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table';
 
-import './index.css';function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
+import './index.css';const createMastraClient = (baseUrl, mastraClientHeaders = {}) => {
+  return new MastraClient({
+    baseUrl: baseUrl || "",
+    // only add the header if the baseUrl is not provided i.e it's a local dev environment
+    headers: !baseUrl ? { ...mastraClientHeaders, "x-mastra-dev-playground": "true" } : mastraClientHeaders
+  });
+};
+
+const MastraClientContext = createContext(void 0);
+const MastraClientProvider = ({
+  children,
+  baseUrl,
+  headers
+}) => {
+  const client = createMastraClient(baseUrl, headers);
+  return /* @__PURE__ */ jsx(MastraClientContext.Provider, { value: { client }, children });
+};
+const useMastraClient = () => {
+  const context = useContext(MastraClientContext);
+  if (context === void 0) {
+    throw new Error("useMastraClient must be used within a MastraClientProvider");
+  }
+  return context.client;
+};
+
+function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
 const falsyToString = (value)=>typeof value === "boolean" ? `${value}` : value === 0 ? "0" : value;
 const cx = clsx;
@@ -4453,14 +4478,6 @@ 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 createMastraClient = (baseUrl) => {
-  return new MastraClient({
-    baseUrl: baseUrl || "",
-    // only add the header if the baseUrl is not provided i.e it's a local dev environment
-    headers: !baseUrl ? { "x-mastra-dev-playground": "true" } : {}
-  });
-};
-
 const fileToBase64 = async (file) => {
   return new Promise((resolve, reject) => {
     const reader = new FileReader();
@@ -4502,7 +4519,6 @@ function MastraRuntimeProvider({
   agentName,
   memory,
   threadId,
-  baseUrl,
   refreshThreadList,
   modelSettings = {},
   chatWithGenerate,
@@ -4543,7 +4559,7 @@ function MastraRuntimeProvider({
       }
     }
   }, [initialMessages, threadId, memory]);
-  const mastra = createMastraClient(baseUrl);
+  const mastra = useMastraClient();
   const agent = mastra.getAgent(agentId);
   const onNew = async (message) => {
     if (message.content[0]?.type !== "text") throw new Error("Only text messages are supported");
@@ -4901,7 +4917,6 @@ const AgentChat = ({
   threadId,
   initialMessages,
   memory,
-  baseUrl,
   refreshThreadList,
   showFileSupport
 }) => {
@@ -4915,7 +4930,6 @@ const AgentChat = ({
       threadId,
       initialMessages,
       memory,
-      baseUrl,
       refreshThreadList,
       modelSettings,
       chatWithGenerate,
@@ -5095,10 +5109,10 @@ const TabsContent = React.forwardRef(({ className, ...props }, ref) => /* @__PUR
 ));
 TabsContent.displayName = TabsPrimitive.Content.displayName;
 
-const useEvalsByAgentId = (agentId, type, baseUrl) => {
+const useEvalsByAgentId = (agentId, type) => {
   const [evals, setEvals] = useState([]);
   const [isLoading, setIsLoading] = useState(true);
-  const client = createMastraClient(baseUrl);
+  const client = useMastraClient();
   const fetchEvals = async (_agentId) => {
     setIsLoading(true);
     const activeAgentId = _agentId ?? agentId;
@@ -5136,18 +5150,14 @@ const tabIndicatorClass = cn(
   "focus-visible:outline-none"
 );
 const tabContentClass = cn("data-[state=inactive]:mt-0 min-h-0 h-full grid grid-rows-[1fr]");
-function AgentEvals({ agentId, baseUrl }) {
+function AgentEvals({ agentId }) {
   const [activeTab, setActiveTab] = useState("live");
   const {
     evals: liveEvals,
     isLoading: isLiveLoading,
     refetchEvals: refetchLiveEvals
-  } = useEvalsByAgentId(agentId, "live", baseUrl);
-  const {
-    evals: ciEvals,
-    isLoading: isCiLoading,
-    refetchEvals: refetchCiEvals
-  } = useEvalsByAgentId(agentId, "ci", baseUrl);
+  } = useEvalsByAgentId(agentId, "live");
+  const { evals: ciEvals, isLoading: isCiLoading, refetchEvals: refetchCiEvals } = useEvalsByAgentId(agentId, "ci");
   const contextValue = {
     handleRefresh,
     isLoading: activeTab === "live" ? isLiveLoading : isCiLoading
@@ -6198,7 +6208,6 @@ function MastraNetworkRuntimeProvider({
   initialMessages,
   memory,
   threadId,
-  baseUrl,
   refreshThreadList,
   modelSettings = {}
 }) {
@@ -6214,7 +6223,7 @@ function MastraNetworkRuntimeProvider({
       }
     }
   }, [initialMessages, threadId, memory, messages]);
-  const mastra = createMastraClient(baseUrl);
+  const mastra = useMastraClient();
   const network = mastra.getNetwork(agentId);
   const onNew = async (message) => {
     if (message.content[0]?.type !== "text") throw new Error("Only text messages are supported");
@@ -6696,10 +6705,10 @@ const sanitizeWorkflowWatchResult = (record) => {
   };
   return sanitizedRecord;
 };
-const useLegacyWorkflow = (workflowId, baseUrl) => {
+const useLegacyWorkflow = (workflowId) => {
   const [legacyWorkflow, setLegacyWorkflow] = useState(null);
   const [isLoading, setIsLoading] = useState(true);
-  const client = createMastraClient(baseUrl);
+  const client = useMastraClient();
   useEffect(() => {
     const fetchWorkflow = async () => {
       setIsLoading(true);
@@ -6741,10 +6750,10 @@ const useLegacyWorkflow = (workflowId, baseUrl) => {
   }, [workflowId]);
   return { legacyWorkflow, isLoading };
 };
-const useWorkflow = (workflowId, baseUrl) => {
+const useWorkflow = (workflowId) => {
   const [workflow, setWorkflow] = useState(null);
   const [isLoading, setIsLoading] = useState(true);
-  const client = createMastraClient(baseUrl);
+  const client = useMastraClient();
   useEffect(() => {
     const fetchWorkflow = async () => {
       setIsLoading(true);
@@ -6768,8 +6777,8 @@ const useWorkflow = (workflowId, baseUrl) => {
   }, [workflowId]);
   return { workflow, isLoading };
 };
-const useExecuteWorkflow = (baseUrl) => {
-  const client = createMastraClient(baseUrl);
+const useExecuteWorkflow = () => {
+  const client = useMastraClient();
   const createLegacyWorkflowRun = async ({ workflowId, prevRunId }) => {
     try {
       const workflow = client.getLegacyWorkflow(workflowId);
@@ -6848,11 +6857,12 @@ const useExecuteWorkflow = (baseUrl) => {
     startAsyncWorkflowRun
   };
 };
-const useWatchWorkflow = (baseUrl) => {
+const useWatchWorkflow = () => {
   const [isWatchingLegacyWorkflow, setIsWatchingLegacyWorkflow] = useState(false);
   const [isWatchingWorkflow, setIsWatchingWorkflow] = useState(false);
   const [legacyWatchResult, setLegacyWatchResult] = useState(null);
   const [watchResult, setWatchResult] = useState(null);
+  const client = useMastraClient();
   const debouncedSetLegacyWorkflowWatchResult = useDebouncedCallback((record) => {
     const formattedResults = Object.entries(record.results || {}).reduce(
       (acc, [key, value]) => {
@@ -6881,7 +6891,6 @@ const useWatchWorkflow = (baseUrl) => {
   const watchLegacyWorkflow = async ({ workflowId, runId }) => {
     try {
       setIsWatchingLegacyWorkflow(true);
-      const client = createMastraClient(baseUrl);
       const workflow = client.getLegacyWorkflow(workflowId);
       await workflow.watch({ runId }, (record) => {
         try {
@@ -6907,7 +6916,6 @@ const useWatchWorkflow = (baseUrl) => {
   const watchWorkflow = async ({ workflowId, runId }) => {
     try {
       setIsWatchingWorkflow(true);
-      const client = createMastraClient(baseUrl);
       const workflow = client.getWorkflow(workflowId);
       await workflow.watch({ runId }, (record) => {
         try {
@@ -6935,9 +6943,10 @@ const useWatchWorkflow = (baseUrl) => {
     watchResult
   };
 };
-const useResumeWorkflow = (baseUrl) => {
+const useResumeWorkflow = () => {
   const [isResumingLegacyWorkflow, setIsResumingLegacyWorkflow] = useState(false);
   const [isResumingWorkflow, setIsResumingWorkflow] = useState(false);
+  const client = useMastraClient();
   const resumeLegacyWorkflow = async ({
     workflowId,
     stepId,
@@ -6946,7 +6955,6 @@ const useResumeWorkflow = (baseUrl) => {
   }) => {
     try {
       setIsResumingLegacyWorkflow(true);
-      const client = createMastraClient(baseUrl);
       const response = await client.getLegacyWorkflow(workflowId).resume({ stepId, runId, context });
       return response;
     } catch (error) {
@@ -6965,7 +6973,6 @@ const useResumeWorkflow = (baseUrl) => {
   }) => {
     try {
       setIsResumingWorkflow(true);
-      const client = createMastraClient(baseUrl);
       const runtimeContext = new RuntimeContext$1();
       Object.entries(playgroundRuntimeContext).forEach(([key, value]) => {
         runtimeContext.set(key, value);
@@ -8248,8 +8255,8 @@ const lodashTitleCase = (str) => {
   return camelCased.replace(/([A-Z])/g, " $1").replace(/^./, (str2) => str2.toUpperCase()).trim();
 };
 
-function LegacyWorkflowGraph({ workflowId, baseUrl }) {
-  const { legacyWorkflow, isLoading } = useLegacyWorkflow(workflowId, baseUrl);
+function LegacyWorkflowGraph({ workflowId }) {
+  const { legacyWorkflow, isLoading } = useLegacyWorkflow(workflowId);
   if (isLoading) {
     return /* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-[600px]" }) });
   }
@@ -9121,18 +9128,17 @@ const WorkflowResult = ({ jsonResult, sanitizedJsonResult }) => {
 
 function LegacyWorkflowTrigger({
   workflowId,
-  baseUrl,
   setRunId
 }) {
   const { legacyResult: result, setLegacyResult: setResult, payload, setPayload } = useContext(WorkflowRunContext);
-  const { isLoading, legacyWorkflow: workflow } = useLegacyWorkflow(workflowId, baseUrl);
-  const { createLegacyWorkflowRun: createWorkflowRun, startLegacyWorkflowRun: startWorkflowRun } = useExecuteWorkflow(baseUrl);
+  const { isLoading, legacyWorkflow: workflow } = useLegacyWorkflow(workflowId);
+  const { createLegacyWorkflowRun: createWorkflowRun, startLegacyWorkflowRun: startWorkflowRun } = useExecuteWorkflow();
   const {
     watchLegacyWorkflow: watchWorkflow,
     legacyWatchResult: watchResult,
     isWatchingLegacyWorkflow: isWatchingWorkflow
-  } = useWatchWorkflow(baseUrl);
-  const { resumeLegacyWorkflow: resumeWorkflow, isResumingLegacyWorkflow: isResumingWorkflow } = useResumeWorkflow(baseUrl);
+  } = useWatchWorkflow();
+  const { resumeLegacyWorkflow: resumeWorkflow, isResumingLegacyWorkflow: isResumingWorkflow } = useResumeWorkflow();
   const [suspendedSteps, setSuspendedSteps] = useState([]);
   const [isRunning, setIsRunning] = useState(false);
   const triggerSchema = workflow?.triggerSchema;
@@ -9557,8 +9563,8 @@ function WorkflowGraphInner({ workflow, onShowTrace }) {
   ) });
 }
 
-function WorkflowGraph({ workflowId, baseUrl, onShowTrace }) {
-  const { workflow, isLoading } = useWorkflow(workflowId, baseUrl);
+function WorkflowGraph({ workflowId, onShowTrace }) {
+  const { workflow, isLoading } = useWorkflow(workflowId);
   if (isLoading) {
     return /* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-[600px]" }) });
   }
@@ -9592,17 +9598,13 @@ const WorkflowStatus = ({ stepId, status }) => {
   );
 };
 
-function WorkflowTrigger({
-  workflowId,
-  baseUrl,
-  setRunId
-}) {
+function WorkflowTrigger({ workflowId, setRunId }) {
   const { runtimeContext } = usePlaygroundStore();
   const { result, setResult, payload, setPayload } = useContext(WorkflowRunContext);
-  const { isLoading, workflow } = useWorkflow(workflowId, baseUrl);
-  const { createWorkflowRun, startWorkflowRun } = useExecuteWorkflow(baseUrl);
-  const { watchWorkflow, watchResult, isWatchingWorkflow } = useWatchWorkflow(baseUrl);
-  const { resumeWorkflow, isResumingWorkflow } = useResumeWorkflow(baseUrl);
+  const { isLoading, workflow } = useWorkflow(workflowId);
+  const { createWorkflowRun, startWorkflowRun } = useExecuteWorkflow();
+  const { watchWorkflow, watchResult, isWatchingWorkflow } = useWatchWorkflow();
+  const { resumeWorkflow, isResumingWorkflow } = useResumeWorkflow();
   const [suspendedSteps, setSuspendedSteps] = useState([]);
   const [isRunning, setIsRunning] = useState(false);
   const triggerSchema = workflow?.inputSchema;
@@ -10092,9 +10094,9 @@ function usePolling({
   };
 }
 
-const useTraces = (componentName, baseUrl, isWorkflow = false) => {
+const useTraces = (componentName, isWorkflow = false) => {
   const [traces, setTraces] = useState([]);
-  const client = useMemo(() => createMastraClient(baseUrl), [baseUrl]);
+  const client = useMemo(() => useMastraClient(), []);
   const fetchFn = useCallback(async () => {
     try {
       const res = await client.getTelemetry({
@@ -10134,5 +10136,5 @@ const useTraces = (componentName, baseUrl, isWorkflow = false) => {
   return { traces, firstCallLoading, error };
 };
 
-export { AgentChat, AgentCoinIcon, AgentContext, AgentEvals, AgentIcon, AgentNetworkCoinIcon, AgentProvider, AgentTraces, AiIcon, ApiIcon, Badge$1 as Badge, BranchIcon, Breadcrumb, Button, Cell, CheckIcon, ChevronIcon, CommitIcon, CrossIcon, Crumb, DarkLogo, DataTable, DateTimeCell, DbIcon, DebugIcon, DeploymentIcon, DividerIcon, DocsIcon, DynamicForm, EmptyState, Entity, EntityContent, EntityDescription, EntityIcon, EntityName, EntryCell, EnvIcon, EvaluatorCoinIcon, FiltersIcon, FolderIcon, GithubCoinIcon, GithubIcon, GoogleIcon, Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, Icon, InfoIcon, JudgeIcon, LatencyIcon, LegacyWorkflowGraph, LegacyWorkflowTrigger, LogsIcon, MastraResizablePanel, McpCoinIcon, McpServerIcon, MemoryIcon, NetworkChat, NetworkContext, NetworkProvider, OpenAIIcon, PromptIcon, RepoIcon, Row, ScoreIcon, SettingsIcon, SlashIcon, Table, Tbody, Th, Thead, ThreadDeleteButton, ThreadItem, ThreadLink, ThreadList, Threads, ToolCoinIcon, ToolsIcon, TraceIcon, TsIcon, Txt, TxtCell, UnitCell, VariablesIcon, WorkflowCoinIcon, WorkflowGraph, WorkflowIcon, WorkflowRunContext, WorkflowRunProvider, WorkflowTraces, WorkflowTrigger, refineTraces, useCurrentRun, usePlaygroundStore, usePolling, useSpeechRecognition, useTraces };
+export { AgentChat, AgentCoinIcon, AgentContext, AgentEvals, AgentIcon, AgentNetworkCoinIcon, AgentProvider, AgentTraces, AiIcon, ApiIcon, Badge$1 as Badge, BranchIcon, Breadcrumb, Button, Cell, CheckIcon, ChevronIcon, CommitIcon, CrossIcon, Crumb, DarkLogo, DataTable, DateTimeCell, DbIcon, DebugIcon, DeploymentIcon, DividerIcon, DocsIcon, DynamicForm, EmptyState, Entity, EntityContent, EntityDescription, EntityIcon, EntityName, EntryCell, EnvIcon, EvaluatorCoinIcon, FiltersIcon, FolderIcon, GithubCoinIcon, GithubIcon, GoogleIcon, Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, Icon, InfoIcon, JudgeIcon, LatencyIcon, LegacyWorkflowGraph, LegacyWorkflowTrigger, LogsIcon, MastraClientProvider, MastraResizablePanel, McpCoinIcon, McpServerIcon, MemoryIcon, NetworkChat, NetworkContext, NetworkProvider, OpenAIIcon, PromptIcon, RepoIcon, Row, ScoreIcon, SettingsIcon, SlashIcon, Table, Tbody, Th, Thead, ThreadDeleteButton, ThreadItem, ThreadLink, ThreadList, Threads, ToolCoinIcon, ToolsIcon, TraceIcon, TsIcon, Txt, TxtCell, UnitCell, VariablesIcon, WorkflowCoinIcon, WorkflowGraph, WorkflowIcon, WorkflowRunContext, WorkflowRunProvider, WorkflowTraces, WorkflowTrigger, refineTraces, useCurrentRun, useMastraClient, usePlaygroundStore, usePolling, useSpeechRecognition, useTraces };
 //# sourceMappingURL=index.es.js.map