@adea-ai/ui 0.68.2 → 0.69.1

package/dist/components/conversation/paste-token-editor.js

@@ -0,0 +1,570 @@
+import { countLines, findTokenRanges, formatToken, isPasteBlock, nextSeq, pruneBlocks, shouldCollapse, stripTrailingBlankLines, tokenRangeAt } from "./paste-tokens.js";
+import { summarizePastePreview } from "./paste-preview.js";
+import { addEventListener, createComponent, delegateEvents, effect, insert, memo, setAttribute, template, use } from "solid-js/web";
+import { For, Show, createEffect, createMemo, createSignal, createUniqueId, on, onCleanup, onMount } from "solid-js";
+import { Tooltip } from "@kobalte/core/tooltip";
+//#region src/components/conversation/paste-token-editor.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div data-slot=paste-token-mirror aria-hidden=true class="pointer-events-none absolute inset-0 overflow-hidden select-none whitespace-pre-wrap break-words px-4 py-3 text-sm text-transparent">`);
+var _tmpl$2 = /*#__PURE__*/ template(`<textarea data-slot=composer-input aria-keyshortcuts=Alt+ArrowDown class="relative field-sizing-content text-foreground placeholder:text-muted-foreground min-h-11 max-h-36 w-full resize-none border-0 bg-transparent px-4 py-3 text-sm outline-none disabled:opacity-50"rows=1>`);
+var _tmpl$3 = /*#__PURE__*/ template(`<span class=visually-hidden>When the caret is next to a paste token or a token is selected, press Alt+Down Arrow to preview its text. Press Escape to close the preview.`);
+var _tmpl$4 = /*#__PURE__*/ template(`<span class="box-decoration-clone rounded-md bg-primary-subtle">`);
+var _tmpl$5 = /*#__PURE__*/ template(`<span>`);
+var _tmpl$6 = /*#__PURE__*/ template(`<pre class="m-0 max-h-48 max-w-64 overflow-y-auto whitespace-pre-wrap break-words font-mono">`);
+var _tmpl$7 = /*#__PURE__*/ template(`<span>+<!> more lines`);
+var _tmpl$8 = /*#__PURE__*/ template(`<span>+<!> more characters`);
+var PREVIEW_OPEN_DELAY_MS = 300;
+function isTouchDevice() {
+	return typeof window !== "undefined" && typeof window.matchMedia === "function" && (window.matchMedia("(pointer: coarse)").matches || window.matchMedia("(hover: none)").matches);
+}
+function isBlockquotePrefix(linePrefix) {
+	let sawMarker = false;
+	for (let index = 0; index < linePrefix.length; index += 1) {
+		const code = linePrefix.charCodeAt(index);
+		if (code === 62) sawMarker = true;
+		else if (code !== 32 && code !== 9) return false;
+	}
+	return sawMarker;
+}
+/** Controlled plain-text editor that treats known paste markers as atomic ranges. */
+function PasteTokenEditor(props) {
+	const [preview, setPreview] = createSignal(null);
+	const previewSummary = createMemo(() => {
+		const block = preview();
+		return block ? summarizePastePreview(block.content, block.lines) : null;
+	});
+	const descriptionId = `paste-preview-${createUniqueId()}`;
+	const keyboardHintId = `paste-keyboard-hint-${createUniqueId()}`;
+	let field;
+	let mirror;
+	let previewTimer;
+	let scheduledBlockId = null;
+	let rawPasteNext = false;
+	let suppressPasteInput = false;
+	let nativePasteInputSeen = false;
+	let keyboardNavigationPending = false;
+	let acceptingTextDrop = false;
+	let snappedCaretPreview = null;
+	const ranges = () => findTokenRanges(props.value, props.blocks);
+	const clearTimer = () => {
+		clearTimeout(previewTimer);
+		previewTimer = void 0;
+	};
+	const closePreview = () => {
+		clearTimer();
+		scheduledBlockId = null;
+		snappedCaretPreview = null;
+		setPreview(null);
+	};
+	const schedulePreview = (block) => {
+		if (scheduledBlockId === block.id) return;
+		clearTimer();
+		scheduledBlockId = block.id;
+		setPreview(null);
+		previewTimer = setTimeout(() => {
+			previewTimer = void 0;
+			const current = ranges().find((range) => range.block.id === block.id);
+			if (current) setPreview(current.block);
+			else closePreview();
+		}, PREVIEW_OPEN_DELAY_MS);
+	};
+	const change = (text, blocks = props.blocks) => {
+		props.onChange({
+			text,
+			blocks: pruneBlocks(text, [...blocks])
+		});
+	};
+	const snapToTokenEdge = (position, tokenRanges = ranges(), edge) => {
+		for (const range of tokenRanges) if (position > range.start && position < range.end) {
+			if (edge === "start") return range.start;
+			if (edge === "end") return range.end;
+			return position - range.start <= range.end - position ? range.start : range.end;
+		}
+		return position;
+	};
+	const setCaret = (position, focus = false) => {
+		requestAnimationFrame(() => {
+			if (!field) return;
+			if (focus) field.focus();
+			field.setSelectionRange(position, position);
+		});
+	};
+	const replaceRange = (start, end) => {
+		if (!field) return;
+		const removed = ranges().filter((range) => range.start < end && range.end > start);
+		if (!removed.length) return;
+		const nextStart = Math.min(start, ...removed.map((range) => range.start));
+		const nextEnd = Math.max(end, ...removed.map((range) => range.end));
+		const next = props.value.slice(0, nextStart) + props.value.slice(nextEnd);
+		change(next, props.blocks.filter((block) => !removed.some((range) => range.block.id === block.id)));
+		setCaret(nextStart);
+	};
+	const expandToken = (range) => {
+		const next = props.value.slice(0, range.start) + range.block.content + props.value.slice(range.end);
+		change(next, props.blocks.filter((block) => block.id !== range.block.id));
+		closePreview();
+		setCaret(range.start + range.block.content.length, true);
+	};
+	const segments = () => {
+		const result = [];
+		let cursor = 0;
+		for (const range of ranges()) {
+			if (range.start > cursor) result.push({ text: props.value.slice(cursor, range.start) });
+			result.push({
+				text: props.value.slice(range.start, range.end),
+				block: range.block
+			});
+			cursor = range.end;
+		}
+		if (cursor < props.value.length) result.push({ text: props.value.slice(cursor) });
+		if (!result.length) result.push({ text: props.value });
+		return result;
+	};
+	const scheduleCaretPreview = () => {
+		if (isTouchDevice() || props.composing() || !field) {
+			closePreview();
+			return;
+		}
+		if (field.selectionStart !== field.selectionEnd) {
+			closePreview();
+			return;
+		}
+		const caret = field.selectionStart;
+		const range = ranges().find((candidate) => caret > candidate.start && caret < candidate.end);
+		if (range) {
+			schedulePreview(range.block);
+			return;
+		}
+		const snappedRange = snappedCaretPreview?.position === caret ? ranges().find((candidate) => candidate.block.id === snappedCaretPreview?.blockId) : void 0;
+		if (snappedRange) schedulePreview(snappedRange.block);
+		else closePreview();
+	};
+	const openKeyboardPreview = () => {
+		if (!field) return false;
+		const start = field.selectionStart;
+		const end = field.selectionEnd;
+		const range = ranges().find((candidate) => start === end ? start >= candidate.start && start <= candidate.end : candidate.start < end && candidate.end > start);
+		if (!range) return false;
+		clearTimer();
+		scheduledBlockId = range.block.id;
+		setPreview(range.block);
+		return true;
+	};
+	const schedulePointerPreview = (event) => {
+		if (isTouchDevice() || props.composing() || event.buttons !== 0 || !mirror) {
+			closePreview();
+			return;
+		}
+		for (const span of mirror.querySelectorAll("[data-paste-seq]")) {
+			const rect = span.getBoundingClientRect();
+			if (event.clientX >= rect.left && event.clientX <= rect.right && event.clientY >= rect.top && event.clientY <= rect.bottom) {
+				const sequence = Number(span.dataset.pasteSeq);
+				const range = ranges().find((candidate) => candidate.block.seq === sequence);
+				if (range) schedulePreview(range.block);
+				else closePreview();
+				return;
+			}
+		}
+		closePreview();
+	};
+	const snapSelection = () => {
+		if (!field || props.composing() || acceptingTextDrop) return;
+		const start = field.selectionStart;
+		const end = field.selectionEnd;
+		const direction = field.selectionDirection;
+		const tokenRanges = ranges();
+		if (start === end) {
+			if (keyboardNavigationPending) return;
+			scheduleCaretPreview();
+			const next = snapToTokenEdge(start, tokenRanges);
+			if (next !== start) {
+				const range = tokenRanges.find((candidate) => start > candidate.start && start < candidate.end);
+				if (range) snappedCaretPreview = {
+					blockId: range.block.id,
+					position: next
+				};
+				field.setSelectionRange(next, next, direction);
+			}
+			return;
+		}
+		scheduleCaretPreview();
+		const nextStart = snapToTokenEdge(start, tokenRanges);
+		const nextEnd = snapToTokenEdge(end, tokenRanges);
+		if (nextStart !== start || nextEnd !== end) field.setSelectionRange(Math.min(nextStart, nextEnd), Math.max(nextStart, nextEnd), direction);
+	};
+	const handleKeyDown = (event) => {
+		snappedCaretPreview = null;
+		rawPasteNext = (event.metaKey || event.ctrlKey) && event.shiftKey && !event.altKey && event.key.toLowerCase() === "v";
+		if (props.composing() || event.isComposing || event.keyCode === 229 || !field) {
+			props.onKeyDown(event);
+			return;
+		}
+		if (event.key === "ArrowDown" && event.altKey && !event.metaKey && !event.ctrlKey && !event.shiftKey && openKeyboardPreview()) {
+			event.preventDefault();
+			props.onKeyDown(event);
+			return;
+		}
+		if (event.key === "Escape" && preview()) closePreview();
+		const value = props.value;
+		const start = field.selectionStart;
+		const end = field.selectionEnd;
+		const collapsed = start === end;
+		const tokenRanges = ranges();
+		const plainModifier = !event.metaKey && !event.ctrlKey && !event.altKey;
+		const backspace = event.key === "Backspace";
+		const deletion = backspace || event.key === "Delete";
+		let remove;
+		if (deletion && !collapsed) {
+			if (tokenRanges.some((range) => range.start < end && range.end > start)) remove = [start, end];
+		} else if (deletion) {
+			const adjacent = tokenRanges.find((range) => backspace ? range.end === start : range.start === start);
+			if (adjacent && (plainModifier || event.altKey || event.ctrlKey)) remove = [adjacent.start, adjacent.end];
+			else if (event.metaKey) {
+				const boundary = backspace ? value.lastIndexOf("\n", start - 1) + 1 : value.indexOf("\n", start);
+				const from = backspace ? boundary : start;
+				const to = backspace ? start : boundary < 0 ? value.length : boundary;
+				if (tokenRanges.some((range) => range.start < to && range.end > from)) remove = [from, to];
+			}
+		}
+		if (remove) {
+			event.preventDefault();
+			replaceRange(remove[0], remove[1]);
+			props.onKeyDown(event);
+			return;
+		}
+		if (plainModifier && collapsed && !event.shiftKey) {
+			const left = event.key === "ArrowLeft";
+			const right = event.key === "ArrowRight";
+			const adjacent = left ? tokenRanges.find((range) => range.end === start) : right ? tokenRanges.find((range) => range.start === start) : void 0;
+			if (adjacent) {
+				event.preventDefault();
+				setCaret(left ? adjacent.start : adjacent.end);
+				props.onKeyDown(event);
+				return;
+			}
+		}
+		if (!event.metaKey && !event.ctrlKey && !event.altKey && event.shiftKey) {
+			const direction = field.selectionDirection === "backward" ? "backward" : "forward";
+			const active = direction === "backward" ? start : end;
+			const adjacent = event.key === "ArrowLeft" ? tokenRanges.find((range) => range.end === active) : event.key === "ArrowRight" ? tokenRanges.find((range) => range.start === active) : void 0;
+			if (adjacent) {
+				event.preventDefault();
+				requestAnimationFrame(() => {
+					if (!field) return;
+					if (event.key === "ArrowLeft" && direction === "backward") field.setSelectionRange(adjacent.start, end, "backward");
+					else if (event.key === "ArrowLeft") field.setSelectionRange(start, adjacent.start, start <= adjacent.start ? "forward" : "backward");
+					else if (direction === "backward") field.setSelectionRange(adjacent.end, end, adjacent.end <= end ? "backward" : "forward");
+					else field.setSelectionRange(start, adjacent.end, "forward");
+				});
+				props.onKeyDown(event);
+				return;
+			}
+		}
+		if (event.key === "Home" || event.key === "End" || (event.key === "ArrowLeft" || event.key === "ArrowRight") && (event.metaKey || event.ctrlKey || event.altKey)) {
+			const leftward = event.key === "ArrowLeft" || event.key === "Home";
+			keyboardNavigationPending = true;
+			requestAnimationFrame(() => {
+				if (field) {
+					const nextRanges = findTokenRanges(field.value, props.blocks);
+					const edge = leftward ? "start" : "end";
+					const nextStart = snapToTokenEdge(field.selectionStart, nextRanges, edge);
+					const nextEnd = snapToTokenEdge(field.selectionEnd, nextRanges, edge);
+					if (nextStart !== field.selectionStart || nextEnd !== field.selectionEnd) field.setSelectionRange(Math.min(nextStart, nextEnd), Math.max(nextStart, nextEnd), field.selectionDirection);
+				}
+				keyboardNavigationPending = false;
+			});
+		}
+		props.onKeyDown(event);
+	};
+	const expandSelectionForClipboard = (start, end) => {
+		if (start === end) return null;
+		const covered = ranges().filter((range) => range.start >= start && range.end <= end);
+		if (!covered.length) return null;
+		let result = "";
+		let cursor = start;
+		for (const range of covered) {
+			result += props.value.slice(cursor, range.start) + range.block.content;
+			cursor = range.end;
+		}
+		return result + props.value.slice(cursor, end);
+	};
+	const handlePaste = (event) => {
+		const forceRaw = rawPasteNext;
+		rawPasteNext = false;
+		const pasted = event.clipboardData?.getData("text/plain") ?? "";
+		if (!pasted || !field || props.readOnly || props.disabled) return;
+		const cleaned = forceRaw ? pasted : stripTrailingBlankLines(pasted);
+		const start = field.selectionStart;
+		const end = field.selectionEnd;
+		const before = props.value.slice(0, start);
+		const after = props.value.slice(end);
+		if (!forceRaw && shouldCollapse(cleaned)) {
+			const id = props.createBlockId();
+			if (props.blocks.some((block) => block.id === id)) return;
+			const block = {
+				id,
+				seq: nextSeq([...props.blocks]),
+				lines: countLines(cleaned),
+				content: cleaned
+			};
+			if (!isPasteBlock(block)) return;
+			const linePrefix = before.slice(before.lastIndexOf("\n") + 1);
+			const leading = before && !before.endsWith("\n") && !isBlockquotePrefix(linePrefix) ? "\n" : "";
+			const trailing = after && !after.startsWith("\n") ? "\n" : "";
+			const insert = leading + formatToken(block) + trailing;
+			event.preventDefault();
+			change(before + insert + after, [...props.blocks, block]);
+			closePreview();
+			setCaret(before.length + insert.length);
+			return;
+		}
+		if (forceRaw) return;
+		if (cleaned !== pasted && cleaned !== "") {
+			event.preventDefault();
+			const next = before + cleaned + after;
+			nativePasteInputSeen = false;
+			suppressPasteInput = true;
+			let inserted = false;
+			try {
+				inserted = typeof document.execCommand === "function" && document.execCommand("insertText", false, cleaned);
+			} catch {
+				inserted = false;
+			}
+			if (!nativePasteInputSeen) suppressPasteInput = false;
+			change(next);
+			if (inserted && field.value === next) return;
+			setCaret(before.length + cleaned.length);
+		}
+	};
+	const handleDragOver = (event) => {
+		if (!field || props.readOnly || props.disabled || props.composing()) return;
+		if (event.dataTransfer?.types.includes("text/plain")) {
+			acceptingTextDrop = true;
+			closePreview();
+			event.preventDefault();
+		}
+	};
+	const handleDragLeave = () => {
+		acceptingTextDrop = false;
+	};
+	const handleDrop = (event) => {
+		if (!field || props.readOnly || props.disabled || props.composing()) {
+			acceptingTextDrop = false;
+			return;
+		}
+		if (!event.dataTransfer?.types.includes("text/plain")) {
+			acceptingTextDrop = false;
+			return;
+		}
+		const dropped = event.dataTransfer.getData("text/plain");
+		event.preventDefault();
+		acceptingTextDrop = false;
+		if (!dropped) return;
+		const tokenRanges = ranges();
+		let start = field.selectionStart;
+		let end = field.selectionEnd;
+		const removed = tokenRanges.filter((range) => start === end ? start > range.start && start < range.end : range.start < end && range.end > start);
+		if (removed.length) {
+			start = Math.min(start, ...removed.map((range) => range.start));
+			end = Math.max(end, ...removed.map((range) => range.end));
+		}
+		change(props.value.slice(0, start) + dropped + props.value.slice(end));
+		closePreview();
+		setCaret(start + dropped.length);
+	};
+	const handleClipboard = (event) => {
+		if (!field || !event.clipboardData) return;
+		const start = field.selectionStart;
+		const end = field.selectionEnd;
+		const expanded = expandSelectionForClipboard(start, end);
+		if (expanded === null) return;
+		event.clipboardData.setData("text/plain", expanded);
+		event.preventDefault();
+		if (event.type === "cut") {
+			change(props.value.slice(0, start) + props.value.slice(end));
+			setCaret(start);
+		}
+	};
+	const handleClick = (event) => {
+		if (!field || !props.blocks.length) return;
+		const range = tokenRangeAt(props.value, props.blocks, field.selectionStart);
+		if (!range) return;
+		if (isTouchDevice() || event.detail >= 2) expandToken(range);
+		else requestAnimationFrame(() => field?.setSelectionRange(range.start, range.end));
+	};
+	createEffect(on(() => props.value, closePreview));
+	createEffect(on(() => props.blocks, closePreview));
+	createEffect(on(() => props.resetKey, () => {
+		rawPasteNext = false;
+		closePreview();
+	}));
+	onMount(() => {
+		window.addEventListener("scroll", closePreview, true);
+		window.addEventListener("resize", closePreview);
+		onCleanup(() => {
+			window.removeEventListener("scroll", closePreview, true);
+			window.removeEventListener("resize", closePreview);
+		});
+	});
+	onCleanup(() => clearTimer());
+	return createComponent(Tooltip, {
+		get open() {
+			return !!preview();
+		},
+		onOpenChange: (open) => {
+			if (!open) closePreview();
+		},
+		openDelay: PREVIEW_OPEN_DELAY_MS,
+		get children() {
+			return [createComponent(Tooltip.Trigger, {
+				as: "div",
+				"class": "relative",
+				get children() {
+					return [
+						(() => {
+							var _el$ = _tmpl$();
+							use((element) => mirror = element, _el$);
+							insert(_el$, createComponent(For, {
+								get each() {
+									return segments();
+								},
+								children: (segment) => segment.block ? (() => {
+									var _el$4 = _tmpl$4();
+									insert(_el$4, () => segment.text);
+									effect(() => setAttribute(_el$4, "data-paste-seq", segment.block.seq));
+									return _el$4;
+								})() : (() => {
+									var _el$5 = _tmpl$5();
+									insert(_el$5, () => segment.text);
+									return _el$5;
+								})()
+							}), null);
+							insert(_el$, () => props.value.endsWith("\n") ? "​" : "", null);
+							return _el$;
+						})(),
+						(() => {
+							var _el$2 = _tmpl$2();
+							_el$2.$$keydown = handleKeyDown;
+							_el$2.addEventListener("blur", () => {
+								rawPasteNext = false;
+								acceptingTextDrop = false;
+								props.onBlur();
+								closePreview();
+							});
+							addEventListener(_el$2, "focus", props.onFocus);
+							addEventListener(_el$2, "compositionend", props.onCompositionEnd);
+							addEventListener(_el$2, "compositionstart", props.onCompositionStart);
+							_el$2.addEventListener("scroll", (event) => {
+								if (mirror) {
+									mirror.scrollTop = event.currentTarget.scrollTop;
+									mirror.scrollLeft = event.currentTarget.scrollLeft;
+								}
+								closePreview();
+							});
+							_el$2.addEventListener("mouseleave", closePreview);
+							_el$2.$$mousemove = schedulePointerPreview;
+							_el$2.addEventListener("select", snapSelection);
+							_el$2.$$click = handleClick;
+							_el$2.addEventListener("cut", handleClipboard);
+							_el$2.addEventListener("copy", handleClipboard);
+							_el$2.addEventListener("drop", handleDrop);
+							_el$2.addEventListener("dragleave", handleDragLeave);
+							_el$2.addEventListener("dragover", handleDragOver);
+							_el$2.addEventListener("paste", handlePaste);
+							_el$2.$$input = (event) => {
+								if (suppressPasteInput) {
+									suppressPasteInput = false;
+									nativePasteInputSeen = true;
+									return;
+								}
+								change(event.currentTarget.value);
+							};
+							use((element) => {
+								field = element;
+								props.ref(element);
+								onCleanup(() => {
+									if (field === element) field = void 0;
+									props.ref(void 0);
+								});
+							}, _el$2);
+							effect((_p$) => {
+								var _v$ = props.inputLabel, _v$2 = preview() ? `${keyboardHintId} ${descriptionId}` : keyboardHintId, _v$3 = props.disabled, _v$4 = props.readOnly, _v$5 = props.placeholder;
+								_v$ !== _p$.e && setAttribute(_el$2, "aria-label", _p$.e = _v$);
+								_v$2 !== _p$.t && setAttribute(_el$2, "aria-describedby", _p$.t = _v$2);
+								_v$3 !== _p$.a && (_el$2.disabled = _p$.a = _v$3);
+								_v$4 !== _p$.o && (_el$2.readOnly = _p$.o = _v$4);
+								_v$5 !== _p$.i && setAttribute(_el$2, "placeholder", _p$.i = _v$5);
+								return _p$;
+							}, {
+								e: void 0,
+								t: void 0,
+								a: void 0,
+								o: void 0,
+								i: void 0
+							});
+							effect(() => _el$2.value = props.value);
+							return _el$2;
+						})(),
+						(() => {
+							var _el$3 = _tmpl$3();
+							setAttribute(_el$3, "id", keyboardHintId);
+							return _el$3;
+						})()
+					];
+				}
+			}), createComponent(Show, {
+				get when() {
+					return previewSummary();
+				},
+				children: (summary) => createComponent(Tooltip.Portal, { get children() {
+					return createComponent(Tooltip.Content, {
+						id: descriptionId,
+						"data-slot": "paste-token-preview",
+						"class": "bg-scrim text-scrim-foreground z-(--z-tooltip) w-fit max-w-64 rounded-md px-2 py-1 text-xs origin-(--kb-tooltip-content-transform-origin) text-balance data-expanded:animate-in data-expanded:fade-in-0 data-expanded:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-expanded:duration-150 data-closed:duration-100",
+						get children() {
+							return [
+								(() => {
+									var _el$6 = _tmpl$6();
+									insert(_el$6, () => summary().text);
+									return _el$6;
+								})(),
+								createComponent(Show, {
+									get when() {
+										return summary().hiddenLines > 0;
+									},
+									get children() {
+										var _el$7 = _tmpl$7(), _el$0 = _el$7.firstChild.nextSibling;
+										_el$0.nextSibling;
+										insert(_el$7, () => summary().hiddenLines, _el$0);
+										return _el$7;
+									}
+								}),
+								createComponent(Show, {
+									get when() {
+										return memo(() => summary().hiddenLines === 0)() && summary().hiddenCharacters > 0;
+									},
+									get children() {
+										var _el$1 = _tmpl$8(), _el$12 = _el$1.firstChild.nextSibling;
+										_el$12.nextSibling;
+										insert(_el$1, () => summary().hiddenCharacters, _el$12);
+										return _el$1;
+									}
+								}),
+								createComponent(Tooltip.Arrow, { "aria-hidden": "true" })
+							];
+						}
+					});
+				} })
+			})];
+		}
+	});
+}
+delegateEvents([
+	"input",
+	"click",
+	"mousemove",
+	"keydown"
+]);
+//#endregion
+export { PasteTokenEditor };
+
+//# sourceMappingURL=paste-token-editor.js.map