@epam/ai-dial-skills 1.2.0-dev.174 → 1.2.0-dev.181

package/components/SkillContentFileTree/SkillContentFileTree.d.ts

@@ -0,0 +1,11 @@
+import { CatalogContentFileTreeRenderProps } from '@epam/ai-dial-catalog';
+import { FC } from 'react';
+/**
+ * The skill details panel's Content-tab file tree, drawn with the file
+ * manager's `DialFoldersTree` so it matches the skill editor's tree. It is
+ * read-only — no context menu, no rename — and fully controlled by the
+ * catalog's `DetailsPanel`: expansion changes are reported back one folder
+ * at a time through `onToggleFolder`.
+ */
+export declare const SkillContentFileTree: FC<CatalogContentFileTreeRenderProps>;
+//# sourceMappingURL=SkillContentFileTree.d.ts.map

package/components/SkillContentFileTree/SkillContentFileTree.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkillContentFileTree.d.ts","sourceRoot":"","sources":["../../../src/components/SkillContentFileTree/SkillContentFileTree.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iCAAiC,EAAE,MAAM,uBAAuB,CAAC;AAM/E,OAAO,EAAE,KAAK,EAAE,EAAW,MAAM,OAAO,CAAC;AAGzC;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,iCAAiC,CA2CtE,CAAC"}

package/components/SkillDetailsSidePanel/SkillDetailsSidePanel.d.ts

@@ -4,7 +4,8 @@ import { SkillDetailsSidePanelProps } from '../../models/skill-details-side-pane
  * Right-anchored side panel showing one skill's details, composed from
  * `@epam/ai-dial-catalog`'s `DetailsPanel` — the skills-scoped composition
  * point for hosts that surface skill details outside the Catalog page,
- * without its page chrome.
+ * without its page chrome. The Content tab's file selector renders the file
+ * manager's folders tree, the same tree the skill editor shows.
  */
 export declare const SkillDetailsSidePanel: FC<SkillDetailsSidePanelProps>;
 //# sourceMappingURL=SkillDetailsSidePanel.d.ts.map

package/components/SkillDetailsSidePanel/SkillDetailsSidePanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SkillDetailsSidePanel.d.ts","sourceRoot":"","sources":["../../../src/components/SkillDetailsSidePanel/SkillDetailsSidePanel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,6CAA6C,CAAC;AAE9F;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,EAAE,EAAE,CAAC,0BAA0B,CAEjC,CAAC"}
+{"version":3,"file":"SkillDetailsSidePanel.d.ts","sourceRoot":"","sources":["../../../src/components/SkillDetailsSidePanel/SkillDetailsSidePanel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,6CAA6C,CAAC;AAG9F;;;;;;GAMG;AACH,eAAO,MAAM,qBAAqB,EAAE,EAAE,CAAC,0BAA0B,CAShE,CAAC"}

package/index.d.ts

@@ -2,6 +2,7 @@ export { ChatSkill } from './components/ChatSkill/ChatSkill';
 export { FavoriteSkillsPanel } from './components/FavoriteSkillsPanel/FavoriteSkillsPanel';
 export { SkillArchiveUploadDialog } from './components/SkillArchiveUploadDialog/SkillArchiveUploadDialog';
 export { SkillCatalogModal } from './components/SkillCatalogModal/SkillCatalogModal';
+export { SkillContentFileTree } from './components/SkillContentFileTree/SkillContentFileTree';
 export { SkillDetailsSidePanel } from './components/SkillDetailsSidePanel/SkillDetailsSidePanel';
 export { SkillInfoTooltipContent } from './components/SkillInfoTooltipContent/SkillInfoTooltipContent';
 export { useSkillMentions } from './hooks/useSkillMentions/useSkillMentions';

package/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,sDAAsD,CAAC;AAC3F,OAAO,EAAE,wBAAwB,EAAE,MAAM,gEAAgE,CAAC;AAC1G,OAAO,EAAE,iBAAiB,EAAE,MAAM,kDAAkD,CAAC;AACrF,OAAO,EAAE,qBAAqB,EAAE,MAAM,0DAA0D,CAAC;AACjG,OAAO,EAAE,uBAAuB,EAAE,MAAM,8DAA8D,CAAC;AACvG,OAAO,EAAE,gBAAgB,EAAE,MAAM,2CAA2C,CAAC;AAC7E,OAAO,EAAE,uBAAuB,EAAE,MAAM,yDAAyD,CAAC;AAClG,OAAO,EAAE,sBAAsB,EAAE,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EACL,cAAc,EACd,kBAAkB,EAClB,YAAY,EACZ,gBAAgB,GACjB,MAAM,gCAAgC,CAAC;AACxC,YAAY,EACV,uBAAuB,EACvB,eAAe,EACf,cAAc,GACf,MAAM,2BAA2B,CAAC;AACnC,YAAY,EACV,iBAAiB,EACjB,iBAAiB,GAClB,MAAM,8BAA8B,CAAC;AACtC,YAAY,EACV,yBAAyB,EACzB,yBAAyB,EACzB,wBAAwB,GACzB,MAAM,sCAAsC,CAAC;AAC9C,YAAY,EACV,8BAA8B,EAC9B,6BAA6B,GAC9B,MAAM,4CAA4C,CAAC;AACpD,YAAY,EAAE,sBAAsB,EAAE,MAAM,oCAAoC,CAAC;AACjF,YAAY,EAAE,0BAA0B,EAAE,MAAM,yCAAyC,CAAC;AAC1F,YAAY,EAAE,4BAA4B,EAAE,MAAM,2CAA2C,CAAC;AAC9F,YAAY,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACxE,YAAY,EACV,+BAA+B,EAC/B,0BAA0B,EAC1B,8BAA8B,EAC9B,6BAA6B,GAC9B,MAAM,iCAAiC,CAAC;AACzC,YAAY,EAAE,sBAAsB,EAAE,MAAM,2CAA2C,CAAC;AACxF,YAAY,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AAC3E,YAAY,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAC9D,OAAO,EAAE,kBAAkB,EAAE,MAAM,oDAAoD,CAAC;AACxF,YAAY,EACV,uBAAuB,EACvB,wBAAwB,EACxB,wBAAwB,GACzB,MAAM,qCAAqC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,sDAAsD,CAAC;AAC3F,OAAO,EAAE,wBAAwB,EAAE,MAAM,gEAAgE,CAAC;AAC1G,OAAO,EAAE,iBAAiB,EAAE,MAAM,kDAAkD,CAAC;AACrF,OAAO,EAAE,oBAAoB,EAAE,MAAM,wDAAwD,CAAC;AAC9F,OAAO,EAAE,qBAAqB,EAAE,MAAM,0DAA0D,CAAC;AACjG,OAAO,EAAE,uBAAuB,EAAE,MAAM,8DAA8D,CAAC;AACvG,OAAO,EAAE,gBAAgB,EAAE,MAAM,2CAA2C,CAAC;AAC7E,OAAO,EAAE,uBAAuB,EAAE,MAAM,yDAAyD,CAAC;AAClG,OAAO,EAAE,sBAAsB,EAAE,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EACL,cAAc,EACd,kBAAkB,EAClB,YAAY,EACZ,gBAAgB,GACjB,MAAM,gCAAgC,CAAC;AACxC,YAAY,EACV,uBAAuB,EACvB,eAAe,EACf,cAAc,GACf,MAAM,2BAA2B,CAAC;AACnC,YAAY,EACV,iBAAiB,EACjB,iBAAiB,GAClB,MAAM,8BAA8B,CAAC;AACtC,YAAY,EACV,yBAAyB,EACzB,yBAAyB,EACzB,wBAAwB,GACzB,MAAM,sCAAsC,CAAC;AAC9C,YAAY,EACV,8BAA8B,EAC9B,6BAA6B,GAC9B,MAAM,4CAA4C,CAAC;AACpD,YAAY,EAAE,sBAAsB,EAAE,MAAM,oCAAoC,CAAC;AACjF,YAAY,EAAE,0BAA0B,EAAE,MAAM,yCAAyC,CAAC;AAC1F,YAAY,EAAE,4BAA4B,EAAE,MAAM,2CAA2C,CAAC;AAC9F,YAAY,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACxE,YAAY,EACV,+BAA+B,EAC/B,0BAA0B,EAC1B,8BAA8B,EAC9B,6BAA6B,GAC9B,MAAM,iCAAiC,CAAC;AACzC,YAAY,EAAE,sBAAsB,EAAE,MAAM,2CAA2C,CAAC;AACxF,YAAY,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AAC3E,YAAY,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAC9D,OAAO,EAAE,kBAAkB,EAAE,MAAM,oDAAoD,CAAC;AACxF,YAAY,EACV,uBAAuB,EACvB,wBAAwB,EACxB,wBAAwB,GACzB,MAAM,qCAAqC,CAAC"}

package/index.js

@@ -3,13 +3,14 @@ import { BASE_ICON_SIZE as i, Button as a, ButtonAppearance as o, ButtonVariant
 import { Suspense as x, useCallback as S, useEffect as C, useId as ee, useLayoutEffect as w, useMemo as T, useRef as E, useState as D } from "react";
 import { IconBlocks as O, IconChevronDown as te, IconEye as ne, IconStarFilled as k, IconX as re } from "@tabler/icons-react";
 import { Fragment as A, jsx as j, jsxs as M } from "react/jsx-runtime";
-import { DetailsPanel as N } from "@epam/ai-dial-catalog";
+import { DialFileNodeType as N, DialFoldersTree as P } from "@epam/ai-dial-react-file-manager";
+import { CatalogContentNodeType as F, DetailsPanel as I } from "@epam/ai-dial-catalog";
 //#region src/constants/public-class-names.ts
-var P = {
+var L = {
 	selectorField: "dial-skills-selector-field",
 	favoritesPanel: "dial-skills-favorites-panel",
 	chip: "dial-skills-chip"
-}, F = ({ description: e, unsupportedMessage: t, viewDetailsLabel: n = "View details", onViewDetails: r, viewDetailsTabIndex: i }) => t == null ? /* @__PURE__ */ M("div", {
+}, R = ({ description: e, unsupportedMessage: t, viewDetailsLabel: n = "View details", onViewDetails: r, viewDetailsTabIndex: i }) => t == null ? /* @__PURE__ */ M("div", {
 	className: "flex flex-col gap-3",
 	children: [e != null && e !== "" && /* @__PURE__ */ j("p", {
 		className: "text-start",
@@ -30,7 +31,7 @@ var P = {
 }) : /* @__PURE__ */ j("p", {
 	className: "text-start",
 	children: t
-}), I = ({ name: e, path: t, description: n, isUnsupported: i = !1, labelClassName: a = "dial-body-paragraph-text text-accent", unsupportedLabelClassName: o = "text-error", unsupportedClassName: s = "bg-error", detailsTrigger: c = "hover", onViewDetails: l, labels: u = {} }) => {
+}), z = ({ name: e, path: t, description: n, isUnsupported: i = !1, labelClassName: a = "dial-body-paragraph-text text-accent", unsupportedLabelClassName: o = "text-error", unsupportedClassName: s = "bg-error", detailsTrigger: c = "hover", onViewDetails: l, labels: u = {} }) => {
 	let { viewDetailsLabel: d = "View details", unsupportedTooltipLabel: f = "Selected model does not support skills. Remove the skill or select different model to proceed." } = u, [p, m] = D(0), [g, _] = D(!1), v = c === "click", y = () => {
 		_(!1), m((e) => e + 1), l(t);
 	}, x = (e) => {
@@ -44,14 +45,14 @@ var P = {
 		open: v ? g : void 0,
 		onOpenChange: v ? _ : void 0,
 		contentClassName: "max-w-[550px]",
-		content: i ? /* @__PURE__ */ j(F, { unsupportedMessage: f }) : /* @__PURE__ */ j(F, {
+		content: i ? /* @__PURE__ */ j(R, { unsupportedMessage: f }) : /* @__PURE__ */ j(R, {
 			description: n,
 			viewDetailsLabel: d,
 			onViewDetails: y
 		}),
 		children: /* @__PURE__ */ M("span", {
 			tabIndex: 0,
-			className: r("relative -me-1 -ms-1 inline-block cursor-pointer select-text rounded-full pe-1 ps-1", i ? s : "hover:bg-info focus-visible:bg-info active:bg-info", i ? r(a, o) : a, P.chip),
+			className: r("relative -me-1 -ms-1 inline-block cursor-pointer select-text rounded-full pe-1 ps-1", i ? s : "hover:bg-info focus-visible:bg-info active:bg-info", i ? r(a, o) : a, L.chip),
 			"aria-label": `/${e}`,
 			onClick: v ? () => _(!0) : void 0,
 			onKeyDown: x,
@@ -68,7 +69,7 @@ var P = {
 			})]
 		})
 	}, p);
-}, L = {
+}, B = {
 	row: "_row_1v431_1",
 	header: "_header_1v431_8",
 	emptyHint: "_emptyHint_1v431_12",
@@ -79,65 +80,65 @@ var P = {
 	rowLeaving: "_rowLeaving_1v431_32",
 	rowFadeOut: "_rowFadeOut_1v431_1",
 	listContent: "_listContent_1v431_60"
-}, R = "px-3 pb-0.5 pt-2", ie = 180, z = 288, B = ({ favorites: n, onSelect: i, onToggleFavorite: a, onBrowse: o, onViewDetails: s, className: l, rowClassName: u, searchQuery: d, listboxId: m, activeOptionId: g, isMenu: _ = !1, labels: v = {}, colors: b, nameClassName: x = "dial-small-text", headerClassName: S = "dial-tiny-lead-semi-text", emptyHintClassName: T = "dial-small-text" }) => {
-	let { myCollectionLabel: O = "My Collection", emptyHintLabel: te = "Star a skill to pin it here", browseLabel: ne = "Browse", removeFromFavoritesLabel: re = "Remove from favorites", viewDetailsLabel: A = "View details", noMatchingSkillsLabel: N = "No matching skills" } = v, I = t({
+}, V = "px-3 pb-0.5 pt-2", H = 180, U = 288, W = ({ favorites: n, onSelect: i, onToggleFavorite: a, onBrowse: o, onViewDetails: s, className: l, rowClassName: u, searchQuery: d, listboxId: m, activeOptionId: g, isMenu: _ = !1, labels: v = {}, colors: b, nameClassName: x = "dial-small-text", headerClassName: S = "dial-tiny-lead-semi-text", emptyHintClassName: T = "dial-small-text" }) => {
+	let { myCollectionLabel: O = "My Collection", emptyHintLabel: te = "Star a skill to pin it here", browseLabel: ne = "Browse", removeFromFavoritesLabel: re = "Remove from favorites", viewDetailsLabel: A = "View details", noMatchingSkillsLabel: N = "No matching skills" } = v, P = t({
 		"--fs-row-hover-bg": b?.rowHoverBackground,
 		"--fs-header-text": b?.headerText,
 		"--fs-empty-hint-text": b?.emptyHintText,
 		"--fs-star-color": b?.starColor,
 		"--fs-footer-border": b?.footerBorder
-	}), [B, V] = D(/* @__PURE__ */ new Set()), H = E(/* @__PURE__ */ new Map());
+	}), [F, I] = D(/* @__PURE__ */ new Set()), z = E(/* @__PURE__ */ new Map());
 	C(() => {
-		let e = H.current;
+		let e = z.current;
 		return () => {
 			e.forEach((e) => clearTimeout(e)), e.clear();
 		};
 	}, []);
-	let U = m != null, W = _ && !U, G = U || W ? "none" : void 0, K = "button";
-	U ? K = "option" : W && (K = "menuitem");
-	let q = ee(), J = d != null, Y = d?.toLowerCase() ?? "", X = J ? n.filter((e) => e.name.toLowerCase().includes(Y)) : n, Z = E(null), [ae, Q] = D();
+	let W = m != null, G = _ && !W, K = W || G ? "none" : void 0, q = "button";
+	W ? q = "option" : G && (q = "menuitem");
+	let J = ee(), Y = d != null, X = d?.toLowerCase() ?? "", Z = Y ? n.filter((e) => e.name.toLowerCase().includes(X)) : n, Q = E(null), [ie, ae] = D();
 	w(() => {
-		Z.current && Q(Math.min(Z.current.scrollHeight, z));
+		Q.current && ae(Math.min(Q.current.scrollHeight, U));
 	}, [n, d]);
 	let oe = (e, t) => {
 		e.target === e.currentTarget && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), i(t));
-	}, $ = (e) => {
-		V((t) => new Set(t).add(e));
+	}, se = (e) => {
+		I((t) => new Set(t).add(e));
 		let t = setTimeout(() => {
-			a?.(e), V((t) => {
+			a?.(e), I((t) => {
 				let n = new Set(t);
 				return n.delete(e), n;
-			}), H.current.delete(e);
-		}, ie);
-		H.current.set(e, t);
+			}), z.current.delete(e);
+		}, H);
+		z.current.set(e, t);
 	};
 	return /* @__PURE__ */ M("div", {
-		className: r("flex w-full flex-col desktop:w-[280px]", l, P.favoritesPanel),
-		style: I,
+		className: r("flex w-full flex-col desktop:w-[280px]", l, L.favoritesPanel),
+		style: P,
 		children: [
 			/* @__PURE__ */ j("p", {
-				id: q,
-				className: r(S, R, L.header),
+				id: J,
+				className: r(S, V, B.header),
 				children: O
 			}),
 			/* @__PURE__ */ j("div", {
-				className: r("max-h-72 min-h-0 flex-1 overflow-y-auto", L.listContent),
-				style: { maxHeight: ae },
+				className: r("max-h-72 min-h-0 flex-1 overflow-y-auto", B.listContent),
+				style: { maxHeight: ie },
 				children: /* @__PURE__ */ j("div", {
-					ref: Z,
-					children: X.length > 0 ? /* @__PURE__ */ j("ul", {
+					ref: Q,
+					children: Z.length > 0 ? /* @__PURE__ */ j("ul", {
 						id: m,
-						role: U ? "listbox" : G,
-						"aria-labelledby": U ? q : void 0,
+						role: W ? "listbox" : K,
+						"aria-labelledby": W ? J : void 0,
 						className: "flex flex-col gap-1 px-1 pb-1",
-						children: X.map((t) => {
-							let n = U ? `${m}-${encodeURIComponent(t.id)}` : void 0, o = U ? -1 : void 0, l = /* @__PURE__ */ M("div", {
-								role: K,
+						children: Z.map((t) => {
+							let n = W ? `${m}-${encodeURIComponent(t.id)}` : void 0, o = W ? -1 : void 0, l = /* @__PURE__ */ M("div", {
+								role: q,
 								id: n,
-								"aria-selected": U ? n === g : void 0,
+								"aria-selected": W ? n === g : 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", L.row, u),
+								className: r("flex cursor-pointer items-center gap-2 rounded-lg border border-transparent px-2 py-1.5 transition-colors", B.row, u),
 								onClick: () => i(t),
 								onKeyDown: (e) => oe(e, t),
 								children: [
@@ -157,25 +158,25 @@ var P = {
 									a && /* @__PURE__ */ j(y, {
 										icon: /* @__PURE__ */ j(k, {
 											size: c.SM,
-											className: L.star,
+											className: B.star,
 											"aria-hidden": !0
 										}),
 										"aria-label": re,
 										isSelected: !0,
 										tabIndex: o,
 										onClick: (e) => {
-											e.stopPropagation(), $(t.id);
+											e.stopPropagation(), se(t.id);
 										}
 									})
 								]
 							});
 							return /* @__PURE__ */ j("li", {
-								role: G,
-								className: B.has(t.id) ? L.rowLeaving : L.rowEnter,
+								role: K,
+								className: F.has(t.id) ? B.rowLeaving : B.rowEnter,
 								children: s ? /* @__PURE__ */ j(h, {
 									asChild: !0,
 									contentClassName: "max-w-[550px]",
-									content: /* @__PURE__ */ j(F, {
+									content: /* @__PURE__ */ j(R, {
 										description: t.description,
 										viewDetailsLabel: A,
 										onViewDetails: () => s(t),
@@ -185,21 +186,21 @@ var P = {
 								}) : l
 							}, t.id);
 						})
-					}) : J && Y !== "" ? /* @__PURE__ */ j("p", {
+					}) : Y && X !== "" ? /* @__PURE__ */ j("p", {
 						role: "status",
 						"aria-live": "polite",
-						className: r(T, "px-4 py-4 text-start", L.emptyHint),
+						className: r(T, "px-4 py-4 text-start", B.emptyHint),
 						children: N
 					}) : /* @__PURE__ */ j("p", {
-						className: r(T, "px-4 py-4 text-start", L.emptyHint),
+						className: r(T, "px-4 py-4 text-start", B.emptyHint),
 						children: te
 					})
 				})
 			}),
 			/* @__PURE__ */ j("div", {
-				className: r("border-t px-2 py-3", L.footer),
+				className: r("border-t px-2 py-3", B.footer),
 				children: /* @__PURE__ */ j(f, {
-					role: W ? "menuitem" : void 0,
+					role: G ? "menuitem" : void 0,
 					label: ne,
 					className: "w-full justify-center",
 					onClick: o
@@ -207,7 +208,7 @@ var P = {
 			})
 		]
 	});
-}, V = ".zip,.md", H = ({ isOpen: e, errorText: t, accept: n = V, labels: r, onClose: i, onFilesSelected: a, onFilesRejected: o }) => {
+}, G = ".zip,.md", K = ({ isOpen: e, errorText: t, accept: n = G, labels: r, onClose: i, onFilesSelected: a, onFilesRejected: o }) => {
 	let { dialogTitle: s = "Upload skill", dropZoneLabel: c = "Drag and drop it or click here to upload", dropZoneMobileLabel: l = "Click here to upload", formatsLabel: u = "File formats .zip and SKILL.md", fileInputAriaLabel: f = "Upload a skill ZIP archive or a SKILL.md file", closeAriaLabel: p = "Close" } = r ?? {};
 	return /* @__PURE__ */ j(g, {
 		open: e,
@@ -234,7 +235,7 @@ var P = {
 			})
 		})
 	});
-}, U = ({ isOpen: e, onClose: t, onSelect: n, title: r, renderContent: i }) => /* @__PURE__ */ j(g, {
+}, q = ({ isOpen: e, onClose: t, onSelect: n, title: r, renderContent: i }) => /* @__PURE__ */ j(g, {
 	open: e,
 	header: r,
 	size: _.Lg,
@@ -247,7 +248,39 @@ var P = {
 			children: e && i(n, t)
 		})
 	})
-}), W = (e) => /* @__PURE__ */ j(N, { ...e }), G = (e) => e == null || /[\s/]/.test(e), K = (e, t, n) => {
+}), J = (e, t = null) => e.map((e) => e.type === F.Folder ? {
+	path: e.id,
+	name: e.name,
+	nodeType: N.FOLDER,
+	parentPath: t,
+	folderId: e.id,
+	items: J(e.items, e.id)
+} : {
+	path: e.id,
+	name: e.name,
+	nodeType: N.ITEM,
+	parentPath: t,
+	folderId: t ?? ""
+}), Y = ({ nodes: e, selectedFileId: t, expandedFolderIds: n, onToggleFolder: r, onSelectFile: i, onClose: a, ariaLabel: o }) => /* @__PURE__ */ j(P, {
+	items: T(() => J(e), [e]),
+	showFiles: !0,
+	areHiddenFilesVisible: !0,
+	selectedPath: t,
+	expandedPaths: T(() => new Set(n), [n]),
+	onExpandedPathsChange: (e) => {
+		for (let t of e) n.has(t) || r(t);
+		for (let t of n) e.has(t) || r(t);
+	},
+	onItemClick: (e) => {
+		e.nodeType === N.ITEM && i(e.path);
+	},
+	ariaLabel: o,
+	autoFocus: !0,
+	onEscape: a
+}), X = (e) => /* @__PURE__ */ j(I, {
+	...e,
+	renderContentFileTree: (e) => /* @__PURE__ */ j(Y, { ...e })
+}), Z = (e) => e == null || /[\s/]/.test(e), Q = (e, t, n) => {
 	let r = [], i = 0;
 	return t.forEach((t, a) => {
 		let o = `/${n(t.url)}`, s = i;
@@ -255,7 +288,7 @@ var P = {
 			let t = e.indexOf(o, s);
 			if (t === -1) return;
 			let n = t + o.length;
-			if (G(e[n])) {
+			if (Z(e[n])) {
 				r.push({
 					skillIndex: a,
 					start: t,
@@ -266,7 +299,7 @@ var P = {
 			s = t + 1;
 		}
 	}), r;
-}, q = (e, t) => {
+}, ie = (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;
@@ -276,13 +309,13 @@ var P = {
 		deletedLength: e.length - r - a,
 		insertedLength: t.length - r - a
 	};
-}, J = (e, t) => {
+}, ae = (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), []);
-}, Y = (e, t, n, r, i) => {
+}, oe = (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
@@ -293,7 +326,7 @@ var P = {
 		length: a
 	};
 	return [...s, c].sort((e, t) => e.start - t.start);
-}, X = (e, t) => e.find((e) => e.start + e.length === t), Z = () => {
+}, se = (e, t) => e.find((e) => e.start + e.length === t), ce = () => {
 	let [e, t] = D(""), [n, r] = D([]), i = E(e);
 	i.current = e;
 	let a = E(n);
@@ -301,14 +334,14 @@ var P = {
 		draft: e,
 		anchors: n,
 		onDraftChange: S((e) => {
-			let n = q(i.current, e);
-			r((e) => J(e, n)), i.current = e, t(e);
+			let n = ie(i.current, e);
+			r((e) => ae(e, n)), i.current = e, t(e);
 		}, []),
 		insertMention: S((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) => Y(t, a, e, n, s)), s;
+			return i.current = l, t(l), r((t) => oe(t, a, e, n, s)), s;
 		}, []),
-		onBackspaceAtCaret: S((e) => X(a.current, e), []),
+		onBackspaceAtCaret: S((e) => se(a.current, e), []),
 		orderedSkills: T(() => {
 			if (n.length !== 0) return n.map((e) => ({ url: e.url }));
 		}, [n]),
@@ -316,7 +349,7 @@ var P = {
 			t(""), r([]);
 		}, []),
 		seedFromMessage: S((e, n, i) => {
-			let a = n ?? [], o = K(e, a, i);
+			let a = n ?? [], o = Q(e, a, i);
 			t(e), r(o.map((e) => {
 				let t = a[e.skillIndex];
 				return {
@@ -328,15 +361,15 @@ var P = {
 			}));
 		}, [])
 	};
-}, ae = (e) => ({
+}, le = (e) => ({
 	id: e.url,
 	name: e.name,
 	description: e.description
-}), Q = (e) => {
+}), ue = (e) => {
 	let t = e.split("/").filter((e) => e.length > 0);
 	return t[t.length - 1] ?? e;
-}, oe = ({ isEnabled: e, isSkillsSupported: t, skills: n, sharedWithMe: r, publicSkills: a, favoriteIds: o, onToggleFavorite: s, labels: c, historyChipLabelClassName: u, activeMentionDetailsTrigger: d, renderCatalogContent: f, detailsPanelComponent: p }) => {
-	let { addMenuLabel: m = "Skills", backLabel: h = "Back", catalogModalTitleLabel: g = "Use skill", emptyQueryHintLabel: _ = "Type to filter", panelLabels: v } = c ?? {}, y = e && t, [b, C] = D(!1), [ee, w] = D(null), [E, te] = D(0), [ne, k] = D(0), [re, A] = D(void 0), M = Z(), N = T(() => [
+}, de = ({ isEnabled: e, isSkillsSupported: t, skills: n, sharedWithMe: r, publicSkills: a, favoriteIds: o, onToggleFavorite: s, labels: c, historyChipLabelClassName: u, activeMentionDetailsTrigger: d, renderCatalogContent: f, detailsPanelComponent: p }) => {
+	let { addMenuLabel: m = "Skills", backLabel: h = "Back", catalogModalTitleLabel: g = "Use skill", emptyQueryHintLabel: _ = "Type to filter", panelLabels: v } = c ?? {}, y = e && t, [b, C] = D(!1), [ee, w] = D(null), [E, te] = D(0), [ne, k] = D(0), [re, A] = D(void 0), M = ce(), N = T(() => [
 		...n,
 		...r ?? [],
 		...a ?? []
@@ -344,11 +377,11 @@ var P = {
 		n,
 		r,
 		a
-	]), P = T(() => new Map(N.map((e) => [e.url, e])), [N]), F = S((e) => P.get(e)?.name ?? Q(e), [P]), L = T(() => N.filter((e) => o.has(e.url)).map((e) => ae(e)), [N, o]), R = M.anchors.length > 0 && !t, ie = T(() => M.anchors.map((e) => ({
+	]), P = T(() => new Map(N.map((e) => [e.url, e])), [N]), F = S((e) => P.get(e)?.name ?? ue(e), [P]), I = T(() => N.filter((e) => o.has(e.url)).map((e) => le(e)), [N, o]), L = M.anchors.length > 0 && !t, R = T(() => M.anchors.map((e) => ({
 		start: e.start,
 		length: e.length,
 		isUnsupported: !t,
-		render: () => /* @__PURE__ */ j(I, {
+		render: () => /* @__PURE__ */ j(z, {
 			name: e.name,
 			path: e.url,
 			labelClassName: u,
@@ -365,20 +398,20 @@ var P = {
 		u,
 		d,
 		v
-	]), z = S((e, t, n) => {
+	]), B = S((e, t, n) => {
 		let r = M.insertMention(e, t, n);
 		k((e) => e + 1), A(n + 1 + t.length + +!!r);
 	}, [M]), V = S(() => {
 		M.reset(), k((e) => e + 1), A(void 0);
 	}, [M]), H = S((e, t) => {
 		M.seedFromMessage(e, t, F), k((e) => e + 1), A(void 0);
-	}, [M, F]), W = S((e, t) => {
+	}, [M, F]), U = S((e, t) => {
 		if (t == null || t.length === 0) return null;
-		let n = K(e, t, F), r = [], i = 0;
+		let n = Q(e, t, F), r = [], i = 0;
 		return n.forEach((n) => {
 			n.start > i && r.push(e.slice(i, n.start));
-			let a = t[n.skillIndex], o = P.get(a.url), s = o?.name ?? Q(a.url);
-			r.push(/* @__PURE__ */ j(I, {
+			let a = t[n.skillIndex], o = P.get(a.url), s = o?.name ?? ue(a.url);
+			r.push(/* @__PURE__ */ j(z, {
 				name: s,
 				path: a.url,
 				labelClassName: u,
@@ -394,8 +427,8 @@ var P = {
 		v
 	]), G = S((e) => e == null || e.length === 0 ? null : e.map((e) => {
 		let t = P.get(e.url);
-		return /* @__PURE__ */ j(I, {
-			name: t?.name ?? Q(e.url),
+		return /* @__PURE__ */ j(z, {
+			name: t?.name ?? ue(e.url),
 			path: e.url,
 			labelClassName: u,
 			description: t?.description,
@@ -406,11 +439,11 @@ var P = {
 		P,
 		u,
 		v
-	]), q = S((e, t) => /* @__PURE__ */ j(B, {
-		favorites: L,
+	]), K = S((e, t) => /* @__PURE__ */ j(W, {
+		favorites: I,
 		isMenu: !0,
 		onSelect: (n) => {
-			z(n.id, n.name, t), e();
+			B(n.id, n.name, t), e();
 		},
 		onToggleFavorite: s,
 		onBrowse: () => {
@@ -421,8 +454,8 @@ var P = {
 		},
 		labels: v
 	}), [
-		L,
-		z,
+		I,
+		B,
 		s,
 		v
 	]), J = T(() => y ? {
@@ -433,24 +466,24 @@ var P = {
 			"aria-hidden": !0,
 			stroke: l
 		}),
-		renderOverlay: q,
+		renderOverlay: K,
 		backLabel: h
 	} : void 0, [
 		y,
 		m,
 		h,
-		q
+		K
 	]), Y = T(() => y ? {
 		triggerPrefix: "/",
 		menuLabel: m,
 		emptyQueryHint: _,
-		renderMenu: ({ query: e, caretPosition: t, close: n, listboxId: r, activeOptionId: i }) => /* @__PURE__ */ j(B, {
-			favorites: L,
+		renderMenu: ({ query: e, caretPosition: t, close: n, listboxId: r, activeOptionId: i }) => /* @__PURE__ */ j(W, {
+			favorites: I,
 			searchQuery: e,
 			listboxId: r,
 			activeOptionId: i,
 			onSelect: (e) => {
-				n({ consumeQuery: !0 }), z(e.id, e.name, t);
+				n({ consumeQuery: !0 }), B(e.id, e.name, t);
 			},
 			onToggleFavorite: s,
 			onBrowse: () => {
@@ -465,19 +498,19 @@ var P = {
 		y,
 		m,
 		_,
-		L,
-		z,
+		I,
+		B,
 		s,
 		v
 	]);
 	return e ? {
 		skillMenuOverlay: J,
 		commandMenu: Y,
-		skillCatalogModal: /* @__PURE__ */ j(U, {
+		skillCatalogModal: /* @__PURE__ */ j(q, {
 			isOpen: b,
 			onClose: () => C(!1),
 			onSelect: (e) => {
-				z(e, F(e), E), C(!1);
+				B(e, F(e), E), C(!1);
 			},
 			title: g,
 			renderContent: f
@@ -491,15 +524,15 @@ var P = {
 		}),
 		message: M.draft,
 		messageRevision: ne,
-		activeMentions: ie,
+		activeMentions: R,
 		onDraftChange: M.onDraftChange,
 		onBackspaceAtCaret: M.onBackspaceAtCaret,
 		caretPositionOverride: re,
-		isSkillUnsupported: R,
+		isSkillUnsupported: L,
 		selectedSkills: M.orderedSkills,
 		resetSkillMentions: V,
 		seedSkillMentions: H,
-		renderHistorySkillSegments: W,
+		renderHistorySkillSegments: U,
 		renderHistorySkills: G
 	} : {
 		skillMenuOverlay: void 0,
@@ -525,18 +558,18 @@ var P = {
 	value: "_value_14zdf_9",
 	clear: "_clear_14zdf_13",
 	invalid: "_invalid_14zdf_17"
-}, se = [], ce = ({ value: e, onChange: i, displayName: a, favorites: o = se, onToggleFavorite: s, onViewDetails: c, renderOverlay: d, isSkillsSupported: p, isDisabled: h = !1, isInvalid: g = !1, labelledById: _, describedById: y, labels: b, renderCatalogContent: x, className: S, styles: w }) => {
-	let [T, O] = D(!1), [ne, k] = D(!1), [N, F] = D(""), I = E(null), L = ee(), R = E(null), ie = E(!1), z = n(e, p), V = p && !h, H = T && V, W = ne && V, G = () => {
-		R.current && !R.current.disabled ? R.current.focus() : I.current?.querySelector("button:not(:disabled)")?.focus();
+}, fe = [], pe = ({ value: e, onChange: i, displayName: a, favorites: o = fe, onToggleFavorite: s, onViewDetails: c, renderOverlay: d, isSkillsSupported: p, isDisabled: h = !1, isInvalid: g = !1, labelledById: _, describedById: y, labels: b, renderCatalogContent: x, className: S, styles: w }) => {
+	let [T, O] = D(!1), [ne, k] = D(!1), [N, P] = D(""), F = E(null), I = ee(), R = E(null), z = E(!1), B = n(e, p), V = p && !h, H = T && V, U = ne && V, G = () => {
+		R.current && !R.current.disabled ? R.current.focus() : F.current?.querySelector("button:not(:disabled)")?.focus();
 	};
 	C(() => {
-		ie.current && !H && !W && ((document.activeElement === document.body || I.current?.contains(document.activeElement)) && G(), O(!1), k(!1)), ie.current = H || W;
-	}, [H, W]);
+		z.current && !H && !U && ((document.activeElement === document.body || F.current?.contains(document.activeElement)) && G(), O(!1), k(!1)), z.current = H || U;
+	}, [H, U]);
 	let K = (e) => {
-		e && !V || (F(""), O(e));
-	}, q = (e) => {
+		e && !V || (P(""), O(e));
+	}, J = (e) => {
 		V && i(e), O(!1), k(!1);
-	}, J = {
+	}, Y = {
 		...t({
 			"--ssf-text": w?.colors?.text,
 			"--ssf-bg": w?.colors?.background,
@@ -544,25 +577,25 @@ var P = {
 			"--ssf-error": w?.colors?.error
 		}),
 		...w?.cssVars
-	}, Y = /* @__PURE__ */ M("div", {
-		id: L,
+	}, X = /* @__PURE__ */ M("div", {
+		id: I,
 		className: "w-full min-w-0",
 		children: [/* @__PURE__ */ j("div", {
 			className: "p-2",
 			children: /* @__PURE__ */ j(v, {
 				value: N,
-				onChange: (e) => F(e ?? ""),
+				onChange: (e) => P(e ?? ""),
 				placeholder: b.searchPlaceholder ?? "Search skills",
 				"aria-label": b.searchPlaceholder ?? "Search skills",
 				clearLabel: b.clearSearchLabel ?? "Clear search"
 			})
-		}), /* @__PURE__ */ j(B, {
+		}), /* @__PURE__ */ j(W, {
 			className: "min-w-0 desktop:w-full",
 			rowClassName: "min-h-11",
 			favorites: o,
 			searchQuery: N,
 			labels: b.panelLabels,
-			onSelect: (e) => q(e.id),
+			onSelect: (e) => J(e.id),
 			onToggleFavorite: s,
 			onViewDetails: c ? (e) => {
 				O(!1), c(e);
@@ -571,24 +604,24 @@ var P = {
 				O(!1), k(!0);
 			}
 		})]
-	}), X = /* @__PURE__ */ j(m, {
+	}), Z = /* @__PURE__ */ j(m, {
 		inputRef: R,
 		readOnly: !0,
 		role: "combobox",
 		"aria-haspopup": "dialog",
 		"aria-expanded": H,
-		"aria-controls": H ? L : void 0,
+		"aria-controls": H ? I : void 0,
 		"aria-labelledby": _,
 		"aria-describedby": y,
-		"aria-invalid": g || z,
+		"aria-invalid": g || B,
 		disabled: !V,
-		invalid: g || z,
+		invalid: g || B,
 		value: e ? a || e : "",
 		placeholder: b.placeholder,
 		title: p ? e ? a || e : void 0 : b.unsupportedTooltipLabel,
 		containerClassName: "w-full min-w-0",
-		wrapperClassName: r("cursor-pointer", "--ssf-bg" in J && $.background, "--ssf-border" in J && $.border, (g || z) && $.invalid, w?.triggerClassName),
-		className: r("min-w-0 cursor-pointer text-ellipsis", "--ssf-text" in J && $.value, w?.typography?.fontClassName ?? "dial-small-text"),
+		wrapperClassName: r("cursor-pointer", "--ssf-bg" in Y && $.background, "--ssf-border" in Y && $.border, (g || B) && $.invalid, w?.triggerClassName),
+		className: r("min-w-0 cursor-pointer text-ellipsis", "--ssf-text" in Y && $.value, w?.typography?.fontClassName ?? "dial-small-text"),
 		onKeyDown: (e) => {
 			[
 				"Enter",
@@ -605,7 +638,7 @@ var P = {
 				"aria-label": b.removeSkillLabel,
 				onKeyDown: (e) => e.stopPropagation(),
 				onClick: (e) => {
-					e.stopPropagation(), i(void 0), O(!1), V ? R.current?.focus() : I.current?.focus();
+					e.stopPropagation(), i(void 0), O(!1), V ? R.current?.focus() : F.current?.focus();
 				},
 				iconBefore: /* @__PURE__ */ j(re, {
 					"aria-hidden": !0,
@@ -621,17 +654,17 @@ var P = {
 		})
 	});
 	return /* @__PURE__ */ M("div", {
-		ref: I,
+		ref: F,
 		role: "group",
 		"aria-labelledby": _,
 		tabIndex: -1,
-		className: r("min-w-0", S, P.selectorField),
-		style: J,
+		className: r("min-w-0", S, L.selectorField),
+		style: Y,
 		children: [d ? /* @__PURE__ */ M(A, { children: [/* @__PURE__ */ j("div", {
 			className: "w-full min-w-0",
 			onClick: () => K(!H),
-			children: X
-		}), d(Y, H, () => K(!1))] }) : /* @__PURE__ */ j(u, {
+			children: Z
+		}), d(X, H, () => K(!1))] }) : /* @__PURE__ */ j(u, {
 			open: H,
 			onOpenChange: K,
 			disabled: !V,
@@ -640,18 +673,18 @@ var P = {
 			renderOverlay: () => /* @__PURE__ */ j("div", {
 				role: "dialog",
 				"aria-labelledby": _,
-				children: Y
+				children: X
 			}),
 			initialFocus: 0,
-			children: X
-		}), W && /* @__PURE__ */ j(U, {
+			children: Z
+		}), U && /* @__PURE__ */ j(q, {
 			isOpen: !0,
 			onClose: () => k(!1),
 			title: b.modalTitle,
-			onSelect: q,
+			onSelect: J,
 			renderContent: x
 		})]
 	});
 };
 //#endregion
-export { I as ChatSkill, B as FavoriteSkillsPanel, P as SKILLS_CLASS, H as SkillArchiveUploadDialog, U as SkillCatalogModal, W as SkillDetailsSidePanel, F as SkillInfoTooltipContent, ce as SkillSelectorField, ae as buildFavoriteSkillItem, q as diffTextChange, X as findMentionAtCaret, Q as getSkillFallbackName, Y as insertAnchor, K as matchSkillMentions, J as reconcileAnchors, Z as useSkillMentions, oe as useSkillSelectorOverlay };
+export { z as ChatSkill, W as FavoriteSkillsPanel, L as SKILLS_CLASS, K as SkillArchiveUploadDialog, q as SkillCatalogModal, Y as SkillContentFileTree, X as SkillDetailsSidePanel, R as SkillInfoTooltipContent, pe as SkillSelectorField, le as buildFavoriteSkillItem, ie as diffTextChange, se as findMentionAtCaret, ue as getSkillFallbackName, oe as insertAnchor, Q as matchSkillMentions, ae as reconcileAnchors, ce as useSkillMentions, de 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.2.0-dev.174",
+  "version": "1.2.0-dev.181",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./index.js",
@@ -18,11 +18,12 @@
   },
   "dependencies": {
     "@tabler/icons-react": "^3.44.0",
-    "@epam/ai-dial-catalog": "1.2.0-dev.174",
-    "@epam/ai-dial-conversation-input": "1.2.0-dev.174"
+    "@epam/ai-dial-catalog": "1.2.0-dev.181",
+    "@epam/ai-dial-conversation-input": "1.2.0-dev.181"
   },
   "peerDependencies": {
-    "@epam/ai-dial-chat-shared": "1.2.0-dev.174",
+    "@epam/ai-dial-chat-shared": "1.2.0-dev.181",
+    "@epam/ai-dial-react-file-manager": "^0.3.0-dev.15",
     "@epam/ai-dial-ui-kit": "^0.15.0-dev.21",
     "react": "^19.2.8"
   },

package/utils/catalog-content-dial-files.d.ts

@@ -0,0 +1,10 @@
+import { CatalogContentTreeNode } from '@epam/ai-dial-catalog';
+import { DialFile } from '@epam/ai-dial-react-file-manager';
+/**
+ * Maps the details panel's `CatalogContentTreeNode[]` onto the nested
+ * `DialFile[]` `DialFoldersTree` renders. A node's opaque `id` becomes the
+ * file's `path`, so the tree's `selectedPath` / `expandedPaths` /
+ * `onItemClick` speak the panel's ids unchanged — nothing is parsed.
+ */
+export declare const mapCatalogContentTreeToDialFiles: (nodes: CatalogContentTreeNode[], parentPath?: string | null) => DialFile[];
+//# sourceMappingURL=catalog-content-dial-files.d.ts.map

package/utils/catalog-content-dial-files.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"catalog-content-dial-files.d.ts","sourceRoot":"","sources":["../../src/utils/catalog-content-dial-files.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAEpE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAEjE;;;;;GAKG;AACH,eAAO,MAAM,gCAAgC,GAC3C,OAAO,sBAAsB,EAAE,EAC/B,aAAY,MAAM,GAAG,IAAW,KAC/B,QAAQ,EAkBR,CAAC"}