@athenaintel/react 0.43.0 → 0.50.0

package/dist/composer/ComposerAttachmentPreview.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ComposerAttachmentPreview.cjs","sources":["../../src/composer/ComposerAttachmentPreview.tsx"],"sourcesContent":["import { Loader2Icon, PaperclipIcon, XIcon } from 'lucide-react';\nimport type { FC } from 'react';\nimport { useAttachments } from './AttachmentContext';\nimport { cn } from '../lib/utils';\n\nexport interface ComposerAttachmentPreviewProps {\n  className?: string;\n}\n\n/**\n * Renders uploaded file pills above the composer.\n * Each pill shows the file name and a dismiss button.\n */\nexport const ComposerAttachmentPreview: FC<ComposerAttachmentPreviewProps> = ({ className }) => {\n  const { attachments, isUploading, removeAttachment } = useAttachments();\n\n  if (attachments.length === 0 && !isUploading) return null;\n\n  return (\n    <div className={cn('aui-attachment-preview mx-3 mt-2 flex flex-wrap gap-1.5', className)}>\n      {attachments.map((asset) => (\n        <div\n          key={asset.id}\n          className=\"flex items-center gap-1.5 rounded-lg border border-border/60 bg-muted/40 px-2.5 py-1.5 text-xs\"\n        >\n          <PaperclipIcon className=\"size-3 shrink-0 text-muted-foreground/60\" />\n          <span className=\"max-w-[180px] truncate text-foreground/80\">{asset.title}</span>\n          <button\n            type=\"button\"\n            onClick={() => removeAttachment(asset.id)}\n            className=\"shrink-0 rounded p-0.5 text-muted-foreground hover:bg-muted hover:text-foreground transition-colors\"\n            aria-label={`Remove ${asset.title}`}\n          >\n            <XIcon className=\"size-3\" />\n          </button>\n        </div>\n      ))}\n      {isUploading ? (\n        <div className=\"flex items-center gap-1.5 rounded-lg border border-border/60 bg-muted/40 px-2.5 py-1.5 text-xs text-muted-foreground\">\n          <Loader2Icon className=\"size-3 shrink-0 animate-spin\" />\n          <span>Uploading...</span>\n        </div>\n      ) : null}\n    </div>\n  );\n};\n"],"names":["useAttachments","cn","jsxs","jsx","PaperclipIcon","XIcon","Loader2Icon"],"mappings":";;;;;;AAaO,MAAM,4BAAgE,CAAC,EAAE,gBAAgB;AAC9F,QAAM,EAAE,aAAa,aAAa,iBAAA,IAAqBA,kBAAAA,eAAA;AAEvD,MAAI,YAAY,WAAW,KAAK,CAAC,YAAa,QAAO;AAErD,yCACG,OAAA,EAAI,WAAWC,OAAAA,GAAG,2DAA2D,SAAS,GACpF,UAAA;AAAA,IAAA,YAAY,IAAI,CAAC,UAChBC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAU;AAAA,QAEV,UAAA;AAAA,UAAAC,2BAAAA,IAACC,YAAAA,eAAA,EAAc,WAAU,2CAAA,CAA2C;AAAA,UACpED,2BAAAA,IAAC,QAAA,EAAK,WAAU,6CAA6C,gBAAM,OAAM;AAAA,UACzEA,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAS,MAAM,iBAAiB,MAAM,EAAE;AAAA,cACxC,WAAU;AAAA,cACV,cAAY,UAAU,MAAM,KAAK;AAAA,cAEjC,UAAAA,2BAAAA,IAACE,YAAAA,OAAA,EAAM,WAAU,SAAA,CAAS;AAAA,YAAA;AAAA,UAAA;AAAA,QAC5B;AAAA,MAAA;AAAA,MAZK,MAAM;AAAA,IAAA,CAcd;AAAA,IACA,cACCH,2BAAAA,KAAC,OAAA,EAAI,WAAU,wHACb,UAAA;AAAA,MAAAC,2BAAAA,IAACG,YAAAA,aAAA,EAAY,WAAU,+BAAA,CAA+B;AAAA,MACtDH,2BAAAA,IAAC,UAAK,UAAA,eAAA,CAAY;AAAA,IAAA,EAAA,CACpB,IACE;AAAA,EAAA,GACN;AAEJ;;"}
+{"version":3,"file":"ComposerAttachmentPreview.cjs","sources":["../../src/composer/ComposerAttachmentPreview.tsx"],"sourcesContent":["import { Loader2Icon, PaperclipIcon, XIcon } from 'lucide-react';\nimport { type FC, useMemo, useState } from 'react';\nimport { ImageViewer, type ImageViewerImage } from '../ui/image-viewer';\nimport { useAttachments } from './AttachmentContext';\nimport type { UploadedAsset } from './useFileUpload';\nimport { cn } from '../lib/utils';\n\nexport interface ComposerAttachmentPreviewProps {\n  className?: string;\n}\n\n/** A staged picture: the attachment, with the local preview it shows. */\ntype PictureAttachment = UploadedAsset & { previewUrl: string };\n\nconst isPicture = (asset: UploadedAsset): asset is PictureAttachment => Boolean(asset.previewUrl);\n\nconst REMOVE_BUTTON_CLASS =\n  'shrink-0 rounded p-0.5 text-muted-foreground hover:bg-muted hover:text-foreground transition-colors';\n\n/**\n * Renders the draft's attachments above the composer. A picture shows as a\n * thumbnail that opens full screen, as Devin's composer does (← → page through\n * the draft's pictures, Esc closes); any other file shows as a pill with its\n * name. Each has a dismiss button.\n */\nexport const ComposerAttachmentPreview: FC<ComposerAttachmentPreviewProps> = ({ className }) => {\n  const { attachments, isUploading, removeAttachment } = useAttachments();\n  const pictures = useMemo(() => attachments.filter(isPicture), [attachments]);\n  const images = useMemo<ImageViewerImage[]>(\n    () => pictures.map((picture) => ({ src: picture.previewUrl, name: picture.title })),\n    [pictures],\n  );\n  // The picture open in the viewer, by attachment id: removing another one\n  // never moves the viewer to a different picture.\n  const [viewingId, setViewingId] = useState<string | null>(null);\n  const viewingIndex = pictures.findIndex((picture) => picture.id === viewingId);\n\n  if (attachments.length === 0 && !isUploading) return null;\n\n  return (\n    <div className={cn('aui-attachment-preview mx-3 mt-2 flex flex-wrap items-end gap-1.5', className)}>\n      {attachments.map((asset) =>\n        isPicture(asset) ? (\n          <div\n            key={asset.id}\n            className=\"group relative h-14 w-[72px] shrink-0 overflow-hidden rounded-lg border border-border/60 bg-muted/40\"\n            data-slot=\"attachment-picture\"\n          >\n            <button\n              type=\"button\"\n              onClick={() => setViewingId(asset.id)}\n              className=\"block size-full cursor-zoom-in focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring\"\n              aria-label={`View ${asset.title}`}\n              title={asset.title}\n            >\n              <img src={asset.previewUrl} alt={asset.title} draggable={false} className=\"size-full object-cover\" />\n            </button>\n            <button\n              type=\"button\"\n              onClick={() => removeAttachment(asset.id)}\n              className=\"absolute right-0.5 top-0.5 inline-flex size-5 items-center justify-center rounded-full bg-black/65 text-white opacity-80 transition-opacity hover:bg-black/80 hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white\"\n              aria-label={`Remove ${asset.title}`}\n              title=\"Remove\"\n            >\n              <XIcon className=\"size-3\" />\n            </button>\n          </div>\n        ) : (\n          <div\n            key={asset.id}\n            className=\"flex items-center gap-1.5 rounded-lg border border-border/60 bg-muted/40 px-2.5 py-1.5 text-xs\"\n          >\n            <PaperclipIcon className=\"size-3 shrink-0 text-muted-foreground/60\" />\n            <span className=\"max-w-[180px] truncate text-foreground/80\">{asset.title}</span>\n            <button\n              type=\"button\"\n              onClick={() => removeAttachment(asset.id)}\n              className={REMOVE_BUTTON_CLASS}\n              aria-label={`Remove ${asset.title}`}\n            >\n              <XIcon className=\"size-3\" />\n            </button>\n          </div>\n        ),\n      )}\n      {isUploading ? (\n        <div className=\"flex items-center gap-1.5 rounded-lg border border-border/60 bg-muted/40 px-2.5 py-1.5 text-xs text-muted-foreground\">\n          <Loader2Icon className=\"size-3 shrink-0 animate-spin\" />\n          <span>Uploading...</span>\n        </div>\n      ) : null}\n      <ImageViewer\n        images={images}\n        index={viewingIndex === -1 ? null : viewingIndex}\n        onIndexChange={(index) => setViewingId(index === null ? null : (pictures[index]?.id ?? null))}\n      />\n    </div>\n  );\n};\n"],"names":["useAttachments","useMemo","useState","cn","jsxs","jsx","XIcon","PaperclipIcon","Loader2Icon","ImageViewer"],"mappings":";;;;;;;;AAcA,MAAM,YAAY,CAAC,UAAqD,QAAQ,MAAM,UAAU;AAEhG,MAAM,sBACJ;AAQK,MAAM,4BAAgE,CAAC,EAAE,gBAAgB;AAC9F,QAAM,EAAE,aAAa,aAAa,iBAAA,IAAqBA,kBAAAA,eAAA;AACvD,QAAM,WAAWC,WAAAA,QAAQ,MAAM,YAAY,OAAO,SAAS,GAAG,CAAC,WAAW,CAAC;AAC3E,QAAM,SAASA,WAAAA;AAAAA,IACb,MAAM,SAAS,IAAI,CAAC,aAAa,EAAE,KAAK,QAAQ,YAAY,MAAM,QAAQ,MAAA,EAAQ;AAAA,IAClF,CAAC,QAAQ;AAAA,EAAA;AAIX,QAAM,CAAC,WAAW,YAAY,IAAIC,WAAAA,SAAwB,IAAI;AAC9D,QAAM,eAAe,SAAS,UAAU,CAAC,YAAY,QAAQ,OAAO,SAAS;AAE7E,MAAI,YAAY,WAAW,KAAK,CAAC,YAAa,QAAO;AAErD,yCACG,OAAA,EAAI,WAAWC,OAAAA,GAAG,qEAAqE,SAAS,GAC9F,UAAA;AAAA,IAAA,YAAY;AAAA,MAAI,CAAC,UAChB,UAAU,KAAK,IACbC,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UAEC,WAAU;AAAA,UACV,aAAU;AAAA,UAEV,UAAA;AAAA,YAAAC,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,SAAS,MAAM,aAAa,MAAM,EAAE;AAAA,gBACpC,WAAU;AAAA,gBACV,cAAY,QAAQ,MAAM,KAAK;AAAA,gBAC/B,OAAO,MAAM;AAAA,gBAEb,UAAAA,2BAAAA,IAAC,OAAA,EAAI,KAAK,MAAM,YAAY,KAAK,MAAM,OAAO,WAAW,OAAO,WAAU,yBAAA,CAAyB;AAAA,cAAA;AAAA,YAAA;AAAA,YAErGA,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,SAAS,MAAM,iBAAiB,MAAM,EAAE;AAAA,gBACxC,WAAU;AAAA,gBACV,cAAY,UAAU,MAAM,KAAK;AAAA,gBACjC,OAAM;AAAA,gBAEN,UAAAA,2BAAAA,IAACC,YAAAA,OAAA,EAAM,WAAU,SAAA,CAAS;AAAA,cAAA;AAAA,YAAA;AAAA,UAC5B;AAAA,QAAA;AAAA,QArBK,MAAM;AAAA,MAAA,IAwBbF,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UAEC,WAAU;AAAA,UAEV,UAAA;AAAA,YAAAC,2BAAAA,IAACE,YAAAA,eAAA,EAAc,WAAU,2CAAA,CAA2C;AAAA,YACpEF,2BAAAA,IAAC,QAAA,EAAK,WAAU,6CAA6C,gBAAM,OAAM;AAAA,YACzEA,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,SAAS,MAAM,iBAAiB,MAAM,EAAE;AAAA,gBACxC,WAAW;AAAA,gBACX,cAAY,UAAU,MAAM,KAAK;AAAA,gBAEjC,UAAAA,2BAAAA,IAACC,YAAAA,OAAA,EAAM,WAAU,SAAA,CAAS;AAAA,cAAA;AAAA,YAAA;AAAA,UAC5B;AAAA,QAAA;AAAA,QAZK,MAAM;AAAA,MAAA;AAAA,IAab;AAAA,IAGH,cACCF,2BAAAA,KAAC,OAAA,EAAI,WAAU,wHACb,UAAA;AAAA,MAAAC,2BAAAA,IAACG,YAAAA,aAAA,EAAY,WAAU,+BAAA,CAA+B;AAAA,MACtDH,2BAAAA,IAAC,UAAK,UAAA,eAAA,CAAY;AAAA,IAAA,EAAA,CACpB,IACE;AAAA,IACJA,2BAAAA;AAAAA,MAACI,YAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA,OAAO,iBAAiB,KAAK,OAAO;AAAA,QACpC,eAAe,CAAC;;AAAU,8BAAa,UAAU,OAAO,SAAQ,cAAS,KAAK,MAAd,mBAAiB,OAAM,IAAK;AAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAC9F,GACF;AAEJ;;"}

package/dist/composer/ComposerAttachmentPreview.d.ts

@@ -1,9 +1,11 @@
-import type { FC } from 'react';
+import { type FC } from 'react';
 export interface ComposerAttachmentPreviewProps {
     className?: string;
 }
 /**
- * Renders uploaded file pills above the composer.
- * Each pill shows the file name and a dismiss button.
+ * Renders the draft's attachments above the composer. A picture shows as a
+ * thumbnail that opens full screen, as Devin's composer does (← → page through
+ * the draft's pictures, Esc closes); any other file shows as a pill with its
+ * name. Each has a dismiss button.
  */
 export declare const ComposerAttachmentPreview: FC<ComposerAttachmentPreviewProps>;

package/dist/composer/ComposerAttachmentPreview.js

@@ -1,36 +1,91 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { PaperclipIcon, XIcon, Loader2Icon } from "lucide-react";
+import { XIcon, PaperclipIcon, Loader2Icon } from "lucide-react";
+import { useMemo, useState } from "react";
+import { ImageViewer } from "../ui/image-viewer.js";
 import { useAttachments } from "./AttachmentContext.js";
 import { cn } from "cnfast";
+const isPicture = (asset) => Boolean(asset.previewUrl);
+const REMOVE_BUTTON_CLASS = "shrink-0 rounded p-0.5 text-muted-foreground hover:bg-muted hover:text-foreground transition-colors";
 const ComposerAttachmentPreview = ({ className }) => {
   const { attachments, isUploading, removeAttachment } = useAttachments();
+  const pictures = useMemo(() => attachments.filter(isPicture), [attachments]);
+  const images = useMemo(
+    () => pictures.map((picture) => ({ src: picture.previewUrl, name: picture.title })),
+    [pictures]
+  );
+  const [viewingId, setViewingId] = useState(null);
+  const viewingIndex = pictures.findIndex((picture) => picture.id === viewingId);
   if (attachments.length === 0 && !isUploading) return null;
-  return /* @__PURE__ */ jsxs("div", { className: cn("aui-attachment-preview mx-3 mt-2 flex flex-wrap gap-1.5", className), children: [
-    attachments.map((asset) => /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: "flex items-center gap-1.5 rounded-lg border border-border/60 bg-muted/40 px-2.5 py-1.5 text-xs",
-        children: [
-          /* @__PURE__ */ jsx(PaperclipIcon, { className: "size-3 shrink-0 text-muted-foreground/60" }),
-          /* @__PURE__ */ jsx("span", { className: "max-w-[180px] truncate text-foreground/80", children: asset.title }),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: () => removeAttachment(asset.id),
-              className: "shrink-0 rounded p-0.5 text-muted-foreground hover:bg-muted hover:text-foreground transition-colors",
-              "aria-label": `Remove ${asset.title}`,
-              children: /* @__PURE__ */ jsx(XIcon, { className: "size-3" })
-            }
-          )
-        ]
-      },
-      asset.id
-    )),
+  return /* @__PURE__ */ jsxs("div", { className: cn("aui-attachment-preview mx-3 mt-2 flex flex-wrap items-end gap-1.5", className), children: [
+    attachments.map(
+      (asset) => isPicture(asset) ? /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "group relative h-14 w-[72px] shrink-0 overflow-hidden rounded-lg border border-border/60 bg-muted/40",
+          "data-slot": "attachment-picture",
+          children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => setViewingId(asset.id),
+                className: "block size-full cursor-zoom-in focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+                "aria-label": `View ${asset.title}`,
+                title: asset.title,
+                children: /* @__PURE__ */ jsx("img", { src: asset.previewUrl, alt: asset.title, draggable: false, className: "size-full object-cover" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => removeAttachment(asset.id),
+                className: "absolute right-0.5 top-0.5 inline-flex size-5 items-center justify-center rounded-full bg-black/65 text-white opacity-80 transition-opacity hover:bg-black/80 hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white",
+                "aria-label": `Remove ${asset.title}`,
+                title: "Remove",
+                children: /* @__PURE__ */ jsx(XIcon, { className: "size-3" })
+              }
+            )
+          ]
+        },
+        asset.id
+      ) : /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex items-center gap-1.5 rounded-lg border border-border/60 bg-muted/40 px-2.5 py-1.5 text-xs",
+          children: [
+            /* @__PURE__ */ jsx(PaperclipIcon, { className: "size-3 shrink-0 text-muted-foreground/60" }),
+            /* @__PURE__ */ jsx("span", { className: "max-w-[180px] truncate text-foreground/80", children: asset.title }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => removeAttachment(asset.id),
+                className: REMOVE_BUTTON_CLASS,
+                "aria-label": `Remove ${asset.title}`,
+                children: /* @__PURE__ */ jsx(XIcon, { className: "size-3" })
+              }
+            )
+          ]
+        },
+        asset.id
+      )
+    ),
     isUploading ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 rounded-lg border border-border/60 bg-muted/40 px-2.5 py-1.5 text-xs text-muted-foreground", children: [
       /* @__PURE__ */ jsx(Loader2Icon, { className: "size-3 shrink-0 animate-spin" }),
       /* @__PURE__ */ jsx("span", { children: "Uploading..." })
-    ] }) : null
+    ] }) : null,
+    /* @__PURE__ */ jsx(
+      ImageViewer,
+      {
+        images,
+        index: viewingIndex === -1 ? null : viewingIndex,
+        onIndexChange: (index) => {
+          var _a;
+          return setViewingId(index === null ? null : ((_a = pictures[index]) == null ? void 0 : _a.id) ?? null);
+        }
+      }
+    )
   ] });
 };
 export {

package/dist/composer/ComposerAttachmentPreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComposerAttachmentPreview.js","sources":["../../src/composer/ComposerAttachmentPreview.tsx"],"sourcesContent":["import { Loader2Icon, PaperclipIcon, XIcon } from 'lucide-react';\nimport type { FC } from 'react';\nimport { useAttachments } from './AttachmentContext';\nimport { cn } from '../lib/utils';\n\nexport interface ComposerAttachmentPreviewProps {\n  className?: string;\n}\n\n/**\n * Renders uploaded file pills above the composer.\n * Each pill shows the file name and a dismiss button.\n */\nexport const ComposerAttachmentPreview: FC<ComposerAttachmentPreviewProps> = ({ className }) => {\n  const { attachments, isUploading, removeAttachment } = useAttachments();\n\n  if (attachments.length === 0 && !isUploading) return null;\n\n  return (\n    <div className={cn('aui-attachment-preview mx-3 mt-2 flex flex-wrap gap-1.5', className)}>\n      {attachments.map((asset) => (\n        <div\n          key={asset.id}\n          className=\"flex items-center gap-1.5 rounded-lg border border-border/60 bg-muted/40 px-2.5 py-1.5 text-xs\"\n        >\n          <PaperclipIcon className=\"size-3 shrink-0 text-muted-foreground/60\" />\n          <span className=\"max-w-[180px] truncate text-foreground/80\">{asset.title}</span>\n          <button\n            type=\"button\"\n            onClick={() => removeAttachment(asset.id)}\n            className=\"shrink-0 rounded p-0.5 text-muted-foreground hover:bg-muted hover:text-foreground transition-colors\"\n            aria-label={`Remove ${asset.title}`}\n          >\n            <XIcon className=\"size-3\" />\n          </button>\n        </div>\n      ))}\n      {isUploading ? (\n        <div className=\"flex items-center gap-1.5 rounded-lg border border-border/60 bg-muted/40 px-2.5 py-1.5 text-xs text-muted-foreground\">\n          <Loader2Icon className=\"size-3 shrink-0 animate-spin\" />\n          <span>Uploading...</span>\n        </div>\n      ) : null}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;AAaO,MAAM,4BAAgE,CAAC,EAAE,gBAAgB;AAC9F,QAAM,EAAE,aAAa,aAAa,iBAAA,IAAqB,eAAA;AAEvD,MAAI,YAAY,WAAW,KAAK,CAAC,YAAa,QAAO;AAErD,8BACG,OAAA,EAAI,WAAW,GAAG,2DAA2D,SAAS,GACpF,UAAA;AAAA,IAAA,YAAY,IAAI,CAAC,UAChB;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAU;AAAA,QAEV,UAAA;AAAA,UAAA,oBAAC,eAAA,EAAc,WAAU,2CAAA,CAA2C;AAAA,UACpE,oBAAC,QAAA,EAAK,WAAU,6CAA6C,gBAAM,OAAM;AAAA,UACzE;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAS,MAAM,iBAAiB,MAAM,EAAE;AAAA,cACxC,WAAU;AAAA,cACV,cAAY,UAAU,MAAM,KAAK;AAAA,cAEjC,UAAA,oBAAC,OAAA,EAAM,WAAU,SAAA,CAAS;AAAA,YAAA;AAAA,UAAA;AAAA,QAC5B;AAAA,MAAA;AAAA,MAZK,MAAM;AAAA,IAAA,CAcd;AAAA,IACA,cACC,qBAAC,OAAA,EAAI,WAAU,wHACb,UAAA;AAAA,MAAA,oBAAC,aAAA,EAAY,WAAU,+BAAA,CAA+B;AAAA,MACtD,oBAAC,UAAK,UAAA,eAAA,CAAY;AAAA,IAAA,EAAA,CACpB,IACE;AAAA,EAAA,GACN;AAEJ;"}
+{"version":3,"file":"ComposerAttachmentPreview.js","sources":["../../src/composer/ComposerAttachmentPreview.tsx"],"sourcesContent":["import { Loader2Icon, PaperclipIcon, XIcon } from 'lucide-react';\nimport { type FC, useMemo, useState } from 'react';\nimport { ImageViewer, type ImageViewerImage } from '../ui/image-viewer';\nimport { useAttachments } from './AttachmentContext';\nimport type { UploadedAsset } from './useFileUpload';\nimport { cn } from '../lib/utils';\n\nexport interface ComposerAttachmentPreviewProps {\n  className?: string;\n}\n\n/** A staged picture: the attachment, with the local preview it shows. */\ntype PictureAttachment = UploadedAsset & { previewUrl: string };\n\nconst isPicture = (asset: UploadedAsset): asset is PictureAttachment => Boolean(asset.previewUrl);\n\nconst REMOVE_BUTTON_CLASS =\n  'shrink-0 rounded p-0.5 text-muted-foreground hover:bg-muted hover:text-foreground transition-colors';\n\n/**\n * Renders the draft's attachments above the composer. A picture shows as a\n * thumbnail that opens full screen, as Devin's composer does (← → page through\n * the draft's pictures, Esc closes); any other file shows as a pill with its\n * name. Each has a dismiss button.\n */\nexport const ComposerAttachmentPreview: FC<ComposerAttachmentPreviewProps> = ({ className }) => {\n  const { attachments, isUploading, removeAttachment } = useAttachments();\n  const pictures = useMemo(() => attachments.filter(isPicture), [attachments]);\n  const images = useMemo<ImageViewerImage[]>(\n    () => pictures.map((picture) => ({ src: picture.previewUrl, name: picture.title })),\n    [pictures],\n  );\n  // The picture open in the viewer, by attachment id: removing another one\n  // never moves the viewer to a different picture.\n  const [viewingId, setViewingId] = useState<string | null>(null);\n  const viewingIndex = pictures.findIndex((picture) => picture.id === viewingId);\n\n  if (attachments.length === 0 && !isUploading) return null;\n\n  return (\n    <div className={cn('aui-attachment-preview mx-3 mt-2 flex flex-wrap items-end gap-1.5', className)}>\n      {attachments.map((asset) =>\n        isPicture(asset) ? (\n          <div\n            key={asset.id}\n            className=\"group relative h-14 w-[72px] shrink-0 overflow-hidden rounded-lg border border-border/60 bg-muted/40\"\n            data-slot=\"attachment-picture\"\n          >\n            <button\n              type=\"button\"\n              onClick={() => setViewingId(asset.id)}\n              className=\"block size-full cursor-zoom-in focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring\"\n              aria-label={`View ${asset.title}`}\n              title={asset.title}\n            >\n              <img src={asset.previewUrl} alt={asset.title} draggable={false} className=\"size-full object-cover\" />\n            </button>\n            <button\n              type=\"button\"\n              onClick={() => removeAttachment(asset.id)}\n              className=\"absolute right-0.5 top-0.5 inline-flex size-5 items-center justify-center rounded-full bg-black/65 text-white opacity-80 transition-opacity hover:bg-black/80 hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white\"\n              aria-label={`Remove ${asset.title}`}\n              title=\"Remove\"\n            >\n              <XIcon className=\"size-3\" />\n            </button>\n          </div>\n        ) : (\n          <div\n            key={asset.id}\n            className=\"flex items-center gap-1.5 rounded-lg border border-border/60 bg-muted/40 px-2.5 py-1.5 text-xs\"\n          >\n            <PaperclipIcon className=\"size-3 shrink-0 text-muted-foreground/60\" />\n            <span className=\"max-w-[180px] truncate text-foreground/80\">{asset.title}</span>\n            <button\n              type=\"button\"\n              onClick={() => removeAttachment(asset.id)}\n              className={REMOVE_BUTTON_CLASS}\n              aria-label={`Remove ${asset.title}`}\n            >\n              <XIcon className=\"size-3\" />\n            </button>\n          </div>\n        ),\n      )}\n      {isUploading ? (\n        <div className=\"flex items-center gap-1.5 rounded-lg border border-border/60 bg-muted/40 px-2.5 py-1.5 text-xs text-muted-foreground\">\n          <Loader2Icon className=\"size-3 shrink-0 animate-spin\" />\n          <span>Uploading...</span>\n        </div>\n      ) : null}\n      <ImageViewer\n        images={images}\n        index={viewingIndex === -1 ? null : viewingIndex}\n        onIndexChange={(index) => setViewingId(index === null ? null : (pictures[index]?.id ?? null))}\n      />\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAcA,MAAM,YAAY,CAAC,UAAqD,QAAQ,MAAM,UAAU;AAEhG,MAAM,sBACJ;AAQK,MAAM,4BAAgE,CAAC,EAAE,gBAAgB;AAC9F,QAAM,EAAE,aAAa,aAAa,iBAAA,IAAqB,eAAA;AACvD,QAAM,WAAW,QAAQ,MAAM,YAAY,OAAO,SAAS,GAAG,CAAC,WAAW,CAAC;AAC3E,QAAM,SAAS;AAAA,IACb,MAAM,SAAS,IAAI,CAAC,aAAa,EAAE,KAAK,QAAQ,YAAY,MAAM,QAAQ,MAAA,EAAQ;AAAA,IAClF,CAAC,QAAQ;AAAA,EAAA;AAIX,QAAM,CAAC,WAAW,YAAY,IAAI,SAAwB,IAAI;AAC9D,QAAM,eAAe,SAAS,UAAU,CAAC,YAAY,QAAQ,OAAO,SAAS;AAE7E,MAAI,YAAY,WAAW,KAAK,CAAC,YAAa,QAAO;AAErD,8BACG,OAAA,EAAI,WAAW,GAAG,qEAAqE,SAAS,GAC9F,UAAA;AAAA,IAAA,YAAY;AAAA,MAAI,CAAC,UAChB,UAAU,KAAK,IACb;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,WAAU;AAAA,UACV,aAAU;AAAA,UAEV,UAAA;AAAA,YAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,SAAS,MAAM,aAAa,MAAM,EAAE;AAAA,gBACpC,WAAU;AAAA,gBACV,cAAY,QAAQ,MAAM,KAAK;AAAA,gBAC/B,OAAO,MAAM;AAAA,gBAEb,UAAA,oBAAC,OAAA,EAAI,KAAK,MAAM,YAAY,KAAK,MAAM,OAAO,WAAW,OAAO,WAAU,yBAAA,CAAyB;AAAA,cAAA;AAAA,YAAA;AAAA,YAErG;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,SAAS,MAAM,iBAAiB,MAAM,EAAE;AAAA,gBACxC,WAAU;AAAA,gBACV,cAAY,UAAU,MAAM,KAAK;AAAA,gBACjC,OAAM;AAAA,gBAEN,UAAA,oBAAC,OAAA,EAAM,WAAU,SAAA,CAAS;AAAA,cAAA;AAAA,YAAA;AAAA,UAC5B;AAAA,QAAA;AAAA,QArBK,MAAM;AAAA,MAAA,IAwBb;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,WAAU;AAAA,UAEV,UAAA;AAAA,YAAA,oBAAC,eAAA,EAAc,WAAU,2CAAA,CAA2C;AAAA,YACpE,oBAAC,QAAA,EAAK,WAAU,6CAA6C,gBAAM,OAAM;AAAA,YACzE;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,SAAS,MAAM,iBAAiB,MAAM,EAAE;AAAA,gBACxC,WAAW;AAAA,gBACX,cAAY,UAAU,MAAM,KAAK;AAAA,gBAEjC,UAAA,oBAAC,OAAA,EAAM,WAAU,SAAA,CAAS;AAAA,cAAA;AAAA,YAAA;AAAA,UAC5B;AAAA,QAAA;AAAA,QAZK,MAAM;AAAA,MAAA;AAAA,IAab;AAAA,IAGH,cACC,qBAAC,OAAA,EAAI,WAAU,wHACb,UAAA;AAAA,MAAA,oBAAC,aAAA,EAAY,WAAU,+BAAA,CAA+B;AAAA,MACtD,oBAAC,UAAK,UAAA,eAAA,CAAY;AAAA,IAAA,EAAA,CACpB,IACE;AAAA,IACJ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,OAAO,iBAAiB,KAAK,OAAO;AAAA,QACpC,eAAe,CAAC;;AAAU,8BAAa,UAAU,OAAO,SAAQ,cAAS,KAAK,MAAd,mBAAiB,OAAM,IAAK;AAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAC9F,GACF;AAEJ;"}

package/dist/composer/ComposerDropZone.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
+const require$$0 = require("react");
 const AttachmentContext = require("./AttachmentContext.cjs");
 const useAttachFiles = require("./useAttachFiles.cjs");
 const cnfast = require("cnfast");
@@ -11,23 +11,23 @@ const ComposerDropZone = ({
   onUpload,
   onDragActiveChange
 }) => {
-  const [isDragOver, setIsDragOver] = react.useState(false);
+  const [isDragOver, setIsDragOver] = require$$0.useState(false);
   const { attachFiles } = useAttachFiles.useAttachFiles();
   const { isUploading } = AttachmentContext.useAttachments();
-  const onDragActiveChangeRef = react.useRef(onDragActiveChange);
+  const onDragActiveChangeRef = require$$0.useRef(onDragActiveChange);
   onDragActiveChangeRef.current = onDragActiveChange;
-  react.useEffect(() => {
+  require$$0.useEffect(() => {
     var _a;
     (_a = onDragActiveChangeRef.current) == null ? void 0 : _a.call(onDragActiveChangeRef, isDragOver);
   }, [isDragOver]);
-  const handleDragOver = react.useCallback((e) => {
+  const handleDragOver = require$$0.useCallback((e) => {
     e.preventDefault();
     e.stopPropagation();
     if (e.dataTransfer.types.includes("Files")) {
       setIsDragOver(true);
     }
   }, []);
-  const handleDragLeave = react.useCallback((e) => {
+  const handleDragLeave = require$$0.useCallback((e) => {
     e.preventDefault();
     e.stopPropagation();
     const rect = e.currentTarget.getBoundingClientRect();
@@ -36,7 +36,7 @@ const ComposerDropZone = ({
       setIsDragOver(false);
     }
   }, []);
-  const handleDrop = react.useCallback(
+  const handleDrop = require$$0.useCallback(
     async (e) => {
       e.preventDefault();
       e.stopPropagation();

package/dist/composer/ComposerDropZone.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ComposerDropZone.cjs","sources":["../../src/composer/ComposerDropZone.tsx"],"sourcesContent":["import {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type DragEvent,\n  type FC,\n  type ReactNode,\n} from 'react';\nimport { useAttachments } from './AttachmentContext';\nimport { useAttachFiles } from './useAttachFiles';\nimport type { UploadedAsset } from './useFileUpload';\nimport { cn } from '../lib/utils';\n\nexport interface ComposerDropZoneProps {\n  children: ReactNode;\n  className?: string;\n  /** Called after files are uploaded via drag-and-drop. */\n  onUpload?: (assets: UploadedAsset[]) => void;\n  /**\n   * Reports whether files are being dragged over the zone, so the composer\n   * surface inside can tint itself (`ChatComposerDock dragActive`). Called\n   * with `false` on mount and again on every change.\n   */\n  onDragActiveChange?: (active: boolean) => void;\n}\n\n/**\n * Wraps the composer area with drag-and-drop file upload support.\n * Shows a visual drop indicator when files are dragged over.\n */\nexport const ComposerDropZone: FC<ComposerDropZoneProps> = ({\n  children,\n  className,\n  onUpload,\n  onDragActiveChange,\n}) => {\n  const [isDragOver, setIsDragOver] = useState(false);\n  const { attachFiles } = useAttachFiles();\n  const { isUploading } = useAttachments();\n\n  const onDragActiveChangeRef = useRef(onDragActiveChange);\n  onDragActiveChangeRef.current = onDragActiveChange;\n  useEffect(() => {\n    onDragActiveChangeRef.current?.(isDragOver);\n  }, [isDragOver]);\n\n  const handleDragOver = useCallback((e: DragEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    if (e.dataTransfer.types.includes('Files')) {\n      setIsDragOver(true);\n    }\n  }, []);\n\n  const handleDragLeave = useCallback((e: DragEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();\n    const { clientX, clientY } = e;\n    if (\n      clientX < rect.left ||\n      clientX > rect.right ||\n      clientY < rect.top ||\n      clientY > rect.bottom\n    ) {\n      setIsDragOver(false);\n    }\n  }, []);\n\n  const handleDrop = useCallback(\n    async (e: DragEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n      setIsDragOver(false);\n\n      const files = Array.from(e.dataTransfer.files);\n      if (files.length === 0) return;\n\n      const assets = await attachFiles(files, 'drop');\n      if (assets.length > 0) {\n        onUpload?.(assets);\n      }\n    },\n    [attachFiles, onUpload],\n  );\n\n  return (\n    <div\n      className={cn('relative', className)}\n      onDragOver={handleDragOver}\n      onDragLeave={handleDragLeave}\n      onDrop={handleDrop}\n    >\n      {children}\n      {isDragOver && !isUploading && (\n        <div className=\"aui-drop-overlay pointer-events-none absolute inset-0 z-20 flex items-center justify-center rounded-2xl border-2 border-dashed border-primary/50 bg-primary/5\">\n          <span className=\"text-sm font-medium text-primary\">Drop files to upload</span>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["useState","useAttachFiles","useAttachments","useRef","useEffect","useCallback","jsxs","cn","jsx"],"mappings":";;;;;;;AA+BO,MAAM,mBAA8C,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,CAAC,YAAY,aAAa,IAAIA,MAAAA,SAAS,KAAK;AAClD,QAAM,EAAE,YAAA,IAAgBC,8BAAA;AACxB,QAAM,EAAE,YAAA,IAAgBC,iCAAA;AAExB,QAAM,wBAAwBC,MAAAA,OAAO,kBAAkB;AACvD,wBAAsB,UAAU;AAChCC,QAAAA,UAAU,MAAM;;AACd,gCAAsB,YAAtB,+CAAgC;AAAA,EAClC,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,iBAAiBC,kBAAY,CAAC,MAAiB;AACnD,MAAE,eAAA;AACF,MAAE,gBAAA;AACF,QAAI,EAAE,aAAa,MAAM,SAAS,OAAO,GAAG;AAC1C,oBAAc,IAAI;AAAA,IACpB;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,QAAM,kBAAkBA,kBAAY,CAAC,MAAiB;AACpD,MAAE,eAAA;AACF,MAAE,gBAAA;AACF,UAAM,OAAQ,EAAE,cAA8B,sBAAA;AAC9C,UAAM,EAAE,SAAS,QAAA,IAAY;AAC7B,QACE,UAAU,KAAK,QACf,UAAU,KAAK,SACf,UAAU,KAAK,OACf,UAAU,KAAK,QACf;AACA,oBAAc,KAAK;AAAA,IACrB;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,QAAM,aAAaA,MAAAA;AAAAA,IACjB,OAAO,MAAiB;AACtB,QAAE,eAAA;AACF,QAAE,gBAAA;AACF,oBAAc,KAAK;AAEnB,YAAM,QAAQ,MAAM,KAAK,EAAE,aAAa,KAAK;AAC7C,UAAI,MAAM,WAAW,EAAG;AAExB,YAAM,SAAS,MAAM,YAAY,OAAO,MAAM;AAC9C,UAAI,OAAO,SAAS,GAAG;AACrB,6CAAW;AAAA,MACb;AAAA,IACF;AAAA,IACA,CAAC,aAAa,QAAQ;AAAA,EAAA;AAGxB,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,OAAAA,GAAG,YAAY,SAAS;AAAA,MACnC,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,QAAQ;AAAA,MAEP,UAAA;AAAA,QAAA;AAAA,QACA,cAAc,CAAC,eACdC,2BAAAA,IAAC,OAAA,EAAI,WAAU,iKACb,UAAAA,2BAAAA,IAAC,QAAA,EAAK,WAAU,oCAAmC,UAAA,uBAAA,CAAoB,EAAA,CACzE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;;"}
+{"version":3,"file":"ComposerDropZone.cjs","sources":["../../src/composer/ComposerDropZone.tsx"],"sourcesContent":["import {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type DragEvent,\n  type FC,\n  type ReactNode,\n} from 'react';\nimport { useAttachments } from './AttachmentContext';\nimport { useAttachFiles } from './useAttachFiles';\nimport type { UploadedAsset } from './useFileUpload';\nimport { cn } from '../lib/utils';\n\nexport interface ComposerDropZoneProps {\n  children: ReactNode;\n  className?: string;\n  /** Called after files are uploaded via drag-and-drop. */\n  onUpload?: (assets: UploadedAsset[]) => void;\n  /**\n   * Reports whether files are being dragged over the zone, so the composer\n   * surface inside can tint itself (`ChatComposerDock dragActive`). Called\n   * with `false` on mount and again on every change.\n   */\n  onDragActiveChange?: (active: boolean) => void;\n}\n\n/**\n * Wraps the composer area with drag-and-drop file upload support.\n * Shows a visual drop indicator when files are dragged over.\n */\nexport const ComposerDropZone: FC<ComposerDropZoneProps> = ({\n  children,\n  className,\n  onUpload,\n  onDragActiveChange,\n}) => {\n  const [isDragOver, setIsDragOver] = useState(false);\n  const { attachFiles } = useAttachFiles();\n  const { isUploading } = useAttachments();\n\n  const onDragActiveChangeRef = useRef(onDragActiveChange);\n  onDragActiveChangeRef.current = onDragActiveChange;\n  useEffect(() => {\n    onDragActiveChangeRef.current?.(isDragOver);\n  }, [isDragOver]);\n\n  const handleDragOver = useCallback((e: DragEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    if (e.dataTransfer.types.includes('Files')) {\n      setIsDragOver(true);\n    }\n  }, []);\n\n  const handleDragLeave = useCallback((e: DragEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();\n    const { clientX, clientY } = e;\n    if (\n      clientX < rect.left ||\n      clientX > rect.right ||\n      clientY < rect.top ||\n      clientY > rect.bottom\n    ) {\n      setIsDragOver(false);\n    }\n  }, []);\n\n  const handleDrop = useCallback(\n    async (e: DragEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n      setIsDragOver(false);\n\n      const files = Array.from(e.dataTransfer.files);\n      if (files.length === 0) return;\n\n      const assets = await attachFiles(files, 'drop');\n      if (assets.length > 0) {\n        onUpload?.(assets);\n      }\n    },\n    [attachFiles, onUpload],\n  );\n\n  return (\n    <div\n      className={cn('relative', className)}\n      onDragOver={handleDragOver}\n      onDragLeave={handleDragLeave}\n      onDrop={handleDrop}\n    >\n      {children}\n      {isDragOver && !isUploading && (\n        <div className=\"aui-drop-overlay pointer-events-none absolute inset-0 z-20 flex items-center justify-center rounded-2xl border-2 border-dashed border-primary/50 bg-primary/5\">\n          <span className=\"text-sm font-medium text-primary\">Drop files to upload</span>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["useState","useAttachFiles","useAttachments","useRef","useEffect","useCallback","jsxs","cn","jsx"],"mappings":";;;;;;;AA+BO,MAAM,mBAA8C,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,CAAC,YAAY,aAAa,IAAIA,WAAAA,SAAS,KAAK;AAClD,QAAM,EAAE,YAAA,IAAgBC,8BAAA;AACxB,QAAM,EAAE,YAAA,IAAgBC,iCAAA;AAExB,QAAM,wBAAwBC,WAAAA,OAAO,kBAAkB;AACvD,wBAAsB,UAAU;AAChCC,aAAAA,UAAU,MAAM;;AACd,gCAAsB,YAAtB,+CAAgC;AAAA,EAClC,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,iBAAiBC,uBAAY,CAAC,MAAiB;AACnD,MAAE,eAAA;AACF,MAAE,gBAAA;AACF,QAAI,EAAE,aAAa,MAAM,SAAS,OAAO,GAAG;AAC1C,oBAAc,IAAI;AAAA,IACpB;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,QAAM,kBAAkBA,uBAAY,CAAC,MAAiB;AACpD,MAAE,eAAA;AACF,MAAE,gBAAA;AACF,UAAM,OAAQ,EAAE,cAA8B,sBAAA;AAC9C,UAAM,EAAE,SAAS,QAAA,IAAY;AAC7B,QACE,UAAU,KAAK,QACf,UAAU,KAAK,SACf,UAAU,KAAK,OACf,UAAU,KAAK,QACf;AACA,oBAAc,KAAK;AAAA,IACrB;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,QAAM,aAAaA,WAAAA;AAAAA,IACjB,OAAO,MAAiB;AACtB,QAAE,eAAA;AACF,QAAE,gBAAA;AACF,oBAAc,KAAK;AAEnB,YAAM,QAAQ,MAAM,KAAK,EAAE,aAAa,KAAK;AAC7C,UAAI,MAAM,WAAW,EAAG;AAExB,YAAM,SAAS,MAAM,YAAY,OAAO,MAAM;AAC9C,UAAI,OAAO,SAAS,GAAG;AACrB,6CAAW;AAAA,MACb;AAAA,IACF;AAAA,IACA,CAAC,aAAa,QAAQ;AAAA,EAAA;AAGxB,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,OAAAA,GAAG,YAAY,SAAS;AAAA,MACnC,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,QAAQ;AAAA,MAEP,UAAA;AAAA,QAAA;AAAA,QACA,cAAc,CAAC,eACdC,2BAAAA,IAAC,OAAA,EAAI,WAAU,iKACb,UAAAA,2BAAAA,IAAC,QAAA,EAAK,WAAU,oCAAmC,UAAA,uBAAA,CAAoB,EAAA,CACzE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;;"}

package/dist/composer/FileUploadButton.cjs

@@ -2,22 +2,26 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const lucideReact = require("lucide-react");
-const react = require("react");
+const require$$0 = require("react");
 const useAttachFiles = require("./useAttachFiles.cjs");
+const tooltip = require("../ui/tooltip.cjs");
 const cnfast = require("cnfast");
 const FileUploadButton = ({
   className,
   onUpload,
-  accept
+  accept,
+  disabledReason = null
 }) => {
-  const inputRef = react.useRef(null);
+  const inputRef = require$$0.useRef(null);
   const { attachFiles, isUploading, error, clearError } = useAttachFiles.useAttachFiles();
-  const handleClick = react.useCallback(() => {
+  const unavailable = Boolean(disabledReason);
+  const handleClick = require$$0.useCallback(() => {
     var _a;
+    if (unavailable) return;
     clearError();
     (_a = inputRef.current) == null ? void 0 : _a.click();
-  }, [clearError]);
-  const handleFiles = react.useCallback(
+  }, [clearError, unavailable]);
+  const handleFiles = require$$0.useCallback(
     async (files) => {
       if (!files || files.length === 0) return;
       const assets = await attachFiles(Array.from(files), "paperclip");
@@ -30,6 +34,25 @@ const FileUploadButton = ({
     },
     [attachFiles, onUpload]
   );
+  const button = /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      onClick: handleClick,
+      disabled: isUploading,
+      "aria-disabled": unavailable || void 0,
+      "data-unavailable": unavailable || void 0,
+      className: cnfast.cn(
+        "aui-file-upload-btn flex items-center justify-center rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-50 disabled:pointer-events-none",
+        error && "text-destructive",
+        className,
+        unavailable && "cursor-not-allowed opacity-30 hover:bg-transparent hover:text-muted-foreground"
+      ),
+      title: unavailable ? void 0 : error ?? (isUploading ? "Uploading..." : "Attach files"),
+      "aria-label": isUploading ? "Uploading files" : "Attach files",
+      children: isUploading ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2Icon, { className: "size-4 animate-spin" }) : error ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircleIcon, { className: "size-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PaperclipIcon, { className: "size-4" })
+    }
+  );
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "input",
@@ -43,22 +66,14 @@ const FileUploadButton = ({
         "aria-label": "Upload files"
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        type: "button",
-        onClick: handleClick,
-        disabled: isUploading,
-        className: cnfast.cn(
-          "aui-file-upload-btn flex items-center justify-center rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-50 disabled:pointer-events-none",
-          error && "text-destructive",
-          className
-        ),
-        title: error ?? (isUploading ? "Uploading..." : "Attach files"),
-        "aria-label": isUploading ? "Uploading files" : "Attach files",
-        children: isUploading ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2Icon, { className: "size-4 animate-spin" }) : error ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircleIcon, { className: "size-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PaperclipIcon, { className: "size-4" })
-      }
-    )
+    unavailable ? (
+      // The reason in the SDK's tooltip, which opens on keyboard focus as well as on hover (a
+      // native title shows only to a pointer).
+      /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: button }),
+        /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { side: "bottom", children: disabledReason })
+      ] })
+    ) : button
   ] });
 };
 exports.FileUploadButton = FileUploadButton;

package/dist/composer/FileUploadButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FileUploadButton.cjs","sources":["../../src/composer/FileUploadButton.tsx"],"sourcesContent":["import { PaperclipIcon, Loader2Icon, AlertCircleIcon } from 'lucide-react';\nimport { useCallback, useRef, type FC } from 'react';\nimport { useAttachFiles } from './useAttachFiles';\nimport type { UploadedAsset } from './useFileUpload';\nimport { cn } from '../lib/utils';\n\nexport interface FileUploadButtonProps {\n  className?: string;\n  /** Called after files are uploaded successfully. Receives the created assets. */\n  onUpload?: (assets: UploadedAsset[]) => void;\n  /** Accepted file types (MIME pattern). Defaults to all files. */\n  accept?: string;\n}\n\n/**\n * Paperclip button that opens a file picker and uploads selected files to Athena.\n * After upload, adds files to the attachment context so they appear as pills\n * above the composer and get included when the message is sent.\n */\nexport const FileUploadButton: FC<FileUploadButtonProps> = ({\n  className,\n  onUpload,\n  accept,\n}) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const { attachFiles, isUploading, error, clearError } = useAttachFiles();\n\n  const handleClick = useCallback(() => {\n    clearError();\n    inputRef.current?.click();\n  }, [clearError]);\n\n  const handleFiles = useCallback(\n    async (files: FileList | null) => {\n      if (!files || files.length === 0) return;\n\n      const assets = await attachFiles(Array.from(files), 'paperclip');\n      if (assets.length > 0) {\n        onUpload?.(assets);\n      }\n\n      // Reset input so the same file can be re-selected\n      if (inputRef.current) {\n        inputRef.current.value = '';\n      }\n    },\n    [attachFiles, onUpload],\n  );\n\n  return (\n    <>\n      <input\n        ref={inputRef}\n        type=\"file\"\n        multiple\n        accept={accept}\n        className=\"hidden\"\n        onChange={(e) => handleFiles(e.target.files)}\n        aria-label=\"Upload files\"\n      />\n      <button\n        type=\"button\"\n        onClick={handleClick}\n        disabled={isUploading}\n        className={cn(\n          'aui-file-upload-btn flex items-center justify-center rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-50 disabled:pointer-events-none',\n          error && 'text-destructive',\n          className,\n        )}\n        title={error ?? (isUploading ? 'Uploading...' : 'Attach files')}\n        aria-label={isUploading ? 'Uploading files' : 'Attach files'}\n      >\n        {isUploading ? (\n          <Loader2Icon className=\"size-4 animate-spin\" />\n        ) : error ? (\n          <AlertCircleIcon className=\"size-4\" />\n        ) : (\n          <PaperclipIcon className=\"size-4\" />\n        )}\n      </button>\n    </>\n  );\n};\n"],"names":["useRef","useAttachFiles","useCallback","jsxs","Fragment","jsx","cn","Loader2Icon","AlertCircleIcon","PaperclipIcon"],"mappings":";;;;;;;AAmBO,MAAM,mBAA8C,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,WAAWA,MAAAA,OAAyB,IAAI;AAC9C,QAAM,EAAE,aAAa,aAAa,OAAO,WAAA,IAAeC,eAAAA,eAAA;AAExD,QAAM,cAAcC,MAAAA,YAAY,MAAM;;AACpC,eAAA;AACA,mBAAS,YAAT,mBAAkB;AAAA,EACpB,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,cAAcA,MAAAA;AAAAA,IAClB,OAAO,UAA2B;AAChC,UAAI,CAAC,SAAS,MAAM,WAAW,EAAG;AAElC,YAAM,SAAS,MAAM,YAAY,MAAM,KAAK,KAAK,GAAG,WAAW;AAC/D,UAAI,OAAO,SAAS,GAAG;AACrB,6CAAW;AAAA,MACb;AAGA,UAAI,SAAS,SAAS;AACpB,iBAAS,QAAQ,QAAQ;AAAA,MAC3B;AAAA,IACF;AAAA,IACA,CAAC,aAAa,QAAQ;AAAA,EAAA;AAGxB,SACEC,2BAAAA,KAAAC,qBAAA,EACE,UAAA;AAAA,IAAAC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,MAAK;AAAA,QACL,UAAQ;AAAA,QACR;AAAA,QACA,WAAU;AAAA,QACV,UAAU,CAAC,MAAM,YAAY,EAAE,OAAO,KAAK;AAAA,QAC3C,cAAW;AAAA,MAAA;AAAA,IAAA;AAAA,IAEbA,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT,UAAU;AAAA,QACV,WAAWC,OAAAA;AAAAA,UACT;AAAA,UACA,SAAS;AAAA,UACT;AAAA,QAAA;AAAA,QAEF,OAAO,UAAU,cAAc,iBAAiB;AAAA,QAChD,cAAY,cAAc,oBAAoB;AAAA,QAE7C,UAAA,cACCD,2BAAAA,IAACE,YAAAA,aAAA,EAAY,WAAU,uBAAsB,IAC3C,QACFF,2BAAAA,IAACG,YAAAA,iBAAA,EAAgB,WAAU,UAAS,IAEpCH,2BAAAA,IAACI,2BAAA,EAAc,WAAU,SAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAEtC,GACF;AAEJ;;"}
+{"version":3,"file":"FileUploadButton.cjs","sources":["../../src/composer/FileUploadButton.tsx"],"sourcesContent":["import { PaperclipIcon, Loader2Icon, AlertCircleIcon } from 'lucide-react';\nimport { useCallback, useRef, type FC } from 'react';\nimport { useAttachFiles } from './useAttachFiles';\nimport type { UploadedAsset } from './useFileUpload';\nimport { cn } from '../lib/utils';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';\n\nexport interface FileUploadButtonProps {\n  className?: string;\n  /** Called after files are uploaded successfully. Receives the created assets. */\n  onUpload?: (assets: UploadedAsset[]) => void;\n  /** Accepted file types (MIME pattern). Defaults to all files. */\n  accept?: string;\n  /**\n   * Why attaching is off right now, e.g. \"Needs a connection…\" while the host knows Athena can't be\n   * reached: the button shows disabled with this in its tooltip and the file picker does not open.\n   * It stays focusable, and the tooltip opens on keyboard focus as on hover. `null` or absent: on.\n   */\n  disabledReason?: string | null;\n}\n\n/**\n * Paperclip button that opens a file picker and uploads selected files to Athena.\n * After upload, adds files to the attachment context so they appear as pills\n * above the composer and get included when the message is sent.\n */\nexport const FileUploadButton: FC<FileUploadButtonProps> = ({\n  className,\n  onUpload,\n  accept,\n  disabledReason = null,\n}) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const { attachFiles, isUploading, error, clearError } = useAttachFiles();\n  const unavailable = Boolean(disabledReason);\n\n  const handleClick = useCallback(() => {\n    if (unavailable) return;\n    clearError();\n    inputRef.current?.click();\n  }, [clearError, unavailable]);\n\n  const handleFiles = useCallback(\n    async (files: FileList | null) => {\n      if (!files || files.length === 0) return;\n\n      const assets = await attachFiles(Array.from(files), 'paperclip');\n      if (assets.length > 0) {\n        onUpload?.(assets);\n      }\n\n      // Reset input so the same file can be re-selected\n      if (inputRef.current) {\n        inputRef.current.value = '';\n      }\n    },\n    [attachFiles, onUpload],\n  );\n\n  const button = (\n    <button\n      type=\"button\"\n      onClick={handleClick}\n      disabled={isUploading}\n      // Off with a reason, it keeps its pointer and its focus: the reason has to be readable.\n      aria-disabled={unavailable || undefined}\n      data-unavailable={unavailable || undefined}\n      className={cn(\n        'aui-file-upload-btn flex items-center justify-center rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-50 disabled:pointer-events-none',\n        error && 'text-destructive',\n        className,\n        unavailable &&\n          'cursor-not-allowed opacity-30 hover:bg-transparent hover:text-muted-foreground',\n      )}\n      title={unavailable ? undefined : (error ?? (isUploading ? 'Uploading...' : 'Attach files'))}\n      aria-label={isUploading ? 'Uploading files' : 'Attach files'}\n    >\n      {isUploading ? (\n        <Loader2Icon className=\"size-4 animate-spin\" />\n      ) : error ? (\n        <AlertCircleIcon className=\"size-4\" />\n      ) : (\n        <PaperclipIcon className=\"size-4\" />\n      )}\n    </button>\n  );\n\n  return (\n    <>\n      <input\n        ref={inputRef}\n        type=\"file\"\n        multiple\n        accept={accept}\n        className=\"hidden\"\n        onChange={(e) => handleFiles(e.target.files)}\n        aria-label=\"Upload files\"\n      />\n      {unavailable ? (\n        // The reason in the SDK's tooltip, which opens on keyboard focus as well as on hover (a\n        // native title shows only to a pointer).\n        <Tooltip>\n          <TooltipTrigger asChild>{button}</TooltipTrigger>\n          <TooltipContent side=\"bottom\">{disabledReason}</TooltipContent>\n        </Tooltip>\n      ) : (\n        button\n      )}\n    </>\n  );\n};\n"],"names":["useRef","useAttachFiles","useCallback","jsx","cn","Loader2Icon","AlertCircleIcon","PaperclipIcon","jsxs","Fragment","Tooltip","TooltipTrigger","TooltipContent"],"mappings":";;;;;;;;AA0BO,MAAM,mBAA8C,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AACnB,MAAM;AACJ,QAAM,WAAWA,WAAAA,OAAyB,IAAI;AAC9C,QAAM,EAAE,aAAa,aAAa,OAAO,WAAA,IAAeC,eAAAA,eAAA;AACxD,QAAM,cAAc,QAAQ,cAAc;AAE1C,QAAM,cAAcC,WAAAA,YAAY,MAAM;;AACpC,QAAI,YAAa;AACjB,eAAA;AACA,mBAAS,YAAT,mBAAkB;AAAA,EACpB,GAAG,CAAC,YAAY,WAAW,CAAC;AAE5B,QAAM,cAAcA,WAAAA;AAAAA,IAClB,OAAO,UAA2B;AAChC,UAAI,CAAC,SAAS,MAAM,WAAW,EAAG;AAElC,YAAM,SAAS,MAAM,YAAY,MAAM,KAAK,KAAK,GAAG,WAAW;AAC/D,UAAI,OAAO,SAAS,GAAG;AACrB,6CAAW;AAAA,MACb;AAGA,UAAI,SAAS,SAAS;AACpB,iBAAS,QAAQ,QAAQ;AAAA,MAC3B;AAAA,IACF;AAAA,IACA,CAAC,aAAa,QAAQ;AAAA,EAAA;AAGxB,QAAM,SACJC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAS;AAAA,MACT,UAAU;AAAA,MAEV,iBAAe,eAAe;AAAA,MAC9B,oBAAkB,eAAe;AAAA,MACjC,WAAWC,OAAAA;AAAAA,QACT;AAAA,QACA,SAAS;AAAA,QACT;AAAA,QACA,eACE;AAAA,MAAA;AAAA,MAEJ,OAAO,cAAc,SAAa,UAAU,cAAc,iBAAiB;AAAA,MAC3E,cAAY,cAAc,oBAAoB;AAAA,MAE7C,UAAA,cACCD,2BAAAA,IAACE,YAAAA,aAAA,EAAY,WAAU,uBAAsB,IAC3C,QACFF,2BAAAA,IAACG,YAAAA,iBAAA,EAAgB,WAAU,UAAS,IAEpCH,2BAAAA,IAACI,2BAAA,EAAc,WAAU,SAAA,CAAS;AAAA,IAAA;AAAA,EAAA;AAKxC,SACEC,2BAAAA,KAAAC,qBAAA,EACE,UAAA;AAAA,IAAAN,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,MAAK;AAAA,QACL,UAAQ;AAAA,QACR;AAAA,QACA,WAAU;AAAA,QACV,UAAU,CAAC,MAAM,YAAY,EAAE,OAAO,KAAK;AAAA,QAC3C,cAAW;AAAA,MAAA;AAAA,IAAA;AAAA,IAEZ;AAAA;AAAA;AAAA,sCAGEO,QAAAA,SAAA,EACC,UAAA;AAAA,QAAAP,2BAAAA,IAACQ,QAAAA,gBAAA,EAAe,SAAO,MAAE,UAAA,QAAO;AAAA,QAChCR,2BAAAA,IAACS,QAAAA,gBAAA,EAAe,MAAK,UAAU,UAAA,eAAA,CAAe;AAAA,MAAA,EAAA,CAChD;AAAA,QAEA;AAAA,EAAA,GAEJ;AAEJ;;"}

package/dist/composer/FileUploadButton.d.ts

@@ -6,6 +6,12 @@ export interface FileUploadButtonProps {
     onUpload?: (assets: UploadedAsset[]) => void;
     /** Accepted file types (MIME pattern). Defaults to all files. */
     accept?: string;
+    /**
+     * Why attaching is off right now, e.g. "Needs a connection…" while the host knows Athena can't be
+     * reached: the button shows disabled with this in its tooltip and the file picker does not open.
+     * It stays focusable, and the tooltip opens on keyboard focus as on hover. `null` or absent: on.
+     */
+    disabledReason?: string | null;
 }
 /**
  * Paperclip button that opens a file picker and uploads selected files to Athena.

package/dist/composer/FileUploadButton.js

@@ -1,20 +1,24 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { Loader2Icon, AlertCircleIcon, PaperclipIcon } from "lucide-react";
 import { useRef, useCallback } from "react";
 import { useAttachFiles } from "./useAttachFiles.js";
+import { Tooltip, TooltipTrigger, TooltipContent } from "../ui/tooltip.js";
 import { cn } from "cnfast";
 const FileUploadButton = ({
   className,
   onUpload,
-  accept
+  accept,
+  disabledReason = null
 }) => {
   const inputRef = useRef(null);
   const { attachFiles, isUploading, error, clearError } = useAttachFiles();
+  const unavailable = Boolean(disabledReason);
   const handleClick = useCallback(() => {
     var _a;
+    if (unavailable) return;
     clearError();
     (_a = inputRef.current) == null ? void 0 : _a.click();
-  }, [clearError]);
+  }, [clearError, unavailable]);
   const handleFiles = useCallback(
     async (files) => {
       if (!files || files.length === 0) return;
@@ -28,6 +32,25 @@ const FileUploadButton = ({
     },
     [attachFiles, onUpload]
   );
+  const button = /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: handleClick,
+      disabled: isUploading,
+      "aria-disabled": unavailable || void 0,
+      "data-unavailable": unavailable || void 0,
+      className: cn(
+        "aui-file-upload-btn flex items-center justify-center rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-50 disabled:pointer-events-none",
+        error && "text-destructive",
+        className,
+        unavailable && "cursor-not-allowed opacity-30 hover:bg-transparent hover:text-muted-foreground"
+      ),
+      title: unavailable ? void 0 : error ?? (isUploading ? "Uploading..." : "Attach files"),
+      "aria-label": isUploading ? "Uploading files" : "Attach files",
+      children: isUploading ? /* @__PURE__ */ jsx(Loader2Icon, { className: "size-4 animate-spin" }) : error ? /* @__PURE__ */ jsx(AlertCircleIcon, { className: "size-4" }) : /* @__PURE__ */ jsx(PaperclipIcon, { className: "size-4" })
+    }
+  );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       "input",
@@ -41,22 +64,14 @@ const FileUploadButton = ({
         "aria-label": "Upload files"
       }
     ),
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        onClick: handleClick,
-        disabled: isUploading,
-        className: cn(
-          "aui-file-upload-btn flex items-center justify-center rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-50 disabled:pointer-events-none",
-          error && "text-destructive",
-          className
-        ),
-        title: error ?? (isUploading ? "Uploading..." : "Attach files"),
-        "aria-label": isUploading ? "Uploading files" : "Attach files",
-        children: isUploading ? /* @__PURE__ */ jsx(Loader2Icon, { className: "size-4 animate-spin" }) : error ? /* @__PURE__ */ jsx(AlertCircleIcon, { className: "size-4" }) : /* @__PURE__ */ jsx(PaperclipIcon, { className: "size-4" })
-      }
-    )
+    unavailable ? (
+      // The reason in the SDK's tooltip, which opens on keyboard focus as well as on hover (a
+      // native title shows only to a pointer).
+      /* @__PURE__ */ jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: button }),
+        /* @__PURE__ */ jsx(TooltipContent, { side: "bottom", children: disabledReason })
+      ] })
+    ) : button
   ] });
 };
 export {

package/dist/composer/FileUploadButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileUploadButton.js","sources":["../../src/composer/FileUploadButton.tsx"],"sourcesContent":["import { PaperclipIcon, Loader2Icon, AlertCircleIcon } from 'lucide-react';\nimport { useCallback, useRef, type FC } from 'react';\nimport { useAttachFiles } from './useAttachFiles';\nimport type { UploadedAsset } from './useFileUpload';\nimport { cn } from '../lib/utils';\n\nexport interface FileUploadButtonProps {\n  className?: string;\n  /** Called after files are uploaded successfully. Receives the created assets. */\n  onUpload?: (assets: UploadedAsset[]) => void;\n  /** Accepted file types (MIME pattern). Defaults to all files. */\n  accept?: string;\n}\n\n/**\n * Paperclip button that opens a file picker and uploads selected files to Athena.\n * After upload, adds files to the attachment context so they appear as pills\n * above the composer and get included when the message is sent.\n */\nexport const FileUploadButton: FC<FileUploadButtonProps> = ({\n  className,\n  onUpload,\n  accept,\n}) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const { attachFiles, isUploading, error, clearError } = useAttachFiles();\n\n  const handleClick = useCallback(() => {\n    clearError();\n    inputRef.current?.click();\n  }, [clearError]);\n\n  const handleFiles = useCallback(\n    async (files: FileList | null) => {\n      if (!files || files.length === 0) return;\n\n      const assets = await attachFiles(Array.from(files), 'paperclip');\n      if (assets.length > 0) {\n        onUpload?.(assets);\n      }\n\n      // Reset input so the same file can be re-selected\n      if (inputRef.current) {\n        inputRef.current.value = '';\n      }\n    },\n    [attachFiles, onUpload],\n  );\n\n  return (\n    <>\n      <input\n        ref={inputRef}\n        type=\"file\"\n        multiple\n        accept={accept}\n        className=\"hidden\"\n        onChange={(e) => handleFiles(e.target.files)}\n        aria-label=\"Upload files\"\n      />\n      <button\n        type=\"button\"\n        onClick={handleClick}\n        disabled={isUploading}\n        className={cn(\n          'aui-file-upload-btn flex items-center justify-center rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-50 disabled:pointer-events-none',\n          error && 'text-destructive',\n          className,\n        )}\n        title={error ?? (isUploading ? 'Uploading...' : 'Attach files')}\n        aria-label={isUploading ? 'Uploading files' : 'Attach files'}\n      >\n        {isUploading ? (\n          <Loader2Icon className=\"size-4 animate-spin\" />\n        ) : error ? (\n          <AlertCircleIcon className=\"size-4\" />\n        ) : (\n          <PaperclipIcon className=\"size-4\" />\n        )}\n      </button>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;AAmBO,MAAM,mBAA8C,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,WAAW,OAAyB,IAAI;AAC9C,QAAM,EAAE,aAAa,aAAa,OAAO,WAAA,IAAe,eAAA;AAExD,QAAM,cAAc,YAAY,MAAM;;AACpC,eAAA;AACA,mBAAS,YAAT,mBAAkB;AAAA,EACpB,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,cAAc;AAAA,IAClB,OAAO,UAA2B;AAChC,UAAI,CAAC,SAAS,MAAM,WAAW,EAAG;AAElC,YAAM,SAAS,MAAM,YAAY,MAAM,KAAK,KAAK,GAAG,WAAW;AAC/D,UAAI,OAAO,SAAS,GAAG;AACrB,6CAAW;AAAA,MACb;AAGA,UAAI,SAAS,SAAS;AACpB,iBAAS,QAAQ,QAAQ;AAAA,MAC3B;AAAA,IACF;AAAA,IACA,CAAC,aAAa,QAAQ;AAAA,EAAA;AAGxB,SACE,qBAAA,UAAA,EACE,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,MAAK;AAAA,QACL,UAAQ;AAAA,QACR;AAAA,QACA,WAAU;AAAA,QACV,UAAU,CAAC,MAAM,YAAY,EAAE,OAAO,KAAK;AAAA,QAC3C,cAAW;AAAA,MAAA;AAAA,IAAA;AAAA,IAEb;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT,UAAU;AAAA,QACV,WAAW;AAAA,UACT;AAAA,UACA,SAAS;AAAA,UACT;AAAA,QAAA;AAAA,QAEF,OAAO,UAAU,cAAc,iBAAiB;AAAA,QAChD,cAAY,cAAc,oBAAoB;AAAA,QAE7C,UAAA,cACC,oBAAC,aAAA,EAAY,WAAU,uBAAsB,IAC3C,QACF,oBAAC,iBAAA,EAAgB,WAAU,UAAS,IAEpC,oBAAC,eAAA,EAAc,WAAU,SAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAEtC,GACF;AAEJ;"}
+{"version":3,"file":"FileUploadButton.js","sources":["../../src/composer/FileUploadButton.tsx"],"sourcesContent":["import { PaperclipIcon, Loader2Icon, AlertCircleIcon } from 'lucide-react';\nimport { useCallback, useRef, type FC } from 'react';\nimport { useAttachFiles } from './useAttachFiles';\nimport type { UploadedAsset } from './useFileUpload';\nimport { cn } from '../lib/utils';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';\n\nexport interface FileUploadButtonProps {\n  className?: string;\n  /** Called after files are uploaded successfully. Receives the created assets. */\n  onUpload?: (assets: UploadedAsset[]) => void;\n  /** Accepted file types (MIME pattern). Defaults to all files. */\n  accept?: string;\n  /**\n   * Why attaching is off right now, e.g. \"Needs a connection…\" while the host knows Athena can't be\n   * reached: the button shows disabled with this in its tooltip and the file picker does not open.\n   * It stays focusable, and the tooltip opens on keyboard focus as on hover. `null` or absent: on.\n   */\n  disabledReason?: string | null;\n}\n\n/**\n * Paperclip button that opens a file picker and uploads selected files to Athena.\n * After upload, adds files to the attachment context so they appear as pills\n * above the composer and get included when the message is sent.\n */\nexport const FileUploadButton: FC<FileUploadButtonProps> = ({\n  className,\n  onUpload,\n  accept,\n  disabledReason = null,\n}) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const { attachFiles, isUploading, error, clearError } = useAttachFiles();\n  const unavailable = Boolean(disabledReason);\n\n  const handleClick = useCallback(() => {\n    if (unavailable) return;\n    clearError();\n    inputRef.current?.click();\n  }, [clearError, unavailable]);\n\n  const handleFiles = useCallback(\n    async (files: FileList | null) => {\n      if (!files || files.length === 0) return;\n\n      const assets = await attachFiles(Array.from(files), 'paperclip');\n      if (assets.length > 0) {\n        onUpload?.(assets);\n      }\n\n      // Reset input so the same file can be re-selected\n      if (inputRef.current) {\n        inputRef.current.value = '';\n      }\n    },\n    [attachFiles, onUpload],\n  );\n\n  const button = (\n    <button\n      type=\"button\"\n      onClick={handleClick}\n      disabled={isUploading}\n      // Off with a reason, it keeps its pointer and its focus: the reason has to be readable.\n      aria-disabled={unavailable || undefined}\n      data-unavailable={unavailable || undefined}\n      className={cn(\n        'aui-file-upload-btn flex items-center justify-center rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-50 disabled:pointer-events-none',\n        error && 'text-destructive',\n        className,\n        unavailable &&\n          'cursor-not-allowed opacity-30 hover:bg-transparent hover:text-muted-foreground',\n      )}\n      title={unavailable ? undefined : (error ?? (isUploading ? 'Uploading...' : 'Attach files'))}\n      aria-label={isUploading ? 'Uploading files' : 'Attach files'}\n    >\n      {isUploading ? (\n        <Loader2Icon className=\"size-4 animate-spin\" />\n      ) : error ? (\n        <AlertCircleIcon className=\"size-4\" />\n      ) : (\n        <PaperclipIcon className=\"size-4\" />\n      )}\n    </button>\n  );\n\n  return (\n    <>\n      <input\n        ref={inputRef}\n        type=\"file\"\n        multiple\n        accept={accept}\n        className=\"hidden\"\n        onChange={(e) => handleFiles(e.target.files)}\n        aria-label=\"Upload files\"\n      />\n      {unavailable ? (\n        // The reason in the SDK's tooltip, which opens on keyboard focus as well as on hover (a\n        // native title shows only to a pointer).\n        <Tooltip>\n          <TooltipTrigger asChild>{button}</TooltipTrigger>\n          <TooltipContent side=\"bottom\">{disabledReason}</TooltipContent>\n        </Tooltip>\n      ) : (\n        button\n      )}\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;AA0BO,MAAM,mBAA8C,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AACnB,MAAM;AACJ,QAAM,WAAW,OAAyB,IAAI;AAC9C,QAAM,EAAE,aAAa,aAAa,OAAO,WAAA,IAAe,eAAA;AACxD,QAAM,cAAc,QAAQ,cAAc;AAE1C,QAAM,cAAc,YAAY,MAAM;;AACpC,QAAI,YAAa;AACjB,eAAA;AACA,mBAAS,YAAT,mBAAkB;AAAA,EACpB,GAAG,CAAC,YAAY,WAAW,CAAC;AAE5B,QAAM,cAAc;AAAA,IAClB,OAAO,UAA2B;AAChC,UAAI,CAAC,SAAS,MAAM,WAAW,EAAG;AAElC,YAAM,SAAS,MAAM,YAAY,MAAM,KAAK,KAAK,GAAG,WAAW;AAC/D,UAAI,OAAO,SAAS,GAAG;AACrB,6CAAW;AAAA,MACb;AAGA,UAAI,SAAS,SAAS;AACpB,iBAAS,QAAQ,QAAQ;AAAA,MAC3B;AAAA,IACF;AAAA,IACA,CAAC,aAAa,QAAQ;AAAA,EAAA;AAGxB,QAAM,SACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAS;AAAA,MACT,UAAU;AAAA,MAEV,iBAAe,eAAe;AAAA,MAC9B,oBAAkB,eAAe;AAAA,MACjC,WAAW;AAAA,QACT;AAAA,QACA,SAAS;AAAA,QACT;AAAA,QACA,eACE;AAAA,MAAA;AAAA,MAEJ,OAAO,cAAc,SAAa,UAAU,cAAc,iBAAiB;AAAA,MAC3E,cAAY,cAAc,oBAAoB;AAAA,MAE7C,UAAA,cACC,oBAAC,aAAA,EAAY,WAAU,uBAAsB,IAC3C,QACF,oBAAC,iBAAA,EAAgB,WAAU,UAAS,IAEpC,oBAAC,eAAA,EAAc,WAAU,SAAA,CAAS;AAAA,IAAA;AAAA,EAAA;AAKxC,SACE,qBAAA,UAAA,EACE,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,MAAK;AAAA,QACL,UAAQ;AAAA,QACR;AAAA,QACA,WAAU;AAAA,QACV,UAAU,CAAC,MAAM,YAAY,EAAE,OAAO,KAAK;AAAA,QAC3C,cAAW;AAAA,MAAA;AAAA,IAAA;AAAA,IAEZ;AAAA;AAAA;AAAA,2BAGE,SAAA,EACC,UAAA;AAAA,QAAA,oBAAC,gBAAA,EAAe,SAAO,MAAE,UAAA,QAAO;AAAA,QAChC,oBAAC,gBAAA,EAAe,MAAK,UAAU,UAAA,eAAA,CAAe;AAAA,MAAA,EAAA,CAChD;AAAA,QAEA;AAAA,EAAA,GAEJ;AAEJ;"}

package/dist/composer/QuoteContext.cjs

@@ -1,37 +1,37 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
+const require$$0 = require("react");
 const zustand = require("zustand");
 const vanilla = require("zustand/vanilla");
-const QuoteCtx = react.createContext(null);
+const QuoteCtx = require$$0.createContext(null);
 function createQuoteStore() {
   return vanilla.createStore(() => ({ quote: null }));
 }
 function QuoteProvider({ children, store }) {
-  const outer = react.useContext(QuoteCtx);
+  const outer = require$$0.useContext(QuoteCtx);
   if (store) return /* @__PURE__ */ jsxRuntime.jsx(StoreQuoteProvider, { store, children });
   if (outer) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
   return /* @__PURE__ */ jsxRuntime.jsx(OwnQuoteProvider, { children });
 }
 function OwnQuoteProvider({ children }) {
-  const [store] = react.useState(createQuoteStore);
+  const [store] = require$$0.useState(createQuoteStore);
   return /* @__PURE__ */ jsxRuntime.jsx(StoreQuoteProvider, { store, children });
 }
 function StoreQuoteProvider({ children, store }) {
   const quote = zustand.useStore(store, (state) => state.quote);
-  const actions = react.useMemo(
+  const actions = require$$0.useMemo(
     () => ({
       setQuote: (next) => store.setState({ quote: next }),
       clearQuote: () => store.setState({ quote: null })
     }),
     [store]
   );
-  const value = react.useMemo(() => ({ quote, ...actions }), [quote, actions]);
+  const value = require$$0.useMemo(() => ({ quote, ...actions }), [quote, actions]);
   return /* @__PURE__ */ jsxRuntime.jsx(QuoteCtx.Provider, { value, children });
 }
 function useQuote() {
-  const ctx = react.useContext(QuoteCtx);
+  const ctx = require$$0.useContext(QuoteCtx);
   if (!ctx) {
     throw new Error("[AthenaSDK] useQuote must be used within <QuoteProvider>");
   }
@@ -56,7 +56,7 @@ function elementOf(node) {
 }
 function useQuoteFromPostMessage({ scope } = {}) {
   const { setQuote } = useQuote();
-  react.useEffect(() => {
+  require$$0.useEffect(() => {
     var _a;
     const doc = ((_a = scope == null ? void 0 : scope.current) == null ? void 0 : _a.ownerDocument) ?? document;
     const win = doc.defaultView ?? window;