Update comments
This commit is contained in:
parent
f9c306a6e1
commit
de5b5c373a
@ -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);
|
||||||
|
Loading…
Reference in New Issue
Block a user