@epam/ai-dial-conversation-messages 1.1.0-dev.44 → 1.1.0-dev.440

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.
package/index.js CHANGED
@@ -1,925 +1,301 @@
1
- import { AttachmentErrorReason as e, AttachmentType as t, DeploymentIcon as n, Highlight as r, MDMessageViewer as i, MIME_TYPE_EXT_MAP as a, MessageRating as o, MessageRole as s, RequestStatus as c, ResponseFormat as l, buildCssVars as u, mergeClasses as d, useCollapsedText as f } from "@epam/ai-dial-chat-shared";
2
- import { DIAL_ICON_SIZE as p, DialGhostIconButton as m, DialInput as h, DialLinkButton as g, DialPopup as _, DialPrimaryButton as v, DialRadioGroup as y, DialRoundedButton as b, DialSkeleton as x, DialSkeletonVariant as S, DialSlider as C, DialTag as w, DialTooltip as T, ElementSize as E, InfoMessageNotification as D, PopupSize as O, RadioGroupOrientation as k } from "@epam/ai-dial-ui-kit";
3
- import { IconCheck as A, IconChevronDown as j, IconChevronUp as M, IconClipboard as N, IconCopy as P, IconDownload as F, IconExternalLink as I, IconFile as L, IconFileTypeBmp as R, IconFileTypeCss as z, IconFileTypeCsv as B, IconFileTypeDoc as V, IconFileTypeDocx as ee, IconFileTypeHtml as te, IconFileTypeJpg as ne, IconFileTypeJs as re, IconFileTypeJsx as ie, IconFileTypePdf as ae, IconFileTypePhp as oe, IconFileTypePng as se, IconFileTypePpt as ce, IconFileTypeRs as le, IconFileTypeSql as ue, IconFileTypeSvg as de, IconFileTypeTs as fe, IconFileTypeTsx as pe, IconFileTypeTxt as me, IconFileTypeVue as he, IconFileTypeXls as ge, IconFileTypeXml as _e, IconFileTypeZip as ve, IconMarkdown as ye, IconMusic as be, IconPaperclip as xe, IconPencilMinus as Se, IconPhoto as H, IconRefresh as Ce, IconReload as we, IconTerminal2 as Te, IconThumbDown as Ee, IconThumbUp as De, IconTrashX as Oe, IconVideo as ke, IconX as Ae } from "@tabler/icons-react";
4
- import "react-dom";
5
- import { memo as je, useCallback as U, useEffect as Me, useId as Ne, useMemo as W, useRef as Pe, useState as G } from "react";
6
- import { Fragment as K, jsx as q, jsxs as J } from "react/jsx-runtime";
7
- //#region ../attachment-input/dist/index.js
8
- var Fe = "flex size-[84px] items-center justify-center rounded-xl border", Y = /* @__PURE__ */ function(e) {
9
- return e.None = "none", e.AllVisible = "all-visible", e.Collapsed = "collapsed", e;
10
- }({}), Ie = (e) => {
11
- let t = e.lastIndexOf(".");
12
- return t > 0 ? e.slice(0, t) : e;
13
- }, Le = (e) => {
14
- if (!e) return L;
15
- if (e.startsWith("image/")) switch (e) {
16
- case "image/jpeg":
17
- case "image/jpg": return ne;
18
- case "image/png": return se;
19
- case "image/svg+xml": return de;
20
- case "image/bmp": return R;
21
- default: return H;
22
- }
23
- if (e.startsWith("video/")) return ke;
24
- if (e.startsWith("audio/")) return be;
25
- switch (e) {
26
- case "application/pdf": return ae;
27
- case "application/msword":
28
- case "application/vnd.ms-word": return V;
29
- case "application/vnd.openxmlformats-officedocument.wordprocessingml.document": return ee;
30
- case "application/vnd.ms-powerpoint": return ce;
31
- case "application/vnd.openxmlformats-officedocument.presentationml.presentation": return ce;
32
- case "application/vnd.ms-excel": return ge;
33
- case "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": return ge;
34
- case "application/zip":
35
- case "application/x-zip-compressed":
36
- case "application/x-rar-compressed":
37
- case "application/x-7z-compressed":
38
- case "application/gzip":
39
- case "application/x-tar": return ve;
40
- case "text/csv": return B;
41
- case "text/plain": return me;
42
- case "text/html":
43
- case "application/xhtml+xml": return te;
44
- case "text/xml":
45
- case "application/xml": return _e;
46
- case "application/sql":
47
- case "text/x-sql": return ue;
48
- case "text/javascript":
49
- case "application/javascript": return re;
50
- case "text/jsx": return ie;
51
- case "application/typescript":
52
- case "text/typescript": return fe;
53
- case "text/tsx": return pe;
54
- case "text/css": return z;
55
- case "text/x-php":
56
- case "application/x-php": return oe;
57
- case "text/x-rustsrc":
58
- case "application/x-rust": return le;
59
- case "text/x-vue": return he;
60
- default: return L;
61
- }
62
- }, Re = (e) => {
63
- let { type: n, contentType: r } = e;
64
- return n === t.Prompt ? Te : n === t.Pasted ? N : n === t.Image ? H : Le(r ?? "");
65
- }, ze = (e) => {
66
- let t = e.toLowerCase().split(";")[0].trim(), n = a[t];
67
- if (n) return n;
68
- let r = t.split("/")[1];
69
- if (r && !r.startsWith("vnd.") && !r.includes("+")) return r;
70
- }, Be = (e, n) => {
71
- let { type: r, name: i, contentType: a } = e;
72
- if (r === t.Prompt) return n.promptLabel ?? "Prompt";
73
- if (r === t.Pasted) return n.pastedLabel ?? "Pasted";
74
- if (r === t.Image) return n.imageLabel ?? "Image";
75
- if (a) {
76
- let e = ze(a);
77
- if (e) return `.${e}`;
78
- }
79
- let o = i.lastIndexOf(".");
80
- return o > 0 && o < i.length - 1 ? `.${i.slice(o + 1).toLowerCase()}` : i;
81
- }, Ve = (e, n = {}) => {
82
- let { type: r, status: i, previewUrl: a, url: o } = e, s = i === c.Loading, l = i === c.Error, u = r === t.Image && !!(a ?? o) && !l, d = r === t.Audio && !l, f = r === t.Link && !l;
83
- return {
84
- isLoading: s,
85
- isError: l,
86
- isImage: u,
87
- isAudio: d,
88
- isLink: f,
89
- BottomIcon: f ? null : Re(e),
90
- typeLabel: f ? null : Be(e, n)
91
- };
92
- }, He = (e, t) => e <= 0 ? {
93
- layout: Y.None,
94
- visibleCount: 0,
95
- hiddenCount: 0
96
- } : e < 5 || t ? {
97
- layout: Y.AllVisible,
98
- visibleCount: e,
99
- hiddenCount: 0
100
- } : {
101
- layout: Y.Collapsed,
102
- visibleCount: 4,
103
- hiddenCount: e - 4
104
- }, X = {
105
- tile: "_tile_3x6ks_1",
106
- tileLight: "_tileLight_3x6ks_12",
107
- tileError: "_tileError_3x6ks_16",
108
- nameText: "_nameText_3x6ks_23",
109
- typeText: "_typeText_3x6ks_24",
110
- retryIcon: "_retryIcon_3x6ks_36",
111
- hoverIcon: "_hoverIcon_3x6ks_40",
112
- track: "_track_3x6ks_48",
113
- indeterminateFill: "_indeterminateFill_3x6ks_52",
114
- "attachment-tile-indeterminate": "_attachment-tile-indeterminate_3x6ks_1"
115
- }, Z = ({ ariaLabel: e, errorTitle: t, errorDescId: n, onClick: r, id: i, icon: a, className: o }) => /* @__PURE__ */ q(m, {
116
- icon: a,
117
- size: E.Small,
118
- className: d("absolute end-1 top-1 h-6 w-6 rounded-lg", o ?? X.hoverIcon),
119
- "aria-label": e,
120
- "aria-describedby": t ? n : void 0,
121
- onClick: (e) => {
122
- e.stopPropagation(), r(i);
123
- }
124
- }), Ue = ({ ...e }) => /* @__PURE__ */ q(Z, {
125
- icon: /* @__PURE__ */ q(we, {
126
- size: p.SM,
127
- "aria-hidden": !0
128
- }),
129
- className: X.retryIcon,
130
- ...e
131
- }), We = ({ ...e }) => /* @__PURE__ */ q(Z, {
132
- icon: /* @__PURE__ */ q(F, {
133
- size: p.SM,
134
- "aria-hidden": !0
135
- }),
136
- ...e
137
- }), Ge = ({ ...e }) => /* @__PURE__ */ q(Z, {
138
- icon: /* @__PURE__ */ q(I, {
139
- size: p.SM,
140
- "aria-hidden": !0
141
- }),
142
- ...e
143
- }), Ke = ({ ...e }) => /* @__PURE__ */ q(Z, {
144
- icon: /* @__PURE__ */ q(Ae, {
145
- size: p.SM,
146
- "aria-hidden": !0
147
- }),
148
- className: X.hoverIcon,
149
- ...e
150
- }), qe = ({ attachment: e, searchQuery: t = "", onClick: n, onDownload: i, onRemove: a, labels: o, styles: s, cssVars: c }) => {
151
- let { clickLabel: l = "Open attachment", downloadLabel: u = "Download attachment", removeLabel: f = "Remove attachment" } = o ?? {}, { typography: p, className: m } = s ?? {}, h = () => {
152
- n?.(e.id);
153
- };
154
- return /* @__PURE__ */ J("div", {
155
- style: c,
156
- ...n == null ? {} : {
157
- role: "button",
158
- tabIndex: 0,
159
- "aria-label": l,
160
- onClick: h,
161
- onKeyDown: (e) => {
162
- (e.key === "Enter" || e.key === " ") && (e.preventDefault(), h());
163
- }
164
- },
165
- className: d("group relative flex w-full min-w-[280px] max-w-[300px] flex-col gap-2 rounded-xl border p-3", n && "cursor-pointer", (i || a) && "pe-8", m),
166
- children: [
167
- /* @__PURE__ */ q("span", {
168
- title: e.name,
169
- className: d(p?.fontClassName ?? "dial-tiny-text", "min-w-0 truncate", X.nameText),
170
- children: t ? /* @__PURE__ */ q(r, {
171
- text: e.name,
172
- query: t,
173
- maxLines: 1
174
- }) : e.name
175
- }),
176
- e.playUrl && /* @__PURE__ */ q("audio", {
177
- controls: !0,
178
- src: e.playUrl,
179
- "aria-label": e.name,
180
- className: "w-full",
181
- preload: "metadata",
182
- onClick: (e) => e.stopPropagation()
183
- }),
184
- i && /* @__PURE__ */ q(We, {
185
- ariaLabel: u,
186
- onClick: i,
187
- id: e.id
188
- }),
189
- a && /* @__PURE__ */ q(Ke, {
190
- ariaLabel: f,
191
- onClick: a,
192
- id: e.id
193
- })
194
- ]
195
- });
196
- }, Je = {
197
- [e.Network]: "Upload failed · network error",
198
- [e.UnsupportedType]: "Upload failed · unsupported file type"
199
- }, Ye = ({ attachment: t, onClick: n, onRetry: r, labels: i, styles: a, onDownload: o, isPasted: s, isLink: l, cssVars: u, onExpand: f, isExpandable: p, onRemove: m }) => {
200
- let { clickLabel: h = "Download attachment", retryLabel: g = "Retry upload", sizeLabel: _, uploadingLabel: v = "Uploading", errorReasonLabels: y, genericErrorLabel: b = "Upload failed" } = i ?? {}, { typography: { nameClassName: x = "dial-caption-text", metaClassName: S = "dial-caption-text" } = {}, className: C } = a ?? {}, { id: w, name: T, status: E, errorReason: D } = t, O = E === c.Loading, k = E === c.Error, A = Ne(), j = k ? D && (y?.[D] ?? Je[D]) || b : "", { BottomIcon: M, typeLabel: N } = Ve(t), P = !k && !O && o && !l, F = k && !!r && D !== e.UnsupportedType, I = P || F ? "pe-5" : void 0, L = (e) => {
201
- (e.key === "Enter" || e.key === " ") && (e.preventDefault(), n?.(t.id));
202
- }, R = W(() => s ? T : Ie(T), [s, T]), z = U(() => {
203
- window.open(t.referenceUrl, "_blank", "noopener,noreferrer");
204
- }, [t]), B = d(Fe, "group relative flex-col justify-between items-start gap-1 overflow-hidden p-1.5", X.tile, !k && X.tileLight, k && X.tileError), V = /* @__PURE__ */ q("div", {
205
- title: R,
206
- className: d(x, "line-clamp-2 min-w-0 break-all", X.nameText, !k && I),
207
- children: R
208
- }), ee = M && /* @__PURE__ */ J("div", {
209
- className: d("flex w-full items-center gap-1", k && I),
210
- children: [/* @__PURE__ */ q(M, {
211
- size: 16,
212
- className: X.typeText,
213
- "aria-hidden": !0
214
- }), /* @__PURE__ */ q("span", {
215
- className: d(S, "min-w-0 flex-1 truncate", X.typeText),
216
- children: _ ? `${N} · ${_}` : N
217
- })]
218
- }), te = () => {
219
- p && f ? f(w) : n && n(w);
220
- }, ne = /* @__PURE__ */ J(K, { children: [
221
- k ? /* @__PURE__ */ J(K, { children: [ee, V] }) : /* @__PURE__ */ J(K, { children: [V, ee] }),
222
- O && /* @__PURE__ */ q("div", {
223
- role: "progressbar",
224
- "aria-label": v,
225
- className: d("absolute inset-x-2 bottom-2 h-[3px] overflow-hidden rounded-full", X.track),
226
- children: /* @__PURE__ */ q("div", { className: d("h-full w-1/3 rounded-full", X.indeterminateFill) })
227
- }),
228
- P && /* @__PURE__ */ q(We, {
229
- ariaLabel: h,
230
- errorTitle: j,
231
- errorDescId: A,
232
- onClick: o,
233
- id: w
234
- }),
235
- F && /* @__PURE__ */ q(Ue, {
236
- ariaLabel: g,
237
- errorTitle: j,
238
- errorDescId: A,
239
- onClick: r,
240
- id: w
241
- }),
242
- l && /* @__PURE__ */ q(Ge, {
243
- ariaLabel: g,
244
- errorTitle: j,
245
- errorDescId: A,
246
- onClick: z
247
- }),
248
- m && /* @__PURE__ */ q(Ke, {
249
- ariaLabel: g,
250
- errorTitle: j,
251
- errorDescId: A,
252
- onClick: m,
253
- id: w
254
- }),
255
- k && /* @__PURE__ */ q("span", {
256
- id: A,
257
- role: "status",
258
- "aria-live": "polite",
259
- className: "sr-only",
260
- children: j
261
- })
262
- ] });
263
- return /* @__PURE__ */ q("div", {
264
- style: u,
265
- className: d("inline-flex", C),
266
- children: /* @__PURE__ */ q("div", {
267
- role: "button",
268
- tabIndex: 0,
269
- "aria-label": h,
270
- onClick: te,
271
- onKeyDown: L,
272
- style: u,
273
- className: d(B, "cursor-pointer focus-within:outline focus-within:outline-1 focus-within:outline-offset-1"),
274
- children: ne
275
- })
276
- });
277
- }, Xe = /* @__PURE__ */ function(e) {
278
- return e.Idle = "idle", e.Loading = "loading", e.Loaded = "loaded", e.Error = "error", e;
279
- }({}), Ze = ({ enabled: e, src: t }) => {
280
- let n = Pe(null), [r, i] = G("idle");
281
- return Me(() => {
282
- i(e && t ? "loading" : "idle");
283
- }, [e, t]), Me(() => {
284
- let r = n.current;
285
- if (!r || !e || !t) return;
286
- let a = () => i("loaded"), o = () => i("error");
287
- return r.addEventListener("load", a), r.addEventListener("error", o), r.complete && i(r.naturalWidth > 0 ? "loaded" : "error"), () => {
288
- r.removeEventListener("load", a), r.removeEventListener("error", o);
289
- };
290
- }, [e, t]), {
291
- imageRef: n,
292
- imageLoadStatus: r
293
- };
294
- }, Qe = ({ attachment: e, onExpand: n, onClick: r, labels: i, onRemove: a, cssVars: o, onDownload: s, styles: c }) => {
295
- let { clickLabel: l = "Open attachment", expandLabel: u = "Expand pasted text" } = i ?? {}, { typography: f, className: m } = c ?? {}, { id: h, name: g } = e, _ = e.previewUrl ?? e.url, v = e.type === t.Pasted && n !== void 0, { isLoading: y, isError: b, isImage: C } = W(() => Ve(e), [e]), w = r !== void 0 && !v && !y && !b, { imageRef: T, imageLoadStatus: E } = Ze({
296
- enabled: C,
297
- src: _
298
- }), D = () => {
299
- v && n ? n(h) : w && r && r(h);
300
- };
301
- return /* @__PURE__ */ q("div", {
302
- className: d(Fe, w && "cursor-pointer", X.tile, m),
303
- onClick: D,
304
- onKeyDown: (e) => {
305
- (e.key === "Enter" || e.key === " ") && (e.preventDefault(), D());
306
- },
307
- tabIndex: 0,
308
- role: "button",
309
- style: o,
310
- "aria-label": w ? l : v ? u : void 0,
311
- children: /* @__PURE__ */ J("div", {
312
- className: "relative h-full w-full overflow-hidden",
313
- children: [
314
- a && /* @__PURE__ */ q(Ke, {
315
- onClick: a,
316
- id: h
317
- }),
318
- s && /* @__PURE__ */ q(We, {
319
- onClick: s,
320
- id: h
321
- }),
322
- E !== Xe.Loaded && /* @__PURE__ */ q(x, {
323
- variant: S.Rectangular,
324
- width: "100%",
325
- height: "100%",
326
- active: E === Xe.Loading,
327
- overlay: /* @__PURE__ */ q(H, {
328
- size: p.LG,
329
- className: f?.placeholderIconClassName ?? "text-secondary",
330
- "aria-hidden": !0
331
- }),
332
- className: "absolute inset-0 rounded-xl"
333
- }),
334
- /* @__PURE__ */ q("img", {
335
- ref: T,
336
- src: _,
337
- alt: g,
338
- loading: "lazy",
339
- decoding: "async",
340
- className: d("h-full w-full rounded-xl object-cover transition-opacity duration-200", E === Xe.Loaded ? "opacity-100" : "opacity-0")
341
- })
342
- ]
343
- })
344
- });
345
- }, $e = ({ attachment: e, searchQuery: n = "", onRemove: r, onRetry: i, onExpand: a, onClick: o, onDownload: s, labels: c, styles: l }) => {
346
- let { colors: d } = l ?? {}, f = e.type === t.Pasted, p = f && a !== void 0, m = u({
347
- "--ci-tile-bg": d?.background,
348
- "--ci-tile-border": d?.border,
349
- "--ci-tile-border-hover": d?.borderHover,
350
- "--ci-tile-focus-outline": d?.focusOutline,
351
- "--ci-tile-bg-error": d?.backgroundError,
352
- "--ci-tile-border-error": d?.borderError,
353
- "--ci-tile-error-text": d?.errorText,
354
- "--ci-tile-name-text": d?.nameText,
355
- "--ci-tile-type-text": d?.typeText,
356
- "--ci-tile-hover-icon-bg": d?.hoverIconBackground,
357
- "--ci-tile-hover-icon-color": d?.hoverIconColor,
358
- "--ci-tile-track-bg": d?.trackBackground,
359
- "--ci-tile-fill-bg": d?.fillBackground
360
- }), { isImage: h, isAudio: g, isLink: _ } = W(() => Ve(e), [e]);
361
- return g ? /* @__PURE__ */ q(qe, {
362
- attachment: e,
363
- labels: c,
364
- onClick: o,
365
- onDownload: s,
366
- onRemove: r,
367
- searchQuery: n,
368
- styles: l,
369
- cssVars: m
370
- }) : h ? /* @__PURE__ */ q(Qe, {
371
- attachment: e,
372
- labels: c,
373
- onClick: o,
374
- onExpand: a,
375
- styles: l,
376
- onRemove: r,
377
- cssVars: m,
378
- onDownload: s
379
- }) : /* @__PURE__ */ q(Ye, {
380
- attachment: e,
381
- onClick: o,
382
- onRetry: i,
383
- onRemove: r,
384
- onDownload: s,
385
- isLink: _,
386
- isPasted: f,
387
- styles: l,
388
- labels: c,
389
- onExpand: a,
390
- cssVars: m,
391
- isExpandable: p
392
- });
393
- }, et = { tile: "_tile_nzsrz_1" }, tt = ({ count: e, onClick: t, labels: n, children: r, styles: i }) => {
394
- let { ariaLabel: a } = n ?? {}, { typography: { fontClassName: o = "dial-small-semi-text" } = {}, className: s, colors: c } = i ?? {}, l = u({
395
- "--ci-more-tile-bg": c?.background,
396
- "--ci-more-tile-border": c?.border,
397
- "--ci-more-tile-color": c?.color,
398
- "--ci-more-tile-bg-hover": c?.backgroundHover,
399
- "--ci-more-tile-color-hover": c?.colorHover,
400
- "--ci-more-tile-border-hover": c?.borderHover,
401
- "--ci-more-tile-focus-outline": c?.focusOutline
402
- });
403
- return /* @__PURE__ */ q("button", {
404
- type: "button",
405
- onClick: t,
406
- "aria-label": a ?? `Show ${e} more attachments`,
407
- style: l,
408
- className: d(Fe, o, et.tile, s),
409
- children: r ?? /* @__PURE__ */ q("bdi", {
410
- dir: "ltr",
411
- children: `+${e}`
412
- })
413
- });
414
- }, Q = {
415
- container: "_container_7fktb_1",
416
- headerIcon: "_headerIcon_7fktb_6",
417
- headerLabel: "_headerLabel_7fktb_7",
418
- downloadAllButton: "_downloadAllButton_7fktb_8",
419
- imageTile: "_imageTile_7fktb_12"
420
- }, nt = (e, t) => `${e} ${t}${e === 1 ? "" : "s"}`, rt = ({ attachments: e, onAttachmentClick: n, onDownloadAll: r, onRetry: i, labels: a, styles: o }) => {
421
- let { ariaLabel: s = "Attachments", clickLabel: l = "Download attachment", retryLabel: f = "Retry upload", showLessLabel: h = "Show less", downloadAllLabel: g = "Download all", openInNewTabLabel: _, getHeaderLabel: v = (e) => nt(e, "attachment"), promptLabel: y, pastedLabel: b, imageLabel: x } = a ?? {}, { typography: { headerLabelClassName: S = "dial-tiny-semi-text" } = {}, colors: C, className: w } = o ?? {}, T = u({
422
- "--ci-group-bg": C?.background,
423
- "--ci-group-border": C?.border,
424
- "--ci-group-text": C?.text
425
- }), [E, D] = G(!1), O = W(() => He(e.length, E), [e.length, E]);
426
- if (e.length === 0) return null;
427
- let k = e.some((e) => e.type === t.Image), A = e.some((e) => e.type !== t.Image), j = k && A, N = e.length >= 5, P = j ? xe : k ? H : L, I = v(e.length), R = e.slice(0, O.visibleCount), z = () => {
428
- let t = e.filter((e) => e.status === c.Idle);
429
- r ? r(t) : t.forEach((e) => n?.(e.id));
430
- }, B = (t) => {
431
- let n = e.find((e) => e.id === t);
432
- n && r?.([n]);
433
- };
434
- return /* @__PURE__ */ J("div", {
435
- role: "group",
436
- "aria-label": s,
437
- style: T,
438
- className: d("rounded-2xl border p-3", N ? "w-full min-w-0 max-w-[492px]" : "max-w-[420px]", Q.container, w),
439
- children: [/* @__PURE__ */ J("div", {
440
- className: "mb-3 flex min-h-6 items-center gap-2",
441
- children: [
442
- /* @__PURE__ */ q(P, {
443
- size: p.SM,
444
- className: d("shrink-0", Q.headerIcon),
445
- "aria-hidden": !0
446
- }),
447
- /* @__PURE__ */ q("span", {
448
- className: d(S, Q.headerLabel),
449
- children: I
450
- }),
451
- e.length >= 2 && (r || n) && /* @__PURE__ */ q(m, {
452
- icon: /* @__PURE__ */ q(F, {
453
- size: p.SM,
454
- "aria-hidden": !0
455
- }),
456
- className: d("ms-auto h-6 w-6 rounded-lg", Q.downloadAllButton),
457
- "aria-label": g,
458
- onClick: z
459
- })
460
- ]
461
- }), /* @__PURE__ */ J("div", {
462
- role: "list",
463
- "aria-label": I,
464
- className: d("gap-3", N ? "grid grid-cols-[repeat(5,83px)] overflow-x-auto" : "flex flex-wrap"),
465
- children: [
466
- R.map((e) => /* @__PURE__ */ q("div", {
467
- role: "listitem",
468
- children: /* @__PURE__ */ q($e, {
469
- attachment: e,
470
- onClick: n,
471
- onDownload: B,
472
- onRetry: i,
473
- labels: {
474
- clickLabel: l,
475
- retryLabel: f,
476
- promptLabel: y,
477
- pastedLabel: b,
478
- imageLabel: x,
479
- openInNewTabLabel: _
480
- }
481
- })
482
- }, e.id)),
483
- O.layout === Y.Collapsed && /* @__PURE__ */ q("div", {
484
- role: "listitem",
485
- children: /* @__PURE__ */ q(tt, {
486
- count: O.hiddenCount,
487
- onClick: () => D(!0)
488
- })
489
- }),
490
- N && E && /* @__PURE__ */ q("div", {
491
- role: "listitem",
492
- children: /* @__PURE__ */ q(tt, {
493
- count: 0,
494
- onClick: () => D(!1),
495
- labels: { ariaLabel: h },
496
- children: /* @__PURE__ */ q(M, {
497
- size: p.MD,
498
- "aria-hidden": !0
499
- })
500
- })
501
- })
502
- ]
503
- })]
504
- });
505
- }, it = {
506
- tabContainer: "_tabContainer_rzv03_1",
507
- tabActive: "_tabActive_rzv03_13"
508
- };
509
- je(({ tabs: e, activeTabId: t, onTabChange: n, styles: r }) => {
510
- let { tabClassName: i = "dial-tiny-semi-text" } = r?.typography ?? {};
511
- return /* @__PURE__ */ q("div", {
512
- className: "flex flex-nowrap gap-1",
513
- children: e.map((e) => {
514
- let r = t === e.id;
515
- return /* @__PURE__ */ q(w, {
516
- label: e.label,
517
- selected: r,
518
- onClick: () => n(e.id),
519
- "aria-selected": r,
520
- className: d("box-border h-auto shrink-0 justify-center rounded-full p-2 text-center", i, it.tabContainer, r && it.tabActive)
521
- }, e.id);
522
- })
523
- });
524
- });
525
- var at = (e) => /* @__PURE__ */ q(v, { ...e }), ot = ({ features: e, initialResponseFormat: t, initialSystemPrompt: n, initialTemperature: r, onSave: i, onClose: a, isOpen: o }) => {
526
- let [s, c] = G(t), [l, u] = G(n), [d, f] = G(r), p = Pe(o);
527
- Me(() => {
528
- o && !p.current && (c(t), u(n), f(r)), p.current = o;
529
- }, [
530
- o,
531
- t,
532
- n,
533
- r
534
- ]);
535
- let m = !e.responseFormat || s != null;
536
- return {
537
- responseFormat: s,
538
- systemPrompt: l,
539
- temperature: d,
540
- canSubmit: m,
541
- setResponseFormat: c,
542
- setSystemPrompt: u,
543
- setTemperature: f,
544
- handleSubmit: U(() => {
545
- if (!m) return;
546
- let t = {};
547
- e.responseFormat && s != null && (t.responseFormat = s), e.systemPrompt && (t.systemPrompt = l), e.temperature && (t.temperature = d), i(t), a();
548
- }, [
549
- m,
550
- e,
551
- s,
552
- l,
553
- d,
554
- i,
555
- a
556
- ])
557
- };
558
- }, st = "!dial-small-semi-text !text-primary gap-1", ct = ({ features: e, responseFormat: t, systemPrompt: n, temperature: r, onResponseFormatChange: i, onSystemPromptChange: a, onTemperatureChange: o, responseFormatLabel: s = "Response format", responseFormatHint: c = "Applies to new and existing messages", responseFormatMarkdownLabel: u = "Markdown", responseFormatPlainTextLabel: d = "Plain text", systemPromptLabel: f = "System prompt", systemPromptTooltip: p = "Enter a prompt", temperatureLabel: m = "Temperature", temperatureLabels: g = [
559
- "Precise",
560
- "Neutral",
561
- "Creative"
562
- ], temperatureHint: _ }) => /* @__PURE__ */ J("div", {
563
- className: "flex flex-col gap-4 px-6 py-3",
564
- children: [
565
- e.responseFormat && /* @__PURE__ */ q(y, {
566
- fieldTitle: s,
567
- labelClassName: st,
568
- elementId: "response-format",
569
- orientation: k.Column,
570
- activeRadioButton: t ?? l.Markdown,
571
- labelDescription: c,
572
- radioButtons: [{
573
- id: l.Markdown,
574
- name: u
575
- }, {
576
- id: l.PlainText,
577
- name: d
578
- }],
579
- onChange: (e) => i(e)
580
- }),
581
- e.systemPrompt && /* @__PURE__ */ q(h, {
582
- value: n,
583
- placeholder: p,
584
- labelProps: {
585
- className: st,
586
- label: f
587
- },
588
- onChange: (e) => a(e ?? "")
589
- }),
590
- e.temperature && /* @__PURE__ */ q(C, {
591
- labelProps: {
592
- label: m,
593
- className: st,
594
- caption: _
595
- },
596
- value: r,
597
- min: 0,
598
- max: 1,
599
- step: .1,
600
- labels: g,
601
- onChange: o
602
- })
603
- ]
604
- });
605
- je(({ features: e, initialResponseFormat: t, initialSystemPrompt: n, initialTemperature: r, onSave: i, onClose: a, title: o = "Chat settings", responseFormatLabel: s, responseFormatHint: c, responseFormatMarkdownLabel: l, responseFormatPlainTextLabel: u, systemPromptLabel: d, systemPromptTooltip: f, temperatureLabel: p, temperatureLabels: m, temperatureHint: h, saveLabel: g = "Apply changes", saveDisabledTooltip: v }) => {
606
- let { responseFormat: y, systemPrompt: b, temperature: x, canSubmit: S, setResponseFormat: C, setSystemPrompt: w, setTemperature: E, handleSubmit: D } = ot({
607
- features: e,
608
- initialResponseFormat: t,
609
- initialSystemPrompt: n,
610
- initialTemperature: r,
611
- onSave: i,
612
- onClose: a
613
- });
614
- return /* @__PURE__ */ q(_, {
615
- open: !0,
616
- header: o,
617
- size: O.Sm,
618
- onClose: a,
619
- className: "!bg-layer-2",
620
- footer: /* @__PURE__ */ q("div", {
621
- className: "flex justify-end px-6 py-4",
622
- children: /* @__PURE__ */ q(T, {
623
- tooltip: v,
624
- hideTooltip: S || !v,
625
- children: /* @__PURE__ */ q(at, {
626
- label: g,
627
- onClick: D,
628
- disabled: !S
629
- })
630
- })
631
- }),
632
- children: /* @__PURE__ */ q(ct, {
633
- features: e,
634
- responseFormat: y,
635
- systemPrompt: b,
636
- temperature: x,
637
- onResponseFormatChange: C,
638
- onSystemPromptChange: w,
639
- onTemperatureChange: E,
640
- responseFormatLabel: s,
641
- responseFormatHint: c,
642
- responseFormatMarkdownLabel: l,
643
- responseFormatPlainTextLabel: u,
644
- systemPromptLabel: d,
645
- systemPromptTooltip: f,
646
- temperatureLabel: p,
647
- temperatureLabels: m,
648
- temperatureHint: h
649
- })
650
- });
651
- });
652
- //#endregion
653
- //#region src/components/MessageActions/MessageActions.tsx
654
- var lt = 2e3, ut = ({ role: e = s.User, onEdit: t, onEditHover: n, onDelete: r, onRegenerate: i, onCopy: a, onCopyMarkdown: c, onLike: l, onDislike: u, activeRating: f, isAlwaysVisible: h, className: g, labels: _ }) => {
655
- let { tooltips: v, ariaLabels: y } = _ ?? {}, [b, x] = G(null), [S, C] = G(""), w = U(() => {
656
- a?.(), x("copy"), C(y?.copiedStatus ?? "Copied to clipboard"), setTimeout(() => x(null), lt);
657
- }, [a, y?.copiedStatus]), T = U(() => {
658
- c?.(), x("markdown"), C(y?.copiedMarkdownStatus ?? "Copied as Markdown to clipboard"), setTimeout(() => x(null), lt);
659
- }, [c, y?.copiedMarkdownStatus]);
660
- return /* @__PURE__ */ J("div", {
1
+ import { AttachmentType as e, CopyIconButton as t, DeploymentIcon as n, MDMessageViewer as r, MessageRating as i, MessageRole as a, buildCssVars as o, mergeClasses as s, useCollapsedText as c } from "@epam/ai-dial-chat-shared";
2
+ import { AttachmentGroup as l } from "@epam/ai-dial-attachment-input";
3
+ import { DIAL_ICON_SIZE as u, DIAL_KIT_ICON_STROKE as d, ElementSize as f, InfoMessageNotification as p, LinkButton as m, NeutralButton as h, ToggleIconButton as g } from "@epam/ai-dial-ui-kit";
4
+ import { IconChevronDown as _, IconChevronUp as v, IconMarkdown as y, IconPencilMinus as b, IconRefresh as x, IconThumbDown as S, IconThumbDownFilled as C, IconThumbUp as w, IconThumbUpFilled as T, IconTrashX as E } from "@tabler/icons-react";
5
+ import { useCallback as D, useId as O, useState as k } from "react";
6
+ import { Fragment as A, jsx as j, jsxs as M } from "react/jsx-runtime";
7
+ var N = { activeRating: "_activeRating_ygoee_1" }, P = 2e3, F = ({ role: e = a.User, onEdit: n, onEditHover: r, onDelete: c, onRegenerate: l, onCopy: p, onCopyMarkdown: m, onLike: h, onDislike: _, activeRating: v, isAlwaysVisible: O, isDisabled: F = !1, className: I, labels: L, colors: R }) => {
8
+ let { tooltips: z, ariaLabels: B } = L ?? {}, [V, H] = k(null), [U, W] = k(""), G = o({ "--ma-active-rating-text": R?.activeRatingText }), K = D(() => {
9
+ p?.(), H("copy"), W(B?.copiedStatus ?? "Copied to clipboard"), setTimeout(() => H(null), P);
10
+ }, [p, B?.copiedStatus]), q = D(() => {
11
+ m?.(), H("markdown"), W(B?.copiedMarkdownStatus ?? "Copied as Markdown to clipboard"), setTimeout(() => H(null), P);
12
+ }, [m, B?.copiedMarkdownStatus]);
13
+ return /* @__PURE__ */ M("div", {
661
14
  role: "toolbar",
662
- "aria-label": y?.actionsGroup ?? "Message actions",
663
- className: d("flex gap-1", !h && "opacity-0 group-hover:opacity-100", g),
664
- children: [/* @__PURE__ */ q("span", {
15
+ "aria-label": B?.actionsGroup ?? "Message actions",
16
+ style: G,
17
+ className: s("flex gap-1", !O && "opacity-0 group-hover:opacity-100", I),
18
+ children: [/* @__PURE__ */ j("span", {
665
19
  role: "status",
666
20
  "aria-live": "polite",
667
21
  className: "sr-only",
668
- children: S
669
- }), e === s.User ? /* @__PURE__ */ J(K, { children: [t && /* @__PURE__ */ q(m, {
670
- icon: /* @__PURE__ */ q(Se, {
671
- size: p.SM,
672
- "aria-hidden": !0
22
+ children: U
23
+ }), e === a.User ? /* @__PURE__ */ M(A, { children: [n && /* @__PURE__ */ j(g, {
24
+ icon: /* @__PURE__ */ j(b, {
25
+ size: u.SM,
26
+ "aria-hidden": !0,
27
+ stroke: d
673
28
  }),
674
- size: E.Small,
675
- "aria-label": y?.editMessage ?? "Edit message",
676
- tooltipProps: { tooltip: v?.edit ?? "Edit" },
677
- onClick: t,
678
- onMouseEnter: n,
679
- onFocus: n
680
- }), r && /* @__PURE__ */ q(m, {
681
- icon: /* @__PURE__ */ q(Oe, {
682
- size: p.SM,
683
- "aria-hidden": !0
29
+ size: f.Small,
30
+ "aria-label": B?.editMessage ?? "Edit message",
31
+ tooltipProps: { tooltip: z?.edit ?? "Edit" },
32
+ onClick: n,
33
+ onMouseEnter: r,
34
+ onFocus: r,
35
+ disabled: F
36
+ }), c && /* @__PURE__ */ j(g, {
37
+ icon: /* @__PURE__ */ j(E, {
38
+ size: u.SM,
39
+ "aria-hidden": !0,
40
+ stroke: d
684
41
  }),
685
- size: E.Small,
686
- "aria-label": y?.deleteMessage ?? "Delete message",
687
- tooltipProps: { tooltip: v?.delete ?? "Delete" },
688
- onClick: r
689
- })] }) : /* @__PURE__ */ J(K, { children: [
690
- i && /* @__PURE__ */ q(m, {
691
- icon: /* @__PURE__ */ q(Ce, {
692
- size: p.SM,
693
- "aria-hidden": !0
42
+ size: f.Small,
43
+ "aria-label": B?.deleteMessage ?? "Delete message",
44
+ tooltipProps: { tooltip: z?.delete ?? "Delete" },
45
+ onClick: c,
46
+ disabled: F
47
+ })] }) : /* @__PURE__ */ M(A, { children: [
48
+ l && /* @__PURE__ */ j(g, {
49
+ icon: /* @__PURE__ */ j(x, {
50
+ size: u.SM,
51
+ "aria-hidden": !0,
52
+ stroke: d
694
53
  }),
695
- size: E.Small,
696
- "aria-label": y?.regenerateResponse ?? "Regenerate response",
697
- tooltipProps: { tooltip: v?.regenerate ?? "Regenerate" },
698
- onClick: i
54
+ size: f.Small,
55
+ "aria-label": B?.regenerateResponse ?? "Regenerate response",
56
+ tooltipProps: { tooltip: z?.regenerate ?? "Regenerate" },
57
+ onClick: l,
58
+ disabled: F
699
59
  }),
700
- a && /* @__PURE__ */ q(m, {
701
- icon: q(b === "copy" ? A : P, {
702
- size: p.SM,
703
- "aria-hidden": !0
704
- }),
705
- size: E.Small,
706
- "aria-label": y?.copyResponse ?? "Copy response",
707
- tooltipProps: { tooltip: b === "copy" ? v?.copied ?? "Copied!" : v?.copy ?? "Copy" },
708
- onClick: w
60
+ p && /* @__PURE__ */ j(t, {
61
+ iconSize: u.SM,
62
+ onClick: K,
63
+ size: f.Small,
64
+ isCopied: V === "copy",
65
+ copyLabel: z?.copy ?? "Copy",
66
+ copiedLabel: z?.copied ?? "Copied!",
67
+ ariaLabel: B?.copyResponse ?? "Copy response",
68
+ isDisabled: F
709
69
  }),
710
- c && /* @__PURE__ */ q(m, {
711
- icon: q(b === "markdown" ? A : ye, {
712
- size: p.SM,
713
- "aria-hidden": !0
70
+ m && /* @__PURE__ */ j(t, {
71
+ iconSize: u.SM,
72
+ onClick: q,
73
+ size: f.Small,
74
+ isCopied: V === "markdown",
75
+ iconCopy: /* @__PURE__ */ j(y, {
76
+ size: u.SM,
77
+ "aria-hidden": !0,
78
+ stroke: d
714
79
  }),
715
- size: E.Small,
716
- "aria-label": y?.copyAsMarkdown ?? "Copy as markdown",
717
- tooltipProps: { tooltip: b === "markdown" ? v?.copiedMarkdown ?? "Copied!" : v?.copyMarkdown ?? "Copy as Markdown" },
718
- onClick: T
80
+ copyLabel: z?.copyMarkdown ?? "Copy as Markdown",
81
+ copiedLabel: z?.copiedMarkdown ?? "Copied!",
82
+ ariaLabel: B?.copyAsMarkdown ?? "Copy as markdown",
83
+ isDisabled: F
719
84
  }),
720
- l && /* @__PURE__ */ q(m, {
721
- icon: /* @__PURE__ */ q(De, {
722
- size: p.SM,
85
+ h && /* @__PURE__ */ j(g, {
86
+ icon: v === i.Like ? /* @__PURE__ */ j(T, {
87
+ className: N.activeRating,
88
+ size: u.SM,
723
89
  "aria-hidden": !0
90
+ }) : /* @__PURE__ */ j(w, {
91
+ size: u.SM,
92
+ "aria-hidden": !0,
93
+ stroke: d
724
94
  }),
725
- size: E.Small,
726
- "aria-label": y?.likeResponse ?? "Like response",
727
- "aria-pressed": f === o.Like,
728
- className: f === o.Like ? "!text-accent-primary" : void 0,
729
- tooltipProps: { tooltip: v?.like ?? "Like" },
730
- onClick: l
95
+ size: f.Small,
96
+ "aria-label": B?.likeResponse ?? "Like response",
97
+ "aria-pressed": v === i.Like,
98
+ tooltipProps: { tooltip: z?.like ?? "Like" },
99
+ onClick: h,
100
+ disabled: F
731
101
  }),
732
- u && /* @__PURE__ */ q(m, {
733
- icon: /* @__PURE__ */ q(Ee, {
734
- size: p.SM,
102
+ _ && /* @__PURE__ */ j(g, {
103
+ icon: v === i.Dislike ? /* @__PURE__ */ j(C, {
104
+ className: N.activeRating,
105
+ size: u.SM,
735
106
  "aria-hidden": !0
107
+ }) : /* @__PURE__ */ j(S, {
108
+ size: u.SM,
109
+ "aria-hidden": !0,
110
+ stroke: d
736
111
  }),
737
- size: E.Small,
738
- "aria-label": y?.dislikeResponse ?? "Dislike response",
739
- "aria-pressed": f === o.Dislike,
740
- className: f === o.Dislike ? "!text-accent-primary" : void 0,
741
- tooltipProps: { tooltip: v?.dislike ?? "Dislike" },
742
- onClick: u
112
+ size: f.Small,
113
+ "aria-label": B?.dislikeResponse ?? "Dislike response",
114
+ "aria-pressed": v === i.Dislike,
115
+ tooltipProps: { tooltip: z?.dislike ?? "Dislike" },
116
+ onClick: _,
117
+ disabled: F
743
118
  })
744
119
  ] })]
745
120
  });
746
- }, $ = {
747
- userBubble: "_userBubble_1exhl_1",
748
- collapsibleText: "_collapsibleText_1exhl_6",
749
- expandedText: "_expandedText_1exhl_11",
750
- collapsedText: "_collapsedText_1exhl_15",
751
- startersDivider: "_startersDivider_1exhl_26",
752
- text: "_text_1exhl_30"
753
- }, dt = ({ text: e, styles: r, actions: a, hasAlwaysVisibleActions: o, isStreaming: c, attachments: l, afterContent: f, starters: p, onSelectStarter: m, deploymentIconUrl: h, deploymentDisplayName: g, markdownComponents: _, onAttachmentClick: v, onDownloadAll: y, onAttachmentRetry: x, codeBlockTheme: S, labels: C }) => {
754
- let { colors: w, typography: T, className: E, bubbleClassName: D } = r ?? {}, { attachmentClickLabel: O, attachmentRetryLabel: k, attachmentOpenInNewTabLabel: A, startersAriaLabel: j = "Quick reply buttons", thinkingLabel: M, codeBlockCopyLabel: N, codeBlockCopiedLabel: P, assistantMessageAriaLabel: F = "Assistant message", deploymentIconFallbackLabel: I = "AI" } = C ?? {}, L = c ? (l ?? []).filter((e) => e.type !== t.Audio) : l ?? [], R = u({
755
- "--cm-bubble-text": w?.text,
756
- "--cm-starters-divider": w?.startersDivider
757
- }), z = d($.text, T?.fontClassName), B = !!(h || g);
758
- return /* @__PURE__ */ J("div", {
121
+ }, I = {
122
+ userBubble: "_userBubble_cq829_1",
123
+ collapsibleText: "_collapsibleText_cq829_6",
124
+ expandedText: "_expandedText_cq829_11",
125
+ collapsedText: "_collapsedText_cq829_15",
126
+ startersDivider: "_startersDivider_cq829_26",
127
+ text: "_text_cq829_30"
128
+ }, L = ({ text: t, styles: i, actions: c, hasAlwaysVisibleActions: u, isStreaming: d, attachments: f, afterContent: p, starters: m, onSelectStarter: g, deploymentIconUrl: _, deploymentDisplayName: v, markdownComponents: y, markdownClassNames: b, markdownUrlTransform: x, onAttachmentClick: S, onDownloadAll: C, onAttachmentRetry: w, codeBlockTheme: T, tableOnOpenInCanvas: E, labels: D, selectedAttachmentId: O }) => {
129
+ let { colors: k, typography: A, className: N, bubbleClassName: P } = i ?? {}, { attachmentClickLabel: L, attachmentRetryLabel: R, attachmentOpenInNewTabLabel: z, startersAriaLabel: B = "Quick reply buttons", thinkingLabel: V, codeBlockCopyLabel: H, codeBlockCopiedLabel: U, tableCopyCsvLabel: W, tableCopyTxtLabel: G, tableCopyMarkdownLabel: K, tableCopiedLabel: q, tableDownloadCsvLabel: J, tableOpenInCanvasLabel: Y, tableDownloadFilename: X, tableScrollRegionAriaLabel: Z, assistantMessageAriaLabel: ee = "Assistant message", deploymentIconFallbackLabel: Q = "AI" } = D ?? {}, te = d ? (f ?? []).filter((t) => t.type !== e.Audio) : f ?? [], ne = o({
130
+ "--cm-bubble-text": k?.text,
131
+ "--cm-starters-divider": k?.startersDivider
132
+ }), re = s(I.text, A?.fontClassName), $ = !!(_ || v);
133
+ return /* @__PURE__ */ M("div", {
759
134
  role: "group",
760
- "aria-label": F,
761
- style: R,
762
- className: d("flex w-full items-start gap-3", E),
763
- children: [B && /* @__PURE__ */ q(n, {
764
- src: h,
135
+ "aria-label": ee,
136
+ style: ne,
137
+ className: s("flex w-full items-start gap-3", N),
138
+ children: [$ && /* @__PURE__ */ j(n, {
139
+ src: _,
765
140
  size: 28,
766
- initialsName: g || I,
767
- labels: { tooltip: g ?? I }
768
- }), /* @__PURE__ */ J("div", {
141
+ initialsName: v || Q,
142
+ labels: { tooltip: v ?? Q }
143
+ }), /* @__PURE__ */ M("div", {
769
144
  className: "flex w-full min-w-0 max-w-full flex-col items-start gap-5",
770
- children: [/* @__PURE__ */ J("div", {
771
- className: d("flex w-full min-w-0 max-w-full flex-col items-start gap-4", D),
145
+ children: [/* @__PURE__ */ M("div", {
146
+ className: s("flex w-full min-w-0 max-w-full flex-col items-start gap-4", P),
772
147
  children: [
773
- (e || c) && /* @__PURE__ */ q("div", {
148
+ (t || d) && /* @__PURE__ */ j("div", {
774
149
  "aria-live": "polite",
775
150
  "aria-atomic": "false",
776
- className: d(z, "min-w-0 max-w-full text-start"),
777
- children: /* @__PURE__ */ q(i, {
778
- content: e,
779
- isStreaming: c,
780
- thinkingLabel: M,
781
- components: _,
782
- codeBlockCopyLabel: N,
783
- codeBlockCopiedLabel: P,
784
- codeBlockTheme: S
151
+ className: s(re, "min-w-0 max-w-full text-start"),
152
+ children: /* @__PURE__ */ j(r, {
153
+ content: t,
154
+ isStreaming: d,
155
+ thinkingLabel: V,
156
+ components: y,
157
+ classNames: b,
158
+ urlTransform: x,
159
+ codeBlockCopyLabel: H,
160
+ codeBlockCopiedLabel: U,
161
+ codeBlockTheme: T,
162
+ tableActionLabels: {
163
+ copyCsvLabel: W,
164
+ copyTxtLabel: G,
165
+ copyMarkdownLabel: K,
166
+ copiedLabel: q,
167
+ downloadCsvLabel: J,
168
+ openInCanvasLabel: Y
169
+ },
170
+ tableDownloadFilename: X,
171
+ tableOnOpenInCanvas: E,
172
+ tableScrollRegionAriaLabel: Z
785
173
  })
786
174
  }),
787
- /* @__PURE__ */ q(rt, {
788
- attachments: L,
789
- onAttachmentClick: (e) => v?.(l?.find((t) => t.id === e)),
790
- onDownloadAll: y,
791
- onRetry: x,
175
+ /* @__PURE__ */ j(l, {
176
+ attachments: te,
177
+ onAttachmentClick: (e) => S?.(f?.find((t) => t.id === e)),
178
+ onDownloadAll: C,
179
+ onRetry: w,
792
180
  labels: {
793
- clickLabel: O,
794
- retryLabel: k,
795
- openInNewTabLabel: A
796
- }
181
+ clickLabel: L,
182
+ retryLabel: R,
183
+ openInNewTabLabel: z
184
+ },
185
+ selectedAttachmentId: O
797
186
  }),
798
- f,
799
- /* @__PURE__ */ q(ut, {
800
- ...a,
801
- isAlwaysVisible: o,
802
- role: s.Assistant
187
+ p,
188
+ /* @__PURE__ */ j(F, {
189
+ ...c,
190
+ isAlwaysVisible: u,
191
+ role: a.Assistant
803
192
  })
804
193
  ]
805
- }), p && p.length > 0 && m && /* @__PURE__ */ q("div", {
194
+ }), m && m.length > 0 && g && /* @__PURE__ */ j("div", {
806
195
  role: "list",
807
- "aria-label": j,
808
- className: d("flex w-full flex-wrap gap-2 border-t pt-5", $.startersDivider),
809
- children: p.map((e, t) => /* @__PURE__ */ q("div", {
196
+ "aria-label": B,
197
+ className: s("flex w-full flex-wrap gap-2 border-t pt-5", I.startersDivider),
198
+ children: m.map((e, t) => /* @__PURE__ */ j("div", {
810
199
  role: "listitem",
811
200
  className: "min-w-[40px]",
812
- children: /* @__PURE__ */ q(b, {
201
+ children: /* @__PURE__ */ j(h, {
813
202
  label: e.title,
814
203
  className: "min-w-[40px]",
815
- onClick: () => m(e)
204
+ onClick: () => g(e)
816
205
  })
817
206
  }, t))
818
207
  })]
819
208
  })]
820
209
  });
821
- }, ft = ({ labels: { titleText: e = "Model switched.", bodyText: t } }) => /* @__PURE__ */ q("div", {
210
+ }, R = ({ labels: { titleText: e = "Model switched.", bodyText: t } }) => /* @__PURE__ */ j("div", {
822
211
  role: "status",
823
212
  "aria-live": "polite",
824
- children: /* @__PURE__ */ q(D, {
213
+ children: /* @__PURE__ */ j(p, {
825
214
  title: e,
826
215
  message: t,
827
216
  textClassName: "flex-row flex-wrap gap-1"
828
217
  })
829
- }), pt = /* @__PURE__ */ function(e) {
218
+ }), z = /* @__PURE__ */ function(e) {
830
219
  return e.Bottom = "Bottom", e.Top = "Top", e;
831
- }({}), mt = 10, ht = ({ text: e, position: t = pt.Bottom, styles: n, actions: r, hasAlwaysVisibleActions: i, attachments: a, collapsedLineCount: o = mt, labels: c, onAttachmentClick: l, onDownloadAll: m, onAttachmentRetry: h }) => {
832
- let { colors: _, typography: v, className: y, bubbleClassName: b } = n ?? {}, { showMoreLabel: x = "Show more", showLessLabel: S = "Show less", showMoreAriaLabel: C, showLessAriaLabel: w, attachmentClickLabel: T, attachmentRetryLabel: D, attachmentOpenInNewTabLabel: O, userMessageAriaLabel: k = "User message" } = c ?? {}, { textRef: A, isTextCollapsed: N, isOverflowing: P, collapsedMaxHeight: F, expandedMaxHeight: I, isCollapsed: L, toggleCollapsed: R } = f({
220
+ }({}), B = 10, V = ({ text: e, position: t = z.Bottom, styles: n, actions: r, hasAlwaysVisibleActions: i, attachments: d, collapsedLineCount: p = B, labels: h, onAttachmentClick: g, onDownloadAll: y, onAttachmentRetry: b, selectedAttachmentId: x }) => {
221
+ let { colors: S, typography: C, className: w, bubbleClassName: T } = n ?? {}, { showMoreLabel: E = "Show more", showLessLabel: D = "Show less", showMoreAriaLabel: k, showLessAriaLabel: N, attachmentClickLabel: P, attachmentRetryLabel: L, attachmentOpenInNewTabLabel: R, userMessageAriaLabel: V = "User message" } = h ?? {}, { textRef: H, isTextCollapsed: U, isOverflowing: W, collapsedMaxHeight: G, expandedMaxHeight: K, isCollapsed: q, toggleCollapsed: J } = c({
833
222
  text: e,
834
- collapsedLineCount: o
835
- }), z = u({
836
- "--cm-bubble-user-bg": _?.userBackground,
837
- "--cm-bubble-user-border": _?.userBorder,
838
- "--cm-bubble-fade-start": _?.fadeStart,
839
- "--cm-bubble-text": _?.text,
840
- "--cm-bubble-collapsed-height": P ? `${F}px` : void 0,
841
- "--cm-bubble-expanded-height": P ? `${I}px` : void 0
842
- }), B = t === pt.Top ? "rounded-ee-[6px] rounded-se-[16px]" : "rounded-se-[6px] rounded-ee-[16px]", V = d($.text, v?.fontClassName), ee = C ?? x, te = w ?? S, ne = L ? x : S, re = L ? ee : te, ie = L ? j : M, ae = Ne();
843
- return /* @__PURE__ */ q("div", {
223
+ collapsedLineCount: p
224
+ }), Y = o({
225
+ "--cm-bubble-user-bg": S?.userBackground,
226
+ "--cm-bubble-user-border": S?.userBorder,
227
+ "--cm-bubble-fade-start": S?.fadeStart,
228
+ "--cm-bubble-text": S?.text,
229
+ "--cm-bubble-collapsed-height": W ? `${G}px` : void 0,
230
+ "--cm-bubble-expanded-height": W ? `${K}px` : void 0
231
+ }), X = t === z.Top ? "rounded-ee-md rounded-se-2xl" : "rounded-se-md rounded-ee-2xl", Z = s(I.text, C?.fontClassName), ee = k ?? E, Q = N ?? D, te = q ? E : D, ne = q ? ee : Q, re = q ? _ : v, $ = O();
232
+ return /* @__PURE__ */ j("div", {
844
233
  role: "group",
845
- "aria-label": k,
846
- style: z,
847
- className: d("flex w-full", y),
848
- children: /* @__PURE__ */ J("div", {
234
+ "aria-label": V,
235
+ style: Y,
236
+ className: s("flex w-full", w),
237
+ children: /* @__PURE__ */ M("div", {
849
238
  className: "ms-auto flex w-fit min-w-0 max-w-full flex-col items-end gap-4",
850
239
  children: [
851
- /* @__PURE__ */ q(rt, {
852
- attachments: a ?? [],
853
- onAttachmentClick: (e) => l?.(a?.find((t) => t.id === e)),
854
- onDownloadAll: m,
855
- onRetry: h,
240
+ /* @__PURE__ */ j(l, {
241
+ attachments: d ?? [],
242
+ onAttachmentClick: (e) => g?.(d?.find((t) => t.id === e)),
243
+ onDownloadAll: y,
244
+ onRetry: b,
856
245
  labels: {
857
- clickLabel: T,
858
- retryLabel: D,
859
- openInNewTabLabel: O
246
+ clickLabel: P,
247
+ retryLabel: L,
248
+ openInNewTabLabel: R
860
249
  },
861
- styles: { className: "max-w-[640px]" }
250
+ styles: { className: "max-w-[640px]" },
251
+ selectedAttachmentId: x
862
252
  }),
863
- e && /* @__PURE__ */ q("div", {
864
- className: d($.userBubble, "flex w-fit items-center justify-end rounded-es-2xl rounded-ss-2xl border px-6 py-4", B, b),
865
- children: /* @__PURE__ */ J("div", {
253
+ e && /* @__PURE__ */ j("div", {
254
+ className: s(I.userBubble, "flex w-fit items-center justify-end rounded-es-2xl rounded-ss-2xl border px-6 py-4", X, T),
255
+ children: /* @__PURE__ */ M("div", {
866
256
  className: "flex min-w-0 flex-col items-start",
867
- children: [/* @__PURE__ */ q("div", {
868
- id: ae,
869
- className: d("relative overflow-hidden", P && $.collapsibleText, P && !L && $.expandedText, N && $.collapsedText),
870
- children: /* @__PURE__ */ q("p", {
871
- ref: A,
872
- className: d(V, "whitespace-pre-wrap text-start [overflow-wrap:anywhere]"),
257
+ children: [/* @__PURE__ */ j("div", {
258
+ id: $,
259
+ className: s("relative overflow-hidden", W && I.collapsibleText, W && !q && I.expandedText, U && I.collapsedText),
260
+ children: /* @__PURE__ */ j("p", {
261
+ ref: H,
262
+ className: s(Z, "whitespace-pre-wrap text-start [overflow-wrap:anywhere]"),
873
263
  children: e
874
264
  })
875
- }), P && /* @__PURE__ */ q(g, {
876
- label: /* @__PURE__ */ q(K, { children: ne }),
877
- iconBefore: /* @__PURE__ */ q(ie, {
878
- size: p.SM,
265
+ }), W && /* @__PURE__ */ j(m, {
266
+ label: /* @__PURE__ */ j(A, { children: te }),
267
+ iconBefore: /* @__PURE__ */ j(re, {
268
+ size: u.SM,
879
269
  "aria-hidden": "true"
880
270
  }),
881
- "aria-label": re,
882
- "aria-expanded": !L,
883
- "aria-controls": ae,
271
+ "aria-label": ne,
272
+ "aria-expanded": !q,
273
+ "aria-controls": $,
884
274
  className: "mt-3",
885
- onClick: R,
886
- size: E.Small
275
+ onClick: J,
276
+ size: f.Small
887
277
  })]
888
278
  })
889
279
  }),
890
- /* @__PURE__ */ q(ut, {
280
+ /* @__PURE__ */ j(F, {
891
281
  ...r,
892
282
  isAlwaysVisible: i,
893
- role: s.User
283
+ role: a.User
894
284
  })
895
285
  ]
896
286
  })
897
287
  });
898
- }, gt = ({ role: e, onAttachmentClick: t, markdownComponents: n, ...r }) => e === s.Status ? /* @__PURE__ */ q(ft, { labels: {
899
- titleText: r.labels?.statusTitleText,
900
- bodyText: r.labels?.statusBodyText ?? ""
901
- } }) : e === s.User ? /* @__PURE__ */ q(ht, {
902
- ...r,
288
+ }, H = ({ role: e, onAttachmentClick: t, markdownComponents: n, markdownUrlTransform: r, ...i }) => e === a.Status ? /* @__PURE__ */ j(R, { labels: {
289
+ titleText: i.labels?.statusTitleText,
290
+ bodyText: i.labels?.statusBodyText ?? ""
291
+ } }) : e === a.User ? /* @__PURE__ */ j(V, {
292
+ ...i,
903
293
  onAttachmentClick: t
904
- }) : /* @__PURE__ */ q(dt, {
905
- ...r,
294
+ }) : /* @__PURE__ */ j(L, {
295
+ ...i,
906
296
  markdownComponents: n,
297
+ markdownUrlTransform: r,
907
298
  onAttachmentClick: t
908
- }), _t = { button: "_button_15boc_1" }, vt = ({ labels: { label: e }, onClick: t, styles: n }) => {
909
- let { colors: r, typography: i, className: a } = n ?? {};
910
- return /* @__PURE__ */ q("button", {
911
- type: "button",
912
- onClick: t,
913
- style: u({
914
- "--cm-source-bg": r?.background,
915
- "--cm-source-border": r?.border,
916
- "--cm-source-text": r?.text,
917
- "--cm-source-bg-hover": r?.backgroundHover,
918
- "--cm-source-border-hover": r?.borderHover
919
- }),
920
- className: d(_t.button, "relative flex h-6 items-center justify-center px-2", "border border-solid", "outline-none focus-visible:outline focus-visible:outline-1", "focus-visible:outline-offset-[3px]", "cursor-pointer whitespace-nowrap", i?.fontClassName, a),
921
- children: e
922
- });
923
- };
299
+ });
924
300
  //#endregion
925
- export { dt as AssistantMessageBubble, pt as BubblePosition, ut as MessageActions, gt as MessageBubble, vt as MessageSource, ft as StatusMessageBubble, ht as UserMessageBubble };
301
+ export { L as AssistantMessageBubble, z as BubblePosition, F as MessageActions, H as MessageBubble, R as StatusMessageBubble, V as UserMessageBubble };