@epam/ai-dial-conversation-messages 1.0.0-dev.502 → 1.0.0-dev.506

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