@mastra/playground-ui 4.0.0-alpha.8 → 4.0.0

package/dist/index.es.js

@@ -24,6 +24,7 @@ import CodeMirror from '@uiw/react-codemirror';
 import { useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table';
 import { processDataStream } from '@ai-sdk/ui-utils';
 import Markdown from 'react-markdown';
+import { useDebouncedCallback } from 'use-debounce';
 import { MarkerType, Handle, Position, useNodesState, useEdgesState, ReactFlow, Controls, MiniMap, Background, BackgroundVariant, ReactFlowProvider } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 import Dagre from '@dagrejs/dagre';
@@ -36,7 +37,6 @@ import z$1, { z } from 'zod';
 import { AutoForm as AutoForm$1, buildZodFieldConfig } from '@autoform/react';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import { useDebouncedCallback } from 'use-debounce';
 import { DayPicker } from 'react-day-picker';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as SelectPrimitive from '@radix-ui/react-select';
@@ -3495,11 +3495,13 @@ function MastraRuntimeProvider({
   memory,
   threadId,
   baseUrl,
-  refreshThreadList
+  refreshThreadList,
+  modelSettings = {}
 }) {
   const [isRunning, setIsRunning] = useState(false);
   const [messages, setMessages] = useState([]);
   const [currentThreadId, setCurrentThreadId] = useState(threadId);
+  const { frequencyPenalty, presencePenalty, maxRetries, maxSteps, maxTokens, temperature, topK, topP, instructions } = modelSettings;
   useEffect(() => {
     const hasNewInitialMessages = initialMessages && initialMessages?.length > messages?.length;
     if (messages.length === 0 || currentThreadId !== threadId || hasNewInitialMessages && currentThreadId === threadId) {
@@ -3555,6 +3557,15 @@ function MastraRuntimeProvider({
           }
         ],
         runId: agentId,
+        frequencyPenalty,
+        presencePenalty,
+        maxRetries,
+        maxSteps,
+        maxTokens,
+        temperature,
+        topK,
+        topP,
+        instructions,
         ...memory ? { threadId, resourceId: agentId } : {}
       });
       if (!response.body) {
@@ -3652,6 +3663,10 @@ function MastraRuntimeProvider({
     } catch (error) {
       console.error("Error occurred in MastraRuntimeProvider", error);
       setIsRunning(false);
+      setMessages((currentConversation) => [
+        ...currentConversation,
+        { role: "assistant", content: [{ type: "text", text: `Error: ${error}` }] }
+      ]);
     }
   };
   const runtime = useExternalStoreRuntime({
@@ -3667,6 +3682,31 @@ function MastraRuntimeProvider({
   ] });
 }
 
+const defaultModelSettings = {
+  maxRetries: 2,
+  maxSteps: 1,
+  temperature: 0.5,
+  topP: 1
+};
+const AgentContext = createContext({});
+function AgentProvider({ children }) {
+  const [modelSettings, setModelSettings] = useState(defaultModelSettings);
+  const resetModelSettings = () => {
+    setModelSettings(defaultModelSettings);
+  };
+  return /* @__PURE__ */ jsx(
+    AgentContext.Provider,
+    {
+      value: {
+        modelSettings,
+        setModelSettings,
+        resetModelSettings
+      },
+      children
+    }
+  );
+}
+
 const AgentChat = ({
   agentId,
   agentName,
@@ -3676,6 +3716,7 @@ const AgentChat = ({
   baseUrl,
   refreshThreadList
 }) => {
+  const { modelSettings } = useContext(AgentContext);
   return /* @__PURE__ */ jsx(
     MastraRuntimeProvider,
     {
@@ -3686,6 +3727,7 @@ const AgentChat = ({
       memory,
       baseUrl,
       refreshThreadList,
+      modelSettings,
       children: /* @__PURE__ */ jsx(Thread, { memory })
     }
   );
@@ -3707,7 +3749,7 @@ const badgeVariants = cva(
     }
   }
 );
-function Badge({ className, variant, ...props }) {
+function Badge$1({ className, variant, ...props }) {
   return /* @__PURE__ */ jsx("div", { className: cn(badgeVariants({ variant }), className), ...props });
 }
 
@@ -3783,7 +3825,7 @@ const Input = React.forwardRef(
 Input.displayName = "Input";
 
 function ScoreIndicator({ score }) {
-  return /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: score.toFixed(2) });
+  return /* @__PURE__ */ jsx(Badge$1, { variant: "secondary", children: score.toFixed(2) });
 }
 
 function Skeleton({ className, ...props }) {
@@ -3964,7 +4006,7 @@ function EvalTable({ evals, isCIMode = false }) {
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs(Badge, { variant: "secondary", className: "text-xs", children: [
+      /* @__PURE__ */ jsxs(Badge$1, { variant: "secondary", className: "text-xs", children: [
         evals.length,
         " Total Evaluations"
       ] }),
@@ -4024,7 +4066,7 @@ function EvalTable({ evals, isCIMode = false }) {
               /* @__PURE__ */ jsx(TableCell, { className: "min-w-[200px] max-w-[30%] font-medium text-mastra-el-5", children: group.metricName }),
               /* @__PURE__ */ jsx(TableCell, { className: "flex-1 text-mastra-el-5" }),
               /* @__PURE__ */ jsx(TableCell, { className: "w-48 text-mastra-el-5", children: /* @__PURE__ */ jsx(ScoreIndicator, { score: group.averageScore }) }),
-              /* @__PURE__ */ jsx(TableCell, { className: "w-48 text-mastra-el-5", children: /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: group.evals.length }) })
+              /* @__PURE__ */ jsx(TableCell, { className: "w-48 text-mastra-el-5", children: /* @__PURE__ */ jsx(Badge$1, { variant: "secondary", children: group.evals.length }) })
             ]
           }
         ),
@@ -4068,7 +4110,7 @@ function EvalTable({ evals, isCIMode = false }) {
                         multiline: true
                       }
                     ) }) }),
-                    isCIMode && /* @__PURE__ */ jsx(TableCell, { className: "text-mastra-el-4 align-top py-4", children: evaluation.testInfo?.testName && /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-xs", children: evaluation.testInfo.testName }) })
+                    isCIMode && /* @__PURE__ */ jsx(TableCell, { className: "text-mastra-el-4 align-top py-4", children: evaluation.testInfo?.testName && /* @__PURE__ */ jsx(Badge$1, { variant: "secondary", className: "text-xs", children: evaluation.testInfo.testName }) })
                   ]
                 },
                 `${group.metricName}-${index}`
@@ -4707,7 +4749,7 @@ const useCodemirrorTheme = () => {
   return useMemo(
     () => githubDarkInit({
       settings: {
-        fontFamily: "var(--commit-mono)",
+        fontFamily: "var(--geist-mono)",
         fontSize: "0.8rem",
         foreground: "#030712",
         background: "#1a1a1a",
@@ -5876,6 +5918,31 @@ const useExecuteWorkflow = (baseUrl) => {
 const useWatchWorkflow = (baseUrl) => {
   const [isWatchingWorkflow, setIsWatchingWorkflow] = useState(false);
   const [watchResult, setWatchResult] = useState(null);
+  const debouncedSetWatchResult = useDebouncedCallback((record) => {
+    const formattedResults = Object.entries(record.results || {}).reduce(
+      (acc, [key, value]) => {
+        let output = value.status === "success" ? value.output : void 0;
+        if (output) {
+          output = Object.entries(output).reduce(
+            (_acc, [_key, _value]) => {
+              const val = _value;
+              _acc[_key] = val.type?.toLowerCase() === "buffer" ? { type: "Buffer", data: `[...buffered data]` } : val;
+              return _acc;
+            },
+            {}
+          );
+        }
+        acc[key] = { ...value, output };
+        return acc;
+      },
+      {}
+    );
+    const sanitizedRecord = {
+      ...record,
+      sanitizedOutput: record ? JSON.stringify({ ...record, results: formattedResults }, null, 2).slice(0, 5e4) : null
+    };
+    setWatchResult(sanitizedRecord);
+  }, 100);
   const watchWorkflow = async ({ workflowId, runId }) => {
     try {
       setIsWatchingWorkflow(true);
@@ -5884,7 +5951,14 @@ const useWatchWorkflow = (baseUrl) => {
       });
       const workflow = client.getWorkflow(workflowId);
       await workflow.watch({ runId }, (record) => {
-        setWatchResult(record);
+        try {
+          debouncedSetWatchResult(record);
+        } catch (err) {
+          console.error("Error processing workflow record:", err);
+          setWatchResult({
+            ...record
+          });
+        }
       });
     } catch (error) {
       console.error("Error watching workflow:", error);
@@ -7592,7 +7666,7 @@ function WorkflowTrigger({
   if (!triggerSchema) {
     return /* @__PURE__ */ jsx(ScrollArea, { className: "h-[calc(100vh-126px)] pt-2 px-4 pb-4 text-xs w-full", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
       /* @__PURE__ */ jsx("div", { className: "px-4 space-y-4", children: /* @__PURE__ */ jsx(Button, { className: "w-full", disabled: isRunning, onClick: () => handleExecuteWorkflow(null), children: isRunning ? /* @__PURE__ */ jsx(Loader2, { className: "w-4 h-4 animate-spin" }) : "Trigger" }) }),
-      /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("div", { className: "group relative flex flex-col", children: [
         /* @__PURE__ */ jsx(Text, { variant: "secondary", className: "px-4 text-mastra-el-3", size: "xs", children: "Output" }),
         /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: /* @__PURE__ */ jsx(
           CopyButton,
@@ -7605,7 +7679,7 @@ function WorkflowTrigger({
           CodeBlockDemo,
           {
             className: "w-full overflow-x-auto",
-            code: JSON.stringify(result ?? {}, null, 2),
+            code: result?.sanitizedOutput || JSON.stringify(result ?? {}, null, 2),
             language: "json"
           }
         )
@@ -7679,7 +7753,7 @@ function WorkflowTrigger({
         }
       )
     ] })),
-    result && /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+    result && /* @__PURE__ */ jsxs("div", { className: "flex flex-col group relative", children: [
       /* @__PURE__ */ jsx(Text, { variant: "secondary", className: "px-4 text-mastra-el-3", size: "xs", children: "Output" }),
       /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: /* @__PURE__ */ jsx(
         CopyButton,
@@ -7688,10 +7762,122 @@ function WorkflowTrigger({
           content: JSON.stringify(result, null, 2)
         }
       ) }),
-      /* @__PURE__ */ jsx(CodeBlockDemo, { className: "w-full overflow-x-auto", code: JSON.stringify(result, null, 2), language: "json" })
+      /* @__PURE__ */ jsx(
+        CodeBlockDemo,
+        {
+          className: "w-full overflow-x-auto",
+          code: result.sanitizedOutput || JSON.stringify(result, null, 2),
+          language: "json"
+        }
+      )
     ] })
   ] }) });
 }
 
-export { AgentChat, AgentEvals, AgentTraces, AgentsTable, DynamicForm, MastraResizablePanel, NetworkChat, WorkflowGraph, WorkflowRunContext, WorkflowRunProvider, WorkflowTraces, WorkflowTrigger, WorkflowsTable };
+const sizes = {
+  default: "[&>svg]:h-icon-default [&>svg]:w-icon-default",
+  lg: "[&>svg]:h-icon-lg [&>svg]:w-icon-lg"
+};
+const Icon = ({ children, className, size = "default", ...props }) => {
+  return /* @__PURE__ */ jsx("div", { className: clsx(sizes[size], className), ...props, children });
+};
+
+const variantClasses = {
+  default: "text-icon3",
+  success: "text-accent1",
+  error: "text-accent2",
+  info: "text-accent3"
+};
+const Badge = ({ icon, variant = "default", className, children, ...props }) => {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx(
+        "bg-surface4 text-ui-sm gap-md h-badge-default inline-flex items-center rounded-md",
+        icon ? "pl-md pr-1.5" : "px-1.5",
+        icon || variant === "default" ? "text-icon5" : variantClasses[variant],
+        className
+      ),
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: variantClasses[variant], children: /* @__PURE__ */ jsx(Icon, { children: icon }) }),
+        children
+      ]
+    }
+  );
+};
+
+const DarkLogo = (props) => /* @__PURE__ */ jsxs("svg", { width: "100", height: "100", viewBox: "0 0 100 100", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+  /* @__PURE__ */ jsx("rect", { width: "100", height: "100", fill: "black" }),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M49.9996 13.1627C29.6549 13.1627 13.1622 29.6553 13.1622 50.0001C13.1622 70.3449 29.6549 86.8375 49.9996 86.8375C70.3444 86.8375 86.8371 70.3449 86.8371 50.0001C86.8371 29.6553 70.3444 13.1627 49.9996 13.1627ZM10 50.0001C10 27.9089 27.9084 10.0005 49.9996 10.0005C72.0908 10.0005 89.9992 27.9089 89.9992 50.0001C89.9992 72.0913 72.0908 89.9997 49.9996 89.9997C27.9084 89.9997 10 72.0913 10 50.0001Z",
+      fill: "currentColor"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M43.3709 19.4582C35.493 17.9055 28.4985 19.4076 23.954 23.9521C19.4094 28.4967 17.9073 35.4911 19.46 43.3691C21.0103 51.235 25.5889 59.7924 32.8993 67.1028C40.2097 74.4132 48.7671 78.9918 56.633 80.5421C64.511 82.0948 71.5054 80.5927 76.05 76.0481C80.5945 71.5036 82.0966 64.5091 80.5439 56.6312C78.9936 48.7653 74.415 40.2079 67.1046 32.8975C59.7942 25.5871 51.2368 21.0085 43.3709 19.4582ZM43.9824 16.3557C52.5432 18.043 61.6476 22.9685 69.3406 30.6615C77.0336 38.3545 81.9591 47.4589 83.6464 56.0197C85.3313 64.5685 83.8044 72.7657 78.286 78.2841C72.7675 83.8026 64.5704 85.3295 56.0216 83.6446C47.4607 81.9573 38.3563 77.0317 30.6633 69.3388C22.9704 61.6458 18.0448 52.5414 16.3575 43.9805C14.6726 35.4317 16.1995 27.2346 21.718 21.7161C27.2364 16.1977 35.4336 14.6708 43.9824 16.3557Z",
+      fill: "currentColor"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M65.8864 51.719H34.314V48.5568H65.8864V51.719Z",
+      fill: "currentColor"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M59.2351 43.2352L43.194 59.2763L40.958 57.0403L56.9991 40.9992L59.2351 43.2352Z",
+      fill: "currentColor"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M43.1969 40.9992L59.2379 57.0403L57.002 59.2763L40.9609 43.2352L43.1969 40.9992Z",
+      fill: "currentColor"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M23.7151 33.0924C17.0466 37.565 13.1629 43.573 13.1629 49.9999C13.1629 56.4269 17.0466 62.4349 23.7151 66.9075C30.3734 71.3733 39.662 74.1867 50.0004 74.1867C60.3388 74.1867 69.6274 71.3733 76.2857 66.9075C82.9541 62.4349 86.8378 56.4269 86.8378 49.9999C86.8378 43.573 82.9541 37.565 76.2857 33.0924C69.6274 28.6266 60.3388 25.8132 50.0004 25.8132C39.662 25.8132 30.3734 28.6266 23.7151 33.0924ZM21.9537 30.4662C29.2002 25.6059 39.1209 22.651 50.0004 22.651C60.8799 22.651 70.8006 25.6059 78.0471 30.4662C85.2834 35.3197 90 42.1957 90 49.9999C90 57.8042 85.2834 64.6802 78.0471 69.5337C70.8006 74.394 60.8799 77.3489 50.0004 77.3489C39.1209 77.3489 29.2002 74.394 21.9537 69.5337C14.7174 64.6802 10.0008 57.8042 10.0008 49.9999C10.0008 42.1957 14.7174 35.3197 21.9537 30.4662Z",
+      fill: "currentColor"
+    }
+  )
+] });
+
+const variants = {
+  "header-md": "text-header-md leading-header-md",
+  "ui-lg": "text-ui-lg leading-ui-lg",
+  "ui-md": "text-ui-md leading-ui-md",
+  "ui-sm": "text-ui-sm leading-ui-sm",
+  "ui-xs": "text-ui-xs leading-ui-xs"
+};
+const fonts = {
+  mono: "font-mono"
+};
+const Txt = ({ as: Root = "p", className, variant = "ui-md", font, ...props }) => {
+  return /* @__PURE__ */ jsx(Root, { className: clsx(variants[variant], font && fonts[font], className), ...props });
+};
+
+export { AgentChat, AgentContext, AgentEvals, AgentProvider, AgentTraces, AgentsTable, Badge, DarkLogo, DynamicForm, MastraResizablePanel, NetworkChat, Txt, WorkflowGraph, WorkflowRunContext, WorkflowRunProvider, WorkflowTraces, WorkflowTrigger, WorkflowsTable };
 //# sourceMappingURL=index.es.js.map