@epam/ai-dial-skills 1.3.0-dev.141 → 1.3.0-dev.142
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":"SkillSelectorField.d.ts","sourceRoot":"","sources":["../../../src/components/SkillSelectorField/SkillSelectorField.tsx"],"names":[],"mappings":"AAYA,OAAO,EAA4C,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAE1E,OAAO,KAAK,EACV,uBAAuB,EAExB,MAAM,yCAAyC,CAAC;
|
|
1
|
+
{"version":3,"file":"SkillSelectorField.d.ts","sourceRoot":"","sources":["../../../src/components/SkillSelectorField/SkillSelectorField.tsx"],"names":[],"mappings":"AAYA,OAAO,EAA4C,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAE1E,OAAO,KAAK,EACV,uBAAuB,EAExB,MAAM,yCAAyC,CAAC;AAQjD,kFAAkF;AAClF,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CAoI1D,CAAC"}
|
package/index.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { DeploymentIcon as e, buildCssVars as t, isSkillSelectionUnsupported as n, mergeClasses as r } from "@epam/ai-dial-chat-shared";
|
|
2
2
|
import { BASE_ICON_SIZE as i, Button as a, ButtonAppearance as o, ButtonVariant as s, DIAL_ICON_SIZE as c, DIAL_KIT_ICON_STROKE as l, ElementSize as u, FileDropzone as d, GhostButton as f, Highlight as p, InteractiveTooltip as m, InteractiveTooltipTrigger as h, Popup as g, PopupSize as _, Select as v, Spinner as y, ToggleIconButton as b, Tooltip as x, TooltipPlacement as S } from "@epam/ai-dial-ui-kit";
|
|
3
3
|
import { Suspense as C, useCallback as w, useEffect as T, useId as E, useLayoutEffect as ee, useMemo as D, useRef as O, useState as k } from "react";
|
|
4
|
-
import { IconBlocks as
|
|
5
|
-
import { Fragment as
|
|
6
|
-
import { DialFileNodeType as
|
|
7
|
-
import { CatalogContentNodeType as
|
|
4
|
+
import { IconBlocks as te, IconEye as A, IconLock as j, IconStarFilled as M, IconTrash as ne } from "@tabler/icons-react";
|
|
5
|
+
import { Fragment as N, jsx as P, jsxs as F } from "react/jsx-runtime";
|
|
6
|
+
import { DialFileNodeType as I, DialFoldersTree as L } from "@epam/ai-dial-react-file-manager";
|
|
7
|
+
import { CatalogContentNodeType as R, DetailsPanel as z } from "@epam/ai-dial-catalog";
|
|
8
8
|
//#region src/constants/public-class-names.ts
|
|
9
9
|
var B = {
|
|
10
10
|
selectorField: "dial-skills-selector-field",
|
|
@@ -14,32 +14,32 @@ var B = {
|
|
|
14
14
|
return e.Deleted = "deleted", e.NotShared = "not-shared", e;
|
|
15
15
|
}({}), U = ({ description: e, unsupportedMessage: t, unresolvedReason: n, deletedMessage: i, notSharedMessage: d, viewDetailsLabel: f = "View details", onViewDetails: p, viewDetailsTabIndex: m, textClassName: h = "dial-tiny-text" }) => {
|
|
16
16
|
if (n != null) {
|
|
17
|
-
let e = n === H.Deleted, t = e ?
|
|
18
|
-
return /* @__PURE__ */
|
|
17
|
+
let e = n === H.Deleted, t = e ? ne : j, a = e ? i : d;
|
|
18
|
+
return /* @__PURE__ */ F("div", {
|
|
19
19
|
className: "flex flex-row items-center gap-2",
|
|
20
|
-
children: [/* @__PURE__ */
|
|
20
|
+
children: [/* @__PURE__ */ P(t, {
|
|
21
21
|
size: c.MD,
|
|
22
22
|
stroke: l,
|
|
23
23
|
"aria-hidden": !0,
|
|
24
24
|
className: "shrink-0 text-secondary"
|
|
25
|
-
}), /* @__PURE__ */
|
|
25
|
+
}), /* @__PURE__ */ P("p", {
|
|
26
26
|
className: r(h, "text-start text-primary"),
|
|
27
27
|
children: a
|
|
28
28
|
})]
|
|
29
29
|
});
|
|
30
30
|
}
|
|
31
|
-
return t == null ? /* @__PURE__ */
|
|
31
|
+
return t == null ? /* @__PURE__ */ F("div", {
|
|
32
32
|
className: "flex flex-col gap-3",
|
|
33
|
-
children: [e != null && e !== "" && /* @__PURE__ */
|
|
33
|
+
children: [e != null && e !== "" && /* @__PURE__ */ P("p", {
|
|
34
34
|
className: r(h, "text-start"),
|
|
35
35
|
children: e
|
|
36
|
-
}), /* @__PURE__ */
|
|
36
|
+
}), /* @__PURE__ */ P(a, {
|
|
37
37
|
variant: s.Primary,
|
|
38
38
|
appearance: o.Link,
|
|
39
39
|
size: u.Small,
|
|
40
40
|
className: "self-start",
|
|
41
41
|
label: f,
|
|
42
|
-
iconBefore: /* @__PURE__ */
|
|
42
|
+
iconBefore: /* @__PURE__ */ P(A, {
|
|
43
43
|
size: c.SM,
|
|
44
44
|
stroke: l,
|
|
45
45
|
"aria-hidden": !0
|
|
@@ -47,7 +47,7 @@ var B = {
|
|
|
47
47
|
onClick: p,
|
|
48
48
|
tabIndex: m
|
|
49
49
|
})]
|
|
50
|
-
}) : /* @__PURE__ */
|
|
50
|
+
}) : /* @__PURE__ */ P("p", {
|
|
51
51
|
className: r(h, "text-start"),
|
|
52
52
|
children: t
|
|
53
53
|
});
|
|
@@ -63,30 +63,30 @@ var B = {
|
|
|
63
63
|
if (e(), typeof ResizeObserver > "u") return;
|
|
64
64
|
let t = new ResizeObserver(e);
|
|
65
65
|
return t.observe(C), () => t.disconnect();
|
|
66
|
-
}, [C, o]), /* @__PURE__ */
|
|
66
|
+
}, [C, o]), /* @__PURE__ */ P(m, {
|
|
67
67
|
asChild: !0,
|
|
68
68
|
placement: S.Top,
|
|
69
69
|
trigger: b ? h.Click : h.Hover,
|
|
70
70
|
contentClassName: V,
|
|
71
|
-
content: a == null ? i ? /* @__PURE__ */
|
|
71
|
+
content: a == null ? i ? /* @__PURE__ */ P(U, { unsupportedMessage: p }) : /* @__PURE__ */ P(U, {
|
|
72
72
|
description: n,
|
|
73
73
|
viewDetailsLabel: f,
|
|
74
74
|
onViewDetails: x
|
|
75
|
-
}) : /* @__PURE__ */
|
|
75
|
+
}) : /* @__PURE__ */ P(U, {
|
|
76
76
|
unresolvedReason: a,
|
|
77
77
|
deletedMessage: g,
|
|
78
78
|
notSharedMessage: _
|
|
79
79
|
}),
|
|
80
|
-
children: /* @__PURE__ */
|
|
80
|
+
children: /* @__PURE__ */ F("span", {
|
|
81
81
|
tabIndex: 0,
|
|
82
82
|
className: r("relative -ms-1 -me-1 inline cursor-pointer rounded-full ps-1 pe-1 select-text", i ? c : "hover:bg-info focus-visible:bg-info active:bg-info", i ? r(o, s) : o, B.chip),
|
|
83
83
|
"aria-label": `/${e}`,
|
|
84
|
-
children: [/* @__PURE__ */
|
|
84
|
+
children: [/* @__PURE__ */ P("span", {
|
|
85
85
|
ref: w,
|
|
86
86
|
"aria-hidden": !0,
|
|
87
87
|
className: "inset-inline-start-0 pointer-events-none absolute select-none",
|
|
88
88
|
children: "/"
|
|
89
|
-
}), /* @__PURE__ */
|
|
89
|
+
}), /* @__PURE__ */ P("span", {
|
|
90
90
|
"aria-hidden": !0,
|
|
91
91
|
className: "select-none",
|
|
92
92
|
style: { paddingInlineStart: T ?? void 0 },
|
|
@@ -106,13 +106,13 @@ var B = {
|
|
|
106
106
|
rowFadeOut: "_rowFadeOut_1v431_1",
|
|
107
107
|
listContent: "_listContent_1v431_60"
|
|
108
108
|
}, re = "px-3 pb-0.5 pt-2", ie = 180, K = 288, q = ({ favorites: n, onSelect: i, onToggleFavorite: a, onBrowse: o, onViewDetails: s, isRowTooltipHidden: l = !1, className: u, rowClassName: d, searchQuery: h, listboxId: g, activeOptionId: _, isMenu: v = !1, labels: y = {}, colors: x, nameClassName: S = "dial-small-text", headerClassName: C = "dial-tiny-lead-semi-text", emptyHintClassName: w = "dial-small-text" }) => {
|
|
109
|
-
let { myCollectionLabel: D = "My Collection", emptyHintLabel:
|
|
109
|
+
let { myCollectionLabel: D = "My Collection", emptyHintLabel: te = "Star a skill to pin it here", browseLabel: A = "Browse", removeFromFavoritesLabel: j = "Remove from favorites", viewDetailsLabel: ne = "View details", noMatchingSkillsLabel: N = "No matching skills" } = y, I = t({
|
|
110
110
|
"--fs-row-hover-bg": x?.rowHoverBackground,
|
|
111
111
|
"--fs-header-text": x?.headerText,
|
|
112
112
|
"--fs-empty-hint-text": x?.emptyHintText,
|
|
113
113
|
"--fs-star-color": x?.starColor,
|
|
114
114
|
"--fs-footer-border": x?.footerBorder
|
|
115
|
-
}), [
|
|
115
|
+
}), [L, R] = k(/* @__PURE__ */ new Set()), z = O(/* @__PURE__ */ new Map());
|
|
116
116
|
T(() => {
|
|
117
117
|
let e = z.current;
|
|
118
118
|
return () => {
|
|
@@ -128,36 +128,36 @@ var B = {
|
|
|
128
128
|
let ce = (e, t) => {
|
|
129
129
|
e.target === e.currentTarget && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), i(t));
|
|
130
130
|
}, le = (e) => {
|
|
131
|
-
|
|
131
|
+
R((t) => new Set(t).add(e));
|
|
132
132
|
let t = setTimeout(() => {
|
|
133
|
-
a?.(e),
|
|
133
|
+
a?.(e), R((t) => {
|
|
134
134
|
let n = new Set(t);
|
|
135
135
|
return n.delete(e), n;
|
|
136
136
|
}), z.current.delete(e);
|
|
137
137
|
}, ie);
|
|
138
138
|
z.current.set(e, t);
|
|
139
139
|
};
|
|
140
|
-
return /* @__PURE__ */
|
|
140
|
+
return /* @__PURE__ */ F("div", {
|
|
141
141
|
className: r("flex w-full flex-col desktop:w-[280px]", u, B.favoritesPanel),
|
|
142
|
-
style:
|
|
142
|
+
style: I,
|
|
143
143
|
children: [
|
|
144
|
-
/* @__PURE__ */
|
|
144
|
+
/* @__PURE__ */ P("p", {
|
|
145
145
|
id: Y,
|
|
146
146
|
className: r(C, re, G.header),
|
|
147
147
|
children: D
|
|
148
148
|
}),
|
|
149
|
-
/* @__PURE__ */
|
|
149
|
+
/* @__PURE__ */ P("div", {
|
|
150
150
|
className: r("max-h-72 min-h-0 flex-1 overflow-y-auto", G.listContent),
|
|
151
151
|
style: { maxHeight: oe },
|
|
152
|
-
children: /* @__PURE__ */
|
|
152
|
+
children: /* @__PURE__ */ P("div", {
|
|
153
153
|
ref: Q,
|
|
154
|
-
children: Z.length > 0 ? /* @__PURE__ */
|
|
154
|
+
children: Z.length > 0 ? /* @__PURE__ */ P("ul", {
|
|
155
155
|
id: g,
|
|
156
156
|
role: H ? "listbox" : q,
|
|
157
157
|
"aria-labelledby": H ? Y : void 0,
|
|
158
158
|
className: "flex flex-col gap-1 px-1 pb-1",
|
|
159
159
|
children: Z.map((t) => {
|
|
160
|
-
let n = H ? `${g}-${encodeURIComponent(t.id)}` : void 0, o = H ? -1 : void 0, u = /* @__PURE__ */
|
|
160
|
+
let n = H ? `${g}-${encodeURIComponent(t.id)}` : void 0, o = H ? -1 : void 0, u = /* @__PURE__ */ F("div", {
|
|
161
161
|
role: J,
|
|
162
162
|
id: n,
|
|
163
163
|
"aria-selected": H ? n === _ : void 0,
|
|
@@ -167,26 +167,26 @@ var B = {
|
|
|
167
167
|
onClick: () => i(t),
|
|
168
168
|
onKeyDown: (e) => ce(e, t),
|
|
169
169
|
children: [
|
|
170
|
-
/* @__PURE__ */
|
|
170
|
+
/* @__PURE__ */ P(e, {
|
|
171
171
|
size: c.MD,
|
|
172
172
|
initialsName: t.name
|
|
173
173
|
}),
|
|
174
|
-
h == null ? /* @__PURE__ */
|
|
174
|
+
h == null ? /* @__PURE__ */ P("span", {
|
|
175
175
|
className: r(S, "min-w-0 flex-1 truncate text-start"),
|
|
176
176
|
children: t.name
|
|
177
|
-
}) : /* @__PURE__ */
|
|
177
|
+
}) : /* @__PURE__ */ P(p, {
|
|
178
178
|
text: t.name,
|
|
179
179
|
query: h,
|
|
180
180
|
maxLines: 1,
|
|
181
181
|
className: r(S, "min-w-0 flex-1 text-start")
|
|
182
182
|
}),
|
|
183
|
-
a && /* @__PURE__ */
|
|
184
|
-
icon: /* @__PURE__ */
|
|
183
|
+
a && /* @__PURE__ */ P(b, {
|
|
184
|
+
icon: /* @__PURE__ */ P(M, {
|
|
185
185
|
size: c.SM,
|
|
186
186
|
className: G.star,
|
|
187
187
|
"aria-hidden": !0
|
|
188
188
|
}),
|
|
189
|
-
"aria-label":
|
|
189
|
+
"aria-label": j,
|
|
190
190
|
isSelected: !0,
|
|
191
191
|
tabIndex: o,
|
|
192
192
|
onClick: (e) => {
|
|
@@ -195,15 +195,15 @@ var B = {
|
|
|
195
195
|
})
|
|
196
196
|
]
|
|
197
197
|
});
|
|
198
|
-
return /* @__PURE__ */
|
|
198
|
+
return /* @__PURE__ */ P("li", {
|
|
199
199
|
role: q,
|
|
200
|
-
className:
|
|
201
|
-
children: s && !l ? /* @__PURE__ */
|
|
200
|
+
className: L.has(t.id) ? G.rowLeaving : G.rowEnter,
|
|
201
|
+
children: s && !l ? /* @__PURE__ */ P(m, {
|
|
202
202
|
asChild: !0,
|
|
203
203
|
contentClassName: V,
|
|
204
|
-
content: /* @__PURE__ */
|
|
204
|
+
content: /* @__PURE__ */ P(U, {
|
|
205
205
|
description: t.description,
|
|
206
|
-
viewDetailsLabel:
|
|
206
|
+
viewDetailsLabel: ne,
|
|
207
207
|
onViewDetails: () => s(t),
|
|
208
208
|
viewDetailsTabIndex: o
|
|
209
209
|
}),
|
|
@@ -211,22 +211,22 @@ var B = {
|
|
|
211
211
|
}) : u
|
|
212
212
|
}, t.id);
|
|
213
213
|
})
|
|
214
|
-
}) : ae && X !== "" ? /* @__PURE__ */
|
|
214
|
+
}) : ae && X !== "" ? /* @__PURE__ */ P("p", {
|
|
215
215
|
role: "status",
|
|
216
216
|
"aria-live": "polite",
|
|
217
217
|
className: r(w, "px-4 py-4 text-start", G.emptyHint),
|
|
218
|
-
children:
|
|
219
|
-
}) : /* @__PURE__ */
|
|
218
|
+
children: N
|
|
219
|
+
}) : /* @__PURE__ */ P("p", {
|
|
220
220
|
className: r(w, "px-4 py-4 text-start", G.emptyHint),
|
|
221
|
-
children:
|
|
221
|
+
children: te
|
|
222
222
|
})
|
|
223
223
|
})
|
|
224
224
|
}),
|
|
225
|
-
/* @__PURE__ */
|
|
225
|
+
/* @__PURE__ */ P("div", {
|
|
226
226
|
className: r("border-t px-2 py-3", G.footer),
|
|
227
|
-
children: /* @__PURE__ */
|
|
227
|
+
children: /* @__PURE__ */ P(f, {
|
|
228
228
|
role: W ? "menuitem" : void 0,
|
|
229
|
-
label:
|
|
229
|
+
label: A,
|
|
230
230
|
className: "w-full justify-center",
|
|
231
231
|
onClick: o
|
|
232
232
|
})
|
|
@@ -235,19 +235,19 @@ var B = {
|
|
|
235
235
|
});
|
|
236
236
|
}, J = ".zip,.md", Y = ({ isOpen: e, errorText: t, isUploading: n = !1, accept: r = J, labels: i, onClose: a, onFilesSelected: o, onFilesRejected: s }) => {
|
|
237
237
|
let { dialogTitle: c = "Upload skill", dropZoneLabel: l = "Drag and drop it or click here to upload", dropZoneMobileLabel: u = "Click here to upload", formatsLabel: f = "File formats .zip and SKILL.md", fileInputAriaLabel: p = "Upload a skill ZIP archive or a SKILL.md file", closeAriaLabel: m = "Close", uploadingAriaLabel: h = "Uploading skill" } = i ?? {};
|
|
238
|
-
return /* @__PURE__ */
|
|
238
|
+
return /* @__PURE__ */ P(g, {
|
|
239
239
|
open: e,
|
|
240
240
|
size: _.Sm,
|
|
241
241
|
header: c,
|
|
242
242
|
closeAriaLabel: m,
|
|
243
243
|
onClose: a,
|
|
244
|
-
children: /* @__PURE__ */
|
|
244
|
+
children: /* @__PURE__ */ F("div", {
|
|
245
245
|
className: "flex flex-col gap-4 px-6 py-4",
|
|
246
|
-
children: [/* @__PURE__ */
|
|
247
|
-
label: /* @__PURE__ */
|
|
246
|
+
children: [/* @__PURE__ */ P(d, {
|
|
247
|
+
label: /* @__PURE__ */ F(N, { children: [/* @__PURE__ */ P("span", {
|
|
248
248
|
className: "desktop:hidden",
|
|
249
249
|
children: u
|
|
250
|
-
}), /* @__PURE__ */
|
|
250
|
+
}), /* @__PURE__ */ P("span", {
|
|
251
251
|
className: "hidden desktop:inline",
|
|
252
252
|
children: l
|
|
253
253
|
})] }),
|
|
@@ -258,39 +258,39 @@ var B = {
|
|
|
258
258
|
errorText: n ? void 0 : t,
|
|
259
259
|
onChange: o,
|
|
260
260
|
onReject: s
|
|
261
|
-
}), n && /* @__PURE__ */
|
|
261
|
+
}), n && /* @__PURE__ */ P(y, { ariaLabel: h })]
|
|
262
262
|
})
|
|
263
263
|
});
|
|
264
|
-
}, ae = ({ isOpen: e, onClose: t, onSelect: n, title: r, renderContent: i }) => /* @__PURE__ */
|
|
264
|
+
}, ae = ({ isOpen: e, onClose: t, onSelect: n, title: r, renderContent: i }) => /* @__PURE__ */ P(g, {
|
|
265
265
|
open: e,
|
|
266
266
|
header: r,
|
|
267
267
|
size: _.Lg,
|
|
268
268
|
className: "h-[min(90vh,860px)] max-w-[min(95vw,1200px)]! overflow-hidden mobile:h-full mobile:max-w-full! mobile:rounded-none",
|
|
269
269
|
overlayClassName: "mobile:p-0",
|
|
270
270
|
onClose: t,
|
|
271
|
-
children: /* @__PURE__ */
|
|
271
|
+
children: /* @__PURE__ */ P("div", {
|
|
272
272
|
className: "h-[min(80vh,840px)] overflow-auto mobile:h-full",
|
|
273
|
-
children: /* @__PURE__ */
|
|
273
|
+
children: /* @__PURE__ */ P(C, {
|
|
274
274
|
fallback: null,
|
|
275
275
|
children: e && i(n, t)
|
|
276
276
|
})
|
|
277
277
|
})
|
|
278
|
-
}), X = (e, t = null) => e.map((e) => e.type ===
|
|
278
|
+
}), X = (e, t = null) => e.map((e) => e.type === R.Folder ? {
|
|
279
279
|
path: e.id,
|
|
280
280
|
name: e.name,
|
|
281
|
-
nodeType:
|
|
281
|
+
nodeType: I.FOLDER,
|
|
282
282
|
parentPath: t,
|
|
283
283
|
folderId: e.id,
|
|
284
284
|
items: X(e.items, e.id)
|
|
285
285
|
} : {
|
|
286
286
|
path: e.id,
|
|
287
287
|
name: e.name,
|
|
288
|
-
nodeType:
|
|
288
|
+
nodeType: I.ITEM,
|
|
289
289
|
parentPath: t,
|
|
290
290
|
folderId: t ?? ""
|
|
291
291
|
}), Z = ({ nodes: e, selectedFileId: t, expandedFolderIds: n, onToggleFolder: r, onSelectFile: i, onClose: a, ariaLabel: o }) => {
|
|
292
292
|
let s = D(() => X(e), [e]), c = D(() => new Set(n), [n]);
|
|
293
|
-
return /* @__PURE__ */
|
|
293
|
+
return /* @__PURE__ */ P(L, {
|
|
294
294
|
items: s,
|
|
295
295
|
showFiles: !0,
|
|
296
296
|
areHiddenFilesVisible: !0,
|
|
@@ -301,15 +301,15 @@ var B = {
|
|
|
301
301
|
for (let t of n) e.has(t) || r(t);
|
|
302
302
|
},
|
|
303
303
|
onItemClick: (e) => {
|
|
304
|
-
e.nodeType ===
|
|
304
|
+
e.nodeType === I.ITEM && i(e.path);
|
|
305
305
|
},
|
|
306
306
|
ariaLabel: o,
|
|
307
307
|
autoFocus: !0,
|
|
308
308
|
onEscape: a
|
|
309
309
|
});
|
|
310
|
-
}, Q = (e) => /* @__PURE__ */
|
|
310
|
+
}, Q = (e) => /* @__PURE__ */ P(z, {
|
|
311
311
|
...e,
|
|
312
|
-
renderContentFileTree: (e) => /* @__PURE__ */
|
|
312
|
+
renderContentFileTree: (e) => /* @__PURE__ */ P(Z, { ...e })
|
|
313
313
|
}), oe = (e) => e == null || /[\s/]/.test(e), se = (e, t, n) => {
|
|
314
314
|
let r = [], i = 0;
|
|
315
315
|
return t.forEach((t, a) => {
|
|
@@ -465,7 +465,7 @@ var B = {
|
|
|
465
465
|
let t = e.split("/").filter((e) => e.length > 0);
|
|
466
466
|
return t[0] !== "skills" || t.length < 3 ? null : t[1];
|
|
467
467
|
}, ve = (e, t) => _e(e) === t ? H.Deleted : H.NotShared, ye = "/", be = ({ isSkillsSupported: e, skills: t, sharedWithMe: n, publicSkills: r, favoriteIds: a, viewerBucket: o, onToggleFavorite: s, labels: c, historyChipLabelClassName: u, activeMentionLabelClassName: d = "text-accent", activeMentionDetailsTrigger: f, historyDetailsTrigger: p, isRowTooltipHidden: m = !1, renderCatalogContent: h, detailsPanelComponent: g }) => {
|
|
468
|
-
let { addMenuLabel: _ = "Skills", backLabel: v = "Back", catalogModalTitleLabel: y = "Use skill", emptyQueryHintLabel: b = "Type to filter", deletedTooltipLabel: x, notSharedTooltipLabel: S, unsupportedTooltipLabel: T, panelLabels: E } = c ?? {}, [ee,
|
|
468
|
+
let { addMenuLabel: _ = "Skills", backLabel: v = "Back", catalogModalTitleLabel: y = "Use skill", emptyQueryHintLabel: b = "Type to filter", deletedTooltipLabel: x, notSharedTooltipLabel: S, unsupportedTooltipLabel: T, panelLabels: E } = c ?? {}, [ee, A] = k(!1), [j, M] = k(null), [ne, N] = k(0), F = O(null), [I, L] = k(0), [R, z] = k(void 0), B = me(), V = D(() => [
|
|
469
469
|
...t,
|
|
470
470
|
...n ?? [],
|
|
471
471
|
...r ?? []
|
|
@@ -477,14 +477,14 @@ var B = {
|
|
|
477
477
|
start: t.start,
|
|
478
478
|
length: t.length,
|
|
479
479
|
isUnsupported: !e,
|
|
480
|
-
render: () => /* @__PURE__ */
|
|
480
|
+
render: () => /* @__PURE__ */ P(W, {
|
|
481
481
|
name: t.name,
|
|
482
482
|
path: t.url,
|
|
483
483
|
labelClassName: d,
|
|
484
484
|
description: H.get(t.url)?.description,
|
|
485
485
|
isUnsupported: !e,
|
|
486
486
|
detailsTrigger: f,
|
|
487
|
-
onViewDetails:
|
|
487
|
+
onViewDetails: M,
|
|
488
488
|
labels: {
|
|
489
489
|
viewDetailsLabel: E?.viewDetailsLabel,
|
|
490
490
|
unsupportedTooltipLabel: T
|
|
@@ -500,7 +500,7 @@ var B = {
|
|
|
500
500
|
T
|
|
501
501
|
]), K = w((e, t, n) => {
|
|
502
502
|
let r = B.insertMention(e, t, n);
|
|
503
|
-
|
|
503
|
+
L((e) => e + 1), z(n + 1 + t.length + +!!r);
|
|
504
504
|
}, [B]), J = w((e) => {
|
|
505
505
|
let t = fe(B.draft, e, ye);
|
|
506
506
|
return t == null ? e : (B.onDraftChange(B.draft.slice(0, t.start) + B.draft.slice(t.end)), t.start);
|
|
@@ -514,7 +514,7 @@ var B = {
|
|
|
514
514
|
mentionUrl: n?.url
|
|
515
515
|
};
|
|
516
516
|
}, [B]), X = w(() => {
|
|
517
|
-
B.reset(),
|
|
517
|
+
B.reset(), L((e) => e + 1), z(void 0);
|
|
518
518
|
}, [B]), { expectInsertion: Z } = B, Q = w((t) => {
|
|
519
519
|
Z(t, e ? ce(t, V) : []);
|
|
520
520
|
}, [
|
|
@@ -522,7 +522,7 @@ var B = {
|
|
|
522
522
|
e,
|
|
523
523
|
V
|
|
524
524
|
]), oe = w((e, t) => {
|
|
525
|
-
B.seedFromMessage(e, t, U),
|
|
525
|
+
B.seedFromMessage(e, t, U), L((e) => e + 1), z(void 0);
|
|
526
526
|
}, [B, U]), le = w((e, t) => {
|
|
527
527
|
if (t == null || t.length === 0) return null;
|
|
528
528
|
let n = se(e, t, U), r = [], i = 0;
|
|
@@ -531,14 +531,14 @@ var B = {
|
|
|
531
531
|
let a = t[n.skillIndex], s = H.get(a.url), c = s?.name ?? ge(a.url), l = s == null ? ve(a.url, o) : void 0;
|
|
532
532
|
r.push({
|
|
533
533
|
text: e.slice(n.start, n.start + n.length),
|
|
534
|
-
node: /* @__PURE__ */
|
|
534
|
+
node: /* @__PURE__ */ P(W, {
|
|
535
535
|
name: c,
|
|
536
536
|
path: a.url,
|
|
537
537
|
labelClassName: u,
|
|
538
538
|
description: s?.description,
|
|
539
539
|
unresolvedReason: l,
|
|
540
540
|
detailsTrigger: p,
|
|
541
|
-
onViewDetails:
|
|
541
|
+
onViewDetails: M,
|
|
542
542
|
labels: {
|
|
543
543
|
viewDetailsLabel: E?.viewDetailsLabel,
|
|
544
544
|
deletedTooltipLabel: x,
|
|
@@ -558,14 +558,14 @@ var B = {
|
|
|
558
558
|
S
|
|
559
559
|
]), ue = w((e) => e == null || e.length === 0 ? null : e.map((e) => {
|
|
560
560
|
let t = H.get(e.url), n = t?.name ?? ge(e.url), r = t == null ? ve(e.url, o) : void 0;
|
|
561
|
-
return /* @__PURE__ */
|
|
561
|
+
return /* @__PURE__ */ P(W, {
|
|
562
562
|
name: n,
|
|
563
563
|
path: e.url,
|
|
564
564
|
labelClassName: u,
|
|
565
565
|
description: t?.description,
|
|
566
566
|
unresolvedReason: r,
|
|
567
567
|
detailsTrigger: p,
|
|
568
|
-
onViewDetails:
|
|
568
|
+
onViewDetails: M,
|
|
569
569
|
labels: {
|
|
570
570
|
viewDetailsLabel: E?.viewDetailsLabel,
|
|
571
571
|
deletedTooltipLabel: x,
|
|
@@ -580,7 +580,7 @@ var B = {
|
|
|
580
580
|
o,
|
|
581
581
|
x,
|
|
582
582
|
S
|
|
583
|
-
]), $ = w((e, t) => /* @__PURE__ */
|
|
583
|
+
]), $ = w((e, t) => /* @__PURE__ */ P(q, {
|
|
584
584
|
favorites: G,
|
|
585
585
|
isMenu: !0,
|
|
586
586
|
onSelect: (n) => {
|
|
@@ -589,10 +589,10 @@ var B = {
|
|
|
589
589
|
onToggleFavorite: s,
|
|
590
590
|
onBrowse: () => {
|
|
591
591
|
let n = Y(t), r = J(t);
|
|
592
|
-
|
|
592
|
+
N(r), F.current = n ?? null, e(), A(!0);
|
|
593
593
|
},
|
|
594
594
|
onViewDetails: (n) => {
|
|
595
|
-
J(t), e(),
|
|
595
|
+
J(t), e(), M(n.id);
|
|
596
596
|
},
|
|
597
597
|
isRowTooltipHidden: m,
|
|
598
598
|
labels: E
|
|
@@ -607,7 +607,7 @@ var B = {
|
|
|
607
607
|
]), de = D(() => e ? {
|
|
608
608
|
key: "skills",
|
|
609
609
|
title: _,
|
|
610
|
-
icon: /* @__PURE__ */
|
|
610
|
+
icon: /* @__PURE__ */ P(te, {
|
|
611
611
|
size: i,
|
|
612
612
|
"aria-hidden": !0,
|
|
613
613
|
stroke: l
|
|
@@ -624,7 +624,7 @@ var B = {
|
|
|
624
624
|
menuLabel: _,
|
|
625
625
|
emptyQueryHint: b,
|
|
626
626
|
onTextPaste: Q,
|
|
627
|
-
renderMenu: ({ query: e, caretPosition: t, close: n, listboxId: r, activeOptionId: i }) => /* @__PURE__ */
|
|
627
|
+
renderMenu: ({ query: e, caretPosition: t, close: n, listboxId: r, activeOptionId: i }) => /* @__PURE__ */ P(q, {
|
|
628
628
|
favorites: G,
|
|
629
629
|
searchQuery: e,
|
|
630
630
|
listboxId: r,
|
|
@@ -638,14 +638,14 @@ var B = {
|
|
|
638
638
|
n({
|
|
639
639
|
consumeQuery: !0,
|
|
640
640
|
returnFocus: !1
|
|
641
|
-
}),
|
|
641
|
+
}), N(t), F.current = {
|
|
642
642
|
position: t,
|
|
643
643
|
text: r,
|
|
644
644
|
mentionUrl: i?.url
|
|
645
|
-
},
|
|
645
|
+
}, A(!0);
|
|
646
646
|
},
|
|
647
647
|
onViewDetails: (e) => {
|
|
648
|
-
n({ consumeQuery: !0 }),
|
|
648
|
+
n({ consumeQuery: !0 }), M(e.id);
|
|
649
649
|
},
|
|
650
650
|
isRowTooltipHidden: m,
|
|
651
651
|
labels: E
|
|
@@ -662,37 +662,37 @@ var B = {
|
|
|
662
662
|
E,
|
|
663
663
|
Q
|
|
664
664
|
]), _e = w(() => {
|
|
665
|
-
|
|
666
|
-
let e =
|
|
667
|
-
if (
|
|
665
|
+
A(!1);
|
|
666
|
+
let e = F.current;
|
|
667
|
+
if (F.current = null, e == null) return;
|
|
668
668
|
let { position: t, text: n, mentionUrl: r } = e;
|
|
669
|
-
r == null ? B.onDraftChange(B.draft.slice(0, t) + n + B.draft.slice(t)) : B.restoreMention(r, n.slice(1), t),
|
|
669
|
+
r == null ? B.onDraftChange(B.draft.slice(0, t) + n + B.draft.slice(t)) : B.restoreMention(r, n.slice(1), t), L((e) => e + 1), z(t + n.length);
|
|
670
670
|
}, [B]);
|
|
671
671
|
return {
|
|
672
672
|
skillMenuOverlay: de,
|
|
673
673
|
commandMenu: pe,
|
|
674
|
-
skillCatalogModal: /* @__PURE__ */
|
|
674
|
+
skillCatalogModal: /* @__PURE__ */ P(ae, {
|
|
675
675
|
isOpen: ee,
|
|
676
676
|
onClose: _e,
|
|
677
677
|
onSelect: (e) => {
|
|
678
|
-
|
|
678
|
+
F.current = null, K(e, U(e), ne), A(!1);
|
|
679
679
|
},
|
|
680
680
|
title: y,
|
|
681
681
|
renderContent: h
|
|
682
682
|
}),
|
|
683
|
-
skillDetailsPanel: /* @__PURE__ */
|
|
683
|
+
skillDetailsPanel: /* @__PURE__ */ P(C, {
|
|
684
684
|
fallback: null,
|
|
685
|
-
children: /* @__PURE__ */
|
|
686
|
-
skillId:
|
|
687
|
-
onClose: () =>
|
|
685
|
+
children: /* @__PURE__ */ P(g, {
|
|
686
|
+
skillId: j,
|
|
687
|
+
onClose: () => M(null)
|
|
688
688
|
})
|
|
689
689
|
}),
|
|
690
690
|
message: B.draft,
|
|
691
|
-
messageRevision:
|
|
691
|
+
messageRevision: I,
|
|
692
692
|
activeMentions: ie,
|
|
693
693
|
onDraftChange: B.onDraftChange,
|
|
694
694
|
onBackspaceAtCaret: B.onBackspaceAtCaret,
|
|
695
|
-
caretPositionOverride:
|
|
695
|
+
caretPositionOverride: R,
|
|
696
696
|
isSkillUnsupported: re,
|
|
697
697
|
selectedSkills: B.orderedSkills,
|
|
698
698
|
resetSkillMentions: X,
|
|
@@ -708,25 +708,25 @@ var B = {
|
|
|
708
708
|
clear: "_clear_1ult0_13",
|
|
709
709
|
invalid: "_invalid_1ult0_17"
|
|
710
710
|
}, Se = [], Ce = "Selected model does not support skills. Select a different model to use a skill.", we = ({ value: i, onChange: a, displayNames: o, skills: s = Se, isSkillsSupported: l, isDisabled: u = !1, error: d, labels: f, className: m, styles: h }) => {
|
|
711
|
-
let [g, _] = k(!1), [y, b] = k(""), S = O(null), C = E(), w = i.some((e) => n(e, l)), T = l && !u, D = g && T,
|
|
711
|
+
let [g, _] = k(!1), [y, b] = k(""), S = O(null), C = E(), w = i.some((e) => n(e, l)), T = l && !u, D = g && T, te = i.length > 0 ? f.unsupportedTooltipLabel : void 0, A = !l && i.length === 0, j = A ? f.unavailableHintLabel ?? Ce : void 0, M = new Map(i.map((e) => [e, {
|
|
712
712
|
id: e,
|
|
713
713
|
name: o?.[e] || e
|
|
714
714
|
}]));
|
|
715
|
-
s.forEach((e) =>
|
|
716
|
-
let
|
|
715
|
+
s.forEach((e) => M.set(e.id, e));
|
|
716
|
+
let ne = [...M.values()].map((t) => ({
|
|
717
717
|
value: t.id,
|
|
718
718
|
label: t.name,
|
|
719
|
-
labelNode: y.trim() ? /* @__PURE__ */
|
|
719
|
+
labelNode: y.trim() ? /* @__PURE__ */ P(p, {
|
|
720
720
|
text: t.name,
|
|
721
721
|
query: y,
|
|
722
722
|
maxLines: 1
|
|
723
723
|
}) : void 0,
|
|
724
|
-
icon: /* @__PURE__ */
|
|
724
|
+
icon: /* @__PURE__ */ P(e, {
|
|
725
725
|
size: c.SM,
|
|
726
726
|
initialsName: t.name
|
|
727
727
|
}),
|
|
728
728
|
disabled: !l
|
|
729
|
-
})),
|
|
729
|
+
})), N = {
|
|
730
730
|
...t({
|
|
731
731
|
"--ssf-text": h?.colors?.text,
|
|
732
732
|
"--ssf-bg": h?.colors?.background,
|
|
@@ -737,24 +737,24 @@ var B = {
|
|
|
737
737
|
};
|
|
738
738
|
return ee(() => {
|
|
739
739
|
let e = S.current?.querySelector("[role=\"combobox\"]");
|
|
740
|
-
e && (
|
|
740
|
+
e && (j ? e.setAttribute("aria-describedby", C) : e.removeAttribute("aria-describedby"), d || w ? e.setAttribute("aria-invalid", "true") : e.removeAttribute("aria-invalid"));
|
|
741
741
|
}, [
|
|
742
|
-
|
|
742
|
+
j,
|
|
743
743
|
C,
|
|
744
744
|
d,
|
|
745
745
|
u,
|
|
746
746
|
w
|
|
747
|
-
]), /* @__PURE__ */
|
|
747
|
+
]), /* @__PURE__ */ F("div", {
|
|
748
748
|
ref: S,
|
|
749
749
|
className: r("min-w-0", m, B.selectorField),
|
|
750
|
-
style:
|
|
751
|
-
children: [/* @__PURE__ */
|
|
752
|
-
tooltip:
|
|
750
|
+
style: N,
|
|
751
|
+
children: [/* @__PURE__ */ P(x, {
|
|
752
|
+
tooltip: te,
|
|
753
753
|
hideTooltip: l,
|
|
754
754
|
triggerClassName: "block w-full min-w-0",
|
|
755
|
-
children: /* @__PURE__ */
|
|
755
|
+
children: /* @__PURE__ */ P("div", {
|
|
756
756
|
inert: u ? !0 : void 0,
|
|
757
|
-
children: /* @__PURE__ */
|
|
757
|
+
children: /* @__PURE__ */ P(v, {
|
|
758
758
|
multiple: !0,
|
|
759
759
|
searchable: !0,
|
|
760
760
|
open: D,
|
|
@@ -766,24 +766,23 @@ var B = {
|
|
|
766
766
|
onChange: (e) => {
|
|
767
767
|
u || a(Array.isArray(e) ? e : [e]);
|
|
768
768
|
},
|
|
769
|
-
options:
|
|
769
|
+
options: ne,
|
|
770
770
|
placeholder: f.placeholder,
|
|
771
771
|
labelProps: { label: f.fieldLabel },
|
|
772
772
|
error: d,
|
|
773
|
-
caption: j ? A : void 0,
|
|
774
773
|
searchPlaceholder: f.searchPlaceholder ?? "Search skills",
|
|
775
774
|
emptyStateTitle: y.trim() ? f.noMatchingSkillsLabel ?? "No matching skills" : f.emptyLabel ?? "No skills available",
|
|
776
|
-
disabled: u ||
|
|
775
|
+
disabled: u || A,
|
|
777
776
|
invalid: !!d || w,
|
|
778
777
|
className: "w-full min-w-0",
|
|
779
|
-
fieldClassName: r(T ? "cursor-pointer" : "cursor-not-allowed", "--ssf-bg" in
|
|
778
|
+
fieldClassName: r(T ? "cursor-pointer" : "cursor-not-allowed", "--ssf-bg" in N && xe.background, "--ssf-border" in N && xe.border, "--ssf-text" in N && xe.value, (d || w) && xe.invalid, h?.typography?.fontClassName ?? "dial-small-text", h?.triggerClassName),
|
|
780
779
|
listClassName: "w-[min(var(--reference-width),calc(100vw-2rem))] max-w-full"
|
|
781
780
|
})
|
|
782
781
|
})
|
|
783
|
-
}),
|
|
782
|
+
}), j && /* @__PURE__ */ P("span", {
|
|
784
783
|
id: C,
|
|
785
784
|
className: "sr-only",
|
|
786
|
-
children:
|
|
785
|
+
children: j
|
|
787
786
|
})]
|
|
788
787
|
});
|
|
789
788
|
};
|
|
@@ -7,8 +7,8 @@ export interface SkillSelectorFieldLabels {
|
|
|
7
7
|
placeholder: string;
|
|
8
8
|
/** Explanation shown when the selected model cannot use skills. */
|
|
9
9
|
unsupportedTooltipLabel: string;
|
|
10
|
-
/**
|
|
11
|
-
|
|
10
|
+
/** Screen-reader-only explanation of why the field is disabled when the model cannot use skills and no skill is selected; never rendered visibly. Defaults to 'Selected model does not support skills. Select a different model to use a skill.'. */
|
|
11
|
+
unavailableHintLabel?: string;
|
|
12
12
|
/** Search input placeholder. Defaults to 'Search skills'. */
|
|
13
13
|
searchPlaceholder?: string;
|
|
14
14
|
/** Text shown when no skill is available. Defaults to 'No skills available'. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"skill-selector-field-props.d.ts","sourceRoot":"","sources":["../../src/models/skill-selector-field-props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,oDAAoD;AACpD,MAAM,WAAW,wBAAwB;IACvC,0CAA0C;IAC1C,UAAU,EAAE,MAAM,CAAC;IACnB,4BAA4B;IAC5B,WAAW,EAAE,MAAM,CAAC;IACpB,mEAAmE;IACnE,uBAAuB,EAAE,MAAM,CAAC;IAChC,
|
|
1
|
+
{"version":3,"file":"skill-selector-field-props.d.ts","sourceRoot":"","sources":["../../src/models/skill-selector-field-props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,oDAAoD;AACpD,MAAM,WAAW,wBAAwB;IACvC,0CAA0C;IAC1C,UAAU,EAAE,MAAM,CAAC;IACnB,4BAA4B;IAC5B,WAAW,EAAE,MAAM,CAAC;IACpB,mEAAmE;IACnE,uBAAuB,EAAE,MAAM,CAAC;IAChC,qPAAqP;IACrP,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,6DAA6D;IAC7D,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,gFAAgF;IAChF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qFAAqF;IACrF,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC;AAED,uEAAuE;AACvE,MAAM,WAAW,wBAAwB;IACvC,gEAAgE;IAChE,MAAM,CAAC,EAAE;QACP,kBAAkB;QAClB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,wBAAwB;QACxB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,oBAAoB;QACpB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,qCAAqC;QACrC,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,kCAAkC;IAClC,UAAU,CAAC,EAAE;QACX,uEAAuE;QACvE,aAAa,CAAC,EAAE,MAAM,CAAC;KACxB,CAAC;IACF,uDAAuD;IACvD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,8DAA8D;IAC9D,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB;AAED,oDAAoD;AACpD,MAAM,WAAW,mBAAmB;IAClC,yEAAyE;IACzE,EAAE,EAAE,MAAM,CAAC;IACX,oBAAoB;IACpB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,gFAAgF;AAChF,MAAM,WAAW,uBAAuB;IACtC,mFAAmF;IACnF,MAAM,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC/B,qDAAqD;IACrD,iBAAiB,EAAE,OAAO,CAAC;IAC3B,gDAAgD;IAChD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4EAA4E;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,MAAM,EAAE,wBAAwB,CAAC;IACjC,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,wBAAwB,CAAC;IAClC,4CAA4C;IAC5C,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,2EAA2E;IAC3E,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACpC,+EAA+E;IAC/E,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACvC"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@epam/ai-dial-skills",
|
|
3
3
|
"description": "Host-agnostic UI for picking a favorite skill to attach to a chat input",
|
|
4
|
-
"version": "1.3.0-dev.
|
|
4
|
+
"version": "1.3.0-dev.142",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "./index.js",
|
|
@@ -18,11 +18,11 @@
|
|
|
18
18
|
},
|
|
19
19
|
"dependencies": {
|
|
20
20
|
"@tabler/icons-react": "^3.44.0",
|
|
21
|
-
"@epam/ai-dial-catalog": "1.3.0-dev.
|
|
22
|
-
"@epam/ai-dial-conversation-input": "1.3.0-dev.
|
|
21
|
+
"@epam/ai-dial-catalog": "1.3.0-dev.142",
|
|
22
|
+
"@epam/ai-dial-conversation-input": "1.3.0-dev.142"
|
|
23
23
|
},
|
|
24
24
|
"peerDependencies": {
|
|
25
|
-
"@epam/ai-dial-chat-shared": "1.3.0-dev.
|
|
25
|
+
"@epam/ai-dial-chat-shared": "1.3.0-dev.142",
|
|
26
26
|
"@epam/ai-dial-react-file-manager": "^0.4.0-dev.11",
|
|
27
27
|
"@epam/ai-dial-ui-kit": "^0.16.0-dev.22",
|
|
28
28
|
"react": "^19.2.8"
|