${escapeHtml(original)}
${escapeHtml(corrected)}
`;
document.body.appendChild(modal);
// Auto-close after 5 seconds with corrected text
const autoClose = setTimeout(() => {
modal.remove();
resolve(true);
}, 5000);
document.getElementById("gb-accept").addEventListener("click", () => {
clearTimeout(autoClose);
modal.remove();
resolve(true);
});
document.getElementById("gb-reject").addEventListener("click", () => {
clearTimeout(autoClose);
modal.remove();
resolve(false);
});
});
}
// Setup observer for incoming messages (for auto-reply)
function setupMessageObserver() {
const observer = new MutationObserver((mutations) => {
if (!settings.autoMode) return;
for (const mutation of mutations) {
for (const node of mutation.addedNodes) {
if (node.nodeType === Node.ELEMENT_NODE) {
const incomingMsg = node.querySelector
? node.querySelector(SELECTORS.messageIn)
: null;
if (
incomingMsg ||
(node.classList && node.classList.contains("message-in"))
) {
handleIncomingMessage(incomingMsg || node);
}
}
}
}
});
// Start observing when chat container is available
const waitForChat = setInterval(() => {
const chatContainer = document.querySelector(SELECTORS.chatContainer);
if (chatContainer) {
clearInterval(waitForChat);
observer.observe(chatContainer, {
childList: true,
subtree: true,
});
console.log("General Bots: Message observer started");
}
}, 1000);
}
// Handle incoming message for auto-reply
async function handleIncomingMessage(messageElement) {
if (!settings.autoMode || !settings.authenticated) return;
const currentContact = getCurrentContactName();
if (!currentContact) return;
// Check if auto-mode is enabled for this contact
if (!state.autoModeContacts.has(currentContact)) return;
const messageText = messageElement.querySelector(SELECTORS.messageText);
if (!messageText) return;
const text = messageText.textContent.trim();
if (!text) return;
console.log(
"General Bots: Processing incoming message for auto-reply",
text,
);
// Get conversation context
const context = getConversationContext();
// Request auto-reply from LLM
chrome.runtime.sendMessage(
{
action: "generateAutoReply",
context: {
contact: currentContact,
lastMessage: text,
},
lastMessages: context,
},
async (response) => {
if (response && response.reply && response.autoSend) {
await sendAutoReply(response.reply);
}
},
);
}
// Get conversation context (last few messages)
function getConversationContext() {
const messages = [];
const messageElements = document.querySelectorAll(
`${SELECTORS.messageIn}, ${SELECTORS.messageOut}`,
);
const recentMessages = Array.from(messageElements).slice(-10);
for (const msg of recentMessages) {
const textEl = msg.querySelector(SELECTORS.messageText);
if (textEl) {
messages.push({
type: msg.classList.contains("message-out") ? "sent" : "received",
text: textEl.textContent.trim(),
});
}
}
return messages;
}
// Send auto-reply
async function sendAutoReply(text) {
const inputField = document.querySelector(SELECTORS.messageInput);
if (!inputField) return;
setInputText(inputField, text);
// Small delay before sending
await new Promise((r) => setTimeout(r, 500));
simulateEnterPress(inputField);
}
// Setup contact observer for auto-mode toggle per contact
function setupContactObserver() {
const observer = new MutationObserver(() => {
const header = document.querySelector(SELECTORS.chatHeader);
if (header && !header.querySelector(".gb-contact-controls")) {
injectContactControls(header);
}
});
observer.observe(document.body, {
childList: true,
subtree: true,
});
}
// Inject control buttons for current contact
function injectContactControls(header) {
const contactName = getCurrentContactName();
if (!contactName) return;
const controls = document.createElement("div");
controls.className = "gb-contact-controls";
const isAutoEnabled = state.autoModeContacts.has(contactName);
controls.innerHTML = `
`;
document.body.appendChild(panel);
// Setup panel event listeners
setupPanelListeners();
}
// Setup control panel event listeners
function setupPanelListeners() {
// Panel toggle
document
.getElementById("gb-panel-toggle")
?.addEventListener("click", function () {
const body = document.getElementById("gb-panel-body");
if (body.style.display === "none") {
body.style.display = "block";
this.textContent = "−";
} else {
body.style.display = "none";
this.textContent = "+";
}
});
// Grammar toggle
document
.getElementById("gb-grammar-toggle")
?.addEventListener("change", function () {
settings.grammarCorrection = this.checked;
saveSettings();
});
// Contacts toggle
document
.getElementById("gb-contacts-toggle")
?.addEventListener("change", function () {
settings.hideContacts = this.checked;
applyContactVisibility();
saveSettings();
});
// Auto mode toggle
document
.getElementById("gb-auto-toggle")
?.addEventListener("change", function () {
settings.autoMode = this.checked;
applyAutoModeIndicator();
saveSettings();
});
// Auth button
document
.getElementById("gb-auth-btn")
?.addEventListener("click", async function () {
const numberInput = document.getElementById("gb-whatsapp-number");
const number = numberInput?.value.trim();
if (!number) {
alert("Please enter your WhatsApp number");
return;
}
this.disabled = true;
this.textContent = "Authenticating...";
chrome.runtime.sendMessage(
{
action: "authenticate",
whatsappNumber: number,
},
(response) => {
if (response.success) {
this.textContent = "Check WhatsApp";
} else {
this.textContent = "Authenticate";
this.disabled = false;
alert(
"Authentication failed: " + (response.error || "Unknown error"),
);
}
},
);
});
}
// Save settings to storage
function saveSettings() {
chrome.storage.sync.set(settings);
chrome.runtime.sendMessage({
action: "saveSettings",
settings: settings,
});
}
// Get current contact name
function getCurrentContactName() {
const nameEl = document.querySelector(SELECTORS.contactName);
return nameEl ? nameEl.textContent.trim() : null;
}
// Set text in input field
function setInputText(inputField, text) {
inputField.textContent = text;
inputField.dispatchEvent(new InputEvent("input", { bubbles: true }));
}
// Simulate Enter key press
function simulateEnterPress(element) {
const enterEvent = new KeyboardEvent("keydown", {
key: "Enter",
code: "Enter",
keyCode: 13,
which: 13,
bubbles: true,
cancelable: true,
});
element.dispatchEvent(enterEvent);
}
// Show processing indicator
function showProcessingIndicator(inputField) {
let indicator = document.getElementById("gb-processing");
if (!indicator) {
indicator = document.createElement("div");
indicator.id = "gb-processing";
indicator.className = "gb-processing-indicator";
indicator.innerHTML = `