@epam/ai-dial-attachment-input 1.2.0-dev.75 → 1.2.0-dev.80

package/index.js

@@ -1,102 +1,99 @@
-import { AttachmentErrorReason as e, AttachmentType as t, MIME_TYPE_EXT_MAP as n, RequestStatus as r, buildCssVars as i, mergeClasses as a } from "@epam/ai-dial-chat-shared";
-import { useCallback as o, useEffect as s, useId as c, useMemo as l, useRef as u, useState as d } from "react";
-import { IconClipboard as f, IconDownload as p, IconExternalLink as m, IconFile as h, IconFileDescription as g, IconFileTypeBmp as _, IconFileTypeCss as v, IconFileTypeCsv as y, IconFileTypeDoc as b, IconFileTypeDocx as x, IconFileTypeHtml as S, IconFileTypeJpg as C, IconFileTypeJs as w, IconFileTypeJsx as T, IconFileTypePdf as E, IconFileTypePhp as D, IconFileTypePng as O, IconFileTypePpt as k, IconFileTypeRs as A, IconFileTypeSql as j, IconFileTypeSvg as M, IconFileTypeTs as N, IconFileTypeTsx as P, IconFileTypeTxt as F, IconFileTypeVue as I, IconFileTypeXls as L, IconFileTypeXml as R, IconFileTypeZip as ee, IconFileX as te, IconMusic as z, IconPaperclip as B, IconPhoto as V, IconReload as ne, IconTerminal2 as H, IconVideo as re, IconX as ie } from "@tabler/icons-react";
-import { DIAL_ICON_SIZE as U, DIAL_KIT_ICON_STROKE as W, ElementSize as G, GhostIconButton as ae, Highlight as oe, Skeleton as se, SkeletonVariant as ce, Spinner as le, StaticIconButton as ue } from "@epam/ai-dial-ui-kit";
-import { Fragment as de, jsx as K, jsxs as q } from "react/jsx-runtime";
+import { AttachmentErrorReason as e, AttachmentType as t, MIME_TYPE_EXT_MAP as n, RequestStatus as r, buildCssVars as i, getBaseMimeType as a, mergeClasses as o, normalizeMimeType as s } from "@epam/ai-dial-chat-shared";
+import { useCallback as c, useEffect as l, useId as u, useMemo as d, useRef as f, useState as p } from "react";
+import { IconClipboard as m, IconDownload as h, IconExternalLink as g, IconFile as _, IconFileDescription as v, IconFileTypeBmp as y, IconFileTypeCss as b, IconFileTypeCsv as x, IconFileTypeDoc as S, IconFileTypeDocx as C, IconFileTypeHtml as w, IconFileTypeJpg as T, IconFileTypeJs as E, IconFileTypeJsx as D, IconFileTypePdf as O, IconFileTypePhp as k, IconFileTypePng as A, IconFileTypePpt as j, IconFileTypeRs as M, IconFileTypeSql as N, IconFileTypeSvg as P, IconFileTypeTs as F, IconFileTypeTsx as I, IconFileTypeTxt as L, IconFileTypeVue as ee, IconFileTypeXls as R, IconFileTypeXml as z, IconFileTypeZip as B, IconFileX as V, IconMusic as H, IconPaperclip as te, IconPhoto as U, IconReload as ne, IconTerminal2 as re, IconVideo as ie, IconX as ae } from "@tabler/icons-react";
+import { DIAL_ICON_SIZE as W, DIAL_KIT_ICON_STROKE as G, ElementSize as oe, GhostIconButton as se, Highlight as ce, Skeleton as le, SkeletonVariant as ue, Spinner as de, StaticIconButton as fe } from "@epam/ai-dial-ui-kit";
+import { Fragment as pe, jsx as K, jsxs as q } from "react/jsx-runtime";
 //#region src/utils/attachment.ts
-var fe = () => `${Date.now()}-${Math.random().toString(36).slice(2)}`, pe = (e) => {
+var me = () => `${Date.now()}-${Math.random().toString(36).slice(2)}`, he = (e) => {
 	if (e == null) return "";
 	let t = e.lastIndexOf(".");
 	return t > 0 ? e.slice(0, t) : e;
-}, me = {
+}, ge = {
 	image: "Image files",
 	audio: "Audio files",
 	video: "Video files",
 	text: "Text files",
 	"*": "All files"
-}, he = { "image/jpeg": "JPEG" }, ge = (e, t = me) => e.map((e) => {
-	let r = e.toLowerCase().split(";")[0].trim();
+}, _e = { "image/jpeg": "JPEG" }, ve = (e, t = ge) => e.map((e) => {
+	let r = a(e);
 	if (r.endsWith("/*")) {
 		let e = r.slice(0, -2);
 		return t[e] ?? `${e} files`;
 	}
-	let i = he[r];
-	if (i) return i;
-	let a = n[r];
-	if (a) return a.toUpperCase();
-	let o = r.split("/")[1];
-	return o == null ? e.toUpperCase() : o.toUpperCase();
-}).join(", "), _e = (e, t) => t.length === 0 ? !1 : t.some((t) => {
-	if (t === "*" || t === "*/*") return !0;
-	if (t.endsWith("/*")) {
-		let n = t.slice(0, -2);
-		return e.startsWith(`${n}/`);
-	}
-	return e === t;
-}), ve = (e) => {
-	if (!e) return h;
-	if (e.startsWith("image/")) switch (e) {
-		case "image/jpeg":
-		case "image/jpg": return C;
-		case "image/png": return O;
-		case "image/svg+xml": return M;
-		case "image/bmp": return _;
-		default: return V;
+	let i = s(r), o = _e[i];
+	if (o) return o;
+	let c = n[i];
+	if (c) return c.toUpperCase();
+	let l = i.split("/")[1];
+	return l == null ? e.toUpperCase() : l.toUpperCase();
+}).join(", "), ye = (e, t) => {
+	if (t.length === 0) return !1;
+	let n = a(e), r = s(n);
+	return t.some((e) => {
+		let t = a(e);
+		if (t === "*" || t === "*/*") return !0;
+		if (t.endsWith("/*")) {
+			let e = t.slice(0, -2);
+			return n.startsWith(`${e}/`) || r.startsWith(`${e}/`);
+		}
+		return r === s(t);
+	});
+}, be = (e) => {
+	if (!e) return _;
+	let t = s(e);
+	if (t.startsWith("image/")) switch (t) {
+		case "image/jpeg": return T;
+		case "image/png": return A;
+		case "image/svg+xml": return P;
+		case "image/bmp": return y;
+		default: return U;
 	}
-	if (e.startsWith("video/")) return re;
-	if (e.startsWith("audio/")) return z;
-	switch (e) {
-		case "application/pdf": return E;
-		case "application/msword":
-		case "application/vnd.ms-word": return b;
-		case "application/vnd.openxmlformats-officedocument.wordprocessingml.document": return x;
-		case "application/vnd.ms-powerpoint": return k;
-		case "application/vnd.openxmlformats-officedocument.presentationml.presentation": return k;
-		case "application/vnd.ms-excel": return L;
-		case "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": return L;
+	if (t.startsWith("video/")) return ie;
+	if (t.startsWith("audio/")) return H;
+	switch (t) {
+		case "application/pdf": return O;
+		case "application/msword": return S;
+		case "application/vnd.openxmlformats-officedocument.wordprocessingml.document": return C;
+		case "application/vnd.ms-powerpoint": return j;
+		case "application/vnd.openxmlformats-officedocument.presentationml.presentation": return j;
+		case "application/vnd.ms-excel": return R;
+		case "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": return R;
 		case "application/zip":
-		case "application/x-zip-compressed":
-		case "application/x-rar-compressed":
+		case "application/vnd.rar":
 		case "application/x-7z-compressed":
 		case "application/gzip":
-		case "application/x-tar": return ee;
-		case "text/csv": return y;
-		case "text/plain": return F;
+		case "application/x-tar": return B;
+		case "text/csv": return x;
+		case "text/plain": return L;
 		case "text/html":
-		case "application/xhtml+xml": return S;
-		case "text/xml":
-		case "application/xml": return R;
-		case "application/sql":
-		case "text/x-sql": return j;
-		case "text/javascript":
-		case "application/javascript": return w;
-		case "text/jsx": return T;
-		case "application/typescript":
-		case "text/typescript": return N;
-		case "text/tsx": return P;
-		case "text/css": return v;
-		case "text/x-php":
-		case "application/x-php": return D;
-		case "text/x-rustsrc":
-		case "application/x-rust": return A;
-		case "text/x-vue": return I;
-		default: return h;
+		case "application/xhtml+xml": return w;
+		case "application/xml": return z;
+		case "application/sql": return N;
+		case "text/javascript": return E;
+		case "text/jsx": return D;
+		case "text/typescript": return F;
+		case "text/tsx": return I;
+		case "text/css": return b;
+		case "text/x-php": return k;
+		case "text/x-rustsrc": return M;
+		case "text/x-vue": return ee;
+		default: return _;
 	}
-}, ye = (e) => {
+}, xe = (e) => {
 	let { type: n, contentType: r } = e;
-	return n === t.Prompt ? H : n === t.Pasted ? f : n === t.Image ? V : ve(r ?? "");
-}, be = (e) => {
-	let t = e.toLowerCase().split(";")[0].trim(), r = n[t];
+	return n === t.Prompt ? re : n === t.Pasted ? m : n === t.Image ? U : be(r ?? "");
+}, Se = (e) => {
+	let t = s(e), r = n[t];
 	if (r) return r;
 	let i = t.split("/")[1];
 	if (i && !i.startsWith("vnd.") && !i.includes("+")) return i;
-}, xe = (e, n) => {
+}, Ce = (e, n) => {
 	let { type: r, name: i, contentType: a } = e;
 	if (r === t.Prompt) return n.promptLabel ?? "Prompt";
 	if (r === t.Pasted) return n.pastedLabel ?? "Pasted";
 	if (r === t.Image) return n.imageLabel ?? "Image";
 	if (a) {
-		let e = be(a);
+		let e = Se(a);
 		if (e) return `.${e}`;
 	}
 	if (i == null) return "";
@@ -109,10 +106,10 @@ var fe = () => `${Date.now()}-${Math.random().toString(36).slice(2)}`, pe = (e)
 		isError: l,
 		isImage: u,
 		isLink: d,
-		BottomIcon: d ? null : ye(e),
-		typeLabel: d ? null : xe(e, n)
+		BottomIcon: d ? null : xe(e),
+		typeLabel: d ? null : Ce(e, n)
 	};
-}, Se = 5, Ce = "flex size-[84px] items-center justify-center rounded-xl border", Y = {
+}, we = 5, Te = "flex size-[84px] items-center justify-center rounded-xl border", Y = {
 	tray: "dial-ai-attachment-tray",
 	trayItem: "dial-ai-attachment-tray-item",
 	tile: "dial-ai-attachment-tile",
@@ -131,106 +128,106 @@ var fe = () => `${Date.now()}-${Math.random().toString(36).slice(2)}`, pe = (e)
 	track: "_track_s2es2_50",
 	actionButton: "_actionButton_s2es2_56",
 	imageActionButton: "_imageActionButton_s2es2_60"
-}, Z = ({ ariaLabel: e, errorTitle: t, errorDescId: n, onClick: r, id: i, icon: o, className: s }) => /* @__PURE__ */ K(ue, {
-	icon: o,
-	size: G.Small,
-	className: a("opacity-0 focus-visible:opacity-100 group-focus-within/attachment-tile:opacity-100 group-hover/attachment-tile:opacity-100", X.actionButton, s, Y.tileAction),
+}, Z = ({ ariaLabel: e, errorTitle: t, errorDescId: n, onClick: r, id: i, icon: a, className: s }) => /* @__PURE__ */ K(fe, {
+	icon: a,
+	size: oe.Small,
+	className: o("opacity-0 focus-visible:opacity-100 group-focus-within/attachment-tile:opacity-100 group-hover/attachment-tile:opacity-100", X.actionButton, s, Y.tileAction),
 	"aria-label": e,
 	"aria-describedby": t ? n : void 0,
 	onClick: (e) => {
 		e.stopPropagation(), r(i);
 	}
-}), we = ({ ...e }) => /* @__PURE__ */ K(Z, {
+}), Ee = ({ ...e }) => /* @__PURE__ */ K(Z, {
 	icon: /* @__PURE__ */ K(ne, {
-		size: U.SM,
+		size: W.SM,
 		"aria-hidden": !0,
-		stroke: W
+		stroke: G
 	}),
 	className: X.retryIcon,
 	...e
-}), Te = ({ ...e }) => /* @__PURE__ */ K(Z, {
-	icon: /* @__PURE__ */ K(p, {
-		size: U.SM,
+}), De = ({ ...e }) => /* @__PURE__ */ K(Z, {
+	icon: /* @__PURE__ */ K(h, {
+		size: W.SM,
 		"aria-hidden": !0,
-		stroke: W
+		stroke: G
 	}),
 	...e
-}), Ee = ({ ...e }) => /* @__PURE__ */ K(Z, {
-	icon: /* @__PURE__ */ K(m, {
-		size: U.SM,
+}), Oe = ({ ...e }) => /* @__PURE__ */ K(Z, {
+	icon: /* @__PURE__ */ K(g, {
+		size: W.SM,
 		"aria-hidden": !0,
-		stroke: W
+		stroke: G
 	}),
 	...e
-}), De = ({ ...e }) => /* @__PURE__ */ K(Z, {
-	icon: /* @__PURE__ */ K(ie, {
-		size: U.SM,
+}), ke = ({ ...e }) => /* @__PURE__ */ K(Z, {
+	icon: /* @__PURE__ */ K(ae, {
+		size: W.SM,
 		"aria-hidden": !0,
-		stroke: W
+		stroke: G
 	}),
 	...e
-}), Oe = {
+}), Ae = {
 	[e.Network]: "Upload failed · network error",
 	[e.UnsupportedType]: "Upload failed · unsupported file type",
 	[e.FileTooLarge]: "Upload failed · file too large"
-}, ke = ({ attachment: t, searchQuery: n = "", onClick: i, onRetry: s, labels: u, styles: d, onDownload: f, isPasted: p, isLink: m, cssVars: h, onExpand: g, isExpandable: _, onRemove: v, isSelected: y }) => {
-	let { clickLabel: b = "Download attachment", retryLabel: x = "Retry upload", removeLabel: S = "Remove attachment", openInNewTabLabel: C = "Open in new tab", sizeLabel: w, uploadingLabel: T = "Uploading", errorReasonLabels: E, genericErrorLabel: D = "Upload failed" } = u ?? {}, { typography: O, className: k } = d ?? {}, { id: A, name: j, status: M, errorReason: N } = t, P = M === r.Loading, F = M === r.Error, I = c(), L = F ? N && (E?.[N] ?? Oe[N]) || D : "", { BottomIcon: R, typeLabel: ee } = J(t), te = !F && !P && f && !m, z = F && !!s && N !== e.UnsupportedType && N !== e.FileTooLarge, B = Number(!!te) + Number(!!z) + Number(!!m) + Number(!!v), V = B > 1 ? "pe-11" : B === 1 ? "pe-5" : void 0, ne = (e) => {
+}, je = ({ attachment: t, searchQuery: n = "", onClick: i, onRetry: a, labels: s, styles: l, onDownload: f, isPasted: p, isLink: m, cssVars: h, onExpand: g, isExpandable: _, onRemove: v, isSelected: y }) => {
+	let { clickLabel: b = "Download attachment", retryLabel: x = "Retry upload", removeLabel: S = "Remove attachment", openInNewTabLabel: C = "Open in new tab", sizeLabel: w, uploadingLabel: T = "Uploading", errorReasonLabels: E, genericErrorLabel: D = "Upload failed" } = s ?? {}, { typography: O, className: k } = l ?? {}, { id: A, name: j, status: M, errorReason: N } = t, P = M === r.Loading, F = M === r.Error, I = u(), L = F ? N && (E?.[N] ?? Ae[N]) || D : "", { BottomIcon: ee, typeLabel: R } = J(t), z = !F && !P && f && !m, B = F && !!a && N !== e.UnsupportedType && N !== e.FileTooLarge, V = Number(!!z) + Number(!!B) + Number(!!m) + Number(!!v), H = V > 1 ? "pe-11" : V === 1 ? "pe-5" : void 0, te = (e) => {
 		e.target === e.currentTarget && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), i?.(t.id));
-	}, H = l(() => p ? j : pe(j), [p, j]), re = o(() => {
+	}, U = d(() => p ? j : he(j), [p, j]), ne = c(() => {
 		window.open(t.referenceUrl, "_blank", "noopener,noreferrer");
-	}, [t]), ie = a(Ce, "group/attachment-tile relative flex-col justify-between items-start gap-1 overflow-hidden p-1.5", X.tile, !F && X.hovered, y && X.selected, F && X.tileError, Y.tile, y && Y.tileSelected), U = /* @__PURE__ */ K("div", {
-		title: H,
-		className: a(O?.nameClassName ?? "dial-caption-text", "line-clamp-2 w-full min-w-0 break-words", X.nameText, !F && V, Y.tileName),
-		children: n ? /* @__PURE__ */ K(oe, {
-			text: H,
+	}, [t]), re = o(Te, "group/attachment-tile relative flex-col justify-between items-start gap-1 overflow-hidden p-1.5", X.tile, !F && X.hovered, y && X.selected, F && X.tileError, Y.tile, y && Y.tileSelected), ie = /* @__PURE__ */ K("div", {
+		title: U,
+		className: o(O?.nameClassName ?? "dial-caption-text", "line-clamp-2 w-full min-w-0 break-words", X.nameText, !F && H, Y.tileName),
+		children: n ? /* @__PURE__ */ K(ce, {
+			text: U,
 			query: n,
 			maxLines: 2
-		}) : H
-	}), W = R && /* @__PURE__ */ q("div", {
-		className: a("flex w-full items-center gap-1", F && V, Y.tileType),
-		children: [/* @__PURE__ */ K(R, {
+		}) : U
+	}), ae = ee && /* @__PURE__ */ q("div", {
+		className: o("flex w-full items-center gap-1", F && H, Y.tileType),
+		children: [/* @__PURE__ */ K(ee, {
 			size: 16,
 			className: X.typeText,
 			"aria-hidden": !0
 		}), /* @__PURE__ */ K("span", {
-			className: a(O?.metaClassName ?? "dial-caption-text", "min-w-0 flex-1 truncate", X.typeText),
-			children: w ? `${ee} · ${w}` : ee
+			className: o(O?.metaClassName ?? "dial-caption-text", "min-w-0 flex-1 truncate", X.typeText),
+			children: w ? `${R} · ${w}` : R
 		})]
-	}), G = () => {
+	}), W = () => {
 		_ && g ? g(A) : i && i(A);
-	}, ae = /* @__PURE__ */ q(de, { children: [
-		U,
-		W,
+	}, G = /* @__PURE__ */ q(pe, { children: [
+		ie,
+		ae,
 		P && /* @__PURE__ */ K("div", {
 			role: "progressbar",
 			"aria-label": T,
-			className: a("absolute start-[-1px] top-[-1px] flex size-full items-center justify-center rounded", X.track),
-			children: /* @__PURE__ */ K(le, { size: 32 })
+			className: o("absolute start-[-1px] top-[-1px] flex size-full items-center justify-center rounded", X.track),
+			children: /* @__PURE__ */ K(de, { size: 32 })
 		}),
 		/* @__PURE__ */ q("div", {
 			className: "absolute end-1 top-1 flex gap-1",
 			children: [
-				te && /* @__PURE__ */ K(Te, {
+				z && /* @__PURE__ */ K(De, {
 					ariaLabel: b,
 					errorTitle: L,
 					errorDescId: I,
 					onClick: f,
 					id: A
 				}),
-				z && /* @__PURE__ */ K(we, {
+				B && /* @__PURE__ */ K(Ee, {
 					ariaLabel: x,
 					errorTitle: L,
 					errorDescId: I,
-					onClick: s,
+					onClick: a,
 					id: A
 				}),
-				m && /* @__PURE__ */ K(Ee, {
+				m && /* @__PURE__ */ K(Oe, {
 					ariaLabel: C,
 					errorTitle: L,
 					errorDescId: I,
-					onClick: re
+					onClick: ne
 				}),
-				v && /* @__PURE__ */ K(De, {
+				v && /* @__PURE__ */ K(ke, {
 					ariaLabel: S,
 					errorTitle: L,
 					errorDescId: I,
@@ -249,26 +246,26 @@ var fe = () => `${Date.now()}-${Math.random().toString(36).slice(2)}`, pe = (e)
 	] });
 	return /* @__PURE__ */ K("div", {
 		style: h,
-		className: a("inline-flex", k),
+		className: o("inline-flex", k),
 		children: /* @__PURE__ */ K("div", {
 			role: "button",
 			tabIndex: 0,
 			"aria-label": b,
 			"aria-busy": P,
-			onClick: G,
-			onKeyDown: ne,
+			onClick: W,
+			onKeyDown: te,
 			style: h,
-			className: a(ie, "cursor-pointer focus-within:outline focus-within:outline-1 focus-within:outline-offset-1"),
-			children: ae
+			className: o(re, "cursor-pointer focus-within:outline focus-within:outline-1 focus-within:outline-offset-1"),
+			children: G
 		})
 	});
 }, Q = /* @__PURE__ */ function(e) {
 	return e.Idle = "idle", e.Loading = "loading", e.Loaded = "loaded", e.Error = "error", e;
-}({}), Ae = ({ enabled: e, src: t }) => {
-	let n = u(null), [r, i] = d("idle");
-	return s(() => {
+}({}), Me = ({ enabled: e, src: t }) => {
+	let n = f(null), [r, i] = p("idle");
+	return l(() => {
 		i(e && t ? "loading" : "idle");
-	}, [e, t]), s(() => {
+	}, [e, t]), l(() => {
 		let r = n.current;
 		if (!r || !e || !t) return;
 		let a = () => i("loaded"), o = () => i("error");
@@ -279,15 +276,15 @@ var fe = () => `${Date.now()}-${Math.random().toString(36).slice(2)}`, pe = (e)
 		imageRef: n,
 		imageLoadStatus: r
 	};
-}, je = ({ attachment: e, onExpand: n, onClick: r, labels: i, onRemove: o, cssVars: s, onDownload: c, styles: u, isSelected: d }) => {
-	let { clickLabel: f = "Open attachment", expandLabel: p = "Expand pasted text", removeLabel: m = "Remove attachment", downloadLabel: h = "Download attachment" } = i ?? {}, { className: g } = u ?? {}, { id: _, name: v } = e, y = e.previewUrl ?? e.url, b = e.type === t.Pasted && n !== void 0, { isLoading: x, isError: S, isImage: C } = l(() => J(e), [e]), w = r !== void 0 && !b && !x && !S, { imageRef: T, imageLoadStatus: E } = Ae({
+}, Ne = ({ attachment: e, onExpand: n, onClick: r, labels: i, onRemove: a, cssVars: s, onDownload: c, styles: l, isSelected: u }) => {
+	let { clickLabel: f = "Open attachment", expandLabel: p = "Expand pasted text", removeLabel: m = "Remove attachment", downloadLabel: h = "Download attachment" } = i ?? {}, { className: g } = l ?? {}, { id: _, name: v } = e, y = e.previewUrl ?? e.url, b = e.type === t.Pasted && n !== void 0, { isLoading: x, isError: S, isImage: C } = d(() => J(e), [e]), w = r !== void 0 && !b && !x && !S, { imageRef: T, imageLoadStatus: E } = Me({
 		enabled: C,
 		src: y
 	}), D = () => {
 		b && n ? n(_) : w && r && r(_);
 	};
 	return /* @__PURE__ */ K("div", {
-		className: a(Ce, "group/attachment-tile", w && "cursor-pointer", X.tile, d && X.selected, g, Y.tile, d && Y.tileSelected),
+		className: o(Te, "group/attachment-tile", w && "cursor-pointer", X.tile, u && X.selected, g, Y.tile, u && Y.tileSelected),
 		onClick: D,
 		onKeyDown: (e) => {
 			e.target === e.currentTarget && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), D());
@@ -301,28 +298,28 @@ var fe = () => `${Date.now()}-${Math.random().toString(36).slice(2)}`, pe = (e)
 			children: [
 				/* @__PURE__ */ q("div", {
 					className: "absolute end-1 top-1 z-10 flex gap-1",
-					children: [o && /* @__PURE__ */ K(De, {
+					children: [a && /* @__PURE__ */ K(ke, {
 						ariaLabel: m,
-						onClick: o,
+						onClick: a,
 						id: _,
 						className: X.imageActionButton
-					}), c && /* @__PURE__ */ K(Te, {
+					}), c && /* @__PURE__ */ K(De, {
 						ariaLabel: h,
 						onClick: c,
 						id: _,
 						className: X.imageActionButton
 					})]
 				}),
-				E !== Q.Loaded && /* @__PURE__ */ K(se, {
-					variant: ce.Rectangular,
+				E !== Q.Loaded && /* @__PURE__ */ K(le, {
+					variant: ue.Rectangular,
 					width: "100%",
 					height: "100%",
 					active: E === Q.Loading,
-					overlay: /* @__PURE__ */ K(V, {
-						size: U.LG,
+					overlay: /* @__PURE__ */ K(U, {
+						size: W.LG,
 						className: X.typeText,
 						"aria-hidden": !0,
-						stroke: W
+						stroke: G
 					}),
 					className: "absolute inset-0 rounded-xl"
 				}),
@@ -332,13 +329,13 @@ var fe = () => `${Date.now()}-${Math.random().toString(36).slice(2)}`, pe = (e)
 					alt: v,
 					loading: "lazy",
 					decoding: "async",
-					className: a("h-full w-full rounded-xl object-cover transition-opacity duration-200", E === Q.Loaded ? "opacity-100" : "opacity-0")
+					className: o("h-full w-full rounded-xl object-cover transition-opacity duration-200", E === Q.Loaded ? "opacity-100" : "opacity-0")
 				})
 			]
 		})
 	});
-}, Me = ({ attachment: e, searchQuery: n = "", onRemove: r, onRetry: a, onExpand: o, onClick: s, onDownload: c, labels: u, styles: d, isSelected: f }) => {
-	let { colors: p } = d ?? {}, m = e.type === t.Pasted, h = m && o !== void 0, g = i({
+}, Pe = ({ attachment: e, searchQuery: n = "", onRemove: r, onRetry: a, onExpand: o, onClick: s, onDownload: c, labels: l, styles: u, isSelected: f }) => {
+	let { colors: p } = u ?? {}, m = e.type === t.Pasted, h = m && o !== void 0, g = i({
 		"--ai-tile-bg": p?.background,
 		"--ai-tile-border": p?.border,
 		"--ai-tile-bg-hover": p?.backgroundHover,
@@ -354,18 +351,18 @@ var fe = () => `${Date.now()}-${Math.random().toString(36).slice(2)}`, pe = (e)
 		"--ai-tile-hover-icon-bg": p?.hoverIconBackground,
 		"--ai-tile-hover-icon-color": p?.hoverIconColor,
 		"--ai-tile-progress-track": p?.trackBackground
-	}), { isImage: _, isLink: v } = l(() => J(e), [e]);
-	return _ ? /* @__PURE__ */ K(je, {
+	}), { isImage: _, isLink: v } = d(() => J(e), [e]);
+	return _ ? /* @__PURE__ */ K(Ne, {
 		attachment: e,
-		labels: u,
+		labels: l,
 		onClick: s,
 		onExpand: o,
-		styles: d,
+		styles: u,
 		onRemove: r,
 		cssVars: g,
 		onDownload: c,
 		isSelected: f
-	}) : /* @__PURE__ */ K(ke, {
+	}) : /* @__PURE__ */ K(je, {
 		attachment: e,
 		searchQuery: n,
 		onClick: s,
@@ -374,23 +371,23 @@ var fe = () => `${Date.now()}-${Math.random().toString(36).slice(2)}`, pe = (e)
 		onDownload: c,
 		isLink: v,
 		isPasted: m,
-		styles: d,
-		labels: u,
+		styles: u,
+		labels: l,
 		onExpand: o,
 		cssVars: g,
 		isExpandable: h,
 		isSelected: f
 	});
-}, Ne = ({ attachments: e, onRemove: t, onRetry: n, onExpand: r, onAttachmentClick: i, labels: o, styles: s }) => {
-	let { ariaLabel: c = "Attached files", removeLabel: l, retryLabel: u, clickLabel: d, uploadingLabel: f } = o ?? {}, { className: p } = s ?? {};
+}, Fe = ({ attachments: e, onRemove: t, onRetry: n, onExpand: r, onAttachmentClick: i, labels: a, styles: s }) => {
+	let { ariaLabel: c = "Attached files", removeLabel: l, retryLabel: u, clickLabel: d, uploadingLabel: f } = a ?? {}, { className: p } = s ?? {};
 	return e.length === 0 ? null : /* @__PURE__ */ K("div", {
 		role: "list",
 		"aria-label": c,
-		className: a("flex w-full min-w-0 gap-2 overflow-x-auto", p, Y.tray),
+		className: o("flex w-full min-w-0 gap-2 overflow-x-auto", p, Y.tray),
 		children: e.map((e) => /* @__PURE__ */ K("div", {
 			role: "listitem",
 			className: Y.trayItem,
-			children: /* @__PURE__ */ K(Me, {
+			children: /* @__PURE__ */ K(Pe, {
 				attachment: e,
 				onRemove: t,
 				onRetry: n,
@@ -405,88 +402,88 @@ var fe = () => `${Date.now()}-${Math.random().toString(36).slice(2)}`, pe = (e)
 			})
 		}, e.id))
 	});
-}, Pe = {
+}, Ie = {
 	headerIcon: "_headerIcon_1dmgi_1",
 	headerLabel: "_headerLabel_1dmgi_2"
-}, Fe = (e, t) => `${e} ${t}${e === 1 ? "" : "s"}`, Ie = ({ attachments: e, onAttachmentClick: n, onDownloadAll: o, onRetry: s, labels: c, styles: l, selectedAttachmentId: u }) => {
-	let { ariaLabel: d = "Attachments", clickLabel: f = "Download attachment", retryLabel: m = "Retry upload", downloadAllLabel: g = "Download all", openInNewTabLabel: _, getHeaderLabel: v = (e) => Fe(e, "attachment"), promptLabel: y, pastedLabel: b, imageLabel: x } = c ?? {}, { typography: S, colors: C, className: w } = l ?? {}, T = i({ "--ai-group-text": C?.text });
+}, Le = (e, t) => `${e} ${t}${e === 1 ? "" : "s"}`, Re = ({ attachments: e, onAttachmentClick: n, onDownloadAll: a, onRetry: s, labels: c, styles: l, selectedAttachmentId: u }) => {
+	let { ariaLabel: d = "Attachments", clickLabel: f = "Download attachment", retryLabel: p = "Retry upload", downloadAllLabel: m = "Download all", openInNewTabLabel: g, getHeaderLabel: v = (e) => Le(e, "attachment"), promptLabel: y, pastedLabel: b, imageLabel: x } = c ?? {}, { typography: S, colors: C, className: w } = l ?? {}, T = i({ "--ai-group-text": C?.text });
 	if (e.length === 0) return null;
-	let E = e.some((e) => e.type === t.Image), D = e.some((e) => e.type !== t.Image), O = E && D, k = e.length >= 5, A = O ? B : E ? V : h, j = v(e.length), M = () => {
+	let E = e.some((e) => e.type === t.Image), D = e.some((e) => e.type !== t.Image), O = E && D, k = e.length >= 5, A = O ? te : E ? U : _, j = v(e.length), M = () => {
 		let t = e.filter((e) => e.status === r.Idle);
-		o ? o(t) : t.forEach((e) => n?.(e.id));
+		a ? a(t) : t.forEach((e) => n?.(e.id));
 	}, N = (t) => {
 		let n = e.find((e) => e.id === t);
-		n && o?.([n]);
+		n && a?.([n]);
 	};
 	return /* @__PURE__ */ q("div", {
 		role: "group",
 		"aria-label": d,
 		style: T,
-		className: a("flex flex-col gap-1", k ? "w-full min-w-0 max-w-[492px]" : "max-w-[420px]", Pe.container, w),
+		className: o("flex flex-col gap-1", k ? "w-full min-w-0 max-w-[492px]" : "max-w-[420px]", Ie.container, w),
 		children: [/* @__PURE__ */ q("div", {
 			className: "flex items-center justify-between",
 			children: [/* @__PURE__ */ q("div", {
 				className: "flex items-center gap-1",
 				children: [/* @__PURE__ */ K(A, {
-					size: U.SM,
-					className: a("shrink-0", Pe.headerIcon),
+					size: W.SM,
+					className: o("shrink-0", Ie.headerIcon),
 					"aria-hidden": !0
 				}), /* @__PURE__ */ K("span", {
-					className: a(S?.headerLabelClassName ?? "dial-tiny-semi-text", Pe.headerLabel),
+					className: o(S?.headerLabelClassName ?? "dial-tiny-semi-text", Ie.headerLabel),
 					children: j
 				})]
-			}), e.length >= 2 && (o || n) && /* @__PURE__ */ K(ae, {
-				icon: /* @__PURE__ */ K(p, {
-					size: U.SM,
+			}), e.length >= 2 && (a || n) && /* @__PURE__ */ K(se, {
+				icon: /* @__PURE__ */ K(h, {
+					size: W.SM,
 					"aria-hidden": !0,
-					stroke: W
+					stroke: G
 				}),
-				size: G.Small,
-				"aria-label": g,
+				size: oe.Small,
+				"aria-label": m,
 				onClick: M
 			})]
 		}), /* @__PURE__ */ K("div", {
 			role: "list",
 			"aria-label": j,
-			className: a("gap-3", k ? "grid grid-cols-[repeat(5,83px)]" : "flex flex-wrap"),
+			className: o("gap-3", k ? "grid grid-cols-[repeat(5,83px)]" : "flex flex-wrap"),
 			children: e.map((e, t) => /* @__PURE__ */ K("div", {
 				role: "listitem",
-				children: /* @__PURE__ */ K(Me, {
+				children: /* @__PURE__ */ K(Pe, {
 					attachment: e,
 					onClick: n,
 					onDownload: N,
 					onRetry: s,
 					labels: {
 						clickLabel: f,
-						retryLabel: m,
+						retryLabel: p,
 						promptLabel: y,
 						pastedLabel: b,
 						imageLabel: x,
-						openInNewTabLabel: _
+						openInNewTabLabel: g
 					},
 					isSelected: e.id === u
 				})
 			}, `${e.id}-${t}`))
 		})]
 	});
-}, Le = {
+}, ze = {
 	overlay: "_overlay_mzpdp_1",
 	icon: "_icon_mzpdp_5",
 	deniedIcon: "_deniedIcon_mzpdp_9"
-}, Re = ({ isVisible: e, isAttachmentsAllowed: t = !0, labels: n, styles: r }) => {
-	let { title: o, subtitle: s } = n ?? {}, { colors: c, typography: l } = r ?? {};
+}, Be = ({ isVisible: e, isAttachmentsAllowed: t = !0, labels: n, styles: r }) => {
+	let { title: a, subtitle: s } = n ?? {}, { colors: c, typography: l } = r ?? {};
 	if (!e) return null;
 	let u = i({
 		"--ai-fd-bg": c?.background,
 		"--ai-fd-icon": c?.icon,
 		"--ai-fd-denied-icon": c?.deniedIcon
-	}), d = o ?? (t ? "Attach files" : "No attachments allowed"), f = s ?? (t ? "Drop files here to attach them to message" : "Attachments can't be added to message"), p = t ? Le.icon : Le.deniedIcon, m = (e) => {
+	}), d = a ?? (t ? "Attach files" : "No attachments allowed"), f = s ?? (t ? "Drop files here to attach them to message" : "Attachments can't be added to message"), p = t ? ze.icon : ze.deniedIcon, m = (e) => {
 		e.preventDefault();
-	}, h = t ? g : te;
+	}, h = t ? v : V;
 	return /* @__PURE__ */ K("div", {
 		role: "status",
 		"aria-live": "polite",
-		className: a("fixed inset-0 z-[9999] flex items-center justify-center backdrop-blur-sm", Le.overlay, t ? "pointer-events-none" : "pointer-events-auto cursor-not-allowed"),
+		className: o("fixed inset-0 z-[9999] flex items-center justify-center backdrop-blur-sm", ze.overlay, t ? "pointer-events-none" : "pointer-events-auto cursor-not-allowed"),
 		onDragOver: t ? void 0 : m,
 		onDrop: t ? void 0 : m,
 		style: u,
@@ -499,32 +496,32 @@ var fe = () => `${Date.now()}-${Math.random().toString(36).slice(2)}`, pe = (e)
 					"aria-hidden": !0
 				}),
 				/* @__PURE__ */ K("span", {
-					className: a("mt-5", l?.titleClassName ?? "dial-h3-text"),
+					className: o("mt-5", l?.titleClassName ?? "dial-h3-text"),
 					children: d
 				}),
 				/* @__PURE__ */ K("span", {
-					className: a("mt-4", l?.subtitleClassName ?? "dial-small-text"),
+					className: o("mt-4", l?.subtitleClassName ?? "dial-small-text"),
 					children: f
 				})
 			]
 		})
 	});
-}, $ = (e) => String(e).padStart(2, "0"), ze = (e) => `${e.getFullYear()}-${$(e.getMonth() + 1)}-${$(e.getDate())} ${$(e.getHours())}-${$(e.getMinutes())}-${$(e.getSeconds())}`, Be = (e, t, n) => {
+}, $ = (e) => String(e).padStart(2, "0"), Ve = (e) => `${e.getFullYear()}-${$(e.getMonth() + 1)}-${$(e.getDate())} ${$(e.getHours())}-${$(e.getMinutes())}-${$(e.getSeconds())}`, He = (e, t, n) => {
 	let r = e.lastIndexOf("."), i = r > 0, a = i ? e.slice(0, r) : e, o = i ? e.slice(r) : "", s = n === 0 ? "" : ` (${n + 1})`;
-	return `${a} ${ze(t)}${s}${o}`;
-}, Ve = (e, n, i = {}) => {
-	let { screenshotName: a = "Screenshot.png", pastedTextName: s = "Pasted text" } = i;
-	return { handlePaste: o((i) => {
+	return `${a} ${Ve(t)}${s}${o}`;
+}, Ue = (e, n, i = {}) => {
+	let { screenshotName: a = "Screenshot.png", pastedTextName: o = "Pasted text" } = i;
+	return { handlePaste: c((i) => {
 		if (!i.clipboardData) return;
-		let o = Array.from(i.clipboardData.items).filter((e) => e.kind === "file" && e.type.startsWith("image/")), c = i.clipboardData.getData("text/plain").length > 0;
-		if (o.length > 0 && !c) {
-			let n = [], s = /* @__PURE__ */ new Date();
-			for (let e of o) {
+		let s = Array.from(i.clipboardData.items).filter((e) => e.kind === "file" && e.type.startsWith("image/")), c = i.clipboardData.getData("text/plain").length > 0;
+		if (s.length > 0 && !c) {
+			let n = [], o = /* @__PURE__ */ new Date();
+			for (let e of s) {
 				let i = e.getAsFile();
 				if (!i) continue;
-				let o = Be(a, s, n.length), c = new File([i], o, { type: i.type }), l = {
-					id: fe(),
-					name: o,
+				let s = He(a, o, n.length), c = new File([i], s, { type: i.type }), l = {
+					id: me(),
+					name: s,
 					contentType: i.type,
 					file: c,
 					type: t.Image,
@@ -538,11 +535,11 @@ var fe = () => `${Date.now()}-${Math.random().toString(36).slice(2)}`, pe = (e)
 		}
 		let l = i.clipboardData.getData("text/plain");
 		if (l.length > n) {
-			let n = l.trim(), a = (n.length > 80 ? `${n.slice(0, 80).trimEnd()}…` : n) || s, o = new File([l], a, { type: "text/plain" }), c = {
-				id: fe(),
+			let n = l.trim(), a = (n.length > 80 ? `${n.slice(0, 80).trimEnd()}…` : n) || o, s = new File([l], a, { type: "text/plain" }), c = {
+				id: me(),
 				name: a,
 				contentType: "text/plain",
-				file: o,
+				file: s,
 				type: t.Pasted,
 				status: r.Idle
 			};
@@ -552,8 +549,8 @@ var fe = () => `${Date.now()}-${Math.random().toString(36).slice(2)}`, pe = (e)
 		e,
 		n,
 		a,
-		s
+		o
 	]) };
-}, He = 100;
+}, We = 100;
 //#endregion
-export { Se as ATTACHMENT_COLLAPSE_THRESHOLD, Y as ATTACHMENT_INPUT_CLASS, Me as AttachmentCard, Ie as AttachmentGroup, Ne as AttachmentTray, Re as FileDndOverlay, Q as LazyImageLoadStatus, He as MAX_UPLOADS_PER_MINUTE, fe as generateAttachmentId, J as getAttachmentCardState, ve as getAttachmentIcon, be as getExtFromContentType, pe as getNameWithoutExtension, _e as isMimeTypeAllowed, ge as mimeTypesToExtensionLabels, Ve as useClipboardPaste, Ae as useLazyImageLoad };
+export { we as ATTACHMENT_COLLAPSE_THRESHOLD, Y as ATTACHMENT_INPUT_CLASS, Pe as AttachmentCard, Re as AttachmentGroup, Fe as AttachmentTray, Be as FileDndOverlay, Q as LazyImageLoadStatus, We as MAX_UPLOADS_PER_MINUTE, me as generateAttachmentId, J as getAttachmentCardState, be as getAttachmentIcon, Se as getExtFromContentType, he as getNameWithoutExtension, ye as isMimeTypeAllowed, ve as mimeTypesToExtensionLabels, Ue as useClipboardPaste, Me as useLazyImageLoad };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@epam/ai-dial-attachment-input",
   "description": "File attachment input components with upload validation, drag-and-drop, and progress tracking",
-  "version": "1.2.0-dev.75",
+  "version": "1.2.0-dev.80",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./index.js",
@@ -20,7 +20,7 @@
     "@tabler/icons-react": "^3.44.0"
   },
   "peerDependencies": {
-    "@epam/ai-dial-chat-shared": "1.2.0-dev.75",
+    "@epam/ai-dial-chat-shared": "1.2.0-dev.80",
     "react": "^19.2.8",
     "@epam/ai-dial-ui-kit": "^0.15.0-dev.9"
   },

package/utils/attachment.d.ts

@@ -13,12 +13,15 @@ export declare const mimeTypesToExtensionLabels: (types: string[], wildcardLabel
  * Matching rules:
  * - Exact match: `'application/pdf'` allows `'application/pdf'`.
  * - Wildcard prefix: `'image/*'` allows any `'image/...'` MIME type.
+ * - Alias match: both sides are canonicalized, so `'text/json'` allows
+ *   `'application/json'` and vice versa.
+ * - Parameters and letter case are ignored on both sides.
  *
  * Returns `false` when `allowedTypes` is empty (no attachment types allowed).
  */
 export declare const isMimeTypeAllowed: (mimeType: string, allowedTypes: string[]) => boolean;
-/** Returns the Tabler icon component for a given MIME content type, or `IconFile` for unknown types. */
-export declare const getAttachmentIcon: (contentType: string) => Icon;
+/** Returns the Tabler icon component for a given MIME content type, or `IconFile` for unknown types. Aliases resolve to their canonical type first. */
+export declare const getAttachmentIcon: (rawContentType: string) => Icon;
 /** Derives a bare file extension (no leading dot) from a MIME type, e.g. `'application/pdf'` -> `'pdf'`. */
 export declare const getExtFromContentType: (contentType: string) => string | undefined;
 /** Derives the display state (icons, labels, color classes) an AttachmentCard needs to render a given attachment. */

package/utils/attachment.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"attachment.d.ts","sourceRoot":"","sources":["../../src/utils/attachment.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAMnE,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAgChD,OAAO,KAAK,EACV,mBAAmB,EACnB,oBAAoB,EACrB,MAAM,2BAA2B,CAAC;AAEnC,uDAAuD;AACvD,eAAO,MAAM,oBAAoB,QAAO,MACgB,CAAC;AAEzD,4GAA4G;AAC5G,eAAO,MAAM,uBAAuB,GAAI,MAAM,MAAM,KAAG,MAItD,CAAC;AAcF,uHAAuH;AACvH,eAAO,MAAM,0BAA0B,GACrC,OAAO,MAAM,EAAE,EACf,iBAAgB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAwB,KAC5D,MAeF,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,iBAAiB,GAC5B,UAAU,MAAM,EAChB,cAAc,MAAM,EAAE,KACrB,OAUF,CAAC;AAEF,wGAAwG;AACxG,eAAO,MAAM,iBAAiB,GAAI,aAAa,MAAM,KAAG,IA0FvD,CAAC;AAUF,4GAA4G;AAC5G,eAAO,MAAM,qBAAqB,GAChC,aAAa,MAAM,KAClB,MAAM,GAAG,SAUX,CAAC;AA6BF,qHAAqH;AACrH,eAAO,MAAM,sBAAsB,GACjC,YAAY,iBAAiB,EAC7B,aAAY,oBAAyB,KACpC,mBAiBF,CAAC"}
+{"version":3,"file":"attachment.d.ts","sourceRoot":"","sources":["../../src/utils/attachment.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAQnE,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAgChD,OAAO,KAAK,EACV,mBAAmB,EACnB,oBAAoB,EACrB,MAAM,2BAA2B,CAAC;AAEnC,uDAAuD;AACvD,eAAO,MAAM,oBAAoB,QAAO,MACgB,CAAC;AAEzD,4GAA4G;AAC5G,eAAO,MAAM,uBAAuB,GAAI,MAAM,MAAM,KAAG,MAItD,CAAC;AAcF,uHAAuH;AACvH,eAAO,MAAM,0BAA0B,GACrC,OAAO,MAAM,EAAE,EACf,iBAAgB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAwB,KAC5D,MAoBF,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,iBAAiB,GAC5B,UAAU,MAAM,EAChB,cAAc,MAAM,EAAE,KACrB,OAsBF,CAAC;AAEF,uJAAuJ;AACvJ,eAAO,MAAM,iBAAiB,GAAI,gBAAgB,MAAM,KAAG,IAkF1D,CAAC;AAUF,4GAA4G;AAC5G,eAAO,MAAM,qBAAqB,GAChC,aAAa,MAAM,KAClB,MAAM,GAAG,SAUX,CAAC;AA6BF,qHAAqH;AACrH,eAAO,MAAM,sBAAsB,GACjC,YAAY,iBAAiB,EAC7B,aAAY,oBAAyB,KACpC,mBAiBF,CAAC"}