@assistant-ui/react 0.5.76 → 0.5.77

package/dist/index.mjs

@@ -1438,9 +1438,9 @@ var useIsHoveringRef = () => {
   );
   return useManagedRef(callbackRef);
 };
-var MessagePrimitiveRoot = forwardRef12((props, forwardRef35) => {
+var MessagePrimitiveRoot = forwardRef12((props, forwardRef36) => {
   const isHoveringRef = useIsHoveringRef();
-  const ref = useComposedRefs(forwardRef35, isHoveringRef);
+  const ref = useComposedRefs(forwardRef36, isHoveringRef);
   return /* @__PURE__ */ jsx18(Primitive9.div, { ...props, ref });
 });
 MessagePrimitiveRoot.displayName = "MessagePrimitive.Root";
@@ -5562,15 +5562,15 @@ var assistant_message_default = Object.assign(
 );
 
 // src/ui/assistant-modal.tsx
-import { forwardRef as forwardRef34 } from "react";
+import { forwardRef as forwardRef35 } from "react";
 import { BotIcon, ChevronDownIcon } from "lucide-react";
 
 // src/ui/thread.tsx
-import { forwardRef as forwardRef33 } from "react";
+import { forwardRef as forwardRef34 } from "react";
 import { ArrowDownIcon } from "lucide-react";
 
 // src/ui/composer.tsx
-import { forwardRef as forwardRef28 } from "react";
+import { forwardRef as forwardRef29 } from "react";
 import { PaperclipIcon, SendHorizontalIcon } from "lucide-react";
 
 // src/ui/base/CircleStopIcon.tsx
@@ -5590,15 +5590,117 @@ var CircleStopIcon = () => {
 };
 CircleStopIcon.displayName = "CircleStopIcon";
 
-// src/ui/composer-attachment.tsx
-import { forwardRef as forwardRef27 } from "react";
-import { CircleXIcon } from "lucide-react";
+// src/ui/attachment.tsx
+import {
+  forwardRef as forwardRef28,
+  useEffect as useEffect15,
+  useState as useState14
+} from "react";
+import { CircleXIcon, FileIcon } from "lucide-react";
+
+// src/ui/base/dialog.tsx
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import classNames3 from "classnames";
 import { jsx as jsx45, jsxs as jsxs8 } from "react/jsx-runtime";
-var ComposerAttachmentRoot = withDefaults(attachment_exports.Root, {
+var Dialog = DialogPrimitive.Root;
+var DialogTrigger = DialogPrimitive.Trigger;
+var DialogPortal = DialogPrimitive.Portal;
+var DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx45(
+  DialogPrimitive.Overlay,
+  {
+    ref,
+    className: classNames3("aui-dialog-overlay", className),
+    ...props
+  }
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+var DialogContent = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs8(DialogPortal, { children: [
+  /* @__PURE__ */ jsx45(DialogOverlay, {}),
+  /* @__PURE__ */ jsx45(
+    DialogPrimitive.Content,
+    {
+      ref,
+      className: classNames3("aui-dialog-content", className),
+      ...props,
+      children
+    }
+  )
+] }));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+// src/ui/attachment.tsx
+import { AvatarFallback as AvatarFallback2 } from "@radix-ui/react-avatar";
+import { jsx as jsx46, jsxs as jsxs9 } from "react/jsx-runtime";
+var AttachmentRoot = withDefaults(attachment_exports.Root, {
   className: "aui-attachment-root"
 });
-ComposerAttachmentRoot.displayName = "ComposerAttachmentRoot";
-var ComposerAttachment2 = () => {
+AttachmentRoot.displayName = "AttachmentRoot";
+var useFileSrc = (file) => {
+  const [src, setSrc] = useState14(void 0);
+  useEffect15(() => {
+    if (!file) {
+      setSrc(void 0);
+      return;
+    }
+    const objectUrl = URL.createObjectURL(file);
+    setSrc(objectUrl);
+    return () => {
+      URL.revokeObjectURL(objectUrl);
+    };
+  }, [file]);
+  return src;
+};
+var useAttachmentSrc = () => {
+  const { file, src } = useAttachment((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;
+};
+var AttachmentPreview = ({ src }) => {
+  const [isLoaded, setIsLoaded] = useState14(false);
+  return (
+    // eslint-disable-next-line @next/next/no-img-element
+    /* @__PURE__ */ jsx46(
+      "img",
+      {
+        src,
+        style: {
+          width: "auto",
+          height: "auto",
+          maxWidth: "75dvh",
+          maxHeight: "75dvh",
+          display: isLoaded ? "block" : "none",
+          overflow: "clip"
+        },
+        onLoad: () => setIsLoaded(true),
+        alt: "Image Preview"
+      }
+    )
+  );
+};
+var AttachmentPreviewDialog = ({ children }) => {
+  const src = useAttachmentSrc();
+  if (!src) return children;
+  return /* @__PURE__ */ jsxs9(Dialog, { children: [
+    /* @__PURE__ */ jsx46(DialogTrigger, { className: "aui-attachment-preview-trigger", asChild: true, children }),
+    /* @__PURE__ */ jsx46(DialogContent, { children: /* @__PURE__ */ jsx46(AttachmentPreview, { src }) })
+  ] });
+};
+var AttachmentThumb = () => {
+  const isImage = useAttachment((a) => a.type === "image");
+  const src = useAttachmentSrc();
+  return /* @__PURE__ */ jsxs9(AvatarRoot, { className: "aui-attachment-thumb", children: [
+    /* @__PURE__ */ jsx46(AvatarFallback2, { delayMs: isImage ? 200 : 0, children: /* @__PURE__ */ jsx46(FileIcon, {}) }),
+    /* @__PURE__ */ jsx46(AvatarImage, { src })
+  ] });
+};
+var Attachment = () => {
+  const canRemove = useAttachment((a) => a.source !== "message");
   const typeLabel = useAttachment((a) => {
     const type = a.type;
     switch (type) {
@@ -5613,46 +5715,46 @@ var ComposerAttachment2 = () => {
         throw new Error(`Unknown attachment type: ${_exhaustiveCheck}`);
     }
   });
-  return /* @__PURE__ */ jsxs8(ComposerAttachmentRoot, { children: [
-    /* @__PURE__ */ jsx45(attachment_exports.unstable_Thumb, { className: "aui-attachment-thumb" }),
-    /* @__PURE__ */ jsxs8("div", { className: "aui-attachment-text", children: [
-      /* @__PURE__ */ jsx45("p", { className: "aui-attachment-name", children: /* @__PURE__ */ jsx45(attachment_exports.Name, {}) }),
-      /* @__PURE__ */ jsx45("p", { className: "aui-attachment-type", children: typeLabel })
-    ] }),
-    /* @__PURE__ */ jsx45(ComposerAttachmentRemove, {})
+  return /* @__PURE__ */ jsxs9(Tooltip, { children: [
+    /* @__PURE__ */ jsx46(AttachmentPreviewDialog, { children: /* @__PURE__ */ jsx46(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs9(AttachmentRoot, { children: [
+      /* @__PURE__ */ jsx46(AttachmentThumb, {}),
+      /* @__PURE__ */ jsxs9("div", { className: "aui-attachment-text", children: [
+        /* @__PURE__ */ jsx46("p", { className: "aui-attachment-name", children: /* @__PURE__ */ jsx46(attachment_exports.Name, {}) }),
+        /* @__PURE__ */ jsx46("p", { className: "aui-attachment-type", children: typeLabel })
+      ] }),
+      canRemove && /* @__PURE__ */ jsx46(AttachmentRemove, {})
+    ] }) }) }),
+    /* @__PURE__ */ jsx46(TooltipContent, { side: "top", children: /* @__PURE__ */ jsx46(attachment_exports.Name, {}) })
   ] });
 };
-ComposerAttachment2.displayName = "ComposerAttachment";
-var ComposerAttachmentRemove = forwardRef27((props, ref) => {
+Attachment.displayName = "Attachment";
+var AttachmentRemove = forwardRef28((props, ref) => {
   const {
     strings: {
       composer: { removeAttachment: { tooltip = "Remove file" } = {} } = {}
     } = {}
   } = useThreadConfig();
-  return /* @__PURE__ */ jsx45(attachment_exports.Remove, { asChild: true, children: /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx46(attachment_exports.Remove, { asChild: true, children: /* @__PURE__ */ jsx46(
     TooltipIconButton,
     {
       tooltip,
-      className: "aui-composer-attachment-remove",
+      className: "aui-attachment-remove",
       side: "top",
       ...props,
       ref,
-      children: props.children ?? /* @__PURE__ */ jsx45(CircleXIcon, {})
+      children: props.children ?? /* @__PURE__ */ jsx46(CircleXIcon, {})
     }
   ) });
 });
-ComposerAttachmentRemove.displayName = "ComposerAttachmentRemove";
+AttachmentRemove.displayName = "AttachmentRemove";
 var exports5 = {
-  Root: ComposerAttachmentRoot,
-  Remove: ComposerAttachmentRemove
+  Root: AttachmentRoot,
+  Remove: AttachmentRemove
 };
-var composer_attachment_default = Object.assign(
-  ComposerAttachment2,
-  exports5
-);
+var attachment_default = Object.assign(Attachment, exports5);
 
 // src/ui/composer.tsx
-import { Fragment as Fragment6, jsx as jsx46, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx47, jsxs as jsxs10 } from "react/jsx-runtime";
 var useAllowAttachments = (ensureCapability = false) => {
   const { composer: { allowAttachments = true } = {} } = useThreadConfig();
   const attachmentsSupported = useThread((t) => t.capabilities.attachments);
@@ -5660,11 +5762,11 @@ var useAllowAttachments = (ensureCapability = false) => {
 };
 var Composer = () => {
   const allowAttachments = useAllowAttachments(true);
-  return /* @__PURE__ */ jsxs9(ComposerRoot, { children: [
-    allowAttachments && /* @__PURE__ */ jsx46(ComposerAttachments, {}),
-    allowAttachments && /* @__PURE__ */ jsx46(ComposerAddAttachment, {}),
-    /* @__PURE__ */ jsx46(ComposerInput, { autoFocus: true }),
-    /* @__PURE__ */ jsx46(ComposerAction, {})
+  return /* @__PURE__ */ jsxs10(ComposerRoot, { children: [
+    allowAttachments && /* @__PURE__ */ jsx47(ComposerAttachments, {}),
+    allowAttachments && /* @__PURE__ */ jsx47(ComposerAddAttachment, {}),
+    /* @__PURE__ */ jsx47(ComposerInput, { autoFocus: true }),
+    /* @__PURE__ */ jsx47(ComposerAction, {})
   ] });
 };
 Composer.displayName = "Composer";
@@ -5677,14 +5779,14 @@ var ComposerInputStyled = withDefaults(composer_exports.Input, {
   autoFocus: true,
   className: "aui-composer-input"
 });
-var ComposerInput = forwardRef28(
+var ComposerInput = forwardRef29(
   (props, ref) => {
     const {
       strings: {
         composer: { input: { placeholder = "Write a message..." } = {} } = {}
       } = {}
     } = useThreadConfig();
-    return /* @__PURE__ */ jsx46(ComposerInputStyled, { placeholder, ...props, ref });
+    return /* @__PURE__ */ jsx47(ComposerInputStyled, { placeholder, ...props, ref });
   }
 );
 ComposerInput.displayName = "ComposerInput";
@@ -5692,12 +5794,12 @@ var ComposerAttachmentsContainer = withDefaults("div", {
   className: "aui-composer-attachments"
 });
 var ComposerAttachments = ({ components }) => {
-  return /* @__PURE__ */ jsx46(ComposerAttachmentsContainer, { children: /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsx47(ComposerAttachmentsContainer, { children: /* @__PURE__ */ jsx47(
     composer_exports.Attachments,
     {
       components: {
         ...components,
-        Attachment: components?.Attachment ?? composer_attachment_default
+        Attachment: components?.Attachment ?? attachment_default
       }
     }
   ) });
@@ -5706,21 +5808,21 @@ var ComposerAttachButton = withDefaults(TooltipIconButton, {
   variant: "default",
   className: "aui-composer-attach"
 });
-var ComposerAddAttachment = forwardRef28((props, ref) => {
+var ComposerAddAttachment = forwardRef29((props, ref) => {
   const {
     strings: {
       composer: { addAttachment: { tooltip = "Attach file" } = {} } = {}
     } = {}
   } = useThreadConfig();
   const allowAttachments = useAllowAttachments();
-  return /* @__PURE__ */ jsx46(composer_exports.AddAttachment, { disabled: !allowAttachments, asChild: true, children: /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsx47(composer_exports.AddAttachment, { disabled: !allowAttachments, asChild: true, children: /* @__PURE__ */ jsx47(
     ComposerAttachButton,
     {
       tooltip,
       variant: "ghost",
       ...props,
       ref,
-      children: props.children ?? /* @__PURE__ */ jsx46(PaperclipIcon, {})
+      children: props.children ?? /* @__PURE__ */ jsx47(PaperclipIcon, {})
     }
   ) });
 });
@@ -5731,10 +5833,10 @@ var useAllowCancel = () => {
 };
 var ComposerAction = () => {
   const allowCancel = useAllowCancel();
-  if (!allowCancel) return /* @__PURE__ */ jsx46(ComposerSend, {});
-  return /* @__PURE__ */ jsxs9(Fragment6, { children: [
-    /* @__PURE__ */ jsx46(thread_exports.If, { running: false, children: /* @__PURE__ */ jsx46(ComposerSend, {}) }),
-    /* @__PURE__ */ jsx46(thread_exports.If, { running: true, children: /* @__PURE__ */ jsx46(ComposerCancel, {}) })
+  if (!allowCancel) return /* @__PURE__ */ jsx47(ComposerSend, {});
+  return /* @__PURE__ */ jsxs10(Fragment6, { children: [
+    /* @__PURE__ */ jsx47(thread_exports.If, { running: false, children: /* @__PURE__ */ jsx47(ComposerSend, {}) }),
+    /* @__PURE__ */ jsx47(thread_exports.If, { running: true, children: /* @__PURE__ */ jsx47(ComposerCancel, {}) })
   ] });
 };
 ComposerAction.displayName = "ComposerAction";
@@ -5742,12 +5844,12 @@ var ComposerSendButton = withDefaults(TooltipIconButton, {
   variant: "default",
   className: "aui-composer-send"
 });
-var ComposerSend = forwardRef28(
+var ComposerSend = forwardRef29(
   (props, ref) => {
     const {
       strings: { composer: { send: { tooltip = "Send" } = {} } = {} } = {}
     } = useThreadConfig();
-    return /* @__PURE__ */ jsx46(composer_exports.Send, { asChild: true, children: /* @__PURE__ */ jsx46(ComposerSendButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx46(SendHorizontalIcon, {}) }) });
+    return /* @__PURE__ */ jsx47(composer_exports.Send, { asChild: true, children: /* @__PURE__ */ jsx47(ComposerSendButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx47(SendHorizontalIcon, {}) }) });
   }
 );
 ComposerSend.displayName = "ComposerSend";
@@ -5755,12 +5857,12 @@ var ComposerCancelButton = withDefaults(TooltipIconButton, {
   variant: "default",
   className: "aui-composer-cancel"
 });
-var ComposerCancel = forwardRef28(
+var ComposerCancel = forwardRef29(
   (props, ref) => {
     const {
       strings: { composer: { cancel: { tooltip = "Cancel" } = {} } = {} } = {}
     } = useThreadConfig();
-    return /* @__PURE__ */ jsx46(composer_exports.Cancel, { asChild: true, children: /* @__PURE__ */ jsx46(ComposerCancelButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx46(CircleStopIcon, {}) }) });
+    return /* @__PURE__ */ jsx47(composer_exports.Cancel, { asChild: true, children: /* @__PURE__ */ jsx47(ComposerCancelButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx47(CircleStopIcon, {}) }) });
   }
 );
 ComposerCancel.displayName = "ComposerCancel";
@@ -5776,15 +5878,15 @@ var exports6 = {
 var composer_default = Object.assign(Composer, exports6);
 
 // src/ui/thread-welcome.tsx
-import { forwardRef as forwardRef29 } from "react";
-import { jsx as jsx47, jsxs as jsxs10 } from "react/jsx-runtime";
+import { forwardRef as forwardRef30 } from "react";
+import { jsx as jsx48, jsxs as jsxs11 } from "react/jsx-runtime";
 var ThreadWelcome = () => {
-  return /* @__PURE__ */ jsxs10(ThreadWelcomeRoot, { children: [
-    /* @__PURE__ */ jsxs10(ThreadWelcomeCenter, { children: [
-      /* @__PURE__ */ jsx47(ThreadWelcomeAvatar, {}),
-      /* @__PURE__ */ jsx47(ThreadWelcomeMessage, {})
+  return /* @__PURE__ */ jsxs11(ThreadWelcomeRoot, { children: [
+    /* @__PURE__ */ jsxs11(ThreadWelcomeCenter, { children: [
+      /* @__PURE__ */ jsx48(ThreadWelcomeAvatar, {}),
+      /* @__PURE__ */ jsx48(ThreadWelcomeMessage, {})
     ] }),
-    /* @__PURE__ */ jsx47(ThreadWelcomeSuggestions, {})
+    /* @__PURE__ */ jsx48(ThreadWelcomeSuggestions, {})
   ] });
 };
 ThreadWelcome.displayName = "ThreadWelcome";
@@ -5794,20 +5896,20 @@ var ThreadWelcomeRootStyled = withDefaults("div", {
 var ThreadWelcomeCenter = withDefaults("div", {
   className: "aui-thread-welcome-center"
 });
-var ThreadWelcomeRoot = forwardRef29((props, ref) => {
-  return /* @__PURE__ */ jsx47(thread_exports.Empty, { children: /* @__PURE__ */ jsx47(ThreadWelcomeRootStyled, { ...props, ref }) });
+var ThreadWelcomeRoot = forwardRef30((props, ref) => {
+  return /* @__PURE__ */ jsx48(thread_exports.Empty, { children: /* @__PURE__ */ jsx48(ThreadWelcomeRootStyled, { ...props, ref }) });
 });
 ThreadWelcomeRoot.displayName = "ThreadWelcomeRoot";
 var ThreadWelcomeAvatar = () => {
   const { assistantAvatar: avatar = { fallback: "A" } } = useThreadConfig();
-  return /* @__PURE__ */ jsx47(Avatar, { ...avatar });
+  return /* @__PURE__ */ jsx48(Avatar, { ...avatar });
 };
 var ThreadWelcomeMessageStyled = withDefaults("p", {
   className: "aui-thread-welcome-message"
 });
-var ThreadWelcomeMessage = forwardRef29(({ message: messageProp, ...rest }, ref) => {
+var ThreadWelcomeMessage = forwardRef30(({ message: messageProp, ...rest }, ref) => {
   const { welcome: { message = "How can I help you today?" } = {} } = useThreadConfig();
-  return /* @__PURE__ */ jsx47(ThreadWelcomeMessageStyled, { ...rest, ref, children: messageProp ?? message });
+  return /* @__PURE__ */ jsx48(ThreadWelcomeMessageStyled, { ...rest, ref, children: messageProp ?? message });
 });
 ThreadWelcomeMessage.displayName = "ThreadWelcomeMessage";
 var ThreadWelcomeSuggestionContainer = withDefaults("div", {
@@ -5819,15 +5921,15 @@ var ThreadWelcomeSuggestionStyled = withDefaults(thread_exports.Suggestion, {
 var ThreadWelcomeSuggestion = ({
   suggestion: { text, prompt }
 }) => {
-  return /* @__PURE__ */ jsx47(ThreadWelcomeSuggestionStyled, { prompt, method: "replace", autoSend: true, children: /* @__PURE__ */ jsx47("span", { className: "aui-thread-welcome-suggestion-text", children: text ?? prompt }) });
+  return /* @__PURE__ */ jsx48(ThreadWelcomeSuggestionStyled, { prompt, method: "replace", autoSend: true, children: /* @__PURE__ */ jsx48("span", { className: "aui-thread-welcome-suggestion-text", children: text ?? prompt }) });
 };
 var ThreadWelcomeSuggestions = () => {
   const suggestions2 = useThread((t) => t.suggestions);
   const { welcome: { suggestions } = {} } = useThreadConfig();
   const finalSuggestions = suggestions2.length ? suggestions2 : suggestions;
-  return /* @__PURE__ */ jsx47(ThreadWelcomeSuggestionContainer, { children: finalSuggestions?.map((suggestion, idx) => {
+  return /* @__PURE__ */ jsx48(ThreadWelcomeSuggestionContainer, { children: finalSuggestions?.map((suggestion, idx) => {
     const key = `${suggestion.prompt}-${idx}`;
-    return /* @__PURE__ */ jsx47(ThreadWelcomeSuggestion, { suggestion }, key);
+    return /* @__PURE__ */ jsx48(ThreadWelcomeSuggestion, { suggestion }, key);
   }) });
 };
 ThreadWelcomeSuggestions.displayName = "ThreadWelcomeSuggestions";
@@ -5842,12 +5944,12 @@ var exports7 = {
 var thread_welcome_default = Object.assign(ThreadWelcome, exports7);
 
 // src/ui/user-message.tsx
-import { forwardRef as forwardRef31 } from "react";
+import { forwardRef as forwardRef32 } from "react";
 
 // src/ui/user-action-bar.tsx
-import { forwardRef as forwardRef30 } from "react";
+import { forwardRef as forwardRef31 } from "react";
 import { PencilIcon } from "lucide-react";
-import { jsx as jsx48 } from "react/jsx-runtime";
+import { jsx as jsx49 } from "react/jsx-runtime";
 var useAllowEdit = (ensureCapability = false) => {
   const { userMessage: { allowEdit = true } = {} } = useThreadConfig();
   const editSupported = useThread((t) => t.capabilities.edit);
@@ -5856,19 +5958,19 @@ var useAllowEdit = (ensureCapability = false) => {
 var UserActionBar = () => {
   const allowEdit = useAllowEdit(true);
   if (!allowEdit) return null;
-  return /* @__PURE__ */ jsx48(UserActionBarRoot, { hideWhenRunning: true, autohide: "not-last", children: /* @__PURE__ */ jsx48(UserActionBarEdit, {}) });
+  return /* @__PURE__ */ jsx49(UserActionBarRoot, { hideWhenRunning: true, autohide: "not-last", children: /* @__PURE__ */ jsx49(UserActionBarEdit, {}) });
 };
 UserActionBar.displayName = "UserActionBar";
 var UserActionBarRoot = withDefaults(actionBar_exports.Root, {
   className: "aui-user-action-bar-root"
 });
 UserActionBarRoot.displayName = "UserActionBarRoot";
-var UserActionBarEdit = forwardRef30((props, ref) => {
+var UserActionBarEdit = forwardRef31((props, ref) => {
   const {
     strings: { userMessage: { edit: { tooltip = "Edit" } = {} } = {} } = {}
   } = useThreadConfig();
   const allowEdit = useAllowEdit();
-  return /* @__PURE__ */ jsx48(actionBar_exports.Edit, { disabled: !allowEdit, asChild: true, children: /* @__PURE__ */ jsx48(TooltipIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx48(PencilIcon, {}) }) });
+  return /* @__PURE__ */ jsx49(actionBar_exports.Edit, { disabled: !allowEdit, asChild: true, children: /* @__PURE__ */ jsx49(TooltipIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx49(PencilIcon, {}) }) });
 });
 UserActionBarEdit.displayName = "UserActionBarEdit";
 var exports8 = {
@@ -5877,44 +5979,6 @@ var exports8 = {
 };
 var user_action_bar_default = Object.assign(UserActionBar, exports8);
 
-// src/ui/user-message-attachment.tsx
-import { jsx as jsx49, jsxs as jsxs11 } from "react/jsx-runtime";
-var UserMessageAttachmentRoot = withDefaults(attachment_exports.Root, {
-  className: "aui-attachment-root"
-});
-UserMessageAttachmentRoot.displayName = "UserMessageAttachmentRoot";
-var UserMessageAttachment = () => {
-  const typeLabel = useAttachment((a) => {
-    const type = a.type;
-    switch (type) {
-      case "image":
-        return "Image";
-      case "document":
-        return "Document";
-      case "file":
-        return "File";
-      default:
-        const _exhaustiveCheck = type;
-        throw new Error(`Unknown attachment type: ${_exhaustiveCheck}`);
-    }
-  });
-  return /* @__PURE__ */ jsxs11(UserMessageAttachmentRoot, { children: [
-    /* @__PURE__ */ jsx49(attachment_exports.unstable_Thumb, { className: "aui-attachment-thumb" }),
-    /* @__PURE__ */ jsxs11("div", { className: "aui-attachment-text", children: [
-      /* @__PURE__ */ jsx49("p", { className: "aui-attachment-name", children: /* @__PURE__ */ jsx49(attachment_exports.Name, {}) }),
-      /* @__PURE__ */ jsx49("p", { className: "aui-attachment-type", children: typeLabel })
-    ] })
-  ] });
-};
-UserMessageAttachment.displayName = "UserMessageAttachment";
-var exports9 = {
-  Root: UserMessageAttachmentRoot
-};
-var user_message_attachment_default = Object.assign(
-  UserMessageAttachment,
-  exports9
-);
-
 // src/ui/user-message.tsx
 import { jsx as jsx50, jsxs as jsxs12 } from "react/jsx-runtime";
 var UserMessage = () => {
@@ -5935,7 +5999,7 @@ UserMessageRoot.displayName = "UserMessageRoot";
 var UserMessageContentWrapper = withDefaults("div", {
   className: "aui-user-message-content"
 });
-var UserMessageContent = forwardRef31(({ components, ...props }, ref) => {
+var UserMessageContent = forwardRef32(({ components, ...props }, ref) => {
   return /* @__PURE__ */ jsx50(UserMessageContentWrapper, { ...props, ref, children: /* @__PURE__ */ jsx50(
     message_exports.Content,
     {
@@ -5958,20 +6022,20 @@ var UserMessageAttachments = ({
     {
       components: {
         ...components,
-        Attachment: components?.Attachment ?? user_message_attachment_default
+        Attachment: components?.Attachment ?? attachment_default
       }
     }
   ) }) });
 };
-var exports10 = {
+var exports9 = {
   Root: UserMessageRoot,
   Content: UserMessageContent,
   Attachments: UserMessageAttachments
 };
-var user_message_default = Object.assign(UserMessage, exports10);
+var user_message_default = Object.assign(UserMessage, exports9);
 
 // src/ui/edit-composer.tsx
-import { forwardRef as forwardRef32 } from "react";
+import { forwardRef as forwardRef33 } from "react";
 import { jsx as jsx51, jsxs as jsxs13 } from "react/jsx-runtime";
 var EditComposer = () => {
   return /* @__PURE__ */ jsxs13(EditComposerRoot, { children: [
@@ -5995,28 +6059,28 @@ var EditComposerFooter = withDefaults("div", {
   className: "aui-edit-composer-footer"
 });
 EditComposerFooter.displayName = "EditComposerFooter";
-var EditComposerCancel = forwardRef32((props, ref) => {
+var EditComposerCancel = forwardRef33((props, ref) => {
   const {
     strings: { editComposer: { cancel: { label = "Cancel" } = {} } = {} } = {}
   } = useThreadConfig();
   return /* @__PURE__ */ jsx51(composer_exports.Cancel, { asChild: true, children: /* @__PURE__ */ jsx51(Button, { variant: "ghost", ...props, ref, children: props.children ?? label }) });
 });
 EditComposerCancel.displayName = "EditComposerCancel";
-var EditComposerSend = forwardRef32((props, ref) => {
+var EditComposerSend = forwardRef33((props, ref) => {
   const {
     strings: { editComposer: { send: { label = "Send" } = {} } = {} } = {}
   } = useThreadConfig();
   return /* @__PURE__ */ jsx51(composer_exports.Send, { asChild: true, children: /* @__PURE__ */ jsx51(Button, { ...props, ref, children: props.children ?? label }) });
 });
 EditComposerSend.displayName = "EditComposerSend";
-var exports11 = {
+var exports10 = {
   Root: EditComposerRoot,
   Input: EditComposerInput,
   Footer: EditComposerFooter,
   Cancel: EditComposerCancel,
   Send: EditComposerSend
 };
-var edit_composer_default = Object.assign(EditComposer, exports11);
+var edit_composer_default = Object.assign(EditComposer, exports10);
 
 // src/ui/thread.tsx
 import { Fragment as Fragment7, jsx as jsx52, jsxs as jsxs14 } from "react/jsx-runtime";
@@ -6040,7 +6104,7 @@ var Thread = (config) => {
 var ThreadRootStyled = withDefaults(thread_exports.Root, {
   className: "aui-root aui-thread-root"
 });
-var ThreadRoot = forwardRef33(
+var ThreadRoot = forwardRef34(
   ({ config, ...props }, ref) => {
     return /* @__PURE__ */ jsx52(ThreadConfigProvider, { config, children: /* @__PURE__ */ jsx52(ThreadRootStyled, { ...props, ref }) });
   }
@@ -6091,7 +6155,7 @@ var ThreadScrollToBottomIconButton = withDefaults(TooltipIconButton, {
   variant: "outline",
   className: "aui-thread-scroll-to-bottom"
 });
-var ThreadScrollToBottom = forwardRef33((props, ref) => {
+var ThreadScrollToBottom = forwardRef34((props, ref) => {
   const {
     strings: {
       thread: { scrollToBottom: { tooltip = "Scroll to bottom" } = {} } = {}
@@ -6100,7 +6164,7 @@ var ThreadScrollToBottom = forwardRef33((props, ref) => {
   return /* @__PURE__ */ jsx52(thread_exports.ScrollToBottom, { asChild: true, children: /* @__PURE__ */ jsx52(ThreadScrollToBottomIconButton, { tooltip, ...props, ref, children: props.children ?? /* @__PURE__ */ jsx52(ArrowDownIcon, {}) }) });
 });
 ThreadScrollToBottom.displayName = "ThreadScrollToBottom";
-var exports12 = {
+var exports11 = {
   Root: ThreadRoot,
   Viewport: ThreadViewport,
   Messages: ThreadMessages,
@@ -6108,7 +6172,7 @@ var exports12 = {
   ScrollToBottom: ThreadScrollToBottom,
   ViewportFooter: ThreadViewportFooter
 };
-var thread_default = Object.assign(Thread, exports12);
+var thread_default = Object.assign(Thread, exports11);
 
 // src/ui/assistant-modal.tsx
 import { Fragment as Fragment8, jsx as jsx53, jsxs as jsxs15 } from "react/jsx-runtime";
@@ -6126,7 +6190,7 @@ var AssistantModalRoot = ({
   return /* @__PURE__ */ jsx53(ThreadConfigProvider, { config, children: /* @__PURE__ */ jsx53(assistantModal_exports.Root, { ...props }) });
 };
 AssistantModalRoot.displayName = "AssistantModalRoot";
-var AssistantModalTrigger = forwardRef34((props, ref) => {
+var AssistantModalTrigger = forwardRef35((props, ref) => {
   return /* @__PURE__ */ jsx53(AssistantModalAnchor, { children: /* @__PURE__ */ jsx53(assistantModal_exports.Trigger, { asChild: true, children: /* @__PURE__ */ jsx53(AssistantModalButton, { ...props, ref }) }) });
 });
 AssistantModalTrigger.displayName = "AssistantModalTrigger";
@@ -6138,7 +6202,7 @@ var ModalButtonStyled = withDefaults(TooltipIconButton, {
   variant: "default",
   className: "aui-modal-button"
 });
-var AssistantModalButton = forwardRef34(({ "data-state": state, ...rest }, ref) => {
+var AssistantModalButton = forwardRef35(({ "data-state": state, ...rest }, ref) => {
   const {
     strings: {
       assistantModal: {
@@ -6185,14 +6249,14 @@ var AssistantModalContent = withDefaults(assistantModal_exports.Content, {
   sideOffset: 16
 });
 AssistantModalContent.displayName = "AssistantModalContent";
-var exports13 = {
+var exports12 = {
   Root: AssistantModalRoot,
   Trigger: AssistantModalTrigger,
   Content: AssistantModalContent,
   Button: AssistantModalButton,
   Anchor: AssistantModalAnchor
 };
-var assistant_modal_default = Object.assign(AssistantModal, exports13);
+var assistant_modal_default = Object.assign(AssistantModal, exports12);
 export {
   actionBar_exports as ActionBarPrimitive,
   assistant_action_bar_default as AssistantActionBar,
@@ -6201,10 +6265,11 @@ export {
   assistantModal_exports as AssistantModalPrimitive,
   AssistantRuntimeProvider,
   attachment_exports as AttachmentPrimitive,
+  attachment_default as AttachmentUI,
   branch_picker_default as BranchPicker,
   branchPicker_exports as BranchPickerPrimitive,
   composer_default as Composer,
-  composer_attachment_default as ComposerAttachment,
+  attachment_default as ComposerAttachment,
   composer_exports as ComposerPrimitive,
   CompositeAttachmentAdapter,
   content_part_default as ContentPart,
@@ -6222,7 +6287,7 @@ export {
   thread_welcome_default as ThreadWelcome,
   user_action_bar_default as UserActionBar,
   user_message_default as UserMessage,
-  user_message_attachment_default as UserMessageAttachment,
+  attachment_default as UserMessageAttachment,
   WebSpeechSynthesisAdapter,
   fromCoreMessage,
   fromCoreMessages,