@epam/ai-dial-skill-editor 1.1.0-dev.459 → 1.1.0-dev.465

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