@epam/ai-dial-skills 1.2.0-dev.20 → 1.2.0-dev.201

package/index.js

@@ -1,340 +1,698 @@
-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, GhostButton as l, Highlight as u, InteractiveTooltip as d, Popup as f, PopupSize as p, ToggleIconButton as m, TooltipPlacement as h } from "@epam/ai-dial-ui-kit";
-import { Suspense as g, useCallback as _, useEffect as v, useLayoutEffect as y, useMemo as b, useRef as x, useState as S } from "react";
-import { IconBlocks as C, IconEye as w, IconStarFilled as T } from "@tabler/icons-react";
-import { jsx as E, jsxs as D } from "react/jsx-runtime";
-import { DetailsPanel as O } from "@epam/ai-dial-catalog";
-//#region src/components/SkillInfoTooltipContent/SkillInfoTooltipContent.tsx
-var k = ({ description: e, unsupportedMessage: t, viewDetailsLabel: n = "View details", onViewDetails: r }) => t == null ? /* @__PURE__ */ D("div", {
+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, Dropdown as u, FileDropzone as d, GhostButton as f, Highlight as p, Input as m, InteractiveTooltip as h, Popup as g, PopupSize as _, Search as v, ToggleIconButton as y, TooltipPlacement as b } from "@epam/ai-dial-ui-kit";
+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 k, IconEye as te, IconStarFilled as A, IconX as j } from "@tabler/icons-react";
+import { Fragment as M, jsx as N, jsxs as P } from "react/jsx-runtime";
+import { DialFileNodeType as F, DialFoldersTree as I } from "@epam/ai-dial-react-file-manager";
+import { CatalogContentNodeType as L, DetailsPanel as R } from "@epam/ai-dial-catalog";
+//#region src/constants/public-class-names.ts
+var z = {
+	selectorField: "dial-skills-selector-field",
+	favoritesPanel: "dial-skills-favorites-panel",
+	chip: "dial-skills-chip"
+}, B = ({ description: e, unsupportedMessage: t, viewDetailsLabel: n = "View details", onViewDetails: r, viewDetailsTabIndex: i }) => t == null ? /* @__PURE__ */ P("div", {
 	className: "flex flex-col gap-3",
-	children: [e != null && e !== "" && /* @__PURE__ */ E("p", {
+	children: [e != null && e !== "" && /* @__PURE__ */ N("p", {
 		className: "text-start",
 		children: e
-	}), /* @__PURE__ */ E(i, {
-		variant: o.Primary,
-		appearance: a.Link,
+	}), /* @__PURE__ */ N(a, {
+		variant: s.Primary,
+		appearance: o.Link,
 		className: "h-[24px] self-start",
 		label: n,
-		iconBefore: /* @__PURE__ */ E(w, {
-			size: s.SM,
-			stroke: c,
+		iconBefore: /* @__PURE__ */ N(te, {
+			size: c.SM,
+			stroke: l,
 			"aria-hidden": !0
 		}),
-		onClick: r
+		onClick: r,
+		tabIndex: i
 	})]
-}) : /* @__PURE__ */ E("p", {
+}) : /* @__PURE__ */ N("p", {
 	className: "text-start",
 	children: t
-}), A = ({ 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: u = {} }) => {
-	let { viewDetailsLabel: f = "View details", unsupportedTooltipLabel: p = "Selected model does not support skills. Remove the skill or select different model to proceed." } = u, [m, g] = S(0);
-	return /* @__PURE__ */ E(d, {
+}), V = ({ 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) => {
+		!v || e.key !== "Enter" && e.key !== " " || (e.preventDefault(), _(!0));
+	}, S = E(null), [C, ee] = D(null);
+	return w(() => {
+		ee(S.current?.getBoundingClientRect().width ?? null);
+	}, [a]), /* @__PURE__ */ N(h, {
 		asChild: !0,
-		placement: h.Top,
+		placement: b.Top,
+		open: v ? g : void 0,
+		onOpenChange: v ? _ : void 0,
 		contentClassName: "max-w-[550px]",
-		content: i ? /* @__PURE__ */ E(k, { unsupportedMessage: p }) : /* @__PURE__ */ E(k, {
-			description: r,
-			viewDetailsLabel: f,
-			onViewDetails: () => {
-				g((e) => e + 1), c(t);
-			}
+		content: i ? /* @__PURE__ */ N(B, { unsupportedMessage: f }) : /* @__PURE__ */ N(B, {
+			description: n,
+			viewDetailsLabel: d,
+			onViewDetails: y
 		}),
-		children: /* @__PURE__ */ E("span", {
-			className: "inline-flex items-center",
-			children: /* @__PURE__ */ E(l, {
-				label: `/${e}`,
-				textClassName: i ? n(a, o) : a,
-				className: i ? n("h-auto px-2 py-0", s) : "h-auto px-2 py-0"
-			})
+		children: /* @__PURE__ */ P("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, z.chip),
+			"aria-label": `/${e}`,
+			onClick: v ? () => _(!0) : void 0,
+			onKeyDown: x,
+			children: [/* @__PURE__ */ N("span", {
+				ref: S,
+				"aria-hidden": !0,
+				className: "inset-inline-start-0 pointer-events-none absolute top-0 select-none",
+				children: "/"
+			}), /* @__PURE__ */ N("span", {
+				"aria-hidden": !0,
+				className: "select-none",
+				style: { paddingInlineStart: C ?? void 0 },
+				children: e
+			})]
 		})
-	}, m);
-}, j = {
-	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"
-}, M = "px-3 pb-0.5 pt-2", N = 180, P = 288, F = ({ favorites: r, onSelect: i, onToggleFavorite: a, onBrowse: o, onViewDetails: c, searchQuery: f, labels: p = {}, colors: h, nameClassName: g = "dial-small-text", headerClassName: _ = "dial-tiny-lead-semi-text", emptyHintClassName: b = "dial-small-text" }) => {
-	let { myCollectionLabel: C = "My Collection", emptyHintLabel: w = "Star a skill to pin it here", browseLabel: O = "Browse", removeFromFavoritesLabel: A = "Remove from favorites", viewDetailsLabel: F = "View details", noMatchingSkillsLabel: I = "No matching skills" } = p, L = t({
-		"--fs-row-hover-bg": h?.rowHoverBackground,
-		"--fs-header-text": h?.headerText,
-		"--fs-empty-hint-text": h?.emptyHintText,
-		"--fs-star-color": h?.starColor,
-		"--fs-footer-border": h?.footerBorder
-	}), [R, z] = S(/* @__PURE__ */ new Set()), B = x(/* @__PURE__ */ new Map());
-	v(() => {
-		let e = B.current;
+	}, p);
+}, H = {
+	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"
+}, U = "px-3 pb-0.5 pt-2", W = 180, G = 288, K = ({ 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: k = "Star a skill to pin it here", browseLabel: te = "Browse", removeFromFavoritesLabel: j = "Remove from favorites", viewDetailsLabel: M = "View details", noMatchingSkillsLabel: F = "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] = D(/* @__PURE__ */ new Set()), V = E(/* @__PURE__ */ new Map());
+	C(() => {
+		let e = V.current;
 		return () => {
 			e.forEach((e) => clearTimeout(e)), e.clear();
 		};
 	}, []);
-	let V = f != null, H = f?.toLowerCase() ?? "", U = V ? r.filter((e) => e.name.toLowerCase().includes(H)) : r, W = x(null), [G, K] = S();
-	y(() => {
-		W.current && K(Math.min(W.current.scrollHeight, P));
-	}, [r, f]);
-	let q = (e, t) => {
+	let K = m != null, q = _ && !K, J = K || q ? "none" : void 0, Y = "button";
+	K ? Y = "option" : q && (Y = "menuitem");
+	let X = ee(), Z = d != null, Q = d?.toLowerCase() ?? "", ne = Z ? n.filter((e) => e.name.toLowerCase().includes(Q)) : n, $ = E(null), [re, ie] = D();
+	w(() => {
+		$.current && ie(Math.min($.current.scrollHeight, G));
+	}, [n, d]);
+	let ae = (e, t) => {
 		e.target === e.currentTarget && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), i(t));
-	}, J = (e) => {
-		z((t) => new Set(t).add(e));
+	}, oe = (e) => {
+		R((t) => new Set(t).add(e));
 		let t = setTimeout(() => {
-			a(e), z((t) => {
+			a?.(e), R((t) => {
 				let n = new Set(t);
 				return n.delete(e), n;
-			}), B.current.delete(e);
-		}, N);
-		B.current.set(e, t);
+			}), V.current.delete(e);
+		}, W);
+		V.current.set(e, t);
 	};
-	return /* @__PURE__ */ D("div", {
-		className: "flex w-full flex-col desktop:w-[280px]",
-		style: L,
+	return /* @__PURE__ */ P("div", {
+		className: r("flex w-full flex-col desktop:w-[280px]", l, z.favoritesPanel),
+		style: I,
 		children: [
-			/* @__PURE__ */ E("p", {
-				className: n(_, M, j.header),
-				children: C
+			/* @__PURE__ */ N("p", {
+				id: X,
+				className: r(S, U, H.header),
+				children: O
 			}),
-			/* @__PURE__ */ E("div", {
-				className: n("max-h-72 min-h-0 flex-1 overflow-y-auto", j.listContent),
-				style: { maxHeight: G },
-				children: /* @__PURE__ */ E("div", {
-					ref: W,
-					children: U.length > 0 ? /* @__PURE__ */ E("ul", {
+			/* @__PURE__ */ N("div", {
+				className: r("max-h-72 min-h-0 flex-1 overflow-y-auto", H.listContent),
+				style: { maxHeight: re },
+				children: /* @__PURE__ */ N("div", {
+					ref: $,
+					children: ne.length > 0 ? /* @__PURE__ */ N("ul", {
+						id: m,
+						role: K ? "listbox" : J,
+						"aria-labelledby": K ? X : void 0,
 						className: "flex flex-col gap-1 px-1 pb-1",
-						children: U.map((t) => {
-							let r = /* @__PURE__ */ D("div", {
-								role: "button",
+						children: ne.map((t) => {
+							let n = K ? `${m}-${encodeURIComponent(t.id)}` : void 0, o = K ? -1 : void 0, l = /* @__PURE__ */ P("div", {
+								role: Y,
+								id: n,
+								"aria-selected": K ? 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", j.row),
+								className: r("flex cursor-pointer items-center gap-2 rounded-lg border border-transparent px-2 py-1.5 transition-colors", H.row, u),
 								onClick: () => i(t),
-								onKeyDown: (e) => q(e, t),
+								onKeyDown: (e) => ae(e, t),
 								children: [
-									/* @__PURE__ */ E(e, {
-										size: s.MD,
+									/* @__PURE__ */ N(e, {
+										size: c.MD,
 										initialsName: t.name
 									}),
-									f == null ? /* @__PURE__ */ E("span", {
-										className: n(g, "min-w-0 flex-1 truncate text-start"),
+									d == null ? /* @__PURE__ */ N("span", {
+										className: r(x, "min-w-0 flex-1 truncate text-start"),
 										children: t.name
-									}) : /* @__PURE__ */ E(u, {
+									}) : /* @__PURE__ */ N(p, {
 										text: t.name,
-										query: f,
+										query: d,
 										maxLines: 1,
-										className: n(g, "min-w-0 flex-1 text-start")
+										className: r(x, "min-w-0 flex-1 text-start")
 									}),
-									/* @__PURE__ */ E(m, {
-										icon: /* @__PURE__ */ E(T, {
-											size: s.SM,
-											className: j.star,
+									a && /* @__PURE__ */ N(y, {
+										icon: /* @__PURE__ */ N(A, {
+											size: c.SM,
+											className: H.star,
 											"aria-hidden": !0
 										}),
-										"aria-label": A,
+										"aria-label": j,
 										isSelected: !0,
+										tabIndex: o,
 										onClick: (e) => {
-											e.stopPropagation(), J(t.id);
+											e.stopPropagation(), oe(t.id);
 										}
 									})
 								]
 							});
-							return /* @__PURE__ */ E("li", {
-								className: R.has(t.id) ? j.rowLeaving : j.rowEnter,
-								children: /* @__PURE__ */ E(d, {
+							return /* @__PURE__ */ N("li", {
+								role: J,
+								className: L.has(t.id) ? H.rowLeaving : H.rowEnter,
+								children: s ? /* @__PURE__ */ N(h, {
 									asChild: !0,
 									contentClassName: "max-w-[550px]",
-									content: /* @__PURE__ */ E(k, {
+									content: /* @__PURE__ */ N(B, {
 										description: t.description,
-										viewDetailsLabel: F,
-										onViewDetails: () => c(t)
+										viewDetailsLabel: M,
+										onViewDetails: () => s(t),
+										viewDetailsTabIndex: o
 									}),
-									children: r
-								})
+									children: l
+								}) : l
 							}, t.id);
 						})
-					}) : V && H !== "" ? /* @__PURE__ */ E("p", {
+					}) : Z && Q !== "" ? /* @__PURE__ */ N("p", {
 						role: "status",
 						"aria-live": "polite",
-						className: n(b, "px-4 py-4 text-start", j.emptyHint),
-						children: I
-					}) : /* @__PURE__ */ E("p", {
-						className: n(b, "px-4 py-4 text-start", j.emptyHint),
-						children: w
+						className: r(T, "px-4 py-4 text-start", H.emptyHint),
+						children: F
+					}) : /* @__PURE__ */ N("p", {
+						className: r(T, "px-4 py-4 text-start", H.emptyHint),
+						children: k
 					})
 				})
 			}),
-			/* @__PURE__ */ E("div", {
-				className: n("border-t px-2 py-3", j.footer),
-				children: /* @__PURE__ */ E(l, {
-					label: O,
+			/* @__PURE__ */ N("div", {
+				className: r("border-t px-2 py-3", H.footer),
+				children: /* @__PURE__ */ N(f, {
+					role: q ? "menuitem" : void 0,
+					label: te,
 					className: "w-full justify-center",
 					onClick: o
 				})
 			})
 		]
 	});
-}, I = ({ isOpen: e, onClose: t, onSelect: n, title: r, renderContent: i }) => /* @__PURE__ */ E(f, {
+}, q = ".zip,.md", J = ({ isOpen: e, errorText: t, accept: n = q, 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__ */ N(g, {
+		open: e,
+		size: _.Sm,
+		header: s,
+		closeAriaLabel: p,
+		onClose: i,
+		children: /* @__PURE__ */ N("div", {
+			className: "px-6 py-4",
+			children: /* @__PURE__ */ N(d, {
+				label: /* @__PURE__ */ P(M, { children: [/* @__PURE__ */ N("span", {
+					className: "desktop:hidden",
+					children: l
+				}), /* @__PURE__ */ N("span", {
+					className: "hidden desktop:inline",
+					children: c
+				})] }),
+				description: u,
+				ariaLabel: f,
+				accept: n,
+				errorText: t,
+				onChange: a,
+				onReject: o
+			})
+		})
+	});
+}, Y = ({ isOpen: e, onClose: t, onSelect: n, title: r, renderContent: i }) => /* @__PURE__ */ N(g, {
 	open: e,
 	header: r,
-	size: p.Lg,
+	size: _.Lg,
 	className: "h-[min(90vh,860px)] !max-w-[min(95vw,1200px)] overflow-hidden",
 	onClose: t,
-	children: /* @__PURE__ */ E("div", {
+	children: /* @__PURE__ */ N("div", {
 		className: "h-[min(80vh,840px)] overflow-auto",
-		children: /* @__PURE__ */ E(g, {
+		children: /* @__PURE__ */ N(x, {
 			fallback: null,
 			children: e && i(n, t)
 		})
 	})
-}), L = (e) => /* @__PURE__ */ E(O, { ...e }), R = (e) => ({
+}), X = (e, t = null) => e.map((e) => e.type === L.Folder ? {
+	path: e.id,
+	name: e.name,
+	nodeType: F.FOLDER,
+	parentPath: t,
+	folderId: e.id,
+	items: X(e.items, e.id)
+} : {
+	path: e.id,
+	name: e.name,
+	nodeType: F.ITEM,
+	parentPath: t,
+	folderId: t ?? ""
+}), Z = ({ nodes: e, selectedFileId: t, expandedFolderIds: n, onToggleFolder: r, onSelectFile: i, onClose: a, ariaLabel: o }) => /* @__PURE__ */ N(I, {
+	items: T(() => X(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 === F.ITEM && i(e.path);
+	},
+	ariaLabel: o,
+	autoFocus: !0,
+	onEscape: a
+}), Q = (e) => /* @__PURE__ */ N(R, {
+	...e,
+	renderContentFileTree: (e) => /* @__PURE__ */ N(Z, { ...e })
+}), ne = (e) => e == null || /[\s/]/.test(e), $ = (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 (ne(e[n])) {
+				r.push({
+					skillIndex: a,
+					start: t,
+					length: o.length
+				}), i = n;
+				return;
+			}
+			s = t + 1;
+		}
+	}), r;
+}, re = (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
+	};
+}, ie = (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), []);
+}, ae = (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);
+}, oe = (e, t) => e.find((e) => e.start + e.length === t), se = (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
+	};
+}, ce = () => {
+	let [e, t] = D(""), [n, r] = D([]), i = E(e);
+	i.current = e;
+	let a = E(n);
+	a.current = n;
+	let o = S((e) => {
+		let n = re(i.current, e);
+		r((e) => ie(e, n)), i.current = e, t(e);
+	}, []), s = 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) => ae(t, a, e, n, s)), s;
+	}, []), c = S((e) => oe(a.current, e), []), l = T(() => {
+		if (n.length !== 0) return n.map((e) => ({ url: e.url }));
+	}, [n]), u = S(() => {
+		t(""), r([]);
+	}, []), d = S((e, n, i) => {
+		let a = n ?? [], o = $(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 T(() => ({
+		draft: e,
+		anchors: n,
+		onDraftChange: o,
+		insertMention: s,
+		onBackspaceAtCaret: c,
+		orderedSkills: l,
+		reset: u,
+		seedFromMessage: d
+	}), [
+		e,
+		n,
+		o,
+		s,
+		c,
+		l,
+		u,
+		d
+	]);
+}, le = (e) => ({
 	id: e.url,
 	name: e.name,
 	description: e.description
-}), z = (e) => {
+}), ue = (e) => {
 	let t = e.split("/").filter((e) => e.length > 0);
 	return t[t.length - 1] ?? e;
-}, B = ({ 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: v = "Type to filter", unsupportedTooltipLabel: y = "Selected model does not support skills. Remove the skill or select different model to proceed.", panelLabels: x } = l ?? {}, w = e && t, [T, D] = S(!1), [O, k] = S(null), [j, M] = S(null), N = b(() => [
-		...n,
-		...i ?? [],
-		...a ?? []
+}, de = "/", fe = ({ isSkillsSupported: e, skills: t, sharedWithMe: n, publicSkills: r, favoriteIds: a, onToggleFavorite: o, labels: s, historyChipLabelClassName: c, activeMentionDetailsTrigger: u, renderCatalogContent: d, detailsPanelComponent: f }) => {
+	let { addMenuLabel: p = "Skills", backLabel: m = "Back", catalogModalTitleLabel: h = "Use skill", emptyQueryHintLabel: g = "Type to filter", panelLabels: _ } = s ?? {}, [v, y] = D(!1), [b, C] = D(null), [ee, w] = D(0), [E, k] = D(0), [te, A] = D(void 0), j = ce(), M = T(() => [
+		...t,
+		...n ?? [],
+		...r ?? []
 	], [
+		t,
 		n,
-		i,
-		a
-	]), P = b(() => new Map(N.map((e) => [e.url, e])), [N]), L = b(() => N.filter((e) => o.has(e.url)).map((e) => R(e)), [N, o]), B = b(() => j == null ? null : P.get(j) ?? null, [P, j]), V = B != null && !t, H = _((e) => {
-		M(e);
-	}, []), U = _(() => {
-		M(null);
-	}, []), W = j, G = b(() => j == null ? void 0 : [{ url: j }], [j]), K = b(() => B == null ? null : /* @__PURE__ */ E(A, {
-		name: B.name,
-		path: B.url,
-		description: B.description,
-		isUnsupported: V,
-		onViewDetails: k,
-		labels: {
-			viewDetailsLabel: x?.viewDetailsLabel,
-			unsupportedTooltipLabel: y
-		}
-	}), [
-		B,
-		V,
-		x,
-		y
-	]), q = _((e) => e == null || e.length === 0 ? null : e.map((e) => {
+		r
+	]), P = T(() => new Map(M.map((e) => [e.url, e])), [M]), F = S((e) => P.get(e)?.name ?? ue(e), [P]), I = T(() => M.filter((e) => a.has(e.url)).map((e) => le(e)), [M, a]), L = j.anchors.length > 0 && !e, R = T(() => j.anchors.map((t) => ({
+		start: t.start,
+		length: t.length,
+		isUnsupported: !e,
+		render: () => /* @__PURE__ */ N(V, {
+			name: t.name,
+			path: t.url,
+			labelClassName: c,
+			description: P.get(t.url)?.description,
+			isUnsupported: !e,
+			detailsTrigger: u,
+			onViewDetails: C,
+			labels: { viewDetailsLabel: _?.viewDetailsLabel }
+		})
+	})), [
+		j.anchors,
+		e,
+		P,
+		c,
+		u,
+		_
+	]), z = S((e, t, n) => {
+		let r = j.insertMention(e, t, n);
+		k((e) => e + 1), A(n + 1 + t.length + +!!r);
+	}, [j]), B = S((e) => {
+		let t = se(j.draft, e, de);
+		return t == null ? e : (j.onDraftChange(j.draft.slice(0, t.start) + j.draft.slice(t.end)), t.start);
+	}, [j]), H = S(() => {
+		j.reset(), k((e) => e + 1), A(void 0);
+	}, [j]), U = S((e, t) => {
+		j.seedFromMessage(e, t, F), k((e) => e + 1), A(void 0);
+	}, [j, F]), W = S((e, t) => {
+		if (t == null || t.length === 0) return null;
+		let n = $(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 ?? ue(a.url);
+			r.push(/* @__PURE__ */ N(V, {
+				name: s,
+				path: a.url,
+				labelClassName: c,
+				description: o?.description,
+				onViewDetails: C,
+				labels: { viewDetailsLabel: _?.viewDetailsLabel }
+			}, `${a.url}-${n.start}`)), i = n.start + n.length;
+		}), i < e.length && r.push(e.slice(i)), r;
+	}, [
+		F,
+		P,
+		c,
+		_
+	]), G = S((e) => e == null || e.length === 0 ? null : e.map((e) => {
 		let t = P.get(e.url);
-		return /* @__PURE__ */ E(A, {
-			name: t?.name ?? z(e.url),
+		return /* @__PURE__ */ N(V, {
+			name: t?.name ?? ue(e.url),
 			path: e.url,
-			labelClassName: u,
+			labelClassName: c,
 			description: t?.description,
-			onViewDetails: k,
-			labels: { viewDetailsLabel: x?.viewDetailsLabel }
+			onViewDetails: C,
+			labels: { viewDetailsLabel: _?.viewDetailsLabel }
 		}, e.url);
 	}), [
 		P,
-		u,
-		x
-	]), J = _((e) => /* @__PURE__ */ E(F, {
-		favorites: L,
-		onSelect: (t) => {
-			H(t.id), e();
+		c,
+		_
+	]), q = S((e, t) => /* @__PURE__ */ N(K, {
+		favorites: I,
+		isMenu: !0,
+		onSelect: (n) => {
+			z(n.id, n.name, B(t)), e();
 		},
-		onToggleFavorite: s,
+		onToggleFavorite: o,
 		onBrowse: () => {
-			e(), D(!0);
+			w(B(t)), e(), y(!0);
 		},
-		onViewDetails: (t) => {
-			e(), k(t.id);
+		onViewDetails: (n) => {
+			B(t), e(), C(n.id);
 		},
-		labels: x
+		labels: _
 	}), [
-		L,
-		H,
-		s,
-		x
-	]), Y = b(() => w ? {
-		key: "skills",
-		title: p,
-		icon: /* @__PURE__ */ E(C, {
-			size: r,
-			"aria-hidden": !0,
-			stroke: c
-		}),
-		renderOverlay: J,
-		backLabel: m
-	} : void 0, [
-		w,
-		p,
-		m,
-		J
-	]), X = b(() => w ? {
-		triggerPrefix: "/",
-		menuLabel: p,
-		emptyQueryHint: v,
-		renderMenu: ({ query: e, close: t }) => /* @__PURE__ */ E(F, {
-			favorites: L,
-			searchQuery: e,
-			onSelect: (e) => {
-				t({ consumeQuery: !0 }), H(e.id);
-			},
-			onToggleFavorite: s,
-			onBrowse: () => {
-				t({ consumeQuery: !0 }), D(!0);
-			},
-			onViewDetails: (e) => {
-				t({ consumeQuery: !0 }), k(e.id);
-			},
-			labels: x
-		})
-	} : void 0, [
-		w,
-		p,
-		v,
-		L,
-		H,
-		s,
-		x
+		I,
+		z,
+		B,
+		o,
+		_
 	]);
-	return e ? {
-		skillMenuOverlay: Y,
-		commandMenu: X,
-		skillCatalogModal: /* @__PURE__ */ E(I, {
-			isOpen: T,
-			onClose: () => D(!1),
+	return {
+		skillMenuOverlay: T(() => e ? {
+			key: "skills",
+			title: p,
+			icon: /* @__PURE__ */ N(O, {
+				size: i,
+				"aria-hidden": !0,
+				stroke: l
+			}),
+			renderOverlay: q,
+			backLabel: m
+		} : void 0, [
+			e,
+			p,
+			m,
+			q
+		]),
+		commandMenu: T(() => e ? {
+			triggerPrefix: de,
+			menuLabel: p,
+			emptyQueryHint: g,
+			renderMenu: ({ query: e, caretPosition: t, close: n, listboxId: r, activeOptionId: i }) => /* @__PURE__ */ N(K, {
+				favorites: I,
+				searchQuery: e,
+				listboxId: r,
+				activeOptionId: i,
+				onSelect: (e) => {
+					n({ consumeQuery: !0 }), z(e.id, e.name, t);
+				},
+				onToggleFavorite: o,
+				onBrowse: () => {
+					n({ consumeQuery: !0 }), w(t), y(!0);
+				},
+				onViewDetails: (e) => {
+					n({ consumeQuery: !0 }), C(e.id);
+				},
+				labels: _
+			})
+		} : void 0, [
+			e,
+			p,
+			g,
+			I,
+			z,
+			o,
+			_
+		]),
+		skillCatalogModal: /* @__PURE__ */ N(Y, {
+			isOpen: v,
+			onClose: () => y(!1),
 			onSelect: (e) => {
-				H(e), D(!1);
+				z(e, F(e), ee), y(!1);
 			},
 			title: h,
 			renderContent: d
 		}),
-		skillDetailsPanel: /* @__PURE__ */ E(g, {
+		skillDetailsPanel: /* @__PURE__ */ N(x, {
 			fallback: null,
-			children: /* @__PURE__ */ E(f, {
-				skillId: O,
-				onClose: () => k(null)
+			children: /* @__PURE__ */ N(f, {
+				skillId: b,
+				onClose: () => C(null)
 			})
 		}),
-		selectedSkillElement: K,
-		selectedSkillPath: W,
-		selectedSkills: G,
-		isSkillUnsupported: V,
-		selectSkill: H,
-		removeSelectedSkill: U,
-		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: j.draft,
+		messageRevision: E,
+		activeMentions: R,
+		onDraftChange: j.onDraftChange,
+		onBackspaceAtCaret: j.onBackspaceAtCaret,
+		caretPositionOverride: te,
+		isSkillUnsupported: L,
+		selectedSkills: j.orderedSkills,
+		resetSkillMentions: H,
+		seedSkillMentions: U,
+		renderHistorySkillSegments: W,
+		renderHistorySkills: G
 	};
+}, pe = {
+	background: "_background_14zdf_1",
+	border: "_border_14zdf_5",
+	value: "_value_14zdf_9",
+	clear: "_clear_14zdf_13",
+	invalid: "_invalid_14zdf_17"
+}, me = [], he = ({ value: e, onChange: i, displayName: a, favorites: o = me, 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), [te, A] = D(!1), [F, I] = D(""), L = E(null), R = ee(), B = E(null), V = E(!1), H = n(e, p), U = p && !h, W = T && U, G = te && U, q = () => {
+		B.current && !B.current.disabled ? B.current.focus() : L.current?.querySelector("button:not(:disabled)")?.focus();
+	};
+	C(() => {
+		V.current && !W && !G && ((document.activeElement === document.body || L.current?.contains(document.activeElement)) && q(), O(!1), A(!1)), V.current = W || G;
+	}, [W, G]);
+	let J = (e) => {
+		e && !U || (I(""), O(e));
+	}, X = (e) => {
+		U && i(e), O(!1), A(!1);
+	}, Z = {
+		...t({
+			"--ssf-text": w?.colors?.text,
+			"--ssf-bg": w?.colors?.background,
+			"--ssf-border": w?.colors?.border,
+			"--ssf-error": w?.colors?.error
+		}),
+		...w?.cssVars
+	}, Q = /* @__PURE__ */ P("div", {
+		id: R,
+		className: "w-full min-w-0",
+		children: [/* @__PURE__ */ N("div", {
+			className: "p-2",
+			children: /* @__PURE__ */ N(v, {
+				value: F,
+				onChange: (e) => I(e ?? ""),
+				placeholder: b.searchPlaceholder ?? "Search skills",
+				"aria-label": b.searchPlaceholder ?? "Search skills",
+				clearLabel: b.clearSearchLabel ?? "Clear search"
+			})
+		}), /* @__PURE__ */ N(K, {
+			className: "min-w-0 desktop:w-full",
+			rowClassName: "min-h-11",
+			favorites: o,
+			searchQuery: F,
+			labels: b.panelLabels,
+			onSelect: (e) => X(e.id),
+			onToggleFavorite: s,
+			onViewDetails: c ? (e) => {
+				O(!1), c(e);
+			} : void 0,
+			onBrowse: () => {
+				O(!1), A(!0);
+			}
+		})]
+	}), ne = /* @__PURE__ */ N(m, {
+		inputRef: B,
+		readOnly: !0,
+		role: "combobox",
+		"aria-haspopup": "dialog",
+		"aria-expanded": W,
+		"aria-controls": W ? R : void 0,
+		"aria-labelledby": _,
+		"aria-describedby": y,
+		"aria-invalid": g || H,
+		disabled: !U,
+		invalid: g || H,
+		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 Z && pe.background, "--ssf-border" in Z && pe.border, (g || H) && pe.invalid, w?.triggerClassName),
+		className: r("min-w-0 cursor-pointer text-ellipsis", "--ssf-text" in Z && pe.value, w?.typography?.fontClassName ?? "dial-small-text"),
+		onKeyDown: (e) => {
+			[
+				"Enter",
+				" ",
+				"ArrowDown"
+			].includes(e.key) ? (e.preventDefault(), e.stopPropagation(), J(e.key === "ArrowDown" || !W)) : e.key === "Escape" && J(!1);
+		},
+		iconAfter: /* @__PURE__ */ P("span", {
+			className: "flex shrink-0 items-center",
+			children: [e && /* @__PURE__ */ N(f, {
+				type: "button",
+				className: r("size-11 shrink-0", pe.clear),
+				disabled: h,
+				"aria-label": b.removeSkillLabel,
+				onKeyDown: (e) => e.stopPropagation(),
+				onClick: (e) => {
+					e.stopPropagation(), i(void 0), O(!1), U ? B.current?.focus() : L.current?.focus();
+				},
+				iconBefore: /* @__PURE__ */ N(j, {
+					"aria-hidden": !0,
+					size: 18,
+					stroke: l
+				})
+			}), /* @__PURE__ */ N(k, {
+				"aria-hidden": !0,
+				size: 20,
+				stroke: l,
+				className: r("transition-transform", W && "rotate-180")
+			})]
+		})
+	});
+	return /* @__PURE__ */ P("div", {
+		ref: L,
+		role: "group",
+		"aria-labelledby": _,
+		tabIndex: -1,
+		className: r("min-w-0", S, z.selectorField),
+		style: Z,
+		children: [d ? /* @__PURE__ */ P(M, { children: [/* @__PURE__ */ N("div", {
+			className: "w-full min-w-0",
+			onClick: () => J(!W),
+			children: ne
+		}), d(Q, W, () => J(!1))] }) : /* @__PURE__ */ N(u, {
+			open: W,
+			onOpenChange: J,
+			disabled: !U,
+			className: "w-full min-w-0",
+			listClassName: "w-[min(var(--reference-width),calc(100vw-2rem))] max-w-full",
+			renderOverlay: () => /* @__PURE__ */ N("div", {
+				role: "dialog",
+				"aria-labelledby": _,
+				children: Q
+			}),
+			initialFocus: 0,
+			children: ne
+		}), G && /* @__PURE__ */ N(Y, {
+			isOpen: !0,
+			onClose: () => A(!1),
+			title: b.modalTitle,
+			onSelect: X,
+			renderContent: x
+		})]
+	});
 };
 //#endregion
-export { A as ChatSkill, F as FavoriteSkillsPanel, I as SkillCatalogModal, L as SkillDetailsSidePanel, k as SkillInfoTooltipContent, R as buildFavoriteSkillItem, B as useSkillSelectorOverlay };
+export { V as ChatSkill, K as FavoriteSkillsPanel, z as SKILLS_CLASS, J as SkillArchiveUploadDialog, Y as SkillCatalogModal, Z as SkillContentFileTree, Q as SkillDetailsSidePanel, B as SkillInfoTooltipContent, he as SkillSelectorField, le as buildFavoriteSkillItem, re as diffTextChange, oe as findMentionAtCaret, ue as getSkillFallbackName, ae as insertAnchor, $ as matchSkillMentions, ie as reconcileAnchors, ce as useSkillMentions, fe as useSkillSelectorOverlay };