@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.
@@ -1 +1 @@
1
- {"version":3,"file":"SkillEditor.d.ts","sourceRoot":"","sources":["../../../src/components/SkillEditor/SkillEditor.tsx"],"names":[],"mappings":"AA2BA,OAAO,0CAA0C,CAAC;AAClD,OAAO,0CAA0C,CAAC;AAClD,OAAO,EAEL,EAAE,EAQH,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EACV,gBAAgB,EAGjB,MAAM,iCAAiC,CAAC;AAqBzC,qFAAqF;AACrF,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAge5C,CAAC"}
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 { buildCssVars as e, formatFileSize as t, mergeClasses as n } from "@epam/ai-dial-chat-shared";
2
- import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
3
- import { Accordion as o, CaptionText as s, DIAL_ICON_SIZE as ee, DIAL_KIT_ICON_STROKE as c, EditorThemes as l, ErrorText as u, FileDropzone as d, GhostButton as f, GhostIconButton as p, Input as m, NeutralButton as h, Popup as g, PopupSize as te, PrimaryButton as ne, Spinner as _, Textarea as v } from "@epam/ai-dial-ui-kit";
4
- import { IconArrowNarrowLeft as y, IconFileText as re, IconPlus as b, IconTrashX as ie, IconUpload as x } from "@tabler/icons-react";
5
- import { Suspense as ae, lazy as S, useCallback as C, useEffect as w, useId as T, useMemo as E, useRef as D, useState as O } from "react";
6
- import { DialFileNodeType as k, DialFoldersTree as oe } from "@epam/ai-dial-react-file-manager";
7
- import { LazyMarkdownEditor as A } from "@epam/ai-dial-ui-kit/editors";
8
- var j = {
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
- }, M = ({ title: t, onBack: r, backAriaLabel: o = "Back", actions: s, leftContent: l, rightContent: u, isSaving: d = !1, labels: f, styles: m, dir: h }) => {
13
- let g = T(), te = d ? f?.savingStatusLabel ?? "Saving" : "";
14
- return /* @__PURE__ */ a("div", {
15
- dir: h,
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: e({
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__ */ i("span", {
22
+ /* @__PURE__ */ a("span", {
23
23
  role: "status",
24
24
  "aria-live": "polite",
25
25
  className: "sr-only",
26
- id: g,
27
- children: te
26
+ id: _,
27
+ children: v
28
28
  }),
29
- /* @__PURE__ */ a("div", {
30
- className: n("flex items-center justify-between gap-2 border-b px-4 py-2 desktop:px-8 desktop:pb-3 desktop:pt-3", j.headerBorder),
31
- children: [/* @__PURE__ */ a("div", {
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__ */ i(p, {
34
- icon: /* @__PURE__ */ i(y, {
35
- size: ee.LG,
36
- stroke: c,
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": o,
41
- onClick: r
42
- }), /* @__PURE__ */ i("h1", {
40
+ "aria-label": i,
41
+ onClick: n
42
+ }), /* @__PURE__ */ a("h1", {
43
43
  className: "dial-h2-text min-w-0 truncate",
44
- children: t
44
+ children: e
45
45
  })]
46
- }), s != null && /* @__PURE__ */ i("div", {
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__ */ a("div", {
51
+ /* @__PURE__ */ o("div", {
52
52
  className: "flex flex-1 flex-col overflow-y-auto desktop:flex-row desktop:overflow-hidden",
53
- children: [/* @__PURE__ */ i("div", {
54
- className: n(u == null ? "desktop:flex-1" : "desktop:w-[360px] desktop:shrink-0 desktop:overflow-y-auto desktop:border-e", "desktop:overflow-y-auto", u == null ? void 0 : j.sidebarBorder),
55
- children: l
56
- }), u != null && /* @__PURE__ */ i("div", {
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: u
58
+ children: d
59
59
  })]
60
60
  }),
61
- s != null && /* @__PURE__ */ i("div", {
62
- className: n("flex shrink-0 flex-row-reverse items-center gap-2 border-t px-4 py-2 desktop:hidden [&>*]:flex-1", j.footerBorder),
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
- }, N = (e) => !!e.dataTransfer?.types.includes("Files"), se = (e) => {
68
- let [t, n] = O(!1), r = D(0);
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: C((e) => {
73
- N(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: C((e) => {
76
- N(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: C((e) => {
79
- N(e) && e.preventDefault();
78
+ onDragOver: w((e) => {
79
+ P(e) && e.preventDefault();
80
80
  }, []),
81
- onDrop: C((t) => {
82
- if (!N(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
- }, P = "SKILL.md", F = /* @__PURE__ */ function(e) {
89
+ }, F = "SKILL.md", I = /* @__PURE__ */ function(e) {
90
90
  return e.File = "file", e.Folder = "folder", e;
91
- }({}), I = (e) => {
91
+ }({}), L = (e) => {
92
92
  let t = e.lastIndexOf("/");
93
93
  return t === -1 ? null : e.slice(0, t);
94
- }, L = (e) => {
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: L(e),
104
- nodeType: k.FOLDER,
105
- parentPath: I(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 === F.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: k.ITEM,
120
- parentPath: I(r.path),
121
- folderId: I(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 = I(t.path);
126
- for (; e != null;) n(e), e = I(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 r = t ?? {};
141
- return /* @__PURE__ */ i("div", {
140
+ let n = t ?? {};
141
+ return /* @__PURE__ */ a("div", {
142
142
  role: "status",
143
143
  "aria-live": "polite",
144
- className: n("pointer-events-none absolute inset-0 z-[100] flex items-center justify-center backdrop-blur-sm"),
145
- children: /* @__PURE__ */ a("div", {
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__ */ i(x, {
148
+ /* @__PURE__ */ a(ie, {
149
149
  size: 100,
150
150
  className: "text-accent-primary",
151
151
  "aria-hidden": !0,
152
- stroke: c
152
+ stroke: u
153
153
  }),
154
- /* @__PURE__ */ i("span", {
154
+ /* @__PURE__ */ a("span", {
155
155
  className: "dial-h3-text mt-5",
156
- children: r.dropOverlayTitle ?? "Upload files"
156
+ children: n.dropOverlayTitle ?? "Upload files"
157
157
  }),
158
- /* @__PURE__ */ i("span", {
158
+ /* @__PURE__ */ a("span", {
159
159
  className: "dial-small-text mt-4",
160
- children: r.dropOverlaySubtitle ?? "Drop files here to add them to this skill"
160
+ children: n.dropOverlaySubtitle ?? "Drop files here to add them to this skill"
161
161
  })
162
162
  ]
163
163
  })
164
164
  });
165
- }, R = /* @__PURE__ */ function(e) {
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}`, ue = ({ isOpen: e, onClose: n, fileActions: o, initialFiles: s, labels: ee }) => {
170
- let l = ee ?? {}, [m, h] = O([]), [v, y] = O(/* @__PURE__ */ new Map()), [b, x] = O([]), [ae, S] = O(!1), [C, E] = O(), [D, k] = O(!1), oe = T(), A = (e) => {
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
- E(void 0), h((e) => [...e, ...t]);
176
+ w(void 0), g((e) => [...e, ...t]);
177
177
  }, j = (e) => {
178
- h((t) => t.filter((t) => t.id !== e));
178
+ g((t) => t.filter((t) => t.id !== e));
179
179
  };
180
- w(() => {
181
- e && (h((s ?? []).map((e) => ({
180
+ T(() => {
181
+ e && (g((s ?? []).map((e) => ({
182
182
  id: H(),
183
183
  file: e,
184
184
  path: B(e)
185
- }))), y(/* @__PURE__ */ new Map()), x([]), E(void 0));
186
- }, [e]), w(() => {
185
+ }))), b(/* @__PURE__ */ new Map()), S([]), w(void 0));
186
+ }, [e]), T(() => {
187
187
  if (!e) return;
188
188
  let t = !1;
189
- if (m.length === 0) {
190
- y(/* @__PURE__ */ new Map()), x([]);
189
+ if (d.length === 0) {
190
+ b(/* @__PURE__ */ new Map()), S([]);
191
191
  return;
192
192
  }
193
- return S(!0), o.validateBatch(m).then(({ results: e, batchErrors: n }) => {
194
- t || (y(new Map(e.map((e) => [e.candidateId, e]))), x(n.map((e) => e.message)));
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 || S(!1);
196
+ t || ae(!1);
197
197
  }), () => {
198
198
  t = !0;
199
199
  };
200
- }, [m, e]);
201
- let M = m.some((e) => v.get(e.id)?.status === z.Invalid), N = m.length > 0 && m.every((e) => v.get(e.id)?.status === z.Invalid), se = m.length > 0 && !M && b.length === 0 && !ae && !D, P = async () => {
202
- k(!0), E(void 0);
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: t } = await o.validateBatch(m), r = new Map(e.map((e) => [e.candidateId, e]));
205
- if (y(r), x(t.map((e) => e.message)), m.some((e) => r.get(e.id)?.status === z.Invalid) || t.length > 0) return;
206
- let i = await o.commitBatch(m);
207
- if (i.error) {
208
- E(i.error);
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
- n();
211
+ t();
212
212
  } finally {
213
- k(!1);
213
+ O(!1);
214
214
  }
215
215
  };
216
- return /* @__PURE__ */ i(g, {
216
+ return /* @__PURE__ */ a(v, {
217
217
  open: e,
218
218
  header: l.uploadDialogTitle ?? "Upload files from device",
219
- size: te.Sm,
219
+ size: ee.Sm,
220
220
  closeAriaLabel: l.uploadDialogCloseAriaLabel ?? "Close",
221
- onClose: n,
222
- footer: /* @__PURE__ */ a("div", {
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__ */ i(f, {
224
+ children: [/* @__PURE__ */ a(m, {
225
225
  label: l.uploadCancelLabel ?? "Cancel",
226
- onClick: n
227
- }), /* @__PURE__ */ i(ne, {
226
+ onClick: t
227
+ }), /* @__PURE__ */ a(te, {
228
228
  label: l.uploadConfirmLabel ?? "Add",
229
- iconBefore: D ? /* @__PURE__ */ i(_, {
229
+ iconBefore: D ? /* @__PURE__ */ a(y, {
230
230
  size: 16,
231
231
  ariaLabel: ""
232
232
  }) : void 0,
233
- onClick: () => void P(),
234
- disabled: !se
233
+ onClick: () => void se(),
234
+ disabled: !P
235
235
  })]
236
236
  }),
237
- children: /* @__PURE__ */ a("div", {
237
+ children: /* @__PURE__ */ o("div", {
238
238
  className: "flex flex-col gap-4 px-6 py-4",
239
239
  children: [
240
- /* @__PURE__ */ i(d, {
241
- label: /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i("span", {
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__ */ i("span", {
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: A
251
+ onChange: oe
252
252
  }),
253
- /* @__PURE__ */ i("span", {
253
+ /* @__PURE__ */ a("span", {
254
254
  role: "status",
255
255
  "aria-live": "polite",
256
256
  className: "sr-only",
257
- id: oe,
258
- children: b.map((e) => `${l.uploadBatchErrorAriaPrefix ?? "Upload error: "}${e}`).join(" ")
257
+ id: A,
258
+ children: x.map((e) => `${l.uploadBatchErrorAriaPrefix ?? "Upload error: "}${e}`).join(" ")
259
259
  }),
260
- b.map((e) => /* @__PURE__ */ i(u, { text: e }, e)),
261
- m.length > 0 && /* @__PURE__ */ i("ul", {
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: m.map((e) => {
264
- let n = v.get(e.id), r = n?.kind === R.Manifest, o = n?.status === z.Invalid;
265
- return /* @__PURE__ */ a("li", {
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__ */ i(re, {
268
+ /* @__PURE__ */ a(ne, {
269
269
  size: 20,
270
270
  "aria-hidden": !0,
271
- stroke: c
271
+ stroke: u
272
272
  }),
273
- /* @__PURE__ */ a("div", {
273
+ /* @__PURE__ */ o("div", {
274
274
  className: "flex min-w-0 flex-1 flex-col",
275
275
  children: [
276
- /* @__PURE__ */ i("span", {
276
+ /* @__PURE__ */ a("span", {
277
277
  className: "dial-small-text truncate",
278
278
  children: e.path
279
279
  }),
280
- /* @__PURE__ */ i("span", {
280
+ /* @__PURE__ */ a("span", {
281
281
  className: "dial-tiny-text text-secondary",
282
- children: t(e.file.size)
282
+ children: n(e.file.size)
283
283
  }),
284
- o && n?.error && /* @__PURE__ */ i(u, { text: n.error }),
285
- r && !o && /* @__PURE__ */ i("span", {
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__ */ i(p, {
292
- icon: /* @__PURE__ */ i(ie, {
291
+ /* @__PURE__ */ a(h, {
292
+ icon: /* @__PURE__ */ a(re, {
293
293
  size: 16,
294
294
  "aria-hidden": !0,
295
- stroke: c
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__ */ i(u, { text: C })
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
- }, de = S(async () => {
312
- let { MarkdownEditor: e } = await A();
311
+ }, fe = C(async () => {
312
+ let { MarkdownEditor: e } = await j();
313
313
  return { default: e };
314
- }), W = ({ initialValues: t, files: d, selectedPath: p, onSelectedPathChange: g, expandedPaths: te, onExpandedPathsChange: y, isLoading: re = !1, hasLoadError: x = !1, isSubmitting: S = !1, errors: T, submitError: k, conflict: A, onReloadLatest: j, isNameReadOnly: N = !1, onDirtyChange: I, fileActions: L, supportingFileContent: R, onSubmit: z, onCancel: B, onBack: V, backAriaLabel: H, title: W, onRetry: fe, labels: G, styles: pe, dir: me, instructionsEditorTheme: he = l.light }) => {
315
- let [K, q] = O({
316
- name: t?.name ?? "",
317
- description: t?.description ?? "",
318
- instructions: t?.instructions ?? ""
319
- }), ge = D(t), _e = ge.current !== t, ve = D(d);
320
- w(() => {
321
- ge.current = t, q({
322
- name: t?.name ?? "",
323
- description: t?.description ?? "",
324
- instructions: t?.instructions ?? ""
325
- }), ve.current = d;
326
- }, [t]);
327
- let ye = (e) => JSON.stringify([...e].sort((e, t) => e.path.localeCompare(t.path))), be = D(!1);
328
- w(() => {
329
- if (_e) return;
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: t?.name ?? "",
332
- description: t?.description ?? "",
333
- instructions: t?.instructions ?? ""
334
- }, n = JSON.stringify(K) !== JSON.stringify(e) || ye(d) !== ye(ve.current);
335
- n !== be.current && (be.current = n, I?.(n));
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
- d,
339
- t,
340
- _e,
341
- I
338
+ p,
339
+ n,
340
+ ve,
341
+ L
342
342
  ]);
343
- let [xe, Se] = O(P), J = p ?? xe, Y = C((e) => {
344
- Se(e), g?.(e);
345
- }, [g]), [Ce, we] = O([]), Te = te ?? Ce, Ee = E(() => new Set(Te), [Te]), De = C((e) => {
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
- we(t), y?.(t);
348
- }, [y]), [X, Oe] = O(!1), [ke, Ae] = O(), [je, Me] = O(!1), { isDragActive: Ne, dropZoneHandlers: Pe } = se(C((e) => {
349
- X || (Ae(e), Oe(!0));
350
- }, [X])), Z = G ?? {}, Q = pe?.colors, Fe = pe?.typography ?? {}, Ie = Fe.titleClassName ?? "dial-body-semi-text", Le = Fe.helperTextClassName ?? "dial-tiny-semi-text", Re = Fe.removeIconClassName ?? "text-secondary", ze = e({
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
- }), Be = Q?.border ? { colors: {
353
+ }), Ve = Q?.border ? { colors: {
354
354
  headerBorderColor: Q.border,
355
355
  sidebarBorderColor: Q.border
356
- } } : void 0, Ve = E(() => ce([{
357
- path: P,
358
- name: P,
359
- kind: F.File
360
- }, ...d]), [d]), $ = E(() => d.find((e) => e.path === J), [d, J]), He = C((e) => {
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]), Ue = C((e) => {
363
- L.onRemoveNode(e), J === e && Y(P);
362
+ }, [Y]), We = w((e) => {
363
+ R.onRemoveNode(e), J === e && Y(F);
364
364
  }, [
365
- L,
365
+ R,
366
366
  J,
367
367
  Y
368
- ]), We = C((e) => e.path === "SKILL.md" ? [] : [{
368
+ ]), Ge = w((e) => e.path === "SKILL.md" ? [] : [{
369
369
  key: "remove",
370
370
  label: Z.removeLabel ?? "Remove",
371
- icon: /* @__PURE__ */ i(ie, {
372
- size: ee.SM,
373
- className: Re,
371
+ icon: /* @__PURE__ */ a(re, {
372
+ size: l.SM,
373
+ className: ze,
374
374
  "aria-hidden": !0,
375
- stroke: c
375
+ stroke: u
376
376
  }),
377
- onClick: () => Ue(e.path)
377
+ onClick: () => We(e.path)
378
378
  }], [
379
379
  Z.removeLabel,
380
- Re,
381
- Ue
382
- ]), Ge = /* @__PURE__ */ a("div", {
380
+ ze,
381
+ We
382
+ ]), Ke = /* @__PURE__ */ o("div", {
383
383
  className: "flex flex-col gap-2 desktop:gap-5",
384
- children: [/* @__PURE__ */ a("div", {
384
+ children: [/* @__PURE__ */ o("div", {
385
385
  className: "flex items-center justify-between",
386
- children: [/* @__PURE__ */ i("span", {
387
- className: n(U.title, Ie),
386
+ children: [/* @__PURE__ */ a("span", {
387
+ className: r(U.title, Le),
388
388
  children: Z.filesHeading ?? "Files"
389
- }), /* @__PURE__ */ i(h, {
389
+ }), /* @__PURE__ */ a(_, {
390
390
  label: Z.addUploadLabel ?? "Upload from device",
391
- iconBefore: /* @__PURE__ */ i(b, {
391
+ iconBefore: /* @__PURE__ */ a(S, {
392
392
  size: 16,
393
393
  "aria-hidden": !0,
394
- stroke: c
394
+ stroke: u
395
395
  }),
396
396
  onClick: () => {
397
- Ae(void 0), Oe(!0);
397
+ je(void 0), ke(!0);
398
398
  }
399
399
  })]
400
- }), /* @__PURE__ */ i("div", {
400
+ }), /* @__PURE__ */ a("div", {
401
401
  role: "tree",
402
402
  "aria-label": Z.filesTreeAriaLabel ?? "Skill files",
403
- children: /* @__PURE__ */ i(oe, {
404
- items: Ve,
403
+ children: /* @__PURE__ */ a(oe, {
404
+ items: He,
405
405
  showFiles: !0,
406
406
  selectedPath: J,
407
- expandedPaths: Ee,
408
- onExpandedPathsChange: De,
409
- onItemClick: He,
410
- getContextMenuItems: We,
407
+ expandedPaths: De,
408
+ onExpandedPathsChange: Oe,
409
+ onItemClick: Ue,
410
+ getContextMenuItems: Ge,
411
411
  rootItemPath: ""
412
412
  })
413
413
  })]
414
- }), Ke = /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i(h, {
414
+ }), qe = /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a(_, {
415
415
  label: Z.cancelLabel ?? "Cancel",
416
416
  onClick: B,
417
- disabled: S
418
- }), /* @__PURE__ */ i(ne, {
417
+ disabled: C
418
+ }), /* @__PURE__ */ a(te, {
419
419
  label: Z.createLabel ?? "Create",
420
- iconBefore: S ? /* @__PURE__ */ i(_, {
420
+ iconBefore: C ? /* @__PURE__ */ a(y, {
421
421
  size: 16,
422
422
  ariaLabel: ""
423
423
  }) : void 0,
424
424
  onClick: () => z(K),
425
- disabled: S
425
+ disabled: C
426
426
  })] });
427
- return re ? /* @__PURE__ */ i("div", {
428
- dir: me,
427
+ return ne ? /* @__PURE__ */ a("div", {
428
+ dir: he,
429
429
  className: "relative flex min-h-0 flex-1 flex-col",
430
- children: /* @__PURE__ */ i(M, {
430
+ children: /* @__PURE__ */ a(N, {
431
431
  title: W,
432
432
  onBack: V,
433
433
  backAriaLabel: H,
434
- actions: Ke,
434
+ actions: qe,
435
435
  isSaving: !1,
436
436
  labels: { savingStatusLabel: Z.savingStatusLabel },
437
- styles: Be,
438
- leftContent: /* @__PURE__ */ i("div", {
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__ */ i(_, {})
442
+ children: /* @__PURE__ */ a(y, {})
443
443
  })
444
444
  })
445
- }) : x ? /* @__PURE__ */ i("div", {
446
- dir: me,
445
+ }) : ie ? /* @__PURE__ */ a("div", {
446
+ dir: he,
447
447
  className: "relative flex min-h-0 flex-1 flex-col",
448
- children: /* @__PURE__ */ i(M, {
448
+ children: /* @__PURE__ */ a(N, {
449
449
  title: W,
450
450
  onBack: V,
451
451
  backAriaLabel: H,
452
- actions: Ke,
452
+ actions: qe,
453
453
  isSaving: !1,
454
454
  labels: { savingStatusLabel: Z.savingStatusLabel },
455
- styles: Be,
456
- leftContent: /* @__PURE__ */ a("div", {
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__ */ i(u, { text: Z.loadErrorMessage ?? "Couldn't load this skill. Please try again." }), /* @__PURE__ */ i(ne, {
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: fe
461
+ onClick: pe
462
462
  })]
463
463
  })
464
464
  })
465
- }) : /* @__PURE__ */ a("div", {
466
- dir: me,
465
+ }) : /* @__PURE__ */ o("div", {
466
+ dir: he,
467
467
  className: "relative flex min-h-0 flex-1 flex-col",
468
- style: ze,
469
- ...Pe,
468
+ style: Be,
469
+ ...Fe,
470
470
  children: [
471
- /* @__PURE__ */ i(le, {
472
- isVisible: Ne && !X,
471
+ /* @__PURE__ */ a(le, {
472
+ isVisible: Pe && !X,
473
473
  labels: G
474
474
  }),
475
- /* @__PURE__ */ i(M, {
475
+ /* @__PURE__ */ a(N, {
476
476
  title: W,
477
477
  onBack: V,
478
478
  backAriaLabel: H,
479
- actions: Ke,
480
- isSaving: S,
479
+ actions: qe,
480
+ isSaving: C,
481
481
  labels: { savingStatusLabel: Z.savingStatusLabel },
482
- styles: Be,
483
- leftContent: /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i("div", {
482
+ styles: Ve,
483
+ leftContent: /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a("div", {
484
484
  className: "px-4 py-4 desktop:hidden",
485
- children: /* @__PURE__ */ i(o, {
485
+ children: /* @__PURE__ */ a(s, {
486
486
  title: Z.editingFileLabel ?? "Editing file",
487
487
  description: $?.name ?? "SKILL.md",
488
- expanded: je,
489
- onToggle: Me,
488
+ expanded: Me,
489
+ onToggle: Ne,
490
490
  ariaLabel: Z.editingFileLabel ?? "Editing file",
491
- children: Ge
491
+ children: Ke
492
492
  })
493
- }), /* @__PURE__ */ i("div", {
493
+ }), /* @__PURE__ */ a("div", {
494
494
  className: "hidden px-8 py-6 desktop:block",
495
- children: Ge
495
+ children: Ke
496
496
  })] }),
497
- rightContent: /* @__PURE__ */ a("div", {
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
- k != null && /* @__PURE__ */ i("div", {
500
+ A != null && /* @__PURE__ */ a("div", {
501
501
  role: "alert",
502
- children: /* @__PURE__ */ i(u, { text: k })
502
+ children: /* @__PURE__ */ a(f, { text: A })
503
503
  }),
504
- A != null && /* @__PURE__ */ a("div", {
504
+ j != null && /* @__PURE__ */ o("div", {
505
505
  role: "alert",
506
506
  className: "flex items-center gap-2",
507
- children: [/* @__PURE__ */ i(u, { text: A.message }), /* @__PURE__ */ i(f, {
507
+ children: [/* @__PURE__ */ a(f, { text: j.message }), /* @__PURE__ */ a(m, {
508
508
  label: Z.reloadLatestLabel ?? "Reload latest",
509
- onClick: j
509
+ onClick: M
510
510
  })]
511
511
  }),
512
- /* @__PURE__ */ i("h2", {
513
- className: n(U.title, Ie),
514
- children: J === "SKILL.md" ? P : Z.selectedFileHeading?.($?.name ?? J) ?? $?.name ?? J
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__ */ a(r, { children: [
517
- /* @__PURE__ */ i(m, {
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: T?.name ? void 0 : Z.nameCaption ?? "Lowercase letters and hyphens only, no spaces. We'll reformat automatically if needed.",
529
- error: T?.name,
530
- invalid: !!T?.name,
531
- disabled: N
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__ */ i(v, {
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: T?.description,
545
- invalid: !!T?.description
544
+ error: E?.description,
545
+ invalid: !!E?.description
546
546
  }),
547
- /* @__PURE__ */ a("div", {
547
+ /* @__PURE__ */ o("div", {
548
548
  className: "flex flex-1 flex-col gap-2",
549
549
  children: [
550
- /* @__PURE__ */ a("span", {
550
+ /* @__PURE__ */ o("span", {
551
551
  className: "flex items-center gap-0.5",
552
- children: [/* @__PURE__ */ i("span", {
553
- className: n(U.helperText, Le),
552
+ children: [/* @__PURE__ */ a("span", {
553
+ className: r(U.helperText, Re),
554
554
  children: Z.instructionsLabel ?? "Instructions"
555
- }), /* @__PURE__ */ i("span", {
555
+ }), /* @__PURE__ */ a("span", {
556
556
  className: "dial-tiny-text text-error",
557
557
  children: "*"
558
558
  })]
559
559
  }),
560
- /* @__PURE__ */ i(ae, {
561
- fallback: /* @__PURE__ */ i(_, { ariaLabel: Z.instructionsLoadingAriaLabel ?? "Loading" }),
562
- children: /* @__PURE__ */ i(de, {
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
- theme: he,
568
+ className: e,
569
+ theme: ge,
569
570
  placeholder: Z.instructionsPlaceholder ?? "Write the skill instructions in Markdown"
570
571
  })
571
572
  }),
572
- T?.instructions != null && /* @__PURE__ */ i(u, { text: T.instructions })
573
+ E?.instructions != null && /* @__PURE__ */ a(f, { text: E.instructions })
573
574
  ]
574
575
  })
575
- ] }) : $?.kind === F.File && (R ?? /* @__PURE__ */ i(s, { 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
+ ] }) : $?.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__ */ i(ue, {
580
+ /* @__PURE__ */ a(de, {
580
581
  isOpen: X,
581
582
  onClose: () => {
582
- Oe(!1), Ae(void 0);
583
+ ke(!1), je(void 0);
583
584
  },
584
- fileActions: L,
585
- initialFiles: ke,
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, R as SkillFileCandidateKind, F as SkillFileNodeKind, z as SkillFileValidationStatus };
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.411",
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.411",
20
- "@epam/ai-dial-editor-builder": "1.1.0-dev.411",
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",