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

package/dist/index.cjs.js

@@ -3,9 +3,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 require('./index.css');const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const clientJs = require('@mastra/client-js');
 const react = require('@assistant-ui/react');
 const lucideReact = require('lucide-react');
-const React = require('react');
 const reactSlot = require('@radix-ui/react-slot');
 const TooltipPrimitive = require('@radix-ui/react-tooltip');
 const AvatarPrimitive = require('@radix-ui/react-avatar');
@@ -21,7 +22,6 @@ const CodeMirror = require('@uiw/react-codemirror');
 const DialogPrimitive = require('@radix-ui/react-dialog');
 const shallow = require('zustand/shallow');
 const di = require('@mastra/core/di');
-const clientJs = require('@mastra/client-js');
 const zustand = require('zustand');
 const middleware = require('zustand/middleware');
 const dateFns = require('date-fns');
@@ -84,6 +84,31 @@ const SelectPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(SelectP
 const LabelPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(LabelPrimitive);
 const SliderPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(SliderPrimitive);
 
+const createMastraClient = (baseUrl, mastraClientHeaders = {}) => {
+  return new clientJs.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 = React.createContext(void 0);
+const MastraClientProvider = ({
+  children,
+  baseUrl,
+  headers
+}) => {
+  const client = createMastraClient(baseUrl, headers);
+  return /* @__PURE__ */ jsxRuntime.jsx(MastraClientContext.Provider, { value: { client }, children });
+};
+const useMastraClient = () => {
+  const context = React.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;
@@ -4485,14 +4510,6 @@ const CircleStopIcon = () => {
   return /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "currentColor", width: "16", height: "16", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "10", height: "10", x: "3", y: "3", rx: "2" }) });
 };
 
-const createMastraClient = (baseUrl) => {
-  return new clientJs.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();
@@ -4534,7 +4551,6 @@ function MastraRuntimeProvider({
   agentName,
   memory,
   threadId,
-  baseUrl,
   refreshThreadList,
   modelSettings = {},
   chatWithGenerate,
@@ -4575,7 +4591,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");
@@ -4933,7 +4949,6 @@ const AgentChat = ({
   threadId,
   initialMessages,
   memory,
-  baseUrl,
   refreshThreadList,
   showFileSupport
 }) => {
@@ -4947,7 +4962,6 @@ const AgentChat = ({
       threadId,
       initialMessages,
       memory,
-      baseUrl,
       refreshThreadList,
       modelSettings,
       chatWithGenerate,
@@ -5127,10 +5141,10 @@ const TabsContent = React__namespace.forwardRef(({ className, ...props }, ref) =
 ));
 TabsContent.displayName = TabsPrimitive__namespace.Content.displayName;
 
-const useEvalsByAgentId = (agentId, type, baseUrl) => {
+const useEvalsByAgentId = (agentId, type) => {
   const [evals, setEvals] = React.useState([]);
   const [isLoading, setIsLoading] = React.useState(true);
-  const client = createMastraClient(baseUrl);
+  const client = useMastraClient();
   const fetchEvals = async (_agentId) => {
     setIsLoading(true);
     const activeAgentId = _agentId ?? agentId;
@@ -5168,18 +5182,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] = React.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
@@ -6230,7 +6240,6 @@ function MastraNetworkRuntimeProvider({
   initialMessages,
   memory,
   threadId,
-  baseUrl,
   refreshThreadList,
   modelSettings = {}
 }) {
@@ -6246,7 +6255,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");
@@ -6728,10 +6737,10 @@ const sanitizeWorkflowWatchResult = (record) => {
   };
   return sanitizedRecord;
 };
-const useLegacyWorkflow = (workflowId, baseUrl) => {
+const useLegacyWorkflow = (workflowId) => {
   const [legacyWorkflow, setLegacyWorkflow] = React.useState(null);
   const [isLoading, setIsLoading] = React.useState(true);
-  const client = createMastraClient(baseUrl);
+  const client = useMastraClient();
   React.useEffect(() => {
     const fetchWorkflow = async () => {
       setIsLoading(true);
@@ -6773,10 +6782,10 @@ const useLegacyWorkflow = (workflowId, baseUrl) => {
   }, [workflowId]);
   return { legacyWorkflow, isLoading };
 };
-const useWorkflow = (workflowId, baseUrl) => {
+const useWorkflow = (workflowId) => {
   const [workflow, setWorkflow] = React.useState(null);
   const [isLoading, setIsLoading] = React.useState(true);
-  const client = createMastraClient(baseUrl);
+  const client = useMastraClient();
   React.useEffect(() => {
     const fetchWorkflow = async () => {
       setIsLoading(true);
@@ -6800,8 +6809,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);
@@ -6880,11 +6889,12 @@ const useExecuteWorkflow = (baseUrl) => {
     startAsyncWorkflowRun
   };
 };
-const useWatchWorkflow = (baseUrl) => {
+const useWatchWorkflow = () => {
   const [isWatchingLegacyWorkflow, setIsWatchingLegacyWorkflow] = React.useState(false);
   const [isWatchingWorkflow, setIsWatchingWorkflow] = React.useState(false);
   const [legacyWatchResult, setLegacyWatchResult] = React.useState(null);
   const [watchResult, setWatchResult] = React.useState(null);
+  const client = useMastraClient();
   const debouncedSetLegacyWorkflowWatchResult = useDebounce.useDebouncedCallback((record) => {
     const formattedResults = Object.entries(record.results || {}).reduce(
       (acc, [key, value]) => {
@@ -6913,7 +6923,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 {
@@ -6939,7 +6948,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 {
@@ -6967,9 +6975,10 @@ const useWatchWorkflow = (baseUrl) => {
     watchResult
   };
 };
-const useResumeWorkflow = (baseUrl) => {
+const useResumeWorkflow = () => {
   const [isResumingLegacyWorkflow, setIsResumingLegacyWorkflow] = React.useState(false);
   const [isResumingWorkflow, setIsResumingWorkflow] = React.useState(false);
+  const client = useMastraClient();
   const resumeLegacyWorkflow = async ({
     workflowId,
     stepId,
@@ -6978,7 +6987,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) {
@@ -6997,7 +7005,6 @@ const useResumeWorkflow = (baseUrl) => {
   }) => {
     try {
       setIsResumingWorkflow(true);
-      const client = createMastraClient(baseUrl);
       const runtimeContext$1 = new runtimeContext.RuntimeContext();
       Object.entries(playgroundRuntimeContext).forEach(([key, value]) => {
         runtimeContext$1.set(key, value);
@@ -8280,8 +8287,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__ */ jsxRuntime.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-[600px]" }) });
   }
@@ -9153,18 +9160,17 @@ const WorkflowResult = ({ jsonResult, sanitizedJsonResult }) => {
 
 function LegacyWorkflowTrigger({
   workflowId,
-  baseUrl,
   setRunId
 }) {
   const { legacyResult: result, setLegacyResult: setResult, payload, setPayload } = React.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] = React.useState([]);
   const [isRunning, setIsRunning] = React.useState(false);
   const triggerSchema = workflow?.triggerSchema;
@@ -9589,8 +9595,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__ */ jsxRuntime.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-[600px]" }) });
   }
@@ -9624,17 +9630,13 @@ const WorkflowStatus = ({ stepId, status }) => {
   );
 };
 
-function WorkflowTrigger({
-  workflowId,
-  baseUrl,
-  setRunId
-}) {
+function WorkflowTrigger({ workflowId, setRunId }) {
   const { runtimeContext } = usePlaygroundStore();
   const { result, setResult, payload, setPayload } = React.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] = React.useState([]);
   const [isRunning, setIsRunning] = React.useState(false);
   const triggerSchema = workflow?.inputSchema;
@@ -10124,9 +10126,9 @@ function usePolling({
   };
 }
 
-const useTraces = (componentName, baseUrl, isWorkflow = false) => {
+const useTraces = (componentName, isWorkflow = false) => {
   const [traces, setTraces] = React.useState([]);
-  const client = React.useMemo(() => createMastraClient(baseUrl), [baseUrl]);
+  const client = React.useMemo(() => useMastraClient(), []);
   const fetchFn = React.useCallback(async () => {
     try {
       const res = await client.getTelemetry({
@@ -10221,6 +10223,7 @@ exports.LatencyIcon = LatencyIcon;
 exports.LegacyWorkflowGraph = LegacyWorkflowGraph;
 exports.LegacyWorkflowTrigger = LegacyWorkflowTrigger;
 exports.LogsIcon = LogsIcon;
+exports.MastraClientProvider = MastraClientProvider;
 exports.MastraResizablePanel = MastraResizablePanel;
 exports.McpCoinIcon = McpCoinIcon;
 exports.McpServerIcon = McpServerIcon;
@@ -10261,6 +10264,7 @@ exports.WorkflowTraces = WorkflowTraces;
 exports.WorkflowTrigger = WorkflowTrigger;
 exports.refineTraces = refineTraces;
 exports.useCurrentRun = useCurrentRun;
+exports.useMastraClient = useMastraClient;
 exports.usePlaygroundStore = usePlaygroundStore;
 exports.usePolling = usePolling;
 exports.useSpeechRecognition = useSpeechRecognition;