@epam/ai-dial-skills 1.3.0-dev.159 → 1.3.0-dev.160

package/components/SkillSelectorField/SkillSelectorField.d.ts.map

@@ -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;AAQjD,kFAAkF;AAClF,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CAoI1D,CAAC"}
+{"version":3,"file":"SkillSelectorField.d.ts","sourceRoot":"","sources":["../../../src/components/SkillSelectorField/SkillSelectorField.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAmB,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,KAAK,EACV,uBAAuB,EAExB,MAAM,yCAAyC,CAAC;AAQjD,kFAAkF;AAClF,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CAqH1D,CAAC"}

package/index.js

@@ -1,20 +1,20 @@
 import { DeploymentIcon as e, buildCssVars as t, isSkillSelectionUnsupported as n, mergeClasses as r } from "@epam/ai-dial-chat-shared";
 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";
-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";
-import { IconBlocks as te, IconEye as A, IconLock as j, IconStarFilled as M, IconTrash as ne } from "@tabler/icons-react";
-import { Fragment as N, jsx as P, jsxs as F } from "react/jsx-runtime";
+import { Suspense as C, useCallback as w, useEffect as T, useId as E, useLayoutEffect as D, useMemo as O, useRef as k, useState as A } from "react";
+import { IconBlocks as ee, IconEye as j, IconLock as M, IconStarFilled as N, IconTrash as te } from "@tabler/icons-react";
+import { Fragment as ne, jsx as P, jsxs as F } from "react/jsx-runtime";
 import { DialFileNodeType as I, DialFoldersTree as L } from "@epam/ai-dial-react-file-manager";
-import { CatalogContentNodeType as R, DetailsPanel as z } from "@epam/ai-dial-catalog";
+import { CatalogContentNodeType as re, DetailsPanel as R } from "@epam/ai-dial-catalog";
 //#region src/constants/public-class-names.ts
-var B = {
+var z = {
 	selectorField: "dial-skills-selector-field",
 	favoritesPanel: "dial-skills-favorites-panel",
 	chip: "dial-skills-chip"
-}, V = "max-h-[280px] max-w-[min(420px,calc(100vw-10px))] overflow-y-auto", H = /* @__PURE__ */ function(e) {
+}, B = "max-h-[280px] max-w-[min(420px,calc(100vw-10px))] overflow-y-auto", V = /* @__PURE__ */ function(e) {
 	return e.Deleted = "deleted", e.NotShared = "not-shared", e;
-}({}), U = ({ description: e, unsupportedMessage: t, unresolvedReason: n, deletedMessage: i, notSharedMessage: d, viewDetailsLabel: f = "View details", onViewDetails: p, viewDetailsTabIndex: m, textClassName: h = "dial-tiny-text" }) => {
+}({}), H = ({ description: e, unsupportedMessage: t, unresolvedReason: n, deletedMessage: i, notSharedMessage: d, viewDetailsLabel: f = "View details", onViewDetails: p, viewDetailsTabIndex: m, textClassName: h = "dial-tiny-text" }) => {
 	if (n != null) {
-		let e = n === H.Deleted, t = e ? ne : j, a = e ? i : d;
+		let e = n === V.Deleted, t = e ? te : M, a = e ? i : d;
 		return /* @__PURE__ */ F("div", {
 			className: "flex flex-row items-center gap-2",
 			children: [/* @__PURE__ */ P(t, {
@@ -39,7 +39,7 @@ var B = {
 			size: u.Small,
 			className: "self-start",
 			label: f,
-			iconBefore: /* @__PURE__ */ P(A, {
+			iconBefore: /* @__PURE__ */ P(j, {
 				size: c.SM,
 				stroke: l,
 				"aria-hidden": !0
@@ -51,11 +51,11 @@ var B = {
 		className: r(h, "text-start"),
 		children: t
 	});
-}, W = ({ name: e, path: t, description: n, isUnsupported: i = !1, unresolvedReason: a, labelClassName: o = "dial-body-paragraph-text text-accent", unsupportedLabelClassName: s = "text-error", unsupportedClassName: c = "bg-error", detailsTrigger: l = "hover", onViewDetails: u, labels: d = {} }) => {
-	let { viewDetailsLabel: f = "View details", unsupportedTooltipLabel: p = "Selected model does not support skills. Remove the skill or select different model to proceed.", deletedTooltipLabel: g = "This skill has been deleted. Its details are no longer available.", notSharedTooltipLabel: _ = "You don't have access to this skill, so its details aren't shown. Ask the chat owner to share it with you." } = d, [v, y] = k(0), b = l === "click", x = () => {
+}, U = ({ name: e, path: t, description: n, isUnsupported: i = !1, unresolvedReason: a, labelClassName: o = "dial-body-paragraph-text text-accent", unsupportedLabelClassName: s = "text-error", unsupportedClassName: c = "bg-error", detailsTrigger: l = "hover", onViewDetails: u, labels: d = {} }) => {
+	let { viewDetailsLabel: f = "View details", unsupportedTooltipLabel: p = "Selected model does not support skills. Remove the skill or select different model to proceed.", deletedTooltipLabel: g = "This skill has been deleted. Its details are no longer available.", notSharedTooltipLabel: _ = "You don't have access to this skill, so its details aren't shown. Ask the chat owner to share it with you." } = d, [v, y] = A(0), b = l === "click", x = () => {
 		y((e) => e + 1), u(t);
-	}, [C, w] = k(null), [T, E] = k(null);
-	return ee(() => {
+	}, [C, w] = A(null), [T, E] = A(null);
+	return D(() => {
 		if (!C) return;
 		let e = () => {
 			C.isConnected && E(C.getBoundingClientRect().width);
@@ -67,19 +67,19 @@ var B = {
 		asChild: !0,
 		placement: S.Top,
 		trigger: b ? h.Click : h.Hover,
-		contentClassName: V,
-		content: a == null ? i ? /* @__PURE__ */ P(U, { unsupportedMessage: p }) : /* @__PURE__ */ P(U, {
+		contentClassName: B,
+		content: a == null ? i ? /* @__PURE__ */ P(H, { unsupportedMessage: p }) : /* @__PURE__ */ P(H, {
 			description: n,
 			viewDetailsLabel: f,
 			onViewDetails: x
-		}) : /* @__PURE__ */ P(U, {
+		}) : /* @__PURE__ */ P(H, {
 			unresolvedReason: a,
 			deletedMessage: g,
 			notSharedMessage: _
 		}),
 		children: /* @__PURE__ */ F("span", {
 			tabIndex: 0,
-			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),
+			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, z.chip),
 			"aria-label": `/${e}`,
 			children: [/* @__PURE__ */ P("span", {
 				ref: w,
@@ -94,7 +94,7 @@ var B = {
 			})]
 		})
 	}, v);
-}, G = {
+}, W = {
 	row: "_row_1v431_1",
 	header: "_header_1v431_8",
 	emptyHint: "_emptyHint_1v431_12",
@@ -105,67 +105,67 @@ var B = {
 	rowLeaving: "_rowLeaving_1v431_32",
 	rowFadeOut: "_rowFadeOut_1v431_1",
 	listContent: "_listContent_1v431_60"
-}, 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" }) => {
-	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({
+}, ie = "px-3 pb-0.5 pt-2", ae = 180, G = 288, K = ({ 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" }) => {
+	let { myCollectionLabel: O = "My Collection", emptyHintLabel: ee = "Star a skill to pin it here", browseLabel: j = "Browse", removeFromFavoritesLabel: M = "Remove from favorites", viewDetailsLabel: te = "View details", noMatchingSkillsLabel: ne = "No matching skills" } = y, I = t({
 		"--fs-row-hover-bg": x?.rowHoverBackground,
 		"--fs-header-text": x?.headerText,
 		"--fs-empty-hint-text": x?.emptyHintText,
 		"--fs-star-color": x?.starColor,
 		"--fs-footer-border": x?.footerBorder
-	}), [L, R] = k(/* @__PURE__ */ new Set()), z = O(/* @__PURE__ */ new Map());
+	}), [L, re] = A(/* @__PURE__ */ new Set()), R = k(/* @__PURE__ */ new Map());
 	T(() => {
-		let e = z.current;
+		let e = R.current;
 		return () => {
 			e.forEach((e) => clearTimeout(e)), e.clear();
 		};
 	}, []);
-	let H = g != null, W = v && !H, q = H || W ? "none" : void 0, J = "button";
-	H ? J = "option" : W && (J = "menuitem");
-	let Y = E(), ae = h != null, X = h?.toLowerCase() ?? "", Z = ae ? n.filter((e) => e.name.toLowerCase().includes(X)) : n, Q = O(null), [oe, se] = k();
-	ee(() => {
-		Q.current && se(Math.min(Q.current.scrollHeight, K));
+	let V = g != null, U = v && !V, K = V || U ? "none" : void 0, q = "button";
+	V ? q = "option" : U && (q = "menuitem");
+	let J = E(), oe = h != null, Y = h?.toLowerCase() ?? "", X = oe ? n.filter((e) => e.name.toLowerCase().includes(Y)) : n, Z = k(null), [se, ce] = A();
+	D(() => {
+		Z.current && ce(Math.min(Z.current.scrollHeight, G));
 	}, [n, h]);
-	let ce = (e, t) => {
+	let le = (e, t) => {
 		e.target === e.currentTarget && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), i(t));
-	}, le = (e) => {
-		R((t) => new Set(t).add(e));
+	}, ue = (e) => {
+		re((t) => new Set(t).add(e));
 		let t = setTimeout(() => {
-			a?.(e), R((t) => {
+			a?.(e), re((t) => {
 				let n = new Set(t);
 				return n.delete(e), n;
-			}), z.current.delete(e);
-		}, ie);
-		z.current.set(e, t);
+			}), R.current.delete(e);
+		}, ae);
+		R.current.set(e, t);
 	};
 	return /* @__PURE__ */ F("div", {
-		className: r("flex w-full flex-col desktop:w-[280px]", u, B.favoritesPanel),
+		className: r("flex w-full flex-col desktop:w-[280px]", u, z.favoritesPanel),
 		style: I,
 		children: [
 			/* @__PURE__ */ P("p", {
-				id: Y,
-				className: r(C, re, G.header),
-				children: D
+				id: J,
+				className: r(C, ie, W.header),
+				children: O
 			}),
 			/* @__PURE__ */ P("div", {
-				className: r("max-h-72 min-h-0 flex-1 overflow-y-auto", G.listContent),
-				style: { maxHeight: oe },
+				className: r("max-h-72 min-h-0 flex-1 overflow-y-auto", W.listContent),
+				style: { maxHeight: se },
 				children: /* @__PURE__ */ P("div", {
-					ref: Q,
-					children: Z.length > 0 ? /* @__PURE__ */ P("ul", {
+					ref: Z,
+					children: X.length > 0 ? /* @__PURE__ */ P("ul", {
 						id: g,
-						role: H ? "listbox" : q,
-						"aria-labelledby": H ? Y : void 0,
+						role: V ? "listbox" : K,
+						"aria-labelledby": V ? J : void 0,
 						className: "flex flex-col gap-1 px-1 pb-1",
-						children: Z.map((t) => {
-							let n = H ? `${g}-${encodeURIComponent(t.id)}` : void 0, o = H ? -1 : void 0, u = /* @__PURE__ */ F("div", {
-								role: J,
+						children: X.map((t) => {
+							let n = V ? `${g}-${encodeURIComponent(t.id)}` : void 0, o = V ? -1 : void 0, u = /* @__PURE__ */ F("div", {
+								role: q,
 								id: n,
-								"aria-selected": H ? n === _ : void 0,
+								"aria-selected": V ? n === _ : void 0,
 								"aria-label": t.name,
 								tabIndex: 0,
-								className: r("flex cursor-pointer items-center gap-2 rounded-lg border border-transparent px-2 py-1.5 transition-colors", G.row, d),
+								className: r("flex cursor-pointer items-center gap-2 rounded-lg border border-transparent px-2 py-1.5 transition-colors", W.row, d),
 								onClick: () => i(t),
-								onKeyDown: (e) => ce(e, t),
+								onKeyDown: (e) => le(e, t),
 								children: [
 									/* @__PURE__ */ P(e, {
 										size: c.MD,
@@ -181,29 +181,29 @@ var B = {
 										className: r(S, "min-w-0 flex-1 text-start")
 									}),
 									a && /* @__PURE__ */ P(b, {
-										icon: /* @__PURE__ */ P(M, {
+										icon: /* @__PURE__ */ P(N, {
 											size: c.SM,
-											className: G.star,
+											className: W.star,
 											"aria-hidden": !0
 										}),
-										"aria-label": j,
+										"aria-label": M,
 										isSelected: !0,
 										tabIndex: o,
 										onClick: (e) => {
-											e.stopPropagation(), le(t.id);
+											e.stopPropagation(), ue(t.id);
 										}
 									})
 								]
 							});
 							return /* @__PURE__ */ P("li", {
-								role: q,
-								className: L.has(t.id) ? G.rowLeaving : G.rowEnter,
+								role: K,
+								className: L.has(t.id) ? W.rowLeaving : W.rowEnter,
 								children: s && !l ? /* @__PURE__ */ P(m, {
 									asChild: !0,
-									contentClassName: V,
-									content: /* @__PURE__ */ P(U, {
+									contentClassName: B,
+									content: /* @__PURE__ */ P(H, {
 										description: t.description,
-										viewDetailsLabel: ne,
+										viewDetailsLabel: te,
 										onViewDetails: () => s(t),
 										viewDetailsTabIndex: o
 									}),
@@ -211,29 +211,29 @@ var B = {
 								}) : u
 							}, t.id);
 						})
-					}) : ae && X !== "" ? /* @__PURE__ */ P("p", {
+					}) : oe && Y !== "" ? /* @__PURE__ */ P("p", {
 						role: "status",
 						"aria-live": "polite",
-						className: r(w, "px-4 py-4 text-start", G.emptyHint),
-						children: N
+						className: r(w, "px-4 py-4 text-start", W.emptyHint),
+						children: ne
 					}) : /* @__PURE__ */ P("p", {
-						className: r(w, "px-4 py-4 text-start", G.emptyHint),
-						children: te
+						className: r(w, "px-4 py-4 text-start", W.emptyHint),
+						children: ee
 					})
 				})
 			}),
 			/* @__PURE__ */ P("div", {
-				className: r("border-t px-2 py-3", G.footer),
+				className: r("border-t px-2 py-3", W.footer),
 				children: /* @__PURE__ */ P(f, {
-					role: W ? "menuitem" : void 0,
-					label: A,
+					role: U ? "menuitem" : void 0,
+					label: j,
 					className: "w-full justify-center",
 					onClick: o
 				})
 			})
 		]
 	});
-}, J = ".zip,.md", Y = ({ isOpen: e, errorText: t, isUploading: n = !1, accept: r = J, labels: i, onClose: a, onFilesSelected: o, onFilesRejected: s }) => {
+}, q = ".zip,.md", J = ({ isOpen: e, errorText: t, isUploading: n = !1, accept: r = q, labels: i, onClose: a, onFilesSelected: o, onFilesRejected: s }) => {
 	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 ?? {};
 	return /* @__PURE__ */ P(g, {
 		open: e,
@@ -244,7 +244,7 @@ var B = {
 		children: /* @__PURE__ */ F("div", {
 			className: "flex flex-col gap-4 px-6 py-4",
 			children: [/* @__PURE__ */ P(d, {
-				label: /* @__PURE__ */ F(N, { children: [/* @__PURE__ */ P("span", {
+				label: /* @__PURE__ */ F(ne, { children: [/* @__PURE__ */ P("span", {
 					className: "desktop:hidden",
 					children: u
 				}), /* @__PURE__ */ P("span", {
@@ -261,7 +261,7 @@ var B = {
 			}), n && /* @__PURE__ */ P(y, { ariaLabel: h })]
 		})
 	});
-}, ae = ({ isOpen: e, onClose: t, onSelect: n, title: r, renderContent: i }) => /* @__PURE__ */ P(g, {
+}, oe = ({ isOpen: e, onClose: t, onSelect: n, title: r, renderContent: i }) => /* @__PURE__ */ P(g, {
 	open: e,
 	header: r,
 	size: _.Lg,
@@ -275,21 +275,21 @@ var B = {
 			children: e && i(n, t)
 		})
 	})
-}), X = (e, t = null) => e.map((e) => e.type === R.Folder ? {
+}), Y = (e, t = null) => e.map((e) => e.type === re.Folder ? {
 	path: e.id,
 	name: e.name,
 	nodeType: I.FOLDER,
 	parentPath: t,
 	folderId: e.id,
-	items: X(e.items, e.id)
+	items: Y(e.items, e.id)
 } : {
 	path: e.id,
 	name: e.name,
 	nodeType: I.ITEM,
 	parentPath: t,
 	folderId: t ?? ""
-}), Z = ({ nodes: e, selectedFileId: t, expandedFolderIds: n, onToggleFolder: r, onSelectFile: i, onClose: a, ariaLabel: o }) => {
-	let s = D(() => X(e), [e]), c = D(() => new Set(n), [n]);
+}), X = ({ nodes: e, selectedFileId: t, expandedFolderIds: n, onToggleFolder: r, onSelectFile: i, onClose: a, ariaLabel: o }) => {
+	let s = O(() => Y(e), [e]), c = O(() => new Set(n), [n]);
 	return /* @__PURE__ */ P(L, {
 		items: s,
 		showFiles: !0,
@@ -307,10 +307,10 @@ var B = {
 		autoFocus: !0,
 		onEscape: a
 	});
-}, Q = (e) => /* @__PURE__ */ P(z, {
+}, Z = (e) => /* @__PURE__ */ P(R, {
 	...e,
-	renderContentFileTree: (e) => /* @__PURE__ */ P(Z, { ...e })
-}), oe = (e) => e == null || /[\s/]/.test(e), se = (e, t, n) => {
+	renderContentFileTree: (e) => /* @__PURE__ */ P(X, { ...e })
+}), se = (e) => e == null || /[\s/]/.test(e), ce = (e, t, n) => {
 	let r = [], i = 0;
 	return t.forEach((t, a) => {
 		let o = `/${n(t.url)}`, s = i;
@@ -318,7 +318,7 @@ var B = {
 			let t = e.indexOf(o, s);
 			if (t === -1) return;
 			let n = t + o.length;
-			if (oe(e[n])) {
+			if (se(e[n])) {
 				r.push({
 					skillIndex: a,
 					start: t,
@@ -329,14 +329,14 @@ var B = {
 			s = t + 1;
 		}
 	}), r;
-}, ce = (e, t) => {
+}, le = (e, t) => {
 	let n = /* @__PURE__ */ new Map();
 	t.forEach((e) => {
 		e.name !== "" && !n.has(e.name) && n.set(e.name, e.url);
 	});
 	let r = [...n.keys()].sort((e, t) => t.length - e.length), i = [], a = e.indexOf("/");
 	for (; a !== -1;) {
-		let t = a === 0 || /\s/.test(e[a - 1]), o = a + 1, s = t ? r.find((t) => e.startsWith(t, o) && oe(e[o + t.length])) : void 0, c = s == null ? void 0 : n.get(s);
+		let t = a === 0 || /\s/.test(e[a - 1]), o = a + 1, s = t ? r.find((t) => e.startsWith(t, o) && se(e[o + t.length])) : void 0, c = s == null ? void 0 : n.get(s);
 		s != null && c != null ? (i.push({
 			url: c,
 			name: s,
@@ -345,7 +345,7 @@ var B = {
 		}), a = e.indexOf("/", o + s.length)) : a = e.indexOf("/", o);
 	}
 	return i;
-}, le = (e, t) => {
+}, ue = (e, t) => {
 	let n = Math.min(e.length, t.length), r = 0;
 	for (; r < n && e[r] === t[r];) r += 1;
 	let i = n - r, a = 0;
@@ -355,13 +355,13 @@ var B = {
 		deletedLength: e.length - r - a,
 		insertedLength: t.length - r - a
 	};
-}, ue = (e, t) => {
+}, de = (e, t) => {
 	let n = t.start + t.deletedLength, r = t.insertedLength - t.deletedLength;
 	return e.reduce((e, i) => i.start + i.length <= t.start ? (e.push(i), e) : (i.start >= n && e.push({
 		...i,
 		start: i.start + r
 	}), e), []);
-}, $ = (e, t, n, r, i) => {
+}, Q = (e, t, n, r, i) => {
 	let a = r.length + 1, o = a + +!!i, s = e.map((e) => e.start >= t ? {
 		...e,
 		start: e.start + o
@@ -372,7 +372,7 @@ var B = {
 		length: a
 	};
 	return [...s, c].sort((e, t) => e.start - t.start);
-}, de = (e, t) => e.find((e) => e.start + e.length === t), fe = (e, t, n) => {
+}, fe = (e, t) => e.find((e) => e.start + e.length === t), pe = (e, t, n) => {
 	let r = t;
 	for (; r > 0 && !/\s/.test(e[r - 1]);) r--;
 	let i = r;
@@ -382,21 +382,21 @@ var B = {
 		start: r,
 		end: i
 	};
-}, pe = (e, t, n) => {
+}, me = (e, t, n) => {
 	if (n === "" || t.insertedLength < n.length) return;
 	let r = e.indexOf(n, Math.max(0, t.start - n.length)), i = t.start + t.insertedLength - n.length;
 	return r !== -1 && r <= i ? r : void 0;
-}, me = () => {
-	let [e, t] = k(""), [n, r] = k([]), i = O(e);
+}, he = () => {
+	let [e, t] = A(""), [n, r] = A([]), i = k(e);
 	i.current = e;
-	let a = O(n);
+	let a = k(n);
 	a.current = n;
-	let o = O(null), s = w((e) => {
-		let n = le(i.current, e), a = o.current;
+	let o = k(null), s = w((e) => {
+		let n = ue(i.current, e), a = o.current;
 		o.current = null;
-		let s = a == null ? void 0 : pe(e, n, a.text);
+		let s = a == null ? void 0 : me(e, n, a.text);
 		r((t) => {
-			let r = ue(t, n);
+			let r = de(t, n);
 			if (a == null || s == null) return r;
 			let i = a.mentions.map((e) => ({
 				...e,
@@ -406,11 +406,11 @@ var B = {
 		}), i.current = e, t(e);
 	}, []), c = w((e, n, a) => {
 		let o = i.current, s = !/^\s/.test(o.slice(a)), c = `/${n}${s ? " " : ""}`, l = o.slice(0, a) + c + o.slice(a);
-		return i.current = l, t(l), r((t) => $(t, a, e, n, s)), s;
+		return i.current = l, t(l), r((t) => Q(t, a, e, n, s)), s;
 	}, []), l = w((e, n, a) => {
 		let o = i.current, s = `/${n}`, c = o.slice(0, a) + s + o.slice(a);
-		i.current = c, t(c), r((t) => $(t, a, e, n, !1));
-	}, []), u = w((e) => de(a.current, e), []), d = D(() => {
+		i.current = c, t(c), r((t) => Q(t, a, e, n, !1));
+	}, []), u = w((e) => fe(a.current, e), []), d = O(() => {
 		if (n.length !== 0) return n.map((e) => ({ url: e.url }));
 	}, [n]), f = w((e, t) => {
 		o.current = t.length > 0 ? {
@@ -420,7 +420,7 @@ var B = {
 	}, []), p = w(() => {
 		t(""), r([]);
 	}, []), m = w((e, n, i) => {
-		let a = n ?? [], o = se(e, a, i);
+		let a = n ?? [], o = ce(e, a, i);
 		t(e), r(o.map((e) => {
 			let t = a[e.skillIndex];
 			return {
@@ -431,7 +431,7 @@ var B = {
 			};
 		}));
 	}, []);
-	return D(() => ({
+	return O(() => ({
 		draft: e,
 		anchors: n,
 		onDraftChange: s,
@@ -454,18 +454,18 @@ var B = {
 		p,
 		m
 	]);
-}, he = (e) => ({
+}, ge = (e) => ({
 	id: e.url,
 	name: e.name,
 	description: e.description
-}), ge = (e) => {
+}), $ = (e) => {
 	let t = e.split("/").filter((e) => e.length > 0);
 	return t[t.length - 1] ?? e;
 }, _e = (e) => {
 	let t = e.split("/").filter((e) => e.length > 0);
 	return t[0] !== "skills" || t.length < 3 ? null : t[1];
-}, 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 }) => {
-	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(() => [
+}, ve = (e, t) => _e(e) === t ? V.Deleted : V.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 }) => {
+	let { addMenuLabel: _ = "Skills", backLabel: v = "Back", catalogModalTitleLabel: y = "Use skill", emptyQueryHintLabel: b = "Type to filter", deletedTooltipLabel: x, notSharedTooltipLabel: S, unsupportedTooltipLabel: T, panelLabels: E } = c ?? {}, [D, j] = A(!1), [M, N] = A(null), [te, ne] = A(0), F = k(null), [I, L] = A(0), [re, R] = A(void 0), z = he(), B = O(() => [
 		...t,
 		...n ?? [],
 		...r ?? []
@@ -473,72 +473,72 @@ var B = {
 		t,
 		n,
 		r
-	]), H = D(() => new Map(V.map((e) => [e.url, e])), [V]), U = w((e) => H.get(e)?.name ?? ge(e), [H]), G = D(() => V.filter((e) => a.has(e.url)).map((e) => he(e)), [V, a]), re = B.anchors.length > 0 && !e, ie = D(() => B.anchors.map((t) => ({
+	]), V = O(() => new Map(B.map((e) => [e.url, e])), [B]), H = w((e) => V.get(e)?.name ?? $(e), [V]), W = O(() => B.filter((e) => a.has(e.url)).map((e) => ge(e)), [B, a]), ie = z.anchors.length > 0 && !e, ae = O(() => z.anchors.map((t) => ({
 		start: t.start,
 		length: t.length,
 		isUnsupported: !e,
-		render: () => /* @__PURE__ */ P(W, {
+		render: () => /* @__PURE__ */ P(U, {
 			name: t.name,
 			path: t.url,
 			labelClassName: d,
-			description: H.get(t.url)?.description,
+			description: V.get(t.url)?.description,
 			isUnsupported: !e,
 			detailsTrigger: f,
-			onViewDetails: M,
+			onViewDetails: N,
 			labels: {
 				viewDetailsLabel: E?.viewDetailsLabel,
 				unsupportedTooltipLabel: T
 			}
 		})
 	})), [
-		B.anchors,
+		z.anchors,
 		e,
-		H,
+		V,
 		d,
 		f,
 		E,
 		T
-	]), K = w((e, t, n) => {
-		let r = B.insertMention(e, t, n);
-		L((e) => e + 1), z(n + 1 + t.length + +!!r);
-	}, [B]), J = w((e) => {
-		let t = fe(B.draft, e, ye);
-		return t == null ? e : (B.onDraftChange(B.draft.slice(0, t.start) + B.draft.slice(t.end)), t.start);
-	}, [B]), Y = w((e) => {
-		let t = fe(B.draft, e, ye);
+	]), G = w((e, t, n) => {
+		let r = z.insertMention(e, t, n);
+		L((e) => e + 1), R(n + 1 + t.length + +!!r);
+	}, [z]), q = w((e) => {
+		let t = pe(z.draft, e, ye);
+		return t == null ? e : (z.onDraftChange(z.draft.slice(0, t.start) + z.draft.slice(t.end)), t.start);
+	}, [z]), J = w((e) => {
+		let t = pe(z.draft, e, ye);
 		if (t == null) return;
-		let n = B.anchors.find((e) => e.start === t.start && e.start + e.length === t.end);
+		let n = z.anchors.find((e) => e.start === t.start && e.start + e.length === t.end);
 		return {
 			position: t.start,
-			text: B.draft.slice(t.start, t.end),
+			text: z.draft.slice(t.start, t.end),
 			mentionUrl: n?.url
 		};
-	}, [B]), X = w(() => {
-		B.reset(), L((e) => e + 1), z(void 0);
-	}, [B]), { expectInsertion: Z } = B, Q = w((t) => {
-		Z(t, e ? ce(t, V) : []);
+	}, [z]), Y = w(() => {
+		z.reset(), L((e) => e + 1), R(void 0);
+	}, [z]), { expectInsertion: X } = z, Z = w((t) => {
+		X(t, e ? le(t, B) : []);
 	}, [
-		Z,
+		X,
 		e,
-		V
-	]), oe = w((e, t) => {
-		B.seedFromMessage(e, t, U), L((e) => e + 1), z(void 0);
-	}, [B, U]), le = w((e, t) => {
+		B
+	]), se = w((e, t) => {
+		z.seedFromMessage(e, t, H), L((e) => e + 1), R(void 0);
+	}, [z, H]), ue = w((e, t) => {
 		if (t == null || t.length === 0) return null;
-		let n = se(e, t, U), r = [], i = 0;
+		let n = ce(e, t, H), r = [], i = 0;
 		return n.forEach((n) => {
 			n.start > i && r.push(e.slice(i, n.start));
-			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;
+			let a = t[n.skillIndex], s = V.get(a.url), c = s?.name ?? $(a.url), l = s == null ? ve(a.url, o) : void 0;
 			r.push({
 				text: e.slice(n.start, n.start + n.length),
-				node: /* @__PURE__ */ P(W, {
+				node: /* @__PURE__ */ P(U, {
 					name: c,
 					path: a.url,
 					labelClassName: u,
 					description: s?.description,
 					unresolvedReason: l,
 					detailsTrigger: p,
-					onViewDetails: M,
+					onViewDetails: N,
 					labels: {
 						viewDetailsLabel: E?.viewDetailsLabel,
 						deletedTooltipLabel: x,
@@ -548,24 +548,24 @@ var B = {
 			}), i = n.start + n.length;
 		}), i < e.length && r.push(e.slice(i)), r;
 	}, [
-		U,
 		H,
+		V,
 		u,
 		p,
 		E,
 		o,
 		x,
 		S
-	]), ue = w((e) => e == null || e.length === 0 ? null : e.map((e) => {
-		let t = H.get(e.url), n = t?.name ?? ge(e.url), r = t == null ? ve(e.url, o) : void 0;
-		return /* @__PURE__ */ P(W, {
+	]), de = w((e) => e == null || e.length === 0 ? null : e.map((e) => {
+		let t = V.get(e.url), n = t?.name ?? $(e.url), r = t == null ? ve(e.url, o) : void 0;
+		return /* @__PURE__ */ P(U, {
 			name: n,
 			path: e.url,
 			labelClassName: u,
 			description: t?.description,
 			unresolvedReason: r,
 			detailsTrigger: p,
-			onViewDetails: M,
+			onViewDetails: N,
 			labels: {
 				viewDetailsLabel: E?.viewDetailsLabel,
 				deletedTooltipLabel: x,
@@ -573,79 +573,79 @@ var B = {
 			}
 		}, e.url);
 	}), [
-		H,
+		V,
 		u,
 		p,
 		E,
 		o,
 		x,
 		S
-	]), $ = w((e, t) => /* @__PURE__ */ P(q, {
-		favorites: G,
+	]), Q = w((e, t) => /* @__PURE__ */ P(K, {
+		favorites: W,
 		isMenu: !0,
 		onSelect: (n) => {
-			K(n.id, n.name, J(t)), e();
+			G(n.id, n.name, q(t)), e();
 		},
 		onToggleFavorite: s,
 		onBrowse: () => {
-			let n = Y(t), r = J(t);
-			N(r), F.current = n ?? null, e(), A(!0);
+			let n = J(t), r = q(t);
+			ne(r), F.current = n ?? null, e(), j(!0);
 		},
 		onViewDetails: (n) => {
-			J(t), e(), M(n.id);
+			q(t), e(), N(n.id);
 		},
 		isRowTooltipHidden: m,
 		labels: E
 	}), [
+		W,
 		G,
-		K,
+		q,
 		J,
-		Y,
 		s,
 		m,
 		E
-	]), de = D(() => e ? {
+	]), fe = O(() => e ? {
 		key: "skills",
 		title: _,
-		icon: /* @__PURE__ */ P(te, {
+		icon: /* @__PURE__ */ P(ee, {
 			size: i,
 			"aria-hidden": !0,
 			stroke: l
 		}),
-		renderOverlay: $,
+		renderOverlay: Q,
 		backLabel: v
 	} : void 0, [
 		e,
 		_,
 		v,
-		$
-	]), pe = D(() => e ? {
+		Q
+	]), me = O(() => e ? {
 		triggerPrefix: ye,
 		menuLabel: _,
 		emptyQueryHint: b,
-		onTextPaste: Q,
-		renderMenu: ({ query: e, caretPosition: t, close: n, listboxId: r, activeOptionId: i }) => /* @__PURE__ */ P(q, {
-			favorites: G,
+		onTextPaste: Z,
+		renderMenu: ({ query: e, caretPosition: t, close: n, listboxId: r, activeOptionId: i }) => /* @__PURE__ */ P(K, {
+			favorites: W,
 			searchQuery: e,
 			listboxId: r,
 			activeOptionId: i,
 			onSelect: (e) => {
-				n({ consumeQuery: !0 }), K(e.id, e.name, t);
+				n({ consumeQuery: !0 }), G(e.id, e.name, t);
 			},
 			onToggleFavorite: s,
 			onBrowse: () => {
-				let r = `${ye}${e}`, i = B.anchors.find((e) => e.start === t && e.length === r.length);
+				let r = `${ye}${e}`, i = z.anchors.find((e) => e.start === t && e.length === r.length);
 				n({
 					consumeQuery: !0,
 					returnFocus: !1
-				}), N(t), F.current = {
+				}), ne(t), F.current = {
 					position: t,
 					text: r,
 					mentionUrl: i?.url
-				}, A(!0);
+				}, j(!0);
 			},
 			onViewDetails: (e) => {
-				n({ consumeQuery: !0 }), M(e.id);
+				n({ consumeQuery: !0 }), N(e.id);
 			},
 			isRowTooltipHidden: m,
 			labels: E
@@ -654,28 +654,28 @@ var B = {
 		e,
 		_,
 		b,
+		W,
 		G,
-		K,
-		B.anchors,
+		z.anchors,
 		s,
 		m,
 		E,
-		Q
+		Z
 	]), _e = w(() => {
-		A(!1);
+		j(!1);
 		let e = F.current;
 		if (F.current = null, e == null) return;
 		let { position: t, text: n, mentionUrl: r } = e;
-		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);
-	}, [B]);
+		r == null ? z.onDraftChange(z.draft.slice(0, t) + n + z.draft.slice(t)) : z.restoreMention(r, n.slice(1), t), L((e) => e + 1), R(t + n.length);
+	}, [z]);
 	return {
-		skillMenuOverlay: de,
-		commandMenu: pe,
-		skillCatalogModal: /* @__PURE__ */ P(ae, {
-			isOpen: ee,
+		skillMenuOverlay: fe,
+		commandMenu: me,
+		skillCatalogModal: /* @__PURE__ */ P(oe, {
+			isOpen: D,
 			onClose: _e,
 			onSelect: (e) => {
-				F.current = null, K(e, U(e), ne), A(!1);
+				F.current = null, G(e, H(e), te), j(!1);
 			},
 			title: y,
 			renderContent: h
@@ -683,23 +683,23 @@ var B = {
 		skillDetailsPanel: /* @__PURE__ */ P(C, {
 			fallback: null,
 			children: /* @__PURE__ */ P(g, {
-				skillId: j,
-				onClose: () => M(null)
+				skillId: M,
+				onClose: () => N(null)
 			})
 		}),
-		message: B.draft,
+		message: z.draft,
 		messageRevision: I,
-		activeMentions: ie,
-		onDraftChange: B.onDraftChange,
-		onBackspaceAtCaret: B.onBackspaceAtCaret,
-		caretPositionOverride: R,
-		isSkillUnsupported: re,
-		selectedSkills: B.orderedSkills,
-		resetSkillMentions: X,
-		seedSkillMentions: oe,
-		recognizeMentionsInInsertion: Q,
-		renderHistorySkillSegments: le,
-		renderHistorySkills: ue
+		activeMentions: ae,
+		onDraftChange: z.onDraftChange,
+		onBackspaceAtCaret: z.onBackspaceAtCaret,
+		caretPositionOverride: re,
+		isSkillUnsupported: ie,
+		selectedSkills: z.orderedSkills,
+		resetSkillMentions: Y,
+		seedSkillMentions: se,
+		recognizeMentionsInInsertion: Z,
+		renderHistorySkillSegments: ue,
+		renderHistorySkills: de
 	};
 }, xe = {
 	background: "_background_1ult0_1",
@@ -708,12 +708,12 @@ var B = {
 	clear: "_clear_1ult0_13",
 	invalid: "_invalid_1ult0_17"
 }, 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 }) => {
-	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, {
+	let [g, _] = A(!1), [y, b] = A(""), S = E(), C = i.some((e) => n(e, l)), w = l && !u, T = g && w, D = i.length > 0 ? f.unsupportedTooltipLabel : void 0, O = !l && i.length === 0, k = O ? f.unavailableHintLabel ?? Ce : void 0, ee = new Map(i.map((e) => [e, {
 		id: e,
 		name: o?.[e] || e
 	}]));
-	s.forEach((e) => M.set(e.id, e));
-	let ne = [...M.values()].map((t) => ({
+	s.forEach((e) => ee.set(e.id, e));
+	let j = [...ee.values()].map((t) => ({
 		value: t.id,
 		label: t.name,
 		labelNode: y.trim() ? /* @__PURE__ */ P(p, {
@@ -726,7 +726,7 @@ var B = {
 			initialsName: t.name
 		}),
 		disabled: !l
-	})), N = {
+	})), M = {
 		...t({
 			"--ssf-text": h?.colors?.text,
 			"--ssf-bg": h?.colors?.background,
@@ -735,21 +735,11 @@ var B = {
 		}),
 		...h?.cssVars
 	};
-	return ee(() => {
-		let e = S.current?.querySelector("[role=\"combobox\"]");
-		e && (j ? e.setAttribute("aria-describedby", C) : e.removeAttribute("aria-describedby"), d || w ? e.setAttribute("aria-invalid", "true") : e.removeAttribute("aria-invalid"));
-	}, [
-		j,
-		C,
-		d,
-		u,
-		w
-	]), /* @__PURE__ */ F("div", {
-		ref: S,
-		className: r("min-w-0", m, B.selectorField),
-		style: N,
+	return /* @__PURE__ */ F("div", {
+		className: r("min-w-0", m, z.selectorField),
+		style: M,
 		children: [/* @__PURE__ */ P(x, {
-			tooltip: te,
+			tooltip: D,
 			hideTooltip: l,
 			triggerClassName: "block w-full min-w-0",
 			children: /* @__PURE__ */ P("div", {
@@ -757,34 +747,35 @@ var B = {
 				children: /* @__PURE__ */ P(v, {
 					multiple: !0,
 					searchable: !0,
-					open: D,
+					open: T,
 					onOpenChange: (e) => {
-						(!e || T) && _(e);
+						(!e || w) && _(e);
 					},
 					onSearchQueryChange: b,
 					value: i,
 					onChange: (e) => {
 						u || a(Array.isArray(e) ? e : [e]);
 					},
-					options: ne,
+					options: j,
 					placeholder: f.placeholder,
 					labelProps: { label: f.fieldLabel },
 					error: d,
+					ariaDescribedBy: k ? S : void 0,
 					searchPlaceholder: f.searchPlaceholder ?? "Search skills",
 					emptyStateTitle: y.trim() ? f.noMatchingSkillsLabel ?? "No matching skills" : f.emptyLabel ?? "No skills available",
-					disabled: u || A,
-					invalid: !!d || w,
+					disabled: u || O,
+					invalid: !!d || C,
 					className: "w-full min-w-0",
-					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),
+					fieldClassName: r(w ? "cursor-pointer" : "cursor-not-allowed", "--ssf-bg" in M && xe.background, "--ssf-border" in M && xe.border, "--ssf-text" in M && xe.value, (d || C) && xe.invalid, h?.typography?.fontClassName ?? "dial-small-text", h?.triggerClassName),
 					listClassName: "w-[min(var(--reference-width),calc(100vw-2rem))] max-w-full"
 				})
 			})
-		}), j && /* @__PURE__ */ P("span", {
-			id: C,
+		}), k && /* @__PURE__ */ P("span", {
+			id: S,
 			className: "sr-only",
-			children: j
+			children: k
 		})]
 	});
 };
 //#endregion
-export { W as ChatSkill, q as FavoriteSkillsPanel, B as SKILLS_CLASS, Y as SkillArchiveUploadDialog, ae as SkillCatalogModal, Z as SkillContentFileTree, Q as SkillDetailsSidePanel, U as SkillInfoTooltipContent, we as SkillSelectorField, H as SkillUnresolvedReason, he as buildFavoriteSkillItem, le as diffTextChange, de as findMentionAtCaret, ge as getSkillFallbackName, $ as insertAnchor, se as matchSkillMentions, ue as reconcileAnchors, me as useSkillMentions, be as useSkillSelectorOverlay };
+export { U as ChatSkill, K as FavoriteSkillsPanel, z as SKILLS_CLASS, J as SkillArchiveUploadDialog, oe as SkillCatalogModal, X as SkillContentFileTree, Z as SkillDetailsSidePanel, H as SkillInfoTooltipContent, we as SkillSelectorField, V as SkillUnresolvedReason, ge as buildFavoriteSkillItem, ue as diffTextChange, fe as findMentionAtCaret, $ as getSkillFallbackName, Q as insertAnchor, ce as matchSkillMentions, de as reconcileAnchors, he as useSkillMentions, be as useSkillSelectorOverlay };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@epam/ai-dial-skills",
   "description": "Host-agnostic UI for picking a favorite skill to attach to a chat input",
-  "version": "1.3.0-dev.159",
+  "version": "1.3.0-dev.160",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./index.js",
@@ -18,13 +18,13 @@
   },
   "dependencies": {
     "@tabler/icons-react": "^3.44.0",
-    "@epam/ai-dial-catalog": "1.3.0-dev.159",
-    "@epam/ai-dial-conversation-input": "1.3.0-dev.159"
+    "@epam/ai-dial-catalog": "1.3.0-dev.160",
+    "@epam/ai-dial-conversation-input": "1.3.0-dev.160"
   },
   "peerDependencies": {
-    "@epam/ai-dial-chat-shared": "1.3.0-dev.159",
+    "@epam/ai-dial-chat-shared": "1.3.0-dev.160",
     "@epam/ai-dial-react-file-manager": "^0.4.0-dev.11",
-    "@epam/ai-dial-ui-kit": "^0.16.0-dev.22",
+    "@epam/ai-dial-ui-kit": "^0.16.0-dev.33",
     "react": "^19.2.8"
   },
   "repository": {