// ==UserScript== // @name Ask // @description Highlight any text & click Ask → get an interactive chat prompt // @namespace tweeks.io // @author Matt Stallone // @version 1.0.0 // @match *://*/* // @grant TW_inference // @run-at document-end // ==/UserScript== (function () { "use strict"; // ----------------------- // Config // ----------------------- const BTN_LABEL = "Ask"; const MIN_SELECTION_CHARS = 3; // Grounding context: keep modest for speed. const MAX_CONTEXT_CHARS = 900; // Bound selection sent to model const MAX_SELECTION_FOR_MODEL = 4000; // Bound conversation sent to model const MAX_MESSAGES_FOR_MODEL = 14; const MAX_MESSAGE_CHARS_FOR_MODEL = 2000; // Button behavior const SELECTION_DEBOUNCE_MS = 80; const HIDE_BUTTON_DELAY_MS = 140; // Popup sizing const POPUP_MAX_VH = 0.70; // 70% viewport height const POPUP_MAX_PX = 720; const VIEWPORT_PAD = 12; const ANCHOR_GAP = 10; // Hidden prompt for initial response (not shown in UI) const INITIAL_HIDDEN_PROMPT = "Explain the selected text clearly and concisely in 2–3 sentences."; // ----------------------- // Ask button styles (light DOM) // NOTE: No left/top !important; JS positions it. // ----------------------- const BTN_STYLES = ` .tw-ask-btn { position: fixed !important; z-index: 2147483647 !important; background: #1a1a1a !important; color: #fff !important; border: none !important; border-radius: 10px !important; padding: 8px 12px !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; font-size: 13px !important; font-weight: 650 !important; cursor: pointer !important; opacity: 0 !important; transform: translate(-50%, 8px) !important; transition: opacity 0.15s ease, transform 0.15s ease !important; box-shadow: 0 10px 26px rgba(0,0,0,0.22) !important; pointer-events: none !important; white-space: nowrap !important; user-select: none !important; } .tw-ask-btn.visible { opacity: 1 !important; transform: translate(-50%, 0) !important; pointer-events: auto !important; } .tw-ask-btn:hover { background: #2a2a2a !important; } .tw-ask-btn.loading { pointer-events: none !important; opacity: 1 !important; } .tw-ask-btn .spinner { display: inline-block !important; width: 12px !important; height: 12px !important; border: 2px solid rgba(255,255,255,0.35) !important; border-top-color: #fff !important; border-radius: 50% !important; animation: tw-ask-spin 0.6s linear infinite !important; margin-right: 7px !important; vertical-align: -2px !important; } @keyframes tw-ask-spin { to { transform: rotate(360deg); } } `; // ----------------------- // Popup styles (Shadow DOM) // - max-height + content scroll ensures it grows then scrolls // - header is drag handle // ----------------------- const SHADOW_STYLES = ` * { box-sizing: border-box; margin: 0; padding: 0; } .backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.30); opacity: 0; pointer-events: none; transition: opacity 0.18s ease; } .backdrop.visible { opacity: 1; pointer-events: auto; } .popup { position: fixed; display: flex; flex-direction: column; width: min(520px, calc(100vw - 24px)); max-height: min(${Math.round(POPUP_MAX_VH * 100)}vh, ${POPUP_MAX_PX}px); background: #fff; border-radius: 14px; box-shadow: 0 14px 48px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.06); overflow: hidden; opacity: 0; pointer-events: none; transform: scale(0.985) translateY(-8px); transition: opacity 0.18s ease, transform 0.18s ease; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 14px; line-height: 1.4; color: #222; } .popup.visible { opacity: 1; pointer-events: auto; transform: scale(1) translateY(0); } .header { padding: 10px 12px; border-bottom: 1px solid #eee; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-shrink: 0; background: #fafafa; user-select: none; cursor: grab; } .header:active { cursor: grabbing; } .title { font-size: 13px; font-weight: 750; color: #111; letter-spacing: 0.1px; } .close { width: 32px; height: 32px; border-radius: 9px; border: 1px solid #ddd; background: #fff; color: #111; cursor: pointer; font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .close:hover { background: #f3f3f3; } /* Scroll container: grows until popup max-height, then scrolls */ .content { padding: 12px; overflow-y: auto; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; } .quote { background: #f7f7f7; border-left: 3px solid #111; padding: 8px 10px; border-radius: 0 10px 10px 0; color: #555; font-size: 12.5px; white-space: pre-wrap; } .thread { display: flex; flex-direction: column; gap: 10px; } .bubble { padding: 9px 10px; border-radius: 12px; white-space: pre-wrap; word-break: break-word; max-width: 92%; } .bubble.user { align-self: flex-end; background: #f0f0f0; color: #111; } .bubble.assistant { align-self: flex-start; background: #fff; border: 1px solid #eee; color: #222; } .bubble.thinking { font-style: italic; color: #555; border-style: dashed; } .footer { padding: 10px 12px; border-top: 1px solid #eee; display: flex; gap: 10px; align-items: flex-end; flex-shrink: 0; background: #fff; } .input { flex: 1; resize: none; min-height: 38px; max-height: 140px; padding: 9px 10px; border: 1px solid #ddd; border-radius: 12px; font-size: 13px; font-family: inherit; outline: none; line-height: 1.3; } .input:focus { border-color: #1a1a1a; } .send { padding: 9px 12px; border-radius: 12px; border: 1px solid #1a1a1a; background: #1a1a1a; color: #fff; font-size: 13px; font-weight: 650; cursor: pointer; user-select: none; } .send:hover { background: #2a2a2a; border-color: #2a2a2a; } .send:disabled { opacity: 0.55; cursor: not-allowed; } `; // ----------------------- // State // ----------------------- let btn; let shadow, backdrop, popup, headerEl, quoteEl, contentEl, threadEl, inputEl, sendEl, closeEl; let selectionSnapshot = null; // { text, context, rect } let popupOpen = false; let selectionDebounceTimer = null; let hideButtonTimer = null; // Anchor used to position popup near the selection (viewport coords) let anchorRect = null; // Placement mode // - auto: keep near selection, choose above/below as content grows // - manual: user dragged; thereafter only clamp to viewport let placementMode = "auto"; // "auto" | "manual" let popupPlacement = "below"; // "below" | "above" // Dragging let isDragging = false; let dragOffset = { x: 0, y: 0 }; // Chat + grounding let originalText = ""; let selectionContext = ""; let messages = []; // visible chat: { role, content } let inFlight = false; let popupResizeObserver = null; // ----------------------- // Helpers // ----------------------- function clamp(n, min, max) { return Math.max(min, Math.min(max, n)); } function normalizeWhitespace(s) { return (s || "").replace(/\s+/g, " ").trim(); } function getPageMeta() { const lang = (document.documentElement.getAttribute("lang") || "en").trim() || "en"; return { title: document.title || "", url: location.href || "", lang }; } function isEditable(el) { if (!el) return false; const tag = (el.tagName || "").toLowerCase(); if (tag === "input" || tag === "textarea" || tag === "select") return true; if (el.isContentEditable) return true; let p = el; for (let i = 0; i < 6 && p; i++) { if (p.isContentEditable) return true; p = p.parentElement; } return false; } function isSelectionInsidePopup(sel) { try { if (!sel) return false; const a = sel.anchorNode && sel.anchorNode.getRootNode && sel.anchorNode.getRootNode(); const f = sel.focusNode && sel.focusNode.getRootNode && sel.focusNode.getRootNode(); return a === shadow || f === shadow; } catch { return false; } } function getContextFromRange(range, selectedText) { let node = range.commonAncestorContainer; if (!node) return ""; if (node.nodeType === Node.TEXT_NODE) node = node.parentElement; let el = node && node.nodeType === Node.ELEMENT_NODE ? node : null; const BLOCK_TAGS = new Set(["P", "LI", "BLOCKQUOTE", "TD", "TH", "DIV", "SECTION", "ARTICLE", "MAIN", "ASIDE"]); for (let i = 0; i < 8 && el && el.parentElement; i++) { if (isEditable(el)) return ""; if (BLOCK_TAGS.has(el.tagName)) break; el = el.parentElement; } let raw = ""; try { raw = (el && (el.innerText || el.textContent)) || ""; } catch { raw = ""; } const text = normalizeWhitespace(raw); if (!text) return ""; const target = normalizeWhitespace(selectedText).toLowerCase(); const lower = text.toLowerCase(); const idx = target ? lower.indexOf(target) : -1; if (idx >= 0 && text.length > MAX_CONTEXT_CHARS) { const half = Math.floor(MAX_CONTEXT_CHARS / 2); const start = Math.max(0, idx - half); const end = Math.min(text.length, idx + target.length + half); return text.slice(start, end); } return text.slice(0, MAX_CONTEXT_CHARS); } function captureSelectionSnapshot() { const sel = window.getSelection(); if (!sel || sel.rangeCount === 0 || sel.isCollapsed) return null; if (isSelectionInsidePopup(sel)) return null; const text = sel.toString().trim(); if (!text || text.length < MIN_SELECTION_CHARS) return null; const range = sel.getRangeAt(0); const rect = range.getBoundingClientRect(); if (!rect || (!rect.width && !rect.height)) return null; const anchorEl = sel.anchorNode && (sel.anchorNode.nodeType === Node.ELEMENT_NODE ? sel.anchorNode : sel.anchorNode.parentElement); if (isEditable(anchorEl)) return null; const context = getContextFromRange(range, text); return { text, context, rect }; } // ----------------------- // Ask button positioning (centered under selection) // ----------------------- function setBtnLoading(isLoading) { if (!isLoading) { btn.classList.remove("loading"); btn.textContent = BTN_LABEL; return; } btn.classList.add("loading"); btn.innerHTML = 'Thinking…'; } function positionAskButton(rect) { const btnRect = btn.getBoundingClientRect(); const btnH = btnRect.height || 34; const halfW = (btnRect.width || 70) / 2; const desiredCenterX = rect.left + rect.width / 2; const centerX = clamp(desiredCenterX, VIEWPORT_PAD + halfW, window.innerWidth - VIEWPORT_PAD - halfW); let top = rect.bottom + ANCHOR_GAP; if (top + btnH + VIEWPORT_PAD > window.innerHeight) { top = rect.top - ANCHOR_GAP - btnH; } top = clamp(top, VIEWPORT_PAD, window.innerHeight - btnH - VIEWPORT_PAD); btn.style.setProperty("left", `${centerX}px`, "important"); btn.style.setProperty("top", `${top}px`, "important"); } function showAskButtonFor(rect) { clearTimeout(hideButtonTimer); positionAskButton(rect); requestAnimationFrame(() => btn.classList.add("visible")); } function hideAskButtonSoon() { clearTimeout(hideButtonTimer); hideButtonTimer = setTimeout(() => { btn.classList.remove("visible", "loading"); btn.textContent = BTN_LABEL; }, HIDE_BUTTON_DELAY_MS); } // ----------------------- // Popup positioning (never off-screen; grows up and/or scrolls) // ----------------------- function decidePlacementForHeight(height) { const below = window.innerHeight - (anchorRect?.bottom ?? 0); const above = anchorRect?.top ?? 0; if (below >= height + ANCHOR_GAP + VIEWPORT_PAD) return "below"; if (above >= height + ANCHOR_GAP + VIEWPORT_PAD) return "above"; return below >= above ? "below" : "above"; } function clampPopupToViewport() { if (!popupOpen) return; const r = popup.getBoundingClientRect(); const w = r.width || 520; const h = r.height || 420; const curLeft = parseFloat(popup.style.left || "0"); const curTop = parseFloat(popup.style.top || "0"); const leftBase = Number.isFinite(curLeft) ? curLeft : r.left; const topBase = Number.isFinite(curTop) ? curTop : r.top; const left = clamp(leftBase, VIEWPORT_PAD, window.innerWidth - w - VIEWPORT_PAD); const top = clamp(topBase, VIEWPORT_PAD, window.innerHeight - h - VIEWPORT_PAD); popup.style.left = `${left}px`; popup.style.top = `${top}px`; } function positionPopupNearAnchor() { if (!popupOpen || !anchorRect) return; const r = popup.getBoundingClientRect(); const w = r.width || 520; const h = r.height || 420; // Re-evaluate placement as it grows, so it can flip above if needed. popupPlacement = decidePlacementForHeight(h); const centerX = anchorRect.left + anchorRect.width / 2; const left = clamp(centerX - w / 2, VIEWPORT_PAD, window.innerWidth - w - VIEWPORT_PAD); let top = popupPlacement === "below" ? (anchorRect.bottom + ANCHOR_GAP) : (anchorRect.top - ANCHOR_GAP - h); top = clamp(top, VIEWPORT_PAD, window.innerHeight - h - VIEWPORT_PAD); popup.style.left = `${left}px`; popup.style.top = `${top}px`; } function relayoutPopup() { requestAnimationFrame(() => { if (!popupOpen) return; if (placementMode === "manual") { // User dragged: keep position, only clamp as size changes. clampPopupToViewport(); } else { // Auto: stay near selection, choose above/below and clamp. positionPopupNearAnchor(); clampPopupToViewport(); } }); } // ----------------------- // Popup UI // ----------------------- function setQuote(text) { const t = (text || "").trim(); if (!t) { quoteEl.style.display = "none"; quoteEl.textContent = ""; return; } quoteEl.style.display = "block"; quoteEl.textContent = t.length > 320 ? t.slice(0, 320) + "…" : t; } function isNearBottom(el, thresholdPx) { return el.scrollHeight - (el.scrollTop + el.clientHeight) <= thresholdPx; } function addBubble(role, text) { const shouldStick = isNearBottom(contentEl, 40); const div = document.createElement("div"); div.className = `bubble ${role}`; div.textContent = text || ""; threadEl.appendChild(div); // Auto-scroll only if user is already near the bottom. if (shouldStick) contentEl.scrollTop = contentEl.scrollHeight; return div; } function clearThread() { threadEl.innerHTML = ""; } function setBusy(state) { inFlight = state; sendEl.disabled = state; inputEl.disabled = state; } function conversationForModel() { return messages .slice(-MAX_MESSAGES_FOR_MODEL) .map((m) => ({ role: m.role, content: (m.content || "").slice(0, MAX_MESSAGE_CHARS_FOR_MODEL), })); } async function explainSelection() { if (typeof TW_inference !== "function") { return "TW_inference is not available. Confirm @grant TW_inference and that your environment provides it."; } const page = getPageMeta(); const selectionForModel = originalText.length > MAX_SELECTION_FOR_MODEL ? originalText.slice(0, MAX_SELECTION_FOR_MODEL) + "…" : originalText; const prompt = [ INITIAL_HIDDEN_PROMPT, "Output rules: plain text only (no Markdown).", `Respond in the page language if reasonable (lang: ${page.lang}).`, ].join("\n"); const data = { page, selection: { text: selectionForModel, context: selectionContext || "" }, }; const resp = await TW_inference(prompt, data); return (resp || "").trim() || "No response returned."; } async function answerFollowUp(question) { if (typeof TW_inference !== "function") { return "TW_inference is not available. Confirm @grant TW_inference and that your environment provides it."; } const page = getPageMeta(); const selectionForModel = originalText.length > MAX_SELECTION_FOR_MODEL ? originalText.slice(0, MAX_SELECTION_FOR_MODEL) + "…" : originalText; const prompt = [ "You are an AI assistant in a small webpage chat widget.", "Use the selection text and nearby context for grounding.", "Use the prior messages to maintain continuity.", "Answer the user's question.", "Output rules:", "- Plain text only (no Markdown).", "- Be concise by default.", `- Respond in the page language if reasonable (lang: ${page.lang}).`, ].join("\n"); const data = { page, selection: { text: selectionForModel, context: selectionContext || "" }, chat: conversationForModel(), question: question, }; const resp = await TW_inference(prompt, data); return (resp || "").trim() || "No response returned."; } function openPopupFromSnapshot(snap) { popupOpen = true; // Reset placement to auto each open placementMode = "auto"; popupPlacement = "below"; originalText = snap.text; selectionContext = snap.context || ""; anchorRect = snap.rect; messages = []; clearThread(); setQuote(originalText); backdrop.classList.add("visible"); popup.classList.add("visible"); // Position near selection immediately. relayoutPopup(); inputEl.value = ""; autoResizeInput(); inputEl.focus(); // Hide Ask button while open btn.classList.remove("visible"); // Initial answer (no synthetic user bubble shown) (async () => { setBusy(true); const thinking = addBubble("assistant", "Thinking…"); thinking.classList.add("thinking"); relayoutPopup(); try { const a = await explainSelection(); thinking.classList.remove("thinking"); thinking.textContent = a; messages.push({ role: "assistant", content: a }); } catch { thinking.classList.remove("thinking"); thinking.textContent = "Error: failed to generate a response."; } finally { setBusy(false); relayoutPopup(); inputEl.focus(); } })(); } function closePopup() { popupOpen = false; anchorRect = null; isDragging = false; setBusy(false); backdrop.classList.remove("visible"); popup.classList.remove("visible"); originalText = ""; selectionContext = ""; messages = []; clearThread(); setQuote(""); inputEl.value = ""; autoResizeInput(); hideAskButtonSoon(); } async function handleSend() { if (!popupOpen || inFlight) return; const q = (inputEl.value || "").trim(); if (!q) return; inputEl.value = ""; autoResizeInput(); addBubble("user", q); messages.push({ role: "user", content: q }); setBusy(true); const thinking = addBubble("assistant", "Thinking…"); thinking.classList.add("thinking"); relayoutPopup(); try { const a = await answerFollowUp(q); thinking.classList.remove("thinking"); thinking.textContent = a; messages.push({ role: "assistant", content: a }); } catch { thinking.classList.remove("thinking"); thinking.textContent = "Error: failed to generate a response."; } finally { setBusy(false); relayoutPopup(); inputEl.focus(); } } function autoResizeInput() { inputEl.style.height = "auto"; const h = Math.min(inputEl.scrollHeight || 38, 140); inputEl.style.height = `${h}px`; relayoutPopup(); } // ----------------------- // Drag to move (header) // - When user drags, we switch to placementMode = "manual" // - Then ResizeObserver only clamps (does not re-anchor) // ----------------------- function startDrag(e) { // Only left button if (e.button !== 0) return; // Don't start drag if clicking close button if (e.target && e.target.closest && e.target.closest(".close")) return; e.preventDefault(); placementMode = "manual"; // lock placement isDragging = true; const rect = popup.getBoundingClientRect(); dragOffset = { x: e.clientX - rect.left, y: e.clientY - rect.top }; document.addEventListener("mousemove", onDrag, true); document.addEventListener("mouseup", stopDrag, true); } function onDrag(e) { if (!isDragging || !popupOpen) return; const rect = popup.getBoundingClientRect(); const w = rect.width || 520; const h = rect.height || 420; let left = e.clientX - dragOffset.x; let top = e.clientY - dragOffset.y; left = clamp(left, VIEWPORT_PAD, window.innerWidth - w - VIEWPORT_PAD); top = clamp(top, VIEWPORT_PAD, window.innerHeight - h - VIEWPORT_PAD); popup.style.left = `${left}px`; popup.style.top = `${top}px`; } function stopDrag() { isDragging = false; document.removeEventListener("mousemove", onDrag, true); document.removeEventListener("mouseup", stopDrag, true); } // ----------------------- // Selection handling // ----------------------- function handleSelectionChanged() { if (popupOpen) return; const snap = captureSelectionSnapshot(); if (!snap) { selectionSnapshot = null; hideAskButtonSoon(); return; } selectionSnapshot = snap; setBtnLoading(false); showAskButtonFor(snap.rect); } function scheduleSelectionChanged() { if (popupOpen) return; if (selectionDebounceTimer) clearTimeout(selectionDebounceTimer); selectionDebounceTimer = setTimeout(handleSelectionChanged, SELECTION_DEBOUNCE_MS); } // ----------------------- // Init // ----------------------- function init() { // Button CSS const style = document.createElement("style"); style.textContent = BTN_STYLES; (document.head || document.documentElement).appendChild(style); // Ask button btn = document.createElement("button"); btn.className = "tw-ask-btn"; btn.type = "button"; btn.textContent = BTN_LABEL; // Prevent selection collapse on click btn.addEventListener("mousedown", (e) => { e.preventDefault(); e.stopPropagation(); }); btn.addEventListener("click", (e) => { e.preventDefault(); e.stopPropagation(); const snap = selectionSnapshot || captureSelectionSnapshot(); if (!snap) return; setBtnLoading(true); openPopupFromSnapshot(snap); setBtnLoading(false); }); document.body.appendChild(btn); // Shadow host + popup const host = document.createElement("div"); host.style.cssText = "position:fixed;top:0;left:0;z-index:2147483647;pointer-events:none;"; document.body.appendChild(host); shadow = host.attachShadow({ mode: "closed" }); shadow.innerHTML = `

`; backdrop = shadow.querySelector(".backdrop"); popup = shadow.querySelector(".popup"); headerEl = shadow.querySelector(".header"); quoteEl = shadow.querySelector(".quote"); contentEl = shadow.querySelector(".content"); threadEl = shadow.querySelector(".thread"); inputEl = shadow.querySelector(".input"); sendEl = shadow.querySelector(".send"); closeEl = shadow.querySelector(".close"); // Events backdrop.addEventListener("click", closePopup); closeEl.addEventListener("click", closePopup); headerEl.addEventListener("mousedown", startDrag); sendEl.addEventListener("click", handleSend); inputEl.addEventListener("input", autoResizeInput); inputEl.addEventListener("keydown", (e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); handleSend(); } if (e.key === "Escape") { e.preventDefault(); closePopup(); } }); // Keep popup clamped as it grows popupResizeObserver = new ResizeObserver(() => { if (!popupOpen) return; relayoutPopup(); }); popupResizeObserver.observe(popup); // Selection listeners document.addEventListener("selectionchange", scheduleSelectionChanged, { passive: true }); document.addEventListener("mouseup", scheduleSelectionChanged, true); document.addEventListener("keyup", scheduleSelectionChanged, true); // Global escape closes popup document.addEventListener( "keydown", (e) => { if (e.key === "Escape" && popupOpen) closePopup(); }, true ); // Clamp popup on resize so it never leaves the viewport window.addEventListener("resize", () => { if (!popupOpen) return; relayoutPopup(); }); } if (document.readyState === "loading") { document.addEventListener("DOMContentLoaded", init, { once: true }); } else { init(); } })();