@mastra/playground-ui 5.1.2-alpha.5 → 5.1.2

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: [
@@ -9743,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,
@@ -10190,6 +10294,7 @@ exports.WorkflowGraph = WorkflowGraph;
 exports.WorkflowIcon = WorkflowIcon;
 exports.WorkflowRunContext = WorkflowRunContext;
 exports.WorkflowRunProvider = WorkflowRunProvider;
+exports.WorkflowRuns = WorkflowRuns;
 exports.WorkflowTraces = WorkflowTraces;
 exports.WorkflowTrigger = WorkflowTrigger;
 exports.useCurrentRun = useCurrentRun;