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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/components/ui/scroll-area.d.ts +5 -1
  2. package/dist/index.es.js +42 -24
  3. package/dist/index.es.js.map +1 -1
  4. package/package.json +3 -3
package/dist/components/ui/scroll-area.d.ts CHANGED
@@ -1,5 +1,9 @@
1
1
  import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
2
2
  import * as React from 'react';
3
- declare const ScrollArea: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
3
+ interface ScrollAreaProps extends React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> {
4
+ viewPortClassName?: string;
5
+ maxHeight?: string;
6
+ }
7
+ declare const ScrollArea: React.ForwardRefExoticComponent<ScrollAreaProps & React.RefAttributes<HTMLDivElement>>;
4
8
  declare const ScrollBar: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
5
9
  export { ScrollArea, ScrollBar };
package/dist/index.es.js CHANGED
@@ -3431,7 +3431,8 @@ function MastraRuntimeProvider({
3431
3431
  const [messages, setMessages] = useState([]);
3432
3432
  const [currentThreadId, setCurrentThreadId] = useState(threadId);
3433
3433
  useEffect(() => {
3434
- if (messages.length === 0 || currentThreadId !== threadId) {
3434
+ const hasNewInitialMessages = initialMessages && initialMessages?.length > messages?.length;
3435
+ if (messages.length === 0 || currentThreadId !== threadId || hasNewInitialMessages && currentThreadId === threadId) {
3435
3436
  if (initialMessages && threadId && memory) {
3436
3437
  setMessages(initialMessages);
3437
3438
  setCurrentThreadId(threadId);
@@ -3497,6 +3498,10 @@ function MastraRuntimeProvider({
3497
3498
  role: "assistant",
3498
3499
  content: [{ type: "text", text: assistantMessage }]
3499
3500
  };
3501
+ const lastMessage = currentConversation[currentConversation.length - 1];
3502
+ if (lastMessage.id) {
3503
+ return currentConversation;
3504
+ }
3500
3505
  if (!assistantMessageAdded) {
3501
3506
  assistantMessageAdded = true;
3502
3507
  return [...currentConversation, message2];
@@ -3509,7 +3514,9 @@ function MastraRuntimeProvider({
3509
3514
  } finally {
3510
3515
  reader.releaseLock();
3511
3516
  setIsRunning(false);
3512
- refreshThreadList?.();
3517
+ setTimeout(() => {
3518
+ refreshThreadList?.();
3519
+ }, 500);
3513
3520
  }
3514
3521
  } catch (error) {
3515
3522
  console.error("Error occurred in MastraRuntimeProvider", error);
@@ -4083,11 +4090,22 @@ const MastraResizablePanel = ({
4083
4090
  ] });
4084
4091
  };
4085
4092
 
4086
- const ScrollArea = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(ScrollAreaPrimitive.Root, { ref, className: cn("relative overflow-hidden", className), ...props, children: [
4087
- /* @__PURE__ */ jsx(ScrollAreaPrimitive.Viewport, { className: "h-full w-full rounded-[inherit]", children }),
4088
- /* @__PURE__ */ jsx(ScrollBar, {}),
4089
- /* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {})
4090
- ] }));
4093
+ const ScrollArea = React.forwardRef(
4094
+ ({ className, children, viewPortClassName, maxHeight, ...props }, ref) => {
4095
+ return /* @__PURE__ */ jsxs(ScrollAreaPrimitive.Root, { ref, className: cn("relative overflow-hidden", className), ...props, children: [
4096
+ /* @__PURE__ */ jsx(
4097
+ ScrollAreaPrimitive.Viewport,
4098
+ {
4099
+ className: cn("h-full w-full rounded-[inherit] [&>div]:!block", viewPortClassName),
4100
+ style: maxHeight ? { maxHeight } : void 0,
4101
+ children
4102
+ }
4103
+ ),
4104
+ /* @__PURE__ */ jsx(ScrollBar, {}),
4105
+ /* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {})
4106
+ ] });
4107
+ }
4108
+ );
4091
4109
  ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
4092
4110
  const ScrollBar = React.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(
4093
4111
  ScrollAreaPrimitive.ScrollAreaScrollbar,
@@ -4273,7 +4291,7 @@ function Traces({ traces }) {
4273
4291
  return !prevTracesId.has(traceId);
4274
4292
  };
4275
4293
  const currentTraceParentSpan = currentTrace?.find((span) => span.parentSpanId === void 0) || currentTrace?.[0];
4276
- return /* @__PURE__ */ jsx("div", { className: "h-full w-[calc(100%_-_400px)]", children: /* @__PURE__ */ jsx(ScrollArea, { className: "h-full", children: /* @__PURE__ */ jsxs(Table, { children: [
4294
+ return /* @__PURE__ */ jsx("div", { className: "h-full w-[calc(100%_-_325px)]", children: /* @__PURE__ */ jsx(ScrollArea, { className: "h-full", children: /* @__PURE__ */ jsxs(Table, { children: [
4277
4295
  /* @__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: [
4278
4296
  /* @__PURE__ */ jsx(TableHead, { className: "text-mastra-el-3 h-10", children: "Trace" }),
4279
4297
  /* @__PURE__ */ jsxs(TableHead, { className: "text-mastra-el-3 flex items-center gap-1 h-10", children: [
@@ -4850,7 +4868,7 @@ function AgentTracesInner({
4850
4868
  const { isOpen: open } = useContext(TraceContext);
4851
4869
  if (firstCallLoading) {
4852
4870
  return /* @__PURE__ */ jsxs("main", { className: "flex-1 relative overflow-hidden h-full", children: [
4853
- /* @__PURE__ */ jsx("div", { className: "h-full w-[calc(100%_-_400px)]", children: /* @__PURE__ */ jsxs(Table, { children: [
4871
+ /* @__PURE__ */ jsx("div", { className: "h-full w-[calc(100%_-_325px)]", children: /* @__PURE__ */ jsxs(Table, { children: [
4854
4872
  /* @__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: [
4855
4873
  /* @__PURE__ */ jsx(TableHead, { className: "text-mastra-el-3 h-10", children: "Trace" }),
4856
4874
  /* @__PURE__ */ jsxs(TableHead, { className: "text-mastra-el-3 flex items-center gap-1 h-10", children: [
@@ -4867,12 +4885,12 @@ function AgentTracesInner({
4867
4885
  /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-full" }) })
4868
4886
  ] }) })
4869
4887
  ] }) }),
4870
- /* @__PURE__ */ jsx(SidebarItems$1, { sidebarChild, className: "min-w-[400px]" })
4888
+ /* @__PURE__ */ jsx(SidebarItems$1, { sidebarChild, className: "min-w-[325px]" })
4871
4889
  ] });
4872
4890
  }
4873
4891
  if (!traces || traces.length === 0) {
4874
4892
  return /* @__PURE__ */ jsxs("main", { className: "flex-1 h-full relative overflow-hidden", children: [
4875
- /* @__PURE__ */ jsx("div", { className: "h-full w-[calc(100%_-_400px)]", children: /* @__PURE__ */ jsxs(Table, { children: [
4893
+ /* @__PURE__ */ jsx("div", { className: "h-full w-[calc(100%_-_325px)]", children: /* @__PURE__ */ jsxs(Table, { children: [
4876
4894
  /* @__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: [
4877
4895
  /* @__PURE__ */ jsx(TableHead, { className: "text-mastra-el-3 h-10", children: "Trace" }),
4878
4896
  /* @__PURE__ */ jsxs(TableHead, { className: "text-mastra-el-3 flex items-center gap-1 h-10", children: [
@@ -4884,12 +4902,12 @@ function AgentTracesInner({
4884
4902
  ] }) }),
4885
4903
  /* @__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" }) }) })
4886
4904
  ] }) }),
4887
- /* @__PURE__ */ jsx(SidebarItems$1, { sidebarChild, className: "min-w-[400px]" })
4905
+ /* @__PURE__ */ jsx(SidebarItems$1, { sidebarChild, className: "min-w-[325px]" })
4888
4906
  ] });
4889
4907
  }
4890
4908
  return /* @__PURE__ */ jsxs("main", { className: "flex-1 h-full relative overflow-hidden", children: [
4891
4909
  /* @__PURE__ */ jsx(Traces, { traces }),
4892
- /* @__PURE__ */ jsx(SidebarItems$1, { sidebarChild, className: cn(open ? "grid grid-cols-2 w-[60%]" : "min-w-[400px]") })
4910
+ /* @__PURE__ */ jsx(SidebarItems$1, { sidebarChild, className: cn(open ? "grid grid-cols-2 w-[60%]" : "min-w-[325px]") })
4893
4911
  ] });
4894
4912
  }
4895
4913
  function SidebarItems$1({ sidebarChild, className }) {
@@ -4902,9 +4920,9 @@ function SidebarItems$1({ sidebarChild, className }) {
4902
4920
  "absolute right-0 top-0 h-full z-20 overflow-x-scroll border-l-[0.5px] bg-mastra-bg-1 bg-[#121212]",
4903
4921
  className
4904
4922
  ),
4905
- defaultWidth: open ? 60 : 30,
4906
- minimumWidth: open ? 50 : 30,
4907
- maximumWidth: open ? 90 : 50,
4923
+ defaultWidth: open ? 60 : 20,
4924
+ minimumWidth: open ? 50 : 20,
4925
+ maximumWidth: open ? 90 : 60,
4908
4926
  children: [
4909
4927
  open && /* @__PURE__ */ jsx(
4910
4928
  "div",
@@ -5550,7 +5568,7 @@ function WorkflowTracesInner({
5550
5568
  const { isOpen: open } = useContext(TraceContext);
5551
5569
  if (firstCallLoading) {
5552
5570
  return /* @__PURE__ */ jsxs("main", { className: "flex-1 h-full relative overflow-hidden", children: [
5553
- /* @__PURE__ */ jsx("div", { className: "h-full w-[calc(100%_-_400px)]", children: /* @__PURE__ */ jsxs(Table, { children: [
5571
+ /* @__PURE__ */ jsx("div", { className: "h-full w-[calc(100%_-_325px)]", children: /* @__PURE__ */ jsxs(Table, { children: [
5554
5572
  /* @__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: [
5555
5573
  /* @__PURE__ */ jsx(TableHead, { className: "text-mastra-el-3 h-10", children: "Trace" }),
5556
5574
  /* @__PURE__ */ jsxs(TableHead, { className: "text-mastra-el-3 flex items-center gap-1 h-10", children: [
@@ -5567,12 +5585,12 @@ function WorkflowTracesInner({
5567
5585
  /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-full" }) })
5568
5586
  ] }) })
5569
5587
  ] }) }),
5570
- /* @__PURE__ */ jsx(SidebarItems, { sidebarChild, className: "min-w-[400px]" })
5588
+ /* @__PURE__ */ jsx(SidebarItems, { sidebarChild, className: "min-w-[325px]" })
5571
5589
  ] });
5572
5590
  }
5573
5591
  if (!traces || traces.length === 0) {
5574
5592
  return /* @__PURE__ */ jsxs("main", { className: "flex-1 h-full relative overflow-hidden", children: [
5575
- /* @__PURE__ */ jsx("div", { className: "h-full w-[calc(100%_-_400px)]", children: /* @__PURE__ */ jsxs(Table, { children: [
5593
+ /* @__PURE__ */ jsx("div", { className: "h-full w-[calc(100%_-_325px)]", children: /* @__PURE__ */ jsxs(Table, { children: [
5576
5594
  /* @__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: [
5577
5595
  /* @__PURE__ */ jsx(TableHead, { className: "text-mastra-el-3 h-10", children: "Trace" }),
5578
5596
  /* @__PURE__ */ jsxs(TableHead, { className: "text-mastra-el-3 flex items-center gap-1 h-10", children: [
@@ -5584,12 +5602,12 @@ function WorkflowTracesInner({
5584
5602
  ] }) }),
5585
5603
  /* @__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" }) }) })
5586
5604
  ] }) }),
5587
- /* @__PURE__ */ jsx(SidebarItems, { sidebarChild, className: "min-w-[400px]" })
5605
+ /* @__PURE__ */ jsx(SidebarItems, { sidebarChild, className: "min-w-[325px]" })
5588
5606
  ] });
5589
5607
  }
5590
5608
  return /* @__PURE__ */ jsxs("main", { className: "flex-1 h-full relative overflow-hidden", children: [
5591
5609
  /* @__PURE__ */ jsx(Traces, { traces }),
5592
- /* @__PURE__ */ jsx(SidebarItems, { className: cn(open ? "grid grid-cols-2 w-[60%]" : "min-w-[400px]"), sidebarChild })
5610
+ /* @__PURE__ */ jsx(SidebarItems, { className: cn(open ? "grid grid-cols-2 w-[60%]" : "min-w-[325px]"), sidebarChild })
5593
5611
  ] });
5594
5612
  }
5595
5613
  function SidebarItems({ sidebarChild, className }) {
@@ -5602,9 +5620,9 @@ function SidebarItems({ sidebarChild, className }) {
5602
5620
  "absolute right-0 top-0 h-full z-20 overflow-x-scroll border-l-[0.5px] bg-mastra-bg-1 bg-[#121212]",
5603
5621
  className
5604
5622
  ),
5605
- defaultWidth: open ? 60 : 30,
5606
- minimumWidth: open ? 50 : 30,
5607
- maximumWidth: open ? 90 : 50,
5623
+ defaultWidth: open ? 60 : 20,
5624
+ minimumWidth: open ? 50 : 20,
5625
+ maximumWidth: open ? 90 : 60,
5608
5626
  children: [
5609
5627
  open && /* @__PURE__ */ jsx(
5610
5628
  "div",