@epam/ai-dial-skills 1.2.0-dev.99 → 1.2.0-rc.0

package/index.js

@@ -1,370 +1,730 @@
-import { DeploymentIcon as e, buildCssVars as t, mergeClasses as n } from "@epam/ai-dial-chat-shared";
-import { BASE_ICON_SIZE as r, Button as i, ButtonAppearance as a, ButtonVariant as o, DIAL_ICON_SIZE as s, DIAL_KIT_ICON_STROKE as c, FileDropzone as l, GhostButton as u, Highlight as d, InteractiveTooltip as f, Popup as p, PopupSize as m, ToggleIconButton as h, TooltipPlacement as g } from "@epam/ai-dial-ui-kit";
-import { Suspense as _, useCallback as v, useEffect as y, useLayoutEffect as b, useMemo as x, useRef as S, useState as C } from "react";
-import { IconBlocks as w, IconEye as T, IconStarFilled as E } from "@tabler/icons-react";
-import { Fragment as D, jsx as O, jsxs as k } from "react/jsx-runtime";
-import { DetailsPanel as A } from "@epam/ai-dial-catalog";
+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, FileDropzone as u, GhostButton as d, Highlight as f, InteractiveTooltip as p, InteractiveTooltipTrigger as m, Popup as h, PopupSize as g, Select as _, Spinner as v, ToggleIconButton as y, Tooltip as b, TooltipPlacement as x } from "@epam/ai-dial-ui-kit";
+import { Suspense as S, useCallback as C, useEffect as w, useId as T, useLayoutEffect as ee, useMemo as E, useRef as D, useState as O } from "react";
+import { IconBlocks as te, IconEye as k, IconLock as A, IconStarFilled as j, IconTrash as M } from "@tabler/icons-react";
+import { Fragment as N, 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";
 //#region src/constants/public-class-names.ts
-var j = {
+var B = {
+	selectorField: "dial-skills-selector-field",
 	favoritesPanel: "dial-skills-favorites-panel",
 	chip: "dial-skills-chip"
-}, M = ({ description: e, unsupportedMessage: t, viewDetailsLabel: n = "View details", onViewDetails: r }) => t == null ? /* @__PURE__ */ k("div", {
-	className: "flex flex-col gap-3",
-	children: [e != null && e !== "" && /* @__PURE__ */ O("p", {
+}, V = /* @__PURE__ */ function(e) {
+	return e.Deleted = "deleted", e.NotShared = "not-shared", e;
+}({}), H = ({ description: e, unsupportedMessage: t, unresolvedReason: n, deletedMessage: r, notSharedMessage: i, viewDetailsLabel: u = "View details", onViewDetails: d, viewDetailsTabIndex: f }) => {
+	if (n != null) {
+		let e = n === V.Deleted, t = e ? M : A, a = e ? r : i;
+		return /* @__PURE__ */ F("div", {
+			className: "flex flex-row items-center gap-2",
+			children: [/* @__PURE__ */ P(t, {
+				size: c.MD,
+				stroke: l,
+				"aria-hidden": !0,
+				className: "shrink-0 text-secondary"
+			}), /* @__PURE__ */ P("p", {
+				className: "dial-tiny-text text-start text-primary",
+				children: a
+			})]
+		});
+	}
+	return t == null ? /* @__PURE__ */ F("div", {
+		className: "flex flex-col gap-3",
+		children: [e != null && e !== "" && /* @__PURE__ */ P("p", {
+			className: "text-start",
+			children: e
+		}), /* @__PURE__ */ P(a, {
+			variant: s.Primary,
+			appearance: o.Link,
+			className: "h-[24px] self-start",
+			label: u,
+			iconBefore: /* @__PURE__ */ P(k, {
+				size: c.SM,
+				stroke: l,
+				"aria-hidden": !0
+			}),
+			onClick: d,
+			tabIndex: f
+		})]
+	}) : /* @__PURE__ */ P("p", {
 		className: "text-start",
-		children: e
-	}), /* @__PURE__ */ O(i, {
-		variant: o.Primary,
-		appearance: a.Link,
-		className: "h-[24px] self-start",
-		label: n,
-		iconBefore: /* @__PURE__ */ O(T, {
-			size: s.SM,
-			stroke: c,
-			"aria-hidden": !0
-		}),
-		onClick: r
-	})]
-}) : /* @__PURE__ */ O("p", {
-	className: "text-start",
-	children: t
-}), N = ({ name: e, path: t, description: r, isUnsupported: i = !1, labelClassName: a = "dial-body-paragraph-text", unsupportedLabelClassName: o = "text-error", unsupportedClassName: s = "bg-error", onViewDetails: c, labels: l = {} }) => {
-	let { viewDetailsLabel: d = "View details", unsupportedTooltipLabel: p = "Selected model does not support skills. Remove the skill or select different model to proceed." } = l, [m, h] = C(0);
-	return /* @__PURE__ */ O(f, {
+		children: t
+	});
+}, 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: h = "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] = O(0), b = l === "click", S = () => {
+		y((e) => e + 1), u(t);
+	}, C = D(null), [w, T] = O(null);
+	return ee(() => {
+		let e = C.current, t = () => T(e?.getBoundingClientRect().width ?? null);
+		if (t(), !e || typeof ResizeObserver > "u") return;
+		let n = new ResizeObserver(t);
+		return n.observe(e), () => n.disconnect();
+	}, [o]), /* @__PURE__ */ P(p, {
 		asChild: !0,
-		placement: g.Top,
-		contentClassName: "max-w-[550px]",
-		content: i ? /* @__PURE__ */ O(M, { unsupportedMessage: p }) : /* @__PURE__ */ O(M, {
-			description: r,
-			viewDetailsLabel: d,
-			onViewDetails: () => {
-				h((e) => e + 1), c(t);
-			}
+		placement: x.Top,
+		trigger: b ? m.Click : m.Hover,
+		contentClassName: "max-w-[min(550px,calc(100vw-10px))]",
+		content: a == null ? i ? /* @__PURE__ */ P(H, { unsupportedMessage: h }) : /* @__PURE__ */ P(H, {
+			description: n,
+			viewDetailsLabel: f,
+			onViewDetails: S
+		}) : /* @__PURE__ */ P(H, {
+			unresolvedReason: a,
+			deletedMessage: g,
+			notSharedMessage: _
 		}),
-		children: /* @__PURE__ */ O("span", {
-			className: "inline-flex items-center",
-			children: /* @__PURE__ */ O(u, {
-				label: `/${e}`,
-				textClassName: i ? n(a, o) : a,
-				className: n("h-auto px-2 py-0", i && s, j.chip)
-			})
+		children: /* @__PURE__ */ F("span", {
+			tabIndex: 0,
+			className: r("relative -me-1 -ms-1 inline cursor-pointer select-text rounded-full pe-1 ps-1", i ? c : "hover:bg-info focus-visible:bg-info active:bg-info", i ? r(o, s) : o, B.chip),
+			"aria-label": `/${e}`,
+			children: [/* @__PURE__ */ P("span", {
+				ref: C,
+				"aria-hidden": !0,
+				className: "inset-inline-start-0 pointer-events-none absolute top-0 select-none",
+				children: "/"
+			}), /* @__PURE__ */ P("span", {
+				"aria-hidden": !0,
+				className: "select-none",
+				style: { paddingInlineStart: w ?? void 0 },
+				children: e
+			})]
 		})
-	}, m);
-}, P = {
-	row: "_row_1ovug_1",
-	header: "_header_1ovug_5",
-	emptyHint: "_emptyHint_1ovug_9",
-	star: "_star_1ovug_13",
-	footer: "_footer_1ovug_17",
-	rowEnter: "_rowEnter_1ovug_25",
-	rowFadeIn: "_rowFadeIn_1ovug_1",
-	rowLeaving: "_rowLeaving_1ovug_29",
-	rowFadeOut: "_rowFadeOut_1ovug_1",
-	listContent: "_listContent_1ovug_57"
-}, F = "px-3 pb-0.5 pt-2", I = 180, L = 288, R = ({ favorites: r, onSelect: i, onToggleFavorite: a, onBrowse: o, onViewDetails: c, searchQuery: l, labels: p = {}, colors: m, nameClassName: g = "dial-small-text", headerClassName: _ = "dial-tiny-lead-semi-text", emptyHintClassName: v = "dial-small-text" }) => {
-	let { myCollectionLabel: x = "My Collection", emptyHintLabel: w = "Star a skill to pin it here", browseLabel: T = "Browse", removeFromFavoritesLabel: D = "Remove from favorites", viewDetailsLabel: A = "View details", noMatchingSkillsLabel: N = "No matching skills" } = p, R = t({
-		"--fs-row-hover-bg": m?.rowHoverBackground,
-		"--fs-header-text": m?.headerText,
-		"--fs-empty-hint-text": m?.emptyHintText,
-		"--fs-star-color": m?.starColor,
-		"--fs-footer-border": m?.footerBorder
-	}), [z, B] = C(/* @__PURE__ */ new Set()), V = S(/* @__PURE__ */ new Map());
-	y(() => {
-		let e = V.current;
+	}, v);
+}, W = {
+	row: "_row_1v431_1",
+	header: "_header_1v431_8",
+	emptyHint: "_emptyHint_1v431_12",
+	star: "_star_1v431_16",
+	footer: "_footer_1v431_20",
+	rowEnter: "_rowEnter_1v431_28",
+	rowFadeIn: "_rowFadeIn_1v431_1",
+	rowLeaving: "_rowLeaving_1v431_32",
+	rowFadeOut: "_rowFadeOut_1v431_1",
+	listContent: "_listContent_1v431_60"
+}, G = "px-3 pb-0.5 pt-2", ne = 180, re = 288, K = ({ favorites: n, onSelect: i, onToggleFavorite: a, onBrowse: o, onViewDetails: s, className: l, rowClassName: u, searchQuery: m, listboxId: h, activeOptionId: g, isMenu: _ = !1, labels: v = {}, colors: b, nameClassName: x = "dial-small-text", headerClassName: S = "dial-tiny-lead-semi-text", emptyHintClassName: C = "dial-small-text" }) => {
+	let { myCollectionLabel: E = "My Collection", emptyHintLabel: te = "Star a skill to pin it here", browseLabel: k = "Browse", removeFromFavoritesLabel: A = "Remove from favorites", viewDetailsLabel: M = "View details", noMatchingSkillsLabel: N = "No matching skills" } = v, I = 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
+	}), [L, R] = O(/* @__PURE__ */ new Set()), z = D(/* @__PURE__ */ new Map());
+	w(() => {
+		let e = z.current;
 		return () => {
 			e.forEach((e) => clearTimeout(e)), e.clear();
 		};
 	}, []);
-	let H = l != null, U = l?.toLowerCase() ?? "", W = H ? r.filter((e) => e.name.toLowerCase().includes(U)) : r, G = S(null), [K, q] = C();
-	b(() => {
-		G.current && q(Math.min(G.current.scrollHeight, L));
-	}, [r, l]);
-	let J = (e, t) => {
+	let V = h != null, U = _ && !V, K = V || U ? "none" : void 0, q = "button";
+	V ? q = "option" : U && (q = "menuitem");
+	let J = T(), Y = m != null, X = m?.toLowerCase() ?? "", Z = Y ? n.filter((e) => e.name.toLowerCase().includes(X)) : n, Q = D(null), [ie, ae] = O();
+	ee(() => {
+		Q.current && ae(Math.min(Q.current.scrollHeight, re));
+	}, [n, m]);
+	let oe = (e, t) => {
 		e.target === e.currentTarget && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), i(t));
-	}, Y = (e) => {
-		B((t) => new Set(t).add(e));
+	}, $ = (e) => {
+		R((t) => new Set(t).add(e));
 		let t = setTimeout(() => {
-			a(e), B((t) => {
+			a?.(e), R((t) => {
 				let n = new Set(t);
 				return n.delete(e), n;
-			}), V.current.delete(e);
-		}, I);
-		V.current.set(e, t);
+			}), z.current.delete(e);
+		}, ne);
+		z.current.set(e, t);
 	};
-	return /* @__PURE__ */ k("div", {
-		className: n("flex w-full flex-col desktop:w-[280px]", j.favoritesPanel),
-		style: R,
+	return /* @__PURE__ */ F("div", {
+		className: r("flex w-full flex-col desktop:w-[280px]", l, B.favoritesPanel),
+		style: I,
 		children: [
-			/* @__PURE__ */ O("p", {
-				className: n(_, F, P.header),
-				children: x
+			/* @__PURE__ */ P("p", {
+				id: J,
+				className: r(S, G, W.header),
+				children: E
 			}),
-			/* @__PURE__ */ O("div", {
-				className: n("max-h-72 min-h-0 flex-1 overflow-y-auto", P.listContent),
-				style: { maxHeight: K },
-				children: /* @__PURE__ */ O("div", {
-					ref: G,
-					children: W.length > 0 ? /* @__PURE__ */ O("ul", {
+			/* @__PURE__ */ P("div", {
+				className: r("max-h-72 min-h-0 flex-1 overflow-y-auto", W.listContent),
+				style: { maxHeight: ie },
+				children: /* @__PURE__ */ P("div", {
+					ref: Q,
+					children: Z.length > 0 ? /* @__PURE__ */ P("ul", {
+						id: h,
+						role: V ? "listbox" : K,
+						"aria-labelledby": V ? J : void 0,
 						className: "flex flex-col gap-1 px-1 pb-1",
-						children: W.map((t) => {
-							let r = /* @__PURE__ */ k("div", {
-								role: "button",
+						children: Z.map((t) => {
+							let n = V ? `${h}-${encodeURIComponent(t.id)}` : void 0, o = V ? -1 : void 0, l = /* @__PURE__ */ F("div", {
+								role: q,
+								id: n,
+								"aria-selected": V ? n === g : void 0,
+								"aria-label": t.name,
 								tabIndex: 0,
-								className: n("flex cursor-pointer items-center gap-2 rounded-lg border border-transparent px-2 py-1.5 transition-colors", P.row),
+								className: r("flex cursor-pointer items-center gap-2 rounded-lg border border-transparent px-2 py-1.5 transition-colors", W.row, u),
 								onClick: () => i(t),
-								onKeyDown: (e) => J(e, t),
+								onKeyDown: (e) => oe(e, t),
 								children: [
-									/* @__PURE__ */ O(e, {
-										size: s.MD,
+									/* @__PURE__ */ P(e, {
+										size: c.MD,
 										initialsName: t.name
 									}),
-									l == null ? /* @__PURE__ */ O("span", {
-										className: n(g, "min-w-0 flex-1 truncate text-start"),
+									m == null ? /* @__PURE__ */ P("span", {
+										className: r(x, "min-w-0 flex-1 truncate text-start"),
 										children: t.name
-									}) : /* @__PURE__ */ O(d, {
+									}) : /* @__PURE__ */ P(f, {
 										text: t.name,
-										query: l,
+										query: m,
 										maxLines: 1,
-										className: n(g, "min-w-0 flex-1 text-start")
+										className: r(x, "min-w-0 flex-1 text-start")
 									}),
-									/* @__PURE__ */ O(h, {
-										icon: /* @__PURE__ */ O(E, {
-											size: s.SM,
-											className: P.star,
+									a && /* @__PURE__ */ P(y, {
+										icon: /* @__PURE__ */ P(j, {
+											size: c.SM,
+											className: W.star,
 											"aria-hidden": !0
 										}),
-										"aria-label": D,
+										"aria-label": A,
 										isSelected: !0,
+										tabIndex: o,
 										onClick: (e) => {
-											e.stopPropagation(), Y(t.id);
+											e.stopPropagation(), $(t.id);
 										}
 									})
 								]
 							});
-							return /* @__PURE__ */ O("li", {
-								className: z.has(t.id) ? P.rowLeaving : P.rowEnter,
-								children: /* @__PURE__ */ O(f, {
+							return /* @__PURE__ */ P("li", {
+								role: K,
+								className: L.has(t.id) ? W.rowLeaving : W.rowEnter,
+								children: s ? /* @__PURE__ */ P(p, {
 									asChild: !0,
 									contentClassName: "max-w-[550px]",
-									content: /* @__PURE__ */ O(M, {
+									content: /* @__PURE__ */ P(H, {
 										description: t.description,
-										viewDetailsLabel: A,
-										onViewDetails: () => c(t)
+										viewDetailsLabel: M,
+										onViewDetails: () => s(t),
+										viewDetailsTabIndex: o
 									}),
-									children: r
-								})
+									children: l
+								}) : l
 							}, t.id);
 						})
-					}) : H && U !== "" ? /* @__PURE__ */ O("p", {
+					}) : Y && X !== "" ? /* @__PURE__ */ P("p", {
 						role: "status",
 						"aria-live": "polite",
-						className: n(v, "px-4 py-4 text-start", P.emptyHint),
+						className: r(C, "px-4 py-4 text-start", W.emptyHint),
 						children: N
-					}) : /* @__PURE__ */ O("p", {
-						className: n(v, "px-4 py-4 text-start", P.emptyHint),
-						children: w
+					}) : /* @__PURE__ */ P("p", {
+						className: r(C, "px-4 py-4 text-start", W.emptyHint),
+						children: te
 					})
 				})
 			}),
-			/* @__PURE__ */ O("div", {
-				className: n("border-t px-2 py-3", P.footer),
-				children: /* @__PURE__ */ O(u, {
-					label: T,
+			/* @__PURE__ */ P("div", {
+				className: r("border-t px-2 py-3", W.footer),
+				children: /* @__PURE__ */ P(d, {
+					role: U ? "menuitem" : void 0,
+					label: k,
 					className: "w-full justify-center",
 					onClick: o
 				})
 			})
 		]
 	});
-}, z = ".zip,.md", B = ({ isOpen: e, errorText: t, accept: n = z, 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: u = "Click here to upload", formatsLabel: d = "File formats .zip and SKILL.md", fileInputAriaLabel: f = "Upload a skill ZIP archive or a SKILL.md file", closeAriaLabel: h = "Close" } = r ?? {};
-	return /* @__PURE__ */ O(p, {
+}, 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: d = "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: _ = "Uploading skill" } = i ?? {};
+	return /* @__PURE__ */ P(h, {
 		open: e,
-		size: m.Sm,
-		header: s,
-		closeAriaLabel: h,
-		onClose: i,
-		children: /* @__PURE__ */ O("div", {
-			className: "px-6 py-4",
-			children: /* @__PURE__ */ O(l, {
-				label: /* @__PURE__ */ k(D, { children: [/* @__PURE__ */ O("span", {
+		size: g.Sm,
+		header: c,
+		closeAriaLabel: m,
+		onClose: a,
+		children: /* @__PURE__ */ F("div", {
+			className: "flex flex-col gap-4 px-6 py-4",
+			children: [/* @__PURE__ */ P(u, {
+				label: /* @__PURE__ */ F(N, { children: [/* @__PURE__ */ P("span", {
 					className: "desktop:hidden",
-					children: u
-				}), /* @__PURE__ */ O("span", {
+					children: d
+				}), /* @__PURE__ */ P("span", {
 					className: "hidden desktop:inline",
-					children: c
+					children: l
 				})] }),
-				description: d,
-				ariaLabel: f,
-				accept: n,
-				errorText: t,
-				onChange: a,
-				onReject: o
-			})
+				description: f,
+				ariaLabel: p,
+				accept: r,
+				disabled: n,
+				errorText: n ? void 0 : t,
+				onChange: o,
+				onReject: s
+			}), n && /* @__PURE__ */ P(v, { ariaLabel: _ })]
 		})
 	});
-}, V = ({ isOpen: e, onClose: t, onSelect: n, title: r, renderContent: i }) => /* @__PURE__ */ O(p, {
+}, Y = ({ isOpen: e, onClose: t, onSelect: n, title: r, renderContent: i }) => /* @__PURE__ */ P(h, {
 	open: e,
 	header: r,
-	size: m.Lg,
+	size: g.Lg,
 	className: "h-[min(90vh,860px)] !max-w-[min(95vw,1200px)] overflow-hidden",
 	onClose: t,
-	children: /* @__PURE__ */ O("div", {
+	children: /* @__PURE__ */ P("div", {
 		className: "h-[min(80vh,840px)] overflow-auto",
-		children: /* @__PURE__ */ O(_, {
+		children: /* @__PURE__ */ P(S, {
 			fallback: null,
 			children: e && i(n, t)
 		})
 	})
-}), H = (e) => /* @__PURE__ */ O(A, { ...e }), U = (e) => ({
+}), X = (e, t = null) => e.map((e) => e.type === R.Folder ? {
+	path: e.id,
+	name: e.name,
+	nodeType: I.FOLDER,
+	parentPath: t,
+	folderId: e.id,
+	items: X(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 }) => /* @__PURE__ */ P(L, {
+	items: E(() => X(e), [e]),
+	showFiles: !0,
+	areHiddenFilesVisible: !0,
+	selectedPath: t,
+	expandedPaths: E(() => 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 === I.ITEM && i(e.path);
+	},
+	ariaLabel: o,
+	autoFocus: !0,
+	onEscape: a
+}), Q = (e) => /* @__PURE__ */ P(z, {
+	...e,
+	renderContentFileTree: (e) => /* @__PURE__ */ P(Z, { ...e })
+}), ie = (e) => e == null || /[\s/]/.test(e), ae = (e, t, n) => {
+	let r = [], i = 0;
+	return t.forEach((t, a) => {
+		let o = `/${n(t.url)}`, s = i;
+		for (; s <= e.length;) {
+			let t = e.indexOf(o, s);
+			if (t === -1) return;
+			let n = t + o.length;
+			if (ie(e[n])) {
+				r.push({
+					skillIndex: a,
+					start: t,
+					length: o.length
+				}), i = n;
+				return;
+			}
+			s = t + 1;
+		}
+	}), r;
+}, oe = (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;
+	for (; a < i && e[e.length - 1 - a] === t[t.length - 1 - a];) a += 1;
+	return {
+		start: r,
+		deletedLength: e.length - r - a,
+		insertedLength: t.length - r - a
+	};
+}, $ = (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), []);
+}, se = (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
+	} : e), c = {
+		url: n,
+		name: r,
+		start: t,
+		length: a
+	};
+	return [...s, c].sort((e, t) => e.start - t.start);
+}, ce = (e, t) => e.find((e) => e.start + e.length === t), le = (e, t, n) => {
+	let r = t;
+	for (; r > 0 && !/\s/.test(e[r - 1]);) r--;
+	let i = r;
+	for (; i < e.length && !/\s/.test(e[i]);) i++;
+	let a = e.slice(r, i);
+	if (!(!a.startsWith(n) || a.slice(n.length).includes(n))) return {
+		start: r,
+		end: i
+	};
+}, ue = () => {
+	let [e, t] = O(""), [n, r] = O([]), i = D(e);
+	i.current = e;
+	let a = D(n);
+	a.current = n;
+	let o = C((e) => {
+		let n = oe(i.current, e);
+		r((e) => $(e, n)), i.current = e, t(e);
+	}, []), s = C((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) => se(t, a, e, n, s)), s;
+	}, []), c = C((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) => se(t, a, e, n, !1));
+	}, []), l = C((e) => ce(a.current, e), []), u = E(() => {
+		if (n.length !== 0) return n.map((e) => ({ url: e.url }));
+	}, [n]), d = C(() => {
+		t(""), r([]);
+	}, []), f = C((e, n, i) => {
+		let a = n ?? [], o = ae(e, a, i);
+		t(e), r(o.map((e) => {
+			let t = a[e.skillIndex];
+			return {
+				url: t.url,
+				name: i(t.url),
+				start: e.start,
+				length: e.length
+			};
+		}));
+	}, []);
+	return E(() => ({
+		draft: e,
+		anchors: n,
+		onDraftChange: o,
+		insertMention: s,
+		restoreMention: c,
+		onBackspaceAtCaret: l,
+		orderedSkills: u,
+		reset: d,
+		seedFromMessage: f
+	}), [
+		e,
+		n,
+		o,
+		s,
+		c,
+		l,
+		u,
+		d,
+		f
+	]);
+}, de = (e) => ({
 	id: e.url,
 	name: e.name,
 	description: e.description
-}), W = (e) => {
+}), fe = (e) => {
 	let t = e.split("/").filter((e) => e.length > 0);
 	return t[t.length - 1] ?? e;
-}, G = ({ isEnabled: e, isSkillsSupported: t, skills: n, sharedWithMe: i, publicSkills: a, favoriteIds: o, onToggleFavorite: s, labels: l, historyChipLabelClassName: u, renderCatalogContent: d, detailsPanelComponent: f }) => {
-	let { addMenuLabel: p = "Skills", backLabel: m = "Back", catalogModalTitleLabel: h = "Use skill", emptyQueryHintLabel: g = "Type to filter", unsupportedTooltipLabel: y = "Selected model does not support skills. Remove the skill or select different model to proceed.", panelLabels: b } = l ?? {}, S = e && t, [T, E] = C(!1), [D, k] = C(null), [A, j] = C(null), M = x(() => [
-		...n,
-		...i ?? [],
-		...a ?? []
+}, pe = (e) => {
+	let t = e.split("/").filter((e) => e.length > 0);
+	return t[0] !== "skills" || t.length < 3 ? null : t[1];
+}, me = (e, t) => pe(e) === t ? V.Deleted : V.NotShared, he = "/", ge = ({ 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, renderCatalogContent: m, detailsPanelComponent: h }) => {
+	let { addMenuLabel: g = "Skills", backLabel: _ = "Back", catalogModalTitleLabel: v = "Use skill", emptyQueryHintLabel: y = "Type to filter", deletedTooltipLabel: b, notSharedTooltipLabel: x, unsupportedTooltipLabel: w, panelLabels: T } = c ?? {}, [ee, k] = O(!1), [A, j] = O(null), [M, N] = O(0), F = D(null), [I, L] = O(0), [R, z] = O(void 0), B = ue(), V = E(() => [
+		...t,
+		...n ?? [],
+		...r ?? []
 	], [
+		t,
 		n,
-		i,
-		a
-	]), P = x(() => new Map(M.map((e) => [e.url, e])), [M]), F = x(() => M.filter((e) => o.has(e.url)).map((e) => U(e)), [M, o]), I = x(() => A == null ? null : P.get(A) ?? null, [P, A]), L = I != null && !t, z = v((e) => {
-		j(e);
-	}, []), B = v(() => {
-		j(null);
-	}, []), H = A, G = x(() => A == null ? void 0 : [{ url: A }], [A]), K = x(() => I == null ? null : /* @__PURE__ */ O(N, {
-		name: I.name,
-		path: I.url,
-		description: I.description,
-		isUnsupported: L,
-		onViewDetails: k,
-		labels: {
-			viewDetailsLabel: b?.viewDetailsLabel,
-			unsupportedTooltipLabel: y
-		}
-	}), [
-		I,
-		L,
+		r
+	]), H = E(() => new Map(V.map((e) => [e.url, e])), [V]), W = C((e) => H.get(e)?.name ?? fe(e), [H]), G = E(() => V.filter((e) => a.has(e.url)).map((e) => de(e)), [V, a]), ne = B.anchors.length > 0 && !e, re = E(() => B.anchors.map((t) => ({
+		start: t.start,
+		length: t.length,
+		isUnsupported: !e,
+		render: () => /* @__PURE__ */ P(U, {
+			name: t.name,
+			path: t.url,
+			labelClassName: d,
+			description: H.get(t.url)?.description,
+			isUnsupported: !e,
+			detailsTrigger: f,
+			onViewDetails: j,
+			labels: {
+				viewDetailsLabel: T?.viewDetailsLabel,
+				unsupportedTooltipLabel: w
+			}
+		})
+	})), [
+		B.anchors,
+		e,
+		H,
+		d,
+		f,
+		T,
+		w
+	]), q = C((e, t, n) => {
+		let r = B.insertMention(e, t, n);
+		L((e) => e + 1), z(n + 1 + t.length + +!!r);
+	}, [B]), J = C((e) => {
+		let t = le(B.draft, e, he);
+		return t == null ? e : (B.onDraftChange(B.draft.slice(0, t.start) + B.draft.slice(t.end)), t.start);
+	}, [B]), X = C((e) => {
+		let t = le(B.draft, e, he);
+		if (t == null) return;
+		let n = B.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),
+			mentionUrl: n?.url
+		};
+	}, [B]), Z = C(() => {
+		B.reset(), L((e) => e + 1), z(void 0);
+	}, [B]), Q = C((e, t) => {
+		B.seedFromMessage(e, t, W), L((e) => e + 1), z(void 0);
+	}, [B, W]), ie = C((e, t) => {
+		if (t == null || t.length === 0) return null;
+		let n = ae(e, t, W), 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 ?? fe(a.url), l = s == null ? me(a.url, o) : void 0;
+			r.push(/* @__PURE__ */ P(U, {
+				name: c,
+				path: a.url,
+				labelClassName: u,
+				description: s?.description,
+				unresolvedReason: l,
+				detailsTrigger: p,
+				onViewDetails: j,
+				labels: {
+					viewDetailsLabel: T?.viewDetailsLabel,
+					deletedTooltipLabel: b,
+					notSharedTooltipLabel: x
+				}
+			}, `${a.url}-${n.start}`)), i = n.start + n.length;
+		}), i < e.length && r.push(e.slice(i)), r;
+	}, [
+		W,
+		H,
+		u,
+		p,
+		T,
+		o,
 		b,
-		y
-	]), q = v((e) => e == null || e.length === 0 ? null : e.map((e) => {
-		let t = P.get(e.url);
-		return /* @__PURE__ */ O(N, {
-			name: t?.name ?? W(e.url),
+		x
+	]), oe = C((e) => e == null || e.length === 0 ? null : e.map((e) => {
+		let t = H.get(e.url), n = t?.name ?? fe(e.url), r = t == null ? me(e.url, o) : void 0;
+		return /* @__PURE__ */ P(U, {
+			name: n,
 			path: e.url,
 			labelClassName: u,
 			description: t?.description,
-			onViewDetails: k,
-			labels: { viewDetailsLabel: b?.viewDetailsLabel }
+			unresolvedReason: r,
+			detailsTrigger: p,
+			onViewDetails: j,
+			labels: {
+				viewDetailsLabel: T?.viewDetailsLabel,
+				deletedTooltipLabel: b,
+				notSharedTooltipLabel: x
+			}
 		}, e.url);
 	}), [
-		P,
+		H,
 		u,
-		b
-	]), J = v((e) => /* @__PURE__ */ O(R, {
-		favorites: F,
-		onSelect: (t) => {
-			z(t.id), e();
+		p,
+		T,
+		o,
+		b,
+		x
+	]), $ = C((e, t) => /* @__PURE__ */ P(K, {
+		favorites: G,
+		isMenu: !0,
+		onSelect: (n) => {
+			q(n.id, n.name, J(t)), e();
 		},
 		onToggleFavorite: s,
 		onBrowse: () => {
-			e(), E(!0);
+			let n = X(t);
+			N(J(t)), F.current = n ?? null, e(), k(!0);
 		},
-		onViewDetails: (t) => {
-			e(), k(t.id);
+		onViewDetails: (n) => {
+			J(t), e(), j(n.id);
 		},
-		labels: b
+		labels: T
 	}), [
-		F,
-		z,
-		s,
-		b
-	]), Y = x(() => S ? {
-		key: "skills",
-		title: p,
-		icon: /* @__PURE__ */ O(w, {
-			size: r,
-			"aria-hidden": !0,
-			stroke: c
-		}),
-		renderOverlay: J,
-		backLabel: m
-	} : void 0, [
-		S,
-		p,
-		m,
-		J
-	]), X = x(() => S ? {
-		triggerPrefix: "/",
-		menuLabel: p,
-		emptyQueryHint: g,
-		renderMenu: ({ query: e, close: t }) => /* @__PURE__ */ O(R, {
-			favorites: F,
-			searchQuery: e,
-			onSelect: (e) => {
-				t({ consumeQuery: !0 }), z(e.id);
-			},
-			onToggleFavorite: s,
-			onBrowse: () => {
-				t({ consumeQuery: !0 }), E(!0);
-			},
-			onViewDetails: (e) => {
-				t({ consumeQuery: !0 }), k(e.id);
-			},
-			labels: b
-		})
-	} : void 0, [
-		S,
-		p,
-		g,
-		F,
-		z,
+		G,
+		q,
+		J,
+		X,
 		s,
-		b
+		T
 	]);
-	return e ? {
-		skillMenuOverlay: Y,
-		commandMenu: X,
-		skillCatalogModal: /* @__PURE__ */ O(V, {
-			isOpen: T,
-			onClose: () => E(!1),
+	return {
+		skillMenuOverlay: E(() => e ? {
+			key: "skills",
+			title: g,
+			icon: /* @__PURE__ */ P(te, {
+				size: i,
+				"aria-hidden": !0,
+				stroke: l
+			}),
+			renderOverlay: $,
+			backLabel: _
+		} : void 0, [
+			e,
+			g,
+			_,
+			$
+		]),
+		commandMenu: E(() => e ? {
+			triggerPrefix: he,
+			menuLabel: g,
+			emptyQueryHint: y,
+			renderMenu: ({ query: e, caretPosition: t, close: n, listboxId: r, activeOptionId: i }) => /* @__PURE__ */ P(K, {
+				favorites: G,
+				searchQuery: e,
+				listboxId: r,
+				activeOptionId: i,
+				onSelect: (e) => {
+					n({ consumeQuery: !0 }), q(e.id, e.name, t);
+				},
+				onToggleFavorite: s,
+				onBrowse: () => {
+					let r = `${he}${e}`, i = B.anchors.find((e) => e.start === t && e.length === r.length);
+					n({
+						consumeQuery: !0,
+						returnFocus: !1
+					}), N(t), F.current = {
+						position: t,
+						text: r,
+						mentionUrl: i?.url
+					}, k(!0);
+				},
+				onViewDetails: (e) => {
+					n({ consumeQuery: !0 }), j(e.id);
+				},
+				labels: T
+			})
+		} : void 0, [
+			e,
+			g,
+			y,
+			G,
+			q,
+			B.anchors,
+			s,
+			T
+		]),
+		skillCatalogModal: /* @__PURE__ */ P(Y, {
+			isOpen: ee,
+			onClose: C(() => {
+				k(!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]),
 			onSelect: (e) => {
-				z(e), E(!1);
+				F.current = null, q(e, W(e), M), k(!1);
 			},
-			title: h,
-			renderContent: d
+			title: v,
+			renderContent: m
 		}),
-		skillDetailsPanel: /* @__PURE__ */ O(_, {
+		skillDetailsPanel: /* @__PURE__ */ P(S, {
 			fallback: null,
-			children: /* @__PURE__ */ O(f, {
-				skillId: D,
-				onClose: () => k(null)
+			children: /* @__PURE__ */ P(h, {
+				skillId: A,
+				onClose: () => j(null)
 			})
 		}),
-		selectedSkillElement: K,
-		selectedSkillPath: H,
-		selectedSkills: G,
-		isSkillUnsupported: L,
-		selectSkill: z,
-		removeSelectedSkill: B,
-		renderHistorySkills: q
-	} : {
-		skillMenuOverlay: void 0,
-		commandMenu: void 0,
-		skillCatalogModal: null,
-		skillDetailsPanel: null,
-		selectedSkillElement: null,
-		selectedSkillPath: null,
-		selectedSkills: void 0,
-		isSkillUnsupported: !1,
-		selectSkill: () => void 0,
-		removeSelectedSkill: () => void 0,
-		renderHistorySkills: () => null
+		message: B.draft,
+		messageRevision: I,
+		activeMentions: re,
+		onDraftChange: B.onDraftChange,
+		onBackspaceAtCaret: B.onBackspaceAtCaret,
+		caretPositionOverride: R,
+		isSkillUnsupported: ne,
+		selectedSkills: B.orderedSkills,
+		resetSkillMentions: Z,
+		seedSkillMentions: Q,
+		renderHistorySkillSegments: ie,
+		renderHistorySkills: oe
+	};
+}, _e = {
+	background: "_background_1ult0_1",
+	border: "_border_1ult0_5",
+	value: "_value_1ult0_9",
+	clear: "_clear_1ult0_13",
+	invalid: "_invalid_1ult0_17"
+}, ve = [], ye = "Selected model does not support skills. Select a different model to use a skill.", be = ({ value: i, onChange: a, displayNames: o, skills: s = ve, isSkillsSupported: l, isDisabled: u = !1, error: d, labels: p, className: m, styles: h }) => {
+	let [g, v] = O(!1), [y, x] = O(""), S = D(null), C = T(), w = i.some((e) => n(e, l)), E = l && !u, te = g && E, k = i.length > 0 ? p.unsupportedTooltipLabel : p.unavailableTooltipLabel ?? ye, A = !l && i.length === 0, j = d ?? (A ? k : void 0), M = new Map(i.map((e) => [e, {
+		id: e,
+		name: o?.[e] || e
+	}]));
+	s.forEach((e) => M.set(e.id, e));
+	let N = [...M.values()].map((t) => ({
+		value: t.id,
+		label: t.name,
+		labelNode: y.trim() ? /* @__PURE__ */ P(f, {
+			text: t.name,
+			query: y,
+			maxLines: 1
+		}) : void 0,
+		icon: /* @__PURE__ */ P(e, {
+			size: c.SM,
+			initialsName: t.name
+		}),
+		disabled: !l
+	})), I = {
+		...t({
+			"--ssf-text": h?.colors?.text,
+			"--ssf-bg": h?.colors?.background,
+			"--ssf-border": h?.colors?.border,
+			"--ssf-error": h?.colors?.error
+		}),
+		...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: I,
+		children: [/* @__PURE__ */ P(b, {
+			tooltip: k,
+			hideTooltip: l,
+			triggerClassName: "block w-full min-w-0",
+			children: /* @__PURE__ */ P("div", {
+				inert: u ? !0 : void 0,
+				children: /* @__PURE__ */ P(_, {
+					multiple: !0,
+					searchable: !0,
+					open: te,
+					onOpenChange: (e) => {
+						e && !E || v(e);
+					},
+					onSearchQueryChange: x,
+					value: i,
+					onChange: (e) => {
+						u || a(Array.isArray(e) ? e : [e]);
+					},
+					options: N,
+					placeholder: p.placeholder,
+					labelProps: { label: p.fieldLabel },
+					error: d,
+					caption: A ? k : void 0,
+					searchPlaceholder: p.searchPlaceholder ?? "Search skills",
+					emptyStateTitle: y.trim() ? p.noMatchingSkillsLabel ?? "No matching skills" : p.emptyLabel ?? "No skills available",
+					disabled: u || A,
+					invalid: !!d || w,
+					className: "w-full min-w-0",
+					fieldClassName: r(E ? "cursor-pointer" : "cursor-not-allowed", "--ssf-bg" in I && _e.background, "--ssf-border" in I && _e.border, "--ssf-text" in I && _e.value, (d || w) && _e.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,
+			className: "sr-only",
+			children: j
+		})]
+	});
 };
 //#endregion
-export { N as ChatSkill, R as FavoriteSkillsPanel, j as SKILLS_CLASS, B as SkillArchiveUploadDialog, V as SkillCatalogModal, H as SkillDetailsSidePanel, M as SkillInfoTooltipContent, U as buildFavoriteSkillItem, G as useSkillSelectorOverlay };
+export { U as ChatSkill, K as FavoriteSkillsPanel, B as SKILLS_CLASS, J as SkillArchiveUploadDialog, Y as SkillCatalogModal, Z as SkillContentFileTree, Q as SkillDetailsSidePanel, H as SkillInfoTooltipContent, be as SkillSelectorField, V as SkillUnresolvedReason, de as buildFavoriteSkillItem, oe as diffTextChange, ce as findMentionAtCaret, fe as getSkillFallbackName, se as insertAnchor, ae as matchSkillMentions, $ as reconcileAnchors, ue as useSkillMentions, ge as useSkillSelectorOverlay };