@flanksource/clicky-ui 0.3.15 → 0.3.17

package/dist/data/cells/EntityCell.cjs

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+require("react");
+const utils = require("../../lib/utils.cjs");
+const Icon = require("../Icon.cjs");
+const CHIP_TONE_CLASSES = {
+  neutral: "bg-muted text-muted-foreground",
+  success: "bg-emerald-500/12 text-emerald-700 [[data-theme=dark]_&]:text-emerald-400",
+  danger: "bg-rose-500/12 text-rose-700 [[data-theme=dark]_&]:text-rose-400",
+  warning: "bg-amber-400/15 text-amber-700 [[data-theme=dark]_&]:text-amber-400",
+  info: "bg-sky-500/12 text-sky-700 [[data-theme=dark]_&]:text-sky-400"
+};
+const CHIP_SIZE = {
+  sm: "size-6 text-sm",
+  md: "size-7 text-base"
+};
+function EntityCell({
+  title,
+  subtitle,
+  icon,
+  iconTone = "neutral",
+  size = "md",
+  href,
+  onClick,
+  trailing,
+  className
+}) {
+  const titleClasses = "truncate font-medium text-foreground";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("flex min-w-0 items-center gap-2", className), children: [
+    icon && /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: utils.cn(
+          "flex shrink-0 items-center justify-center rounded-md",
+          CHIP_SIZE[size],
+          CHIP_TONE_CLASSES[iconTone]
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          Icon.Icon,
+          {
+            ...typeof icon === "string" ? { name: icon } : { icon },
+            className: "text-[0.85em]"
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-col leading-tight", children: [
+      href || onClick ? /* @__PURE__ */ jsxRuntime.jsx(
+        "a",
+        {
+          href: href ?? "#",
+          ...onClick ? { onClick } : {},
+          className: utils.cn(titleClasses, "hover:underline"),
+          children: title
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: titleClasses, children: title }),
+      subtitle !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-xs text-muted-foreground", children: subtitle })
+    ] }),
+    trailing && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto shrink-0", children: trailing })
+  ] });
+}
+exports.EntityCell = EntityCell;
+//# sourceMappingURL=EntityCell.cjs.map

package/dist/data/cells/EntityCell.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EntityCell.cjs","sources":["../../../src/data/cells/EntityCell.tsx"],"sourcesContent":["import { type MouseEvent, type ReactNode } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"../Icon\";\nimport type { BadgeTone } from \"../Badge\";\n\n/** Soft chip fill + matching foreground, one entry per Badge tone. */\nconst CHIP_TONE_CLASSES: Record<BadgeTone, string> = {\n  neutral: \"bg-muted text-muted-foreground\",\n  success:\n    \"bg-emerald-500/12 text-emerald-700 [[data-theme=dark]_&]:text-emerald-400\",\n  danger: \"bg-rose-500/12 text-rose-700 [[data-theme=dark]_&]:text-rose-400\",\n  warning: \"bg-amber-400/15 text-amber-700 [[data-theme=dark]_&]:text-amber-400\",\n  info: \"bg-sky-500/12 text-sky-700 [[data-theme=dark]_&]:text-sky-400\",\n};\n\nexport type EntityCellSize = \"sm\" | \"md\";\n\nconst CHIP_SIZE: Record<EntityCellSize, string> = {\n  sm: \"size-6 text-sm\",\n  md: \"size-7 text-base\",\n};\n\nexport type EntityCellProps = {\n  /** Primary line. Rendered as a link when `href` is set. */\n  title: ReactNode;\n  /** Secondary muted line — type, id, qualifier. */\n  subtitle?: ReactNode;\n  icon?: string | StaticIconComponent;\n  /** Tints the icon chip. Defaults to `neutral`. */\n  iconTone?: BadgeTone;\n  size?: EntityCellSize;\n  href?: string;\n  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n  /** Rendered at the end of the row (copy button, external link, badge). */\n  trailing?: ReactNode;\n  className?: string;\n};\n\n/**\n * A two-line table cell for an entity: tinted icon chip, a title, and a muted\n * subtitle. The shape most \"which thing is this row about?\" columns want, and\n * the same shape inline references (account, document, connector) use in detail\n * views.\n */\nexport function EntityCell({\n  title,\n  subtitle,\n  icon,\n  iconTone = \"neutral\",\n  size = \"md\",\n  href,\n  onClick,\n  trailing,\n  className,\n}: EntityCellProps) {\n  const titleClasses = \"truncate font-medium text-foreground\";\n  return (\n    <div className={cn(\"flex min-w-0 items-center gap-2\", className)}>\n      {icon && (\n        <span\n          className={cn(\n            \"flex shrink-0 items-center justify-center rounded-md\",\n            CHIP_SIZE[size],\n            CHIP_TONE_CLASSES[iconTone],\n          )}\n        >\n          <Icon\n            {...(typeof icon === \"string\" ? { name: icon } : { icon })}\n            className=\"text-[0.85em]\"\n          />\n        </span>\n      )}\n      <span className=\"flex min-w-0 flex-col leading-tight\">\n        {href || onClick ? (\n          <a\n            href={href ?? \"#\"}\n            {...(onClick ? { onClick } : {})}\n            className={cn(titleClasses, \"hover:underline\")}\n          >\n            {title}\n          </a>\n        ) : (\n          <span className={titleClasses}>{title}</span>\n        )}\n        {subtitle !== undefined && (\n          <span className=\"truncate text-xs text-muted-foreground\">\n            {subtitle}\n          </span>\n        )}\n      </span>\n      {trailing && <span className=\"ml-auto shrink-0\">{trailing}</span>}\n    </div>\n  );\n}\n"],"names":["cn","jsx","Icon","jsxs"],"mappings":";;;;;;AAMA,MAAM,oBAA+C;AAAA,EACnD,SAAS;AAAA,EACT,SACE;AAAA,EACF,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,MAAM;AACR;AAIA,MAAM,YAA4C;AAAA,EAChD,IAAI;AAAA,EACJ,IAAI;AACN;AAwBO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAoB;AAClB,QAAM,eAAe;AACrB,yCACG,OAAA,EAAI,WAAWA,MAAAA,GAAG,mCAAmC,SAAS,GAC5D,UAAA;AAAA,IAAA,QACCC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWD,MAAAA;AAAAA,UACT;AAAA,UACA,UAAU,IAAI;AAAA,UACd,kBAAkB,QAAQ;AAAA,QAAA;AAAA,QAG5B,UAAAC,2BAAAA;AAAAA,UAACC,KAAAA;AAAAA,UAAA;AAAA,YACE,GAAI,OAAO,SAAS,WAAW,EAAE,MAAM,KAAA,IAAS,EAAE,KAAA;AAAA,YACnD,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MACZ;AAAA,IAAA;AAAA,IAGJC,2BAAAA,KAAC,QAAA,EAAK,WAAU,uCACb,UAAA;AAAA,MAAA,QAAQ,UACPF,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAM,QAAQ;AAAA,UACb,GAAI,UAAU,EAAE,QAAA,IAAY,CAAA;AAAA,UAC7B,WAAWD,MAAAA,GAAG,cAAc,iBAAiB;AAAA,UAE5C,UAAA;AAAA,QAAA;AAAA,MAAA,IAGHC,2BAAAA,IAAC,QAAA,EAAK,WAAW,cAAe,UAAA,OAAM;AAAA,MAEvC,aAAa,UACZA,2BAAAA,IAAC,QAAA,EAAK,WAAU,0CACb,UAAA,SAAA,CACH;AAAA,IAAA,GAEJ;AAAA,IACC,YAAYA,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAoB,UAAA,SAAA,CAAS;AAAA,EAAA,GAC5D;AAEJ;;"}

package/dist/data/cells/EntityCell.d.ts

@@ -0,0 +1,27 @@
+import { MouseEvent, ReactNode } from 'react';
+import { StaticIconComponent } from '../Icon';
+import { BadgeTone } from '../Badge';
+export type EntityCellSize = "sm" | "md";
+export type EntityCellProps = {
+    /** Primary line. Rendered as a link when `href` is set. */
+    title: ReactNode;
+    /** Secondary muted line — type, id, qualifier. */
+    subtitle?: ReactNode;
+    icon?: string | StaticIconComponent;
+    /** Tints the icon chip. Defaults to `neutral`. */
+    iconTone?: BadgeTone;
+    size?: EntityCellSize;
+    href?: string;
+    onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+    /** Rendered at the end of the row (copy button, external link, badge). */
+    trailing?: ReactNode;
+    className?: string;
+};
+/**
+ * A two-line table cell for an entity: tinted icon chip, a title, and a muted
+ * subtitle. The shape most "which thing is this row about?" columns want, and
+ * the same shape inline references (account, document, connector) use in detail
+ * views.
+ */
+export declare function EntityCell({ title, subtitle, icon, iconTone, size, href, onClick, trailing, className, }: EntityCellProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=EntityCell.d.ts.map

package/dist/data/cells/EntityCell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EntityCell.d.ts","sourceRoot":"","sources":["../../../src/data/cells/EntityCell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAExD,OAAO,EAAQ,KAAK,mBAAmB,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAY1C,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,CAAC;AAOzC,MAAM,MAAM,eAAe,GAAG;IAC5B,2DAA2D;IAC3D,KAAK,EAAE,SAAS,CAAC;IACjB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACpC,kDAAkD;IAClD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACzD,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,QAAoB,EACpB,IAAW,EACX,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,SAAS,GACV,EAAE,eAAe,2CAuCjB"}

package/dist/data/cells/EntityCell.js

@@ -0,0 +1,64 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+import { cn } from "../../lib/utils.js";
+import { Icon } from "../Icon.js";
+const CHIP_TONE_CLASSES = {
+  neutral: "bg-muted text-muted-foreground",
+  success: "bg-emerald-500/12 text-emerald-700 [[data-theme=dark]_&]:text-emerald-400",
+  danger: "bg-rose-500/12 text-rose-700 [[data-theme=dark]_&]:text-rose-400",
+  warning: "bg-amber-400/15 text-amber-700 [[data-theme=dark]_&]:text-amber-400",
+  info: "bg-sky-500/12 text-sky-700 [[data-theme=dark]_&]:text-sky-400"
+};
+const CHIP_SIZE = {
+  sm: "size-6 text-sm",
+  md: "size-7 text-base"
+};
+function EntityCell({
+  title,
+  subtitle,
+  icon,
+  iconTone = "neutral",
+  size = "md",
+  href,
+  onClick,
+  trailing,
+  className
+}) {
+  const titleClasses = "truncate font-medium text-foreground";
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0 items-center gap-2", className), children: [
+    icon && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "flex shrink-0 items-center justify-center rounded-md",
+          CHIP_SIZE[size],
+          CHIP_TONE_CLASSES[iconTone]
+        ),
+        children: /* @__PURE__ */ jsx(
+          Icon,
+          {
+            ...typeof icon === "string" ? { name: icon } : { icon },
+            className: "text-[0.85em]"
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col leading-tight", children: [
+      href || onClick ? /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: href ?? "#",
+          ...onClick ? { onClick } : {},
+          className: cn(titleClasses, "hover:underline"),
+          children: title
+        }
+      ) : /* @__PURE__ */ jsx("span", { className: titleClasses, children: title }),
+      subtitle !== void 0 && /* @__PURE__ */ jsx("span", { className: "truncate text-xs text-muted-foreground", children: subtitle })
+    ] }),
+    trailing && /* @__PURE__ */ jsx("span", { className: "ml-auto shrink-0", children: trailing })
+  ] });
+}
+export {
+  EntityCell
+};
+//# sourceMappingURL=EntityCell.js.map

package/dist/data/cells/EntityCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EntityCell.js","sources":["../../../src/data/cells/EntityCell.tsx"],"sourcesContent":["import { type MouseEvent, type ReactNode } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"../Icon\";\nimport type { BadgeTone } from \"../Badge\";\n\n/** Soft chip fill + matching foreground, one entry per Badge tone. */\nconst CHIP_TONE_CLASSES: Record<BadgeTone, string> = {\n  neutral: \"bg-muted text-muted-foreground\",\n  success:\n    \"bg-emerald-500/12 text-emerald-700 [[data-theme=dark]_&]:text-emerald-400\",\n  danger: \"bg-rose-500/12 text-rose-700 [[data-theme=dark]_&]:text-rose-400\",\n  warning: \"bg-amber-400/15 text-amber-700 [[data-theme=dark]_&]:text-amber-400\",\n  info: \"bg-sky-500/12 text-sky-700 [[data-theme=dark]_&]:text-sky-400\",\n};\n\nexport type EntityCellSize = \"sm\" | \"md\";\n\nconst CHIP_SIZE: Record<EntityCellSize, string> = {\n  sm: \"size-6 text-sm\",\n  md: \"size-7 text-base\",\n};\n\nexport type EntityCellProps = {\n  /** Primary line. Rendered as a link when `href` is set. */\n  title: ReactNode;\n  /** Secondary muted line — type, id, qualifier. */\n  subtitle?: ReactNode;\n  icon?: string | StaticIconComponent;\n  /** Tints the icon chip. Defaults to `neutral`. */\n  iconTone?: BadgeTone;\n  size?: EntityCellSize;\n  href?: string;\n  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n  /** Rendered at the end of the row (copy button, external link, badge). */\n  trailing?: ReactNode;\n  className?: string;\n};\n\n/**\n * A two-line table cell for an entity: tinted icon chip, a title, and a muted\n * subtitle. The shape most \"which thing is this row about?\" columns want, and\n * the same shape inline references (account, document, connector) use in detail\n * views.\n */\nexport function EntityCell({\n  title,\n  subtitle,\n  icon,\n  iconTone = \"neutral\",\n  size = \"md\",\n  href,\n  onClick,\n  trailing,\n  className,\n}: EntityCellProps) {\n  const titleClasses = \"truncate font-medium text-foreground\";\n  return (\n    <div className={cn(\"flex min-w-0 items-center gap-2\", className)}>\n      {icon && (\n        <span\n          className={cn(\n            \"flex shrink-0 items-center justify-center rounded-md\",\n            CHIP_SIZE[size],\n            CHIP_TONE_CLASSES[iconTone],\n          )}\n        >\n          <Icon\n            {...(typeof icon === \"string\" ? { name: icon } : { icon })}\n            className=\"text-[0.85em]\"\n          />\n        </span>\n      )}\n      <span className=\"flex min-w-0 flex-col leading-tight\">\n        {href || onClick ? (\n          <a\n            href={href ?? \"#\"}\n            {...(onClick ? { onClick } : {})}\n            className={cn(titleClasses, \"hover:underline\")}\n          >\n            {title}\n          </a>\n        ) : (\n          <span className={titleClasses}>{title}</span>\n        )}\n        {subtitle !== undefined && (\n          <span className=\"truncate text-xs text-muted-foreground\">\n            {subtitle}\n          </span>\n        )}\n      </span>\n      {trailing && <span className=\"ml-auto shrink-0\">{trailing}</span>}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;AAMA,MAAM,oBAA+C;AAAA,EACnD,SAAS;AAAA,EACT,SACE;AAAA,EACF,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,MAAM;AACR;AAIA,MAAM,YAA4C;AAAA,EAChD,IAAI;AAAA,EACJ,IAAI;AACN;AAwBO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAoB;AAClB,QAAM,eAAe;AACrB,8BACG,OAAA,EAAI,WAAW,GAAG,mCAAmC,SAAS,GAC5D,UAAA;AAAA,IAAA,QACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,UAAU,IAAI;AAAA,UACd,kBAAkB,QAAQ;AAAA,QAAA;AAAA,QAG5B,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACE,GAAI,OAAO,SAAS,WAAW,EAAE,MAAM,KAAA,IAAS,EAAE,KAAA;AAAA,YACnD,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MACZ;AAAA,IAAA;AAAA,IAGJ,qBAAC,QAAA,EAAK,WAAU,uCACb,UAAA;AAAA,MAAA,QAAQ,UACP;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAM,QAAQ;AAAA,UACb,GAAI,UAAU,EAAE,QAAA,IAAY,CAAA;AAAA,UAC7B,WAAW,GAAG,cAAc,iBAAiB;AAAA,UAE5C,UAAA;AAAA,QAAA;AAAA,MAAA,IAGH,oBAAC,QAAA,EAAK,WAAW,cAAe,UAAA,OAAM;AAAA,MAEvC,aAAa,UACZ,oBAAC,QAAA,EAAK,WAAU,0CACb,UAAA,SAAA,CACH;AAAA,IAAA,GAEJ;AAAA,IACC,YAAY,oBAAC,QAAA,EAAK,WAAU,oBAAoB,UAAA,SAAA,CAAS;AAAA,EAAA,GAC5D;AAEJ;"}

package/dist/data/chat/Attachment.cjs

@@ -2,33 +2,72 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const ai = require("ai");
 const utils = require("../../lib/utils.cjs");
 const Icon = require("../Icon.cjs");
 const button = require("../../components/button.cjs");
+const attachmentUpload = require("./attachment-upload.cjs");
 const UiAdd = require("../../icons/components/UiAdd.cjs");
 const UiFile = require("../../icons/components/UiFile.cjs");
 const UiClose = require("../../icons/components/UiClose.cjs");
-const MAX_ATTACHMENT_BYTES = 5 * 1024 * 1024;
-function AttachmentButton({ onAdd, disabled, className }) {
+function AttachmentButton({
+  onAdd,
+  disabled,
+  className,
+  upload = attachmentUpload.createAttachmentUploadAdapter(),
+  files = [],
+  acceptedMediaTypes,
+  limits,
+  onError
+}) {
   const inputRef = react.useRef(null);
+  const [uploading, setUploading] = react.useState(false);
+  const resolvedLimits = { ...attachmentUpload.DEFAULT_ATTACHMENT_LIMITS, ...limits };
   const onChange = async (e) => {
     const list = e.target.files;
     if (!list || list.length === 0) return;
-    const tooBig = Array.from(list).filter((f) => f.size > MAX_ATTACHMENT_BYTES);
-    if (tooBig.length > 0) {
-      console.warn(`clicky-ui: ${tooBig.length} attachment(s) exceed ${MAX_ATTACHMENT_BYTES} bytes and were skipped`);
+    const selected = Array.from(list);
+    const currentBytes = files.reduce(
+      (total, file) => total + Number(file.size ?? 0),
+      0
+    );
+    let validationError = "";
+    if (files.length + selected.length > resolvedLimits.maxFiles) {
+      validationError = `Attachments are limited to ${resolvedLimits.maxFiles} files.`;
+    } else if (selected.some((file) => file.size > resolvedLimits.maxFileBytes)) {
+      validationError = `Each attachment must be ${resolvedLimits.maxFileBytes} bytes or smaller.`;
+    } else if (currentBytes + selected.reduce((total, file) => total + file.size, 0) > resolvedLimits.maxRequestBytes) {
+      validationError = `Attachments are limited to ${resolvedLimits.maxRequestBytes} bytes per request.`;
+    }
+    if (validationError) {
+      onError == null ? void 0 : onError(validationError);
+      e.target.value = "";
+      return;
     }
-    const ok = Array.from(list).filter((f) => f.size <= MAX_ATTACHMENT_BYTES);
-    if (ok.length > 0) {
-      const dt = new DataTransfer();
-      ok.forEach((f) => dt.items.add(f));
-      onAdd(await ai.convertFileListToFileUIParts(dt.files));
+    setUploading(true);
+    try {
+      onAdd(await Promise.all(selected.map((file) => upload(file))));
+      onError == null ? void 0 : onError("");
+    } catch (error) {
+      onError == null ? void 0 : onError(error instanceof Error ? error.message : String(error));
+    } finally {
+      setUploading(false);
     }
     e.target.value = "";
   };
+  const accept = acceptedMediaTypes == null ? void 0 : acceptedMediaTypes.join(",");
+  const capabilityDisabled = acceptedMediaTypes != null && acceptedMediaTypes.length === 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("input", { ref: inputRef, type: "file", multiple: true, hidden: true, onChange }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        ref: inputRef,
+        type: "file",
+        multiple: true,
+        hidden: true,
+        onChange,
+        ...accept ? { accept } : {}
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsx(
       button.Button,
       {
@@ -36,7 +75,8 @@ function AttachmentButton({ onAdd, disabled, className }) {
         size: "icon",
         variant: "ghost",
         "aria-label": "Attach files",
-        disabled,
+        disabled: disabled || uploading || capabilityDisabled,
+        title: capabilityDisabled ? "The selected model does not support attachments" : void 0,
         onClick: () => {
           var _a;
           return (_a = inputRef.current) == null ? void 0 : _a.click();

package/dist/data/chat/Attachment.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Attachment.cjs","sources":["../../../src/data/chat/Attachment.tsx"],"sourcesContent":["import { useRef } from \"react\";\nimport { convertFileListToFileUIParts } from \"ai\";\nimport { cn } from \"../../lib/utils\";\nimport { Icon } from \"../Icon\";\nimport { Button } from \"../../components/button\";\nimport { UiAdd, UiClose, UiFile } from \"../../icons\";\nimport type { FileUIPart } from \"./types\";\n\n/** Files larger than this are rejected client-side: attachments are inlined as\n *  data URLs in the request body, so large files would bloat every turn. */\nconst MAX_ATTACHMENT_BYTES = 5 * 1024 * 1024;\n\nexport type AttachmentButtonProps = {\n  /** Called with newly selected files converted to FileUIParts. */\n  onAdd: (parts: FileUIPart[]) => void;\n  disabled?: boolean;\n  className?: string;\n};\n\n/** A paperclip-style button that opens the file picker and emits the chosen\n *  files as FileUIParts (data-URL encoded). */\nexport function AttachmentButton({ onAdd, disabled, className }: AttachmentButtonProps) {\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const onChange = async (e: React.ChangeEvent<HTMLInputElement>) => {\n    const list = e.target.files;\n    if (!list || list.length === 0) return;\n    const tooBig = Array.from(list).filter((f) => f.size > MAX_ATTACHMENT_BYTES);\n    if (tooBig.length > 0) {\n      console.warn(`clicky-ui: ${tooBig.length} attachment(s) exceed ${MAX_ATTACHMENT_BYTES} bytes and were skipped`);\n    }\n    const ok = Array.from(list).filter((f) => f.size <= MAX_ATTACHMENT_BYTES);\n    if (ok.length > 0) {\n      const dt = new DataTransfer();\n      ok.forEach((f) => dt.items.add(f));\n      onAdd(await convertFileListToFileUIParts(dt.files));\n    }\n    e.target.value = \"\";\n  };\n\n  return (\n    <>\n      <input ref={inputRef} type=\"file\" multiple hidden onChange={onChange} />\n      <Button\n        type=\"button\"\n        size=\"icon\"\n        variant=\"ghost\"\n        aria-label=\"Attach files\"\n        disabled={disabled}\n        onClick={() => inputRef.current?.click()}\n        className={className}\n      >\n        <Icon icon={UiAdd} className=\"size-4\" />\n      </Button>\n    </>\n  );\n}\n\nexport type AttachmentListProps = {\n  files: FileUIPart[];\n  onRemove: (index: number) => void;\n  className?: string;\n};\n\n/** Chips/thumbnails for the pending attachments, each removable. */\nexport function AttachmentList({ files, onRemove, className }: AttachmentListProps) {\n  if (files.length === 0) return null;\n  return (\n    <div className={cn(\"flex flex-wrap gap-2 px-1\", className)}>\n      {files.map((file, i) => (\n        <div\n          key={`${file.filename ?? \"file\"}-${i}`}\n          className=\"flex items-center gap-1.5 rounded-md border border-border bg-background py-1 pl-2 pr-1 text-xs\"\n        >\n          {file.mediaType?.startsWith(\"image/\") && file.url ? (\n            <img src={file.url} alt={file.filename ?? \"\"} className=\"size-6 rounded object-cover\" />\n          ) : (\n            <Icon icon={UiFile} className=\"size-3.5 text-muted-foreground\" />\n          )}\n          <span className=\"max-w-32 truncate\">{file.filename ?? file.mediaType ?? \"file\"}</span>\n          <button\n            type=\"button\"\n            aria-label=\"Remove attachment\"\n            onClick={() => onRemove(i)}\n            className=\"rounded p-0.5 text-muted-foreground hover:bg-accent hover:text-accent-foreground\"\n          >\n            <Icon icon={UiClose} className=\"size-3\" />\n          </button>\n        </div>\n      ))}\n    </div>\n  );\n}\n"],"names":["useRef","convertFileListToFileUIParts","jsxs","Fragment","jsx","Button","Icon","UiAdd","cn","UiFile","UiClose"],"mappings":";;;;;;;;;;;AAUA,MAAM,uBAAuB,IAAI,OAAO;AAWjC,SAAS,iBAAiB,EAAE,OAAO,UAAU,aAAoC;AACtF,QAAM,WAAWA,MAAAA,OAAyB,IAAI;AAE9C,QAAM,WAAW,OAAO,MAA2C;AACjE,UAAM,OAAO,EAAE,OAAO;AACtB,QAAI,CAAC,QAAQ,KAAK,WAAW,EAAG;AAChC,UAAM,SAAS,MAAM,KAAK,IAAI,EAAE,OAAO,CAAC,MAAM,EAAE,OAAO,oBAAoB;AAC3E,QAAI,OAAO,SAAS,GAAG;AACrB,cAAQ,KAAK,cAAc,OAAO,MAAM,yBAAyB,oBAAoB,yBAAyB;AAAA,IAChH;AACA,UAAM,KAAK,MAAM,KAAK,IAAI,EAAE,OAAO,CAAC,MAAM,EAAE,QAAQ,oBAAoB;AACxE,QAAI,GAAG,SAAS,GAAG;AACjB,YAAM,KAAK,IAAI,aAAA;AACf,SAAG,QAAQ,CAAC,MAAM,GAAG,MAAM,IAAI,CAAC,CAAC;AACjC,YAAM,MAAMC,GAAAA,6BAA6B,GAAG,KAAK,CAAC;AAAA,IACpD;AACA,MAAE,OAAO,QAAQ;AAAA,EACnB;AAEA,SACEC,2BAAAA,KAAAC,qBAAA,EACE,UAAA;AAAA,IAAAC,2BAAAA,IAAC,SAAA,EAAM,KAAK,UAAU,MAAK,QAAO,UAAQ,MAAC,QAAM,MAAC,SAAA,CAAoB;AAAA,IACtEA,2BAAAA;AAAAA,MAACC,OAAAA;AAAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,MAAK;AAAA,QACL,SAAQ;AAAA,QACR,cAAW;AAAA,QACX;AAAA,QACA,SAAS,MAAA;;AAAM,gCAAS,YAAT,mBAAkB;AAAA;AAAA,QACjC;AAAA,QAEA,UAAAD,2BAAAA,IAACE,WAAA,EAAK,MAAMC,MAAAA,OAAO,WAAU,SAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EACxC,GACF;AAEJ;AASO,SAAS,eAAe,EAAE,OAAO,UAAU,aAAkC;AAClF,MAAI,MAAM,WAAW,EAAG,QAAO;AAC/B,SACEH,2BAAAA,IAAC,OAAA,EAAI,WAAWI,MAAAA,GAAG,6BAA6B,SAAS,GACtD,UAAA,MAAM,IAAI,CAAC,MAAM,MAAA;;AAChBN,sCAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAU;AAAA,QAET,UAAA;AAAA,YAAA,UAAK,cAAL,mBAAgB,WAAW,cAAa,KAAK,MAC5CE,2BAAAA,IAAC,OAAA,EAAI,KAAK,KAAK,KAAK,KAAK,KAAK,YAAY,IAAI,WAAU,8BAAA,CAA8B,mCAErFE,KAAAA,MAAA,EAAK,MAAMG,OAAAA,QAAQ,WAAU,iCAAA,CAAiC;AAAA,UAEjEL,2BAAAA,IAAC,UAAK,WAAU,qBAAqB,eAAK,YAAY,KAAK,aAAa,OAAA,CAAO;AAAA,UAC/EA,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,cAAW;AAAA,cACX,SAAS,MAAM,SAAS,CAAC;AAAA,cACzB,WAAU;AAAA,cAEV,UAAAA,2BAAAA,IAACE,WAAA,EAAK,MAAMI,QAAAA,SAAS,WAAU,SAAA,CAAS;AAAA,YAAA;AAAA,UAAA;AAAA,QAC1C;AAAA,MAAA;AAAA,MAhBK,GAAG,KAAK,YAAY,MAAM,IAAI,CAAC;AAAA,IAAA;AAAA,GAkBvC,GACH;AAEJ;;;"}
+{"version":3,"file":"Attachment.cjs","sources":["../../../src/data/chat/Attachment.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport { Icon } from \"../Icon\";\nimport { Button } from \"../../components/button\";\nimport { UiAdd, UiClose, UiFile } from \"../../icons\";\nimport type { FileUIPart } from \"./types\";\nimport {\n  createAttachmentUploadAdapter,\n  DEFAULT_ATTACHMENT_LIMITS,\n  type AttachmentFilePart,\n  type AttachmentLimits,\n  type AttachmentUploadAdapter,\n} from \"./attachment-upload\";\n\nexport type AttachmentButtonProps = {\n  /** Called with newly selected files converted to FileUIParts. */\n  onAdd: (parts: FileUIPart[]) => void;\n  disabled?: boolean;\n  className?: string;\n  upload?: AttachmentUploadAdapter;\n  files?: FileUIPart[];\n  acceptedMediaTypes?: string[];\n  limits?: AttachmentLimits;\n  onError?: (message: string) => void;\n};\n\n/** A paperclip-style button that uploads selected files and emits durable file\n * descriptors. Binary content never enters the chat message body. */\nexport function AttachmentButton({\n  onAdd,\n  disabled,\n  className,\n  upload = createAttachmentUploadAdapter(),\n  files = [],\n  acceptedMediaTypes,\n  limits,\n  onError,\n}: AttachmentButtonProps) {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [uploading, setUploading] = useState(false);\n  const resolvedLimits = { ...DEFAULT_ATTACHMENT_LIMITS, ...limits };\n\n  const onChange = async (e: React.ChangeEvent<HTMLInputElement>) => {\n    const list = e.target.files;\n    if (!list || list.length === 0) return;\n    const selected = Array.from(list);\n    const currentBytes = files.reduce(\n      (total, file) =>\n        total + Number((file as Partial<AttachmentFilePart>).size ?? 0),\n      0,\n    );\n    let validationError = \"\";\n    if (files.length + selected.length > resolvedLimits.maxFiles) {\n      validationError = `Attachments are limited to ${resolvedLimits.maxFiles} files.`;\n    } else if (\n      selected.some((file) => file.size > resolvedLimits.maxFileBytes)\n    ) {\n      validationError = `Each attachment must be ${resolvedLimits.maxFileBytes} bytes or smaller.`;\n    } else if (\n      currentBytes + selected.reduce((total, file) => total + file.size, 0) >\n      resolvedLimits.maxRequestBytes\n    ) {\n      validationError = `Attachments are limited to ${resolvedLimits.maxRequestBytes} bytes per request.`;\n    }\n    if (validationError) {\n      onError?.(validationError);\n      e.target.value = \"\";\n      return;\n    }\n    setUploading(true);\n    try {\n      onAdd(await Promise.all(selected.map((file) => upload(file))));\n      onError?.(\"\");\n    } catch (error) {\n      onError?.(error instanceof Error ? error.message : String(error));\n    } finally {\n      setUploading(false);\n    }\n    e.target.value = \"\";\n  };\n\n  const accept = acceptedMediaTypes?.join(\",\");\n  const capabilityDisabled =\n    acceptedMediaTypes != null && acceptedMediaTypes.length === 0;\n\n  return (\n    <>\n      <input\n        ref={inputRef}\n        type=\"file\"\n        multiple\n        hidden\n        onChange={onChange}\n        {...(accept ? { accept } : {})}\n      />\n      <Button\n        type=\"button\"\n        size=\"icon\"\n        variant=\"ghost\"\n        aria-label=\"Attach files\"\n        disabled={disabled || uploading || capabilityDisabled}\n        title={\n          capabilityDisabled\n            ? \"The selected model does not support attachments\"\n            : undefined\n        }\n        onClick={() => inputRef.current?.click()}\n        className={className}\n      >\n        <Icon icon={UiAdd} className=\"size-4\" />\n      </Button>\n    </>\n  );\n}\n\nexport type AttachmentListProps = {\n  files: FileUIPart[];\n  onRemove: (index: number) => void;\n  className?: string;\n};\n\n/** Chips/thumbnails for the pending attachments, each removable. */\nexport function AttachmentList({ files, onRemove, className }: AttachmentListProps) {\n  if (files.length === 0) return null;\n  return (\n    <div className={cn(\"flex flex-wrap gap-2 px-1\", className)}>\n      {files.map((file, i) => (\n        <div\n          key={`${file.filename ?? \"file\"}-${i}`}\n          className=\"flex items-center gap-1.5 rounded-md border border-border bg-background py-1 pl-2 pr-1 text-xs\"\n        >\n          {file.mediaType?.startsWith(\"image/\") && file.url ? (\n            <img src={file.url} alt={file.filename ?? \"\"} className=\"size-6 rounded object-cover\" />\n          ) : (\n            <Icon icon={UiFile} className=\"size-3.5 text-muted-foreground\" />\n          )}\n          <span className=\"max-w-32 truncate\">{file.filename ?? file.mediaType ?? \"file\"}</span>\n          <button\n            type=\"button\"\n            aria-label=\"Remove attachment\"\n            onClick={() => onRemove(i)}\n            className=\"rounded p-0.5 text-muted-foreground hover:bg-accent hover:text-accent-foreground\"\n          >\n            <Icon icon={UiClose} className=\"size-3\" />\n          </button>\n        </div>\n      ))}\n    </div>\n  );\n}\n"],"names":["createAttachmentUploadAdapter","useRef","useState","DEFAULT_ATTACHMENT_LIMITS","jsxs","Fragment","jsx","Button","Icon","UiAdd","cn","UiFile","UiClose"],"mappings":";;;;;;;;;;;AA4BO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAASA,iBAAAA,8BAAA;AAAA,EACT,QAAQ,CAAA;AAAA,EACR;AAAA,EACA;AAAA,EACA;AACF,GAA0B;AACxB,QAAM,WAAWC,MAAAA,OAAyB,IAAI;AAC9C,QAAM,CAAC,WAAW,YAAY,IAAIC,MAAAA,SAAS,KAAK;AAChD,QAAM,iBAAiB,EAAE,GAAGC,iBAAAA,2BAA2B,GAAG,OAAA;AAE1D,QAAM,WAAW,OAAO,MAA2C;AACjE,UAAM,OAAO,EAAE,OAAO;AACtB,QAAI,CAAC,QAAQ,KAAK,WAAW,EAAG;AAChC,UAAM,WAAW,MAAM,KAAK,IAAI;AAChC,UAAM,eAAe,MAAM;AAAA,MACzB,CAAC,OAAO,SACN,QAAQ,OAAQ,KAAqC,QAAQ,CAAC;AAAA,MAChE;AAAA,IAAA;AAEF,QAAI,kBAAkB;AACtB,QAAI,MAAM,SAAS,SAAS,SAAS,eAAe,UAAU;AAC5D,wBAAkB,8BAA8B,eAAe,QAAQ;AAAA,IACzE,WACE,SAAS,KAAK,CAAC,SAAS,KAAK,OAAO,eAAe,YAAY,GAC/D;AACA,wBAAkB,2BAA2B,eAAe,YAAY;AAAA,IAC1E,WACE,eAAe,SAAS,OAAO,CAAC,OAAO,SAAS,QAAQ,KAAK,MAAM,CAAC,IACpE,eAAe,iBACf;AACA,wBAAkB,8BAA8B,eAAe,eAAe;AAAA,IAChF;AACA,QAAI,iBAAiB;AACnB,yCAAU;AACV,QAAE,OAAO,QAAQ;AACjB;AAAA,IACF;AACA,iBAAa,IAAI;AACjB,QAAI;AACF,YAAM,MAAM,QAAQ,IAAI,SAAS,IAAI,CAAC,SAAS,OAAO,IAAI,CAAC,CAAC,CAAC;AAC7D,yCAAU;AAAA,IACZ,SAAS,OAAO;AACd,yCAAU,iBAAiB,QAAQ,MAAM,UAAU,OAAO,KAAK;AAAA,IACjE,UAAA;AACE,mBAAa,KAAK;AAAA,IACpB;AACA,MAAE,OAAO,QAAQ;AAAA,EACnB;AAEA,QAAM,SAAS,yDAAoB,KAAK;AACxC,QAAM,qBACJ,sBAAsB,QAAQ,mBAAmB,WAAW;AAE9D,SACEC,2BAAAA,KAAAC,qBAAA,EACE,UAAA;AAAA,IAAAC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,MAAK;AAAA,QACL,UAAQ;AAAA,QACR,QAAM;AAAA,QACN;AAAA,QACC,GAAI,SAAS,EAAE,WAAW,CAAA;AAAA,MAAC;AAAA,IAAA;AAAA,IAE9BA,2BAAAA;AAAAA,MAACC,OAAAA;AAAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,MAAK;AAAA,QACL,SAAQ;AAAA,QACR,cAAW;AAAA,QACX,UAAU,YAAY,aAAa;AAAA,QACnC,OACE,qBACI,oDACA;AAAA,QAEN,SAAS,MAAA;;AAAM,gCAAS,YAAT,mBAAkB;AAAA;AAAA,QACjC;AAAA,QAEA,UAAAD,2BAAAA,IAACE,WAAA,EAAK,MAAMC,MAAAA,OAAO,WAAU,SAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EACxC,GACF;AAEJ;AASO,SAAS,eAAe,EAAE,OAAO,UAAU,aAAkC;AAClF,MAAI,MAAM,WAAW,EAAG,QAAO;AAC/B,SACEH,2BAAAA,IAAC,OAAA,EAAI,WAAWI,MAAAA,GAAG,6BAA6B,SAAS,GACtD,UAAA,MAAM,IAAI,CAAC,MAAM,MAAA;;AAChBN,sCAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAU;AAAA,QAET,UAAA;AAAA,YAAA,UAAK,cAAL,mBAAgB,WAAW,cAAa,KAAK,MAC5CE,2BAAAA,IAAC,OAAA,EAAI,KAAK,KAAK,KAAK,KAAK,KAAK,YAAY,IAAI,WAAU,8BAAA,CAA8B,mCAErFE,KAAAA,MAAA,EAAK,MAAMG,OAAAA,QAAQ,WAAU,iCAAA,CAAiC;AAAA,UAEjEL,2BAAAA,IAAC,UAAK,WAAU,qBAAqB,eAAK,YAAY,KAAK,aAAa,OAAA,CAAO;AAAA,UAC/EA,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,cAAW;AAAA,cACX,SAAS,MAAM,SAAS,CAAC;AAAA,cACzB,WAAU;AAAA,cAEV,UAAAA,2BAAAA,IAACE,WAAA,EAAK,MAAMI,QAAAA,SAAS,WAAU,SAAA,CAAS;AAAA,YAAA;AAAA,UAAA;AAAA,QAC1C;AAAA,MAAA;AAAA,MAhBK,GAAG,KAAK,YAAY,MAAM,IAAI,CAAC;AAAA,IAAA;AAAA,GAkBvC,GACH;AAEJ;;;"}

package/dist/data/chat/Attachment.d.ts

@@ -1,13 +1,19 @@
 import { FileUIPart } from './types';
+import { AttachmentLimits, AttachmentUploadAdapter } from './attachment-upload';
 export type AttachmentButtonProps = {
     /** Called with newly selected files converted to FileUIParts. */
     onAdd: (parts: FileUIPart[]) => void;
     disabled?: boolean;
     className?: string;
+    upload?: AttachmentUploadAdapter;
+    files?: FileUIPart[];
+    acceptedMediaTypes?: string[];
+    limits?: AttachmentLimits;
+    onError?: (message: string) => void;
 };
-/** A paperclip-style button that opens the file picker and emits the chosen
- *  files as FileUIParts (data-URL encoded). */
-export declare function AttachmentButton({ onAdd, disabled, className }: AttachmentButtonProps): import("react/jsx-runtime").JSX.Element;
+/** A paperclip-style button that uploads selected files and emits durable file
+ * descriptors. Binary content never enters the chat message body. */
+export declare function AttachmentButton({ onAdd, disabled, className, upload, files, acceptedMediaTypes, limits, onError, }: AttachmentButtonProps): import("react/jsx-runtime").JSX.Element;
 export type AttachmentListProps = {
     files: FileUIPart[];
     onRemove: (index: number) => void;

package/dist/data/chat/Attachment.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Attachment.d.ts","sourceRoot":"","sources":["../../../src/data/chat/Attachment.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAM1C,MAAM,MAAM,qBAAqB,GAAG;IAClC,iEAAiE;IACjE,KAAK,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;+CAC+C;AAC/C,wBAAgB,gBAAgB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,qBAAqB,2CAmCrF;AAED,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,oEAAoE;AACpE,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,mBAAmB,kDA2BjF"}
+{"version":3,"file":"Attachment.d.ts","sourceRoot":"","sources":["../../../src/data/chat/Attachment.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,EAIL,KAAK,gBAAgB,EACrB,KAAK,uBAAuB,EAC7B,MAAM,qBAAqB,CAAC;AAE7B,MAAM,MAAM,qBAAqB,GAAG;IAClC,iEAAiE;IACjE,KAAK,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,uBAAuB,CAAC;IACjC,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC9B,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC,CAAC;AAEF;qEACqE;AACrE,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,QAAQ,EACR,SAAS,EACT,MAAwC,EACxC,KAAU,EACV,kBAAkB,EAClB,MAAM,EACN,OAAO,GACR,EAAE,qBAAqB,2CA4EvB;AAED,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,oEAAoE;AACpE,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,mBAAmB,kDA2BjF"}

package/dist/data/chat/Attachment.js

@@ -1,32 +1,71 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { useRef } from "react";
-import { convertFileListToFileUIParts } from "ai";
+import { useRef, useState } from "react";
 import { cn } from "../../lib/utils.js";
 import { Icon } from "../Icon.js";
 import { Button } from "../../components/button.js";
+import { DEFAULT_ATTACHMENT_LIMITS, createAttachmentUploadAdapter } from "./attachment-upload.js";
 import { UiAdd } from "../../icons/components/UiAdd.js";
 import { UiFile } from "../../icons/components/UiFile.js";
 import { UiClose } from "../../icons/components/UiClose.js";
-const MAX_ATTACHMENT_BYTES = 5 * 1024 * 1024;
-function AttachmentButton({ onAdd, disabled, className }) {
+function AttachmentButton({
+  onAdd,
+  disabled,
+  className,
+  upload = createAttachmentUploadAdapter(),
+  files = [],
+  acceptedMediaTypes,
+  limits,
+  onError
+}) {
   const inputRef = useRef(null);
+  const [uploading, setUploading] = useState(false);
+  const resolvedLimits = { ...DEFAULT_ATTACHMENT_LIMITS, ...limits };
   const onChange = async (e) => {
     const list = e.target.files;
     if (!list || list.length === 0) return;
-    const tooBig = Array.from(list).filter((f) => f.size > MAX_ATTACHMENT_BYTES);
-    if (tooBig.length > 0) {
-      console.warn(`clicky-ui: ${tooBig.length} attachment(s) exceed ${MAX_ATTACHMENT_BYTES} bytes and were skipped`);
+    const selected = Array.from(list);
+    const currentBytes = files.reduce(
+      (total, file) => total + Number(file.size ?? 0),
+      0
+    );
+    let validationError = "";
+    if (files.length + selected.length > resolvedLimits.maxFiles) {
+      validationError = `Attachments are limited to ${resolvedLimits.maxFiles} files.`;
+    } else if (selected.some((file) => file.size > resolvedLimits.maxFileBytes)) {
+      validationError = `Each attachment must be ${resolvedLimits.maxFileBytes} bytes or smaller.`;
+    } else if (currentBytes + selected.reduce((total, file) => total + file.size, 0) > resolvedLimits.maxRequestBytes) {
+      validationError = `Attachments are limited to ${resolvedLimits.maxRequestBytes} bytes per request.`;
+    }
+    if (validationError) {
+      onError == null ? void 0 : onError(validationError);
+      e.target.value = "";
+      return;
     }
-    const ok = Array.from(list).filter((f) => f.size <= MAX_ATTACHMENT_BYTES);
-    if (ok.length > 0) {
-      const dt = new DataTransfer();
-      ok.forEach((f) => dt.items.add(f));
-      onAdd(await convertFileListToFileUIParts(dt.files));
+    setUploading(true);
+    try {
+      onAdd(await Promise.all(selected.map((file) => upload(file))));
+      onError == null ? void 0 : onError("");
+    } catch (error) {
+      onError == null ? void 0 : onError(error instanceof Error ? error.message : String(error));
+    } finally {
+      setUploading(false);
     }
     e.target.value = "";
   };
+  const accept = acceptedMediaTypes == null ? void 0 : acceptedMediaTypes.join(",");
+  const capabilityDisabled = acceptedMediaTypes != null && acceptedMediaTypes.length === 0;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("input", { ref: inputRef, type: "file", multiple: true, hidden: true, onChange }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        type: "file",
+        multiple: true,
+        hidden: true,
+        onChange,
+        ...accept ? { accept } : {}
+      }
+    ),
     /* @__PURE__ */ jsx(
       Button,
       {
@@ -34,7 +73,8 @@ function AttachmentButton({ onAdd, disabled, className }) {
         size: "icon",
         variant: "ghost",
         "aria-label": "Attach files",
-        disabled,
+        disabled: disabled || uploading || capabilityDisabled,
+        title: capabilityDisabled ? "The selected model does not support attachments" : void 0,
         onClick: () => {
           var _a;
           return (_a = inputRef.current) == null ? void 0 : _a.click();

package/dist/data/chat/Attachment.js.map

@@ -1 +1 @@
-{"version":3,"file":"Attachment.js","sources":["../../../src/data/chat/Attachment.tsx"],"sourcesContent":["import { useRef } from \"react\";\nimport { convertFileListToFileUIParts } from \"ai\";\nimport { cn } from \"../../lib/utils\";\nimport { Icon } from \"../Icon\";\nimport { Button } from \"../../components/button\";\nimport { UiAdd, UiClose, UiFile } from \"../../icons\";\nimport type { FileUIPart } from \"./types\";\n\n/** Files larger than this are rejected client-side: attachments are inlined as\n *  data URLs in the request body, so large files would bloat every turn. */\nconst MAX_ATTACHMENT_BYTES = 5 * 1024 * 1024;\n\nexport type AttachmentButtonProps = {\n  /** Called with newly selected files converted to FileUIParts. */\n  onAdd: (parts: FileUIPart[]) => void;\n  disabled?: boolean;\n  className?: string;\n};\n\n/** A paperclip-style button that opens the file picker and emits the chosen\n *  files as FileUIParts (data-URL encoded). */\nexport function AttachmentButton({ onAdd, disabled, className }: AttachmentButtonProps) {\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const onChange = async (e: React.ChangeEvent<HTMLInputElement>) => {\n    const list = e.target.files;\n    if (!list || list.length === 0) return;\n    const tooBig = Array.from(list).filter((f) => f.size > MAX_ATTACHMENT_BYTES);\n    if (tooBig.length > 0) {\n      console.warn(`clicky-ui: ${tooBig.length} attachment(s) exceed ${MAX_ATTACHMENT_BYTES} bytes and were skipped`);\n    }\n    const ok = Array.from(list).filter((f) => f.size <= MAX_ATTACHMENT_BYTES);\n    if (ok.length > 0) {\n      const dt = new DataTransfer();\n      ok.forEach((f) => dt.items.add(f));\n      onAdd(await convertFileListToFileUIParts(dt.files));\n    }\n    e.target.value = \"\";\n  };\n\n  return (\n    <>\n      <input ref={inputRef} type=\"file\" multiple hidden onChange={onChange} />\n      <Button\n        type=\"button\"\n        size=\"icon\"\n        variant=\"ghost\"\n        aria-label=\"Attach files\"\n        disabled={disabled}\n        onClick={() => inputRef.current?.click()}\n        className={className}\n      >\n        <Icon icon={UiAdd} className=\"size-4\" />\n      </Button>\n    </>\n  );\n}\n\nexport type AttachmentListProps = {\n  files: FileUIPart[];\n  onRemove: (index: number) => void;\n  className?: string;\n};\n\n/** Chips/thumbnails for the pending attachments, each removable. */\nexport function AttachmentList({ files, onRemove, className }: AttachmentListProps) {\n  if (files.length === 0) return null;\n  return (\n    <div className={cn(\"flex flex-wrap gap-2 px-1\", className)}>\n      {files.map((file, i) => (\n        <div\n          key={`${file.filename ?? \"file\"}-${i}`}\n          className=\"flex items-center gap-1.5 rounded-md border border-border bg-background py-1 pl-2 pr-1 text-xs\"\n        >\n          {file.mediaType?.startsWith(\"image/\") && file.url ? (\n            <img src={file.url} alt={file.filename ?? \"\"} className=\"size-6 rounded object-cover\" />\n          ) : (\n            <Icon icon={UiFile} className=\"size-3.5 text-muted-foreground\" />\n          )}\n          <span className=\"max-w-32 truncate\">{file.filename ?? file.mediaType ?? \"file\"}</span>\n          <button\n            type=\"button\"\n            aria-label=\"Remove attachment\"\n            onClick={() => onRemove(i)}\n            className=\"rounded p-0.5 text-muted-foreground hover:bg-accent hover:text-accent-foreground\"\n          >\n            <Icon icon={UiClose} className=\"size-3\" />\n          </button>\n        </div>\n      ))}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;AAUA,MAAM,uBAAuB,IAAI,OAAO;AAWjC,SAAS,iBAAiB,EAAE,OAAO,UAAU,aAAoC;AACtF,QAAM,WAAW,OAAyB,IAAI;AAE9C,QAAM,WAAW,OAAO,MAA2C;AACjE,UAAM,OAAO,EAAE,OAAO;AACtB,QAAI,CAAC,QAAQ,KAAK,WAAW,EAAG;AAChC,UAAM,SAAS,MAAM,KAAK,IAAI,EAAE,OAAO,CAAC,MAAM,EAAE,OAAO,oBAAoB;AAC3E,QAAI,OAAO,SAAS,GAAG;AACrB,cAAQ,KAAK,cAAc,OAAO,MAAM,yBAAyB,oBAAoB,yBAAyB;AAAA,IAChH;AACA,UAAM,KAAK,MAAM,KAAK,IAAI,EAAE,OAAO,CAAC,MAAM,EAAE,QAAQ,oBAAoB;AACxE,QAAI,GAAG,SAAS,GAAG;AACjB,YAAM,KAAK,IAAI,aAAA;AACf,SAAG,QAAQ,CAAC,MAAM,GAAG,MAAM,IAAI,CAAC,CAAC;AACjC,YAAM,MAAM,6BAA6B,GAAG,KAAK,CAAC;AAAA,IACpD;AACA,MAAE,OAAO,QAAQ;AAAA,EACnB;AAEA,SACE,qBAAA,UAAA,EACE,UAAA;AAAA,IAAA,oBAAC,SAAA,EAAM,KAAK,UAAU,MAAK,QAAO,UAAQ,MAAC,QAAM,MAAC,SAAA,CAAoB;AAAA,IACtE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,MAAK;AAAA,QACL,SAAQ;AAAA,QACR,cAAW;AAAA,QACX;AAAA,QACA,SAAS,MAAA;;AAAM,gCAAS,YAAT,mBAAkB;AAAA;AAAA,QACjC;AAAA,QAEA,UAAA,oBAAC,MAAA,EAAK,MAAM,OAAO,WAAU,SAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EACxC,GACF;AAEJ;AASO,SAAS,eAAe,EAAE,OAAO,UAAU,aAAkC;AAClF,MAAI,MAAM,WAAW,EAAG,QAAO;AAC/B,SACE,oBAAC,OAAA,EAAI,WAAW,GAAG,6BAA6B,SAAS,GACtD,UAAA,MAAM,IAAI,CAAC,MAAM,MAAA;;AAChB;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAU;AAAA,QAET,UAAA;AAAA,YAAA,UAAK,cAAL,mBAAgB,WAAW,cAAa,KAAK,MAC5C,oBAAC,OAAA,EAAI,KAAK,KAAK,KAAK,KAAK,KAAK,YAAY,IAAI,WAAU,8BAAA,CAA8B,wBAErF,MAAA,EAAK,MAAM,QAAQ,WAAU,iCAAA,CAAiC;AAAA,UAEjE,oBAAC,UAAK,WAAU,qBAAqB,eAAK,YAAY,KAAK,aAAa,OAAA,CAAO;AAAA,UAC/E;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,cAAW;AAAA,cACX,SAAS,MAAM,SAAS,CAAC;AAAA,cACzB,WAAU;AAAA,cAEV,UAAA,oBAAC,MAAA,EAAK,MAAM,SAAS,WAAU,SAAA,CAAS;AAAA,YAAA;AAAA,UAAA;AAAA,QAC1C;AAAA,MAAA;AAAA,MAhBK,GAAG,KAAK,YAAY,MAAM,IAAI,CAAC;AAAA,IAAA;AAAA,GAkBvC,GACH;AAEJ;"}
+{"version":3,"file":"Attachment.js","sources":["../../../src/data/chat/Attachment.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport { Icon } from \"../Icon\";\nimport { Button } from \"../../components/button\";\nimport { UiAdd, UiClose, UiFile } from \"../../icons\";\nimport type { FileUIPart } from \"./types\";\nimport {\n  createAttachmentUploadAdapter,\n  DEFAULT_ATTACHMENT_LIMITS,\n  type AttachmentFilePart,\n  type AttachmentLimits,\n  type AttachmentUploadAdapter,\n} from \"./attachment-upload\";\n\nexport type AttachmentButtonProps = {\n  /** Called with newly selected files converted to FileUIParts. */\n  onAdd: (parts: FileUIPart[]) => void;\n  disabled?: boolean;\n  className?: string;\n  upload?: AttachmentUploadAdapter;\n  files?: FileUIPart[];\n  acceptedMediaTypes?: string[];\n  limits?: AttachmentLimits;\n  onError?: (message: string) => void;\n};\n\n/** A paperclip-style button that uploads selected files and emits durable file\n * descriptors. Binary content never enters the chat message body. */\nexport function AttachmentButton({\n  onAdd,\n  disabled,\n  className,\n  upload = createAttachmentUploadAdapter(),\n  files = [],\n  acceptedMediaTypes,\n  limits,\n  onError,\n}: AttachmentButtonProps) {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [uploading, setUploading] = useState(false);\n  const resolvedLimits = { ...DEFAULT_ATTACHMENT_LIMITS, ...limits };\n\n  const onChange = async (e: React.ChangeEvent<HTMLInputElement>) => {\n    const list = e.target.files;\n    if (!list || list.length === 0) return;\n    const selected = Array.from(list);\n    const currentBytes = files.reduce(\n      (total, file) =>\n        total + Number((file as Partial<AttachmentFilePart>).size ?? 0),\n      0,\n    );\n    let validationError = \"\";\n    if (files.length + selected.length > resolvedLimits.maxFiles) {\n      validationError = `Attachments are limited to ${resolvedLimits.maxFiles} files.`;\n    } else if (\n      selected.some((file) => file.size > resolvedLimits.maxFileBytes)\n    ) {\n      validationError = `Each attachment must be ${resolvedLimits.maxFileBytes} bytes or smaller.`;\n    } else if (\n      currentBytes + selected.reduce((total, file) => total + file.size, 0) >\n      resolvedLimits.maxRequestBytes\n    ) {\n      validationError = `Attachments are limited to ${resolvedLimits.maxRequestBytes} bytes per request.`;\n    }\n    if (validationError) {\n      onError?.(validationError);\n      e.target.value = \"\";\n      return;\n    }\n    setUploading(true);\n    try {\n      onAdd(await Promise.all(selected.map((file) => upload(file))));\n      onError?.(\"\");\n    } catch (error) {\n      onError?.(error instanceof Error ? error.message : String(error));\n    } finally {\n      setUploading(false);\n    }\n    e.target.value = \"\";\n  };\n\n  const accept = acceptedMediaTypes?.join(\",\");\n  const capabilityDisabled =\n    acceptedMediaTypes != null && acceptedMediaTypes.length === 0;\n\n  return (\n    <>\n      <input\n        ref={inputRef}\n        type=\"file\"\n        multiple\n        hidden\n        onChange={onChange}\n        {...(accept ? { accept } : {})}\n      />\n      <Button\n        type=\"button\"\n        size=\"icon\"\n        variant=\"ghost\"\n        aria-label=\"Attach files\"\n        disabled={disabled || uploading || capabilityDisabled}\n        title={\n          capabilityDisabled\n            ? \"The selected model does not support attachments\"\n            : undefined\n        }\n        onClick={() => inputRef.current?.click()}\n        className={className}\n      >\n        <Icon icon={UiAdd} className=\"size-4\" />\n      </Button>\n    </>\n  );\n}\n\nexport type AttachmentListProps = {\n  files: FileUIPart[];\n  onRemove: (index: number) => void;\n  className?: string;\n};\n\n/** Chips/thumbnails for the pending attachments, each removable. */\nexport function AttachmentList({ files, onRemove, className }: AttachmentListProps) {\n  if (files.length === 0) return null;\n  return (\n    <div className={cn(\"flex flex-wrap gap-2 px-1\", className)}>\n      {files.map((file, i) => (\n        <div\n          key={`${file.filename ?? \"file\"}-${i}`}\n          className=\"flex items-center gap-1.5 rounded-md border border-border bg-background py-1 pl-2 pr-1 text-xs\"\n        >\n          {file.mediaType?.startsWith(\"image/\") && file.url ? (\n            <img src={file.url} alt={file.filename ?? \"\"} className=\"size-6 rounded object-cover\" />\n          ) : (\n            <Icon icon={UiFile} className=\"size-3.5 text-muted-foreground\" />\n          )}\n          <span className=\"max-w-32 truncate\">{file.filename ?? file.mediaType ?? \"file\"}</span>\n          <button\n            type=\"button\"\n            aria-label=\"Remove attachment\"\n            onClick={() => onRemove(i)}\n            className=\"rounded p-0.5 text-muted-foreground hover:bg-accent hover:text-accent-foreground\"\n          >\n            <Icon icon={UiClose} className=\"size-3\" />\n          </button>\n        </div>\n      ))}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}