@mastra/playground-ui 5.1.11-alpha.1 → 5.1.11-alpha.3

package/dist/index.es.js

@@ -1,9 +1,9 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { createContext, useContext, forwardRef, useState, useEffect, memo, useRef, useCallback, useMemo, Suspense, Fragment as Fragment$1 } from 'react';
+import React__default, { createContext, useContext, forwardRef, memo, useState, useEffect, useRef, useCallback, useMemo, 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, SimpleTextAttachmentAdapter, AssistantRuntimeProvider } from '@assistant-ui/react';
-import { CheckIcon as CheckIcon$1, CopyIcon, Check, Copy, ChevronUpIcon, X, FileText, FileIcon, CircleXIcon, Mic, PlusIcon, ArrowUp, Search, RefreshCcwIcon, ChevronRight, SortAsc, SortDesc, ChevronUp, ChevronDown, Circle, RefreshCw, LoaderCircle, ChevronDownIcon, ExternalLinkIcon, Braces, Loader2, Network, PauseIcon, HourglassIcon, CircleDashed, Footprints, CircleCheck, CircleX, Minus, Plus, Maximize, Workflow, AlertCircleIcon, AlertCircle, CalendarIcon, Brackets, TrashIcon, CirclePause } from 'lucide-react';
+import { useMessage, MessagePrimitive, ActionBarPrimitive, useAttachment, AttachmentPrimitive, useComposerRuntime, ComposerPrimitive, ThreadPrimitive, useExternalStoreRuntime, CompositeAttachmentAdapter, SimpleImageAttachmentAdapter, SimpleTextAttachmentAdapter, AssistantRuntimeProvider } from '@assistant-ui/react';
+import { CheckIcon as CheckIcon$1, CopyIcon, Check, Copy, ChevronUpIcon, X, FileText, CircleXIcon, Mic, PlusIcon, ArrowUp, Search, RefreshCcwIcon, ChevronRight, SortAsc, SortDesc, ChevronUp, ChevronDown, Circle, RefreshCw, LoaderCircle, ChevronDownIcon, ExternalLinkIcon, Braces, Loader2, Network, PauseIcon, HourglassIcon, CircleDashed, Footprints, CircleCheck, CircleX, Minus, Plus, Maximize, Workflow, AlertCircleIcon, AlertCircle, CalendarIcon, Brackets, TrashIcon, CirclePause, StopCircle } 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';
@@ -18,8 +18,8 @@ import { tags } from '@lezer/highlight';
 import { draculaInit } from '@uiw/codemirror-theme-dracula';
 import CodeMirror from '@uiw/react-codemirror';
 import { toast } from 'sonner';
-import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { useShallow } from 'zustand/shallow';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { RuntimeContext } from '@mastra/core/di';
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
@@ -3166,47 +3166,7 @@ const AvatarFallback = React.forwardRef(({ className, ...props }, ref) => /* @__
 ));
 AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 
-const ImageWithFallback = ({ alt, src, ...rest }) => {
-  const [error, setError] = useState(false);
-  useEffect(() => {
-    setError(false);
-  }, [src]);
-  return error || !src ? /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx(
-      "svg",
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        fill: "none",
-        viewBox: "0 0 24 24",
-        strokeWidth: "1.5",
-        stroke: "currentColor",
-        width: "150",
-        height: "150",
-        children: /* @__PURE__ */ jsx(
-          "path",
-          {
-            strokeLinecap: "round",
-            strokeLinejoin: "round",
-            d: "m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsx("p", { className: "text-xs italic text-muted-foreground -mt-[0.625rem] mb-[0.625rem]", children: "Image link is broken" })
-  ] }) : /* @__PURE__ */ jsx(
-    "img",
-    {
-      src,
-      alt,
-      ...rest,
-      onError: () => {
-        setError(true);
-      }
-    }
-  );
-};
-
-const SyntaxHighlighter$2 = makePrismAsyncSyntaxHighlighter({
+const SyntaxHighlighter$3 = makePrismAsyncSyntaxHighlighter({
   style: coldarkDark,
   customStyle: {
     margin: 0,
@@ -3278,6 +3238,45 @@ const useCopyToClipboard$1 = ({
   };
   return { isCopied, copyToClipboard };
 };
+const ImageWithFallback = ({ alt, src, ...rest }) => {
+  const [error, setError] = useState(false);
+  useEffect(() => {
+    setError(false);
+  }, [src]);
+  return error || !src ? /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "none",
+        viewBox: "0 0 24 24",
+        strokeWidth: "1.5",
+        stroke: "currentColor",
+        width: "150",
+        height: "150",
+        children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            d: "m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx("p", { className: "text-xs italic text-muted-foreground -mt-[0.625rem] mb-[0.625rem]", children: "Image link is broken" })
+  ] }) : /* @__PURE__ */ jsx(
+    "img",
+    {
+      src,
+      alt,
+      ...rest,
+      onError: () => {
+        setError(true);
+      }
+    }
+  );
+};
 const defaultComponents = unstable_memoizeMarkdownComponents({
   h1: ({ className, ...props }) => /* @__PURE__ */ jsx(
     "h1",
@@ -3425,7 +3424,7 @@ const defaultComponents = unstable_memoizeMarkdownComponents({
     );
   },
   CodeHeader,
-  SyntaxHighlighter: SyntaxHighlighter$2,
+  SyntaxHighlighter: SyntaxHighlighter$3,
   img: ImageWithFallback
 });
 
@@ -4304,7 +4303,7 @@ const useCodemirrorTheme$1 = () => {
     []
   );
 };
-const SyntaxHighlighter$1 = ({ data, className }) => {
+const SyntaxHighlighter$2 = ({ data, className }) => {
   const formattedCode = JSON.stringify(data, null, 2);
   const theme = useCodemirrorTheme$1();
   return /* @__PURE__ */ jsxs("div", { className: clsx("rounded-md bg-surface4 p-1 font-mono relative", className), children: [
@@ -4331,7 +4330,7 @@ const ToolFallback$1 = ({ toolName, argsText, result }) => {
   let argSlot;
   try {
     const parsedArgs = JSON.parse(argsText);
-    argSlot = /* @__PURE__ */ jsx(SyntaxHighlighter$1, { data: parsedArgs });
+    argSlot = /* @__PURE__ */ jsx(SyntaxHighlighter$2, { data: parsedArgs });
   } catch {
     argSlot = /* @__PURE__ */ jsx("pre", { className: "whitespace-pre-wrap", children: argsText });
   }
@@ -4347,15 +4346,13 @@ const ToolFallback$1 = ({ toolName, argsText, result }) => {
       ] }),
       result !== void 0 && /* @__PURE__ */ jsxs("div", { className: "px-4 py-2", children: [
         /* @__PURE__ */ jsx("p", { className: "font-medium pb-2", children: "Tool result" }),
-        typeof result === "string" ? /* @__PURE__ */ jsx("pre", { className: "whitespace-pre-wrap", children: result }) : /* @__PURE__ */ jsx(SyntaxHighlighter$1, { data: result })
+        typeof result === "string" ? /* @__PURE__ */ jsx("pre", { className: "whitespace-pre-wrap", children: result }) : /* @__PURE__ */ jsx(SyntaxHighlighter$2, { data: result })
       ] })
     ] }) })
   ] });
 };
 
-const AssistantMessage = ({
-  ToolFallback: ToolFallbackCustom
-}) => {
+const AssistantMessage = ({ ToolFallback: ToolFallbackCustom }) => {
   const data = useMessage();
   const isSolelyToolCall = data.content.length === 1 && data.content[0].type === "tool-call";
   return /* @__PURE__ */ jsxs(MessagePrimitive.Root, { className: "max-w-full", children: [
@@ -4387,8 +4384,36 @@ const AssistantActionBar$1 = () => {
   );
 };
 
+const useFileSrc = (file) => {
+  const [src, setSrc] = useState(void 0);
+  useEffect(() => {
+    if (!file) {
+      setSrc(void 0);
+      return;
+    }
+    const objectUrl = URL.createObjectURL(file);
+    setSrc(objectUrl);
+    return () => {
+      URL.revokeObjectURL(objectUrl);
+    };
+  }, [file]);
+  return src;
+};
+
+const useAttachmentSrc = () => {
+  const { file, src } = useAttachment(
+    useShallow((a) => {
+      if (a.type !== "image") return {};
+      if (a.file) return { file: a.file };
+      const src2 = a.content?.filter((c) => c.type === "image")[0]?.image;
+      if (!src2) return {};
+      return { src: src2 };
+    })
+  );
+  return useFileSrc(file) ?? src;
+};
+
 const Dialog = DialogPrimitive.Root;
-const DialogTrigger = DialogPrimitive.Trigger;
 const DialogPortal = DialogPrimitive.Portal;
 const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Overlay,
@@ -4436,107 +4461,137 @@ DialogTitle.displayName = DialogPrimitive.Title.displayName;
 const DialogDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Description, { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
-const useHasAttachments = () => {
-  const composer = useComposerRuntime();
-  const [hasAttachments, setHasAttachments] = useState(false);
-  useEffect(() => {
-    composer.subscribe(() => {
-      const attachments = composer.getState().attachments;
-      setHasAttachments(attachments.length > 0);
-    });
-  }, [composer]);
-  return hasAttachments;
+const PdfEntry = ({ data }) => {
+  const [open, setOpen] = useState(false);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("button", { onClick: () => setOpen(true), className: "h-full w-full flex items-center justify-center", type: "button", children: /* @__PURE__ */ jsx(FileText, { className: "text-accent2" }) }),
+    /* @__PURE__ */ jsx(PdfPreviewDialog, { data, open, onOpenChange: setOpen })
+  ] });
 };
-
-const useFileSrc = (file) => {
-  const [src, setSrc] = useState(void 0);
-  useEffect(() => {
-    if (!file) {
-      setSrc(void 0);
-      return;
-    }
-    const objectUrl = URL.createObjectURL(file);
-    setSrc(objectUrl);
-    return () => {
-      URL.revokeObjectURL(objectUrl);
-    };
-  }, [file]);
-  return src;
+const PdfPreviewDialog = ({ data, open, onOpenChange }) => {
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsx(DialogContent, { className: "max-w-4xl bg-surface2", children: /* @__PURE__ */ jsxs("div", { className: "h-full w-full", children: [
+    /* @__PURE__ */ jsx(DialogTitle, { className: "pb-4", children: "PDF preview" }),
+    open && /* @__PURE__ */ jsx("iframe", { src: data, width: "100%", height: "600px" })
+  ] }) }) });
 };
-const useAttachmentSrc = () => {
-  const { file, src } = useAttachment(
-    useShallow((a) => {
-      if (a.type !== "image") return {};
-      if (a.file) return { file: a.file };
-      const src2 = a.content?.filter((c) => c.type === "image")[0]?.image;
-      if (!src2) return {};
-      return { src: src2 };
-    })
-  );
-  return useFileSrc(file) ?? src;
+const ImageEntry = ({ src }) => {
+  const [open, setOpen] = useState(false);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("button", { onClick: () => setOpen(true), type: "button", className: "h-full w-full flex items-center justify-center", children: /* @__PURE__ */ jsx("img", { src, className: "object-cover aspect-ratio max-h-[140px] max-w-[320px]", alt: "Preview" }) }),
+    /* @__PURE__ */ jsx(ImagePreviewDialog, { src, open, onOpenChange: setOpen })
+  ] });
 };
-const AttachmentPreview = ({ src }) => {
-  return /* @__PURE__ */ jsx("div", { className: "overflow-hidden w-full", children: /* @__PURE__ */ jsx("img", { src, className: "object-contain aspect-ratio h-full w-full", alt: "Preview" }) });
+const ImagePreviewDialog = ({ src, open, onOpenChange }) => {
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsx(DialogContent, { className: "max-w-4xl bg-surface2", children: /* @__PURE__ */ jsxs("div", { className: "h-full w-full", children: [
+    /* @__PURE__ */ jsx(DialogTitle, { className: "pb-4", children: "Image preview" }),
+    open && /* @__PURE__ */ jsx("img", { src, alt: "Image" })
+  ] }) }) });
 };
-const AttachmentPreviewDialog = ({ children }) => {
-  const src = useAttachmentSrc();
-  if (!src) return children;
-  return /* @__PURE__ */ jsxs(Dialog, { children: [
-    /* @__PURE__ */ jsx(DialogTrigger, { className: "hover:bg-accent/50 cursor-pointer transition-colors", asChild: true, children }),
-    /* @__PURE__ */ jsxs(DialogPortal, { children: [
-      /* @__PURE__ */ jsx(DialogOverlay, {}),
-      /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-5xl w-full max-h-[80%]", children: [
-        /* @__PURE__ */ jsx(DialogTitle, { className: "aui-sr-only", children: "Image Attachment Preview" }),
-        /* @__PURE__ */ jsx(AttachmentPreview, { src })
-      ] })
-    ] })
+const TxtEntry = ({ data }) => {
+  const [open, setOpen] = useState(false);
+  const formattedContent = data.replace(/<attachment[^>]*>/, "").replace(/<\/attachment>/g, "");
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("button", { onClick: () => setOpen(true), className: "h-full w-full flex items-center justify-center", type: "button", children: /* @__PURE__ */ jsx(FileText, { className: "text-icon3" }) }),
+    /* @__PURE__ */ jsx(TxtPreviewDialog, { data: formattedContent, open, onOpenChange: setOpen })
   ] });
 };
-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 }) }) : 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, {}) })
-  ] }) });
+const TxtPreviewDialog = ({ data, open, onOpenChange }) => {
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsx(DialogContent, { className: "max-w-4xl bg-surface2 h-[80vh] overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "h-full w-full", children: [
+    /* @__PURE__ */ jsx(DialogTitle, { className: "pb-4", children: "Text preview" }),
+    open && /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap", children: data })
+  ] }) }) });
 };
-const AttachmentRemove = () => {
-  return /* @__PURE__ */ jsx(AttachmentPrimitive.Remove, { asChild: true, children: /* @__PURE__ */ jsx(
-    TooltipIconButton,
+
+const InMessageContextWrapper = () => {
+  return /* @__PURE__ */ jsx(AttachmentPrimitive.Root, { className: "pt-4", children: /* @__PURE__ */ jsx("div", { className: "max-w-[366px] px-5 py-3 text-icon6 text-ui-lg leading-ui-lg rounded-lg bg-surface3", children: /* @__PURE__ */ jsx(InMessageAttachmentWrapper, {}) }) });
+};
+const InMessageAttachmentWrapper = () => {
+  const src = useAttachmentSrc();
+  const attachment = useAttachment((a) => a);
+  if (attachment.type === "image") {
+    return /* @__PURE__ */ jsx(
+      InMessageAttachment,
+      {
+        type: "image",
+        contentType: void 0,
+        nameSlot: /* @__PURE__ */ jsx(AttachmentPrimitive.Name, {}),
+        src,
+        data: void 0
+      }
+    );
+  }
+  if (attachment.contentType === "application/pdf") {
+    const pdfText = attachment.content?.[0]?.text;
+    return /* @__PURE__ */ jsx(
+      InMessageAttachment,
+      {
+        type: "document",
+        contentType: attachment.contentType,
+        nameSlot: /* @__PURE__ */ jsx(AttachmentPrimitive.Name, {}),
+        src,
+        data: `data:application/pdf;base64,${pdfText}`
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    InMessageAttachment,
     {
-      tooltip: "Remove file",
-      className: "absolute -right-3 -top-3 hover:bg-transparent rounded-full bg-surface1 rounded-full p-1",
-      side: "top",
-      children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(CircleXIcon, {}) })
+      type: attachment.type,
+      contentType: attachment.contentType,
+      nameSlot: /* @__PURE__ */ jsx(AttachmentPrimitive.Name, {}),
+      src,
+      data: attachment.content?.[0]?.text
     }
-  ) });
-};
-const UserMessageAttachments = () => {
-  return /* @__PURE__ */ jsx(MessagePrimitive.Attachments, { components: { Attachment: InMessageAttachment } });
+  );
 };
-const InMessageAttachment = () => {
-  const isImage = useAttachment((a) => a.type === "image");
-  const document = useAttachment((a) => a.type === "document" ? a : void 0);
-  const src = useAttachmentSrc();
+const InMessageAttachment = ({ type, contentType, nameSlot, src, data }) => {
   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" }) }) : 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, {}) })
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: "h-full w-full overflow-hidden rounded-lg", children: type === "image" ? /* @__PURE__ */ jsx(ImageEntry, { src: src ?? "" }) : type === "document" && contentType === "application/pdf" ? /* @__PURE__ */ jsx(PdfEntry, { data: data ?? "" }) : /* @__PURE__ */ jsx(TxtEntry, { data: data ?? "" }) }) }),
+    /* @__PURE__ */ jsx(TooltipContent, { side: "top", children: nameSlot })
   ] }) });
 };
-const ComposerAttachments = () => {
-  const hasAttachments = useHasAttachments();
-  if (!hasAttachments) return null;
-  return /* @__PURE__ */ jsx("div", { className: "flex w-full flex-row items-center gap-4 h-24", children: /* @__PURE__ */ jsx(ComposerPrimitive.Attachments, { components: { Attachment: AttachmentThumbnail } }) });
+const UserMessageAttachments = () => {
+  return /* @__PURE__ */ jsx(MessagePrimitive.Attachments, { components: { Attachment: InMessageContextWrapper } });
 };
-
 const UserMessage = () => {
   return /* @__PURE__ */ jsxs(MessagePrimitive.Root, { className: "w-full flex items-end pb-4 flex-col", children: [
-    /* @__PURE__ */ jsx("div", { className: "max-w-[366px] px-5 py-3 text-icon6 text-ui-lg leading-ui-lg rounded-lg bg-surface3", children: /* @__PURE__ */ jsx(MessagePrimitive.Content, {}) }),
+    /* @__PURE__ */ jsx("div", { className: "max-w-[366px] px-5 py-3 text-icon6 text-ui-lg leading-ui-lg rounded-lg bg-surface3", children: /* @__PURE__ */ jsx(
+      MessagePrimitive.Content,
+      {
+        components: {
+          File: (p) => {
+            return /* @__PURE__ */ jsx(
+              InMessageAttachment,
+              {
+                type: "document",
+                contentType: p.mimeType,
+                nameSlot: "Unknown filename",
+                src: void 0,
+                data: p.image
+              }
+            );
+          },
+          Image: (p) => {
+            return /* @__PURE__ */ jsx(InMessageAttachment, { type: "image", nameSlot: "Unknown filename", src: p.image });
+          },
+          Text: (p) => {
+            if (p.text.includes("<attachment name=")) {
+              return /* @__PURE__ */ jsx(
+                InMessageAttachment,
+                {
+                  type: "document",
+                  contentType: "text/plain",
+                  nameSlot: "Unknown filename",
+                  src: void 0,
+                  data: p.text
+                }
+              );
+            }
+            return p.text;
+          }
+        }
+      }
+    ) }),
     /* @__PURE__ */ jsx(UserMessageAttachments, {})
   ] });
 };
@@ -4643,6 +4698,123 @@ const useSpeechRecognition = ({ language = "en-US" } = {}) => {
   };
 };
 
+const useHasAttachments = () => {
+  const composer = useComposerRuntime();
+  const [hasAttachments, setHasAttachments] = useState(false);
+  useEffect(() => {
+    composer.subscribe(() => {
+      const attachments = composer.getState().attachments;
+      setHasAttachments(attachments.length > 0);
+    });
+  }, [composer]);
+  return hasAttachments;
+};
+
+function Spinner({ color = "#fff", className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: cn("animate-spin duration-700", className),
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56", stroke: color })
+    }
+  );
+}
+
+const useLoadBrowserFile = (file) => {
+  const [state, setState] = useState({ isLoading: false, text: "" });
+  useEffect(() => {
+    if (!file) return;
+    const run = async () => {
+      setState((s) => ({ ...s, isLoading: true }));
+      const text = await file.text();
+      setState((s) => ({ ...s, isLoading: false, text }));
+    };
+    run();
+  }, [file]);
+  return state;
+};
+
+const fileToBase64 = async (file) => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const result = reader.result;
+      if (typeof result === "string") {
+        resolve(result);
+      } else {
+        reject(new Error("Failed to convert file to base64."));
+      }
+    };
+    reader.onerror = (error) => {
+      reject(error);
+    };
+    reader.readAsDataURL(file);
+  });
+};
+
+const ComposerTxtAttachment = ({ document }) => {
+  const { isLoading, text } = useLoadBrowserFile(document.file);
+  return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full w-full", children: isLoading ? /* @__PURE__ */ jsx(Spinner, { className: "animate-spin" }) : /* @__PURE__ */ jsx(TxtEntry, { data: text }) });
+};
+const ComposerPdfAttachment = ({ document }) => {
+  const [state, setState] = useState({ isLoading: false, text: "" });
+  useEffect(() => {
+    let isCanceled = false;
+    const run = async () => {
+      if (!document.file) return;
+      setState((s) => ({ ...s, isLoading: true }));
+      const text = await fileToBase64(document.file);
+      if (isCanceled) {
+        return;
+      }
+      setState((s) => ({ ...s, isLoading: false, text }));
+    };
+    run();
+    return () => {
+      isCanceled = true;
+    };
+  }, [document]);
+  return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full w-full", children: state.isLoading ? /* @__PURE__ */ jsx(Spinner, { className: "animate-spin" }) : /* @__PURE__ */ jsx(PdfEntry, { data: state.text }) });
+};
+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(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx(TooltipProvider$1, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(AttachmentPrimitive.Root, { children: /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden size-16 rounded-lg bg-surface3 border-sm border-border1 ", children: isImage ? /* @__PURE__ */ jsx(ImageEntry, { src: src ?? "" }) : document?.contentType === "application/pdf" ? /* @__PURE__ */ jsx(ComposerPdfAttachment, { document }) : document ? /* @__PURE__ */ jsx(ComposerTxtAttachment, { document }) : null }) }) }),
+      /* @__PURE__ */ jsx(TooltipContent, { side: "top", children: /* @__PURE__ */ jsx(AttachmentPrimitive.Name, {}) })
+    ] }) }),
+    canRemove && /* @__PURE__ */ jsx(AttachmentRemove, {})
+  ] }) });
+};
+const AttachmentRemove = () => {
+  return /* @__PURE__ */ jsx(AttachmentPrimitive.Remove, { asChild: true, children: /* @__PURE__ */ jsx(
+    TooltipIconButton,
+    {
+      tooltip: "Remove file",
+      className: "absolute -right-3 -top-3 text-icon3 hover:text-icon6 rounded-full bg-surface1 hover:bg-surface2 rounded-full p-1",
+      side: "top",
+      children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(CircleXIcon, {}) })
+    }
+  ) });
+};
+const ComposerAttachments = () => {
+  const hasAttachments = useHasAttachments();
+  if (!hasAttachments) return null;
+  return /* @__PURE__ */ jsx("div", { className: "flex w-full flex-row items-center gap-4 pb-2", children: /* @__PURE__ */ jsx(ComposerPrimitive.Attachments, { components: { Attachment: AttachmentThumbnail } }) });
+};
+
 const Thread = ({ ToolFallback, agentName, hasMemory, showFileSupport }) => {
   const areaRef = useRef(null);
   useAutoscroll(areaRef, { enabled: true });
@@ -4689,7 +4861,7 @@ const ThreadWelcome$1 = ({ agentName }) => {
 const Composer$1 = ({ hasMemory, showFileSupport }) => {
   return /* @__PURE__ */ jsxs("div", { className: "mx-4", children: [
     /* @__PURE__ */ jsxs(ComposerPrimitive.Root, { children: [
-      /* @__PURE__ */ jsx("div", { className: "max-w-[568px] w-full mx-auto px-2 py-3", children: /* @__PURE__ */ jsx(ComposerAttachments, {}) }),
+      /* @__PURE__ */ jsx("div", { className: "max-w-[568px] w-full mx-auto pb-2", children: /* @__PURE__ */ jsx(ComposerAttachments, {}) }),
       /* @__PURE__ */ jsxs("div", { className: "bg-surface3 rounded-lg border-sm border-border1 py-4 mt-auto max-w-[568px] w-full mx-auto px-4", children: [
         /* @__PURE__ */ jsx(ComposerPrimitive.Input, { asChild: true, className: "w-full", children: /* @__PURE__ */ jsx(
           "textarea",
@@ -4728,7 +4900,7 @@ const SpeechInput$1 = () => {
       variant: "ghost",
       className: "rounded-full",
       onClick: () => isListening ? stop() : start(),
-      children: isListening ? /* @__PURE__ */ jsx(CircleStopIcon$2, {}) : /* @__PURE__ */ jsx(Mic, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" })
+      children: isListening ? /* @__PURE__ */ jsx(CircleStopIcon$1, {}) : /* @__PURE__ */ jsx(Mic, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" })
     }
   );
 };
@@ -4744,7 +4916,7 @@ const ComposerAction$1 = ({ showFileSupport }) => {
         children: /* @__PURE__ */ jsx(ArrowUp, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" })
       }
     ) }) }),
-    /* @__PURE__ */ jsx(ThreadPrimitive.If, { running: true, children: /* @__PURE__ */ jsx(ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ jsx(TooltipIconButton, { tooltip: "Cancel", variant: "default", children: /* @__PURE__ */ jsx(CircleStopIcon$2, {}) }) }) })
+    /* @__PURE__ */ jsx(ThreadPrimitive.If, { running: true, children: /* @__PURE__ */ jsx(ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ jsx(TooltipIconButton, { tooltip: "Cancel", variant: "default", children: /* @__PURE__ */ jsx(CircleStopIcon$1, {}) }) }) })
   ] });
 };
 const EditComposer$1 = () => {
@@ -4756,28 +4928,10 @@ const EditComposer$1 = () => {
     ] })
   ] });
 };
-const CircleStopIcon$2 = () => {
+const CircleStopIcon$1 = () => {
   return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "currentColor", width: "16", height: "16", children: /* @__PURE__ */ jsx("rect", { width: "10", height: "10", x: "3", y: "3", rx: "2" }) });
 };
 
-const fileToBase64 = async (file) => {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onload = () => {
-      const result = reader.result;
-      if (typeof result === "string") {
-        resolve(result);
-      } else {
-        reject(new Error("Failed to convert file to base64."));
-      }
-    };
-    reader.onerror = (error) => {
-      reject(error);
-    };
-    reader.readAsDataURL(file);
-  });
-};
-
 class PDFAttachmentAdapter {
   accept = "application/pdf";
   async add({ file }) {
@@ -4844,13 +4998,13 @@ const convertToAIAttachments = async (attachments) => {
   const promises = attachments.filter((attachment) => attachment.type === "image" || attachment.type === "document").map(async (attachment) => {
     if (attachment.type === "document") {
       if (attachment.contentType === "application/pdf") {
+        const pdfText = attachment.content?.[0]?.text || "";
         return {
           role: "user",
           content: [
             {
               type: "file",
-              // @ts-expect-error - TODO: fix this type issue somehow
-              data: attachment.content?.[0]?.text || "",
+              data: `data:application/pdf;base64,${pdfText}`,
               mimeType: attachment.contentType,
               filename: attachment.name
             }
@@ -5236,6 +5390,10 @@ function useAgentModelSettingsState({ agentId }) {
   const resetAll = () => {
     setModelSettingsState(defaultModelSettings$1);
     setChatWithGenerate(false);
+    localStorage.setItem(
+      LOCAL_STORAGE_KEY,
+      JSON.stringify({ modelSettings: defaultModelSettings$1, chatWithGenerate: false, agentId })
+    );
   };
   return {
     modelSettings,
@@ -6317,7 +6475,7 @@ const useCodemirrorTheme = () => {
     []
   );
 };
-const SyntaxHighlighter = ({ data }) => {
+const SyntaxHighlighter$1 = ({ data }) => {
   const formattedCode = JSON.stringify(data, null, 2);
   const theme = useCodemirrorTheme();
   return /* @__PURE__ */ jsx("div", { className: "rounded-md bg-[#1a1a1a] p-1 font-mono", children: /* @__PURE__ */ jsx(CodeMirror, { value: formattedCode, theme, extensions: [jsonLanguage] }) });
@@ -6432,10 +6590,10 @@ const AttributeValue = ({ value }) => {
     return /* @__PURE__ */ jsx(Txt, { as: "p", variant: "ui-md", className: "text-icon6", children: String(value) });
   }
   if (typeof value === "object") {
-    return /* @__PURE__ */ jsx(SyntaxHighlighter, { data: value });
+    return /* @__PURE__ */ jsx(SyntaxHighlighter$1, { data: value });
   }
   try {
-    return /* @__PURE__ */ jsx(SyntaxHighlighter, { data: JSON.parse(value) });
+    return /* @__PURE__ */ jsx(SyntaxHighlighter$1, { data: JSON.parse(value) });
   } catch {
     return /* @__PURE__ */ jsx(Txt, { as: "p", variant: "ui-md", className: "text-icon6", children: String(value) });
   }
@@ -7172,25 +7330,6 @@ const useVNextNetworkChat = () => {
   return context;
 };
 
-function Spinner({ color = "#fff", className }) {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      className: cn("animate-spin duration-700", className),
-      xmlns: "http://www.w3.org/2000/svg",
-      width: "24",
-      height: "24",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      children: /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56", stroke: color })
-    }
-  );
-}
-
 const Clock = ({ startedAt, endedAt }) => {
   const [time, setTime] = useState(startedAt);
   useEffect(() => {
@@ -9313,7 +9452,7 @@ const SpeechInput = () => {
       variant: "ghost",
       className: "rounded-full",
       onClick: () => isListening ? stop() : start(),
-      children: isListening ? /* @__PURE__ */ jsx(CircleStopIcon$1, {}) : /* @__PURE__ */ jsx(Mic, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" })
+      children: isListening ? /* @__PURE__ */ jsx(CircleStopIcon, {}) : /* @__PURE__ */ jsx(Mic, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" })
     }
   );
 };
@@ -9329,7 +9468,7 @@ const ComposerAction = ({ showFileSupport }) => {
         children: /* @__PURE__ */ jsx(ArrowUp, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" })
       }
     ) }) }),
-    /* @__PURE__ */ jsx(ThreadPrimitive.If, { running: true, children: /* @__PURE__ */ jsx(ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ jsx(TooltipIconButton, { tooltip: "Cancel", variant: "default", children: /* @__PURE__ */ jsx(CircleStopIcon$1, {}) }) }) })
+    /* @__PURE__ */ jsx(ThreadPrimitive.If, { running: true, children: /* @__PURE__ */ jsx(ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ jsx(TooltipIconButton, { tooltip: "Cancel", variant: "default", children: /* @__PURE__ */ jsx(CircleStopIcon, {}) }) }) })
   ] });
 };
 const EditComposer = () => {
@@ -9341,7 +9480,7 @@ const EditComposer = () => {
     ] })
   ] });
 };
-const CircleStopIcon$1 = () => {
+const CircleStopIcon = () => {
   return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "currentColor", width: "16", height: "16", children: /* @__PURE__ */ jsx("rect", { width: "10", height: "10", x: "3", y: "3", rx: "2" }) });
 };
 
@@ -11087,12 +11226,88 @@ const WorkflowStatus = ({ stepId, status, result }) => {
       ] }),
       children: /* @__PURE__ */ jsxs("div", { className: "rounded-md bg-surface4 p-1 font-mono relative", children: [
         /* @__PURE__ */ jsx(CopyButton, { content: JSON.stringify(result, null, 2), className: "absolute top-2 right-2 z-10" }),
-        /* @__PURE__ */ jsx(SyntaxHighlighter, { data: result })
+        /* @__PURE__ */ jsx(SyntaxHighlighter$1, { data: result })
       ] })
     }
   );
 };
 
+const WorkflowInputData = ({
+  schema,
+  defaultValues,
+  isSubmitLoading,
+  submitButtonLabel,
+  onSubmit
+}) => {
+  const [type, setType] = useState("form");
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(RadioGroup, { value: type, onValueChange: (value) => setType(value), className: "pb-4", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx(RadioGroupItem, { value: "form", id: "form" }),
+        /* @__PURE__ */ jsx(Label, { htmlFor: "form", className: "!text-icon3 text-ui-sm", children: "Form" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx(RadioGroupItem, { value: "json", id: "json" }),
+        /* @__PURE__ */ jsx(Label, { htmlFor: "json", className: "!text-icon3 text-ui-sm", children: "JSON" })
+      ] })
+    ] }) }),
+    type === "form" ? /* @__PURE__ */ jsx(
+      DynamicForm,
+      {
+        schema,
+        defaultValues,
+        isSubmitLoading,
+        submitButtonLabel,
+        onSubmit
+      }
+    ) : /* @__PURE__ */ jsx(
+      JSONInput,
+      {
+        schema,
+        defaultValues,
+        isSubmitLoading,
+        submitButtonLabel,
+        onSubmit
+      }
+    )
+  ] });
+};
+const JSONInput = ({ schema, defaultValues, isSubmitLoading, submitButtonLabel, onSubmit }) => {
+  const [errors, setErrors] = useState([]);
+  const [inputData, setInputData] = useState(JSON.stringify(defaultValues ?? {}, null, 2));
+  const handleSubmit = () => {
+    setErrors([]);
+    try {
+      const result = schema.safeParse(JSON.parse(inputData));
+      if (!result.success) {
+        setErrors(result.error.issues.map((e) => `[${e.path.join(".")}] ${e.message}`));
+      } else {
+        onSubmit(result.data);
+      }
+    } catch (e) {
+      setErrors(["Invalid JSON provided"]);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+    errors.length > 0 && /* @__PURE__ */ jsxs("div", { className: "border-sm border-accent2 rounded-lg p-2", children: [
+      /* @__PURE__ */ jsxs(Txt, { as: "p", variant: "ui-md", className: "text-accent2 font-semibold", children: [
+        errors.length,
+        " errors found"
+      ] }),
+      /* @__PURE__ */ jsx("ul", { className: "list-disc list-inside", children: errors.map((error, idx) => /* @__PURE__ */ jsx("li", { className: "text-ui-sm text-accent2", children: error }, idx)) })
+    ] }),
+    /* @__PURE__ */ jsx(SyntaxHighlighter, { data: inputData, onChange: setInputData }),
+    /* @__PURE__ */ jsx(Button, { variant: "light", onClick: handleSubmit, className: "w-full", size: "lg", children: isSubmitLoading ? /* @__PURE__ */ jsx(Loader2, { className: "animate-spin" }) : submitButtonLabel })
+  ] });
+};
+const SyntaxHighlighter = ({ data, onChange }) => {
+  const theme = useCodemirrorTheme$1();
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-md bg-[#1a1a1a] p-1 font-mono", children: [
+    /* @__PURE__ */ jsx(CopyButton, { content: data, className: "absolute top-2 right-2 z-10" }),
+    /* @__PURE__ */ jsx(CodeMirror, { value: data, theme, extensions: [jsonLanguage], onChange })
+  ] });
+};
+
 function WorkflowTrigger({
   workflowId,
   setRunId,
@@ -11178,24 +11393,12 @@ function WorkflowTrigger({
   const hasWorkflowActivePaths = Object.values(workflowActivePaths).length > 0;
   return /* @__PURE__ */ jsxs("div", { className: "h-full pt-3 pb-12", children: [
     /* @__PURE__ */ jsxs("div", { className: "space-y-4 px-5 pb-5 border-b-sm border-border1", children: [
-      result?.runId && /* @__PURE__ */ jsxs(
-        Button,
-        {
-          variant: "light",
-          onClick: handleCancelWorkflowRun,
-          disabled: !!cancelResponse?.message || isCancellingWorkflowRun,
-          children: [
-            isCancellingWorkflowRun ? /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Loader2, { className: "animate-spin" }) }) : /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(CircleStopIcon, {}) }),
-            cancelResponse?.message || "Cancel Workflow Run"
-          ]
-        }
-      ),
       (isResumingWorkflow || isSuspendedSteps && isStreamingWorkflow) && /* @__PURE__ */ jsxs("div", { className: "py-2 px-5 flex items-center gap-2 bg-surface5 -mx-5 -mt-5 border-b-sm border-border1", children: [
         /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Loader2, { className: "animate-spin text-icon6" }) }),
         /* @__PURE__ */ jsx(Txt, { children: "Resuming workflow" })
       ] }),
       !isSuspendedSteps && /* @__PURE__ */ jsx(Fragment, { children: zodInputSchema ? /* @__PURE__ */ jsx(
-        DynamicForm,
+        WorkflowInputData,
         {
           schema: zodInputSchema,
           defaultValues: payload,
@@ -11231,7 +11434,7 @@ function WorkflowTrigger({
             }
           ) }),
           /* @__PURE__ */ jsx(
-            DynamicForm,
+            WorkflowInputData,
             {
               schema: stepSchema,
               isSubmitLoading: isResumingWorkflow,
@@ -11248,6 +11451,20 @@ function WorkflowTrigger({
           )
         ] }, step.stepId);
       }),
+      result?.runId && /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "light",
+          className: "w-full",
+          size: "lg",
+          onClick: handleCancelWorkflowRun,
+          disabled: !!cancelResponse?.message || isCancellingWorkflowRun,
+          children: [
+            isCancellingWorkflowRun ? /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Loader2, { className: "animate-spin" }) }) : /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(StopCircle, {}) }),
+            cancelResponse?.message || "Cancel Workflow Run"
+          ]
+        }
+      ),
       hasWorkflowActivePaths && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx("hr", { className: "border-border1 border-sm my-5" }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
@@ -11270,13 +11487,10 @@ const WorkflowJsonDialog = ({ result }) => {
     ] }),
     /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsx(DialogPortal, { children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-6xl max-h-[90vh] overflow-y-auto overflow-x-hidden bg-surface2", children: [
       /* @__PURE__ */ jsx(DialogTitle, { children: "Workflow Execution (JSON)" }),
-      /* @__PURE__ */ jsx("div", { className: "w-full h-full overflow-x-scroll", children: /* @__PURE__ */ jsx(SyntaxHighlighter$1, { data: result, className: "p-4" }) })
+      /* @__PURE__ */ jsx("div", { className: "w-full h-full overflow-x-scroll", children: /* @__PURE__ */ jsx(SyntaxHighlighter$2, { data: result, className: "p-4" }) })
     ] }) }) })
   ] });
 };
-const CircleStopIcon = () => {
-  return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "currentColor", width: "16", height: "16", children: /* @__PURE__ */ jsx("rect", { width: "10", height: "10", x: "3", y: "3", rx: "2" }) });
-};
 
 const WorkflowRuns = ({ workflowId, runId, isLoading, runs, onPressRun }) => {
   if (isLoading) {