@epam/ai-dial-attachment-input 1.1.0-dev.456 → 1.1.0-dev.465

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/hooks/useClipboardPaste.d.ts +1 -1
  2. package/hooks/useClipboardPaste.d.ts.map +1 -1
  3. package/index.js +128 -125
  4. package/package.json +2 -2
package/hooks/useClipboardPaste.d.ts CHANGED
@@ -2,7 +2,7 @@ import { Attachment } from '@epam/ai-dial-chat-shared';
2
2
  import { ClipboardEventHandler } from 'react';
3
3
  /** Localised default file names used by `useClipboardPaste` for pasted content. */
4
4
  export interface UseClipboardPasteLabels {
5
- /** Default file name given to a pasted image. Defaults to `'Screenshot.png'`. */
5
+ /** Name template a pasted image is derived from, with the paste timestamp inserted before the extension. Defaults to `'Screenshot.png'`. */
6
6
  screenshotName?: string;
7
7
  /** Default file name given to pasted plain text when it has no usable preview. Defaults to `'Pasted text'`. */
8
8
  pastedTextName?: string;
package/hooks/useClipboardPaste.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useClipboardPaste.d.ts","sourceRoot":"","sources":["../../src/hooks/useClipboardPaste.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAE5D,OAAO,EAAE,qBAAqB,EAAe,MAAM,OAAO,CAAC;AAG3D,mFAAmF;AACnF,MAAM,WAAW,uBAAuB;IACtC,iFAAiF;IACjF,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,+GAA+G;IAC/G,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,iBAAiB,GAC5B,eAAe,CAAC,WAAW,EAAE,UAAU,EAAE,KAAK,IAAI,EAClD,WAAW,MAAM,EACjB,SAAQ,uBAA4B,KACnC;IAAE,WAAW,EAAE,qBAAqB,CAAC,mBAAmB,CAAC,CAAA;CAkE3D,CAAC"}
1
+ {"version":3,"file":"useClipboardPaste.d.ts","sourceRoot":"","sources":["../../src/hooks/useClipboardPaste.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAE5D,OAAO,EAAE,qBAAqB,EAAe,MAAM,OAAO,CAAC;AAG3D,mFAAmF;AACnF,MAAM,WAAW,uBAAuB;IACtC,4IAA4I;IAC5I,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,+GAA+G;IAC/G,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AA6BD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,iBAAiB,GAC5B,eAAe,CAAC,WAAW,EAAE,UAAU,EAAE,KAAK,IAAI,EAClD,WAAW,MAAM,EACjB,SAAQ,uBAA4B,KACnC;IAAE,WAAW,EAAE,qBAAqB,CAAC,mBAAmB,CAAC,CAAA;CAwE3D,CAAC"}
package/index.js CHANGED
@@ -1,39 +1,39 @@
1
1
  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";
2
2
  import { useCallback as o, useEffect as s, useId as c, useMemo as l, useRef as u, useState as d } from "react";
3
- 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 z, IconFileX as ee, IconMusic as te, IconPaperclip as B, IconPhoto as V, IconReload as ne, IconTerminal2 as H, IconVideo as re, IconX as ie } from "@tabler/icons-react";
4
- 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";
5
- import { Fragment as de, jsx as K, jsxs as q } from "react/jsx-runtime";
3
+ 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";
4
+ import { DIAL_ICON_SIZE as U, DIAL_KIT_ICON_STROKE as W, ElementSize as ae, GhostIconButton as oe, Highlight as se, Skeleton as ce, SkeletonVariant as le, Spinner as ue, StaticIconButton as de } from "@epam/ai-dial-ui-kit";
5
+ import { Fragment as fe, jsx as G, jsxs as K } from "react/jsx-runtime";
6
6
  //#region src/utils/attachment.ts
7
- var J = () => `${Date.now()}-${Math.random().toString(36).slice(2)}`, fe = (e) => {
7
+ var q = () => `${Date.now()}-${Math.random().toString(36).slice(2)}`, pe = (e) => {
8
8
  if (e == null) return "";
9
9
  let t = e.lastIndexOf(".");
10
10
  return t > 0 ? e.slice(0, t) : e;
11
- }, pe = {
11
+ }, me = {
12
12
  image: "Image files",
13
13
  audio: "Audio files",
14
14
  video: "Video files",
15
15
  text: "Text files",
16
16
  "*": "All files"
17
- }, me = { "image/jpeg": "JPEG" }, he = (e, t = pe) => e.map((e) => {
17
+ }, he = { "image/jpeg": "JPEG" }, ge = (e, t = me) => e.map((e) => {
18
18
  let r = e.toLowerCase().split(";")[0].trim();
19
19
  if (r.endsWith("/*")) {
20
20
  let e = r.slice(0, -2);
21
21
  return t[e] ?? `${e} files`;
22
22
  }
23
- let i = me[r];
23
+ let i = he[r];
24
24
  if (i) return i;
25
25
  let a = n[r];
26
26
  if (a) return a.toUpperCase();
27
27
  let o = r.split("/")[1];
28
28
  return o == null ? e.toUpperCase() : o.toUpperCase();
29
- }).join(", "), ge = (e, t) => t.length === 0 ? !1 : t.some((t) => {
29
+ }).join(", "), _e = (e, t) => t.length === 0 ? !1 : t.some((t) => {
30
30
  if (t === "*" || t === "*/*") return !0;
31
31
  if (t.endsWith("/*")) {
32
32
  let n = t.slice(0, -2);
33
33
  return e.startsWith(`${n}/`);
34
34
  }
35
35
  return e === t;
36
- }), _e = (e) => {
36
+ }), ve = (e) => {
37
37
  if (!e) return h;
38
38
  if (e.startsWith("image/")) switch (e) {
39
39
  case "image/jpeg":
@@ -44,7 +44,7 @@ var J = () => `${Date.now()}-${Math.random().toString(36).slice(2)}`, fe = (e) =
44
44
  default: return V;
45
45
  }
46
46
  if (e.startsWith("video/")) return re;
47
- if (e.startsWith("audio/")) return te;
47
+ if (e.startsWith("audio/")) return z;
48
48
  switch (e) {
49
49
  case "application/pdf": return E;
50
50
  case "application/msword":
@@ -59,7 +59,7 @@ var J = () => `${Date.now()}-${Math.random().toString(36).slice(2)}`, fe = (e) =
59
59
  case "application/x-rar-compressed":
60
60
  case "application/x-7z-compressed":
61
61
  case "application/gzip":
62
- case "application/x-tar": return z;
62
+ case "application/x-tar": return ee;
63
63
  case "text/csv": return y;
64
64
  case "text/plain": return F;
65
65
  case "text/html":
@@ -82,37 +82,37 @@ var J = () => `${Date.now()}-${Math.random().toString(36).slice(2)}`, fe = (e) =
82
82
  case "text/x-vue": return I;
83
83
  default: return h;
84
84
  }
85
- }, ve = (e) => {
86
- let { type: n, contentType: r } = e;
87
- return n === t.Prompt ? H : n === t.Pasted ? f : n === t.Image ? V : _e(r ?? "");
88
85
  }, ye = (e) => {
86
+ let { type: n, contentType: r } = e;
87
+ return n === t.Prompt ? H : n === t.Pasted ? f : n === t.Image ? V : ve(r ?? "");
88
+ }, be = (e) => {
89
89
  let t = e.toLowerCase().split(";")[0].trim(), r = n[t];
90
90
  if (r) return r;
91
91
  let i = t.split("/")[1];
92
92
  if (i && !i.startsWith("vnd.") && !i.includes("+")) return i;
93
- }, be = (e, n) => {
93
+ }, xe = (e, n) => {
94
94
  let { type: r, name: i, contentType: a } = e;
95
95
  if (r === t.Prompt) return n.promptLabel ?? "Prompt";
96
96
  if (r === t.Pasted) return n.pastedLabel ?? "Pasted";
97
97
  if (r === t.Image) return n.imageLabel ?? "Image";
98
98
  if (a) {
99
- let e = ye(a);
99
+ let e = be(a);
100
100
  if (e) return `.${e}`;
101
101
  }
102
102
  if (i == null) return "";
103
103
  let o = i.lastIndexOf(".");
104
104
  return o > 0 && o < i.length - 1 ? `.${i.slice(o + 1).toLowerCase()}` : i;
105
- }, Y = (e, n = {}) => {
105
+ }, J = (e, n = {}) => {
106
106
  let { type: i, status: a, previewUrl: o, url: s } = e, c = a === r.Loading, l = a === r.Error, u = i === t.Image && !!(o ?? s) && !l, d = i === t.Link && !l;
107
107
  return {
108
108
  isLoading: c,
109
109
  isError: l,
110
110
  isImage: u,
111
111
  isLink: d,
112
- BottomIcon: d ? null : ve(e),
113
- typeLabel: d ? null : be(e, n)
112
+ BottomIcon: d ? null : ye(e),
113
+ typeLabel: d ? null : xe(e, n)
114
114
  };
115
- }, xe = 5, Se = "flex size-[84px] items-center justify-center rounded-xl border", X = {
115
+ }, Se = 5, Ce = "flex size-[84px] items-center justify-center rounded-xl border", Y = {
116
116
  tile: "_tile_1whwz_1",
117
117
  hovered: "_hovered_1whwz_5",
118
118
  selected: "_selected_1whwz_15",
@@ -123,105 +123,105 @@ var J = () => `${Date.now()}-${Math.random().toString(36).slice(2)}`, fe = (e) =
123
123
  track: "_track_1whwz_37",
124
124
  actionButton: "_actionButton_1whwz_43",
125
125
  imageActionButton: "_imageActionButton_1whwz_47"
126
- }, Z = ({ ariaLabel: e, errorTitle: t, errorDescId: n, onClick: r, id: i, icon: o, className: s }) => /* @__PURE__ */ K(ue, {
126
+ }, X = ({ ariaLabel: e, errorTitle: t, errorDescId: n, onClick: r, id: i, icon: o, className: s }) => /* @__PURE__ */ G(de, {
127
127
  icon: o,
128
- size: G.Small,
129
- className: a("opacity-0 focus-visible:opacity-100 group-focus-within/attachment-tile:opacity-100 group-hover/attachment-tile:opacity-100", X.actionButton, s),
128
+ size: ae.Small,
129
+ className: a("opacity-0 focus-visible:opacity-100 group-focus-within/attachment-tile:opacity-100 group-hover/attachment-tile:opacity-100", Y.actionButton, s),
130
130
  "aria-label": e,
131
131
  "aria-describedby": t ? n : void 0,
132
132
  onClick: (e) => {
133
133
  e.stopPropagation(), r(i);
134
134
  }
135
- }), Ce = ({ ...e }) => /* @__PURE__ */ K(Z, {
136
- icon: /* @__PURE__ */ K(ne, {
135
+ }), we = ({ ...e }) => /* @__PURE__ */ G(X, {
136
+ icon: /* @__PURE__ */ G(ne, {
137
137
  size: U.SM,
138
138
  "aria-hidden": !0,
139
139
  stroke: W
140
140
  }),
141
- className: X.retryIcon,
141
+ className: Y.retryIcon,
142
142
  ...e
143
- }), we = ({ ...e }) => /* @__PURE__ */ K(Z, {
144
- icon: /* @__PURE__ */ K(p, {
143
+ }), Te = ({ ...e }) => /* @__PURE__ */ G(X, {
144
+ icon: /* @__PURE__ */ G(p, {
145
145
  size: U.SM,
146
146
  "aria-hidden": !0,
147
147
  stroke: W
148
148
  }),
149
149
  ...e
150
- }), Te = ({ ...e }) => /* @__PURE__ */ K(Z, {
151
- icon: /* @__PURE__ */ K(m, {
150
+ }), Ee = ({ ...e }) => /* @__PURE__ */ G(X, {
151
+ icon: /* @__PURE__ */ G(m, {
152
152
  size: U.SM,
153
153
  "aria-hidden": !0,
154
154
  stroke: W
155
155
  }),
156
156
  ...e
157
- }), Ee = ({ ...e }) => /* @__PURE__ */ K(Z, {
158
- icon: /* @__PURE__ */ K(ie, {
157
+ }), De = ({ ...e }) => /* @__PURE__ */ G(X, {
158
+ icon: /* @__PURE__ */ G(ie, {
159
159
  size: U.SM,
160
160
  "aria-hidden": !0,
161
161
  stroke: W
162
162
  }),
163
163
  ...e
164
- }), De = {
164
+ }), Oe = {
165
165
  [e.Network]: "Upload failed · network error",
166
166
  [e.UnsupportedType]: "Upload failed · unsupported file type"
167
- }, Oe = ({ 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 }) => {
168
- 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] ?? De[N]) || D : "", { BottomIcon: R, typeLabel: z } = Y(t), ee = !F && !P && f && !m, te = F && !!s && N !== e.UnsupportedType, B = Number(!!ee) + Number(!!te) + Number(!!m) + Number(!!v), V = B > 1 ? "pe-11" : B === 1 ? "pe-5" : void 0, ne = (e) => {
167
+ }, 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 }) => {
168
+ 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, B = Number(!!te) + Number(!!z) + Number(!!m) + Number(!!v), V = B > 1 ? "pe-11" : B === 1 ? "pe-5" : void 0, ne = (e) => {
169
169
  e.target === e.currentTarget && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), i?.(t.id));
170
- }, H = l(() => p ? j : fe(j), [p, j]), re = o(() => {
170
+ }, H = l(() => p ? j : pe(j), [p, j]), re = o(() => {
171
171
  window.open(t.referenceUrl, "_blank", "noopener,noreferrer");
172
- }, [t]), ie = a(Se, "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), U = /* @__PURE__ */ K("div", {
172
+ }, [t]), ie = a(Ce, "group/attachment-tile relative flex-col justify-between items-start gap-1 overflow-hidden p-1.5", Y.tile, !F && Y.hovered, y && Y.selected, F && Y.tileError), U = /* @__PURE__ */ G("div", {
173
173
  title: H,
174
- className: a(O?.nameClassName ?? "dial-caption-text", "line-clamp-2 w-full min-w-0 break-words", X.nameText, !F && V),
175
- children: n ? /* @__PURE__ */ K(oe, {
174
+ className: a(O?.nameClassName ?? "dial-caption-text", "line-clamp-2 w-full min-w-0 break-words", Y.nameText, !F && V),
175
+ children: n ? /* @__PURE__ */ G(se, {
176
176
  text: H,
177
177
  query: n,
178
178
  maxLines: 2
179
179
  }) : H
180
- }), W = R && /* @__PURE__ */ q("div", {
180
+ }), W = R && /* @__PURE__ */ K("div", {
181
181
  className: a("flex w-full items-center gap-1", F && V),
182
- children: [/* @__PURE__ */ K(R, {
182
+ children: [/* @__PURE__ */ G(R, {
183
183
  size: 16,
184
- className: X.typeText,
184
+ className: Y.typeText,
185
185
  "aria-hidden": !0
186
- }), /* @__PURE__ */ K("span", {
187
- className: a(O?.metaClassName ?? "dial-caption-text", "min-w-0 flex-1 truncate", X.typeText),
188
- children: w ? `${z} · ${w}` : z
186
+ }), /* @__PURE__ */ G("span", {
187
+ className: a(O?.metaClassName ?? "dial-caption-text", "min-w-0 flex-1 truncate", Y.typeText),
188
+ children: w ? `${ee} · ${w}` : ee
189
189
  })]
190
- }), G = () => {
190
+ }), ae = () => {
191
191
  _ && g ? g(A) : i && i(A);
192
- }, ae = /* @__PURE__ */ q(de, { children: [
192
+ }, oe = /* @__PURE__ */ K(fe, { children: [
193
193
  U,
194
194
  W,
195
- P && /* @__PURE__ */ K("div", {
195
+ P && /* @__PURE__ */ G("div", {
196
196
  role: "progressbar",
197
197
  "aria-label": T,
198
- className: a("absolute start-[-1px] top-[-1px] flex size-full items-center justify-center rounded", X.track),
199
- children: /* @__PURE__ */ K(le, { size: 32 })
198
+ className: a("absolute start-[-1px] top-[-1px] flex size-full items-center justify-center rounded", Y.track),
199
+ children: /* @__PURE__ */ G(ue, { size: 32 })
200
200
  }),
201
- /* @__PURE__ */ q("div", {
201
+ /* @__PURE__ */ K("div", {
202
202
  className: "absolute end-1 top-1 flex gap-1",
203
203
  children: [
204
- ee && /* @__PURE__ */ K(we, {
204
+ te && /* @__PURE__ */ G(Te, {
205
205
  ariaLabel: b,
206
206
  errorTitle: L,
207
207
  errorDescId: I,
208
208
  onClick: f,
209
209
  id: A
210
210
  }),
211
- te && /* @__PURE__ */ K(Ce, {
211
+ z && /* @__PURE__ */ G(we, {
212
212
  ariaLabel: x,
213
213
  errorTitle: L,
214
214
  errorDescId: I,
215
215
  onClick: s,
216
216
  id: A
217
217
  }),
218
- m && /* @__PURE__ */ K(Te, {
218
+ m && /* @__PURE__ */ G(Ee, {
219
219
  ariaLabel: C,
220
220
  errorTitle: L,
221
221
  errorDescId: I,
222
222
  onClick: re
223
223
  }),
224
- v && /* @__PURE__ */ K(Ee, {
224
+ v && /* @__PURE__ */ G(De, {
225
225
  ariaLabel: S,
226
226
  errorTitle: L,
227
227
  errorDescId: I,
@@ -230,7 +230,7 @@ var J = () => `${Date.now()}-${Math.random().toString(36).slice(2)}`, fe = (e) =
230
230
  })
231
231
  ]
232
232
  }),
233
- F && /* @__PURE__ */ K("span", {
233
+ F && /* @__PURE__ */ G("span", {
234
234
  id: I,
235
235
  role: "status",
236
236
  "aria-live": "polite",
@@ -238,24 +238,24 @@ var J = () => `${Date.now()}-${Math.random().toString(36).slice(2)}`, fe = (e) =
238
238
  children: L
239
239
  })
240
240
  ] });
241
- return /* @__PURE__ */ K("div", {
241
+ return /* @__PURE__ */ G("div", {
242
242
  style: h,
243
243
  className: a("inline-flex", k),
244
- children: /* @__PURE__ */ K("div", {
244
+ children: /* @__PURE__ */ G("div", {
245
245
  role: "button",
246
246
  tabIndex: 0,
247
247
  "aria-label": b,
248
248
  "aria-busy": P,
249
- onClick: G,
249
+ onClick: ae,
250
250
  onKeyDown: ne,
251
251
  style: h,
252
252
  className: a(ie, "cursor-pointer focus-within:outline focus-within:outline-1 focus-within:outline-offset-1"),
253
- children: ae
253
+ children: oe
254
254
  })
255
255
  });
256
- }, Q = /* @__PURE__ */ function(e) {
256
+ }, Z = /* @__PURE__ */ function(e) {
257
257
  return e.Idle = "idle", e.Loading = "loading", e.Loaded = "loaded", e.Error = "error", e;
258
- }({}), ke = ({ enabled: e, src: t }) => {
258
+ }({}), Ae = ({ enabled: e, src: t }) => {
259
259
  let n = u(null), [r, i] = d("idle");
260
260
  return s(() => {
261
261
  i(e && t ? "loading" : "idle");
@@ -270,15 +270,15 @@ var J = () => `${Date.now()}-${Math.random().toString(36).slice(2)}`, fe = (e) =
270
270
  imageRef: n,
271
271
  imageLoadStatus: r
272
272
  };
273
- }, Ae = ({ attachment: e, onExpand: n, onClick: r, labels: i, onRemove: o, cssVars: s, onDownload: c, styles: u, isSelected: d }) => {
274
- 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(() => Y(e), [e]), w = r !== void 0 && !b && !x && !S, { imageRef: T, imageLoadStatus: E } = ke({
273
+ }, je = ({ attachment: e, onExpand: n, onClick: r, labels: i, onRemove: o, cssVars: s, onDownload: c, styles: u, isSelected: d }) => {
274
+ 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({
275
275
  enabled: C,
276
276
  src: y
277
277
  }), D = () => {
278
278
  b && n ? n(_) : w && r && r(_);
279
279
  };
280
- return /* @__PURE__ */ K("div", {
281
- className: a(Se, "group/attachment-tile", w && "cursor-pointer", X.tile, d && X.selected, g),
280
+ return /* @__PURE__ */ G("div", {
281
+ className: a(Ce, "group/attachment-tile", w && "cursor-pointer", Y.tile, d && Y.selected, g),
282
282
  onClick: D,
283
283
  onKeyDown: (e) => {
284
284
  e.target === e.currentTarget && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), D());
@@ -287,48 +287,48 @@ var J = () => `${Date.now()}-${Math.random().toString(36).slice(2)}`, fe = (e) =
287
287
  role: "button",
288
288
  style: s,
289
289
  "aria-label": w ? f : b ? p : void 0,
290
- children: /* @__PURE__ */ q("div", {
290
+ children: /* @__PURE__ */ K("div", {
291
291
  className: "relative h-full w-full overflow-hidden",
292
292
  children: [
293
- /* @__PURE__ */ q("div", {
293
+ /* @__PURE__ */ K("div", {
294
294
  className: "absolute end-1 top-1 z-10 flex gap-1",
295
- children: [o && /* @__PURE__ */ K(Ee, {
295
+ children: [o && /* @__PURE__ */ G(De, {
296
296
  ariaLabel: m,
297
297
  onClick: o,
298
298
  id: _,
299
- className: X.imageActionButton
300
- }), c && /* @__PURE__ */ K(we, {
299
+ className: Y.imageActionButton
300
+ }), c && /* @__PURE__ */ G(Te, {
301
301
  ariaLabel: h,
302
302
  onClick: c,
303
303
  id: _,
304
- className: X.imageActionButton
304
+ className: Y.imageActionButton
305
305
  })]
306
306
  }),
307
- E !== Q.Loaded && /* @__PURE__ */ K(se, {
308
- variant: ce.Rectangular,
307
+ E !== Z.Loaded && /* @__PURE__ */ G(ce, {
308
+ variant: le.Rectangular,
309
309
  width: "100%",
310
310
  height: "100%",
311
- active: E === Q.Loading,
312
- overlay: /* @__PURE__ */ K(V, {
311
+ active: E === Z.Loading,
312
+ overlay: /* @__PURE__ */ G(V, {
313
313
  size: U.LG,
314
- className: X.typeText,
314
+ className: Y.typeText,
315
315
  "aria-hidden": !0,
316
316
  stroke: W
317
317
  }),
318
318
  className: "absolute inset-0 rounded-xl"
319
319
  }),
320
- /* @__PURE__ */ K("img", {
320
+ /* @__PURE__ */ G("img", {
321
321
  ref: T,
322
322
  src: y,
323
323
  alt: v,
324
324
  loading: "lazy",
325
325
  decoding: "async",
326
- className: a("h-full w-full rounded-xl object-cover transition-opacity duration-200", E === Q.Loaded ? "opacity-100" : "opacity-0")
326
+ className: a("h-full w-full rounded-xl object-cover transition-opacity duration-200", E === Z.Loaded ? "opacity-100" : "opacity-0")
327
327
  })
328
328
  ]
329
329
  })
330
330
  });
331
- }, $ = ({ attachment: e, searchQuery: n = "", onRemove: r, onRetry: a, onExpand: o, onClick: s, onDownload: c, labels: u, styles: d, isSelected: f }) => {
331
+ }, Q = ({ attachment: e, searchQuery: n = "", onRemove: r, onRetry: a, onExpand: o, onClick: s, onDownload: c, labels: u, styles: d, isSelected: f }) => {
332
332
  let { colors: p } = d ?? {}, m = e.type === t.Pasted, h = m && o !== void 0, g = i({
333
333
  "--ai-tile-bg": p?.background,
334
334
  "--ai-tile-border": p?.border,
@@ -345,8 +345,8 @@ var J = () => `${Date.now()}-${Math.random().toString(36).slice(2)}`, fe = (e) =
345
345
  "--ai-tile-hover-icon-bg": p?.hoverIconBackground,
346
346
  "--ai-tile-hover-icon-color": p?.hoverIconColor,
347
347
  "--ai-tile-progress-track": p?.trackBackground
348
- }), { isImage: _, isLink: v } = l(() => Y(e), [e]);
349
- return _ ? /* @__PURE__ */ K(Ae, {
348
+ }), { isImage: _, isLink: v } = l(() => J(e), [e]);
349
+ return _ ? /* @__PURE__ */ G(je, {
350
350
  attachment: e,
351
351
  labels: u,
352
352
  onClick: s,
@@ -356,7 +356,7 @@ var J = () => `${Date.now()}-${Math.random().toString(36).slice(2)}`, fe = (e) =
356
356
  cssVars: g,
357
357
  onDownload: c,
358
358
  isSelected: f
359
- }) : /* @__PURE__ */ K(Oe, {
359
+ }) : /* @__PURE__ */ G(ke, {
360
360
  attachment: e,
361
361
  searchQuery: n,
362
362
  onClick: s,
@@ -372,15 +372,15 @@ var J = () => `${Date.now()}-${Math.random().toString(36).slice(2)}`, fe = (e) =
372
372
  isExpandable: h,
373
373
  isSelected: f
374
374
  });
375
- }, je = ({ attachments: e, onRemove: t, onRetry: n, onExpand: r, onAttachmentClick: i, labels: o, styles: s }) => {
375
+ }, Me = ({ attachments: e, onRemove: t, onRetry: n, onExpand: r, onAttachmentClick: i, labels: o, styles: s }) => {
376
376
  let { ariaLabel: c = "Attached files", removeLabel: l, retryLabel: u, clickLabel: d, uploadingLabel: f } = o ?? {}, { className: p } = s ?? {};
377
- return e.length === 0 ? null : /* @__PURE__ */ K("div", {
377
+ return e.length === 0 ? null : /* @__PURE__ */ G("div", {
378
378
  role: "list",
379
379
  "aria-label": c,
380
380
  className: a("flex w-full min-w-0 gap-2 overflow-x-auto", p),
381
- children: e.map((e) => /* @__PURE__ */ K("div", {
381
+ children: e.map((e) => /* @__PURE__ */ G("div", {
382
382
  role: "listitem",
383
- children: /* @__PURE__ */ K($, {
383
+ children: /* @__PURE__ */ G(Q, {
384
384
  attachment: e,
385
385
  onRemove: t,
386
386
  onRetry: n,
@@ -395,11 +395,11 @@ var J = () => `${Date.now()}-${Math.random().toString(36).slice(2)}`, fe = (e) =
395
395
  })
396
396
  }, e.id))
397
397
  });
398
- }, Me = {
398
+ }, Ne = {
399
399
  headerIcon: "_headerIcon_1dmgi_1",
400
400
  headerLabel: "_headerLabel_1dmgi_2"
401
- }, Ne = (e, t) => `${e} ${t}${e === 1 ? "" : "s"}`, Pe = ({ attachments: e, onAttachmentClick: n, onDownloadAll: o, onRetry: s, labels: c, styles: l, selectedAttachmentId: u }) => {
402
- let { ariaLabel: d = "Attachments", clickLabel: f = "Download attachment", retryLabel: m = "Retry upload", downloadAllLabel: g = "Download all", openInNewTabLabel: _, getHeaderLabel: v = (e) => Ne(e, "attachment"), promptLabel: y, pastedLabel: b, imageLabel: x } = c ?? {}, { typography: S, colors: C, className: w } = l ?? {}, T = i({ "--ai-group-text": C?.text });
401
+ }, Pe = (e, t) => `${e} ${t}${e === 1 ? "" : "s"}`, Fe = ({ attachments: e, onAttachmentClick: n, onDownloadAll: o, onRetry: s, labels: c, styles: l, selectedAttachmentId: u }) => {
402
+ let { ariaLabel: d = "Attachments", clickLabel: f = "Download attachment", retryLabel: m = "Retry upload", downloadAllLabel: g = "Download all", openInNewTabLabel: _, getHeaderLabel: v = (e) => Pe(e, "attachment"), promptLabel: y, pastedLabel: b, imageLabel: x } = c ?? {}, { typography: S, colors: C, className: w } = l ?? {}, T = i({ "--ai-group-text": C?.text });
403
403
  if (e.length === 0) return null;
404
404
  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 = () => {
405
405
  let t = e.filter((e) => e.status === r.Idle);
@@ -408,40 +408,40 @@ var J = () => `${Date.now()}-${Math.random().toString(36).slice(2)}`, fe = (e) =
408
408
  let n = e.find((e) => e.id === t);
409
409
  n && o?.([n]);
410
410
  };
411
- return /* @__PURE__ */ q("div", {
411
+ return /* @__PURE__ */ K("div", {
412
412
  role: "group",
413
413
  "aria-label": d,
414
414
  style: T,
415
- className: a("flex flex-col gap-1", k ? "w-full min-w-0 max-w-[492px]" : "max-w-[420px]", Me.container, w),
416
- children: [/* @__PURE__ */ q("div", {
415
+ className: a("flex flex-col gap-1", k ? "w-full min-w-0 max-w-[492px]" : "max-w-[420px]", Ne.container, w),
416
+ children: [/* @__PURE__ */ K("div", {
417
417
  className: "flex items-center justify-between",
418
- children: [/* @__PURE__ */ q("div", {
418
+ children: [/* @__PURE__ */ K("div", {
419
419
  className: "flex items-center gap-1",
420
- children: [/* @__PURE__ */ K(A, {
420
+ children: [/* @__PURE__ */ G(A, {
421
421
  size: U.SM,
422
- className: a("shrink-0", Me.headerIcon),
422
+ className: a("shrink-0", Ne.headerIcon),
423
423
  "aria-hidden": !0
424
- }), /* @__PURE__ */ K("span", {
425
- className: a(S?.headerLabelClassName ?? "dial-tiny-semi-text", Me.headerLabel),
424
+ }), /* @__PURE__ */ G("span", {
425
+ className: a(S?.headerLabelClassName ?? "dial-tiny-semi-text", Ne.headerLabel),
426
426
  children: j
427
427
  })]
428
- }), e.length >= 2 && (o || n) && /* @__PURE__ */ K(ae, {
429
- icon: /* @__PURE__ */ K(p, {
428
+ }), e.length >= 2 && (o || n) && /* @__PURE__ */ G(oe, {
429
+ icon: /* @__PURE__ */ G(p, {
430
430
  size: U.SM,
431
431
  "aria-hidden": !0,
432
432
  stroke: W
433
433
  }),
434
- size: G.Small,
434
+ size: ae.Small,
435
435
  "aria-label": g,
436
436
  onClick: M
437
437
  })]
438
- }), /* @__PURE__ */ K("div", {
438
+ }), /* @__PURE__ */ G("div", {
439
439
  role: "list",
440
440
  "aria-label": j,
441
441
  className: a("gap-3", k ? "grid grid-cols-[repeat(5,83px)]" : "flex flex-wrap"),
442
- children: e.map((e, t) => /* @__PURE__ */ K("div", {
442
+ children: e.map((e, t) => /* @__PURE__ */ G("div", {
443
443
  role: "listitem",
444
- children: /* @__PURE__ */ K($, {
444
+ children: /* @__PURE__ */ G(Q, {
445
445
  attachment: e,
446
446
  onClick: n,
447
447
  onDownload: N,
@@ -459,66 +459,69 @@ var J = () => `${Date.now()}-${Math.random().toString(36).slice(2)}`, fe = (e) =
459
459
  }, `${e.id}-${t}`))
460
460
  })]
461
461
  });
462
- }, Fe = {
462
+ }, Ie = {
463
463
  overlay: "_overlay_mzpdp_1",
464
464
  icon: "_icon_mzpdp_5",
465
465
  deniedIcon: "_deniedIcon_mzpdp_9"
466
- }, Ie = ({ isVisible: e, isAttachmentsAllowed: t = !0, labels: n, styles: r }) => {
466
+ }, Le = ({ isVisible: e, isAttachmentsAllowed: t = !0, labels: n, styles: r }) => {
467
467
  let { title: o, subtitle: s } = n ?? {}, { colors: c, typography: l } = r ?? {};
468
468
  if (!e) return null;
469
469
  let u = i({
470
470
  "--ai-fd-bg": c?.background,
471
471
  "--ai-fd-icon": c?.icon,
472
472
  "--ai-fd-denied-icon": c?.deniedIcon
473
- }), 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 ? Fe.icon : Fe.deniedIcon, m = (e) => {
473
+ }), 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 ? Ie.icon : Ie.deniedIcon, m = (e) => {
474
474
  e.preventDefault();
475
- }, h = t ? g : ee;
476
- return /* @__PURE__ */ K("div", {
475
+ }, h = t ? g : te;
476
+ return /* @__PURE__ */ G("div", {
477
477
  role: "status",
478
478
  "aria-live": "polite",
479
- className: a("fixed inset-0 z-[9999] flex items-center justify-center backdrop-blur-sm", Fe.overlay, t ? "pointer-events-none" : "pointer-events-auto cursor-not-allowed"),
479
+ className: a("fixed inset-0 z-[9999] flex items-center justify-center backdrop-blur-sm", Ie.overlay, t ? "pointer-events-none" : "pointer-events-auto cursor-not-allowed"),
480
480
  onDragOver: t ? void 0 : m,
481
481
  onDrop: t ? void 0 : m,
482
482
  style: u,
483
- children: /* @__PURE__ */ q("div", {
483
+ children: /* @__PURE__ */ K("div", {
484
484
  className: "flex flex-col items-center text-center",
485
485
  children: [
486
- /* @__PURE__ */ K(h, {
486
+ /* @__PURE__ */ G(h, {
487
487
  size: 100,
488
488
  className: p,
489
489
  "aria-hidden": !0
490
490
  }),
491
- /* @__PURE__ */ K("span", {
491
+ /* @__PURE__ */ G("span", {
492
492
  className: a("mt-5", l?.titleClassName ?? "dial-h3-text"),
493
493
  children: d
494
494
  }),
495
- /* @__PURE__ */ K("span", {
495
+ /* @__PURE__ */ G("span", {
496
496
  className: a("mt-4", l?.subtitleClassName ?? "dial-small-text"),
497
497
  children: f
498
498
  })
499
499
  ]
500
500
  })
501
501
  });
502
- }, Le = (e, n, i = {}) => {
502
+ }, $ = (e) => String(e).padStart(2, "0"), Re = (e) => `${e.getFullYear()}-${$(e.getMonth() + 1)}-${$(e.getDate())} ${$(e.getHours())}-${$(e.getMinutes())}-${$(e.getSeconds())}`, ze = (e, t, n) => {
503
+ let r = e.lastIndexOf("."), i = r > 0, a = i ? e.slice(0, r) : e, o = i ? e.slice(r) : "", s = n === 0 ? "" : ` (${n + 1})`;
504
+ return `${a} ${Re(t)}${s}${o}`;
505
+ }, Be = (e, n, i = {}) => {
503
506
  let { screenshotName: a = "Screenshot.png", pastedTextName: s = "Pasted text" } = i;
504
507
  return { handlePaste: o((i) => {
505
508
  if (!i.clipboardData) return;
506
509
  let o = Array.from(i.clipboardData.items).filter((e) => e.kind === "file" && e.type.startsWith("image/")), c = i.clipboardData.getData("text/plain").length > 0;
507
510
  if (o.length > 0 && !c) {
508
- let n = [];
511
+ let n = [], s = /* @__PURE__ */ new Date();
509
512
  for (let e of o) {
510
513
  let i = e.getAsFile();
511
514
  if (!i) continue;
512
- let o = new File([i], a, { type: i.type }), s = {
513
- id: J(),
514
- name: a,
515
+ let o = ze(a, s, n.length), c = new File([i], o, { type: i.type }), l = {
516
+ id: q(),
517
+ name: o,
515
518
  contentType: i.type,
516
- file: o,
519
+ file: c,
517
520
  type: t.Image,
518
521
  status: r.Idle,
519
- previewUrl: URL.createObjectURL(o)
522
+ previewUrl: URL.createObjectURL(c)
520
523
  };
521
- n.push(s);
524
+ n.push(l);
522
525
  }
523
526
  i.preventDefault(), e(n);
524
527
  return;
@@ -526,7 +529,7 @@ var J = () => `${Date.now()}-${Math.random().toString(36).slice(2)}`, fe = (e) =
526
529
  let l = i.clipboardData.getData("text/plain");
527
530
  if (l.length > n) {
528
531
  let n = l.trim(), a = (n.length > 80 ? `${n.slice(0, 80).trimEnd()}…` : n) || s, o = new File([l], a, { type: "text/plain" }), c = {
529
- id: J(),
532
+ id: q(),
530
533
  name: a,
531
534
  contentType: "text/plain",
532
535
  file: o,
@@ -541,6 +544,6 @@ var J = () => `${Date.now()}-${Math.random().toString(36).slice(2)}`, fe = (e) =
541
544
  a,
542
545
  s
543
546
  ]) };
544
- }, Re = 100;
547
+ }, Ve = 100;
545
548
  //#endregion
546
- export { xe as ATTACHMENT_COLLAPSE_THRESHOLD, $ as AttachmentCard, Pe as AttachmentGroup, je as AttachmentTray, Ie as FileDndOverlay, Q as LazyImageLoadStatus, Re as MAX_UPLOADS_PER_MINUTE, J as generateAttachmentId, Y as getAttachmentCardState, _e as getAttachmentIcon, ye as getExtFromContentType, fe as getNameWithoutExtension, ge as isMimeTypeAllowed, he as mimeTypesToExtensionLabels, Le as useClipboardPaste, ke as useLazyImageLoad };
549
+ export { Se as ATTACHMENT_COLLAPSE_THRESHOLD, Q as AttachmentCard, Fe as AttachmentGroup, Me as AttachmentTray, Le as FileDndOverlay, Z as LazyImageLoadStatus, Ve as MAX_UPLOADS_PER_MINUTE, q as generateAttachmentId, J as getAttachmentCardState, ve as getAttachmentIcon, be as getExtFromContentType, pe as getNameWithoutExtension, _e as isMimeTypeAllowed, ge as mimeTypesToExtensionLabels, Be as useClipboardPaste, Ae as useLazyImageLoad };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@epam/ai-dial-attachment-input",
3
3
  "description": "File attachment input components with upload validation, drag-and-drop, and progress tracking",
4
- "version": "1.1.0-dev.456",
4
+ "version": "1.1.0-dev.465",
5
5
  "license": "Apache-2.0",
6
6
  "type": "module",
7
7
  "main": "./index.js",
@@ -17,7 +17,7 @@
17
17
  }
18
18
  },
19
19
  "peerDependencies": {
20
- "@epam/ai-dial-chat-shared": "1.1.0-dev.456",
20
+ "@epam/ai-dial-chat-shared": "1.1.0-dev.465",
21
21
  "@tabler/icons-react": "^3.44.0",
22
22
  "react": "^19.0.0",
23
23
  "@epam/ai-dial-ui-kit": "^0.14.0-dev.15"