@mastra/playground-ui 5.1.2-alpha.4 → 5.1.2-alpha.6

package/dist/index.es.js

@@ -2,8 +2,8 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default, { createContext, useContext, forwardRef, useState, useEffect, memo, useMemo, useRef, useCallback, Suspense, Fragment as Fragment$1 } from 'react';
 import { MastraClient } from '@mastra/client-js';
-import { useMessage, MessagePrimitive, ActionBarPrimitive, useComposerRuntime, ComposerPrimitive, useAttachment, AttachmentPrimitive, ThreadPrimitive, useExternalStoreRuntime, CompositeAttachmentAdapter, SimpleImageAttachmentAdapter, AssistantRuntimeProvider } from '@assistant-ui/react';
-import { CheckIcon as CheckIcon$1, CopyIcon, ChevronUpIcon, X, FileIcon, CircleXIcon, Mic, PlusIcon, ArrowUp, Copy, Search, RefreshCcwIcon, ChevronRight, SortAsc, SortDesc, Check, ChevronUp, ChevronDown, LoaderCircle, ChevronDownIcon, ExternalLinkIcon, Network, PauseIcon, Loader2, CircleDashed, Footprints, CircleCheck, CircleX, Workflow, AlertCircleIcon, AlertCircle, CalendarIcon, Braces, Brackets, TrashIcon, Plus, Minus, Maximize, CirclePause } from 'lucide-react';
+import { useMessage, MessagePrimitive, ActionBarPrimitive, useComposerRuntime, ComposerPrimitive, useAttachment, AttachmentPrimitive, ThreadPrimitive, useExternalStoreRuntime, CompositeAttachmentAdapter, SimpleImageAttachmentAdapter, SimpleTextAttachmentAdapter, AssistantRuntimeProvider } from '@assistant-ui/react';
+import { CheckIcon as CheckIcon$1, CopyIcon, ChevronUpIcon, X, FileText, FileIcon, CircleXIcon, Mic, PlusIcon, ArrowUp, Copy, Search, RefreshCcwIcon, ChevronRight, SortAsc, SortDesc, Check, ChevronUp, ChevronDown, LoaderCircle, ChevronDownIcon, ExternalLinkIcon, Network, PauseIcon, Loader2, CircleDashed, Footprints, CircleCheck, CircleX, Workflow, AlertCircleIcon, AlertCircle, CalendarIcon, Braces, Brackets, TrashIcon, Plus, Minus, Maximize, CirclePause } from 'lucide-react';
 import { Slot } from '@radix-ui/react-slot';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { TooltipProvider as TooltipProvider$1 } from '@radix-ui/react-tooltip';
@@ -22,7 +22,7 @@ import { useShallow } from 'zustand/shallow';
 import { RuntimeContext } from '@mastra/core/di';
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
-import { format, formatDistanceToNow, isValid } from 'date-fns';
+import { format, formatDistanceToNow, isValid, formatDate } from 'date-fns';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import { toast } from 'sonner';
 import { AnimatePresence } from 'motion/react';
@@ -4202,11 +4202,12 @@ const AttachmentPreviewDialog = ({ children }) => {
 };
 const AttachmentThumbnail = () => {
   const isImage = useAttachment((a) => a.type === "image");
+  const document = useAttachment((a) => a.type === "document" ? a : void 0);
   const src = useAttachmentSrc();
   const canRemove = useAttachment((a) => a.source !== "message");
   return /* @__PURE__ */ jsx(TooltipProvider$1, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
     /* @__PURE__ */ jsxs(AttachmentPrimitive.Root, { className: "relative", children: [
-      /* @__PURE__ */ jsx(AttachmentPreviewDialog, { children: /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: "h-full w-full aspect-ratio overflow-hidden rounded-lg", children: isImage ? /* @__PURE__ */ jsx("div", { className: "rounded-lg border-sm border-border1 overflow-hidden", children: /* @__PURE__ */ jsx("img", { src, className: "object-cover aspect-ratio size-16", alt: "Preview", height: 64, width: 64 }) }) : /* @__PURE__ */ jsx("div", { className: "rounded-lg border-sm border-border1 flex items-center justify-center", children: /* @__PURE__ */ jsx(FileIcon, { className: "text-icon3" }) }) }) }) }),
+      /* @__PURE__ */ jsx(AttachmentPreviewDialog, { children: /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: "h-full w-full aspect-ratio overflow-hidden rounded-lg", children: isImage ? /* @__PURE__ */ jsx("div", { className: "rounded-lg border-sm border-border1 overflow-hidden", children: /* @__PURE__ */ jsx("img", { src, className: "object-cover aspect-ratio size-16", alt: "Preview", height: 64, width: 64 }) }) : document?.contentType === "application/pdf" ? /* @__PURE__ */ jsx("div", { className: "rounded-lg border-sm border-border1 flex items-center justify-center", children: /* @__PURE__ */ jsx(FileText, { className: "text-accent2" }) }) : /* @__PURE__ */ jsx("div", { className: "rounded-lg border-sm border-border1 flex items-center justify-center", children: /* @__PURE__ */ jsx(FileIcon, { className: "text-icon3" }) }) }) }) }),
       canRemove && /* @__PURE__ */ jsx(AttachmentRemove, {})
     ] }),
     /* @__PURE__ */ jsx(TooltipContent, { side: "top", children: /* @__PURE__ */ jsx(AttachmentPrimitive.Name, {}) })
@@ -4228,9 +4229,10 @@ const UserMessageAttachments = () => {
 };
 const InMessageAttachment = () => {
   const isImage = useAttachment((a) => a.type === "image");
+  const document = useAttachment((a) => a.type === "document" ? a : void 0);
   const src = useAttachmentSrc();
   return /* @__PURE__ */ jsx(TooltipProvider$1, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
-    /* @__PURE__ */ jsx(AttachmentPrimitive.Root, { className: "relative pt-4", children: /* @__PURE__ */ jsx(AttachmentPreviewDialog, { children: /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: "h-full w-full aspect-ratio overflow-hidden rounded-lg", children: isImage ? /* @__PURE__ */ jsx("div", { className: "rounded-lg border-sm border-border1 overflow-hidden", children: /* @__PURE__ */ jsx("img", { src, className: "object-cover aspect-ratio max-h-[140px] max-w-[320px]", alt: "Preview" }) }) : /* @__PURE__ */ jsx("div", { className: "rounded-lg border-sm border-border1 flex items-center justify-center", children: /* @__PURE__ */ jsx(FileIcon, { className: "text-icon3" }) }) }) }) }) }),
+    /* @__PURE__ */ jsx(AttachmentPrimitive.Root, { className: "relative pt-4", children: /* @__PURE__ */ jsx(AttachmentPreviewDialog, { children: /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: "h-full w-full aspect-ratio overflow-hidden rounded-lg", children: isImage ? /* @__PURE__ */ jsx("div", { className: "rounded-lg border-sm border-border1 overflow-hidden", children: /* @__PURE__ */ jsx("img", { src, className: "object-cover aspect-ratio max-h-[140px] max-w-[320px]", alt: "Preview" }) }) : document?.contentType === "application/pdf" ? /* @__PURE__ */ jsx("div", { className: "rounded-lg border-sm border-border1 flex items-center justify-center p-4", children: /* @__PURE__ */ jsx(FileText, { className: "text-accent2" }) }) : /* @__PURE__ */ jsx("div", { className: "rounded-lg border-sm border-border1 flex items-center justify-center p-4", children: /* @__PURE__ */ jsx(FileIcon, { className: "text-icon3" }) }) }) }) }) }),
     /* @__PURE__ */ jsx(TooltipContent, { side: "top", children: /* @__PURE__ */ jsx(AttachmentPrimitive.Name, {}) })
   ] }) });
 };
@@ -4496,20 +4498,96 @@ const fileToBase64 = async (file) => {
   });
 };
 
+class PDFAttachmentAdapter {
+  accept = "application/pdf";
+  async add({ file }) {
+    const maxSize = 20 * 1024 * 1024;
+    if (file.size > maxSize) {
+      throw new Error("PDF size exceeds 20MB limit");
+    }
+    return {
+      id: crypto.randomUUID(),
+      type: "document",
+      name: file.name,
+      file,
+      status: {
+        type: "running",
+        reason: "uploading",
+        progress: 0
+      },
+      contentType: "application/pdf"
+    };
+  }
+  async send(attachment) {
+    const base64Data = await this.fileToBase64(attachment.file);
+    return {
+      id: attachment.id,
+      type: "document",
+      name: attachment.name,
+      content: [
+        {
+          type: "text",
+          text: base64Data
+        }
+      ],
+      status: { type: "complete" },
+      contentType: "application/pdf"
+    };
+  }
+  async remove(attachment) {
+  }
+  async fileToBase64(file) {
+    const arrayBuffer = await file.arrayBuffer();
+    const bytes = new Uint8Array(arrayBuffer);
+    let binary = "";
+    bytes.forEach((byte) => {
+      binary += String.fromCharCode(byte);
+    });
+    return btoa(binary);
+  }
+  // Optional: Extract text from PDF using a library like pdf.js
+  async extractTextFromPDF(file) {
+    return "Extracted PDF text content";
+  }
+}
+
 const convertMessage$1 = (message) => {
   return message;
 };
 const convertToAIAttachments = async (attachments) => {
-  const promises = attachments.filter((attachment) => attachment.file).map(async (attachment) => ({
-    role: "user",
-    content: [
-      {
-        type: "image",
-        image: await fileToBase64(attachment.file),
-        mimeType: attachment.file.type
+  const promises = attachments.filter((attachment) => attachment.type === "image" || attachment.type === "document").map(async (attachment) => {
+    if (attachment.type === "document") {
+      if (attachment.contentType === "application/pdf") {
+        return {
+          role: "user",
+          content: [
+            {
+              type: "file",
+              // @ts-expect-error - TODO: fix this type issue somehow
+              data: attachment.content?.[0]?.text || "",
+              mimeType: attachment.contentType,
+              filename: attachment.name
+            }
+          ]
+        };
       }
-    ]
-  }));
+      return {
+        role: "user",
+        // @ts-expect-error - TODO: fix this type issue somehow
+        content: attachment.content[0]?.text || ""
+      };
+    }
+    return {
+      role: "user",
+      content: [
+        {
+          type: "image",
+          image: await fileToBase64(attachment.file),
+          mimeType: attachment.file.type
+        }
+      ]
+    };
+  });
   return Promise.all(promises);
 };
 function MastraRuntimeProvider({
@@ -4811,7 +4889,11 @@ function MastraRuntimeProvider({
     convertMessage: convertMessage$1,
     onNew,
     adapters: {
-      attachments: new CompositeAttachmentAdapter([new SimpleImageAttachmentAdapter()])
+      attachments: new CompositeAttachmentAdapter([
+        new SimpleImageAttachmentAdapter(),
+        new SimpleTextAttachmentAdapter(),
+        new PDFAttachmentAdapter()
+      ])
     }
   });
   return /* @__PURE__ */ jsxs(AssistantRuntimeProvider, { runtime, children: [
@@ -6025,42 +6107,6 @@ function transformKey(key) {
   const newKey = key.split(".").join(" ").split("_").join(" ").replaceAll("ai", "AI");
   return newKey.substring(0, 1).toUpperCase() + newKey.substring(1);
 }
-const refineTraces = (traces, isWorkflow = false) => {
-  const listOfSpanIds = /* @__PURE__ */ new Set();
-  const newName = (name) => {
-    if (name?.startsWith("workflow.") && isWorkflow) {
-      return name?.split(".")?.slice(2)?.join(".");
-    }
-    if (name?.startsWith("agent.") && !isWorkflow) {
-      return name?.split(".")?.slice(1)?.join(".");
-    }
-    return name;
-  };
-  const groupedTraces = traces?.reduce((acc, curr) => {
-    const newCurr = { ...curr, name: newName(curr.name), duration: curr.endTime - curr.startTime };
-    listOfSpanIds.add(curr.id);
-    return { ...acc, [curr.traceId]: [...acc[curr.traceId] || [], newCurr] };
-  }, {});
-  const tracesData = Object.entries(groupedTraces).map(([key, value]) => {
-    const parentSpan = value.find((span) => !span.parentSpanId || !listOfSpanIds.has(span.parentSpanId));
-    const enrichedSpans = value.map((span) => ({
-      ...span,
-      parentSpanId: parentSpan?.id === span.id ? null : span?.parentSpanId
-    }));
-    const failedStatus = value.find((span) => span.status.code !== 0)?.status;
-    const runId = value?.[0]?.attributes?.runId;
-    return {
-      traceId: key,
-      serviceName: parentSpan?.name || key,
-      duration: parentSpan?.duration || value.reduce((acc, curr) => acc + curr.duration, 0),
-      status: failedStatus || parentSpan?.status || value[0].status,
-      started: value[0].startTime,
-      trace: enrichedSpans,
-      runId: runId ? String(runId) : void 0
-    };
-  });
-  return tracesData;
-};
 
 function SpanDetail() {
   const { span, setSpan, trace, setIsOpen } = useContext(TraceContext);
@@ -9747,6 +9793,28 @@ function WorkflowTrigger({ workflowId, setRunId }) {
   ] }) });
 }
 
+const WorkflowRuns = ({ workflowId, runId, isLoading, runs, onPressRun }) => {
+  if (isLoading) {
+    return /* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-[600px]" }) });
+  }
+  if (runs.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsx(Txt, { variant: "ui-md", className: "text-icon6 text-center", children: "No previous run" }) });
+  }
+  return /* @__PURE__ */ jsx("ol", { className: "pb-10", children: runs.map((run) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+    "button",
+    {
+      onClick: () => onPressRun({ workflowId, runId: run.runId }),
+      className: clsx("px-3 py-2 border-b-sm border-border1 block w-full hover:bg-surface4 text-left", {
+        "bg-surface4": run.runId === runId
+      }),
+      children: [
+        /* @__PURE__ */ jsx(Txt, { variant: "ui-lg", className: "font-medium text-icon6 truncate", as: "p", children: run.runId }),
+        /* @__PURE__ */ jsx(Txt, { variant: "ui-sm", className: "font-medium text-icon3 truncate", as: "p", children: typeof run?.snapshot === "string" ? "" : run?.snapshot?.timestamp ? formatDate(run?.snapshot?.timestamp, "MMM d, yyyy h:mm a") : "" })
+      ]
+    }
+  ) }, run.runId)) });
+};
+
 const DataTable = ({
   columns,
   data,
@@ -9794,7 +9862,7 @@ const DataTable = ({
   const rows = table.getRowModel().rows;
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsxs(Table, { children: [
-      /* @__PURE__ */ jsx(Thead, { className: "sticky top-0", children: ths.headers.map((header) => {
+      /* @__PURE__ */ jsx(Thead, { className: "sticky top-0 bg-surface2", children: ths.headers.map((header) => {
         const size = header.column.getSize();
         const meta = header.column.columnDef.meta;
         return /* @__PURE__ */ jsx(Th, { style: { width: meta?.width || size || "auto" }, children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()) }, header.id);
@@ -10102,47 +10170,5 @@ function usePolling({
   };
 }
 
-const useTraces = (componentName, isWorkflow = false) => {
-  const [traces, setTraces] = useState([]);
-  const client = useMemo(() => useMastraClient(), []);
-  const fetchFn = useCallback(async () => {
-    try {
-      const res = await client.getTelemetry({
-        attribute: {
-          componentName
-        }
-      });
-      if (!res.traces) {
-        throw new Error("Error fetching traces");
-      }
-      const refinedTraces = refineTraces(res?.traces || [], isWorkflow);
-      return refinedTraces;
-    } catch (error2) {
-      throw error2;
-    }
-  }, [client, componentName, isWorkflow]);
-  const onSuccess = useCallback((newTraces) => {
-    if (newTraces.length > 0) {
-      setTraces(() => newTraces);
-    }
-  }, []);
-  const onError = useCallback((error2) => {
-    console.log(`error, onError`, error2);
-    toast.error(error2.message);
-  }, []);
-  const shouldContinue = useCallback(() => {
-    return true;
-  }, []);
-  const { firstCallLoading, error } = usePolling({
-    fetchFn,
-    interval: 3e3,
-    onSuccess,
-    onError,
-    shouldContinue,
-    enabled: true
-  });
-  return { traces, firstCallLoading, error };
-};
-
-export { AgentChat, AgentCoinIcon, AgentContext, AgentEvals, AgentIcon, AgentNetworkCoinIcon, AgentProvider, AgentTraces, AiIcon, ApiIcon, Badge$1 as Badge, BranchIcon, Breadcrumb, Button, Cell, CheckIcon, ChevronIcon, CommitIcon, CrossIcon, Crumb, DarkLogo, DataTable, DateTimeCell, DbIcon, DebugIcon, DeploymentIcon, DividerIcon, DocsIcon, DynamicForm, EmptyState, Entity, EntityContent, EntityDescription, EntityIcon, EntityName, EntryCell, EnvIcon, EvaluatorCoinIcon, FiltersIcon, FolderIcon, GithubCoinIcon, GithubIcon, GoogleIcon, Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, Icon, InfoIcon, JudgeIcon, LatencyIcon, LegacyWorkflowGraph, LegacyWorkflowTrigger, LogsIcon, MastraClientProvider, MastraResizablePanel, McpCoinIcon, McpServerIcon, MemoryIcon, NetworkChat, NetworkContext, NetworkProvider, OpenAIIcon, PromptIcon, RepoIcon, Row, ScoreIcon, SettingsIcon, SlashIcon, Table, Tbody, Th, Thead, ThreadDeleteButton, ThreadItem, ThreadLink, ThreadList, Threads, ToolCoinIcon, ToolsIcon, TraceIcon, TsIcon, Txt, TxtCell, UnitCell, VariablesIcon, WorkflowCoinIcon, WorkflowGraph, WorkflowIcon, WorkflowRunContext, WorkflowRunProvider, WorkflowTraces, WorkflowTrigger, refineTraces, useCurrentRun, useMastraClient, usePlaygroundStore, usePolling, useSpeechRecognition, useTraces };
+export { AgentChat, AgentCoinIcon, AgentContext, AgentEvals, AgentIcon, AgentNetworkCoinIcon, AgentProvider, AgentTraces, AiIcon, ApiIcon, Badge$1 as Badge, BranchIcon, Breadcrumb, Button, Cell, CheckIcon, ChevronIcon, CommitIcon, CrossIcon, Crumb, DarkLogo, DataTable, DateTimeCell, DbIcon, DebugIcon, DeploymentIcon, DividerIcon, DocsIcon, DynamicForm, EmptyState, Entity, EntityContent, EntityDescription, EntityIcon, EntityName, EntryCell, EnvIcon, EvaluatorCoinIcon, FiltersIcon, FolderIcon, GithubCoinIcon, GithubIcon, GoogleIcon, Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, Icon, InfoIcon, JudgeIcon, LatencyIcon, LegacyWorkflowGraph, LegacyWorkflowTrigger, LogsIcon, MastraClientProvider, MastraResizablePanel, McpCoinIcon, McpServerIcon, MemoryIcon, NetworkChat, NetworkContext, NetworkProvider, OpenAIIcon, PromptIcon, RepoIcon, Row, ScoreIcon, SettingsIcon, SlashIcon, Table, Tbody, Th, Thead, ThreadDeleteButton, ThreadItem, ThreadLink, ThreadList, Threads, ToolCoinIcon, ToolsIcon, TraceIcon, TsIcon, Txt, TxtCell, UnitCell, VariablesIcon, WorkflowCoinIcon, WorkflowGraph, WorkflowIcon, WorkflowRunContext, WorkflowRunProvider, WorkflowRuns, WorkflowTraces, WorkflowTrigger, useCurrentRun, useMastraClient, usePlaygroundStore, usePolling, useSpeechRecognition };
 //# sourceMappingURL=index.es.js.map