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

package/dist/index.cjs.js

@@ -4234,11 +4234,12 @@ const AttachmentPreviewDialog = ({ children }) => {
 };
 const AttachmentThumbnail = () => {
   const isImage = react.useAttachment((a) => a.type === "image");
+  const document = react.useAttachment((a) => a.type === "document" ? a : void 0);
   const src = useAttachmentSrc();
   const canRemove = react.useAttachment((a) => a.source !== "message");
   return /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive.TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(react.AttachmentPrimitive.Root, { className: "relative", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(AttachmentPreviewDialog, { children: /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full aspect-ratio overflow-hidden rounded-lg", children: isImage ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border-sm border-border1 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("img", { src, className: "object-cover aspect-ratio size-16", alt: "Preview", height: 64, width: 64 }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border-sm border-border1 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileIcon, { className: "text-icon3" }) }) }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(AttachmentPreviewDialog, { children: /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full aspect-ratio overflow-hidden rounded-lg", children: isImage ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border-sm border-border1 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("img", { src, className: "object-cover aspect-ratio size-16", alt: "Preview", height: 64, width: 64 }) }) : document?.contentType === "application/pdf" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border-sm border-border1 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileText, { className: "text-accent2" }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border-sm border-border1 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileIcon, { className: "text-icon3" }) }) }) }) }),
       canRemove && /* @__PURE__ */ jsxRuntime.jsx(AttachmentRemove, {})
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "top", children: /* @__PURE__ */ jsxRuntime.jsx(react.AttachmentPrimitive.Name, {}) })
@@ -4260,9 +4261,10 @@ const UserMessageAttachments = () => {
 };
 const InMessageAttachment = () => {
   const isImage = react.useAttachment((a) => a.type === "image");
+  const document = react.useAttachment((a) => a.type === "document" ? a : void 0);
   const src = useAttachmentSrc();
   return /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive.TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(react.AttachmentPrimitive.Root, { className: "relative pt-4", children: /* @__PURE__ */ jsxRuntime.jsx(AttachmentPreviewDialog, { children: /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full aspect-ratio overflow-hidden rounded-lg", children: isImage ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border-sm border-border1 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("img", { src, className: "object-cover aspect-ratio max-h-[140px] max-w-[320px]", alt: "Preview" }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border-sm border-border1 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileIcon, { className: "text-icon3" }) }) }) }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(react.AttachmentPrimitive.Root, { className: "relative pt-4", children: /* @__PURE__ */ jsxRuntime.jsx(AttachmentPreviewDialog, { children: /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full aspect-ratio overflow-hidden rounded-lg", children: isImage ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border-sm border-border1 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("img", { src, className: "object-cover aspect-ratio max-h-[140px] max-w-[320px]", alt: "Preview" }) }) : document?.contentType === "application/pdf" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border-sm border-border1 flex items-center justify-center p-4", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileText, { className: "text-accent2" }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border-sm border-border1 flex items-center justify-center p-4", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileIcon, { className: "text-icon3" }) }) }) }) }) }),
     /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "top", children: /* @__PURE__ */ jsxRuntime.jsx(react.AttachmentPrimitive.Name, {}) })
   ] }) });
 };
@@ -4528,20 +4530,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({
@@ -4843,7 +4921,11 @@ function MastraRuntimeProvider({
     convertMessage: convertMessage$1,
     onNew,
     adapters: {
-      attachments: new react.CompositeAttachmentAdapter([new react.SimpleImageAttachmentAdapter()])
+      attachments: new react.CompositeAttachmentAdapter([
+        new react.SimpleImageAttachmentAdapter(),
+        new react.SimpleTextAttachmentAdapter(),
+        new PDFAttachmentAdapter()
+      ])
     }
   });
   return /* @__PURE__ */ jsxRuntime.jsxs(react.AssistantRuntimeProvider, { runtime, children: [
@@ -6057,42 +6139,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 } = React.useContext(TraceContext);
@@ -9779,6 +9825,28 @@ function WorkflowTrigger({ workflowId, setRunId }) {
   ] }) });
 }
 
+const WorkflowRuns = ({ workflowId, runId, isLoading, runs, onPressRun }) => {
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-[600px]" }) });
+  }
+  if (runs.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-md", className: "text-icon6 text-center", children: "No previous run" }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "pb-10", children: runs.map((run) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Txt, { variant: "ui-lg", className: "font-medium text-icon6 truncate", as: "p", children: run.runId }),
+        /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-sm", className: "font-medium text-icon3 truncate", as: "p", children: typeof run?.snapshot === "string" ? "" : run?.snapshot?.timestamp ? dateFns.formatDate(run?.snapshot?.timestamp, "MMM d, yyyy h:mm a") : "" })
+      ]
+    }
+  ) }, run.runId)) });
+};
+
 const DataTable = ({
   columns,
   data,
@@ -9826,7 +9894,7 @@ const DataTable = ({
   const rows = table.getRowModel().rows;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(Table, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Thead, { className: "sticky top-0", children: ths.headers.map((header) => {
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Th, { style: { width: meta?.width || size || "auto" }, children: header.isPlaceholder ? null : reactTable.flexRender(header.column.columnDef.header, header.getContext()) }, header.id);
@@ -10134,48 +10202,6 @@ function usePolling({
   };
 }
 
-const useTraces = (componentName, isWorkflow = false) => {
-  const [traces, setTraces] = React.useState([]);
-  const client = React.useMemo(() => useMastraClient(), []);
-  const fetchFn = React.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 = React.useCallback((newTraces) => {
-    if (newTraces.length > 0) {
-      setTraces(() => newTraces);
-    }
-  }, []);
-  const onError = React.useCallback((error2) => {
-    console.log(`error, onError`, error2);
-    sonner.toast.error(error2.message);
-  }, []);
-  const shouldContinue = React.useCallback(() => {
-    return true;
-  }, []);
-  const { firstCallLoading, error } = usePolling({
-    fetchFn,
-    interval: 3e3,
-    onSuccess,
-    onError,
-    shouldContinue,
-    enabled: true
-  });
-  return { traces, firstCallLoading, error };
-};
-
 exports.AgentChat = AgentChat;
 exports.AgentCoinIcon = AgentCoinIcon;
 exports.AgentContext = AgentContext;
@@ -10268,13 +10294,12 @@ exports.WorkflowGraph = WorkflowGraph;
 exports.WorkflowIcon = WorkflowIcon;
 exports.WorkflowRunContext = WorkflowRunContext;
 exports.WorkflowRunProvider = WorkflowRunProvider;
+exports.WorkflowRuns = WorkflowRuns;
 exports.WorkflowTraces = WorkflowTraces;
 exports.WorkflowTrigger = WorkflowTrigger;
-exports.refineTraces = refineTraces;
 exports.useCurrentRun = useCurrentRun;
 exports.useMastraClient = useMastraClient;
 exports.usePlaygroundStore = usePlaygroundStore;
 exports.usePolling = usePolling;
 exports.useSpeechRecognition = useSpeechRecognition;
-exports.useTraces = useTraces;
 //# sourceMappingURL=index.cjs.js.map