@epam/ai-dial-conversation-stages 1.0.0-dev.484 → 1.0.0-dev.489

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 +302 -272
  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, Highlight as r, MIME_TYPE_EXT_MAP as i, MarkdownRenderer as a, RequestStatus as o, ResponseFormat as s, StageStatus as c, buildCssVars as l, copyToClipboard as u, mergeClasses as d, messageAttachmentToDisplayAttachment as f } from "@epam/ai-dial-chat-shared";
2
2
  import { DIAL_ICON_SIZE as p, DialEllipsisTooltip as m, DialGhostIconButton as h, DialInput as g, DialLinkButton as _, DialPopup as v, DialPrimaryButton as y, DialRadioGroup as b, DialSkeleton as x, DialSkeletonVariant as S, DialSlider as C, DialSpinner as w, DialTag as T, DialTooltip as E, ElementSize as D, PopupSize as O, RadioGroupOrientation as k } from "@epam/ai-dial-ui-kit";
3
- import { IconAlertCircle as A, IconCheck as j, IconChevronDown as M, IconChevronRight as N, IconChevronUp as P, IconCircleCheck as F, IconClipboard as I, IconCopy as ee, IconDownload as L, IconFile as R, IconFileTypeBmp as te, IconFileTypeCss as z, IconFileTypeCsv as ne, IconFileTypeDoc as B, IconFileTypeDocx as V, IconFileTypeHtml as re, IconFileTypeJpg as ie, IconFileTypeJs as H, IconFileTypeJsx as ae, IconFileTypePdf as oe, IconFileTypePhp as se, IconFileTypePng as ce, IconFileTypePpt as le, IconFileTypeRs as ue, IconFileTypeSql as de, IconFileTypeSvg as fe, IconFileTypeTs as pe, IconFileTypeTsx as me, IconFileTypeTxt as he, IconFileTypeVue as ge, IconFileTypeXls as _e, IconFileTypeXml as ve, IconFileTypeZip as ye, IconMusic as be, IconPaperclip as xe, IconPhoto as U, IconReload as Se, IconTerminal2 as Ce, IconVideo as we, IconX as Te } from "@tabler/icons-react";
4
- import { memo as Ee, useCallback as De, useEffect as W, useMemo as Oe, useRef as ke, useState as G } from "react";
3
+ import { IconAlertCircle as A, IconCheck as j, IconChevronDown as M, IconChevronRight as N, IconChevronUp as P, IconCircleCheck as F, IconClipboard as I, IconCopy as L, IconDownload as ee, IconFile as R, IconFileTypeBmp as z, IconFileTypeCss as B, IconFileTypeCsv as V, IconFileTypeDoc as te, IconFileTypeDocx as ne, IconFileTypeHtml as re, IconFileTypeJpg as ie, IconFileTypeJs as H, IconFileTypeJsx as ae, IconFileTypePdf as oe, IconFileTypePhp as U, IconFileTypePng as se, IconFileTypePpt as ce, IconFileTypeRs as W, IconFileTypeSql as le, IconFileTypeSvg as ue, IconFileTypeTs as de, IconFileTypeTsx as fe, IconFileTypeTxt as pe, IconFileTypeVue as me, IconFileTypeXls as he, IconFileTypeXml as ge, IconFileTypeZip as _e, IconMusic as ve, IconPaperclip as ye, IconPhoto as be, IconReload as xe, IconTerminal2 as Se, IconVideo as Ce, IconX as we } from "@tabler/icons-react";
4
+ import { memo as Te, useCallback as Ee, useEffect as De, useId as Oe, useMemo as ke, useRef as Ae, useState as G } from "react";
5
5
  import "react-dom";
6
6
  import { Fragment as K, jsx as q, jsxs as J } from "react/jsx-runtime";
7
7
  //#region ../attachment-input/dist/index.js
8
- var Ae = /* @__PURE__ */ function(e) {
8
+ var je = /* @__PURE__ */ function(e) {
9
9
  return e.Idle = "idle", e.Loading = "loading", e.Loaded = "loaded", e.Error = "error", e;
10
- }({}), je = ({ enabled: e, src: t }) => {
11
- let n = ke(null), [r, i] = G("idle");
12
- return W(() => {
10
+ }({}), Me = ({ enabled: e, src: t }) => {
11
+ let n = Ae(null), [r, i] = G("idle");
12
+ return De(() => {
13
13
  i(e && t ? "loading" : "idle");
14
- }, [e, t]), W(() => {
14
+ }, [e, t]), De(() => {
15
15
  let r = n.current;
16
16
  if (!r || !e || !t) return;
17
17
  let a = () => i("loaded"), o = () => i("error");
@@ -23,254 +23,276 @@ var Ae = /* @__PURE__ */ function(e) {
23
23
  imageLoadStatus: r
24
24
  };
25
25
  }, Y = {
26
- card: "_card_1wsze_1",
27
- cardError: "_cardError_1wsze_6",
28
- cardSelected: "_cardSelected_1wsze_10",
29
- cardPrompt: "_cardPrompt_1wsze_15",
30
- cardPasted: "_cardPasted_1wsze_16",
31
- name: "_name_1wsze_20",
32
- meta: "_meta_1wsze_24",
33
- loadingOverlay: "_loadingOverlay_1wsze_28",
34
- actionBtn: "_actionBtn_1wsze_32",
35
- removeBtnImage: "_removeBtnImage_1wsze_43",
36
- hoverDownloadIcon: "_hoverDownloadIcon_1wsze_51"
37
- }, Me = (e) => {
26
+ card: "_card_ywrb5_1",
27
+ cardError: "_cardError_ywrb5_6",
28
+ cardSelected: "_cardSelected_ywrb5_10",
29
+ cardPrompt: "_cardPrompt_ywrb5_15",
30
+ cardPasted: "_cardPasted_ywrb5_16",
31
+ name: "_name_ywrb5_20",
32
+ meta: "_meta_ywrb5_24",
33
+ loadingOverlay: "_loadingOverlay_ywrb5_28",
34
+ actionBtn: "_actionBtn_ywrb5_32",
35
+ removeBtnImage: "_removeBtnImage_ywrb5_43",
36
+ hoverDownloadIcon: "_hoverDownloadIcon_ywrb5_51"
37
+ }, Ne = /* @__PURE__ */ function(e) {
38
+ return e.None = "none", e.AllVisible = "all-visible", e.Collapsed = "collapsed", e;
39
+ }({}), Pe = (e) => {
40
+ let t = e.lastIndexOf(".");
41
+ return t > 0 ? e.slice(0, t) : e;
42
+ }, Fe = (e) => {
38
43
  if (!e) return R;
39
44
  if (e.startsWith("image/")) switch (e) {
40
45
  case "image/jpeg":
41
46
  case "image/jpg": return ie;
42
- case "image/png": return ce;
43
- case "image/svg+xml": return fe;
44
- case "image/bmp": return te;
45
- default: return U;
47
+ case "image/png": return se;
48
+ case "image/svg+xml": return ue;
49
+ case "image/bmp": return z;
50
+ default: return be;
46
51
  }
47
- if (e.startsWith("video/")) return we;
48
- if (e.startsWith("audio/")) return be;
52
+ if (e.startsWith("video/")) return Ce;
53
+ if (e.startsWith("audio/")) return ve;
49
54
  switch (e) {
50
55
  case "application/pdf": return oe;
51
56
  case "application/msword":
52
- case "application/vnd.ms-word": return B;
53
- case "application/vnd.openxmlformats-officedocument.wordprocessingml.document": return V;
54
- case "application/vnd.ms-powerpoint": return le;
55
- case "application/vnd.openxmlformats-officedocument.presentationml.presentation": return le;
56
- case "application/vnd.ms-excel": return _e;
57
- case "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": return _e;
57
+ case "application/vnd.ms-word": return te;
58
+ case "application/vnd.openxmlformats-officedocument.wordprocessingml.document": return ne;
59
+ case "application/vnd.ms-powerpoint": return ce;
60
+ case "application/vnd.openxmlformats-officedocument.presentationml.presentation": return ce;
61
+ case "application/vnd.ms-excel": return he;
62
+ case "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": return he;
58
63
  case "application/zip":
59
64
  case "application/x-zip-compressed":
60
65
  case "application/x-rar-compressed":
61
66
  case "application/x-7z-compressed":
62
67
  case "application/gzip":
63
- case "application/x-tar": return ye;
64
- case "text/csv": return ne;
65
- case "text/plain": return he;
68
+ case "application/x-tar": return _e;
69
+ case "text/csv": return V;
70
+ case "text/plain": return pe;
66
71
  case "text/html":
67
72
  case "application/xhtml+xml": return re;
68
73
  case "text/xml":
69
- case "application/xml": return ve;
74
+ case "application/xml": return ge;
70
75
  case "application/sql":
71
- case "text/x-sql": return de;
76
+ case "text/x-sql": return le;
72
77
  case "text/javascript":
73
78
  case "application/javascript": return H;
74
79
  case "text/jsx": return ae;
75
80
  case "application/typescript":
76
- case "text/typescript": return pe;
77
- case "text/tsx": return me;
78
- case "text/css": return z;
81
+ case "text/typescript": return de;
82
+ case "text/tsx": return fe;
83
+ case "text/css": return B;
79
84
  case "text/x-php":
80
- case "application/x-php": return se;
85
+ case "application/x-php": return U;
81
86
  case "text/x-rustsrc":
82
- case "application/x-rust": return ue;
83
- case "text/x-vue": return ge;
87
+ case "application/x-rust": return W;
88
+ case "text/x-vue": return me;
84
89
  default: return R;
85
90
  }
86
- }, Ne = (e) => {
91
+ }, Ie = (e) => {
87
92
  let { type: n, contentType: r } = e;
88
- return n === t.Prompt ? Ce : n === t.Pasted ? I : n === t.Image ? U : Me(r ?? "");
89
- }, Pe = (e) => {
93
+ return n === t.Prompt ? Se : n === t.Pasted ? I : n === t.Image ? be : Fe(r ?? "");
94
+ }, Le = (e) => {
90
95
  let t = e.toLowerCase().split(";")[0].trim(), n = i[t];
91
96
  if (n) return n;
92
97
  let r = t.split("/")[1];
93
98
  if (r && !r.startsWith("vnd.") && !r.includes("+")) return r;
94
- }, Fe = (e) => {
95
- let { type: n, name: r, contentType: i } = e;
96
- if (n === t.Prompt) return "Prompt";
97
- if (n === t.Pasted) return "Pasted";
98
- if (n === t.Image) return "Image";
99
- if (i) {
100
- let e = Pe(i);
99
+ }, Re = (e, n) => {
100
+ let { type: r, name: i, contentType: a } = e;
101
+ if (r === t.Prompt) return n.promptLabel ?? "Prompt";
102
+ if (r === t.Pasted) return n.pastedLabel ?? "Pasted";
103
+ if (r === t.Image) return n.imageLabel ?? "Image";
104
+ if (a) {
105
+ let e = Le(a);
101
106
  if (e) return `.${e}`;
102
107
  }
103
- let a = r.lastIndexOf(".");
104
- return a > 0 && a < r.length - 1 ? `.${r.slice(a + 1).toLowerCase()}` : r;
105
- }, Ie = (e, n, r) => {
106
- let { type: i, status: a, previewUrl: s, url: c } = e, l = a === o.Loading, u = a === o.Error, f = i === t.Image && !!(s ?? c) && !u, p = i === t.Audio && !u, m = d(Y.card, u && Y.cardError, n && Y.cardSelected, !u && !n && i === t.Prompt && Y.cardPrompt, !u && !n && i === t.Pasted && Y.cardPasted);
108
+ let o = i.lastIndexOf(".");
109
+ return o > 0 && o < i.length - 1 ? `.${i.slice(o + 1).toLowerCase()}` : i;
110
+ }, ze = (e, n, r, i = {}) => {
111
+ let { type: a, status: s, previewUrl: c, url: l } = e, u = s === o.Loading, f = s === o.Error, p = a === t.Image && !!(c ?? l) && !f, m = a === t.Audio && !f, h = d(Y.card, f && Y.cardError, n && Y.cardSelected, !f && !n && a === t.Prompt && Y.cardPrompt, !f && !n && a === t.Pasted && Y.cardPasted);
107
112
  return {
108
- isLoading: l,
109
- isError: u,
110
- isImage: f,
111
- isAudio: p,
112
- areActionsVisible: u || r,
113
- BottomIcon: Ne(e),
114
- typeLabel: Fe(e),
115
- cardColorClass: m,
116
- removeBtnClass: f ? Y.removeBtnImage : Y.actionBtn
113
+ isLoading: u,
114
+ isError: f,
115
+ isImage: p,
116
+ isAudio: m,
117
+ areActionsVisible: f || r,
118
+ BottomIcon: Ie(e),
119
+ typeLabel: Re(e, i),
120
+ cardColorClass: h,
121
+ removeBtnClass: p ? Y.removeBtnImage : Y.actionBtn
117
122
  };
118
- }, Le = (e) => {
119
- let t = e.lastIndexOf(".");
120
- return t > 0 ? e.slice(0, t) : e;
121
- }, Re = ({ attachment: n, searchQuery: i = "", onRemove: a, onRetry: o, onExpand: s, onClick: c, isSelected: u, shouldAlwaysShowActions: f, removeLabel: m = "Remove attachment", retryLabel: g = "Retry upload", clickLabel: _ = "Open attachment", colors: v, typography: y, roundedClassName: b = "rounded-xl", showHoverDownloadIcon: C = !1, className: T }) => {
122
- let { id: E, name: O } = n, k = n.previewUrl ?? n.url, A = n.type === t.Pasted, j = A && s !== void 0, M = Oe(() => A ? O : Le(O), [A, O]), N = l({
123
- "--ci-card-border": v?.border,
124
- "--ci-card-bg": v?.background,
125
- "--ci-card-name": v?.nameText,
126
- "--ci-card-meta": v?.metaText
127
- }), { isLoading: P, isError: F, isImage: I, isAudio: ee, areActionsVisible: R, BottomIcon: te, typeLabel: z, cardColorClass: ne, removeBtnClass: B } = Oe(() => Ie(n, u ?? !1, f ?? !1), [
123
+ }, Be = (e, t) => e <= 0 ? {
124
+ layout: Ne.None,
125
+ visibleCount: 0,
126
+ hiddenCount: 0
127
+ } : e < 5 || t ? {
128
+ layout: Ne.AllVisible,
129
+ visibleCount: e,
130
+ hiddenCount: 0
131
+ } : {
132
+ layout: Ne.Collapsed,
133
+ visibleCount: 4,
134
+ hiddenCount: e - 4
135
+ }, Ve = ({ attachment: n, searchQuery: i = "", onRemove: a, onRetry: o, onExpand: s, onClick: c, isSelected: u, shouldAlwaysShowActions: f, labels: m, typeLabels: g, styles: _, showHoverDownloadIcon: v = !1, className: y }) => {
136
+ let { removeLabel: b = "Remove attachment", retryLabel: C = "Retry upload", clickLabel: T = "Open attachment", expandLabel: E = "Expand pasted text", loadingLabel: O = "Loading attachment", uploadFailedStatusLabel: k = "Upload failed" } = m ?? {}, { colors: A, typography: j, roundedClassName: M = "rounded-xl" } = _ ?? {}, { id: N, name: P } = n, F = n.previewUrl ?? n.url, I = n.type === t.Pasted, L = I && s !== void 0, R = ke(() => I ? P : Pe(P), [I, P]), z = l({
137
+ "--ci-card-border": A?.border,
138
+ "--ci-card-bg": A?.background,
139
+ "--ci-card-name": A?.nameText,
140
+ "--ci-card-meta": A?.metaText
141
+ }), { isLoading: B, isError: V, isImage: te, isAudio: ne, areActionsVisible: re, BottomIcon: ie, typeLabel: H, cardColorClass: ae, removeBtnClass: oe } = ke(() => ze(n, u ?? !1, f ?? !1, g), [
128
142
  n,
129
143
  u,
130
- f
131
- ]), V = c !== void 0 && !j && !P && !F, re = j || V, { imageRef: ie, imageLoadStatus: H } = je({
132
- enabled: I,
133
- src: k
134
- }), ae = () => {
135
- j && s ? s(E) : V && c && c(E);
136
- }, oe = (e) => {
137
- (e.key === "Enter" || e.key === " ") && (e.preventDefault(), ae());
144
+ f,
145
+ g
146
+ ]), U = c !== void 0 && !L && !B && !V, se = L || U, { imageRef: ce, imageLoadStatus: W } = Me({
147
+ enabled: te,
148
+ src: F
149
+ }), le = () => {
150
+ L && s ? s(N) : U && c && c(N);
151
+ }, ue = (e) => {
152
+ (e.key === "Enter" || e.key === " ") && (e.preventDefault(), le());
138
153
  };
139
- if (ee) return /* @__PURE__ */ J("div", {
140
- style: N,
141
- className: d("group flex w-full min-w-[280px] max-w-[300px] flex-col gap-2 border p-3", b, ne, T),
154
+ if (ne) return /* @__PURE__ */ J("div", {
155
+ style: z,
156
+ className: d("group flex w-full min-w-[280px] max-w-[300px] flex-col gap-2 border p-3", M, ae, y),
142
157
  children: [/* @__PURE__ */ J("div", {
143
158
  className: "flex items-center justify-between gap-2",
144
159
  children: [/* @__PURE__ */ q("span", {
145
160
  title: n.name,
146
- className: d(y?.fontClassName ?? "dial-tiny-text", "min-w-0 truncate", Y.name),
161
+ className: d(j?.fontClassName ?? "dial-tiny-text", "min-w-0 truncate", Y.name),
147
162
  children: i ? /* @__PURE__ */ q(r, {
148
163
  text: n.name,
149
164
  query: i,
150
165
  maxLines: 1
151
166
  }) : n.name
152
167
  }), c && /* @__PURE__ */ q(h, {
153
- icon: /* @__PURE__ */ q(L, {
168
+ icon: /* @__PURE__ */ q(ee, {
154
169
  size: p.SM,
155
170
  "aria-hidden": !0
156
171
  }),
157
172
  size: D.Small,
158
- className: d("h-6 w-6 shrink-0 rounded", B),
159
- "aria-label": _,
173
+ className: d("h-6 w-6 shrink-0 rounded", oe),
174
+ "aria-label": T,
160
175
  onClick: (e) => {
161
- e.stopPropagation(), c(E);
176
+ e.stopPropagation(), c(N);
162
177
  }
163
178
  })]
164
179
  }), n.playUrl && /* @__PURE__ */ q("audio", {
165
180
  controls: !0,
166
181
  src: n.playUrl,
182
+ "aria-label": n.name,
167
183
  className: "w-full",
168
184
  preload: "metadata"
169
185
  })]
170
186
  });
171
- let se = d("group relative flex h-[100px] w-[100px] flex-shrink-0 border focus-within:outline focus-within:outline-1 focus-within:outline-offset-1", b, ne, !I && "flex-col gap-3 p-3", re && "cursor-pointer", T), ce = /* @__PURE__ */ J(K, { children: [
172
- I ? /* @__PURE__ */ J("div", {
187
+ let de = d("group relative flex h-[100px] w-[100px] flex-shrink-0 border focus-within:outline focus-within:outline-1 focus-within:outline-offset-1", M, ae, !te && "flex-col gap-3 p-3", se && "cursor-pointer", y), fe = /* @__PURE__ */ J(K, { children: [
188
+ te ? /* @__PURE__ */ J("div", {
173
189
  className: "relative h-full w-full overflow-hidden",
174
- children: [H !== Ae.Loaded && /* @__PURE__ */ q(x, {
190
+ children: [W !== je.Loaded && /* @__PURE__ */ q(x, {
175
191
  variant: S.Rectangular,
176
192
  width: "100%",
177
193
  height: "100%",
178
- active: H === Ae.Loading,
179
- overlay: /* @__PURE__ */ q(U, {
194
+ active: W === je.Loading,
195
+ overlay: /* @__PURE__ */ q(be, {
180
196
  size: p.LG,
181
- className: y?.placeholderIconClassName ?? "text-secondary",
197
+ className: j?.placeholderIconClassName ?? "text-secondary",
182
198
  "aria-hidden": !0
183
199
  }),
184
- className: d("absolute inset-0", b)
200
+ className: d("absolute inset-0", M)
185
201
  }), /* @__PURE__ */ q("img", {
186
- ref: ie,
187
- src: k,
188
- alt: O,
202
+ ref: ce,
203
+ src: F,
204
+ alt: P,
189
205
  loading: "lazy",
190
206
  decoding: "async",
191
- className: d("h-full w-full object-cover transition-opacity duration-200", H === Ae.Loaded ? "opacity-100" : "opacity-0", b)
207
+ className: d("h-full w-full object-cover transition-opacity duration-200", W === je.Loaded ? "opacity-100" : "opacity-0", M)
192
208
  })]
193
- }) : F ? /* @__PURE__ */ J(K, { children: [/* @__PURE__ */ J("div", {
209
+ }) : V ? /* @__PURE__ */ J(K, { children: [/* @__PURE__ */ J("div", {
194
210
  className: "flex flex-row items-center gap-1 overflow-hidden",
195
- children: [/* @__PURE__ */ q(te, {
211
+ children: [/* @__PURE__ */ q(ie, {
196
212
  size: p.SM,
197
213
  className: d("shrink-0", Y.meta),
198
214
  "aria-hidden": !0
199
215
  }), /* @__PURE__ */ q("span", {
200
- title: z,
201
- className: d(y?.metaClassName ?? "dial-tiny-text", "min-w-0 truncate", Y.meta),
202
- children: z
216
+ title: H,
217
+ className: d(j?.metaClassName ?? "dial-tiny-text", "min-w-0 truncate", Y.meta),
218
+ children: H
203
219
  })]
204
220
  }), /* @__PURE__ */ q("div", {
205
221
  className: "min-w-0 flex-1",
206
222
  children: /* @__PURE__ */ q("div", {
207
- title: M,
208
- className: d(y?.fontClassName ?? "dial-tiny-text", "line-clamp-3 break-words", Y.name),
223
+ title: R,
224
+ className: d(j?.fontClassName ?? "dial-tiny-text", "line-clamp-3 break-words", Y.name),
209
225
  children: i ? /* @__PURE__ */ q(r, {
210
- text: M,
226
+ text: R,
211
227
  query: i,
212
228
  maxLines: 3
213
- }) : M
229
+ }) : R
214
230
  })
215
231
  })] }) : /* @__PURE__ */ J(K, { children: [/* @__PURE__ */ q("div", {
216
232
  className: "min-w-0 flex-1",
217
233
  children: /* @__PURE__ */ q("div", {
218
- title: M,
219
- className: d(y?.fontClassName ?? "dial-tiny-text", "line-clamp-3 break-words", Y.name),
234
+ title: R,
235
+ className: d(j?.fontClassName ?? "dial-tiny-text", "line-clamp-3 break-words", Y.name),
220
236
  children: i ? /* @__PURE__ */ q(r, {
221
- text: M,
237
+ text: R,
222
238
  query: i,
223
239
  maxLines: 3
224
- }) : M
240
+ }) : R
225
241
  })
226
242
  }), /* @__PURE__ */ J("div", {
227
243
  className: "flex flex-row items-center gap-1 overflow-hidden",
228
- children: [/* @__PURE__ */ q(te, {
244
+ children: [/* @__PURE__ */ q(ie, {
229
245
  size: p.SM,
230
246
  className: d("shrink-0", Y.meta),
231
247
  "aria-hidden": !0
232
248
  }), /* @__PURE__ */ q("span", {
233
- title: z,
234
- className: d(y?.metaClassName ?? "dial-tiny-text", "min-w-0 truncate", Y.meta),
235
- children: z
249
+ title: H,
250
+ className: d(j?.metaClassName ?? "dial-tiny-text", "min-w-0 truncate", Y.meta),
251
+ children: H
236
252
  })]
237
253
  })] }),
238
- P && /* @__PURE__ */ q("span", {
239
- className: d("absolute inset-0 flex items-center justify-center", b, Y.loadingOverlay),
254
+ B && /* @__PURE__ */ q("span", {
255
+ className: d("absolute inset-0 flex items-center justify-center", M, Y.loadingOverlay),
240
256
  children: /* @__PURE__ */ q(w, {
241
257
  size: 40,
242
- ariaLabel: "Loading attachment",
258
+ ariaLabel: O,
243
259
  className: "z-50"
244
260
  })
245
261
  }),
246
- !P && /* @__PURE__ */ J("div", {
247
- className: d("absolute end-1 top-1 flex gap-1 transition-opacity", R ? "opacity-100" : "opacity-0 group-focus-within:opacity-100 group-hover:opacity-100 mobile:opacity-100"),
262
+ /* @__PURE__ */ q("span", {
263
+ role: "status",
264
+ "aria-live": "polite",
265
+ className: "sr-only",
266
+ children: V ? k : ""
267
+ }),
268
+ !B && /* @__PURE__ */ J("div", {
269
+ className: d("absolute end-1 top-1 flex gap-1 transition-opacity", re ? "opacity-100" : "opacity-0 group-focus-within:opacity-100 group-hover:opacity-100 mobile:opacity-100"),
248
270
  children: [
249
- F && o && n.errorReason !== e.UnsupportedType && /* @__PURE__ */ q(h, {
250
- icon: /* @__PURE__ */ q(Se, {
271
+ V && o && n.errorReason !== e.UnsupportedType && /* @__PURE__ */ q(h, {
272
+ icon: /* @__PURE__ */ q(xe, {
251
273
  size: p.SM,
252
274
  "aria-hidden": !0
253
275
  }),
254
276
  size: D.Small,
255
- className: d("h-6 w-6 rounded", B),
256
- "aria-label": g,
277
+ className: d("h-6 w-6 rounded", oe),
278
+ "aria-label": C,
257
279
  onClick: (e) => {
258
- e.stopPropagation(), o(E);
280
+ e.stopPropagation(), o(N);
259
281
  }
260
282
  }),
261
283
  a && /* @__PURE__ */ q(h, {
262
- icon: /* @__PURE__ */ q(Te, {
284
+ icon: /* @__PURE__ */ q(we, {
263
285
  size: p.SM,
264
286
  "aria-hidden": !0
265
287
  }),
266
288
  size: D.Small,
267
- className: d("h-6 w-6 rounded", B),
268
- "aria-label": m,
289
+ className: d("h-6 w-6 rounded", oe),
290
+ "aria-label": b,
269
291
  onClick: (e) => {
270
- e.stopPropagation(), a?.(E);
292
+ e.stopPropagation(), a?.(N);
271
293
  }
272
294
  }),
273
- C && !a && !F && /* @__PURE__ */ q(L, {
295
+ v && !a && !V && /* @__PURE__ */ q(ee, {
274
296
  size: p.SM,
275
297
  "aria-hidden": !0,
276
298
  className: d("h-6 w-6 rounded-lg p-1", Y.hoverDownloadIcon)
@@ -278,151 +300,148 @@ var Ae = /* @__PURE__ */ function(e) {
278
300
  ]
279
301
  })
280
302
  ] });
281
- return re ? /* @__PURE__ */ q("div", {
282
- style: N,
283
- className: se,
284
- onClick: ae,
285
- onKeyDown: oe,
303
+ return se ? /* @__PURE__ */ q("div", {
304
+ style: z,
305
+ className: de,
306
+ onClick: le,
307
+ onKeyDown: ue,
286
308
  tabIndex: 0,
287
309
  role: "button",
288
- "aria-label": V ? _ : void 0,
289
- children: ce
310
+ "aria-label": U ? T : L ? E : void 0,
311
+ children: fe
290
312
  }) : /* @__PURE__ */ q("div", {
291
- style: N,
292
- className: se,
293
- children: ce
313
+ style: z,
314
+ className: de,
315
+ children: fe
294
316
  });
295
- }, ze = /* @__PURE__ */ function(e) {
296
- return e.None = "none", e.AllVisible = "all-visible", e.Collapsed = "collapsed", e;
297
- }({}), Be = (e, t) => e <= 0 ? {
298
- layout: "none",
299
- visibleCount: 0,
300
- hiddenCount: 0
301
- } : e < 5 || t ? {
302
- layout: "all-visible",
303
- visibleCount: e,
304
- hiddenCount: 0
305
- } : {
306
- layout: "collapsed",
307
- visibleCount: 4,
308
- hiddenCount: e - 4
309
317
  }, X = {
310
- tile: "_tile_1x7ag_2",
311
- tileLight: "_tileLight_1x7ag_27",
312
- tileError: "_tileError_1x7ag_31",
313
- nameText: "_nameText_1x7ag_38",
314
- typeText: "_typeText_1x7ag_39",
315
- retryIcon: "_retryIcon_1x7ag_51",
316
- hoverIcon: "_hoverIcon_1x7ag_55",
317
- track: "_track_1x7ag_60",
318
- indeterminateFill: "_indeterminateFill_1x7ag_64",
319
- "attachment-tile-indeterminate": "_attachment-tile-indeterminate_1x7ag_1"
320
- }, Ve = {
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
+ }, He = {
321
329
  [e.Network]: "Upload failed · network error",
322
330
  [e.UnsupportedType]: "Upload failed · unsupported file type"
323
- }, He = ({ attachment: t, onClick: r, onRetry: i, clickLabel: a = "Download attachment", retryLabel: s = "Retry upload", theme: c = n.Dark, className: l }) => {
324
- let { id: u, name: f, status: m, errorReason: g } = t, _ = m === o.Loading, v = m === o.Error, y = v && (g && Ve[g] || "Upload failed"), { BottomIcon: b, typeLabel: x } = Ie(t, !1, !1), S = !v && !_ && r !== void 0, C = v && !!i && g !== e.UnsupportedType, w = S || C ? "pe-5" : void 0, T = () => {
325
- S && r?.(t);
326
- }, E = (e) => {
327
- (e.key === "Enter" || e.key === " ") && S && (e.preventDefault(), T());
328
- }, O = d("group relative flex size-[84px] flex-col justify-between gap-1 overflow-hidden rounded-xl border p-1.5", X.tile, !v && c === n.Light && X.tileLight, v && X.tileError), k = /* @__PURE__ */ q("div", {
329
- title: f,
330
- className: d("dial-caption-text line-clamp-2 min-w-0 break-words", X.nameText, !v && w),
331
- children: f
332
- }), A = /* @__PURE__ */ J("div", {
333
- className: d("flex items-center gap-1 overflow-hidden", v && w),
334
- children: [/* @__PURE__ */ q(b, {
331
+ }, Ue = ({ attachment: t, onClick: r, onRetry: i, labels: a, typeLabels: s, styles: c, theme: l = n.Dark, className: u }) => {
332
+ let { clickLabel: f = "Download attachment", retryLabel: m = "Retry upload", sizeLabel: g, uploadingLabel: _ = "Uploading", errorReasonLabels: v, genericErrorLabel: y = "Upload failed" } = a ?? {}, { nameClassName: b = "dial-caption-text", metaClassName: x = "dial-caption-text" } = c ?? {}, { id: S, name: C, status: w, errorReason: T } = t, E = w === o.Loading, O = w === o.Error, k = Oe(), A = O && (T && (v?.[T] ?? He[T]) || y), { BottomIcon: j, typeLabel: M } = ze(t, !1, !1, s), N = !O && !E && r !== void 0, P = O && !!i && T !== e.UnsupportedType, F = N || P ? "pe-5" : void 0, I = () => {
333
+ N && r?.(t);
334
+ }, L = (e) => {
335
+ (e.key === "Enter" || e.key === " ") && N && (e.preventDefault(), I());
336
+ }, R = d("group relative flex size-[84px] flex-col justify-between gap-1 overflow-hidden rounded-xl border p-1.5", X.tile, !O && l === n.Light && X.tileLight, O && X.tileError), z = /* @__PURE__ */ q("div", {
337
+ title: C,
338
+ className: d(b, "line-clamp-2 min-w-0 break-words", X.nameText, !O && F),
339
+ children: C
340
+ }), B = /* @__PURE__ */ J("div", {
341
+ className: d("flex items-center gap-1 overflow-hidden", O && F),
342
+ children: [/* @__PURE__ */ q(j, {
335
343
  size: 16,
336
344
  className: X.typeText,
337
345
  "aria-hidden": !0
338
346
  }), /* @__PURE__ */ q("span", {
339
- className: d("dial-caption-text truncate", X.typeText),
340
- children: x
347
+ className: d(x, "truncate", X.typeText),
348
+ children: g ? `${M} · ${g}` : M
341
349
  })]
342
- }), j = /* @__PURE__ */ J(K, { children: [
343
- v ? /* @__PURE__ */ J(K, { children: [A, k] }) : /* @__PURE__ */ J(K, { children: [k, A] }),
344
- _ && /* @__PURE__ */ q("div", {
350
+ }), V = /* @__PURE__ */ J(K, { children: [
351
+ O ? /* @__PURE__ */ J(K, { children: [B, z] }) : /* @__PURE__ */ J(K, { children: [z, B] }),
352
+ E && /* @__PURE__ */ q("div", {
345
353
  role: "progressbar",
346
- "aria-label": "Uploading",
354
+ "aria-label": _,
347
355
  className: d("absolute inset-x-2 bottom-2 h-[3px] overflow-hidden rounded-full", X.track),
348
356
  children: /* @__PURE__ */ q("div", { className: d("h-full w-1/3 rounded-full", X.indeterminateFill) })
349
357
  }),
350
- S && /* @__PURE__ */ q(L, {
358
+ N && /* @__PURE__ */ q(ee, {
351
359
  size: p.SM,
352
360
  "aria-hidden": !0,
353
361
  className: d("absolute end-1 top-1 h-6 w-6 rounded-lg p-1 opacity-0 transition-opacity group-hover:opacity-100 mobile:opacity-100", X.hoverIcon)
354
362
  }),
355
- C && /* @__PURE__ */ q(h, {
356
- icon: /* @__PURE__ */ q(Se, {
363
+ P && /* @__PURE__ */ q(h, {
364
+ icon: /* @__PURE__ */ q(xe, {
357
365
  size: p.SM,
358
366
  "aria-hidden": !0
359
367
  }),
360
368
  size: D.Small,
361
369
  className: d("absolute end-1 top-1 h-6 w-6 rounded-lg", X.retryIcon),
362
- "aria-label": s,
370
+ "aria-label": m,
371
+ "aria-describedby": A ? k : void 0,
363
372
  onClick: (e) => {
364
- e.stopPropagation(), i(u);
373
+ e.stopPropagation(), i(S);
365
374
  }
375
+ }),
376
+ O && /* @__PURE__ */ q("span", {
377
+ id: k,
378
+ role: "status",
379
+ "aria-live": "polite",
380
+ className: "sr-only",
381
+ children: A
366
382
  })
367
383
  ] });
368
384
  return /* @__PURE__ */ q("div", {
369
- className: d("inline-flex", l),
370
- children: S ? /* @__PURE__ */ q("div", {
385
+ className: d("inline-flex", u),
386
+ children: N ? /* @__PURE__ */ q("div", {
371
387
  role: "button",
372
388
  tabIndex: 0,
373
- "aria-label": a,
374
- onClick: T,
375
- onKeyDown: E,
376
- className: d(O, "cursor-pointer focus-within:outline focus-within:outline-1 focus-within:outline-offset-1"),
377
- children: j
389
+ "aria-label": f,
390
+ onClick: I,
391
+ onKeyDown: L,
392
+ className: d(R, "cursor-pointer focus-within:outline focus-within:outline-1 focus-within:outline-offset-1"),
393
+ children: V
378
394
  }) : /* @__PURE__ */ q("div", {
379
- className: O,
380
- title: y || void 0,
381
- children: j
395
+ className: R,
396
+ title: A || void 0,
397
+ role: O ? "group" : void 0,
398
+ "aria-describedby": O ? k : void 0,
399
+ tabIndex: O ? 0 : void 0,
400
+ children: V
382
401
  })
383
402
  });
384
- }, Ue = { tile: "_tile_kvom5_1" }, We = ({ count: e, onClick: t, ariaLabel: n, children: r, className: i }) => /* @__PURE__ */ q("button", {
403
+ }, We = { tile: "_tile_1s4d7_1" }, Ge = ({ count: e, onClick: t, ariaLabel: n, children: r, fontClassName: i = "dial-small-semi-text", className: a }) => /* @__PURE__ */ q("button", {
385
404
  type: "button",
386
405
  onClick: t,
387
406
  "aria-label": n ?? `Show ${e} more attachments`,
388
- className: d("dial-small-semi-text flex size-[84px] items-center justify-center rounded-xl border", Ue.tile, i),
407
+ className: d("flex size-[84px] items-center justify-center rounded-xl border", i, We.tile, a),
389
408
  children: r ?? /* @__PURE__ */ q("bdi", {
390
409
  dir: "ltr",
391
410
  children: `+${e}`
392
411
  })
393
412
  }), Z = {
394
- container: "_container_4zxg9_1",
395
- headerIcon: "_headerIcon_4zxg9_6",
396
- headerLabel: "_headerLabel_4zxg9_7",
397
- downloadAllButton: "_downloadAllButton_4zxg9_8",
398
- imageTile: "_imageTile_4zxg9_12"
399
- }, Ge = (e, t) => `${e} ${t}${e === 1 ? "" : "s"}`, Ke = ({ attachments: e, onAttachmentClick: n, onDownloadAll: r, onRetry: i, getSizeLabel: a, ariaLabel: s = "Attachments", clickLabel: c = "Download attachment", retryLabel: l = "Retry upload", showLessLabel: u = "Show less", downloadAllLabel: f = "Download all", theme: m, className: g }) => {
400
- let [_, v] = G(!1), y = Oe(() => Be(e.length, _), [e.length, _]);
413
+ container: "_container_7fktb_1",
414
+ headerIcon: "_headerIcon_7fktb_6",
415
+ headerLabel: "_headerLabel_7fktb_7",
416
+ downloadAllButton: "_downloadAllButton_7fktb_8",
417
+ imageTile: "_imageTile_7fktb_12"
418
+ }, Ke = (e, t) => `${e} ${t}${e === 1 ? "" : "s"}`, qe = ({ attachments: e, onAttachmentClick: n, onDownloadAll: r, onRetry: i, getSizeLabel: a, labels: s, typeLabels: c, styles: l, theme: u, className: f }) => {
419
+ let { ariaLabel: m = "Attachments", clickLabel: g = "Download attachment", retryLabel: _ = "Retry upload", showLessLabel: v = "Show less", downloadAllLabel: y = "Download all", getHeaderLabel: b = (e) => Ke(e, "attachment") } = s ?? {}, { headerLabelClassName: x = "dial-tiny-semi-text" } = l ?? {}, [S, C] = G(!1), w = ke(() => Be(e.length, S), [e.length, S]);
401
420
  if (e.length === 0) return null;
402
- let b = e.some((e) => e.type === t.Image), x = e.some((e) => e.type !== t.Image), S = b && x, C = e.length >= 5, w = S ? xe : b ? U : R, T = Ge(e.length, "attachment"), E = e.slice(0, y.visibleCount);
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 ? ye : T ? be : R, A = b(e.length), j = e.slice(0, w.visibleCount);
403
422
  return /* @__PURE__ */ J("div", {
404
423
  role: "group",
405
- "aria-label": s,
406
- className: d("rounded-2xl border p-3", C ? "w-full min-w-0 max-w-[492px]" : "max-w-[420px]", Z.container, g),
424
+ "aria-label": m,
425
+ className: d("rounded-2xl border p-3", O ? "w-full min-w-0 max-w-[492px]" : "max-w-[420px]", Z.container, f),
407
426
  children: [/* @__PURE__ */ J("div", {
408
427
  className: "mb-3 flex min-h-6 items-center gap-2",
409
428
  children: [
410
- /* @__PURE__ */ q(w, {
429
+ /* @__PURE__ */ q(k, {
411
430
  size: p.SM,
412
431
  className: d("shrink-0", Z.headerIcon),
413
432
  "aria-hidden": !0
414
433
  }),
415
434
  /* @__PURE__ */ q("span", {
416
- className: d("dial-tiny-semi-text", Z.headerLabel),
417
- children: T
435
+ className: d(x, Z.headerLabel),
436
+ children: A
418
437
  }),
419
438
  e.length >= 2 && (r || n) && /* @__PURE__ */ q(h, {
420
- icon: /* @__PURE__ */ q(L, {
439
+ icon: /* @__PURE__ */ q(ee, {
421
440
  size: p.SM,
422
441
  "aria-hidden": !0
423
442
  }),
424
443
  className: d("ms-auto h-6 w-6 rounded-lg", Z.downloadAllButton),
425
- "aria-label": f,
444
+ "aria-label": y,
426
445
  onClick: () => {
427
446
  let t = e.filter((e) => e.status === o.Idle);
428
447
  r ? r(t) : t.forEach((e) => n?.(e));
@@ -431,43 +450,49 @@ var Ae = /* @__PURE__ */ function(e) {
431
450
  ]
432
451
  }), /* @__PURE__ */ J("div", {
433
452
  role: "list",
434
- "aria-label": T,
435
- className: d("gap-3", C ? "grid grid-cols-[repeat(5,84px)] overflow-x-auto" : "flex flex-wrap"),
453
+ "aria-label": A,
454
+ className: d("gap-3", O ? "grid grid-cols-[repeat(5,84px)] overflow-x-auto" : "flex flex-wrap"),
436
455
  children: [
437
- E.map((e) => /* @__PURE__ */ q("div", {
456
+ j.map((e) => /* @__PURE__ */ q("div", {
438
457
  role: "listitem",
439
- children: e.type === t.Image ? /* @__PURE__ */ q(Re, {
458
+ children: e.type === t.Image ? /* @__PURE__ */ q(Ve, {
440
459
  attachment: e,
441
460
  onClick: n ? () => n(e) : void 0,
442
461
  onRetry: i,
443
- clickLabel: c,
444
- retryLabel: l,
445
- roundedClassName: "rounded-xl",
462
+ labels: {
463
+ clickLabel: g,
464
+ retryLabel: _
465
+ },
466
+ typeLabels: c,
467
+ styles: { roundedClassName: "rounded-xl" },
446
468
  showHoverDownloadIcon: !0,
447
469
  className: d("size-[84px]", Z.imageTile)
448
- }) : /* @__PURE__ */ q(He, {
470
+ }) : /* @__PURE__ */ q(Ue, {
449
471
  attachment: e,
450
- sizeLabel: a?.(e),
451
472
  onClick: n,
452
473
  onRetry: i,
453
- clickLabel: c,
454
- retryLabel: l,
455
- theme: m
474
+ labels: {
475
+ clickLabel: g,
476
+ retryLabel: _,
477
+ sizeLabel: a?.(e)
478
+ },
479
+ typeLabels: c,
480
+ theme: u
456
481
  })
457
482
  }, e.id)),
458
- y.layout === ze.Collapsed && /* @__PURE__ */ q("div", {
483
+ w.layout === Ne.Collapsed && /* @__PURE__ */ q("div", {
459
484
  role: "listitem",
460
- children: /* @__PURE__ */ q(We, {
461
- count: y.hiddenCount,
462
- onClick: () => v(!0)
485
+ children: /* @__PURE__ */ q(Ge, {
486
+ count: w.hiddenCount,
487
+ onClick: () => C(!0)
463
488
  })
464
489
  }),
465
- C && _ && /* @__PURE__ */ q("div", {
490
+ O && S && /* @__PURE__ */ q("div", {
466
491
  role: "listitem",
467
- children: /* @__PURE__ */ q(We, {
492
+ children: /* @__PURE__ */ q(Ge, {
468
493
  count: 0,
469
- onClick: () => v(!1),
470
- ariaLabel: u,
494
+ onClick: () => C(!1),
495
+ ariaLabel: v,
471
496
  children: /* @__PURE__ */ q(P, {
472
497
  size: p.MD,
473
498
  "aria-hidden": !0
@@ -477,11 +502,11 @@ var Ae = /* @__PURE__ */ function(e) {
477
502
  ]
478
503
  })]
479
504
  });
480
- }, qe = {
505
+ }, Je = {
481
506
  tab: "_tab_1mi6x_1",
482
507
  tabActive: "_tabActive_1mi6x_13"
483
508
  };
484
- Ee(({ tabs: e, activeTabId: t, onTabChange: n, tabClassName: r = "dial-tiny-semi-text" }) => /* @__PURE__ */ q("div", {
509
+ Te(({ tabs: e, activeTabId: t, onTabChange: n, tabClassName: r = "dial-tiny-semi-text" }) => /* @__PURE__ */ q("div", {
485
510
  className: "flex flex-nowrap gap-1",
486
511
  children: e.map((e) => {
487
512
  let i = t === e.id;
@@ -489,13 +514,13 @@ Ee(({ tabs: e, activeTabId: t, onTabChange: n, tabClassName: r = "dial-tiny-semi
489
514
  label: e.label,
490
515
  selected: i,
491
516
  onClick: () => n(e.id),
492
- className: d("box-border h-auto shrink-0 justify-center rounded-full p-2 text-center", r, qe.tab, i && qe.tabActive)
517
+ className: d("box-border h-auto shrink-0 justify-center rounded-full p-2 text-center", r, Je.tab, i && Je.tabActive)
493
518
  }, e.id);
494
519
  })
495
520
  }));
496
- var Je = (e) => /* @__PURE__ */ q(y, { ...e }), Ye = ({ features: e, initialResponseFormat: t, initialSystemPrompt: n, initialTemperature: r, onSave: i, onClose: a, isOpen: o }) => {
497
- let [s, c] = G(t), [l, u] = G(n), [d, f] = G(r), p = ke(o);
498
- W(() => {
521
+ var Ye = (e) => /* @__PURE__ */ q(y, { ...e }), Xe = ({ features: e, initialResponseFormat: t, initialSystemPrompt: n, initialTemperature: r, onSave: i, onClose: a, isOpen: o }) => {
522
+ let [s, c] = G(t), [l, u] = G(n), [d, f] = G(r), p = Ae(o);
523
+ De(() => {
499
524
  o && !p.current && (c(t), u(n), f(r)), p.current = o;
500
525
  }, [
501
526
  o,
@@ -512,7 +537,7 @@ var Je = (e) => /* @__PURE__ */ q(y, { ...e }), Ye = ({ features: e, initialResp
512
537
  setResponseFormat: c,
513
538
  setSystemPrompt: u,
514
539
  setTemperature: f,
515
- handleSubmit: De(() => {
540
+ handleSubmit: Ee(() => {
516
541
  if (!m) return;
517
542
  let t = {};
518
543
  e.responseFormat && s != null && (t.responseFormat = s), e.systemPrompt && (t.systemPrompt = l), e.temperature && (t.temperature = d), i(t), a();
@@ -526,7 +551,7 @@ var Je = (e) => /* @__PURE__ */ q(y, { ...e }), Ye = ({ features: e, initialResp
526
551
  a
527
552
  ])
528
553
  };
529
- }, Xe = ({ features: e, responseFormat: t, systemPrompt: n, temperature: r, onResponseFormatChange: i, onSystemPromptChange: a, onTemperatureChange: o, responseFormatLabel: c = "Response format", responseFormatHint: l = "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: h = [
554
+ }, Ze = "!text-[14px] !leading-[20px] font-semibold !text-primary gap-1", Qe = ({ features: e, responseFormat: t, systemPrompt: n, temperature: r, onResponseFormatChange: i, onSystemPromptChange: a, onTemperatureChange: o, responseFormatLabel: c = "Response format", responseFormatHint: l = "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: h = [
530
555
  "Precise",
531
556
  "Neutral",
532
557
  "Creative"
@@ -535,6 +560,7 @@ var Je = (e) => /* @__PURE__ */ q(y, { ...e }), Ye = ({ features: e, initialResp
535
560
  children: [
536
561
  e.responseFormat && /* @__PURE__ */ q(b, {
537
562
  fieldTitle: c,
563
+ labelClassName: Ze,
538
564
  elementId: "response-format",
539
565
  orientation: k.Column,
540
566
  activeRadioButton: t ?? s.Markdown,
@@ -551,12 +577,16 @@ var Je = (e) => /* @__PURE__ */ q(y, { ...e }), Ye = ({ features: e, initialResp
551
577
  e.systemPrompt && /* @__PURE__ */ q(g, {
552
578
  value: n,
553
579
  placeholder: p,
554
- labelProps: { label: f },
580
+ labelProps: {
581
+ className: Ze,
582
+ label: f
583
+ },
555
584
  onChange: (e) => a(e ?? "")
556
585
  }),
557
586
  e.temperature && /* @__PURE__ */ q(C, {
558
587
  labelProps: {
559
588
  label: m,
589
+ className: Ze,
560
590
  caption: _
561
591
  },
562
592
  value: r,
@@ -568,8 +598,8 @@ var Je = (e) => /* @__PURE__ */ q(y, { ...e }), Ye = ({ features: e, initialResp
568
598
  })
569
599
  ]
570
600
  });
571
- Ee(({ 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: _ }) => {
572
- let { responseFormat: y, systemPrompt: b, temperature: x, canSubmit: S, setResponseFormat: C, setSystemPrompt: w, setTemperature: T, handleSubmit: D } = Ye({
601
+ Te(({ 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
+ let { responseFormat: y, systemPrompt: b, temperature: x, canSubmit: S, setResponseFormat: C, setSystemPrompt: w, setTemperature: T, handleSubmit: D } = Xe({
573
603
  features: e,
574
604
  initialResponseFormat: t,
575
605
  initialSystemPrompt: n,
@@ -588,14 +618,14 @@ Ee(({ features: e, initialResponseFormat: t, initialSystemPrompt: n, initialTemp
588
618
  children: /* @__PURE__ */ q(E, {
589
619
  tooltip: _,
590
620
  hideTooltip: S || !_,
591
- children: /* @__PURE__ */ q(Je, {
621
+ children: /* @__PURE__ */ q(Ye, {
592
622
  label: g,
593
623
  onClick: D,
594
624
  disabled: !S
595
625
  })
596
626
  })
597
627
  }),
598
- children: /* @__PURE__ */ q(Xe, {
628
+ children: /* @__PURE__ */ q(Qe, {
599
629
  features: e,
600
630
  responseFormat: y,
601
631
  systemPrompt: b,
@@ -626,7 +656,7 @@ var Q = {
626
656
  blockquote: "_blockquote_1yr1w_34",
627
657
  tableCell: "_tableCell_1yr1w_39",
628
658
  tableHeader: "_tableHeader_1yr1w_44"
629
- }, Ze = ({ status: e, isLive: t }) => e ? e === c.Completed ? /* @__PURE__ */ q(F, {
659
+ }, $e = ({ status: e, isLive: t }) => e ? e === c.Completed ? /* @__PURE__ */ q(F, {
630
660
  size: p.MD,
631
661
  className: Q.iconSecondary
632
662
  }) : /* @__PURE__ */ q(A, {
@@ -635,19 +665,19 @@ var Q = {
635
665
  }) : t ? /* @__PURE__ */ q(w, { size: 20 }) : /* @__PURE__ */ q(A, {
636
666
  size: p.MD,
637
667
  className: Q.iconSecondary
638
- }), Qe = ({ children: e, codeClassName: t, copyAriaLabel: n }) => {
639
- let [r, i] = G(!1), a = ke(null);
640
- W(() => () => {
668
+ }), et = ({ children: e, codeClassName: t, copyAriaLabel: n }) => {
669
+ let [r, i] = G(!1), a = Ae(null);
670
+ De(() => () => {
641
671
  a.current != null && clearTimeout(a.current);
642
672
  }, []);
643
- let o = De(() => {
673
+ let o = Ee(() => {
644
674
  u(typeof e == "string" ? e : String(e ?? "")), a.current && clearTimeout(a.current), i(!0), a.current = setTimeout(() => i(!1), 2e3);
645
675
  }, [e]);
646
676
  return /* @__PURE__ */ J("pre", {
647
677
  className: d("relative max-h-[300px] overflow-auto rounded border p-3 text-sm", Q.codeBlock),
648
678
  children: [/* @__PURE__ */ q(h, {
649
679
  size: D.Small,
650
- icon: q(r ? j : ee, {
680
+ icon: q(r ? j : L, {
651
681
  size: p.SM,
652
682
  className: Q.iconSecondary
653
683
  }),
@@ -659,7 +689,7 @@ var Q = {
659
689
  children: e
660
690
  })]
661
691
  });
662
- }, $e = Ee(({ content: e, typography: t, copyAriaLabel: n = "Copy" }) => /* @__PURE__ */ q(a, {
692
+ }, tt = Te(({ content: e, typography: t, copyAriaLabel: n = "Copy" }) => /* @__PURE__ */ q(a, {
663
693
  content: e,
664
694
  classNames: {
665
695
  p: d(t.fontClassName, Q.stageContent),
@@ -671,7 +701,7 @@ var Q = {
671
701
  tableCell: Q.tableCell,
672
702
  tableHeader: Q.tableHeader
673
703
  },
674
- components: { code: ({ children: e, className: r }) => r?.includes("language-") ? /* @__PURE__ */ q(Qe, {
704
+ components: { code: ({ children: e, className: r }) => r?.includes("language-") ? /* @__PURE__ */ q(et, {
675
705
  codeClassName: r,
676
706
  copyAriaLabel: n,
677
707
  children: e
@@ -679,8 +709,8 @@ var Q = {
679
709
  className: d("px-1 py-0.5", t.codeClassName ?? "rounded font-mono text-sm", Q.codeInline),
680
710
  children: e
681
711
  }) }
682
- })), et = ({ stage: e, isLive: t, typography: n, copyAriaLabel: r = "Copy stage content", attachmentsAriaLabel: i = "Stage attachments", onAttachmentClick: a }) => {
683
- let [o, s] = G(!1), c = /* @__PURE__ */ J(K, { children: [/* @__PURE__ */ q(Ze, {
712
+ })), nt = ({ stage: e, isLive: t, typography: n, copyAriaLabel: r = "Copy stage content", attachmentsAriaLabel: i = "Stage attachments", onAttachmentClick: a }) => {
713
+ let [o, s] = G(!1), c = /* @__PURE__ */ J(K, { children: [/* @__PURE__ */ q($e, {
684
714
  status: e.status,
685
715
  isLive: t
686
716
  }), /* @__PURE__ */ q("span", {
@@ -706,14 +736,14 @@ var Q = {
706
736
  className: "mt-3 flex flex-col gap-3 ps-7",
707
737
  children: [e.content && /* @__PURE__ */ q("div", {
708
738
  className: "max-h-[300px] overflow-y-auto",
709
- children: /* @__PURE__ */ q($e, {
739
+ children: /* @__PURE__ */ q(tt, {
710
740
  content: e.content,
711
741
  typography: n,
712
742
  copyAriaLabel: r
713
743
  })
714
- }), l.length > 0 && /* @__PURE__ */ q(Ke, {
744
+ }), l.length > 0 && /* @__PURE__ */ q(qe, {
715
745
  attachments: l,
716
- ariaLabel: i,
746
+ labels: { ariaLabel: i },
717
747
  onAttachmentClick: a
718
748
  })]
719
749
  })
@@ -742,7 +772,7 @@ var Q = {
742
772
  children: e.map((e, t) => /* @__PURE__ */ q("li", {
743
773
  role: "listitem",
744
774
  className: d("w-full", s.fontClassName),
745
- children: /* @__PURE__ */ q(et, {
775
+ children: /* @__PURE__ */ q(nt, {
746
776
  stage: e,
747
777
  isLive: u === t,
748
778
  typography: s,
@@ -752,11 +782,11 @@ var Q = {
752
782
  }, e.index))
753
783
  })
754
784
  });
755
- }, tt = {
785
+ }, rt = {
756
786
  toggleButton: "_toggleButton_1rkek_1",
757
787
  stepsCount: "_stepsCount_1rkek_8",
758
788
  contentBox: "_contentBox_1rkek_12"
759
- }, nt = ({ stages: e, isStreaming: t, executedLabel: n = "Executed", stepsLabel: r = () => "steps", collapseThreshold: i = 7, className: a, styles: o, onAttachmentClick: s }) => {
789
+ }, it = ({ stages: e, isStreaming: t, executedLabel: n = "Executed", stepsLabel: r = () => "steps", collapseThreshold: i = 7, className: a, styles: o, onAttachmentClick: s }) => {
760
790
  let [u, f] = G(!1);
761
791
  if (t) return /* @__PURE__ */ q($, {
762
792
  stages: e,
@@ -783,7 +813,7 @@ var Q = {
783
813
  style: g,
784
814
  className: d("flex w-full flex-col gap-1", a),
785
815
  children: [v.length > 0 && /* @__PURE__ */ J("div", { children: [/* @__PURE__ */ q(_, {
786
- className: tt.toggleButton,
816
+ className: rt.toggleButton,
787
817
  onClick: () => f((e) => !e),
788
818
  iconBefore: /* @__PURE__ */ q(j, { size: p.SM }),
789
819
  iconAfter: u ? /* @__PURE__ */ q(M, { size: 12 }) : /* @__PURE__ */ q(N, {
@@ -794,7 +824,7 @@ var Q = {
794
824
  className: d(h.fontClassName, "pe-1"),
795
825
  children: n
796
826
  }), /* @__PURE__ */ J("span", {
797
- className: d(h.fontClassName, tt.stepsCount),
827
+ className: d(h.fontClassName, rt.stepsCount),
798
828
  children: [
799
829
  v.length,
800
830
  " ",
@@ -806,7 +836,7 @@ var Q = {
806
836
  children: /* @__PURE__ */ q("div", {
807
837
  className: "overflow-hidden",
808
838
  children: /* @__PURE__ */ q("div", {
809
- className: d("rounded border px-2 py-3", tt.contentBox),
839
+ className: d("rounded border px-2 py-3", rt.contentBox),
810
840
  children: /* @__PURE__ */ q($, {
811
841
  stages: v,
812
842
  isStreaming: !1,
@@ -822,4 +852,4 @@ var Q = {
822
852
  });
823
853
  };
824
854
  //#endregion
825
- export { nt as CollapsedGroup, $ as StagesPanel };
855
+ export { it as CollapsedGroup, $ as StagesPanel };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@epam/ai-dial-conversation-stages",
3
3
  "description": "Panel for displaying agent processing stages during LLM response streaming",
4
- "version": "1.0.0-dev.484",
4
+ "version": "1.0.0-dev.489",
5
5
  "license": "Apache-2.0",
6
6
  "type": "module",
7
7
  "main": "./index.js",
@@ -19,9 +19,9 @@
19
19
  "peerDependencies": {
20
20
  "react": "^19.0.0",
21
21
  "@tabler/icons-react": "^3.0.0",
22
- "@epam/ai-dial-chat-shared": "1.0.0-dev.484",
22
+ "@epam/ai-dial-chat-shared": "1.0.0-dev.489",
23
23
  "@epam/ai-dial-ui-kit": "0.12.0-dev.28",
24
- "@epam/ai-dial-conversation-input": "1.0.0-dev.484"
24
+ "@epam/ai-dial-conversation-input": "1.0.0-dev.489"
25
25
  },
26
26
  "repository": {
27
27
  "type": "git",