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

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

@@ -3,6 +3,7 @@ import * as React from 'react';
 interface ScrollAreaProps extends React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> {
     viewPortClassName?: string;
     maxHeight?: string;
+    autoScroll?: boolean;
 }
 declare const ScrollArea: React.ForwardRefExoticComponent<ScrollAreaProps & React.RefAttributes<HTMLDivElement>>;
 declare const ScrollBar: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/hooks/use-autoscroll.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from '../../node_modules/@types/react';
+
+export interface UseAutoscrollOptions {
+    enabled?: boolean;
+}
+export declare const useAutoscroll: (ref: React.RefObject<HTMLElement | null>, { enabled }: UseAutoscrollOptions) => void;

package/dist/hooks/use-workflows.d.ts

@@ -2,7 +2,7 @@ import { Workflow } from '@mastra/core/workflows';
 import { WorkflowRunResult } from '@mastra/client-js';
 
 export declare const useWorkflow: (workflowId: string, baseUrl: string) => {
-    workflow: Workflow<import('@mastra/core').Step<string, any, any, import('@mastra/core').StepExecutionContext<any, import('@mastra/core').WorkflowContext<any, import('@mastra/core').Step<string, any, any, any>[], Record<string, any>>>>[], any> | null;
+    workflow: Workflow<import('@mastra/core').Step<string, any, any, import('@mastra/core').StepExecutionContext<any, import('@mastra/core').WorkflowContext<any, import('@mastra/core').Step<string, any, any, any>[], Record<string, any>>>>[], string, any, any> | null;
     isLoading: boolean;
 };
 export declare const useExecuteWorkflow: (baseUrl: string) => {

package/dist/index.es.js

@@ -2,7 +2,7 @@ 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, 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 React__default, { forwardRef, memo, useState, useRef, useEffect, createContext, useContext, useMemo, useCallback, Suspense, Fragment as Fragment$1 } from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
@@ -3184,6 +3184,44 @@ const UserMessage = () => {
   );
 };
 
+const useAutoscroll = (ref, { enabled = true }) => {
+  const shouldScrollRef = useRef(enabled);
+  React__default.useEffect(() => {
+    if (!enabled) return;
+    if (!ref?.current) return;
+    const area = ref.current;
+    const observer = new MutationObserver(() => {
+      if (shouldScrollRef.current) {
+        area.scrollTo({ top: area.scrollHeight, behavior: "smooth" });
+      }
+    });
+    observer.observe(area, {
+      childList: true,
+      // observe direct children changes
+      subtree: true,
+      // observe all descendants
+      characterData: true
+      // observe text content changes
+    });
+    const handleScroll = (e) => {
+      const scrollElement = e.target;
+      const currentPosition = scrollElement.scrollTop + scrollElement.clientHeight;
+      const totalHeight = scrollElement.scrollHeight;
+      const isAtEnd = currentPosition >= totalHeight - 1;
+      if (isAtEnd) {
+        shouldScrollRef.current = true;
+      } else {
+        shouldScrollRef.current = false;
+      }
+    };
+    area.addEventListener("scroll", handleScroll);
+    return () => {
+      area.removeEventListener("scroll", handleScroll);
+      observer.disconnect();
+    };
+  }, [enabled, ref]);
+};
+
 const suggestions = ["What capabilities do you have?", "How can you help me?", "Tell me about yourself"];
 const Thread = ({
   memory,
@@ -3192,6 +3230,8 @@ const Thread = ({
   function WrappedAssistantMessage(props) {
     return /* @__PURE__ */ jsx(AssistantMessage, { ...props, ToolFallback });
   }
+  const areaRef = useRef(null);
+  useAutoscroll(areaRef, { enabled: true });
   return /* @__PURE__ */ jsxs(
     ThreadPrimitive.Root,
     {
@@ -3214,6 +3254,8 @@ const Thread = ({
               height: memory ? "calc(100vh - 65px)" : "calc(100vh - 90px)",
               paddingBottom: "108px"
             },
+            ref: areaRef,
+            autoScroll: false,
             children: [
               /* @__PURE__ */ jsxs("div", { style: { width: "100%", maxWidth: "48rem", paddingInline: "1.5rem" }, children: [
                 /* @__PURE__ */ jsx(ThreadWelcome, {}),
@@ -4092,11 +4134,14 @@ const MastraResizablePanel = ({
 };
 
 const ScrollArea = React.forwardRef(
-  ({ className, children, viewPortClassName, maxHeight, ...props }, ref) => {
+  ({ className, children, viewPortClassName, maxHeight, autoScroll = false, ...props }, ref) => {
+    const areaRef = React.useRef(null);
+    useAutoscroll(areaRef, { enabled: autoScroll });
     return /* @__PURE__ */ jsxs(ScrollAreaPrimitive.Root, { ref, className: cn("relative overflow-hidden", className), ...props, children: [
       /* @__PURE__ */ jsx(
         ScrollAreaPrimitive.Viewport,
         {
+          ref: areaRef,
           className: cn("h-full w-full rounded-[inherit] [&>div]:!block", viewPortClassName),
           style: maxHeight ? { maxHeight } : void 0,
           children
@@ -4666,7 +4711,11 @@ function Attributes({ span }) {
   if (!span.attributes) return null;
   return /* @__PURE__ */ jsx(AttributesValues, { attributes: span.attributes });
 }
-function AttributesValues({ attributes, depth = 0 }) {
+function AttributesValues({
+  attributes,
+  depth = 0,
+  keyName
+}) {
   if (attributes === null) return null;
   if (attributes === void 0) return null;
   if (typeof attributes === "string") {
@@ -4676,6 +4725,10 @@ function AttributesValues({ attributes, depth = 0 }) {
         return /* @__PURE__ */ jsx(SyntaxHighlighter, { data: attr });
       }
     } catch {
+      const val = attributes ? cleanString(attributes.toString()) : "N/A";
+      if (keyName === "Input" && val === "[Not Serializable]") {
+        return /* @__PURE__ */ jsx("span", { className: "text-sm overflow-x-scroll", children: "No input" });
+      }
       return /* @__PURE__ */ jsx("span", { className: "text-sm overflow-x-scroll", children: attributes ? cleanString(attributes.toString()) : "N/A" });
     }
   }
@@ -4689,7 +4742,7 @@ function AttributesValues({ attributes, depth = 0 }) {
     if (entries.length === 0) return null;
     return /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx("div", { className: "mt-1", children: entries.map(([key, val]) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 p-2 pl-0", children: [
       /* @__PURE__ */ jsx("span", { className: "text-sm capitalize text-mastra-el-3", children: transformKey(key) }),
-      /* @__PURE__ */ jsx(AttributesValues, { attributes: val, depth: depth + 1 })
+      /* @__PURE__ */ jsx(AttributesValues, { attributes: val, depth: depth + 1, keyName: transformKey(key) })
     ] }, key)) }) });
   }
   if (typeof processedValue === "boolean")
@@ -4839,8 +4892,8 @@ const useTraces = (componentName, baseUrl, isWorkflow = false) => {
   const onError = useCallback((error2) => {
     toast.error(error2.message);
   }, []);
-  const shouldContinue = useCallback((result) => {
-    return result.length > 0;
+  const shouldContinue = useCallback(() => {
+    return true;
   }, []);
   const { firstCallLoading, error } = usePolling({
     fetchFn,
@@ -6358,8 +6411,8 @@ function WorkflowLoopResultNode({ data }) {
 
 function WorkflowGraphInner({ workflow }) {
   const { nodes: initialNodes, edges: initialEdges } = contructNodesAndEdges({
-    stepGraph: workflow.serializedStepGraph,
-    stepSubscriberGraph: workflow.serializedStepSubscriberGraph
+    stepGraph: workflow.serializedStepGraph || workflow.stepGraph,
+    stepSubscriberGraph: workflow.serializedStepSubscriberGraph || workflow.stepSubscriberGraph
   });
   const [nodes, _, onNodesChange] = useNodesState(initialNodes);
   const [edges] = useEdgesState(initialEdges);
@@ -6369,7 +6422,6 @@ function WorkflowGraphInner({ workflow }) {
     "after-node": WorkflowAfterNode,
     "loop-result-node": WorkflowLoopResultNode
   };
-  console.log("nodes===>", nodes);
   return /* @__PURE__ */ jsx("div", { className: "w-full h-full", children: /* @__PURE__ */ jsxs(
     ReactFlow,
     {
@@ -7601,7 +7653,8 @@ function resolveSchemaComponent({
         formValues,
         errors,
         handleFieldChange,
-        isNullable: true
+        isNullable: true,
+        isOptional
       });
     }
     return /* @__PURE__ */ jsx(
@@ -7654,7 +7707,8 @@ function resolveSchemaComponent({
     values: formValues,
     errors,
     renderFieldMap: getDefaultFieldMap(),
-    onFieldChange: handleFieldChange
+    onFieldChange: handleFieldChange,
+    isOptional
   }) }, parentField);
 }
 
@@ -7808,10 +7862,10 @@ function WorkflowTrigger({
     }
   }, [watchResult]);
   if (isLoading) {
-    return /* @__PURE__ */ jsx(ScrollArea, { className: "h-[calc(100vh-126px)] pt-2 px-4 pb-4 text-xs", children: /* @__PURE__ */ jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[100px_1fr] gap-2", children: [
-      /* @__PURE__ */ jsx(Skeleton, { className: "h-3" }),
-      /* @__PURE__ */ jsx(Skeleton, { className: "h-3" })
-    ] }) }) });
+    return /* @__PURE__ */ jsx(ScrollArea, { className: "h-[calc(100vh-126px)] pt-2 px-4 pb-4 text-xs", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-10" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-10" })
+    ] }) });
   }
   if (!workflow) return null;
   if (!triggerSchema) {