@epam/ai-dial-skill-editor 1.1.0-dev.411 → 1.1.0-dev.418
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/components/SkillEditor/SkillEditor.d.ts.map +1 -1
- package/index.js +265 -264
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SkillEditor.d.ts","sourceRoot":"","sources":["../../../src/components/SkillEditor/SkillEditor.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"SkillEditor.d.ts","sourceRoot":"","sources":["../../../src/components/SkillEditor/SkillEditor.tsx"],"names":[],"mappings":"AA+BA,OAAO,0CAA0C,CAAC;AAClD,OAAO,0CAA0C,CAAC;AAClD,OAAO,EAEL,EAAE,EAQH,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EACV,gBAAgB,EAGjB,MAAM,iCAAiC,CAAC;AAsBzC,qFAAqF;AACrF,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAie5C,CAAC"}
|
package/index.js
CHANGED
|
@@ -1,97 +1,97 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { Fragment as
|
|
3
|
-
import { Accordion as
|
|
4
|
-
import { IconArrowNarrowLeft as
|
|
5
|
-
import { Suspense as ae, lazy as
|
|
6
|
-
import { DialFileNodeType as
|
|
7
|
-
import { LazyMarkdownEditor as
|
|
8
|
-
var
|
|
1
|
+
import { MARKDOWN_EDITOR_MAX_HEIGHT_CLASS_NAME as e, buildCssVars as t, formatFileSize as n, mergeClasses as r } from "@epam/ai-dial-chat-shared";
|
|
2
|
+
import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
|
|
3
|
+
import { Accordion as s, CaptionText as c, DIAL_ICON_SIZE as l, DIAL_KIT_ICON_STROKE as u, EditorThemes as d, ErrorText as f, FileDropzone as p, GhostButton as m, GhostIconButton as h, Input as g, NeutralButton as _, Popup as v, PopupSize as ee, PrimaryButton as te, Spinner as y, Textarea as b } from "@epam/ai-dial-ui-kit";
|
|
4
|
+
import { IconArrowNarrowLeft as x, IconFileText as ne, IconPlus as S, IconTrashX as re, IconUpload as ie } from "@tabler/icons-react";
|
|
5
|
+
import { Suspense as ae, lazy as C, useCallback as w, useEffect as T, useId as E, useMemo as D, useRef as O, useState as k } from "react";
|
|
6
|
+
import { DialFileNodeType as A, DialFoldersTree as oe } from "@epam/ai-dial-react-file-manager";
|
|
7
|
+
import { LazyMarkdownEditor as j } from "@epam/ai-dial-ui-kit/editors";
|
|
8
|
+
var M = {
|
|
9
9
|
headerBorder: "_headerBorder_1kidu_1",
|
|
10
10
|
footerBorder: "_footerBorder_1kidu_5",
|
|
11
11
|
sidebarBorder: "_sidebarBorder_1kidu_9"
|
|
12
|
-
},
|
|
13
|
-
let
|
|
14
|
-
return /* @__PURE__ */
|
|
15
|
-
dir:
|
|
12
|
+
}, N = ({ title: e, onBack: n, backAriaLabel: i = "Back", actions: s, leftContent: c, rightContent: d, isSaving: f = !1, labels: p, styles: m, dir: g }) => {
|
|
13
|
+
let _ = E(), v = f ? p?.savingStatusLabel ?? "Saving" : "";
|
|
14
|
+
return /* @__PURE__ */ o("div", {
|
|
15
|
+
dir: g,
|
|
16
16
|
className: "flex min-h-0 flex-1 flex-col",
|
|
17
|
-
style:
|
|
17
|
+
style: t({
|
|
18
18
|
"--el-header-border-color": m?.colors?.headerBorderColor,
|
|
19
19
|
"--el-sidebar-border-color": m?.colors?.sidebarBorderColor
|
|
20
20
|
}),
|
|
21
21
|
children: [
|
|
22
|
-
/* @__PURE__ */
|
|
22
|
+
/* @__PURE__ */ a("span", {
|
|
23
23
|
role: "status",
|
|
24
24
|
"aria-live": "polite",
|
|
25
25
|
className: "sr-only",
|
|
26
|
-
id:
|
|
27
|
-
children:
|
|
26
|
+
id: _,
|
|
27
|
+
children: v
|
|
28
28
|
}),
|
|
29
|
-
/* @__PURE__ */
|
|
30
|
-
className:
|
|
31
|
-
children: [/* @__PURE__ */
|
|
29
|
+
/* @__PURE__ */ o("div", {
|
|
30
|
+
className: r("flex items-center justify-between gap-2 border-b px-4 py-2 desktop:px-8 desktop:pb-3 desktop:pt-3", M.headerBorder),
|
|
31
|
+
children: [/* @__PURE__ */ o("div", {
|
|
32
32
|
className: "flex min-w-0 flex-1 items-center gap-2",
|
|
33
|
-
children: [/* @__PURE__ */
|
|
34
|
-
icon: /* @__PURE__ */
|
|
35
|
-
size:
|
|
36
|
-
stroke:
|
|
33
|
+
children: [/* @__PURE__ */ a(h, {
|
|
34
|
+
icon: /* @__PURE__ */ a(x, {
|
|
35
|
+
size: l.LG,
|
|
36
|
+
stroke: u,
|
|
37
37
|
"aria-hidden": !0,
|
|
38
38
|
className: "rtl:scale-x-[-1]"
|
|
39
39
|
}),
|
|
40
|
-
"aria-label":
|
|
41
|
-
onClick:
|
|
42
|
-
}), /* @__PURE__ */
|
|
40
|
+
"aria-label": i,
|
|
41
|
+
onClick: n
|
|
42
|
+
}), /* @__PURE__ */ a("h1", {
|
|
43
43
|
className: "dial-h2-text min-w-0 truncate",
|
|
44
|
-
children:
|
|
44
|
+
children: e
|
|
45
45
|
})]
|
|
46
|
-
}), s != null && /* @__PURE__ */
|
|
46
|
+
}), s != null && /* @__PURE__ */ a("div", {
|
|
47
47
|
className: "hidden shrink-0 items-center gap-2 desktop:flex",
|
|
48
48
|
children: s
|
|
49
49
|
})]
|
|
50
50
|
}),
|
|
51
|
-
/* @__PURE__ */
|
|
51
|
+
/* @__PURE__ */ o("div", {
|
|
52
52
|
className: "flex flex-1 flex-col overflow-y-auto desktop:flex-row desktop:overflow-hidden",
|
|
53
|
-
children: [/* @__PURE__ */
|
|
54
|
-
className:
|
|
55
|
-
children:
|
|
56
|
-
}),
|
|
53
|
+
children: [/* @__PURE__ */ a("div", {
|
|
54
|
+
className: r(d == null ? "desktop:flex-1" : "desktop:w-[360px] desktop:shrink-0 desktop:overflow-y-auto desktop:border-e", "desktop:overflow-y-auto", d == null ? void 0 : M.sidebarBorder),
|
|
55
|
+
children: c
|
|
56
|
+
}), d != null && /* @__PURE__ */ a("div", {
|
|
57
57
|
className: "desktop:flex-1 desktop:overflow-y-auto",
|
|
58
|
-
children:
|
|
58
|
+
children: d
|
|
59
59
|
})]
|
|
60
60
|
}),
|
|
61
|
-
s != null && /* @__PURE__ */
|
|
62
|
-
className:
|
|
61
|
+
s != null && /* @__PURE__ */ a("div", {
|
|
62
|
+
className: r("flex shrink-0 flex-row-reverse items-center gap-2 border-t px-4 py-2 desktop:hidden [&>*]:flex-1", M.footerBorder),
|
|
63
63
|
children: s
|
|
64
64
|
})
|
|
65
65
|
]
|
|
66
66
|
});
|
|
67
|
-
},
|
|
68
|
-
let [t, n] =
|
|
67
|
+
}, P = (e) => !!e.dataTransfer?.types.includes("Files"), se = (e) => {
|
|
68
|
+
let [t, n] = k(!1), r = O(0);
|
|
69
69
|
return {
|
|
70
70
|
isDragActive: t,
|
|
71
71
|
dropZoneHandlers: {
|
|
72
|
-
onDragEnter:
|
|
73
|
-
|
|
72
|
+
onDragEnter: w((e) => {
|
|
73
|
+
P(e) && (e.preventDefault(), r.current += 1, n(!0));
|
|
74
74
|
}, []),
|
|
75
|
-
onDragLeave:
|
|
76
|
-
|
|
75
|
+
onDragLeave: w((e) => {
|
|
76
|
+
P(e) && (--r.current, r.current <= 0 && (r.current = 0, n(!1)));
|
|
77
77
|
}, []),
|
|
78
|
-
onDragOver:
|
|
79
|
-
|
|
78
|
+
onDragOver: w((e) => {
|
|
79
|
+
P(e) && e.preventDefault();
|
|
80
80
|
}, []),
|
|
81
|
-
onDrop:
|
|
82
|
-
if (!
|
|
81
|
+
onDrop: w((t) => {
|
|
82
|
+
if (!P(t)) return;
|
|
83
83
|
t.preventDefault(), r.current = 0, n(!1);
|
|
84
84
|
let i = Array.from(t.dataTransfer?.files ?? []);
|
|
85
85
|
i.length > 0 && e(i);
|
|
86
86
|
}, [e])
|
|
87
87
|
}
|
|
88
88
|
};
|
|
89
|
-
},
|
|
89
|
+
}, F = "SKILL.md", I = /* @__PURE__ */ function(e) {
|
|
90
90
|
return e.File = "file", e.Folder = "folder", e;
|
|
91
|
-
}({}),
|
|
91
|
+
}({}), L = (e) => {
|
|
92
92
|
let t = e.lastIndexOf("/");
|
|
93
93
|
return t === -1 ? null : e.slice(0, t);
|
|
94
|
-
},
|
|
94
|
+
}, R = (e) => {
|
|
95
95
|
let t = e.lastIndexOf("/");
|
|
96
96
|
return t === -1 ? e : e.slice(t + 1);
|
|
97
97
|
}, ce = (e) => {
|
|
@@ -100,30 +100,30 @@ var j = {
|
|
|
100
100
|
if (n) return n;
|
|
101
101
|
let r = {
|
|
102
102
|
path: e,
|
|
103
|
-
name:
|
|
104
|
-
nodeType:
|
|
105
|
-
parentPath:
|
|
103
|
+
name: R(e),
|
|
104
|
+
nodeType: A.FOLDER,
|
|
105
|
+
parentPath: L(e),
|
|
106
106
|
folderId: e,
|
|
107
107
|
items: []
|
|
108
108
|
};
|
|
109
109
|
return t.set(e, r), r;
|
|
110
110
|
};
|
|
111
111
|
for (let r of e) {
|
|
112
|
-
if (r.kind ===
|
|
112
|
+
if (r.kind === I.Folder) {
|
|
113
113
|
n(r.path);
|
|
114
114
|
continue;
|
|
115
115
|
}
|
|
116
116
|
t.set(r.path, {
|
|
117
117
|
path: r.path,
|
|
118
118
|
name: r.name,
|
|
119
|
-
nodeType:
|
|
120
|
-
parentPath:
|
|
121
|
-
folderId:
|
|
119
|
+
nodeType: A.ITEM,
|
|
120
|
+
parentPath: L(r.path),
|
|
121
|
+
folderId: L(r.path) ?? ""
|
|
122
122
|
});
|
|
123
123
|
}
|
|
124
124
|
for (let t of [...e]) {
|
|
125
|
-
let e =
|
|
126
|
-
for (; e != null;) n(e), e =
|
|
125
|
+
let e = L(t.path);
|
|
126
|
+
for (; e != null;) n(e), e = L(e);
|
|
127
127
|
}
|
|
128
128
|
let r = [];
|
|
129
129
|
for (let e of t.values()) {
|
|
@@ -137,162 +137,162 @@ var j = {
|
|
|
137
137
|
return r;
|
|
138
138
|
}, le = ({ isVisible: e, labels: t }) => {
|
|
139
139
|
if (!e) return null;
|
|
140
|
-
let
|
|
141
|
-
return /* @__PURE__ */
|
|
140
|
+
let n = t ?? {};
|
|
141
|
+
return /* @__PURE__ */ a("div", {
|
|
142
142
|
role: "status",
|
|
143
143
|
"aria-live": "polite",
|
|
144
|
-
className:
|
|
145
|
-
children: /* @__PURE__ */
|
|
144
|
+
className: r("pointer-events-none absolute inset-0 z-[100] flex items-center justify-center backdrop-blur-sm"),
|
|
145
|
+
children: /* @__PURE__ */ o("div", {
|
|
146
146
|
className: "flex flex-col items-center text-center",
|
|
147
147
|
children: [
|
|
148
|
-
/* @__PURE__ */
|
|
148
|
+
/* @__PURE__ */ a(ie, {
|
|
149
149
|
size: 100,
|
|
150
150
|
className: "text-accent-primary",
|
|
151
151
|
"aria-hidden": !0,
|
|
152
|
-
stroke:
|
|
152
|
+
stroke: u
|
|
153
153
|
}),
|
|
154
|
-
/* @__PURE__ */
|
|
154
|
+
/* @__PURE__ */ a("span", {
|
|
155
155
|
className: "dial-h3-text mt-5",
|
|
156
|
-
children:
|
|
156
|
+
children: n.dropOverlayTitle ?? "Upload files"
|
|
157
157
|
}),
|
|
158
|
-
/* @__PURE__ */
|
|
158
|
+
/* @__PURE__ */ a("span", {
|
|
159
159
|
className: "dial-small-text mt-4",
|
|
160
|
-
children:
|
|
160
|
+
children: n.dropOverlaySubtitle ?? "Drop files here to add them to this skill"
|
|
161
161
|
})
|
|
162
162
|
]
|
|
163
163
|
})
|
|
164
164
|
});
|
|
165
|
-
},
|
|
165
|
+
}, ue = /* @__PURE__ */ function(e) {
|
|
166
166
|
return e.SupportingFile = "supporting-file", e.Manifest = "manifest", e;
|
|
167
167
|
}({}), z = /* @__PURE__ */ function(e) {
|
|
168
168
|
return e.Valid = "valid", e.Invalid = "invalid", e;
|
|
169
|
-
}({}), B = (e) => (e.webkitRelativePath || e.name).replace(/\\/g, "/"), V = 0, H = () => `skill-file-candidate-${++V}`,
|
|
170
|
-
let l =
|
|
169
|
+
}({}), B = (e) => (e.webkitRelativePath || e.name).replace(/\\/g, "/"), V = 0, H = () => `skill-file-candidate-${++V}`, de = ({ isOpen: e, onClose: t, fileActions: r, initialFiles: s, labels: c }) => {
|
|
170
|
+
let l = c ?? {}, [d, g] = k([]), [_, b] = k(/* @__PURE__ */ new Map()), [x, S] = k([]), [ie, ae] = k(!1), [C, w] = k(), [D, O] = k(!1), A = E(), oe = (e) => {
|
|
171
171
|
let t = e.map((e) => ({
|
|
172
172
|
id: H(),
|
|
173
173
|
file: e,
|
|
174
174
|
path: B(e)
|
|
175
175
|
}));
|
|
176
|
-
|
|
176
|
+
w(void 0), g((e) => [...e, ...t]);
|
|
177
177
|
}, j = (e) => {
|
|
178
|
-
|
|
178
|
+
g((t) => t.filter((t) => t.id !== e));
|
|
179
179
|
};
|
|
180
|
-
|
|
181
|
-
e && (
|
|
180
|
+
T(() => {
|
|
181
|
+
e && (g((s ?? []).map((e) => ({
|
|
182
182
|
id: H(),
|
|
183
183
|
file: e,
|
|
184
184
|
path: B(e)
|
|
185
|
-
}))),
|
|
186
|
-
}, [e]),
|
|
185
|
+
}))), b(/* @__PURE__ */ new Map()), S([]), w(void 0));
|
|
186
|
+
}, [e]), T(() => {
|
|
187
187
|
if (!e) return;
|
|
188
188
|
let t = !1;
|
|
189
|
-
if (
|
|
190
|
-
|
|
189
|
+
if (d.length === 0) {
|
|
190
|
+
b(/* @__PURE__ */ new Map()), S([]);
|
|
191
191
|
return;
|
|
192
192
|
}
|
|
193
|
-
return
|
|
194
|
-
t || (
|
|
193
|
+
return ae(!0), r.validateBatch(d).then(({ results: e, batchErrors: n }) => {
|
|
194
|
+
t || (b(new Map(e.map((e) => [e.candidateId, e]))), S(n.map((e) => e.message)));
|
|
195
195
|
}).finally(() => {
|
|
196
|
-
t ||
|
|
196
|
+
t || ae(!1);
|
|
197
197
|
}), () => {
|
|
198
198
|
t = !0;
|
|
199
199
|
};
|
|
200
|
-
}, [
|
|
201
|
-
let M =
|
|
202
|
-
|
|
200
|
+
}, [d, e]);
|
|
201
|
+
let M = d.some((e) => _.get(e.id)?.status === z.Invalid), N = d.length > 0 && d.every((e) => _.get(e.id)?.status === z.Invalid), P = d.length > 0 && !M && x.length === 0 && !ie && !D, se = async () => {
|
|
202
|
+
O(!0), w(void 0);
|
|
203
203
|
try {
|
|
204
|
-
let { results: e, batchErrors:
|
|
205
|
-
if (
|
|
206
|
-
let
|
|
207
|
-
if (
|
|
208
|
-
|
|
204
|
+
let { results: e, batchErrors: n } = await r.validateBatch(d), i = new Map(e.map((e) => [e.candidateId, e]));
|
|
205
|
+
if (b(i), S(n.map((e) => e.message)), d.some((e) => i.get(e.id)?.status === z.Invalid) || n.length > 0) return;
|
|
206
|
+
let a = await r.commitBatch(d);
|
|
207
|
+
if (a.error) {
|
|
208
|
+
w(a.error);
|
|
209
209
|
return;
|
|
210
210
|
}
|
|
211
|
-
|
|
211
|
+
t();
|
|
212
212
|
} finally {
|
|
213
|
-
|
|
213
|
+
O(!1);
|
|
214
214
|
}
|
|
215
215
|
};
|
|
216
|
-
return /* @__PURE__ */
|
|
216
|
+
return /* @__PURE__ */ a(v, {
|
|
217
217
|
open: e,
|
|
218
218
|
header: l.uploadDialogTitle ?? "Upload files from device",
|
|
219
|
-
size:
|
|
219
|
+
size: ee.Sm,
|
|
220
220
|
closeAriaLabel: l.uploadDialogCloseAriaLabel ?? "Close",
|
|
221
|
-
onClose:
|
|
222
|
-
footer: /* @__PURE__ */
|
|
221
|
+
onClose: t,
|
|
222
|
+
footer: /* @__PURE__ */ o("div", {
|
|
223
223
|
className: "flex min-h-[44px] items-center justify-end gap-2 px-6 py-4",
|
|
224
|
-
children: [/* @__PURE__ */
|
|
224
|
+
children: [/* @__PURE__ */ a(m, {
|
|
225
225
|
label: l.uploadCancelLabel ?? "Cancel",
|
|
226
|
-
onClick:
|
|
227
|
-
}), /* @__PURE__ */
|
|
226
|
+
onClick: t
|
|
227
|
+
}), /* @__PURE__ */ a(te, {
|
|
228
228
|
label: l.uploadConfirmLabel ?? "Add",
|
|
229
|
-
iconBefore: D ? /* @__PURE__ */
|
|
229
|
+
iconBefore: D ? /* @__PURE__ */ a(y, {
|
|
230
230
|
size: 16,
|
|
231
231
|
ariaLabel: ""
|
|
232
232
|
}) : void 0,
|
|
233
|
-
onClick: () => void
|
|
234
|
-
disabled: !
|
|
233
|
+
onClick: () => void se(),
|
|
234
|
+
disabled: !P
|
|
235
235
|
})]
|
|
236
236
|
}),
|
|
237
|
-
children: /* @__PURE__ */
|
|
237
|
+
children: /* @__PURE__ */ o("div", {
|
|
238
238
|
className: "flex flex-col gap-4 px-6 py-4",
|
|
239
239
|
children: [
|
|
240
|
-
/* @__PURE__ */
|
|
241
|
-
label: /* @__PURE__ */
|
|
240
|
+
/* @__PURE__ */ a(p, {
|
|
241
|
+
label: /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a("span", {
|
|
242
242
|
className: "desktop:hidden",
|
|
243
243
|
children: l.uploadDropZoneMobileLabel ?? "Click here to upload"
|
|
244
|
-
}), /* @__PURE__ */
|
|
244
|
+
}), /* @__PURE__ */ a("span", {
|
|
245
245
|
className: "hidden desktop:inline",
|
|
246
246
|
children: l.uploadDropZoneLabel ?? "Drag and drop it or click here to upload"
|
|
247
247
|
})] }),
|
|
248
248
|
ariaLabel: l.uploadDropZoneAriaLabel ?? "Upload files",
|
|
249
249
|
multiple: !0,
|
|
250
250
|
className: N ? "border-error hover:border-error" : void 0,
|
|
251
|
-
onChange:
|
|
251
|
+
onChange: oe
|
|
252
252
|
}),
|
|
253
|
-
/* @__PURE__ */
|
|
253
|
+
/* @__PURE__ */ a("span", {
|
|
254
254
|
role: "status",
|
|
255
255
|
"aria-live": "polite",
|
|
256
256
|
className: "sr-only",
|
|
257
|
-
id:
|
|
258
|
-
children:
|
|
257
|
+
id: A,
|
|
258
|
+
children: x.map((e) => `${l.uploadBatchErrorAriaPrefix ?? "Upload error: "}${e}`).join(" ")
|
|
259
259
|
}),
|
|
260
|
-
|
|
261
|
-
|
|
260
|
+
x.map((e) => /* @__PURE__ */ a(f, { text: e }, e)),
|
|
261
|
+
d.length > 0 && /* @__PURE__ */ a("ul", {
|
|
262
262
|
className: "flex flex-col gap-2",
|
|
263
|
-
children:
|
|
264
|
-
let
|
|
265
|
-
return /* @__PURE__ */
|
|
263
|
+
children: d.map((e) => {
|
|
264
|
+
let t = _.get(e.id), r = t?.kind === ue.Manifest, i = t?.status === z.Invalid;
|
|
265
|
+
return /* @__PURE__ */ o("li", {
|
|
266
266
|
className: "flex items-center gap-2 rounded-lg border border-tertiary p-2",
|
|
267
267
|
children: [
|
|
268
|
-
/* @__PURE__ */
|
|
268
|
+
/* @__PURE__ */ a(ne, {
|
|
269
269
|
size: 20,
|
|
270
270
|
"aria-hidden": !0,
|
|
271
|
-
stroke:
|
|
271
|
+
stroke: u
|
|
272
272
|
}),
|
|
273
|
-
/* @__PURE__ */
|
|
273
|
+
/* @__PURE__ */ o("div", {
|
|
274
274
|
className: "flex min-w-0 flex-1 flex-col",
|
|
275
275
|
children: [
|
|
276
|
-
/* @__PURE__ */
|
|
276
|
+
/* @__PURE__ */ a("span", {
|
|
277
277
|
className: "dial-small-text truncate",
|
|
278
278
|
children: e.path
|
|
279
279
|
}),
|
|
280
|
-
/* @__PURE__ */
|
|
280
|
+
/* @__PURE__ */ a("span", {
|
|
281
281
|
className: "dial-tiny-text text-secondary",
|
|
282
|
-
children:
|
|
282
|
+
children: n(e.file.size)
|
|
283
283
|
}),
|
|
284
|
-
|
|
285
|
-
r && !
|
|
284
|
+
i && t?.error && /* @__PURE__ */ a(f, { text: t.error }),
|
|
285
|
+
r && !i && /* @__PURE__ */ a("span", {
|
|
286
286
|
className: "dial-tiny-text text-secondary",
|
|
287
287
|
children: l.uploadManifestRowNote ?? "Will replace this Skill's name, description, and instructions"
|
|
288
288
|
})
|
|
289
289
|
]
|
|
290
290
|
}),
|
|
291
|
-
/* @__PURE__ */
|
|
292
|
-
icon: /* @__PURE__ */
|
|
291
|
+
/* @__PURE__ */ a(h, {
|
|
292
|
+
icon: /* @__PURE__ */ a(re, {
|
|
293
293
|
size: 16,
|
|
294
294
|
"aria-hidden": !0,
|
|
295
|
-
stroke:
|
|
295
|
+
stroke: u
|
|
296
296
|
}),
|
|
297
297
|
"aria-label": l.uploadRemoveCandidateLabel?.(e.path) ?? `Remove ${e.path}`,
|
|
298
298
|
onClick: () => j(e.id)
|
|
@@ -301,220 +301,220 @@ var j = {
|
|
|
301
301
|
}, e.id);
|
|
302
302
|
})
|
|
303
303
|
}),
|
|
304
|
-
C && /* @__PURE__ */
|
|
304
|
+
C && /* @__PURE__ */ a(f, { text: C })
|
|
305
305
|
]
|
|
306
306
|
})
|
|
307
307
|
});
|
|
308
308
|
}, U = {
|
|
309
309
|
title: "_title_65glc_1",
|
|
310
310
|
helperText: "_helperText_65glc_5"
|
|
311
|
-
},
|
|
312
|
-
let { MarkdownEditor: e } = await
|
|
311
|
+
}, fe = C(async () => {
|
|
312
|
+
let { MarkdownEditor: e } = await j();
|
|
313
313
|
return { default: e };
|
|
314
|
-
}), W = ({ initialValues:
|
|
315
|
-
let [K, q] =
|
|
316
|
-
name:
|
|
317
|
-
description:
|
|
318
|
-
instructions:
|
|
319
|
-
}),
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
name:
|
|
323
|
-
description:
|
|
324
|
-
instructions:
|
|
325
|
-
}),
|
|
326
|
-
}, [
|
|
327
|
-
let
|
|
328
|
-
|
|
329
|
-
if (
|
|
314
|
+
}), W = ({ initialValues: n, files: p, selectedPath: h, onSelectedPathChange: v, expandedPaths: ee, onExpandedPathsChange: x, isLoading: ne = !1, hasLoadError: ie = !1, isSubmitting: C = !1, errors: E, submitError: A, conflict: j, onReloadLatest: M, isNameReadOnly: P = !1, onDirtyChange: L, fileActions: R, supportingFileContent: ue, onSubmit: z, onCancel: B, onBack: V, backAriaLabel: H, title: W, onRetry: pe, labels: G, styles: me, dir: he, instructionsEditorTheme: ge = d.light }) => {
|
|
315
|
+
let [K, q] = k({
|
|
316
|
+
name: n?.name ?? "",
|
|
317
|
+
description: n?.description ?? "",
|
|
318
|
+
instructions: n?.instructions ?? ""
|
|
319
|
+
}), _e = O(n), ve = _e.current !== n, ye = O(p);
|
|
320
|
+
T(() => {
|
|
321
|
+
_e.current = n, q({
|
|
322
|
+
name: n?.name ?? "",
|
|
323
|
+
description: n?.description ?? "",
|
|
324
|
+
instructions: n?.instructions ?? ""
|
|
325
|
+
}), ye.current = p;
|
|
326
|
+
}, [n]);
|
|
327
|
+
let be = (e) => JSON.stringify([...e].sort((e, t) => e.path.localeCompare(t.path))), xe = O(!1);
|
|
328
|
+
T(() => {
|
|
329
|
+
if (ve) return;
|
|
330
330
|
let e = {
|
|
331
|
-
name:
|
|
332
|
-
description:
|
|
333
|
-
instructions:
|
|
334
|
-
},
|
|
335
|
-
|
|
331
|
+
name: n?.name ?? "",
|
|
332
|
+
description: n?.description ?? "",
|
|
333
|
+
instructions: n?.instructions ?? ""
|
|
334
|
+
}, t = JSON.stringify(K) !== JSON.stringify(e) || be(p) !== be(ye.current);
|
|
335
|
+
t !== xe.current && (xe.current = t, L?.(t));
|
|
336
336
|
}, [
|
|
337
337
|
K,
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
338
|
+
p,
|
|
339
|
+
n,
|
|
340
|
+
ve,
|
|
341
|
+
L
|
|
342
342
|
]);
|
|
343
|
-
let [
|
|
344
|
-
|
|
345
|
-
}, [
|
|
343
|
+
let [Se, Ce] = k(F), J = h ?? Se, Y = w((e) => {
|
|
344
|
+
Ce(e), v?.(e);
|
|
345
|
+
}, [v]), [we, Te] = k([]), Ee = ee ?? we, De = D(() => new Set(Ee), [Ee]), Oe = w((e) => {
|
|
346
346
|
let t = [...e];
|
|
347
|
-
|
|
348
|
-
}, [
|
|
349
|
-
X || (
|
|
350
|
-
}, [X])), Z = G ?? {}, Q =
|
|
347
|
+
Te(t), x?.(t);
|
|
348
|
+
}, [x]), [X, ke] = k(!1), [Ae, je] = k(), [Me, Ne] = k(!1), { isDragActive: Pe, dropZoneHandlers: Fe } = se(w((e) => {
|
|
349
|
+
X || (je(e), ke(!0));
|
|
350
|
+
}, [X])), Z = G ?? {}, Q = me?.colors, Ie = me?.typography ?? {}, Le = Ie.titleClassName ?? "dial-body-semi-text", Re = Ie.helperTextClassName ?? "dial-tiny-semi-text", ze = Ie.removeIconClassName ?? "text-secondary", Be = t({
|
|
351
351
|
"--se-title-color": Q?.title,
|
|
352
352
|
"--se-helper-text-color": Q?.helperText
|
|
353
|
-
}),
|
|
353
|
+
}), Ve = Q?.border ? { colors: {
|
|
354
354
|
headerBorderColor: Q.border,
|
|
355
355
|
sidebarBorderColor: Q.border
|
|
356
|
-
} } : void 0,
|
|
357
|
-
path:
|
|
358
|
-
name:
|
|
359
|
-
kind:
|
|
360
|
-
}, ...
|
|
356
|
+
} } : void 0, He = D(() => ce([{
|
|
357
|
+
path: F,
|
|
358
|
+
name: F,
|
|
359
|
+
kind: I.File
|
|
360
|
+
}, ...p]), [p]), $ = D(() => p.find((e) => e.path === J), [p, J]), Ue = w((e) => {
|
|
361
361
|
Y(e.path);
|
|
362
|
-
}, [Y]),
|
|
363
|
-
|
|
362
|
+
}, [Y]), We = w((e) => {
|
|
363
|
+
R.onRemoveNode(e), J === e && Y(F);
|
|
364
364
|
}, [
|
|
365
|
-
|
|
365
|
+
R,
|
|
366
366
|
J,
|
|
367
367
|
Y
|
|
368
|
-
]),
|
|
368
|
+
]), Ge = w((e) => e.path === "SKILL.md" ? [] : [{
|
|
369
369
|
key: "remove",
|
|
370
370
|
label: Z.removeLabel ?? "Remove",
|
|
371
|
-
icon: /* @__PURE__ */
|
|
372
|
-
size:
|
|
373
|
-
className:
|
|
371
|
+
icon: /* @__PURE__ */ a(re, {
|
|
372
|
+
size: l.SM,
|
|
373
|
+
className: ze,
|
|
374
374
|
"aria-hidden": !0,
|
|
375
|
-
stroke:
|
|
375
|
+
stroke: u
|
|
376
376
|
}),
|
|
377
|
-
onClick: () =>
|
|
377
|
+
onClick: () => We(e.path)
|
|
378
378
|
}], [
|
|
379
379
|
Z.removeLabel,
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
]),
|
|
380
|
+
ze,
|
|
381
|
+
We
|
|
382
|
+
]), Ke = /* @__PURE__ */ o("div", {
|
|
383
383
|
className: "flex flex-col gap-2 desktop:gap-5",
|
|
384
|
-
children: [/* @__PURE__ */
|
|
384
|
+
children: [/* @__PURE__ */ o("div", {
|
|
385
385
|
className: "flex items-center justify-between",
|
|
386
|
-
children: [/* @__PURE__ */
|
|
387
|
-
className:
|
|
386
|
+
children: [/* @__PURE__ */ a("span", {
|
|
387
|
+
className: r(U.title, Le),
|
|
388
388
|
children: Z.filesHeading ?? "Files"
|
|
389
|
-
}), /* @__PURE__ */
|
|
389
|
+
}), /* @__PURE__ */ a(_, {
|
|
390
390
|
label: Z.addUploadLabel ?? "Upload from device",
|
|
391
|
-
iconBefore: /* @__PURE__ */
|
|
391
|
+
iconBefore: /* @__PURE__ */ a(S, {
|
|
392
392
|
size: 16,
|
|
393
393
|
"aria-hidden": !0,
|
|
394
|
-
stroke:
|
|
394
|
+
stroke: u
|
|
395
395
|
}),
|
|
396
396
|
onClick: () => {
|
|
397
|
-
|
|
397
|
+
je(void 0), ke(!0);
|
|
398
398
|
}
|
|
399
399
|
})]
|
|
400
|
-
}), /* @__PURE__ */
|
|
400
|
+
}), /* @__PURE__ */ a("div", {
|
|
401
401
|
role: "tree",
|
|
402
402
|
"aria-label": Z.filesTreeAriaLabel ?? "Skill files",
|
|
403
|
-
children: /* @__PURE__ */
|
|
404
|
-
items:
|
|
403
|
+
children: /* @__PURE__ */ a(oe, {
|
|
404
|
+
items: He,
|
|
405
405
|
showFiles: !0,
|
|
406
406
|
selectedPath: J,
|
|
407
|
-
expandedPaths:
|
|
408
|
-
onExpandedPathsChange:
|
|
409
|
-
onItemClick:
|
|
410
|
-
getContextMenuItems:
|
|
407
|
+
expandedPaths: De,
|
|
408
|
+
onExpandedPathsChange: Oe,
|
|
409
|
+
onItemClick: Ue,
|
|
410
|
+
getContextMenuItems: Ge,
|
|
411
411
|
rootItemPath: ""
|
|
412
412
|
})
|
|
413
413
|
})]
|
|
414
|
-
}),
|
|
414
|
+
}), qe = /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a(_, {
|
|
415
415
|
label: Z.cancelLabel ?? "Cancel",
|
|
416
416
|
onClick: B,
|
|
417
|
-
disabled:
|
|
418
|
-
}), /* @__PURE__ */
|
|
417
|
+
disabled: C
|
|
418
|
+
}), /* @__PURE__ */ a(te, {
|
|
419
419
|
label: Z.createLabel ?? "Create",
|
|
420
|
-
iconBefore:
|
|
420
|
+
iconBefore: C ? /* @__PURE__ */ a(y, {
|
|
421
421
|
size: 16,
|
|
422
422
|
ariaLabel: ""
|
|
423
423
|
}) : void 0,
|
|
424
424
|
onClick: () => z(K),
|
|
425
|
-
disabled:
|
|
425
|
+
disabled: C
|
|
426
426
|
})] });
|
|
427
|
-
return
|
|
428
|
-
dir:
|
|
427
|
+
return ne ? /* @__PURE__ */ a("div", {
|
|
428
|
+
dir: he,
|
|
429
429
|
className: "relative flex min-h-0 flex-1 flex-col",
|
|
430
|
-
children: /* @__PURE__ */
|
|
430
|
+
children: /* @__PURE__ */ a(N, {
|
|
431
431
|
title: W,
|
|
432
432
|
onBack: V,
|
|
433
433
|
backAriaLabel: H,
|
|
434
|
-
actions:
|
|
434
|
+
actions: qe,
|
|
435
435
|
isSaving: !1,
|
|
436
436
|
labels: { savingStatusLabel: Z.savingStatusLabel },
|
|
437
|
-
styles:
|
|
438
|
-
leftContent: /* @__PURE__ */
|
|
437
|
+
styles: Ve,
|
|
438
|
+
leftContent: /* @__PURE__ */ a("div", {
|
|
439
439
|
role: "status",
|
|
440
440
|
"aria-label": Z.loadingAriaLabel ?? "Loading skill",
|
|
441
441
|
className: "flex flex-1 items-center justify-center p-8",
|
|
442
|
-
children: /* @__PURE__ */
|
|
442
|
+
children: /* @__PURE__ */ a(y, {})
|
|
443
443
|
})
|
|
444
444
|
})
|
|
445
|
-
}) :
|
|
446
|
-
dir:
|
|
445
|
+
}) : ie ? /* @__PURE__ */ a("div", {
|
|
446
|
+
dir: he,
|
|
447
447
|
className: "relative flex min-h-0 flex-1 flex-col",
|
|
448
|
-
children: /* @__PURE__ */
|
|
448
|
+
children: /* @__PURE__ */ a(N, {
|
|
449
449
|
title: W,
|
|
450
450
|
onBack: V,
|
|
451
451
|
backAriaLabel: H,
|
|
452
|
-
actions:
|
|
452
|
+
actions: qe,
|
|
453
453
|
isSaving: !1,
|
|
454
454
|
labels: { savingStatusLabel: Z.savingStatusLabel },
|
|
455
|
-
styles:
|
|
456
|
-
leftContent: /* @__PURE__ */
|
|
455
|
+
styles: Ve,
|
|
456
|
+
leftContent: /* @__PURE__ */ o("div", {
|
|
457
457
|
role: "alert",
|
|
458
458
|
className: "flex flex-col items-center gap-4 p-8",
|
|
459
|
-
children: [/* @__PURE__ */
|
|
459
|
+
children: [/* @__PURE__ */ a(f, { text: Z.loadErrorMessage ?? "Couldn't load this skill. Please try again." }), /* @__PURE__ */ a(te, {
|
|
460
460
|
label: Z.retryLabel ?? "Retry",
|
|
461
|
-
onClick:
|
|
461
|
+
onClick: pe
|
|
462
462
|
})]
|
|
463
463
|
})
|
|
464
464
|
})
|
|
465
|
-
}) : /* @__PURE__ */
|
|
466
|
-
dir:
|
|
465
|
+
}) : /* @__PURE__ */ o("div", {
|
|
466
|
+
dir: he,
|
|
467
467
|
className: "relative flex min-h-0 flex-1 flex-col",
|
|
468
|
-
style:
|
|
469
|
-
...
|
|
468
|
+
style: Be,
|
|
469
|
+
...Fe,
|
|
470
470
|
children: [
|
|
471
|
-
/* @__PURE__ */
|
|
472
|
-
isVisible:
|
|
471
|
+
/* @__PURE__ */ a(le, {
|
|
472
|
+
isVisible: Pe && !X,
|
|
473
473
|
labels: G
|
|
474
474
|
}),
|
|
475
|
-
/* @__PURE__ */
|
|
475
|
+
/* @__PURE__ */ a(N, {
|
|
476
476
|
title: W,
|
|
477
477
|
onBack: V,
|
|
478
478
|
backAriaLabel: H,
|
|
479
|
-
actions:
|
|
480
|
-
isSaving:
|
|
479
|
+
actions: qe,
|
|
480
|
+
isSaving: C,
|
|
481
481
|
labels: { savingStatusLabel: Z.savingStatusLabel },
|
|
482
|
-
styles:
|
|
483
|
-
leftContent: /* @__PURE__ */
|
|
482
|
+
styles: Ve,
|
|
483
|
+
leftContent: /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a("div", {
|
|
484
484
|
className: "px-4 py-4 desktop:hidden",
|
|
485
|
-
children: /* @__PURE__ */
|
|
485
|
+
children: /* @__PURE__ */ a(s, {
|
|
486
486
|
title: Z.editingFileLabel ?? "Editing file",
|
|
487
487
|
description: $?.name ?? "SKILL.md",
|
|
488
|
-
expanded:
|
|
489
|
-
onToggle:
|
|
488
|
+
expanded: Me,
|
|
489
|
+
onToggle: Ne,
|
|
490
490
|
ariaLabel: Z.editingFileLabel ?? "Editing file",
|
|
491
|
-
children:
|
|
491
|
+
children: Ke
|
|
492
492
|
})
|
|
493
|
-
}), /* @__PURE__ */
|
|
493
|
+
}), /* @__PURE__ */ a("div", {
|
|
494
494
|
className: "hidden px-8 py-6 desktop:block",
|
|
495
|
-
children:
|
|
495
|
+
children: Ke
|
|
496
496
|
})] }),
|
|
497
|
-
rightContent: /* @__PURE__ */
|
|
497
|
+
rightContent: /* @__PURE__ */ o("div", {
|
|
498
498
|
className: "flex flex-1 flex-col gap-4 px-4 py-6 desktop:gap-5 desktop:px-8",
|
|
499
499
|
children: [
|
|
500
|
-
|
|
500
|
+
A != null && /* @__PURE__ */ a("div", {
|
|
501
501
|
role: "alert",
|
|
502
|
-
children: /* @__PURE__ */
|
|
502
|
+
children: /* @__PURE__ */ a(f, { text: A })
|
|
503
503
|
}),
|
|
504
|
-
|
|
504
|
+
j != null && /* @__PURE__ */ o("div", {
|
|
505
505
|
role: "alert",
|
|
506
506
|
className: "flex items-center gap-2",
|
|
507
|
-
children: [/* @__PURE__ */
|
|
507
|
+
children: [/* @__PURE__ */ a(f, { text: j.message }), /* @__PURE__ */ a(m, {
|
|
508
508
|
label: Z.reloadLatestLabel ?? "Reload latest",
|
|
509
|
-
onClick:
|
|
509
|
+
onClick: M
|
|
510
510
|
})]
|
|
511
511
|
}),
|
|
512
|
-
/* @__PURE__ */
|
|
513
|
-
className:
|
|
514
|
-
children: J === "SKILL.md" ?
|
|
512
|
+
/* @__PURE__ */ a("h2", {
|
|
513
|
+
className: r(U.title, Le),
|
|
514
|
+
children: J === "SKILL.md" ? F : Z.selectedFileHeading?.($?.name ?? J) ?? $?.name ?? J
|
|
515
515
|
}),
|
|
516
|
-
J === "SKILL.md" ? /* @__PURE__ */
|
|
517
|
-
/* @__PURE__ */
|
|
516
|
+
J === "SKILL.md" ? /* @__PURE__ */ o(i, { children: [
|
|
517
|
+
/* @__PURE__ */ a(g, {
|
|
518
518
|
labelProps: {
|
|
519
519
|
label: Z.nameLabel ?? "Name",
|
|
520
520
|
required: !0
|
|
@@ -525,12 +525,12 @@ var j = {
|
|
|
525
525
|
name: e ?? ""
|
|
526
526
|
})),
|
|
527
527
|
placeholder: Z.namePlaceholder ?? "good-morning-breakfast",
|
|
528
|
-
caption:
|
|
529
|
-
error:
|
|
530
|
-
invalid: !!
|
|
531
|
-
disabled:
|
|
528
|
+
caption: E?.name ? void 0 : Z.nameCaption ?? "Lowercase letters and hyphens only, no spaces. We'll reformat automatically if needed.",
|
|
529
|
+
error: E?.name,
|
|
530
|
+
invalid: !!E?.name,
|
|
531
|
+
disabled: P
|
|
532
532
|
}),
|
|
533
|
-
/* @__PURE__ */
|
|
533
|
+
/* @__PURE__ */ a(b, {
|
|
534
534
|
labelProps: {
|
|
535
535
|
label: Z.descriptionLabel ?? "Description",
|
|
536
536
|
required: !0
|
|
@@ -541,52 +541,53 @@ var j = {
|
|
|
541
541
|
...t,
|
|
542
542
|
description: e
|
|
543
543
|
})),
|
|
544
|
-
error:
|
|
545
|
-
invalid: !!
|
|
544
|
+
error: E?.description,
|
|
545
|
+
invalid: !!E?.description
|
|
546
546
|
}),
|
|
547
|
-
/* @__PURE__ */
|
|
547
|
+
/* @__PURE__ */ o("div", {
|
|
548
548
|
className: "flex flex-1 flex-col gap-2",
|
|
549
549
|
children: [
|
|
550
|
-
/* @__PURE__ */
|
|
550
|
+
/* @__PURE__ */ o("span", {
|
|
551
551
|
className: "flex items-center gap-0.5",
|
|
552
|
-
children: [/* @__PURE__ */
|
|
553
|
-
className:
|
|
552
|
+
children: [/* @__PURE__ */ a("span", {
|
|
553
|
+
className: r(U.helperText, Re),
|
|
554
554
|
children: Z.instructionsLabel ?? "Instructions"
|
|
555
|
-
}), /* @__PURE__ */
|
|
555
|
+
}), /* @__PURE__ */ a("span", {
|
|
556
556
|
className: "dial-tiny-text text-error",
|
|
557
557
|
children: "*"
|
|
558
558
|
})]
|
|
559
559
|
}),
|
|
560
|
-
/* @__PURE__ */
|
|
561
|
-
fallback: /* @__PURE__ */
|
|
562
|
-
children: /* @__PURE__ */
|
|
560
|
+
/* @__PURE__ */ a(ae, {
|
|
561
|
+
fallback: /* @__PURE__ */ a(y, { ariaLabel: Z.instructionsLoadingAriaLabel ?? "Loading" }),
|
|
562
|
+
children: /* @__PURE__ */ a(fe, {
|
|
563
563
|
value: K.instructions,
|
|
564
564
|
onChange: (e) => q((t) => ({
|
|
565
565
|
...t,
|
|
566
566
|
instructions: e
|
|
567
567
|
})),
|
|
568
|
-
|
|
568
|
+
className: e,
|
|
569
|
+
theme: ge,
|
|
569
570
|
placeholder: Z.instructionsPlaceholder ?? "Write the skill instructions in Markdown"
|
|
570
571
|
})
|
|
571
572
|
}),
|
|
572
|
-
|
|
573
|
+
E?.instructions != null && /* @__PURE__ */ a(f, { text: E.instructions })
|
|
573
574
|
]
|
|
574
575
|
})
|
|
575
|
-
] }) : $?.kind ===
|
|
576
|
+
] }) : $?.kind === I.File && (ue ?? /* @__PURE__ */ a(c, { text: Z.supportingFileNote ?? "This supporting file is included in the skill package as-is. Remove it from the Files panel to replace its content." }))
|
|
576
577
|
]
|
|
577
578
|
})
|
|
578
579
|
}),
|
|
579
|
-
/* @__PURE__ */
|
|
580
|
+
/* @__PURE__ */ a(de, {
|
|
580
581
|
isOpen: X,
|
|
581
582
|
onClose: () => {
|
|
582
|
-
|
|
583
|
+
ke(!1), je(void 0);
|
|
583
584
|
},
|
|
584
|
-
fileActions:
|
|
585
|
-
initialFiles:
|
|
585
|
+
fileActions: R,
|
|
586
|
+
initialFiles: Ae,
|
|
586
587
|
labels: G
|
|
587
588
|
})
|
|
588
589
|
]
|
|
589
590
|
});
|
|
590
591
|
};
|
|
591
592
|
//#endregion
|
|
592
|
-
export { W as SkillEditor,
|
|
593
|
+
export { W as SkillEditor, ue as SkillFileCandidateKind, I as SkillFileNodeKind, z as SkillFileValidationStatus };
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@epam/ai-dial-skill-editor",
|
|
3
3
|
"description": "Host-agnostic form for authoring a DIAL Skill, with an inline supporting-file tree",
|
|
4
|
-
"version": "1.1.0-dev.
|
|
4
|
+
"version": "1.1.0-dev.418",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "./index.js",
|
|
@@ -16,8 +16,8 @@
|
|
|
16
16
|
}
|
|
17
17
|
},
|
|
18
18
|
"peerDependencies": {
|
|
19
|
-
"@epam/ai-dial-chat-shared": "1.1.0-dev.
|
|
20
|
-
"@epam/ai-dial-editor-builder": "1.1.0-dev.
|
|
19
|
+
"@epam/ai-dial-chat-shared": "1.1.0-dev.418",
|
|
20
|
+
"@epam/ai-dial-editor-builder": "1.1.0-dev.418",
|
|
21
21
|
"@epam/ai-dial-ui-kit": "^0.14.0-dev.30",
|
|
22
22
|
"@epam/ai-dial-react-file-manager": "^0.2.0-dev.10",
|
|
23
23
|
"@tabler/icons-react": "^3.0.0",
|