@epam/ai-dial-attachment-input 1.0.0-dev.456 → 1.0.0-dev.460
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AttachmentCard.d.ts","sourceRoot":"","sources":["../../../src/components/AttachmentCard/AttachmentCard.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"AttachmentCard.d.ts","sourceRoot":"","sources":["../../../src/components/AttachmentCard/AttachmentCard.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAE,KAAK,EAAE,EAAgD,MAAM,OAAO,CAAC;AAK9E,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAKvE,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAsVlD,CAAC"}
|
package/index.js
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import { AttachmentErrorReason as e, AttachmentType as t,
|
|
2
|
-
import { DIAL_ICON_SIZE as
|
|
3
|
-
import { IconClipboard as
|
|
4
|
-
import { useCallback as
|
|
5
|
-
import { Fragment as
|
|
1
|
+
import { AttachmentErrorReason as e, AttachmentType as t, Highlight as n, MIME_TYPE_EXT_MAP as r, RequestStatus as i, buildCssVars as a, mergeClasses as o } from "@epam/ai-dial-chat-shared";
|
|
2
|
+
import { DIAL_ICON_SIZE as s, DialGhostIconButton as c, DialSkeleton as l, DialSkeletonVariant as u, DialSpinner as d, ElementSize as f } from "@epam/ai-dial-ui-kit";
|
|
3
|
+
import { IconClipboard as p, IconDownload as ee, IconFile as m, IconFileDescription as h, IconFileTypeBmp as g, IconFileTypeCss as _, IconFileTypeCsv as v, IconFileTypeDoc as te, IconFileTypeDocx as ne, IconFileTypeHtml as y, IconFileTypeJpg as b, IconFileTypeJs as x, IconFileTypeJsx as S, IconFileTypePdf as C, IconFileTypePhp as w, IconFileTypePng as T, IconFileTypePpt as E, IconFileTypeRs as D, IconFileTypeSql as O, IconFileTypeSvg as k, IconFileTypeTs as A, IconFileTypeTsx as j, IconFileTypeTxt as M, IconFileTypeVue as N, IconFileTypeXls as P, IconFileTypeXml as F, IconFileTypeZip as re, IconFileX as ie, IconMusic as I, IconPhoto as L, IconReload as ae, IconTerminal2 as R, IconVideo as z, IconX as oe } from "@tabler/icons-react";
|
|
4
|
+
import { useCallback as B, useEffect as V, useMemo as se, useRef as H, useState as U } from "react";
|
|
5
|
+
import { Fragment as W, jsx as G, jsxs as K } from "react/jsx-runtime";
|
|
6
6
|
//#region src/hooks/useLazyImageLoad.ts
|
|
7
|
-
var
|
|
7
|
+
var q = /* @__PURE__ */ function(e) {
|
|
8
8
|
return e.Idle = "idle", e.Loading = "loading", e.Loaded = "loaded", e.Error = "error", e;
|
|
9
|
-
}({}),
|
|
10
|
-
let n =
|
|
11
|
-
return
|
|
9
|
+
}({}), ce = ({ enabled: e, src: t }) => {
|
|
10
|
+
let n = H(null), [r, i] = U("idle");
|
|
11
|
+
return V(() => {
|
|
12
12
|
i(e && t ? "loading" : "idle");
|
|
13
|
-
}, [e, t]),
|
|
13
|
+
}, [e, t]), V(() => {
|
|
14
14
|
let r = n.current;
|
|
15
15
|
if (!r || !e || !t) return;
|
|
16
16
|
let a = () => i("loaded"), o = () => i("error");
|
|
@@ -21,7 +21,7 @@ var Y = /* @__PURE__ */ function(e) {
|
|
|
21
21
|
imageRef: n,
|
|
22
22
|
imageLoadStatus: r
|
|
23
23
|
};
|
|
24
|
-
},
|
|
24
|
+
}, J = {
|
|
25
25
|
card: "_card_11tpd_1",
|
|
26
26
|
cardError: "_cardError_11tpd_6",
|
|
27
27
|
cardSelected: "_cardSelected_11tpd_10",
|
|
@@ -32,311 +32,323 @@ var Y = /* @__PURE__ */ function(e) {
|
|
|
32
32
|
loadingOverlay: "_loadingOverlay_11tpd_28",
|
|
33
33
|
actionBtn: "_actionBtn_11tpd_32",
|
|
34
34
|
removeBtnImage: "_removeBtnImage_11tpd_43"
|
|
35
|
-
},
|
|
35
|
+
}, Y = (e) => {
|
|
36
36
|
if (!e) return m;
|
|
37
37
|
if (e.startsWith("image/")) switch (e) {
|
|
38
38
|
case "image/jpeg":
|
|
39
|
-
case "image/jpg": return
|
|
40
|
-
case "image/png": return
|
|
41
|
-
case "image/svg+xml": return
|
|
39
|
+
case "image/jpg": return b;
|
|
40
|
+
case "image/png": return T;
|
|
41
|
+
case "image/svg+xml": return k;
|
|
42
42
|
case "image/bmp": return g;
|
|
43
|
-
default: return
|
|
43
|
+
default: return L;
|
|
44
44
|
}
|
|
45
|
-
if (e.startsWith("video/")) return
|
|
46
|
-
if (e.startsWith("audio/")) return
|
|
45
|
+
if (e.startsWith("video/")) return z;
|
|
46
|
+
if (e.startsWith("audio/")) return I;
|
|
47
47
|
switch (e) {
|
|
48
|
-
case "application/pdf": return
|
|
48
|
+
case "application/pdf": return C;
|
|
49
49
|
case "application/msword":
|
|
50
|
-
case "application/vnd.ms-word": return
|
|
51
|
-
case "application/vnd.openxmlformats-officedocument.wordprocessingml.document": return
|
|
52
|
-
case "application/vnd.ms-powerpoint": return
|
|
53
|
-
case "application/vnd.openxmlformats-officedocument.presentationml.presentation": return
|
|
54
|
-
case "application/vnd.ms-excel": return
|
|
55
|
-
case "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": return
|
|
50
|
+
case "application/vnd.ms-word": return te;
|
|
51
|
+
case "application/vnd.openxmlformats-officedocument.wordprocessingml.document": return ne;
|
|
52
|
+
case "application/vnd.ms-powerpoint": return E;
|
|
53
|
+
case "application/vnd.openxmlformats-officedocument.presentationml.presentation": return E;
|
|
54
|
+
case "application/vnd.ms-excel": return P;
|
|
55
|
+
case "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": return P;
|
|
56
56
|
case "application/zip":
|
|
57
57
|
case "application/x-zip-compressed":
|
|
58
58
|
case "application/x-rar-compressed":
|
|
59
59
|
case "application/x-7z-compressed":
|
|
60
60
|
case "application/gzip":
|
|
61
|
-
case "application/x-tar": return
|
|
61
|
+
case "application/x-tar": return re;
|
|
62
62
|
case "text/csv": return v;
|
|
63
|
-
case "text/plain": return
|
|
63
|
+
case "text/plain": return M;
|
|
64
64
|
case "text/html":
|
|
65
|
-
case "application/xhtml+xml": return
|
|
65
|
+
case "application/xhtml+xml": return y;
|
|
66
66
|
case "text/xml":
|
|
67
|
-
case "application/xml": return
|
|
67
|
+
case "application/xml": return F;
|
|
68
68
|
case "application/sql":
|
|
69
|
-
case "text/x-sql": return
|
|
69
|
+
case "text/x-sql": return O;
|
|
70
70
|
case "text/javascript":
|
|
71
|
-
case "application/javascript": return
|
|
72
|
-
case "text/jsx": return
|
|
71
|
+
case "application/javascript": return x;
|
|
72
|
+
case "text/jsx": return S;
|
|
73
73
|
case "application/typescript":
|
|
74
|
-
case "text/typescript": return
|
|
75
|
-
case "text/tsx": return
|
|
74
|
+
case "text/typescript": return A;
|
|
75
|
+
case "text/tsx": return j;
|
|
76
76
|
case "text/css": return _;
|
|
77
77
|
case "text/x-php":
|
|
78
|
-
case "application/x-php": return
|
|
78
|
+
case "application/x-php": return w;
|
|
79
79
|
case "text/x-rustsrc":
|
|
80
|
-
case "application/x-rust": return
|
|
81
|
-
case "text/x-vue": return
|
|
80
|
+
case "application/x-rust": return D;
|
|
81
|
+
case "text/x-vue": return N;
|
|
82
82
|
default: return m;
|
|
83
83
|
}
|
|
84
|
-
},
|
|
84
|
+
}, X = (e) => {
|
|
85
85
|
let { type: n, contentType: r } = e;
|
|
86
|
-
return n === t.Prompt ?
|
|
87
|
-
},
|
|
88
|
-
let t = e.toLowerCase().split(";")[0].trim(),
|
|
89
|
-
if (
|
|
86
|
+
return n === t.Prompt ? R : n === t.Pasted ? p : n === t.Image ? L : Y(r ?? "");
|
|
87
|
+
}, Z = (e) => {
|
|
88
|
+
let t = e.toLowerCase().split(";")[0].trim(), n = r[t];
|
|
89
|
+
if (n) return n;
|
|
90
90
|
let i = t.split("/")[1];
|
|
91
91
|
if (i && !i.startsWith("vnd.") && !i.includes("+")) return i;
|
|
92
|
-
},
|
|
92
|
+
}, le = (e) => {
|
|
93
93
|
let { type: n, name: r, contentType: i } = e;
|
|
94
94
|
if (n === t.Prompt) return "Prompt";
|
|
95
95
|
if (n === t.Pasted) return "Pasted";
|
|
96
96
|
if (n === t.Image) return "Image";
|
|
97
97
|
if (i) {
|
|
98
|
-
let e =
|
|
98
|
+
let e = Z(i);
|
|
99
99
|
if (e) return `.${e}`;
|
|
100
100
|
}
|
|
101
101
|
let a = r.lastIndexOf(".");
|
|
102
102
|
return a > 0 && a < r.length - 1 ? `.${r.slice(a + 1).toLowerCase()}` : r;
|
|
103
|
-
},
|
|
104
|
-
let { type:
|
|
103
|
+
}, ue = (e, n, r) => {
|
|
104
|
+
let { type: a, status: s, previewUrl: c, url: l } = e, u = s === i.Loading, d = s === i.Error, f = a === t.Image && !!(c ?? l) && !d, p = a === t.Audio && !d, ee = o(J.card, d && J.cardError, n && J.cardSelected, !d && !n && a === t.Prompt && J.cardPrompt, !d && !n && a === t.Pasted && J.cardPasted);
|
|
105
105
|
return {
|
|
106
106
|
isLoading: u,
|
|
107
107
|
isError: d,
|
|
108
108
|
isImage: f,
|
|
109
109
|
isAudio: p,
|
|
110
|
-
areActionsVisible: d ||
|
|
111
|
-
BottomIcon:
|
|
112
|
-
typeLabel:
|
|
113
|
-
cardColorClass:
|
|
114
|
-
removeBtnClass: f ?
|
|
110
|
+
areActionsVisible: d || r,
|
|
111
|
+
BottomIcon: X(e),
|
|
112
|
+
typeLabel: le(e),
|
|
113
|
+
cardColorClass: ee,
|
|
114
|
+
removeBtnClass: f ? J.removeBtnImage : J.actionBtn
|
|
115
115
|
};
|
|
116
|
-
},
|
|
116
|
+
}, Q = (e) => {
|
|
117
117
|
let t = e.lastIndexOf(".");
|
|
118
118
|
return t > 0 ? e.slice(0, t) : e;
|
|
119
|
-
},
|
|
120
|
-
let { id: w, name: T } =
|
|
119
|
+
}, de = ({ attachment: r, searchQuery: i = "", onRemove: p, onRetry: m, onExpand: h, onClick: g, isSelected: _, shouldAlwaysShowActions: v, removeLabel: te = "Remove attachment", retryLabel: ne = "Retry upload", clickLabel: y = "Open attachment", colors: b, typography: x, roundedClassName: S = "rounded", className: C }) => {
|
|
120
|
+
let { id: w, name: T } = r, E = r.previewUrl ?? r.url, D = r.type === t.Pasted, O = D && h !== void 0, k = g !== void 0 && !O, A = O || k, j = se(() => D ? T : Q(T), [D, T]), M = a({
|
|
121
121
|
"--ci-card-border": b?.border,
|
|
122
122
|
"--ci-card-bg": b?.background,
|
|
123
123
|
"--ci-card-name": b?.nameText,
|
|
124
124
|
"--ci-card-meta": b?.metaText
|
|
125
|
-
}), { isLoading: N, isError: P, isImage: F, isAudio:
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
]), { imageRef:
|
|
125
|
+
}), { isLoading: N, isError: P, isImage: F, isAudio: re, areActionsVisible: ie, BottomIcon: I, typeLabel: R, cardColorClass: z, removeBtnClass: B } = se(() => ue(r, _ ?? !1, v ?? !1), [
|
|
126
|
+
r,
|
|
127
|
+
_,
|
|
128
|
+
v
|
|
129
|
+
]), { imageRef: V, imageLoadStatus: H } = ce({
|
|
130
130
|
enabled: F,
|
|
131
131
|
src: E
|
|
132
|
-
}),
|
|
133
|
-
O &&
|
|
134
|
-
},
|
|
135
|
-
(e.key === "Enter" || e.key === " ") && (e.preventDefault(),
|
|
132
|
+
}), U = () => {
|
|
133
|
+
O && h ? h(w) : k && g && g(w);
|
|
134
|
+
}, Y = (e) => {
|
|
135
|
+
(e.key === "Enter" || e.key === " ") && (e.preventDefault(), U());
|
|
136
136
|
};
|
|
137
|
-
if (
|
|
137
|
+
if (re) return /* @__PURE__ */ K("div", {
|
|
138
138
|
style: M,
|
|
139
|
-
className:
|
|
140
|
-
children: [/* @__PURE__ */
|
|
139
|
+
className: o("group flex w-full min-w-[280px] max-w-[300px] flex-col gap-2 border p-3", S, z, C),
|
|
140
|
+
children: [/* @__PURE__ */ K("div", {
|
|
141
141
|
className: "flex items-center justify-between gap-2",
|
|
142
|
-
children: [/* @__PURE__ */
|
|
143
|
-
title:
|
|
144
|
-
className:
|
|
145
|
-
children: n
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
142
|
+
children: [/* @__PURE__ */ G("span", {
|
|
143
|
+
title: r.name,
|
|
144
|
+
className: o(x?.fontClassName ?? "dial-tiny-text", "min-w-0 truncate", J.name),
|
|
145
|
+
children: i ? /* @__PURE__ */ G(n, {
|
|
146
|
+
text: r.name,
|
|
147
|
+
query: i,
|
|
148
|
+
maxLines: 1
|
|
149
|
+
}) : r.name
|
|
150
|
+
}), g && /* @__PURE__ */ G(c, {
|
|
151
|
+
icon: /* @__PURE__ */ G(ee, {
|
|
152
|
+
size: s.SM,
|
|
149
153
|
"aria-hidden": !0
|
|
150
154
|
}),
|
|
151
|
-
size:
|
|
152
|
-
className:
|
|
155
|
+
size: f.Small,
|
|
156
|
+
className: o("h-6 w-6 shrink-0 rounded", B),
|
|
153
157
|
"aria-label": y,
|
|
154
158
|
onClick: (e) => {
|
|
155
|
-
e.stopPropagation(),
|
|
159
|
+
e.stopPropagation(), g(w);
|
|
156
160
|
}
|
|
157
161
|
})]
|
|
158
|
-
}),
|
|
162
|
+
}), r.playUrl && /* @__PURE__ */ G("audio", {
|
|
159
163
|
controls: !0,
|
|
160
|
-
src:
|
|
164
|
+
src: r.playUrl,
|
|
161
165
|
className: "w-full",
|
|
162
166
|
preload: "metadata"
|
|
163
167
|
})]
|
|
164
168
|
});
|
|
165
|
-
let
|
|
166
|
-
F ? /* @__PURE__ */
|
|
169
|
+
let X = o("group relative flex h-[100px] w-[100px] flex-shrink-0 border focus-within:outline focus-within:outline-1 focus-within:outline-offset-1", S, z, !F && "flex-col gap-3 p-3", A && "cursor-pointer", C), Z = /* @__PURE__ */ K(W, { children: [
|
|
170
|
+
F ? /* @__PURE__ */ K("div", {
|
|
167
171
|
className: "relative h-full w-full overflow-hidden",
|
|
168
|
-
children: [
|
|
169
|
-
variant:
|
|
172
|
+
children: [H !== q.Loaded && /* @__PURE__ */ G(l, {
|
|
173
|
+
variant: u.Rectangular,
|
|
170
174
|
width: "100%",
|
|
171
175
|
height: "100%",
|
|
172
|
-
active:
|
|
173
|
-
overlay: /* @__PURE__ */
|
|
174
|
-
size:
|
|
176
|
+
active: H === q.Loading,
|
|
177
|
+
overlay: /* @__PURE__ */ G(L, {
|
|
178
|
+
size: s.LG,
|
|
175
179
|
className: x?.placeholderIconClassName ?? "text-secondary",
|
|
176
180
|
"aria-hidden": !0
|
|
177
181
|
}),
|
|
178
|
-
className:
|
|
179
|
-
}), /* @__PURE__ */
|
|
180
|
-
ref:
|
|
182
|
+
className: o("absolute inset-0", S)
|
|
183
|
+
}), /* @__PURE__ */ G("img", {
|
|
184
|
+
ref: V,
|
|
181
185
|
src: E,
|
|
182
186
|
alt: T,
|
|
183
187
|
loading: "lazy",
|
|
184
188
|
decoding: "async",
|
|
185
|
-
className:
|
|
189
|
+
className: o("h-full w-full object-cover transition-opacity duration-200", H === q.Loaded ? "opacity-100" : "opacity-0", S)
|
|
186
190
|
})]
|
|
187
|
-
}) : P ? /* @__PURE__ */
|
|
191
|
+
}) : P ? /* @__PURE__ */ K(W, { children: [/* @__PURE__ */ K("div", {
|
|
188
192
|
className: "flex flex-row items-center gap-1 overflow-hidden",
|
|
189
|
-
children: [/* @__PURE__ */
|
|
190
|
-
size:
|
|
191
|
-
className:
|
|
193
|
+
children: [/* @__PURE__ */ G(I, {
|
|
194
|
+
size: s.SM,
|
|
195
|
+
className: o("shrink-0", J.meta),
|
|
192
196
|
"aria-hidden": !0
|
|
193
|
-
}), /* @__PURE__ */
|
|
197
|
+
}), /* @__PURE__ */ G("span", {
|
|
194
198
|
title: R,
|
|
195
|
-
className:
|
|
199
|
+
className: o(x?.metaClassName ?? "dial-tiny-text", "min-w-0 truncate", J.meta),
|
|
196
200
|
children: R
|
|
197
201
|
})]
|
|
198
|
-
}), /* @__PURE__ */
|
|
202
|
+
}), /* @__PURE__ */ G("div", {
|
|
199
203
|
className: "min-w-0 flex-1",
|
|
200
|
-
children: /* @__PURE__ */
|
|
204
|
+
children: /* @__PURE__ */ G("div", {
|
|
201
205
|
title: j,
|
|
202
|
-
className:
|
|
203
|
-
children:
|
|
206
|
+
className: o(x?.fontClassName ?? "dial-tiny-text", "line-clamp-3 break-words", J.name),
|
|
207
|
+
children: i ? /* @__PURE__ */ G(n, {
|
|
208
|
+
text: j,
|
|
209
|
+
query: i,
|
|
210
|
+
maxLines: 3
|
|
211
|
+
}) : j
|
|
204
212
|
})
|
|
205
|
-
})] }) : /* @__PURE__ */
|
|
213
|
+
})] }) : /* @__PURE__ */ K(W, { children: [/* @__PURE__ */ G("div", {
|
|
206
214
|
className: "min-w-0 flex-1",
|
|
207
|
-
children: /* @__PURE__ */
|
|
215
|
+
children: /* @__PURE__ */ G("div", {
|
|
208
216
|
title: j,
|
|
209
|
-
className:
|
|
210
|
-
children:
|
|
217
|
+
className: o(x?.fontClassName ?? "dial-tiny-text", "line-clamp-3 break-words", J.name),
|
|
218
|
+
children: i ? /* @__PURE__ */ G(n, {
|
|
219
|
+
text: j,
|
|
220
|
+
query: i,
|
|
221
|
+
maxLines: 3
|
|
222
|
+
}) : j
|
|
211
223
|
})
|
|
212
|
-
}), /* @__PURE__ */
|
|
224
|
+
}), /* @__PURE__ */ K("div", {
|
|
213
225
|
className: "flex flex-row items-center gap-1 overflow-hidden",
|
|
214
|
-
children: [/* @__PURE__ */
|
|
215
|
-
size:
|
|
216
|
-
className:
|
|
226
|
+
children: [/* @__PURE__ */ G(I, {
|
|
227
|
+
size: s.SM,
|
|
228
|
+
className: o("shrink-0", J.meta),
|
|
217
229
|
"aria-hidden": !0
|
|
218
|
-
}), /* @__PURE__ */
|
|
230
|
+
}), /* @__PURE__ */ G("span", {
|
|
219
231
|
title: R,
|
|
220
|
-
className:
|
|
232
|
+
className: o(x?.metaClassName ?? "dial-tiny-text", "min-w-0 truncate", J.meta),
|
|
221
233
|
children: R
|
|
222
234
|
})]
|
|
223
235
|
})] }),
|
|
224
|
-
N && /* @__PURE__ */
|
|
225
|
-
className:
|
|
226
|
-
children: /* @__PURE__ */
|
|
236
|
+
N && /* @__PURE__ */ G("span", {
|
|
237
|
+
className: o("absolute inset-0 flex items-center justify-center", S, J.loadingOverlay),
|
|
238
|
+
children: /* @__PURE__ */ G(d, {
|
|
227
239
|
size: 40,
|
|
228
240
|
ariaLabel: "Loading attachment",
|
|
229
241
|
className: "z-50"
|
|
230
242
|
})
|
|
231
243
|
}),
|
|
232
|
-
!N && /* @__PURE__ */
|
|
233
|
-
className:
|
|
234
|
-
children: [P &&
|
|
235
|
-
icon: /* @__PURE__ */
|
|
236
|
-
size:
|
|
244
|
+
!N && /* @__PURE__ */ K("div", {
|
|
245
|
+
className: o("absolute end-1 top-1 flex gap-1 transition-opacity", ie ? "opacity-100" : "opacity-0 group-focus-within:opacity-100 group-hover:opacity-100 mobile:opacity-100"),
|
|
246
|
+
children: [P && m && r.errorReason !== e.UnsupportedType && /* @__PURE__ */ G(c, {
|
|
247
|
+
icon: /* @__PURE__ */ G(ae, {
|
|
248
|
+
size: s.SM,
|
|
237
249
|
"aria-hidden": !0
|
|
238
250
|
}),
|
|
239
|
-
size:
|
|
240
|
-
className:
|
|
241
|
-
"aria-label":
|
|
251
|
+
size: f.Small,
|
|
252
|
+
className: o("h-6 w-6 rounded", B),
|
|
253
|
+
"aria-label": ne,
|
|
242
254
|
onClick: (e) => {
|
|
243
|
-
e.stopPropagation(),
|
|
255
|
+
e.stopPropagation(), m(w);
|
|
244
256
|
}
|
|
245
|
-
}),
|
|
246
|
-
icon: /* @__PURE__ */
|
|
247
|
-
size:
|
|
257
|
+
}), p && /* @__PURE__ */ G(c, {
|
|
258
|
+
icon: /* @__PURE__ */ G(oe, {
|
|
259
|
+
size: s.SM,
|
|
248
260
|
"aria-hidden": !0
|
|
249
261
|
}),
|
|
250
|
-
size:
|
|
251
|
-
className:
|
|
252
|
-
"aria-label":
|
|
262
|
+
size: f.Small,
|
|
263
|
+
className: o("h-6 w-6 rounded", B),
|
|
264
|
+
"aria-label": te,
|
|
253
265
|
onClick: (e) => {
|
|
254
|
-
e.stopPropagation(),
|
|
266
|
+
e.stopPropagation(), p?.(w);
|
|
255
267
|
}
|
|
256
268
|
})]
|
|
257
269
|
})
|
|
258
270
|
] });
|
|
259
|
-
return A ? /* @__PURE__ */
|
|
271
|
+
return A ? /* @__PURE__ */ G("div", {
|
|
260
272
|
style: M,
|
|
261
|
-
className:
|
|
262
|
-
onClick:
|
|
263
|
-
onKeyDown:
|
|
273
|
+
className: X,
|
|
274
|
+
onClick: U,
|
|
275
|
+
onKeyDown: Y,
|
|
264
276
|
tabIndex: 0,
|
|
265
277
|
role: "button",
|
|
266
278
|
"aria-label": k ? y : void 0,
|
|
267
|
-
children:
|
|
268
|
-
}) : /* @__PURE__ */
|
|
279
|
+
children: Z
|
|
280
|
+
}) : /* @__PURE__ */ G("div", {
|
|
269
281
|
style: M,
|
|
270
|
-
className:
|
|
271
|
-
children:
|
|
282
|
+
className: X,
|
|
283
|
+
children: Z
|
|
272
284
|
});
|
|
273
|
-
},
|
|
285
|
+
}, fe = ({ attachments: e, onRemove: t, onRetry: n, onExpand: r, ariaLabel: i = "Attached files", removeLabel: a, retryLabel: s, onAttachmentClick: c, clickLabel: l, className: u }) => e.length === 0 ? null : /* @__PURE__ */ G("div", {
|
|
274
286
|
role: "list",
|
|
275
287
|
"aria-label": i,
|
|
276
|
-
className:
|
|
277
|
-
children: e.map((e) => /* @__PURE__ */
|
|
288
|
+
className: o("flex w-full min-w-0 gap-2 overflow-x-auto", u),
|
|
289
|
+
children: e.map((e) => /* @__PURE__ */ G("div", {
|
|
278
290
|
role: "listitem",
|
|
279
|
-
children: /* @__PURE__ */
|
|
291
|
+
children: /* @__PURE__ */ G(de, {
|
|
280
292
|
attachment: e,
|
|
281
293
|
onRemove: t,
|
|
282
294
|
onRetry: n,
|
|
283
295
|
onExpand: r,
|
|
284
|
-
removeLabel:
|
|
296
|
+
removeLabel: a,
|
|
285
297
|
retryLabel: s,
|
|
286
298
|
onClick: c ? () => c(e) : void 0,
|
|
287
299
|
clickLabel: l
|
|
288
300
|
})
|
|
289
301
|
}, e.id))
|
|
290
|
-
}),
|
|
302
|
+
}), pe = ({ isVisible: e, isAttachmentsAllowed: t = !0, title: n, subtitle: r, iconClassName: i = "text-accent-primary", deniedIconClassName: a = "text-error", titleClassName: s = "heading-3 font-semibold", subtitleClassName: c = "dial-small-text" }) => {
|
|
291
303
|
if (!e) return null;
|
|
292
|
-
let l = n ?? (t ? "Attach files" : "No attachments allowed"), u = r ?? (t ? "Drop files here to attach them to message" : "Attachments can't be added to message"), d = t ? i :
|
|
304
|
+
let l = n ?? (t ? "Attach files" : "No attachments allowed"), u = r ?? (t ? "Drop files here to attach them to message" : "Attachments can't be added to message"), d = t ? i : a, f = (e) => {
|
|
293
305
|
e.preventDefault();
|
|
294
|
-
}, p = t ? h :
|
|
295
|
-
return /* @__PURE__ */
|
|
296
|
-
className:
|
|
306
|
+
}, p = t ? h : ie;
|
|
307
|
+
return /* @__PURE__ */ G("div", {
|
|
308
|
+
className: o("fixed inset-0 z-[9999] flex items-center justify-center bg-blackout backdrop-blur-sm", t ? "pointer-events-none" : "pointer-events-auto cursor-not-allowed"),
|
|
297
309
|
onDragOver: t ? void 0 : f,
|
|
298
310
|
onDrop: t ? void 0 : f,
|
|
299
|
-
children: /* @__PURE__ */
|
|
311
|
+
children: /* @__PURE__ */ K("div", {
|
|
300
312
|
className: "flex flex-col items-center text-center",
|
|
301
313
|
children: [
|
|
302
|
-
/* @__PURE__ */
|
|
314
|
+
/* @__PURE__ */ G(p, {
|
|
303
315
|
size: 100,
|
|
304
316
|
className: d
|
|
305
317
|
}),
|
|
306
|
-
/* @__PURE__ */
|
|
307
|
-
className:
|
|
318
|
+
/* @__PURE__ */ G("span", {
|
|
319
|
+
className: o("mt-5", s),
|
|
308
320
|
children: l
|
|
309
321
|
}),
|
|
310
|
-
/* @__PURE__ */
|
|
311
|
-
className:
|
|
322
|
+
/* @__PURE__ */ G("span", {
|
|
323
|
+
className: o("mt-4", c),
|
|
312
324
|
children: u
|
|
313
325
|
})
|
|
314
326
|
]
|
|
315
327
|
})
|
|
316
328
|
});
|
|
317
|
-
}, $ = () => `${Date.now()}-${Math.random().toString(36).slice(2)}`,
|
|
318
|
-
if (!
|
|
319
|
-
let a = Array.from(
|
|
329
|
+
}, $ = () => `${Date.now()}-${Math.random().toString(36).slice(2)}`, me = (e, n) => ({ handlePaste: B((r) => {
|
|
330
|
+
if (!r.clipboardData) return;
|
|
331
|
+
let a = Array.from(r.clipboardData.items).filter((e) => e.kind === "file" && e.type.startsWith("image/")), o = r.clipboardData.getData("text/plain").length > 0;
|
|
320
332
|
if (a.length > 0 && !o) {
|
|
321
333
|
let n = [];
|
|
322
334
|
for (let e of a) {
|
|
323
|
-
let
|
|
324
|
-
if (!
|
|
325
|
-
let a = new File([
|
|
335
|
+
let r = e.getAsFile();
|
|
336
|
+
if (!r) continue;
|
|
337
|
+
let a = new File([r], "Screenshot.png", { type: r.type }), o = {
|
|
326
338
|
id: $(),
|
|
327
339
|
name: "Screenshot.png",
|
|
328
|
-
contentType:
|
|
340
|
+
contentType: r.type,
|
|
329
341
|
file: a,
|
|
330
342
|
type: t.Image,
|
|
331
|
-
status:
|
|
343
|
+
status: i.Idle,
|
|
332
344
|
previewUrl: URL.createObjectURL(a)
|
|
333
345
|
};
|
|
334
346
|
n.push(o);
|
|
335
347
|
}
|
|
336
|
-
|
|
348
|
+
r.preventDefault(), e(n);
|
|
337
349
|
return;
|
|
338
350
|
}
|
|
339
|
-
let s =
|
|
351
|
+
let s = r.clipboardData.getData("text/plain");
|
|
340
352
|
if (s.length > n) {
|
|
341
353
|
let n = s.trim(), a = (n.length > 80 ? `${n.slice(0, 80).trimEnd()}…` : n) || "Pasted text", o = new File([s], a, { type: "text/plain" }), c = {
|
|
342
354
|
id: $(),
|
|
@@ -344,29 +356,29 @@ var Y = /* @__PURE__ */ function(e) {
|
|
|
344
356
|
contentType: "text/plain",
|
|
345
357
|
file: o,
|
|
346
358
|
type: t.Pasted,
|
|
347
|
-
status:
|
|
359
|
+
status: i.Idle
|
|
348
360
|
};
|
|
349
|
-
|
|
361
|
+
r.preventDefault(), e([c]);
|
|
350
362
|
}
|
|
351
|
-
}, [e, n]) }),
|
|
363
|
+
}, [e, n]) }), he = {
|
|
352
364
|
image: "Image files",
|
|
353
365
|
audio: "Audio files",
|
|
354
366
|
video: "Video files",
|
|
355
367
|
text: "Text files"
|
|
356
|
-
},
|
|
368
|
+
}, ge = (e) => e.map((e) => {
|
|
357
369
|
if (e.endsWith("/*")) {
|
|
358
370
|
let t = e.slice(0, -2);
|
|
359
|
-
return
|
|
371
|
+
return he[t] ?? `${t} files`;
|
|
360
372
|
}
|
|
361
373
|
let t = e.split("/")[1];
|
|
362
374
|
return t == null ? e.toUpperCase() : t.toUpperCase();
|
|
363
|
-
}).join(", "),
|
|
375
|
+
}).join(", "), _e = (e, t) => t.length === 0 ? !1 : t.some((t) => {
|
|
364
376
|
if (t === "*" || t === "*/*") return !0;
|
|
365
377
|
if (t.endsWith("/*")) {
|
|
366
378
|
let n = t.slice(0, -2);
|
|
367
379
|
return e.startsWith(`${n}/`);
|
|
368
380
|
}
|
|
369
381
|
return e === t;
|
|
370
|
-
}),
|
|
382
|
+
}), ve = 100;
|
|
371
383
|
//#endregion
|
|
372
|
-
export {
|
|
384
|
+
export { de as AttachmentCard, fe as AttachmentTray, pe as FileDndOverlay, q as LazyImageLoadStatus, ve as MAX_UPLOADS_PER_MINUTE, $ as generateAttachmentId, ue as getAttachmentCardState, Y as getAttachmentIcon, Q as getNameWithoutExtension, _e as isMimeTypeAllowed, ge as mimeTypesToExtensionLabels, me as useClipboardPaste, ce as useLazyImageLoad };
|
|
@@ -23,6 +23,8 @@ export interface AttachmentCardTypography {
|
|
|
23
23
|
export interface AttachmentCardProps {
|
|
24
24
|
/** The attachment data to display. */
|
|
25
25
|
attachment: DisplayAttachment;
|
|
26
|
+
/** Current search query — when set, matches in the file name are highlighted. */
|
|
27
|
+
searchQuery?: string;
|
|
26
28
|
/** Called when the user activates the remove button. */
|
|
27
29
|
onRemove?: (id: string) => void;
|
|
28
30
|
/** Called when the user activates the retry button (error state only). */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AttachmentCard.d.ts","sourceRoot":"","sources":["../../src/models/AttachmentCard.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAEnE,wEAAwE;AACxE,MAAM,WAAW,oBAAoB;IACnC,8CAA8C;IAC9C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kDAAkD;IAClD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,+DAA+D;AAC/D,MAAM,WAAW,wBAAwB;IACvC,mFAAmF;IACnF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,2GAA2G;IAC3G,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,sHAAsH;IACtH,wBAAwB,CAAC,EAAE,MAAM,CAAC;CACnC;AAED,wDAAwD;AACxD,MAAM,WAAW,mBAAmB;IAClC,sCAAsC;IACtC,UAAU,EAAE,iBAAiB,CAAC;IAC9B,wDAAwD;IACxD,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,0EAA0E;IAC1E,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,6GAA6G;IAC7G,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,8EAA8E;IAC9E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kFAAkF;IAClF,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gEAAgE;IAChE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gGAAgG;IAChG,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,uHAAuH;IACvH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,wDAAwD;IACxD,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,8DAA8D;IAC9D,UAAU,CAAC,EAAE,wBAAwB,CAAC;IACtC,wHAAwH;IACxH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}
|
|
1
|
+
{"version":3,"file":"AttachmentCard.d.ts","sourceRoot":"","sources":["../../src/models/AttachmentCard.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAEnE,wEAAwE;AACxE,MAAM,WAAW,oBAAoB;IACnC,8CAA8C;IAC9C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kDAAkD;IAClD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,+DAA+D;AAC/D,MAAM,WAAW,wBAAwB;IACvC,mFAAmF;IACnF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,2GAA2G;IAC3G,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,sHAAsH;IACtH,wBAAwB,CAAC,EAAE,MAAM,CAAC;CACnC;AAED,wDAAwD;AACxD,MAAM,WAAW,mBAAmB;IAClC,sCAAsC;IACtC,UAAU,EAAE,iBAAiB,CAAC;IAC9B,iFAAiF;IACjF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wDAAwD;IACxD,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,0EAA0E;IAC1E,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,6GAA6G;IAC7G,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,8EAA8E;IAC9E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kFAAkF;IAClF,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gEAAgE;IAChE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gGAAgG;IAChG,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,uHAAuH;IACvH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,wDAAwD;IACxD,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,8DAA8D;IAC9D,UAAU,CAAC,EAAE,wBAAwB,CAAC;IACtC,wHAAwH;IACxH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}
|
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.0.0-dev.
|
|
4
|
+
"version": "1.0.0-dev.460",
|
|
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.0.0-dev.
|
|
20
|
+
"@epam/ai-dial-chat-shared": "1.0.0-dev.460",
|
|
21
21
|
"@epam/ai-dial-ui-kit": "0.12.0-dev.25",
|
|
22
22
|
"@tabler/icons-react": "^3.44.0",
|
|
23
23
|
"react": "^19.0.0"
|