@mastra/playground-ui 5.1.1-alpha.1 → 5.1.1-alpha.2

package/dist/index.es.js

@@ -1,10 +1,11 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useMessage, MessagePrimitive, ActionBarPrimitive, ThreadPrimitive, ComposerPrimitive, useExternalStoreRuntime, AssistantRuntimeProvider } from '@assistant-ui/react';
-import { CheckIcon as CheckIcon$1, CopyIcon, ChevronUpIcon, ArrowUp, Copy, Search, RefreshCcwIcon, ChevronRight, SortAsc, SortDesc, X, Check, ChevronUp, ChevronDown, LoaderCircle, ChevronDownIcon, ExternalLinkIcon, Footprints, CircleCheck, CircleX, Workflow, AlertCircleIcon, AlertCircle, CalendarIcon, Braces, Brackets, PlusIcon, TrashIcon, Plus, Loader2, CirclePause } from 'lucide-react';
+import { useMessage, MessagePrimitive, ActionBarPrimitive, useComposerRuntime, ComposerPrimitive, useAttachment, AttachmentPrimitive, ThreadPrimitive, useExternalStoreRuntime, CompositeAttachmentAdapter, SimpleImageAttachmentAdapter, AssistantRuntimeProvider } from '@assistant-ui/react';
+import { CheckIcon as CheckIcon$1, CopyIcon, ChevronUpIcon, X, FileIcon, CircleXIcon, Mic, PlusIcon, ArrowUp, Copy, Search, RefreshCcwIcon, ChevronRight, SortAsc, SortDesc, Check, ChevronUp, ChevronDown, LoaderCircle, ChevronDownIcon, ExternalLinkIcon, Footprints, CircleCheck, CircleX, Workflow, AlertCircleIcon, AlertCircle, CalendarIcon, Braces, Brackets, TrashIcon, Plus, Loader2, CirclePause } from 'lucide-react';
 import * as React from 'react';
 import React__default, { forwardRef, useState, useEffect, memo, useMemo, useRef, createContext, useContext, useCallback, Suspense, Fragment as Fragment$1 } from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { TooltipProvider as TooltipProvider$1 } from '@radix-ui/react-tooltip';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import { unstable_memoizeMarkdownComponents, useIsMarkdownCodeBlock, MarkdownTextPrimitive } from '@assistant-ui/react-markdown';
 import '@assistant-ui/react-markdown/styles/dot.css';
@@ -15,6 +16,8 @@ import { jsonLanguage } from '@codemirror/lang-json';
 import { tags } from '@lezer/highlight';
 import { draculaInit } from '@uiw/codemirror-theme-dracula';
 import CodeMirror from '@uiw/react-codemirror';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { useShallow } from 'zustand/shallow';
 import { RuntimeContext } from '@mastra/core/di';
 import { MastraClient } from '@mastra/client-js';
 import { create } from 'zustand';
@@ -32,7 +35,6 @@ import '@xyflow/react/dist/style.css';
 import Dagre from '@dagrejs/dagre';
 import { Highlight, themes } from 'prism-react-renderer';
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
-import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import jsonSchemaToZod from 'json-schema-to-zod';
 import { parse } from 'superjson';
@@ -3893,6 +3895,83 @@ const McpCoinIcon = (props) => /* @__PURE__ */ jsxs("svg", { width: "126", heigh
   )
 ] });
 
+const ToolCoinIcon = (props) => /* @__PURE__ */ jsxs("svg", { width: "126", height: "85", viewBox: "0 0 126 85", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M119.322 35.1641C119.322 50.36 94.1055 62.6787 62.9998 62.6787C31.894 62.6787 6.67773 50.36 6.67773 35.1641V49.8368C6.67773 65.0327 31.894 77.3514 62.9998 77.3514C94.1055 77.3514 119.322 65.0327 119.322 49.8368V35.1641Z",
+      fill: "#2E2E2E",
+      fillOpacity: "0.9"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M119.322 35.1641C119.322 50.36 94.1055 62.6787 62.9998 62.6787C31.894 62.6787 6.67773 50.36 6.67773 35.1641M119.322 35.1641C119.322 19.9681 94.1055 7.64941 62.9998 7.64941C31.894 7.64941 6.67773 19.9681 6.67773 35.1641M119.322 35.1641V49.8368C119.322 65.0327 94.1055 77.3514 62.9998 77.3514C31.894 77.3514 6.67773 65.0327 6.67773 49.8368V35.1641",
+      stroke: "#424242"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M63.0002 0.96875C28.5152 0.96875 0.55957 15.6489 0.55957 33.7578V51.2433C0.55957 69.3522 28.5152 84.0323 63.0002 84.0323C97.4853 84.0323 125.441 69.3522 125.441 51.2433V33.7578C125.441 15.6489 97.4853 0.96875 63.0002 0.96875Z",
+      stroke: "#707070"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M95.8997 32.6647C98.4806 33.9355 98.4744 36.0012 95.8997 37.2689L89.6657 40.3384C87.0848 41.6091 82.8892 41.6061 80.3146 40.3384L74.0805 37.2689C71.4996 35.9981 71.5059 33.9324 74.0805 32.6647L80.3146 29.5952C82.8955 28.3244 87.091 28.3275 89.6657 29.5952L95.8997 32.6647ZM74.0805 21.9215C76.6614 23.1923 76.6552 25.258 74.0805 26.5257L67.8465 29.5952C65.2656 30.866 61.0701 30.8629 58.4954 29.5952L52.2613 26.5257C49.6804 25.255 49.6867 23.1892 52.2613 21.9215L58.4954 18.852C61.0763 17.5813 65.2718 17.5843 67.8465 18.852L74.0805 21.9215ZM74.0805 43.4079C76.6614 44.6786 76.6552 46.7444 74.0805 48.0121L67.8465 51.0816C65.2656 52.3523 61.0701 52.3493 58.4954 51.0816L52.2613 48.0121C49.6804 46.7413 49.6867 44.6756 52.2613 43.4079L58.4954 40.3384C61.0763 39.0676 65.2718 39.0707 67.8465 40.3384L74.0805 43.4079ZM52.2613 32.6647C54.8422 33.9355 54.836 36.0012 52.2613 37.2689L46.0273 40.3384C43.4464 41.6091 39.2509 41.6061 36.6762 40.3384L30.4422 37.2689C27.8613 35.9981 27.8675 33.9324 30.4422 32.6647L36.6762 29.5952C39.2571 28.3244 43.4526 28.3275 46.0273 29.5952L52.2613 32.6647Z",
+      fill: "#A9A9A9"
+    }
+  )
+] });
+
+const AgentNetworkCoinIcon = (props) => /* @__PURE__ */ jsxs("svg", { width: "126", height: "85", viewBox: "0 0 126 85", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M119.322 35.1641C119.322 50.36 94.1055 62.6787 62.9998 62.6787C31.894 62.6787 6.67773 50.36 6.67773 35.1641V49.8368C6.67773 65.0327 31.894 77.3514 62.9998 77.3514C94.1055 77.3514 119.322 65.0327 119.322 49.8368V35.1641Z",
+      fill: "#2E2E2E",
+      fillOpacity: "0.9"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M119.322 35.1641C119.322 50.36 94.1055 62.6787 62.9998 62.6787C31.894 62.6787 6.67773 50.36 6.67773 35.1641M119.322 35.1641C119.322 19.9681 94.1055 7.64941 62.9998 7.64941C31.894 7.64941 6.67773 19.9681 6.67773 35.1641M119.322 35.1641V49.8368C119.322 65.0327 94.1055 77.3514 62.9998 77.3514C31.894 77.3514 6.67773 65.0327 6.67773 49.8368V35.1641",
+      stroke: "#424242"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M63.0002 0.96875C28.5152 0.96875 0.55957 15.6489 0.55957 33.7578V51.2433C0.55957 69.3522 28.5152 84.0323 63.0002 84.0323C97.4853 84.0323 125.441 69.3522 125.441 51.2433V33.7578C125.441 15.6489 97.4853 0.96875 63.0002 0.96875Z",
+      stroke: "#707070"
+    }
+  ),
+  /* @__PURE__ */ jsx("g", { clipPath: "url(#clip0_23333_14744)", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M79.2946 17.9539C83.0143 19.7854 83.016 22.7559 79.2979 24.5879C77.0214 25.7087 73.8794 26.1385 70.9301 25.8878L67.5296 30.2202C68.0944 30.3987 68.6321 30.6075 69.1262 30.8507C71.0847 31.815 72.0009 33.0948 71.8979 34.3581L77.2504 35.1977C77.6452 34.8727 78.1174 34.5635 78.6856 34.2835C82.4066 32.4514 88.4403 32.4485 92.1623 34.2803C95.8842 36.1128 95.8805 39.0851 92.159 40.9175C88.4373 42.7488 82.4002 42.7513 78.679 40.9191C76.7415 39.9647 75.8248 38.7009 75.9073 37.4506L70.5219 36.6045C70.1354 36.9168 69.6777 37.2145 69.1295 37.4846C68.345 37.8708 67.4527 38.1705 66.5059 38.3939L67.9312 41.984C70.1507 42.0573 72.3276 42.5087 74.0244 43.3438C77.7444 45.1754 77.7467 48.1458 74.0277 49.9778C70.3071 51.8092 64.2712 51.8095 60.551 49.9778C56.8323 48.1459 56.8351 45.1755 60.5543 43.3438C61.3581 42.9482 62.2741 42.6414 63.247 42.4167L61.8282 38.8428C59.5803 38.7777 57.3696 38.3299 55.6527 37.4846C54.1264 36.7327 53.2395 35.7882 52.9666 34.8103L43.924 34.0469C43.4596 34.6259 42.7547 35.1702 41.8041 35.6385C38.0834 37.4696 32.0473 37.4701 28.3273 35.6385C24.6089 33.8068 24.6123 30.8363 28.3306 29.0046C32.0508 27.1737 38.0806 27.1737 41.8008 29.0046C43.3459 29.7653 44.2412 30.7224 44.5033 31.7129L53.5098 32.4747C53.9742 31.8832 54.6868 31.3279 55.656 30.8507C57.6687 29.8601 60.357 29.4079 62.9902 29.4892L66.5783 24.9218C66.3174 24.8179 66.0637 24.7073 65.8212 24.5879C62.1022 22.7559 62.1045 19.7856 65.8245 17.9539C69.5447 16.1235 75.5747 16.1232 79.2946 17.9539ZM38.4299 30.6643C36.5715 29.75 33.5599 29.75 31.7015 30.6643C29.8447 31.5793 29.8414 33.0638 31.6982 33.9788C33.5565 34.8938 36.5742 34.8933 38.4332 33.9788C40.2906 33.0635 40.2883 31.5793 38.4299 30.6643ZM70.6536 45.0035C68.7951 44.0893 65.7836 44.0893 63.9251 45.0035C62.0676 45.9185 62.0647 47.4029 63.9218 48.318C65.7804 49.2332 68.7979 49.2329 70.6569 48.3181C72.5142 47.4027 72.5119 45.9185 70.6536 45.0035ZM65.7553 32.5104C63.8969 31.5961 60.8853 31.5961 59.0269 32.5104C57.1685 33.4254 57.1662 34.9096 59.0236 35.8249C60.8824 36.7402 63.8998 36.7402 65.7586 35.8249C67.616 34.9096 67.6137 33.4254 65.7553 32.5104ZM88.7915 35.94C86.9338 35.0261 83.9184 35.0264 82.0564 35.9432C80.1965 36.8601 80.1945 38.3451 82.0498 39.2594C83.9067 40.1736 86.9255 40.1738 88.7882 39.2578C90.6507 38.3407 90.649 36.8546 88.7915 35.94ZM75.9238 19.6136C74.0656 18.6995 71.0538 18.6998 69.1953 19.6136C67.3369 20.5286 67.3347 22.0129 69.192 22.9282C71.0509 23.8434 74.0682 23.8434 75.9271 22.9282C77.7836 22.0128 77.7818 20.5285 75.9238 19.6136Z",
+      fill: "#A9A9A9"
+    }
+  ) }),
+  /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "clip0_23333_14744", children: /* @__PURE__ */ jsx(
+    "rect",
+    {
+      width: "59.3185",
+      height: "59.3185",
+      fill: "white",
+      transform: "matrix(0.897148 0.441731 -0.897148 0.441731 65.3042 6.51953)"
+    }
+  ) }) })
+] });
+
 const useCodemirrorTheme$1 = () => {
   return useMemo(
     () => draculaInit({
@@ -3989,8 +4068,156 @@ const AssistantActionBar = () => {
   );
 };
 
+const Dialog = DialogPrimitive.Root;
+const DialogTrigger = DialogPrimitive.Trigger;
+const DialogPortal = DialogPrimitive.Portal;
+const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Overlay,
+  {
+    ref,
+    className: cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    ),
+    ...props
+  }
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
+  /* @__PURE__ */ jsx(DialogOverlay, {}),
+  /* @__PURE__ */ jsxs(
+    DialogPrimitive.Content,
+    {
+      ref,
+      className: cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
+          /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+        ] })
+      ]
+    }
+  )
+] }));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+const DialogTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Title,
+  {
+    ref,
+    className: cn("text-lg font-semibold leading-none tracking-tight", className),
+    ...props
+  }
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+const DialogDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Description, { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+const useHasAttachments = () => {
+  const composer = useComposerRuntime();
+  const [hasAttachments, setHasAttachments] = useState(false);
+  useEffect(() => {
+    composer.subscribe(() => {
+      const attachments = composer.getState().attachments;
+      setHasAttachments(attachments.length > 0);
+    });
+  }, [composer]);
+  return hasAttachments;
+};
+
+const useFileSrc = (file) => {
+  const [src, setSrc] = useState(void 0);
+  useEffect(() => {
+    if (!file) {
+      setSrc(void 0);
+      return;
+    }
+    const objectUrl = URL.createObjectURL(file);
+    setSrc(objectUrl);
+    return () => {
+      URL.revokeObjectURL(objectUrl);
+    };
+  }, [file]);
+  return src;
+};
+const useAttachmentSrc = () => {
+  const { file, src } = useAttachment(
+    useShallow((a) => {
+      if (a.type !== "image") return {};
+      if (a.file) return { file: a.file };
+      const src2 = a.content?.filter((c) => c.type === "image")[0]?.image;
+      if (!src2) return {};
+      return { src: src2 };
+    })
+  );
+  return useFileSrc(file) ?? src;
+};
+const AttachmentPreview = ({ src }) => {
+  return /* @__PURE__ */ jsx("div", { className: "overflow-hidden w-full", children: /* @__PURE__ */ jsx("img", { src, className: "object-contain aspect-ratio h-full w-full", alt: "Preview" }) });
+};
+const AttachmentPreviewDialog = ({ children }) => {
+  const src = useAttachmentSrc();
+  if (!src) return children;
+  return /* @__PURE__ */ jsxs(Dialog, { children: [
+    /* @__PURE__ */ jsx(DialogTrigger, { className: "hover:bg-accent/50 cursor-pointer transition-colors", asChild: true, children }),
+    /* @__PURE__ */ jsxs(DialogPortal, { children: [
+      /* @__PURE__ */ jsx(DialogOverlay, {}),
+      /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-5xl w-full max-h-[80%]", children: [
+        /* @__PURE__ */ jsx(DialogTitle, { className: "aui-sr-only", children: "Image Attachment Preview" }),
+        /* @__PURE__ */ jsx(AttachmentPreview, { src })
+      ] })
+    ] })
+  ] });
+};
+const AttachmentThumbnail = () => {
+  const isImage = useAttachment((a) => a.type === "image");
+  const src = useAttachmentSrc();
+  const canRemove = useAttachment((a) => a.source !== "message");
+  return /* @__PURE__ */ jsx(TooltipProvider$1, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsxs(AttachmentPrimitive.Root, { className: "relative", children: [
+      /* @__PURE__ */ jsx(AttachmentPreviewDialog, { children: /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: "h-full w-full aspect-ratio overflow-hidden rounded-lg", children: isImage ? /* @__PURE__ */ jsx("div", { className: "rounded-lg border-sm border-border1 overflow-hidden", children: /* @__PURE__ */ jsx("img", { src, className: "object-cover aspect-ratio size-16", alt: "Preview", height: 64, width: 64 }) }) : /* @__PURE__ */ jsx("div", { className: "rounded-lg border-sm border-border1 flex items-center justify-center", children: /* @__PURE__ */ jsx(FileIcon, { className: "text-icon3" }) }) }) }) }),
+      canRemove && /* @__PURE__ */ jsx(AttachmentRemove, {})
+    ] }),
+    /* @__PURE__ */ jsx(TooltipContent, { side: "top", children: /* @__PURE__ */ jsx(AttachmentPrimitive.Name, {}) })
+  ] }) });
+};
+const AttachmentRemove = () => {
+  return /* @__PURE__ */ jsx(AttachmentPrimitive.Remove, { asChild: true, children: /* @__PURE__ */ jsx(
+    TooltipIconButton,
+    {
+      tooltip: "Remove file",
+      className: "absolute -right-3 -top-3 hover:bg-transparent rounded-full bg-surface1 rounded-full p-1",
+      side: "top",
+      children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(CircleXIcon, {}) })
+    }
+  ) });
+};
+const UserMessageAttachments = () => {
+  return /* @__PURE__ */ jsx(MessagePrimitive.Attachments, { components: { Attachment: InMessageAttachment } });
+};
+const InMessageAttachment = () => {
+  const isImage = useAttachment((a) => a.type === "image");
+  const src = useAttachmentSrc();
+  return /* @__PURE__ */ jsx(TooltipProvider$1, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(AttachmentPrimitive.Root, { className: "relative pt-4", children: /* @__PURE__ */ jsx(AttachmentPreviewDialog, { children: /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: "h-full w-full aspect-ratio overflow-hidden rounded-lg", children: isImage ? /* @__PURE__ */ jsx("div", { className: "rounded-lg border-sm border-border1 overflow-hidden", children: /* @__PURE__ */ jsx("img", { src, className: "object-cover aspect-ratio max-h-[140px] max-w-[320px]", alt: "Preview" }) }) : /* @__PURE__ */ jsx("div", { className: "rounded-lg border-sm border-border1 flex items-center justify-center", children: /* @__PURE__ */ jsx(FileIcon, { className: "text-icon3" }) }) }) }) }) }),
+    /* @__PURE__ */ jsx(TooltipContent, { side: "top", children: /* @__PURE__ */ jsx(AttachmentPrimitive.Name, {}) })
+  ] }) });
+};
+const ComposerAttachments = () => {
+  const hasAttachments = useHasAttachments();
+  if (!hasAttachments) return null;
+  return /* @__PURE__ */ jsx("div", { className: "flex w-full flex-row items-center gap-4 h-24", children: /* @__PURE__ */ jsx(ComposerPrimitive.Attachments, { components: { Attachment: AttachmentThumbnail } }) });
+};
+
 const UserMessage = () => {
-  return /* @__PURE__ */ jsx(MessagePrimitive.Root, { className: "w-full flex justify-end pb-4", children: /* @__PURE__ */ jsx("div", { className: "max-w-[366px] px-5 py-3 text-icon6 text-ui-lg leading-ui-lg rounded-lg bg-surface3", children: /* @__PURE__ */ jsx(MessagePrimitive.Content, {}) }) });
+  return /* @__PURE__ */ jsxs(MessagePrimitive.Root, { className: "w-full flex items-end pb-4 flex-col", children: [
+    /* @__PURE__ */ jsx("div", { className: "max-w-[366px] px-5 py-3 text-icon6 text-ui-lg leading-ui-lg rounded-lg bg-surface3", children: /* @__PURE__ */ jsx(MessagePrimitive.Content, {}) }),
+    /* @__PURE__ */ jsx(UserMessageAttachments, {})
+  ] });
 };
 
 const useAutoscroll = (ref, { enabled = true }) => {
@@ -4045,13 +4272,63 @@ const Txt = ({ as: Root = "p", className, variant = "ui-md", font, ...props }) =
   return /* @__PURE__ */ jsx(Root, { className: clsx(variants[variant], font && fonts[font], className), ...props });
 };
 
-const Thread = ({ ToolFallback, agentName, hasMemory }) => {
+const useSpeechRecognition = ({ language = "en-US" } = {}) => {
+  const speechRecognitionRef = useRef(null);
+  const [state, setState] = useState({
+    isListening: false,
+    transcript: "",
+    error: null
+  });
+  const start = () => {
+    if (!speechRecognitionRef.current) return;
+    speechRecognitionRef.current.start();
+  };
+  const stop = () => {
+    if (!speechRecognitionRef.current) return;
+    speechRecognitionRef.current.stop();
+  };
+  useEffect(() => {
+    if (!("webkitSpeechRecognition" in window) && !("SpeechRecognition" in window)) {
+      setState((prev) => ({ ...prev, error: "Speech Recognition not supported in this browser" }));
+      return;
+    }
+    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+    const recognition = new SpeechRecognition();
+    speechRecognitionRef.current = recognition;
+    recognition.continuous = true;
+    recognition.lang = language;
+    recognition.onstart = () => {
+      setState((prev) => ({ ...prev, isListening: true }));
+    };
+    recognition.onresult = (event) => {
+      let finalTranscript = "";
+      for (let i = event.resultIndex; i < event.results.length; i++) {
+        const transcript = event.results[i][0].transcript;
+        if (event.results[i].isFinal) {
+          finalTranscript += transcript + " ";
+        }
+      }
+      setState((prev) => ({ ...prev, transcript: finalTranscript }));
+    };
+    recognition.onerror = (event) => {
+      setState((prev) => ({ ...prev, error: `Error: ${event.error}` }));
+    };
+    recognition.onend = () => setState((prev) => ({ ...prev, isListening: false }));
+  }, [language]);
+  return {
+    ...state,
+    start,
+    stop
+  };
+};
+
+const Thread = ({ ToolFallback, agentName, hasMemory, showFileSupport }) => {
   const areaRef = useRef(null);
   useAutoscroll(areaRef, { enabled: true });
   const WrappedAssistantMessage = (props) => {
     return /* @__PURE__ */ jsx(AssistantMessage, { ...props, ToolFallback });
   };
-  return /* @__PURE__ */ jsxs(ThreadPrimitive.Root, { className: "max-w-[568px] w-full mx-auto h-[calc(100%-110px)] px-4", children: [
+  return /* @__PURE__ */ jsxs(ThreadWrapper, { children: [
     /* @__PURE__ */ jsxs(ThreadPrimitive.Viewport, { className: "py-10 overflow-y-auto scroll-smooth h-full", ref: areaRef, autoScroll: false, children: [
       /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx(ThreadWelcome, { agentName }),
@@ -4068,9 +4345,22 @@ const Thread = ({ ToolFallback, agentName, hasMemory }) => {
       ] }),
       /* @__PURE__ */ jsx(ThreadPrimitive.If, { empty: false, children: /* @__PURE__ */ jsx("div", {}) })
     ] }),
-    /* @__PURE__ */ jsx(Composer, { hasMemory })
+    /* @__PURE__ */ jsx(Composer, { hasMemory, showFileSupport })
   ] });
 };
+const ThreadWrapper = ({ children }) => {
+  const hasAttachments = useHasAttachments();
+  return /* @__PURE__ */ jsx(
+    ThreadPrimitive.Root,
+    {
+      className: clsx(
+        "max-w-[568px] w-full mx-auto px-4",
+        hasAttachments ? "h-[calc(100%-208px)]" : "h-[calc(100%-112px)]"
+      ),
+      children
+    }
+  );
+};
 const ThreadWelcome = ({ agentName }) => {
   const safeAgentName = agentName ?? "";
   const words = safeAgentName.split(" ") ?? [];
@@ -4087,20 +4377,26 @@ const ThreadWelcome = ({ agentName }) => {
     /* @__PURE__ */ jsx("p", { className: "mt-4 font-medium", children: "How can I help you today?" })
   ] }) });
 };
-const Composer = ({ hasMemory }) => {
+const Composer = ({ hasMemory, showFileSupport }) => {
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsxs(ComposerPrimitive.Root, { className: "w-full bg-surface3 rounded-lg border-sm border-border1 px-3 py-4 mt-auto h-[100px]", children: [
-      /* @__PURE__ */ jsx(ComposerPrimitive.Input, { asChild: true, className: "w-full", children: /* @__PURE__ */ jsx(
-        "textarea",
-        {
-          className: "text-ui-lg leading-ui-lg placeholder:text-icon3 text-icon6 bg-transparent focus:outline-none resize-none",
-          autoFocus: true,
-          placeholder: "Enter your message...",
-          name: "",
-          id: ""
-        }
-      ) }),
-      /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(ComposerAction, {}) })
+    /* @__PURE__ */ jsxs(ComposerPrimitive.Root, { children: [
+      /* @__PURE__ */ jsx(ComposerAttachments, {}),
+      /* @__PURE__ */ jsxs("div", { className: "w-full bg-surface3 rounded-lg border-sm border-border1 px-3 py-4 mt-auto h-[100px]", children: [
+        /* @__PURE__ */ jsx(ComposerPrimitive.Input, { asChild: true, className: "w-full", children: /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            className: "text-ui-lg leading-ui-lg placeholder:text-icon3 text-icon6 bg-transparent focus:outline-none resize-none",
+            autoFocus: true,
+            placeholder: "Enter your message...",
+            name: "",
+            id: ""
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
+          /* @__PURE__ */ jsx(SpeechInput, {}),
+          /* @__PURE__ */ jsx(ComposerAction, { showFileSupport })
+        ] })
+      ] })
     ] }),
     !hasMemory && /* @__PURE__ */ jsxs(Txt, { variant: "ui-sm", className: "text-icon3 flex items-center gap-2 pt-0.5", children: [
       /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(InfoIcon, {}) }),
@@ -4108,8 +4404,28 @@ const Composer = ({ hasMemory }) => {
     ] })
   ] });
 };
-const ComposerAction = () => {
+const SpeechInput = () => {
+  const composerRuntime = useComposerRuntime();
+  const { start, stop, isListening, transcript } = useSpeechRecognition();
+  useEffect(() => {
+    if (!transcript) return;
+    composerRuntime.setText(transcript);
+  }, [composerRuntime, transcript]);
+  return /* @__PURE__ */ jsx(
+    TooltipIconButton,
+    {
+      type: "button",
+      tooltip: isListening ? "Stop dictation" : "Start dictation",
+      variant: "ghost",
+      className: "rounded-full",
+      onClick: () => isListening ? stop() : start(),
+      children: isListening ? /* @__PURE__ */ jsx(CircleStopIcon, {}) : /* @__PURE__ */ jsx(Mic, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" })
+    }
+  );
+};
+const ComposerAction = ({ showFileSupport }) => {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
+    showFileSupport && /* @__PURE__ */ jsx(ComposerPrimitive.AddAttachment, { asChild: true, children: /* @__PURE__ */ jsx(TooltipIconButton, { tooltip: "Add attachment", variant: "ghost", className: "rounded-full", children: /* @__PURE__ */ jsx(PlusIcon, { className: "h-6 w-6 text-[#898989] hover:text-[#fff]" }) }) }),
     /* @__PURE__ */ jsx(ThreadPrimitive.If, { running: false, children: /* @__PURE__ */ jsx(ComposerPrimitive.Send, { asChild: true, children: /* @__PURE__ */ jsx(
       TooltipIconButton,
       {
@@ -4143,9 +4459,40 @@ const createMastraClient = (baseUrl) => {
   });
 };
 
+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 convertMessage$1 = (message) => {
   return message;
 };
+const convertToAIAttachments = async (attachments) => {
+  const promises = attachments.filter((attachment) => attachment.file).map(async (attachment) => ({
+    role: "user",
+    content: [
+      {
+        type: "image",
+        image: await fileToBase64(attachment.file),
+        mimeType: attachment.file.type
+      }
+    ]
+  }));
+  return Promise.all(promises);
+};
 function MastraRuntimeProvider({
   children,
   agentId,
@@ -4198,8 +4545,12 @@ function MastraRuntimeProvider({
   const agent = mastra.getAgent(agentId);
   const onNew = async (message) => {
     if (message.content[0]?.type !== "text") throw new Error("Only text messages are supported");
+    const attachments = await convertToAIAttachments(message.attachments);
     const input = message.content[0].text;
-    setMessages((currentConversation) => [...currentConversation, { role: "user", content: input }]);
+    setMessages((currentConversation) => [
+      ...currentConversation,
+      { role: "user", content: input, attachments: message.attachments }
+    ]);
     setIsRunning(true);
     try {
       if (chatWithGenerate) {
@@ -4208,7 +4559,8 @@ function MastraRuntimeProvider({
             {
               role: "user",
               content: input
-            }
+            },
+            ...attachments
           ],
           runId: agentId,
           frequencyPenalty,
@@ -4317,7 +4669,8 @@ function MastraRuntimeProvider({
             {
               role: "user",
               content: input
-            }
+            },
+            ...attachments
           ],
           runId: agentId,
           frequencyPenalty,
@@ -4438,7 +4791,10 @@ function MastraRuntimeProvider({
     isRunning,
     messages,
     convertMessage: convertMessage$1,
-    onNew
+    onNew,
+    adapters: {
+      attachments: new CompositeAttachmentAdapter([new SimpleImageAttachmentAdapter()])
+    }
   });
   return /* @__PURE__ */ jsxs(AssistantRuntimeProvider, { runtime, children: [
     " ",
@@ -4520,7 +4876,8 @@ const AgentChat = ({
   initialMessages,
   memory,
   baseUrl,
-  refreshThreadList
+  refreshThreadList,
+  showFileSupport
 }) => {
   const { modelSettings, chatWithGenerate } = useContext(AgentContext);
   const { runtimeContext } = usePlaygroundStore();
@@ -4537,7 +4894,7 @@ const AgentChat = ({
       modelSettings,
       chatWithGenerate,
       runtimeContext,
-      children: /* @__PURE__ */ jsx("div", { className: "h-full pb-4 bg-surface1", children: /* @__PURE__ */ jsx(Thread, { agentName: agentName ?? "", hasMemory: memory }) })
+      children: /* @__PURE__ */ jsx("div", { className: "h-full pb-4 bg-surface1", children: /* @__PURE__ */ jsx(Thread, { agentName: agentName ?? "", hasMemory: memory, showFileSupport }) })
     }
   );
 };
@@ -7199,54 +7556,6 @@ const Collapsible = CollapsiblePrimitive.Root;
 const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
 const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
 
-const Dialog = DialogPrimitive.Root;
-const DialogPortal = DialogPrimitive.Portal;
-const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  DialogPrimitive.Overlay,
-  {
-    ref,
-    className: cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
-    ),
-    ...props
-  }
-));
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
-  /* @__PURE__ */ jsx(DialogOverlay, {}),
-  /* @__PURE__ */ jsxs(
-    DialogPrimitive.Content,
-    {
-      ref,
-      className: cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className
-      ),
-      ...props,
-      children: [
-        children,
-        /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
-          /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
-        ] })
-      ]
-    }
-  )
-] }));
-DialogContent.displayName = DialogPrimitive.Content.displayName;
-const DialogTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  DialogPrimitive.Title,
-  {
-    ref,
-    className: cn("text-lg font-semibold leading-none tracking-tight", className),
-    ...props
-  }
-));
-DialogTitle.displayName = DialogPrimitive.Title.displayName;
-const DialogDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Description, { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
-DialogDescription.displayName = DialogPrimitive.Description.displayName;
-
 const ScrollArea = React.forwardRef(
   ({ className, children, viewPortClassName, maxHeight, autoScroll = false, ...props }, ref) => {
     const areaRef = React.useRef(null);
@@ -9391,5 +9700,5 @@ const useTraces = (componentName, baseUrl, isWorkflow = false) => {
   return { traces, firstCallLoading, error };
 };
 
-export { AgentChat, AgentCoinIcon, AgentContext, AgentEvals, AgentIcon, AgentProvider, AgentTraces, AiIcon, ApiIcon, Badge$1 as Badge, BranchIcon, Breadcrumb, Button, Cell, CheckIcon, ChevronIcon, CommitIcon, CrossIcon, Crumb, DarkLogo, DataTable, DateTimeCell, DbIcon, DebugIcon, DeploymentIcon, DividerIcon, DocsIcon, DynamicForm, EmptyState, Entity, EntityContent, EntityDescription, EntityIcon, EntityName, EntryCell, EnvIcon, EvaluatorCoinIcon, FiltersIcon, FolderIcon, GithubCoinIcon, GithubIcon, GoogleIcon, Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, Icon, InfoIcon, JudgeIcon, LatencyIcon, LegacyWorkflowGraph, LegacyWorkflowTrigger, LogsIcon, MastraResizablePanel, McpCoinIcon, McpServerIcon, MemoryIcon, NetworkChat, NetworkContext, NetworkProvider, OpenAIIcon, PromptIcon, RepoIcon, Row, ScoreIcon, SettingsIcon, SlashIcon, Table, Tbody, Th, Thead, ThreadDeleteButton, ThreadItem, ThreadLink, ThreadList, Threads, ToolsIcon, TraceContext, TraceIcon, TraceProvider, TsIcon, Txt, TxtCell, UnitCell, VariablesIcon, WorkflowCoinIcon, WorkflowGraph, WorkflowIcon, WorkflowRunContext, WorkflowRunProvider, WorkflowTraces, WorkflowTrigger, refineTraces, usePlaygroundStore, usePolling, useTraces };
+export { AgentChat, AgentCoinIcon, AgentContext, AgentEvals, AgentIcon, AgentNetworkCoinIcon, AgentProvider, AgentTraces, AiIcon, ApiIcon, Badge$1 as Badge, BranchIcon, Breadcrumb, Button, Cell, CheckIcon, ChevronIcon, CommitIcon, CrossIcon, Crumb, DarkLogo, DataTable, DateTimeCell, DbIcon, DebugIcon, DeploymentIcon, DividerIcon, DocsIcon, DynamicForm, EmptyState, Entity, EntityContent, EntityDescription, EntityIcon, EntityName, EntryCell, EnvIcon, EvaluatorCoinIcon, FiltersIcon, FolderIcon, GithubCoinIcon, GithubIcon, GoogleIcon, Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, Icon, InfoIcon, JudgeIcon, LatencyIcon, LegacyWorkflowGraph, LegacyWorkflowTrigger, LogsIcon, MastraResizablePanel, McpCoinIcon, McpServerIcon, MemoryIcon, NetworkChat, NetworkContext, NetworkProvider, OpenAIIcon, PromptIcon, RepoIcon, Row, ScoreIcon, SettingsIcon, SlashIcon, Table, Tbody, Th, Thead, ThreadDeleteButton, ThreadItem, ThreadLink, ThreadList, Threads, ToolCoinIcon, ToolsIcon, TraceContext, TraceIcon, TraceProvider, TsIcon, Txt, TxtCell, UnitCell, VariablesIcon, WorkflowCoinIcon, WorkflowGraph, WorkflowIcon, WorkflowRunContext, WorkflowRunProvider, WorkflowTraces, WorkflowTrigger, refineTraces, usePlaygroundStore, usePolling, useSpeechRecognition, useTraces };
 //# sourceMappingURL=index.es.js.map