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

package/dist/index.cjs.js

@@ -20,8 +20,8 @@ const highlight$1 = require('@lezer/highlight');
 const codemirrorThemeDracula = require('@uiw/codemirror-theme-dracula');
 const CodeMirror = require('@uiw/react-codemirror');
 const sonner = require('sonner');
-const DialogPrimitive = require('@radix-ui/react-dialog');
 const shallow = require('zustand/shallow');
+const DialogPrimitive = require('@radix-ui/react-dialog');
 const di = require('@mastra/core/di');
 const zustand = require('zustand');
 const middleware = require('zustand/middleware');
@@ -3199,47 +3199,7 @@ const AvatarFallback = React__namespace.forwardRef(({ className, ...props }, ref
 ));
 AvatarFallback.displayName = AvatarPrimitive__namespace.Fallback.displayName;
 
-const ImageWithFallback = ({ alt, src, ...rest }) => {
-  const [error, setError] = React.useState(false);
-  React.useEffect(() => {
-    setError(false);
-  }, [src]);
-  return error || !src ? /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { className: "text-xs italic text-muted-foreground -mt-[0.625rem] mb-[0.625rem]", children: "Image link is broken" })
-  ] }) : /* @__PURE__ */ jsxRuntime.jsx(
-    "img",
-    {
-      src,
-      alt,
-      ...rest,
-      onError: () => {
-        setError(true);
-      }
-    }
-  );
-};
-
-const SyntaxHighlighter$2 = reactSyntaxHighlighter.makePrismAsyncSyntaxHighlighter({
+const SyntaxHighlighter$3 = reactSyntaxHighlighter.makePrismAsyncSyntaxHighlighter({
   style: prism.coldarkDark,
   customStyle: {
     margin: 0,
@@ -3311,6 +3271,45 @@ const useCopyToClipboard$1 = ({
   };
   return { isCopied, copyToClipboard };
 };
+const ImageWithFallback = ({ alt, src, ...rest }) => {
+  const [error, setError] = React.useState(false);
+  React.useEffect(() => {
+    setError(false);
+  }, [src]);
+  return error || !src ? /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { className: "text-xs italic text-muted-foreground -mt-[0.625rem] mb-[0.625rem]", children: "Image link is broken" })
+  ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+    "img",
+    {
+      src,
+      alt,
+      ...rest,
+      onError: () => {
+        setError(true);
+      }
+    }
+  );
+};
 const defaultComponents = reactMarkdown.unstable_memoizeMarkdownComponents({
   h1: ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
     "h1",
@@ -3458,7 +3457,7 @@ const defaultComponents = reactMarkdown.unstable_memoizeMarkdownComponents({
     );
   },
   CodeHeader,
-  SyntaxHighlighter: SyntaxHighlighter$2,
+  SyntaxHighlighter: SyntaxHighlighter$3,
   img: ImageWithFallback
 });
 
@@ -4337,7 +4336,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__ */ jsxRuntime.jsxs("div", { className: clsx("rounded-md bg-surface4 p-1 font-mono relative", className), children: [
@@ -4364,7 +4363,7 @@ const ToolFallback$1 = ({ toolName, argsText, result }) => {
   let argSlot;
   try {
     const parsedArgs = JSON.parse(argsText);
-    argSlot = /* @__PURE__ */ jsxRuntime.jsx(SyntaxHighlighter$1, { data: parsedArgs });
+    argSlot = /* @__PURE__ */ jsxRuntime.jsx(SyntaxHighlighter$2, { data: parsedArgs });
   } catch {
     argSlot = /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "whitespace-pre-wrap", children: argsText });
   }
@@ -4380,15 +4379,13 @@ const ToolFallback$1 = ({ toolName, argsText, result }) => {
       ] }),
       result !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-2", children: [
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium pb-2", children: "Tool result" }),
-        typeof result === "string" ? /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "whitespace-pre-wrap", children: result }) : /* @__PURE__ */ jsxRuntime.jsx(SyntaxHighlighter$1, { data: result })
+        typeof result === "string" ? /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "whitespace-pre-wrap", children: result }) : /* @__PURE__ */ jsxRuntime.jsx(SyntaxHighlighter$2, { data: result })
       ] })
     ] }) })
   ] });
 };
 
-const AssistantMessage = ({
-  ToolFallback: ToolFallbackCustom
-}) => {
+const AssistantMessage = ({ ToolFallback: ToolFallbackCustom }) => {
   const data = react.useMessage();
   const isSolelyToolCall = data.content.length === 1 && data.content[0].type === "tool-call";
   return /* @__PURE__ */ jsxRuntime.jsxs(react.MessagePrimitive.Root, { className: "max-w-full", children: [
@@ -4420,8 +4417,36 @@ const AssistantActionBar$1 = () => {
   );
 };
 
+const useFileSrc = (file) => {
+  const [src, setSrc] = React.useState(void 0);
+  React.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 } = react.useAttachment(
+    shallow.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__namespace.Root;
-const DialogTrigger = DialogPrimitive__namespace.Trigger;
 const DialogPortal = DialogPrimitive__namespace.Portal;
 const DialogOverlay = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   DialogPrimitive__namespace.Overlay,
@@ -4469,107 +4494,137 @@ DialogTitle.displayName = DialogPrimitive__namespace.Title.displayName;
 const DialogDescription = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Description, { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
 DialogDescription.displayName = DialogPrimitive__namespace.Description.displayName;
 
-const useHasAttachments = () => {
-  const composer = react.useComposerRuntime();
-  const [hasAttachments, setHasAttachments] = React.useState(false);
-  React.useEffect(() => {
-    composer.subscribe(() => {
-      const attachments = composer.getState().attachments;
-      setHasAttachments(attachments.length > 0);
-    });
-  }, [composer]);
-  return hasAttachments;
+const PdfEntry = ({ data }) => {
+  const [open, setOpen] = React.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => setOpen(true), className: "h-full w-full flex items-center justify-center", type: "button", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileText, { className: "text-accent2" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(PdfPreviewDialog, { data, open, onOpenChange: setOpen })
+  ] });
 };
-
-const useFileSrc = (file) => {
-  const [src, setSrc] = React.useState(void 0);
-  React.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__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsx(DialogContent, { className: "max-w-4xl bg-surface2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-full w-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { className: "pb-4", children: "PDF preview" }),
+    open && /* @__PURE__ */ jsxRuntime.jsx("iframe", { src: data, width: "100%", height: "600px" })
+  ] }) }) });
 };
-const useAttachmentSrc = () => {
-  const { file, src } = react.useAttachment(
-    shallow.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] = React.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => setOpen(true), type: "button", className: "h-full w-full flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("img", { src, className: "object-cover aspect-ratio max-h-[140px] max-w-[320px]", alt: "Preview" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(ImagePreviewDialog, { src, open, onOpenChange: setOpen })
+  ] });
 };
-const AttachmentPreview = ({ src }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden w-full", children: /* @__PURE__ */ jsxRuntime.jsx("img", { src, className: "object-contain aspect-ratio h-full w-full", alt: "Preview" }) });
+const ImagePreviewDialog = ({ src, open, onOpenChange }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsx(DialogContent, { className: "max-w-4xl bg-surface2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-full w-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { className: "pb-4", children: "Image preview" }),
+    open && /* @__PURE__ */ jsxRuntime.jsx("img", { src, alt: "Image" })
+  ] }) }) });
 };
-const AttachmentPreviewDialog = ({ children }) => {
-  const src = useAttachmentSrc();
-  if (!src) return children;
-  return /* @__PURE__ */ jsxRuntime.jsxs(Dialog, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(DialogTrigger, { className: "hover:bg-accent/50 cursor-pointer transition-colors", asChild: true, children }),
-    /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
-      /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "max-w-5xl w-full max-h-[80%]", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { className: "aui-sr-only", children: "Image Attachment Preview" }),
-        /* @__PURE__ */ jsxRuntime.jsx(AttachmentPreview, { src })
-      ] })
-    ] })
+const TxtEntry = ({ data }) => {
+  const [open, setOpen] = React.useState(false);
+  const formattedContent = data.replace(/<attachment[^>]*>/, "").replace(/<\/attachment>/g, "");
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => setOpen(true), className: "h-full w-full flex items-center justify-center", type: "button", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileText, { className: "text-icon3" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(TxtPreviewDialog, { data: formattedContent, open, onOpenChange: setOpen })
   ] });
 };
-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 }) }) : 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, {}) })
-  ] }) });
+const TxtPreviewDialog = ({ data, open, onOpenChange }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsx(DialogContent, { className: "max-w-4xl bg-surface2 h-[80vh] overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-full w-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { className: "pb-4", children: "Text preview" }),
+    open && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "whitespace-pre-wrap", children: data })
+  ] }) }) });
 };
-const AttachmentRemove = () => {
-  return /* @__PURE__ */ jsxRuntime.jsx(react.AttachmentPrimitive.Remove, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-    TooltipIconButton,
+
+const InMessageContextWrapper = () => {
+  return /* @__PURE__ */ jsxRuntime.jsx(react.AttachmentPrimitive.Root, { className: "pt-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-[366px] px-5 py-3 text-icon6 text-ui-lg leading-ui-lg rounded-lg bg-surface3", children: /* @__PURE__ */ jsxRuntime.jsx(InMessageAttachmentWrapper, {}) }) });
+};
+const InMessageAttachmentWrapper = () => {
+  const src = useAttachmentSrc();
+  const attachment = react.useAttachment((a) => a);
+  if (attachment.type === "image") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      InMessageAttachment,
+      {
+        type: "image",
+        contentType: void 0,
+        nameSlot: /* @__PURE__ */ jsxRuntime.jsx(react.AttachmentPrimitive.Name, {}),
+        src,
+        data: void 0
+      }
+    );
+  }
+  if (attachment.contentType === "application/pdf") {
+    const pdfText = attachment.content?.[0]?.text;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      InMessageAttachment,
+      {
+        type: "document",
+        contentType: attachment.contentType,
+        nameSlot: /* @__PURE__ */ jsxRuntime.jsx(react.AttachmentPrimitive.Name, {}),
+        src,
+        data: `data:application/pdf;base64,${pdfText}`
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleXIcon, {}) })
+      type: attachment.type,
+      contentType: attachment.contentType,
+      nameSlot: /* @__PURE__ */ jsxRuntime.jsx(react.AttachmentPrimitive.Name, {}),
+      src,
+      data: attachment.content?.[0]?.text
     }
-  ) });
-};
-const UserMessageAttachments = () => {
-  return /* @__PURE__ */ jsxRuntime.jsx(react.MessagePrimitive.Attachments, { components: { Attachment: InMessageAttachment } });
+  );
 };
-const InMessageAttachment = () => {
-  const isImage = react.useAttachment((a) => a.type === "image");
-  const document = react.useAttachment((a) => a.type === "document" ? a : void 0);
-  const src = useAttachmentSrc();
+const InMessageAttachment = ({ type, contentType, nameSlot, src, data }) => {
   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" }) }) : 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, {}) })
+    /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full overflow-hidden rounded-lg", children: type === "image" ? /* @__PURE__ */ jsxRuntime.jsx(ImageEntry, { src: src ?? "" }) : type === "document" && contentType === "application/pdf" ? /* @__PURE__ */ jsxRuntime.jsx(PdfEntry, { data: data ?? "" }) : /* @__PURE__ */ jsxRuntime.jsx(TxtEntry, { data: data ?? "" }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "top", children: nameSlot })
   ] }) });
 };
-const ComposerAttachments = () => {
-  const hasAttachments = useHasAttachments();
-  if (!hasAttachments) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full flex-row items-center gap-4 h-24", children: /* @__PURE__ */ jsxRuntime.jsx(react.ComposerPrimitive.Attachments, { components: { Attachment: AttachmentThumbnail } }) });
+const UserMessageAttachments = () => {
+  return /* @__PURE__ */ jsxRuntime.jsx(react.MessagePrimitive.Attachments, { components: { Attachment: InMessageContextWrapper } });
 };
-
 const UserMessage = () => {
   return /* @__PURE__ */ jsxRuntime.jsxs(react.MessagePrimitive.Root, { className: "w-full flex items-end pb-4 flex-col", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-[366px] px-5 py-3 text-icon6 text-ui-lg leading-ui-lg rounded-lg bg-surface3", children: /* @__PURE__ */ jsxRuntime.jsx(react.MessagePrimitive.Content, {}) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-[366px] px-5 py-3 text-icon6 text-ui-lg leading-ui-lg rounded-lg bg-surface3", children: /* @__PURE__ */ jsxRuntime.jsx(
+      react.MessagePrimitive.Content,
+      {
+        components: {
+          File: (p) => {
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              InMessageAttachment,
+              {
+                type: "document",
+                contentType: p.mimeType,
+                nameSlot: "Unknown filename",
+                src: void 0,
+                data: p.image
+              }
+            );
+          },
+          Image: (p) => {
+            return /* @__PURE__ */ jsxRuntime.jsx(InMessageAttachment, { type: "image", nameSlot: "Unknown filename", src: p.image });
+          },
+          Text: (p) => {
+            if (p.text.includes("<attachment name=")) {
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                InMessageAttachment,
+                {
+                  type: "document",
+                  contentType: "text/plain",
+                  nameSlot: "Unknown filename",
+                  src: void 0,
+                  data: p.text
+                }
+              );
+            }
+            return p.text;
+          }
+        }
+      }
+    ) }),
     /* @__PURE__ */ jsxRuntime.jsx(UserMessageAttachments, {})
   ] });
 };
@@ -4676,6 +4731,123 @@ const useSpeechRecognition = ({ language = "en-US" } = {}) => {
   };
 };
 
+const useHasAttachments = () => {
+  const composer = react.useComposerRuntime();
+  const [hasAttachments, setHasAttachments] = React.useState(false);
+  React.useEffect(() => {
+    composer.subscribe(() => {
+      const attachments = composer.getState().attachments;
+      setHasAttachments(attachments.length > 0);
+    });
+  }, [composer]);
+  return hasAttachments;
+};
+
+function Spinner({ color = "#fff", className }) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56", stroke: color })
+    }
+  );
+}
+
+const useLoadBrowserFile = (file) => {
+  const [state, setState] = React.useState({ isLoading: false, text: "" });
+  React.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__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-full w-full", children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, { className: "animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(TxtEntry, { data: text }) });
+};
+const ComposerPdfAttachment = ({ document }) => {
+  const [state, setState] = React.useState({ isLoading: false, text: "" });
+  React.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__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-full w-full", children: state.isLoading ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, { className: "animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(PdfEntry, { data: state.text }) });
+};
+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(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive.TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(react.AttachmentPrimitive.Root, { children: /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden size-16 rounded-lg bg-surface3 border-sm border-border1 ", children: isImage ? /* @__PURE__ */ jsxRuntime.jsx(ImageEntry, { src: src ?? "" }) : document?.contentType === "application/pdf" ? /* @__PURE__ */ jsxRuntime.jsx(ComposerPdfAttachment, { document }) : document ? /* @__PURE__ */ jsxRuntime.jsx(ComposerTxtAttachment, { document }) : null }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "top", children: /* @__PURE__ */ jsxRuntime.jsx(react.AttachmentPrimitive.Name, {}) })
+    ] }) }),
+    canRemove && /* @__PURE__ */ jsxRuntime.jsx(AttachmentRemove, {})
+  ] }) });
+};
+const AttachmentRemove = () => {
+  return /* @__PURE__ */ jsxRuntime.jsx(react.AttachmentPrimitive.Remove, { asChild: true, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleXIcon, {}) })
+    }
+  ) });
+};
+const ComposerAttachments = () => {
+  const hasAttachments = useHasAttachments();
+  if (!hasAttachments) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full flex-row items-center gap-4 pb-2", children: /* @__PURE__ */ jsxRuntime.jsx(react.ComposerPrimitive.Attachments, { components: { Attachment: AttachmentThumbnail } }) });
+};
+
 const Thread = ({ ToolFallback, agentName, hasMemory, showFileSupport }) => {
   const areaRef = React.useRef(null);
   useAutoscroll(areaRef, { enabled: true });
@@ -4722,7 +4894,7 @@ const ThreadWelcome$1 = ({ agentName }) => {
 const Composer$1 = ({ hasMemory, showFileSupport }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-4", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(react.ComposerPrimitive.Root, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-[568px] w-full mx-auto px-2 py-3", children: /* @__PURE__ */ jsxRuntime.jsx(ComposerAttachments, {}) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-[568px] w-full mx-auto pb-2", children: /* @__PURE__ */ jsxRuntime.jsx(ComposerAttachments, {}) }),
       /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(react.ComposerPrimitive.Input, { asChild: true, className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
           "textarea",
@@ -4761,7 +4933,7 @@ const SpeechInput$1 = () => {
       variant: "ghost",
       className: "rounded-full",
       onClick: () => isListening ? stop() : start(),
-      children: isListening ? /* @__PURE__ */ jsxRuntime.jsx(CircleStopIcon$2, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Mic, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" })
+      children: isListening ? /* @__PURE__ */ jsxRuntime.jsx(CircleStopIcon$1, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Mic, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" })
     }
   );
 };
@@ -4777,7 +4949,7 @@ const ComposerAction$1 = ({ showFileSupport }) => {
         children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" })
       }
     ) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(react.ThreadPrimitive.If, { running: true, children: /* @__PURE__ */ jsxRuntime.jsx(react.ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipIconButton, { tooltip: "Cancel", variant: "default", children: /* @__PURE__ */ jsxRuntime.jsx(CircleStopIcon$2, {}) }) }) })
+    /* @__PURE__ */ jsxRuntime.jsx(react.ThreadPrimitive.If, { running: true, children: /* @__PURE__ */ jsxRuntime.jsx(react.ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipIconButton, { tooltip: "Cancel", variant: "default", children: /* @__PURE__ */ jsxRuntime.jsx(CircleStopIcon$1, {}) }) }) })
   ] });
 };
 const EditComposer$1 = () => {
@@ -4789,28 +4961,10 @@ const EditComposer$1 = () => {
     ] })
   ] });
 };
-const CircleStopIcon$2 = () => {
+const CircleStopIcon$1 = () => {
   return /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "currentColor", width: "16", height: "16", children: /* @__PURE__ */ jsxRuntime.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 }) {
@@ -4877,13 +5031,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
             }
@@ -5269,6 +5423,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,
@@ -6350,7 +6508,7 @@ const useCodemirrorTheme = () => {
     []
   );
 };
-const SyntaxHighlighter = ({ data }) => {
+const SyntaxHighlighter$1 = ({ data }) => {
   const formattedCode = JSON.stringify(data, null, 2);
   const theme = useCodemirrorTheme();
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md bg-[#1a1a1a] p-1 font-mono", children: /* @__PURE__ */ jsxRuntime.jsx(CodeMirror, { value: formattedCode, theme, extensions: [langJson.jsonLanguage] }) });
@@ -6465,10 +6623,10 @@ const AttributeValue = ({ value }) => {
     return /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "p", variant: "ui-md", className: "text-icon6", children: String(value) });
   }
   if (typeof value === "object") {
-    return /* @__PURE__ */ jsxRuntime.jsx(SyntaxHighlighter, { data: value });
+    return /* @__PURE__ */ jsxRuntime.jsx(SyntaxHighlighter$1, { data: value });
   }
   try {
-    return /* @__PURE__ */ jsxRuntime.jsx(SyntaxHighlighter, { data: JSON.parse(value) });
+    return /* @__PURE__ */ jsxRuntime.jsx(SyntaxHighlighter$1, { data: JSON.parse(value) });
   } catch {
     return /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "p", variant: "ui-md", className: "text-icon6", children: String(value) });
   }
@@ -7205,25 +7363,6 @@ const useVNextNetworkChat = () => {
   return context;
 };
 
-function Spinner({ color = "#fff", className }) {
-  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56", stroke: color })
-    }
-  );
-}
-
 const Clock = ({ startedAt, endedAt }) => {
   const [time, setTime] = React.useState(startedAt);
   React.useEffect(() => {
@@ -9346,7 +9485,7 @@ const SpeechInput = () => {
       variant: "ghost",
       className: "rounded-full",
       onClick: () => isListening ? stop() : start(),
-      children: isListening ? /* @__PURE__ */ jsxRuntime.jsx(CircleStopIcon$1, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Mic, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" })
+      children: isListening ? /* @__PURE__ */ jsxRuntime.jsx(CircleStopIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Mic, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" })
     }
   );
 };
@@ -9362,7 +9501,7 @@ const ComposerAction = ({ showFileSupport }) => {
         children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" })
       }
     ) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(react.ThreadPrimitive.If, { running: true, children: /* @__PURE__ */ jsxRuntime.jsx(react.ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipIconButton, { tooltip: "Cancel", variant: "default", children: /* @__PURE__ */ jsxRuntime.jsx(CircleStopIcon$1, {}) }) }) })
+    /* @__PURE__ */ jsxRuntime.jsx(react.ThreadPrimitive.If, { running: true, children: /* @__PURE__ */ jsxRuntime.jsx(react.ComposerPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipIconButton, { tooltip: "Cancel", variant: "default", children: /* @__PURE__ */ jsxRuntime.jsx(CircleStopIcon, {}) }) }) })
   ] });
 };
 const EditComposer = () => {
@@ -9374,7 +9513,7 @@ const EditComposer = () => {
     ] })
   ] });
 };
-const CircleStopIcon$1 = () => {
+const CircleStopIcon = () => {
   return /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "currentColor", width: "16", height: "16", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "10", height: "10", x: "3", y: "3", rx: "2" }) });
 };
 
@@ -11120,12 +11259,88 @@ const WorkflowStatus = ({ stepId, status, result }) => {
       ] }),
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-md bg-surface4 p-1 font-mono relative", children: [
         /* @__PURE__ */ jsxRuntime.jsx(CopyButton, { content: JSON.stringify(result, null, 2), className: "absolute top-2 right-2 z-10" }),
-        /* @__PURE__ */ jsxRuntime.jsx(SyntaxHighlighter, { data: result })
+        /* @__PURE__ */ jsxRuntime.jsx(SyntaxHighlighter$1, { data: result })
       ] })
     }
   );
 };
 
+const WorkflowInputData = ({
+  schema,
+  defaultValues,
+  isSubmitLoading,
+  submitButtonLabel,
+  onSubmit
+}) => {
+  const [type, setType] = React.useState("form");
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(RadioGroup, { value: type, onValueChange: (value) => setType(value), className: "pb-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(RadioGroupItem, { value: "form", id: "form" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "form", className: "!text-icon3 text-ui-sm", children: "Form" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(RadioGroupItem, { value: "json", id: "json" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "json", className: "!text-icon3 text-ui-sm", children: "JSON" })
+      ] })
+    ] }) }),
+    type === "form" ? /* @__PURE__ */ jsxRuntime.jsx(
+      DynamicForm,
+      {
+        schema,
+        defaultValues,
+        isSubmitLoading,
+        submitButtonLabel,
+        onSubmit
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(
+      JSONInput,
+      {
+        schema,
+        defaultValues,
+        isSubmitLoading,
+        submitButtonLabel,
+        onSubmit
+      }
+    )
+  ] });
+};
+const JSONInput = ({ schema, defaultValues, isSubmitLoading, submitButtonLabel, onSubmit }) => {
+  const [errors, setErrors] = React.useState([]);
+  const [inputData, setInputData] = React.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
+    errors.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-sm border-accent2 rounded-lg p-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Txt, { as: "p", variant: "ui-md", className: "text-accent2 font-semibold", children: [
+        errors.length,
+        " errors found"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "list-disc list-inside", children: errors.map((error, idx) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "text-ui-sm text-accent2", children: error }, idx)) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(SyntaxHighlighter, { data: inputData, onChange: setInputData }),
+    /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "light", onClick: handleSubmit, className: "w-full", size: "lg", children: isSubmitLoading ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "animate-spin" }) : submitButtonLabel })
+  ] });
+};
+const SyntaxHighlighter = ({ data, onChange }) => {
+  const theme = useCodemirrorTheme$1();
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-md bg-[#1a1a1a] p-1 font-mono", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(CopyButton, { content: data, className: "absolute top-2 right-2 z-10" }),
+    /* @__PURE__ */ jsxRuntime.jsx(CodeMirror, { value: data, theme, extensions: [langJson.jsonLanguage], onChange })
+  ] });
+};
+
 function WorkflowTrigger({
   workflowId,
   setRunId,
@@ -11211,24 +11426,12 @@ function WorkflowTrigger({
   const hasWorkflowActivePaths = Object.values(workflowActivePaths).length > 0;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-full pt-3 pb-12", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 px-5 pb-5 border-b-sm border-border1", children: [
-      result?.runId && /* @__PURE__ */ jsxRuntime.jsxs(
-        Button,
-        {
-          variant: "light",
-          onClick: handleCancelWorkflowRun,
-          disabled: !!cancelResponse?.message || isCancellingWorkflowRun,
-          children: [
-            isCancellingWorkflowRun ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "animate-spin" }) }) : /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(CircleStopIcon, {}) }),
-            cancelResponse?.message || "Cancel Workflow Run"
-          ]
-        }
-      ),
       (isResumingWorkflow || isSuspendedSteps && isStreamingWorkflow) && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "animate-spin text-icon6" }) }),
         /* @__PURE__ */ jsxRuntime.jsx(Txt, { children: "Resuming workflow" })
       ] }),
       !isSuspendedSteps && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: zodInputSchema ? /* @__PURE__ */ jsxRuntime.jsx(
-        DynamicForm,
+        WorkflowInputData,
         {
           schema: zodInputSchema,
           defaultValues: payload,
@@ -11264,7 +11467,7 @@ function WorkflowTrigger({
             }
           ) }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            DynamicForm,
+            WorkflowInputData,
             {
               schema: stepSchema,
               isSubmitLoading: isResumingWorkflow,
@@ -11281,6 +11484,20 @@ function WorkflowTrigger({
           )
         ] }, step.stepId);
       }),
+      result?.runId && /* @__PURE__ */ jsxRuntime.jsxs(
+        Button,
+        {
+          variant: "light",
+          className: "w-full",
+          size: "lg",
+          onClick: handleCancelWorkflowRun,
+          disabled: !!cancelResponse?.message || isCancellingWorkflowRun,
+          children: [
+            isCancellingWorkflowRun ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "animate-spin" }) }) : /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.StopCircle, {}) }),
+            cancelResponse?.message || "Cancel Workflow Run"
+          ]
+        }
+      ),
       hasWorkflowActivePaths && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "border-border1 border-sm my-5" }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
@@ -11303,13 +11520,10 @@ const WorkflowJsonDialog = ({ result }) => {
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxRuntime.jsx(DialogPortal, { children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "max-w-6xl max-h-[90vh] overflow-y-auto overflow-x-hidden bg-surface2", children: [
       /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: "Workflow Execution (JSON)" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full overflow-x-scroll", children: /* @__PURE__ */ jsxRuntime.jsx(SyntaxHighlighter$1, { data: result, className: "p-4" }) })
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full overflow-x-scroll", children: /* @__PURE__ */ jsxRuntime.jsx(SyntaxHighlighter$2, { data: result, className: "p-4" }) })
     ] }) }) })
   ] });
 };
-const CircleStopIcon = () => {
-  return /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "currentColor", width: "16", height: "16", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "10", height: "10", x: "3", y: "3", rx: "2" }) });
-};
 
 const WorkflowRuns = ({ workflowId, runId, isLoading, runs, onPressRun }) => {
   if (isLoading) {