@copilotkit/learning 0.0.1 → 1.80.0

package/dist/index.mjs

@@ -115,13 +115,17 @@ function createRedactor() {
 	const toggled = (records) => {
 		for (const record of records) if (record.oldValue?.toLowerCase() === "password") seen.add(record.target);
 	};
-	/** Replaces remembered values, raw and in their JSON and URL encodings. */
-	const scrub = (text) => {
+	/**
+	* Replaces remembered values, raw and in their JSON and URL encodings, plus
+	* `normalize(value)` when given and at least 4 characters long.
+	*/
+	const scrub = (text, normalize) => {
 		for (const value of [...remembered.values()].sort((a, b) => b.length - a.length)) for (const form of [
 			value,
 			JSON.stringify(value).slice(1, -1),
 			encodeURIComponent(value),
-			new URLSearchParams({ v: value }).toString().slice(2)
+			new URLSearchParams({ v: value }).toString().slice(2),
+			...[normalize?.(value) ?? ""].filter((normal) => normal.length >= 4)
 		]) text = /^\d+$/.test(form) ? text.replace(RegExp(`(?<!\\d)${form}(?!\\d)`, "g"), REDACTED) : text.split(form).join(REDACTED);
 		return text;
 	};
@@ -139,6 +143,7 @@ function createRedactor() {
 	};
 	return {
 		isPassword,
+		scrub,
 		watch() {
 			try {
 				for (const input of document.querySelectorAll("input[type=password]")) seen.add(input);
@@ -222,6 +227,172 @@ function describeTarget(el, redact) {
 		}
 	};
 }
+const MAX_LABEL_LENGTH = 80;
+const MAX_WALK_NODES = 1e3;
+const MAX_WALK_CHARS = 4 * MAX_LABEL_LENGTH;
+const CONTROL_ROLE = /^(button|link|tab|menuitem(checkbox|radio)?|option|checkbox|switch|radio|treeitem)$/;
+const CONTENTEDITABLE = "[contenteditable]:not([contenteditable=\"false\"])";
+const TEXT_ENTRY = `${CONTENTEDITABLE}, [role~=textbox], [role~=searchbox], [role~=combobox]`;
+const EDITABLE = `input, textarea, select, ${TEXT_ENTRY}`;
+const HEADING = "h1, h2, h3, h4, h5, h6, [role~=heading]";
+const STRUCTURE = `${HEADING}, p, ul, ol, li, dl, table, article, section, blockquote`;
+const SKIPPED = "script, style, template, [hidden], [aria-hidden=\"true\"]";
+const PHRASING = /^(b|i|u|em|strong|mark|small|sub|sup|abbr|code|kbd|s|q|cite|dfn|var|time|data|bdi|bdo|wbr|span)$/;
+const CAPTION_INPUT = /^(submit|button|reset|image)$/;
+const NON_TEXT_INPUT = /^(submit|button|reset|image|checkbox|radio|range|color|file|hidden)$/;
+const IGNORABLE = /\p{Default_Ignorable_Code_Point}/gu;
+const URL_LIKE = /(?:\b[a-z][\w+.-]{0,31}:\/\/|\bwww\.)[^\s<>"']*[^\s<>"'.,;:!?)]/gi;
+const EMAIL = /[\p{L}\p{N}_.%+-]{1,64}@[\p{L}\p{N}-]{1,63}(?:\.[\p{L}\p{N}-]{1,63})+/gu;
+const JWT = /(^|[^\w-])(?:eyJ[\w-]*\.[\w-]*\.[\w-]*|[\w-]{16,}\.[\w-]{16,}\.[\w-]{16,}|(?=[\w-]*\d)[\w-]{8,}\.(?=[\w-]*\d)[\w-]{8,}\.(?=[\w-]*\d)[\w-]{8,})/g;
+const TOKEN_RUN = /[\w+/=-]{24,}/g;
+const roleOf = (element) => (element.getAttribute("role") ?? "").trim().split(/\s+/)[0].toLowerCase();
+const idRefs = (element, name) => (element.getAttribute(name) ?? "").split(/\s+/).filter(Boolean);
+const rootOf = (element) => {
+	const root = element.getRootNode();
+	return root instanceof Document || root instanceof ShadowRoot ? root : null;
+};
+/** Buttons, links with `href`, `summary`, and elements with a control role. */
+const isControl = (element) => {
+	const role = roleOf(element);
+	return role ? CONTROL_ROLE.test(role) : element.matches("button, a[href], summary");
+};
+/** Text-like inputs, text areas, selects, and anything inside editable content or a text-entry role. */
+const holdsValue = (element) => element instanceof HTMLInputElement ? !NON_TEXT_INPUT.test(element.type) : element.matches("textarea, select") || element.closest(TEXT_ENTRY) !== null;
+/**
+* The name an image contributes: `alt` of an `img`, or `aria-label` (else a
+* plain `<title>`) of an `svg` or `role="img"` element. `undefined` when the
+* element is not an image.
+*/
+function imageName(element) {
+	if (element.localName === "img") return element.getAttribute("alt");
+	if (element.localName !== "svg" && roleOf(element) !== "img") return void 0;
+	const title = Array.from(element.children).find((child) => child.localName === "title" && child.childElementCount === 0);
+	return element.getAttribute("aria-label") ?? title?.textContent ?? null;
+}
+/**
+* Rendered text. Inline formatting joins words; other elements separate them.
+* Skips hidden subtrees, uses image names, and does
+* not walk into images. Yields nothing for editable content or editable
+* descendants. In `strict` mode (a control's own text) it also yields nothing
+* past the walk bounds, for card-like structure, and for text that looks like
+* separate fields: two `div`s that directly hold text, or three sibling
+* elements that each carry text.
+*/
+function safeText(root, strict) {
+	if (holdsValue(root)) return "";
+	let text = "";
+	let nodes = 0;
+	let paragraphs = 0;
+	let div;
+	const bearers = /* @__PURE__ */ new Map();
+	const add = (part) => text = (text + part).replace(/\s+/g, " ");
+	const bear = (start) => {
+		if (!strict) return true;
+		for (let child = start, parent = start.parentNode; child !== root && parent !== null; child = parent, parent = parent.parentNode) {
+			const siblings = bearers.get(parent) ?? /* @__PURE__ */ new Set();
+			bearers.set(parent, siblings);
+			if (siblings.has(child)) break;
+			if (siblings.add(child).size > 2) return false;
+		}
+		return true;
+	};
+	let node = root.firstChild;
+	while (node !== null) {
+		if (++nodes > MAX_WALK_NODES || text.length > MAX_WALK_CHARS) {
+			if (strict) return "";
+			break;
+		}
+		let descend = false;
+		if (node instanceof Text) {
+			const parent = node.parentNode;
+			let holder = parent;
+			while (holder !== root && PHRASING.test(holder.localName)) holder = holder.parentElement;
+			if (/\S/.test(node.data) && (!bear(parent) || strict && holder.localName === "div" && (div ??= holder) !== holder)) return "";
+			add(node.data);
+		} else if (node instanceof Element) {
+			if (node.matches(EDITABLE)) return "";
+			if (strict && node.matches(STRUCTURE) && !(root.localName === "summary" && node.matches(HEADING)) && (node.localName !== "p" || ++paragraphs > 1)) return "";
+			const name = node.matches(SKIPPED) ? null : imageName(node);
+			if (name) {
+				if (!bear(node)) return "";
+				add(` ${name} `);
+			} else if (name === void 0) {
+				if (!PHRASING.test(node.localName)) add(" ");
+				descend = true;
+			}
+		}
+		if (descend && node.firstChild !== null) node = node.firstChild;
+		else {
+			while (node !== root && node.nextSibling === null) {
+				node = node.parentNode;
+				if (!PHRASING.test(node.localName)) add(" ");
+			}
+			node = node === root ? null : node.nextSibling;
+		}
+	}
+	return text;
+}
+/** An option or tree item of an autocomplete or search popup, whose text usually repeats what the user typed. */
+const isSuggestion = (element) => (element.localName === "option" || /^(option|treeitem)$/.test(roleOf(element))) && inSuggestionList(element);
+/** Whether `element` is, or is inside, a combobox, a datalist, or the popup a combobox or autocomplete field controls or owns. */
+function inSuggestionList(element) {
+	if (element.closest("[role~=combobox], datalist") !== null) return true;
+	const root = rootOf(element);
+	return root !== null && Array.from(root.querySelectorAll("[role~=combobox], [aria-autocomplete]")).some((owner) => [...idRefs(owner, "aria-controls"), ...idRefs(owner, "aria-owns")].some((id) => root.getElementById(id)?.contains(element)));
+}
+function labelledBy(element) {
+	const root = rootOf(element);
+	return root === null ? null : idRefs(element, "aria-labelledby").map((id) => {
+		const referenced = root.getElementById(id);
+		return referenced === null || inSuggestionList(referenced) ? "" : safeText(referenced, false);
+	}).join(" ");
+}
+/** A control's own text, unless it is longer than a label: then it is content, not a name. */
+const normalize = (text) => text.replace(IGNORABLE, "").replace(/\s+/g, " ").trim();
+function contentText(element) {
+	const text = safeText(element, true);
+	return Array.from(normalize(text)).length > MAX_LABEL_LENGTH ? "" : text;
+}
+/** Removes invisible characters, credentials, emails, URLs, and tokens, then caps the length. */
+function cleanLabel(raw, redact) {
+	const chars = Array.from(redact.scrub(normalize(redact.body(raw.replace(IGNORABLE, "")) ?? ""), normalize).replace(URL_LIKE, "[url]").replace(EMAIL, "[email]").replace(JWT, `$1${REDACTED}`).replace(TOKEN_RUN, (run) => /\d/.test(run) ? REDACTED : run));
+	return chars.length > MAX_LABEL_LENGTH ? `${chars.slice(0, MAX_LABEL_LENGTH - 1).join("").trimEnd()}…` : chars.join("");
+}
+function firstLabel(sources, redact) {
+	for (const source of sources) {
+		const label = cleanLabel(source() ?? "", redact);
+		if (label) return label;
+	}
+}
+/**
+* A short name for the clicked control, from the first source that yields one:
+* `aria-labelledby`, `aria-label`, an input caption or `alt`, `title` (controls
+* only), then the text of a control named by its content. Containers, cards,
+* and editable content never contribute their text. An autocomplete suggestion,
+* or anything inside one, gets no label from any source; `data-copilotkit-action`
+* names it instead. An icon without its own name takes the name of the control
+* around it.
+*/
+function clickLabel(element, redact) {
+	const option = element.closest("option, [role~=option], [role~=treeitem]");
+	if (option !== null && isSuggestion(option)) return void 0;
+	const named = [() => labelledBy(element), () => element.getAttribute("aria-label")];
+	if (/^(img|svg)$/.test(element.localName) || /^(img|presentation|none)$/.test(roleOf(element))) {
+		const own = firstLabel([...named, () => imageName(element) ?? null], redact);
+		if (own !== void 0) return own;
+		let control = element.parentElement;
+		while (control !== null && !isControl(control)) control = control.parentElement;
+		return control === null ? void 0 : clickLabel(control, redact);
+	}
+	const control = isControl(element) && !holdsValue(element);
+	const captionInput = element instanceof HTMLInputElement && CAPTION_INPUT.test(element.type);
+	return firstLabel([
+		...named,
+		() => captionInput ? element.type === "image" ? element.getAttribute("alt") : element.value : null,
+		() => control || captionInput ? element.getAttribute("title") : null,
+		() => control ? contentText(element) : null
+	], redact);
+}
 /** Snapshot live control properties; HTML attributes do not reflect edited values. */
 function readControlValue(element, redact) {
 	if (element instanceof HTMLInputElement) return {
@@ -239,7 +410,7 @@ function readControlValue(element, redact) {
 		selectedValues: Array.from(element.selectedOptions, (option) => option.value)
 	};
 	if (element instanceof HTMLTextAreaElement) return { value: element.value };
-	if (element.matches("[contenteditable]:not([contenteditable=\"false\"])")) return { value: element.textContent ?? "" };
+	if (element.matches(CONTENTEDITABLE)) return { value: element.textContent ?? "" };
 	return {};
 }
 function eventElement(event) {
@@ -260,12 +431,21 @@ function isNear(origin, event) {
 function installClickCapture(params) {
 	const { emit, getRoute, enrich, isTrusted = (event) => event.isTrusted, redact = createRedactor() } = params;
 	let origin = null;
+	const describeClick = (el) => {
+		const described = describeTarget(el, redact);
+		if (described === null) return null;
+		try {
+			const label = clickLabel(described.element, redact);
+			if (label !== void 0) described.target.label = label;
+		} catch {}
+		return described;
+	};
 	const onPointerDown = (event) => {
 		try {
 			if (event.isPrimary === false) return;
 			const el = eventElement(event);
 			origin = {
-				described: el === null ? null : describeTarget(el, redact),
+				described: el === null ? null : describeClick(el),
 				x: event.clientX,
 				y: event.clientY
 			};
@@ -280,7 +460,7 @@ function installClickCapture(params) {
 			if (!isTrusted(event)) return;
 			const el = eventElement(event);
 			if (el === null) return;
-			const described = pointerOrigin !== null && isRootOrDetached(el) && isNear(pointerOrigin, event) ? pointerOrigin.described : describeTarget(el, redact);
+			const described = pointerOrigin !== null && isRootOrDetached(el) && isNear(pointerOrigin, event) ? pointerOrigin.described : describeClick(el);
 			if (described === null) return;
 			const input = event.detail === 0 ? "keyboard" : "pointer";
 			emit("click", {
@@ -310,41 +490,138 @@ function installClickCapture(params) {
 
 //#endregion
 //#region src/inputs.ts
-/** Records user edits without changing the control or interfering with its listeners. */
+const TEXT_DEBOUNCE_MS = 300;
+const TEXT_INPUT_TYPES = new Set([
+	"text",
+	"search",
+	"tel",
+	"url",
+	"email",
+	"password",
+	"number"
+]);
+/** Records settled user edits without interfering with the host app's controls. */
 function installInputCapture(params) {
 	const { emit, isTrusted = (event) => event.isTrusted, redact = createRedactor() } = params;
-	const onInput = (event) => {
+	let active = true;
+	const pending = /* @__PURE__ */ new Map();
+	const changeEcho = /* @__PURE__ */ new WeakMap();
+	const composing = /* @__PURE__ */ new WeakMap();
+	const cancel = (element) => {
+		clearTimeout(pending.get(element)?.timer);
+		pending.delete(element);
+	};
+	const deliver = (element, edit) => {
 		try {
-			if (!isTrusted(event)) return;
-			const [element] = event.composedPath();
-			if (!(element instanceof Element)) return;
-			const described = describeTarget(element, redact);
-			if (described === null) return;
-			const value = readControlValue(element, redact);
-			if (!("value" in value)) return;
-			emit("input", {
-				eventType: event.type,
+			if (!active || describeTarget(element, redact) === null) return;
+			if (redact.isPassword(element) && edit.state.value !== REDACTED) return;
+			if (edit.payload.eventType === "input") changeEcho.set(element, JSON.stringify(edit.state));
+			edit.payload.url = redact.url(edit.payload.url);
+			edit.payload.target.text = redact.url(edit.payload.target.text);
+			edit.payload.target.attributes = Object.fromEntries(Object.entries(edit.payload.target.attributes).map(([key, value]) => [key, redact.url(value)]));
+			emit("input", edit.payload);
+		} catch {}
+	};
+	const flush = () => {
+		const edits = [...pending];
+		for (const [element] of edits) cancel(element);
+		for (const [element, edit] of edits) deliver(element, edit);
+	};
+	const observe = (element, eventType, settle) => {
+		if (pending.size > 0 && !pending.has(element)) flush();
+		if (!active) return;
+		const described = describeTarget(element, redact);
+		if (described === null) {
+			cancel(element);
+			return;
+		}
+		const state = readControlValue(element, redact);
+		if (!("value" in state)) return;
+		const text = element instanceof HTMLTextAreaElement || element instanceof HTMLInputElement && TEXT_INPUT_TYPES.has(element.type) || element.matches("[contenteditable]:not([contenteditable=\"false\"])");
+		if (!text) flush();
+		const signature = JSON.stringify(state);
+		const echo = eventType === "change" && (signature === JSON.stringify(pending.get(element)?.state) || signature === changeEcho.get(element));
+		changeEcho.delete(element);
+		if (echo) {
+			flush();
+			changeEcho.delete(element);
+			return;
+		}
+		cancel(element);
+		const edit = {
+			state,
+			payload: {
+				eventType,
 				target: {
 					...described.target,
-					...value
+					...state
 				},
 				url: redact.url(location.href),
 				route: location.pathname
-			});
+			}
+		};
+		if (!text) {
+			deliver(element, edit);
+			return;
+		}
+		if (settle) edit.timer = setTimeout(() => {
+			cancel(element);
+			deliver(element, edit);
+		}, TEXT_DEBOUNCE_MS);
+		pending.set(element, edit);
+	};
+	const onEdit = (event) => {
+		try {
+			if (!active || !isTrusted(event)) return;
+			const [element] = event.composedPath();
+			if (!(element instanceof Element)) return;
+			if (event.type === "compositionstart") {
+				composing.set(element, true);
+				clearTimeout(pending.get(element)?.timer);
+				return;
+			}
+			if (event.type === "compositionend") composing.set(element, false);
+			const inComposition = composing.get(element) === true || composing.get(element) !== false && "isComposing" in event && event.isComposing === true;
+			observe(element, event.type === "compositionend" ? "input" : event.type, !inComposition);
+			if (event.type === "change") flush();
 		} catch {}
 	};
-	window.addEventListener("input", onInput, {
+	const onAction = (event) => {
+		if (event.type !== "pagehide" && !isTrusted(event)) return;
+		if (event.type === "keydown") {
+			const [element] = event.composedPath();
+			if (!(event instanceof KeyboardEvent) || event.key !== "Enter" || event.isComposing || event.keyCode === 229 || element instanceof Element && composing.get(element) === true) return;
+		}
+		flush();
+	};
+	const editTypes = [
+		"input",
+		"change",
+		"compositionstart",
+		"compositionend"
+	];
+	const actionTypes = [
+		"click",
+		"submit",
+		"focusout",
+		"pagehide",
+		"keydown"
+	];
+	for (const type of editTypes) window.addEventListener(type, onEdit, {
 		capture: true,
 		passive: true
 	});
-	window.addEventListener("change", onInput, {
+	for (const type of actionTypes) window.addEventListener(type, onAction, {
 		capture: true,
 		passive: true
 	});
-	return () => {
-		window.removeEventListener("input", onInput, { capture: true });
-		window.removeEventListener("change", onInput, { capture: true });
+	const uninstall = () => {
+		active = false;
+		for (const element of pending.keys()) cancel(element);
+		for (const type of editTypes) window.removeEventListener(type, onEdit, true);
+		for (const type of actionTypes) window.removeEventListener(type, onAction, true);
 	};
+	return Object.assign(uninstall, { flush });
 }
 
 //#endregion
@@ -864,6 +1141,8 @@ function createCollector(options) {
 	const record = (name, value) => {
 		const current = session;
 		if (current === null) return;
+		if (name !== "input" && name !== "network") current.flushInputs?.();
+		if (session !== current) return;
 		try {
 			seq += 1;
 			const event = {
@@ -876,7 +1155,7 @@ function createCollector(options) {
 				timestamp: Date.now()
 			};
 			const kept = beforeSend === void 0 ? event : beforeSend(event);
-			if (kept === null) return;
+			if (kept === null || session !== current) return;
 			current.queue.push(kept);
 			if (current.queue.length >= FLUSH_SIZE) flush();
 		} catch {}
@@ -919,10 +1198,14 @@ function createCollector(options) {
 			ignoreUrls,
 			redact
 		}));
-		if (capture.inputs) current.uninstalls.push(installInputCapture({
-			emit: recordCurrent,
-			redact
-		}));
+		if (capture.inputs) {
+			const inputs = installInputCapture({
+				emit: recordCurrent,
+				redact
+			});
+			current.flushInputs = inputs.flush;
+			current.uninstalls.push(inputs);
+		}
 		const onPageHide = () => flush({ beacon: true });
 		window.addEventListener("pagehide", onPageHide);
 		current.uninstalls.push(() => window.removeEventListener("pagehide", onPageHide));
@@ -937,6 +1220,8 @@ function createCollector(options) {
 	const stop = () => {
 		const current = session;
 		if (current === null) return;
+		current.flushInputs?.();
+		if (session !== current) return;
 		clearInterval(current.timer);
 		for (const uninstall of current.uninstalls) uninstall();
 		flush();
@@ -1016,7 +1301,9 @@ function isJson(value, ancestors = /* @__PURE__ */ new Set()) {
 */
 function createTrajectoryCollector(options) {
 	let active = false;
+	let generation = 0;
 	let uninstalls = [];
+	let flushInputs;
 	const report = (code, message) => {
 		try {
 			options.onError?.({
@@ -1028,6 +1315,9 @@ function createTrajectoryCollector(options) {
 	const getRoute = () => toRoute(location.pathname);
 	const record = (name, value) => {
 		if (!active) return;
+		const current = generation;
+		if (name !== "input" && name !== "network") flushInputs?.();
+		if (!active || generation !== current) return;
 		let payload;
 		try {
 			const event = {
@@ -1037,7 +1327,7 @@ function createTrajectoryCollector(options) {
 				value
 			};
 			const kept = options.beforeSend === void 0 ? event : options.beforeSend(event);
-			if (kept === null || !active) return;
+			if (kept === null || !active || generation !== current) return;
 			if (kept.type !== "CUSTOM" || typeof kept.name !== "string" || !kept.name.trim() || kept.name.length > 200 || kept.name.includes("\0") || !Number.isFinite(kept.timestamp) || kept.timestamp <= 0 || kept.timestamp >= 0xe677d21fdc00 || !isJson(kept.value)) {
 				report("INVALID_EVENT", "The event must contain a name, timestamp, and JSON value.");
 				return;
@@ -1067,6 +1357,12 @@ function createTrajectoryCollector(options) {
 		record(name, value);
 	};
 	const stop = () => {
+		const current = generation;
+		const flush = flushInputs;
+		flushInputs = void 0;
+		flush?.();
+		if (generation !== current) return;
+		generation++;
 		active = false;
 		const installed = uninstalls;
 		uninstalls = [];
@@ -1076,6 +1372,7 @@ function createTrajectoryCollector(options) {
 		start() {
 			if (active || typeof window === "undefined") return;
 			active = true;
+			generation++;
 			if (typeof window.addEventListener !== "function") return;
 			const redact = createRedactor();
 			try {
@@ -1089,10 +1386,14 @@ function createTrajectoryCollector(options) {
 					emit: capture,
 					redact
 				}));
-				if (options.capture?.inputs !== false) uninstalls.push(installInputCapture({
-					emit: capture,
-					redact
-				}));
+				if (options.capture?.inputs !== false) {
+					const inputs = installInputCapture({
+						emit: capture,
+						redact
+					});
+					flushInputs = inputs.flush;
+					uninstalls.push(inputs);
+				}
 				if (options.capture?.network !== false) uninstalls.push(installNetworkCapture({
 					emit: capture,
 					ignoreUrls: options.ignoreUrls ?? [],