@epam/ai-dial-skills 1.2.0-dev.141 → 1.2.0-dev.142

package/index.js

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