@mastra/playground-ui 5.1.11-alpha.2 → 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,46 +3199,6 @@ 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$3 = reactSyntaxHighlighter.makePrismAsyncSyntaxHighlighter({
   style: prism.coldarkDark,
   customStyle: {
@@ -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",
@@ -4386,9 +4385,7 @@ const ToolFallback$1 = ({ toolName, argsText, 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",
@@ -4793,24 +4965,6 @@ 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,
@@ -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(() => {