@mastra/playground-ui 5.1.11-alpha.2 → 5.1.11-alpha.4

package/LICENSE.md

@@ -1,46 +1,15 @@
-# Elastic License 2.0 (ELv2)
+# Apache License 2.0
 
-Copyright (c) 2025 Mastra AI, Inc.
+Copyright (c) 2025 Kepler Software, Inc.
 
-**Acceptance**
-By using the software, you agree to all of the terms and conditions below.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
 
-**Copyright License**
-The licensor grants you a non-exclusive, royalty-free, worldwide, non-sublicensable, non-transferable license to use, copy, distribute, make available, and prepare derivative works of the software, in each case subject to the limitations and conditions below
+    http://www.apache.org/licenses/LICENSE-2.0
 
-**Limitations**
-You may not provide the software to third parties as a hosted or managed service, where the service provides users with access to any substantial set of the features or functionality of the software.
-
-You may not move, change, disable, or circumvent the license key functionality in the software, and you may not remove or obscure any functionality in the software that is protected by the license key.
-
-You may not alter, remove, or obscure any licensing, copyright, or other notices of the licensor in the software. Any use of the licensor’s trademarks is subject to applicable law.
-
-**Patents**
-The licensor grants you a license, under any patent claims the licensor can license, or becomes able to license, to make, have made, use, sell, offer for sale, import and have imported the software, in each case subject to the limitations and conditions in this license. This license does not cover any patent claims that you cause to be infringed by modifications or additions to the software. If you or your company make any written claim that the software infringes or contributes to infringement of any patent, your patent license for the software granted under these terms ends immediately. If your company makes such a claim, your patent license ends immediately for work on behalf of your company.
-
-**Notices**
-You must ensure that anyone who gets a copy of any part of the software from you also gets a copy of these terms.
-
-If you modify the software, you must include in any modified copies of the software prominent notices stating that you have modified the software.
-
-**No Other Rights**
-These terms do not imply any licenses other than those expressly granted in these terms.
-
-**Termination**
-If you use the software in violation of these terms, such use is not licensed, and your licenses will automatically terminate. If the licensor provides you with a notice of your violation, and you cease all violation of this license no later than 30 days after you receive that notice, your licenses will be reinstated retroactively. However, if you violate these terms after such reinstatement, any additional violation of these terms will cause your licenses to terminate automatically and permanently.
-
-**No Liability**
-As far as the law allows, the software comes as is, without any warranty or condition, and the licensor will not be liable to you for any damages arising out of these terms or the use or nature of the software, under any kind of legal claim.
-
-**Definitions**
-The _licensor_ is the entity offering these terms, and the _software_ is the software the licensor makes available under these terms, including any portion of it.
-
-_you_ refers to the individual or entity agreeing to these terms.
-
-_your company_ is any legal entity, sole proprietorship, or other kind of organization that you work for, plus all organizations that have control over, are under the control of, or are under common control with that organization. _control_ means ownership of substantially all the assets of an entity, or the power to direct its management and policies by vote, contract, or otherwise. Control can be direct or indirect.
-
-_your licenses_ are all the licenses granted to you for the software under these terms.
-
-_use_ means anything you do with the software requiring one of your licenses.
-
-_trademark_ means trademarks, service marks, and similar rights.
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

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(() => {