Update comments

This commit is contained in:
elia 2024-10-24 15:44:52 +02:00
parent f9c306a6e1
commit de5b5c373a

View File

@ -8,7 +8,7 @@ const DEFAULT_SETTINGS = {
const MAX_CONTEXT_LENGTH = 6000; const MAX_CONTEXT_LENGTH = 6000;
// State // States (for later in the code)
let overlay = null; let overlay = null;
let isVisible = false; let isVisible = false;
let lastKnownSelection = null; let lastKnownSelection = null;
@ -16,7 +16,7 @@ let lastKnownRange = null;
let scrollTimeout = null; let scrollTimeout = null;
let resizeRAF = null; let resizeRAF = null;
// Utility Functions // helper Functions
const getPageContext = () => { const getPageContext = () => {
const bodyText = document.body.innerText; const bodyText = document.body.innerText;
return bodyText.length > MAX_CONTEXT_LENGTH return bodyText.length > MAX_CONTEXT_LENGTH
@ -34,7 +34,7 @@ const loadSettings = async () => {
} }
}; };
// API Functions // API funcs
const queryLLM = async (text) => { const queryLLM = async (text) => {
const settings = await loadSettings(); const settings = await loadSettings();
const pageContext = getPageContext(); const pageContext = getPageContext();
@ -66,7 +66,7 @@ const queryLLM = async (text) => {
return data.choices[0].message.content; return data.choices[0].message.content;
}; };
// UI Functions // Overlay/input fields
const createOverlay = (text) => { const createOverlay = (text) => {
if (overlay) overlay.remove(); if (overlay) overlay.remove();
@ -129,13 +129,12 @@ const positionOverlay = () => {
top = rect.bottom + scrollY + 5; top = rect.bottom + scrollY + 5;
} }
// Keep overlay within horizontal bounds
left = Math.max( left = Math.max(
scrollX + 5, scrollX + 5,
Math.min(left, scrollX + viewportWidth - overlayWidth - 10), Math.min(left, scrollX + viewportWidth - overlayWidth - 10),
); );
// Apply positions // apply
overlay.style.top = `${top}px`; overlay.style.top = `${top}px`;
overlay.style.left = `${left}px`; overlay.style.left = `${left}px`;
} catch (error) { } catch (error) {
@ -143,7 +142,7 @@ const positionOverlay = () => {
} }
}; };
// Event Handlers // Handlers
const handleScroll = () => { const handleScroll = () => {
if (!isVisible) return; if (!isVisible) return;
@ -164,9 +163,9 @@ const handleResize = () => {
resizeRAF = requestAnimationFrame(positionOverlay); resizeRAF = requestAnimationFrame(positionOverlay);
}; };
// Initialize Event Listeners
window.addEventListener("resize", handleResize, { passive: true }); window.addEventListener("resize", handleResize, { passive: true });
// Shitty fix for microsoft forms (they use containers)
const attachScrollListeners = () => { const attachScrollListeners = () => {
// Listen to window scroll // Listen to window scroll
window.addEventListener("scroll", handleScroll, { passive: true }); window.addEventListener("scroll", handleScroll, { passive: true });
@ -195,7 +194,7 @@ const attachScrollListeners = () => {
element.addEventListener("scroll", handleScroll, { passive: true }); element.addEventListener("scroll", handleScroll, { passive: true });
}); });
// Handle dynamic content changes // Handle dynamic content changes (needed for forms after page load)
const observer = new MutationObserver((mutations) => { const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => { mutations.forEach((mutation) => {
if (mutation.addedNodes.length) { if (mutation.addedNodes.length) {
@ -228,7 +227,6 @@ const attachScrollListeners = () => {
}); });
}; };
// Initialize scroll listeners
attachScrollListeners(); attachScrollListeners();
// Message Handler // Message Handler
@ -274,25 +272,27 @@ function findNearestInput(selectionNode) {
); );
if (!inputs.length) return null; if (!inputs.length) return null;
// yes i know this is overkill
const selection = window.getSelection(); const selection = window.getSelection();
const range = selection.getRangeAt(0); const range = selection.getRangeAt(0);
const rect = range.getBoundingClientRect(); const rect = range.getBoundingClientRect();
// calc center point of users selection
const selectionX = rect.left + rect.width / 2; const selectionX = rect.left + rect.width / 2;
const selectionY = rect.top + rect.height / 2; const selectionY = rect.top + rect.height / 2;
let nearestInput = null; let nearestInput = null;
let shortestDistance = Infinity; let shortestDistance = Infinity;
// loop through all available inputs and figure out the shortest one
inputs.forEach((input) => { inputs.forEach((input) => {
const inputRect = input.getBoundingClientRect(); const inputRect = input.getBoundingClientRect();
const inputX = inputRect.left + inputRect.width / 2; const inputX = inputRect.left + inputRect.width / 2;
const inputY = inputRect.top + inputRect.height / 2; const inputY = inputRect.top + inputRect.height / 2;
const distance = Math.sqrt( const distance = Math.sqrt(
// do pythagora
Math.pow(selectionX - inputX, 2) + Math.pow(selectionY - inputY, 2), Math.pow(selectionX - inputX, 2) + Math.pow(selectionY - inputY, 2),
); );
// this could be cleaner but it works as-is
if (distance < shortestDistance) { if (distance < shortestDistance) {
shortestDistance = distance; shortestDistance = distance;
nearestInput = input; nearestInput = input;
@ -301,7 +301,7 @@ function findNearestInput(selectionNode) {
return nearestInput; return nearestInput;
} }
// moved to seperate function for cleaner code (it is still a mess)
const modifyNearestInput = async () => { const modifyNearestInput = async () => {
const selection = window.getSelection(); const selection = window.getSelection();
const selectedText = selection.toString().trim(); const selectedText = selection.toString().trim();
@ -318,6 +318,7 @@ const modifyNearestInput = async () => {
nearestInput.placeholder = "Processing..."; nearestInput.placeholder = "Processing...";
const llmResponse = await queryLLM(selectedText); const llmResponse = await queryLLM(selectedText);
nearestInput.value = llmResponse; nearestInput.value = llmResponse;
// replace the placeholder again so we do not interefere with the users ability to solve
nearestInput.placeholder = oldPlaceholder; nearestInput.placeholder = oldPlaceholder;
} catch (error) { } catch (error) {
console.error("Error:", error); console.error("Error:", error);