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

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