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