@mastra/playground-ui 2.0.3 → 2.0.4-alpha.1

package/dist/components/ui/scroll-area.d.ts

@@ -1,5 +1,9 @@
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import * as React from 'react';
-declare const ScrollArea: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface ScrollAreaProps extends React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> {
+    viewPortClassName?: string;
+    maxHeight?: string;
+}
+declare const ScrollArea: React.ForwardRefExoticComponent<ScrollAreaProps & React.RefAttributes<HTMLDivElement>>;
 declare const ScrollBar: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { ScrollArea, ScrollBar };

package/dist/index.es.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { MessagePrimitive, ActionBarPrimitive, BranchPickerPrimitive, ThreadPrimitive, ComposerPrimitive, useExternalStoreRuntime, AssistantRuntimeProvider } from '@assistant-ui/react';
-import { CheckIcon, CopyIcon, ChevronLeftIcon, ChevronRightIcon, ArrowUp, Copy, Search, RefreshCcwIcon, ChevronRight, SortAsc, SortDesc, Braces, Clock1, ChevronDown, XIcon, Check, LoaderCircle, ChevronUpIcon, ChevronDownIcon, ExternalLinkIcon, Footprints, CircleCheck, CircleX, AlertCircleIcon, X, Plus, CalendarIcon, Loader2 } from 'lucide-react';
+import { CheckIcon, CopyIcon, ChevronLeftIcon, ChevronRightIcon, ArrowUp, Copy, Search, RefreshCcwIcon, ChevronRight, SortAsc, SortDesc, Braces, Clock1, ChevronDown, XIcon, Check, LoaderCircle, ChevronUpIcon, ChevronDownIcon, ExternalLinkIcon, X, Footprints, CircleCheck, CircleX, AlertCircleIcon, Plus, CalendarIcon, Loader2 } from 'lucide-react';
 import * as React from 'react';
 import React__default, { forwardRef, memo, useState, useEffect, createContext, useContext, useRef, useMemo, useCallback, Suspense, Fragment as Fragment$1 } from 'react';
 import { Slot } from '@radix-ui/react-slot';
@@ -29,6 +29,7 @@ import '@xyflow/react/dist/style.css';
 import Dagre from '@dagrejs/dagre';
 import { Highlight, themes } from 'prism-react-renderer';
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
 import jsonSchemaToZod from 'json-schema-to-zod';
 import { parse } from 'superjson';
 import * as z from 'zod';
@@ -3431,7 +3432,8 @@ function MastraRuntimeProvider({
   const [messages, setMessages] = useState([]);
   const [currentThreadId, setCurrentThreadId] = useState(threadId);
   useEffect(() => {
-    if (messages.length === 0 || currentThreadId !== threadId) {
+    const hasNewInitialMessages = initialMessages && initialMessages?.length > messages?.length;
+    if (messages.length === 0 || currentThreadId !== threadId || hasNewInitialMessages && currentThreadId === threadId) {
       if (initialMessages && threadId && memory) {
         setMessages(initialMessages);
         setCurrentThreadId(threadId);
@@ -3497,6 +3499,10 @@ function MastraRuntimeProvider({
                 role: "assistant",
                 content: [{ type: "text", text: assistantMessage }]
               };
+              const lastMessage = currentConversation[currentConversation.length - 1];
+              if (lastMessage.id) {
+                return currentConversation;
+              }
               if (!assistantMessageAdded) {
                 assistantMessageAdded = true;
                 return [...currentConversation, message2];
@@ -3509,7 +3515,9 @@ function MastraRuntimeProvider({
       } finally {
         reader.releaseLock();
         setIsRunning(false);
-        refreshThreadList?.();
+        setTimeout(() => {
+          refreshThreadList?.();
+        }, 500);
       }
     } catch (error) {
       console.error("Error occurred in MastraRuntimeProvider", error);
@@ -4083,11 +4091,22 @@ const MastraResizablePanel = ({
   ] });
 };
 
-const ScrollArea = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(ScrollAreaPrimitive.Root, { ref, className: cn("relative overflow-hidden", className), ...props, children: [
-  /* @__PURE__ */ jsx(ScrollAreaPrimitive.Viewport, { className: "h-full w-full rounded-[inherit]", children }),
-  /* @__PURE__ */ jsx(ScrollBar, {}),
-  /* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {})
-] }));
+const ScrollArea = React.forwardRef(
+  ({ className, children, viewPortClassName, maxHeight, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(ScrollAreaPrimitive.Root, { ref, className: cn("relative overflow-hidden", className), ...props, children: [
+      /* @__PURE__ */ jsx(
+        ScrollAreaPrimitive.Viewport,
+        {
+          className: cn("h-full w-full rounded-[inherit] [&>div]:!block", viewPortClassName),
+          style: maxHeight ? { maxHeight } : void 0,
+          children
+        }
+      ),
+      /* @__PURE__ */ jsx(ScrollBar, {}),
+      /* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {})
+    ] });
+  }
+);
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
 const ScrollBar = React.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(
   ScrollAreaPrimitive.ScrollAreaScrollbar,
@@ -4273,7 +4292,7 @@ function Traces({ traces }) {
     return !prevTracesId.has(traceId);
   };
   const currentTraceParentSpan = currentTrace?.find((span) => span.parentSpanId === void 0) || currentTrace?.[0];
-  return /* @__PURE__ */ jsx("div", { className: "h-full w-[calc(100%_-_400px)]", children: /* @__PURE__ */ jsx(ScrollArea, { className: "h-full", children: /* @__PURE__ */ jsxs(Table, { children: [
+  return /* @__PURE__ */ jsx("div", { className: "h-full w-[calc(100%_-_325px)]", children: /* @__PURE__ */ jsx(ScrollArea, { className: "h-full", children: /* @__PURE__ */ jsxs(Table, { children: [
     /* @__PURE__ */ jsx(TableHeader, { className: "sticky top-0 z-10 bg-[#0F0F0F]", style: { outline: "1px solid 0_0%_20.4%" }, children: /* @__PURE__ */ jsxs(TableRow, { className: "border-gray-6 border-b-[0.1px] text-[0.8125rem]", children: [
       /* @__PURE__ */ jsx(TableHead, { className: "text-mastra-el-3 h-10", children: "Trace" }),
       /* @__PURE__ */ jsxs(TableHead, { className: "text-mastra-el-3 flex items-center gap-1 h-10", children: [
@@ -4850,7 +4869,7 @@ function AgentTracesInner({
   const { isOpen: open } = useContext(TraceContext);
   if (firstCallLoading) {
     return /* @__PURE__ */ jsxs("main", { className: "flex-1 relative overflow-hidden h-full", children: [
-      /* @__PURE__ */ jsx("div", { className: "h-full w-[calc(100%_-_400px)]", children: /* @__PURE__ */ jsxs(Table, { children: [
+      /* @__PURE__ */ jsx("div", { className: "h-full w-[calc(100%_-_325px)]", children: /* @__PURE__ */ jsxs(Table, { children: [
         /* @__PURE__ */ jsx(TableHeader, { className: "sticky top-0 z-10 bg-[#0F0F0F]", children: /* @__PURE__ */ jsxs(TableRow, { className: "border-gray-6 border-b-[0.1px] text-[0.8125rem]", children: [
           /* @__PURE__ */ jsx(TableHead, { className: "text-mastra-el-3 h-10", children: "Trace" }),
           /* @__PURE__ */ jsxs(TableHead, { className: "text-mastra-el-3 flex items-center gap-1 h-10", children: [
@@ -4867,12 +4886,12 @@ function AgentTracesInner({
           /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-full" }) })
         ] }) })
       ] }) }),
-      /* @__PURE__ */ jsx(SidebarItems$1, { sidebarChild, className: "min-w-[400px]" })
+      /* @__PURE__ */ jsx(SidebarItems$1, { sidebarChild, className: "min-w-[325px]" })
     ] });
   }
   if (!traces || traces.length === 0) {
     return /* @__PURE__ */ jsxs("main", { className: "flex-1 h-full relative overflow-hidden", children: [
-      /* @__PURE__ */ jsx("div", { className: "h-full w-[calc(100%_-_400px)]", children: /* @__PURE__ */ jsxs(Table, { children: [
+      /* @__PURE__ */ jsx("div", { className: "h-full w-[calc(100%_-_325px)]", children: /* @__PURE__ */ jsxs(Table, { children: [
         /* @__PURE__ */ jsx(TableHeader, { className: "sticky top-0 z-10 bg-[#0F0F0F]", children: /* @__PURE__ */ jsxs(TableRow, { className: "border-gray-6 border-b-[0.1px] text-[0.8125rem]", children: [
           /* @__PURE__ */ jsx(TableHead, { className: "text-mastra-el-3 h-10", children: "Trace" }),
           /* @__PURE__ */ jsxs(TableHead, { className: "text-mastra-el-3 flex items-center gap-1 h-10", children: [
@@ -4884,12 +4903,12 @@ function AgentTracesInner({
         ] }) }),
         /* @__PURE__ */ jsx(TableBody, { className: "border-b border-gray-6", children: /* @__PURE__ */ jsx(TableRow, { className: "border-b-gray-6 border-b-[0.1px] text-[0.8125rem]", children: /* @__PURE__ */ jsx(TableCell, { colSpan: 4, className: "h-24 text-center", children: error?.message || "No traces found" }) }) })
       ] }) }),
-      /* @__PURE__ */ jsx(SidebarItems$1, { sidebarChild, className: "min-w-[400px]" })
+      /* @__PURE__ */ jsx(SidebarItems$1, { sidebarChild, className: "min-w-[325px]" })
     ] });
   }
   return /* @__PURE__ */ jsxs("main", { className: "flex-1 h-full relative overflow-hidden", children: [
     /* @__PURE__ */ jsx(Traces, { traces }),
-    /* @__PURE__ */ jsx(SidebarItems$1, { sidebarChild, className: cn(open ? "grid grid-cols-2 w-[60%]" : "min-w-[400px]") })
+    /* @__PURE__ */ jsx(SidebarItems$1, { sidebarChild, className: cn(open ? "grid grid-cols-2 w-[60%]" : "min-w-[325px]") })
   ] });
 }
 function SidebarItems$1({ sidebarChild, className }) {
@@ -4902,9 +4921,9 @@ function SidebarItems$1({ sidebarChild, className }) {
         "absolute right-0 top-0 h-full z-20 overflow-x-scroll border-l-[0.5px] bg-mastra-bg-1 bg-[#121212]",
         className
       ),
-      defaultWidth: open ? 60 : 30,
-      minimumWidth: open ? 50 : 30,
-      maximumWidth: open ? 90 : 50,
+      defaultWidth: open ? 60 : 20,
+      minimumWidth: open ? 50 : 20,
+      maximumWidth: open ? 90 : 60,
       children: [
         open && /* @__PURE__ */ jsx(
           "div",
@@ -5550,7 +5569,7 @@ function WorkflowTracesInner({
   const { isOpen: open } = useContext(TraceContext);
   if (firstCallLoading) {
     return /* @__PURE__ */ jsxs("main", { className: "flex-1 h-full relative overflow-hidden", children: [
-      /* @__PURE__ */ jsx("div", { className: "h-full w-[calc(100%_-_400px)]", children: /* @__PURE__ */ jsxs(Table, { children: [
+      /* @__PURE__ */ jsx("div", { className: "h-full w-[calc(100%_-_325px)]", children: /* @__PURE__ */ jsxs(Table, { children: [
         /* @__PURE__ */ jsx(TableHeader, { className: "sticky top-0 z-10 bg-[#0F0F0F]", children: /* @__PURE__ */ jsxs(TableRow, { className: "border-gray-6 border-b-[0.1px] text-[0.8125rem]", children: [
           /* @__PURE__ */ jsx(TableHead, { className: "text-mastra-el-3 h-10", children: "Trace" }),
           /* @__PURE__ */ jsxs(TableHead, { className: "text-mastra-el-3 flex items-center gap-1 h-10", children: [
@@ -5567,12 +5586,12 @@ function WorkflowTracesInner({
           /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-full" }) })
         ] }) })
       ] }) }),
-      /* @__PURE__ */ jsx(SidebarItems, { sidebarChild, className: "min-w-[400px]" })
+      /* @__PURE__ */ jsx(SidebarItems, { sidebarChild, className: "min-w-[325px]" })
     ] });
   }
   if (!traces || traces.length === 0) {
     return /* @__PURE__ */ jsxs("main", { className: "flex-1 h-full relative overflow-hidden", children: [
-      /* @__PURE__ */ jsx("div", { className: "h-full w-[calc(100%_-_400px)]", children: /* @__PURE__ */ jsxs(Table, { children: [
+      /* @__PURE__ */ jsx("div", { className: "h-full w-[calc(100%_-_325px)]", children: /* @__PURE__ */ jsxs(Table, { children: [
         /* @__PURE__ */ jsx(TableHeader, { className: "sticky top-0 z-10 bg-[#0F0F0F]", children: /* @__PURE__ */ jsxs(TableRow, { className: "border-gray-6 border-b-[0.1px] text-[0.8125rem]", children: [
           /* @__PURE__ */ jsx(TableHead, { className: "text-mastra-el-3 h-10", children: "Trace" }),
           /* @__PURE__ */ jsxs(TableHead, { className: "text-mastra-el-3 flex items-center gap-1 h-10", children: [
@@ -5584,12 +5603,12 @@ function WorkflowTracesInner({
         ] }) }),
         /* @__PURE__ */ jsx(TableBody, { className: "border-b border-gray-6", children: /* @__PURE__ */ jsx(TableRow, { className: "border-b-gray-6 border-b-[0.1px] text-[0.8125rem]", children: /* @__PURE__ */ jsx(TableCell, { colSpan: 4, className: "h-24 text-center", children: error?.message || "No traces found" }) }) })
       ] }) }),
-      /* @__PURE__ */ jsx(SidebarItems, { sidebarChild, className: "min-w-[400px]" })
+      /* @__PURE__ */ jsx(SidebarItems, { sidebarChild, className: "min-w-[325px]" })
     ] });
   }
   return /* @__PURE__ */ jsxs("main", { className: "flex-1 h-full relative overflow-hidden", children: [
     /* @__PURE__ */ jsx(Traces, { traces }),
-    /* @__PURE__ */ jsx(SidebarItems, { className: cn(open ? "grid grid-cols-2 w-[60%]" : "min-w-[400px]"), sidebarChild })
+    /* @__PURE__ */ jsx(SidebarItems, { className: cn(open ? "grid grid-cols-2 w-[60%]" : "min-w-[325px]"), sidebarChild })
   ] });
 }
 function SidebarItems({ sidebarChild, className }) {
@@ -5602,9 +5621,9 @@ function SidebarItems({ sidebarChild, className }) {
         "absolute right-0 top-0 h-full z-20 overflow-x-scroll border-l-[0.5px] bg-mastra-bg-1 bg-[#121212]",
         className
       ),
-      defaultWidth: open ? 60 : 30,
-      minimumWidth: open ? 50 : 30,
-      maximumWidth: open ? 90 : 50,
+      defaultWidth: open ? 60 : 20,
+      minimumWidth: open ? 50 : 20,
+      maximumWidth: open ? 90 : 60,
       children: [
         open && /* @__PURE__ */ jsx(
           "div",
@@ -6128,9 +6147,58 @@ const Collapsible = CollapsiblePrimitive.Root;
 const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
 const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
 
+const Dialog = DialogPrimitive.Root;
+const DialogPortal = DialogPrimitive.Portal;
+const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Overlay,
+  {
+    ref,
+    className: cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    ),
+    ...props
+  }
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
+  /* @__PURE__ */ jsx(DialogOverlay, {}),
+  /* @__PURE__ */ jsxs(
+    DialogPrimitive.Content,
+    {
+      ref,
+      className: cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
+          /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+        ] })
+      ]
+    }
+  )
+] }));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+const DialogTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Title,
+  {
+    ref,
+    className: cn("text-lg font-semibold leading-none tracking-tight", className),
+    ...props
+  }
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+const DialogDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Description, { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
 function WorkflowConditionNode({ data }) {
   const { conditions } = data;
   const [open, setOpen] = useState(true);
+  const [openDialog, setOpenDialog] = useState(false);
   const type = conditions[0]?.type;
   const isCollapsible = (conditions.some((condition) => condition.fnString) || conditions?.length > 1) && type !== "else";
   return /* @__PURE__ */ jsxs(
@@ -6165,17 +6233,40 @@ function WorkflowConditionNode({ data }) {
           )
         ] }),
         type === "else" ? null : /* @__PURE__ */ jsx(CollapsibleContent, { className: "flex flex-col gap-2", children: conditions.map((condition, index) => {
-          return condition.fnString ? /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(Highlight, { theme: themes.oneDark, code: String(condition.fnString).trim(), language: "javascript", children: ({ className, style, tokens, getLineProps, getTokenProps }) => /* @__PURE__ */ jsx(
-            "pre",
-            {
-              className: `${className} relative font-mono text-sm overflow-x-auto p-3 w-full rounded-lg mt-2 dark:bg-zinc-800`,
-              style: { ...style, maxHeight: "9.62rem" },
-              children: tokens.map((line, i) => /* @__PURE__ */ jsxs("div", { ...getLineProps({ line }), children: [
-                /* @__PURE__ */ jsx("span", { className: "inline-block mr-2 text-muted-foreground", children: i + 1 }),
-                line.map((token, key) => /* @__PURE__ */ jsx("span", { ...getTokenProps({ token }) }, key))
-              ] }, i))
-            }
-          ) }) }, `${condition.fnString}-${index}`) : /* @__PURE__ */ jsx(Fragment$1, { children: condition.ref?.step ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+          return condition.fnString ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+            /* @__PURE__ */ jsx(Highlight, { theme: themes.oneDark, code: String(condition.fnString).trim(), language: "javascript", children: ({ className, style, tokens, getLineProps, getTokenProps }) => /* @__PURE__ */ jsx(
+              "pre",
+              {
+                className: `${className} relative font-mono text-sm overflow-x-auto p-3 w-full cursor-pointer rounded-lg mt-2`,
+                style: {
+                  ...style,
+                  backgroundColor: "transparent",
+                  border: "1px solid #343434",
+                  maxHeight: "9.62rem"
+                },
+                onClick: () => setOpenDialog(true),
+                children: tokens.map((line, i) => /* @__PURE__ */ jsxs("div", { ...getLineProps({ line }), children: [
+                  /* @__PURE__ */ jsx("span", { className: "inline-block mr-2 text-muted-foreground", children: i + 1 }),
+                  line.map((token, key) => /* @__PURE__ */ jsx("span", { ...getTokenProps({ token }) }, key))
+                ] }, i))
+              }
+            ) }),
+            /* @__PURE__ */ jsx(Dialog, { open: openDialog, onOpenChange: setOpenDialog, children: /* @__PURE__ */ jsx(DialogContent, { className: "max-w-[30rem] bg-[#121212] p-[0.5rem]", children: /* @__PURE__ */ jsx(ScrollArea, { className: "w-full p-2", maxHeight: "400px", children: /* @__PURE__ */ jsx(Highlight, { theme: themes.oneDark, code: String(condition.fnString).trim(), language: "javascript", children: ({ className, style, tokens, getLineProps, getTokenProps }) => /* @__PURE__ */ jsx(
+              "pre",
+              {
+                className: `${className} relative font-mono text-sm overflow-x-auto p-3 w-full rounded-lg mt-2 dark:bg-zinc-800`,
+                style: {
+                  ...style,
+                  backgroundColor: "#121212",
+                  padding: "0 0.75rem 0 0"
+                },
+                children: tokens.map((line, i) => /* @__PURE__ */ jsxs("div", { ...getLineProps({ line }), children: [
+                  /* @__PURE__ */ jsx("span", { className: "inline-block mr-2 text-muted-foreground", children: i + 1 }),
+                  line.map((token, key) => /* @__PURE__ */ jsx("span", { ...getTokenProps({ token }) }, key))
+                ] }, i))
+              }
+            ) }) }) }) })
+          ] }, `${condition.fnString}-${index}`) : /* @__PURE__ */ jsx(Fragment$1, { children: condition.ref?.step ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
             index === 0 ? null : /* @__PURE__ */ jsx(
               Text,
               {