@leg3ndy/otto-bridge 0.6.8 → 0.6.9

package/README.md

@@ -33,10 +33,10 @@ Enquanto o pacote nao estiver publicado, voce pode gerar um tarball local:
 
 ```bash
 npm pack
-npm install -g ./leg3ndy-otto-bridge-0.6.8.tgz
+npm install -g ./leg3ndy-otto-bridge-0.6.9.tgz
 ```
 
-No `0.6.8`, `playwright` deixa de ser opcional no `otto-bridge`. O primeiro `npm install -g @leg3ndy/otto-bridge` pode demorar mais porque instala o browser persistente usado pelo WhatsApp Web e pelos fluxos web em background do bridge.
+No `0.6.9`, `playwright` deixa de ser opcional no `otto-bridge`. O primeiro `npm install -g @leg3ndy/otto-bridge` pode demorar mais porque instala o browser persistente usado pelo WhatsApp Web e pelos fluxos web em background do bridge.
 
 ## Publicacao
 
@@ -106,7 +106,7 @@ otto-bridge run --executor clawd-cursor --clawd-url http://127.0.0.1:3847
 
 ### WhatsApp Web em background
 
-Fluxo recomendado no `0.6.8`:
+Fluxo recomendado no `0.6.9`:
 
 ```bash
 otto-bridge extensions --install whatsappweb
@@ -116,7 +116,7 @@ otto-bridge extensions --status whatsappweb
 
 O setup agora abre o login do WhatsApp Web em um browser persistente do proprio bridge. Depois do QR code, o Otto usa a sessao local em background, sem depender de aba visivel no Safari.
 
-Contrato do `0.6.8`:
+Contrato do `0.6.9`:
 
 - `otto-bridge extensions --setup whatsappweb`: autentica a sessao uma vez
 - `otto-bridge run`: mantem o browser persistente do WhatsApp vivo em background enquanto o runtime estiver ativo, sem depender de uma aba aberta no Safari

package/dist/types.js

@@ -1,5 +1,5 @@
 export const BRIDGE_CONFIG_VERSION = 1;
-export const BRIDGE_VERSION = "0.6.8";
+export const BRIDGE_VERSION = "0.6.9";
 export const BRIDGE_PACKAGE_NAME = "@leg3ndy/otto-bridge";
 export const DEFAULT_API_BASE_URL = "http://localhost:8000";
 export const DEFAULT_POLL_INTERVAL_MS = 3000;

package/dist/whatsapp_background.js

@@ -322,69 +322,78 @@ export class WhatsAppBackgroundBrowser {
     }
     async selectConversation(contact) {
         await this.ensureReady();
-        const prepared = await this.withPage((page) => page.evaluate((query) => {
-            const normalize = (value) => String(value || "").normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase().trim();
-            function isVisible(element) {
-                if (!(element instanceof HTMLElement))
-                    return false;
-                const rect = element.getBoundingClientRect();
-                if (rect.width < 4 || rect.height < 4)
-                    return false;
-                const style = window.getComputedStyle(element);
-                if (style.visibility === "hidden" || style.display === "none" || Number(style.opacity || "1") === 0)
-                    return false;
-                return rect.bottom >= 0 && rect.right >= 0 && rect.top <= window.innerHeight && rect.left <= window.innerWidth;
-            }
-            function focusAndReplaceContent(element, value) {
-                element.focus();
-                if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement) {
-                    element.value = "";
-                    element.dispatchEvent(new InputEvent("input", { bubbles: true, inputType: "deleteContentBackward", data: null }));
-                    element.value = value;
-                    element.dispatchEvent(new InputEvent("input", { bubbles: true, inputType: "insertText", data: value }));
-                    element.dispatchEvent(new Event("change", { bubbles: true }));
-                    return;
+        const prepared = await this.withPage(async (page) => {
+            const focusResult = await page.evaluate(() => {
+                const normalize = (value) => String(value || "").normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase().trim();
+                function isVisible(element) {
+                    if (!(element instanceof HTMLElement))
+                        return false;
+                    const rect = element.getBoundingClientRect();
+                    if (rect.width < 4 || rect.height < 4)
+                        return false;
+                    const style = window.getComputedStyle(element);
+                    if (style.visibility === "hidden" || style.display === "none" || Number(style.opacity || "1") === 0)
+                        return false;
+                    return rect.bottom >= 0 && rect.right >= 0 && rect.top <= window.innerHeight && rect.left <= window.innerWidth;
                 }
-                element.textContent = "";
-                element.innerHTML = "";
-                element.dispatchEvent(new InputEvent("input", { bubbles: true, inputType: "deleteContentBackward", data: null }));
-                const selection = window.getSelection();
-                const range = document.createRange();
-                range.selectNodeContents(element);
-                range.collapse(false);
-                selection?.removeAllRanges();
-                selection?.addRange(range);
-                document.execCommand("insertText", false, value);
-                if (normalize(element.innerText || element.textContent || "") !== normalize(value)) {
-                    element.textContent = value;
+                const candidates = Array.from(document.querySelectorAll('div[contenteditable="true"][role="textbox"], input[role="textbox"], textarea, div[contenteditable="true"][data-tab], [data-testid="chat-list-search"] [contenteditable="true"]'))
+                    .filter((node) => node instanceof HTMLElement)
+                    .filter((node) => isVisible(node))
+                    .map((node) => {
+                    const rect = node.getBoundingClientRect();
+                    const label = normalize(node.getAttribute("aria-label") || node.getAttribute("data-testid") || node.textContent || "");
+                    let score = 0;
+                    if (rect.left < window.innerWidth * 0.45)
+                        score += 30;
+                    if (rect.top < 240)
+                        score += 30;
+                    if (label.includes("search") || label.includes("pesquisar") || label.includes("procure") || label.includes("chat list"))
+                        score += 80;
+                    if (node.closest('[data-testid="chat-list-search"], header'))
+                        score += 25;
+                    return { node, score };
+                })
+                    .sort((left, right) => right.score - left.score);
+                if (!candidates.length) {
+                    return { ok: false, reason: "Nao achei o campo de busca do WhatsApp Web." };
                 }
-                element.dispatchEvent(new InputEvent("input", { bubbles: true, data: value, inputType: "insertText" }));
-                element.dispatchEvent(new Event("change", { bubbles: true }));
-            }
-            const candidates = Array.from(document.querySelectorAll('div[contenteditable="true"][role="textbox"], div[contenteditable="true"][data-tab], [data-testid="chat-list-search"] [contenteditable="true"]'))
-                .filter((node) => node instanceof HTMLElement)
-                .filter((node) => isVisible(node))
-                .map((node) => {
-                const rect = node.getBoundingClientRect();
-                const label = normalize(node.getAttribute("aria-label") || node.getAttribute("data-testid") || node.textContent || "");
-                let score = 0;
-                if (rect.left < window.innerWidth * 0.45)
-                    score += 30;
-                if (rect.top < 240)
-                    score += 30;
-                if (label.includes("search") || label.includes("pesquisar") || label.includes("procure") || label.includes("chat list"))
-                    score += 80;
-                if (node.closest('[data-testid="chat-list-search"], header'))
-                    score += 25;
-                return { node, score };
-            })
-                .sort((left, right) => right.score - left.score);
-            if (!candidates.length) {
-                return { ok: false, reason: "Nao achei o campo de busca do WhatsApp Web." };
+                const searchBox = candidates[0].node;
+                searchBox.focus();
+                searchBox.click();
+                return { ok: true };
+            });
+            if (!focusResult.ok) {
+                return focusResult;
             }
-            focusAndReplaceContent(candidates[0].node, String(query || ""));
-            return { ok: true };
-        }, contact));
+            await page.keyboard?.press("Meta+A").catch(() => undefined);
+            await page.keyboard?.press("Backspace").catch(() => undefined);
+            await page.keyboard?.type(String(contact || ""), { delay: 25 }).catch(() => undefined);
+            const typedValue = await page.evaluate(() => {
+                function isVisible(element) {
+                    if (!(element instanceof HTMLElement))
+                        return false;
+                    const rect = element.getBoundingClientRect();
+                    if (rect.width < 4 || rect.height < 4)
+                        return false;
+                    const style = window.getComputedStyle(element);
+                    if (style.visibility === "hidden" || style.display === "none" || Number(style.opacity || "1") === 0)
+                        return false;
+                    return rect.bottom >= 0 && rect.right >= 0 && rect.top <= window.innerHeight && rect.left <= window.innerWidth;
+                }
+                const candidates = Array.from(document.querySelectorAll('div[contenteditable="true"][role="textbox"], input[role="textbox"], textarea, div[contenteditable="true"][data-tab], [data-testid="chat-list-search"] [contenteditable="true"]'))
+                    .filter((node) => node instanceof HTMLElement)
+                    .filter((node) => isVisible(node));
+                const field = candidates[0];
+                if (!field) {
+                    return "";
+                }
+                if (field instanceof HTMLInputElement || field instanceof HTMLTextAreaElement) {
+                    return field.value || "";
+                }
+                return field.innerText || field.textContent || "";
+            });
+            return { ok: true, typedValue: String(typedValue || "") };
+        });
         if (!prepared.ok) {
             return false;
         }
@@ -446,70 +455,75 @@ export class WhatsAppBackgroundBrowser {
     }
     async sendMessage(text) {
         await this.ensureReady();
-        const result = await this.withPage((page) => page.evaluate((value) => {
-            function isVisible(element) {
-                if (!(element instanceof HTMLElement))
-                    return false;
-                const rect = element.getBoundingClientRect();
-                if (rect.width < 6 || rect.height < 6)
-                    return false;
-                const style = window.getComputedStyle(element);
-                if (style.visibility === "hidden" || style.display === "none" || Number(style.opacity || "1") === 0)
-                    return false;
-                return rect.bottom >= 0 && rect.right >= 0 && rect.top <= window.innerHeight && rect.left <= window.innerWidth;
-            }
-            function clearAndFillComposer(element, nextValue) {
-                element.focus();
-                if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement) {
-                    element.value = "";
-                    element.dispatchEvent(new InputEvent("input", { bubbles: true, inputType: "deleteContentBackward", data: null }));
-                    element.value = nextValue;
-                    element.dispatchEvent(new InputEvent("input", { bubbles: true, inputType: "insertText", data: nextValue }));
-                    return;
+        const result = await this.withPage(async (page) => {
+            const focusedComposer = await page.evaluate(() => {
+                function isVisible(element) {
+                    if (!(element instanceof HTMLElement))
+                        return false;
+                    const rect = element.getBoundingClientRect();
+                    if (rect.width < 6 || rect.height < 6)
+                        return false;
+                    const style = window.getComputedStyle(element);
+                    if (style.visibility === "hidden" || style.display === "none" || Number(style.opacity || "1") === 0)
+                        return false;
+                    return rect.bottom >= 0 && rect.right >= 0 && rect.top <= window.innerHeight && rect.left <= window.innerWidth;
                 }
-                const selection = window.getSelection();
-                const range = document.createRange();
-                range.selectNodeContents(element);
-                selection?.removeAllRanges();
-                selection?.addRange(range);
-                document.execCommand("selectAll", false);
-                document.execCommand("delete", false);
-                document.execCommand("insertText", false, nextValue);
-                if ((element.innerText || "").trim() !== nextValue.trim()) {
-                    element.textContent = nextValue;
+                const candidates = Array.from(document.querySelectorAll('footer div[contenteditable="true"], [data-testid="conversation-compose-box-input"], main footer [contenteditable="true"], footer textarea'))
+                    .filter((node) => node instanceof HTMLElement)
+                    .filter((node) => isVisible(node))
+                    .sort((left, right) => right.getBoundingClientRect().top - left.getBoundingClientRect().top);
+                if (!candidates.length) {
+                    return { ok: false, reason: "Nao achei o campo de mensagem do WhatsApp Web." };
                 }
-                element.dispatchEvent(new InputEvent("input", { bubbles: true, inputType: "insertText", data: nextValue }));
-            }
-            const candidates = Array.from(document.querySelectorAll('footer div[contenteditable="true"], [data-testid="conversation-compose-box-input"], main footer [contenteditable="true"], footer textarea'))
-                .filter((node) => node instanceof HTMLElement)
-                .filter((node) => isVisible(node))
-                .sort((left, right) => right.getBoundingClientRect().top - left.getBoundingClientRect().top);
-            if (!candidates.length) {
-                return { sent: false, reason: "Nao achei o campo de mensagem do WhatsApp Web." };
+                const composer = candidates[0];
+                composer.focus();
+                composer.click();
+                return { ok: true };
+            });
+            if (!focusedComposer.ok) {
+                return { sent: false, reason: String(focusedComposer.reason || "Nao achei o campo de mensagem do WhatsApp Web.") };
             }
-            const composer = candidates[0];
-            clearAndFillComposer(composer, String(value || ""));
-            composer.click();
-            const sendCandidates = Array.from(document.querySelectorAll('[data-testid="compose-btn-send"], button[aria-label*="Send"], button[aria-label*="Enviar"], span[data-icon="send"], div[role="button"][aria-label*="Send"], div[role="button"][aria-label*="Enviar"]'))
-                .map((node) => node instanceof HTMLElement ? (node.closest('button, div[role="button"]') || node) : null)
-                .filter((node) => node instanceof HTMLElement)
-                .filter((node) => isVisible(node));
-            const sendButton = sendCandidates[0];
-            if (sendButton instanceof HTMLElement) {
-                sendButton.scrollIntoView({ block: "center", inline: "center", behavior: "auto" });
-                sendButton.dispatchEvent(new MouseEvent("mousedown", { bubbles: true, cancelable: true, view: window }));
-                sendButton.dispatchEvent(new MouseEvent("mouseup", { bubbles: true, cancelable: true, view: window }));
-                sendButton.dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true, view: window }));
-                if (typeof sendButton.click === "function") {
-                    sendButton.click();
+            await page.keyboard?.press("Meta+A").catch(() => undefined);
+            await page.keyboard?.press("Backspace").catch(() => undefined);
+            await page.keyboard?.type(String(text || ""), { delay: 20 }).catch(() => undefined);
+            return page.evaluate((value) => {
+                function isVisible(element) {
+                    if (!(element instanceof HTMLElement))
+                        return false;
+                    const rect = element.getBoundingClientRect();
+                    if (rect.width < 6 || rect.height < 6)
+                        return false;
+                    const style = window.getComputedStyle(element);
+                    if (style.visibility === "hidden" || style.display === "none" || Number(style.opacity || "1") === 0)
+                        return false;
+                    return rect.bottom >= 0 && rect.right >= 0 && rect.top <= window.innerHeight && rect.left <= window.innerWidth;
                 }
+                const sendCandidates = Array.from(document.querySelectorAll('[data-testid="compose-btn-send"], button[aria-label*="Send"], button[aria-label*="Enviar"], span[data-icon="send"], div[role="button"][aria-label*="Send"], div[role="button"][aria-label*="Enviar"]'))
+                    .map((node) => node instanceof HTMLElement ? (node.closest('button, div[role="button"]') || node) : null)
+                    .filter((node) => node instanceof HTMLElement)
+                    .filter((node) => isVisible(node));
+                const sendButton = sendCandidates[0];
+                if (sendButton instanceof HTMLElement) {
+                    sendButton.scrollIntoView({ block: "center", inline: "center", behavior: "auto" });
+                    sendButton.dispatchEvent(new MouseEvent("mousedown", { bubbles: true, cancelable: true, view: window }));
+                    sendButton.dispatchEvent(new MouseEvent("mouseup", { bubbles: true, cancelable: true, view: window }));
+                    sendButton.dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true, view: window }));
+                    if (typeof sendButton.click === "function") {
+                        sendButton.click();
+                    }
+                    return { sent: true };
+                }
+                const composerCandidates = Array.from(document.querySelectorAll('footer div[contenteditable="true"], [data-testid="conversation-compose-box-input"], main footer [contenteditable="true"], footer textarea'))
+                    .filter((node) => node instanceof HTMLElement)
+                    .filter((node) => isVisible(node))
+                    .sort((left, right) => right.getBoundingClientRect().top - left.getBoundingClientRect().top);
+                const composer = composerCandidates[0];
+                composer?.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", code: "Enter", keyCode: 13, which: 13, bubbles: true }));
+                composer?.dispatchEvent(new KeyboardEvent("keypress", { key: "Enter", code: "Enter", keyCode: 13, which: 13, bubbles: true }));
+                composer?.dispatchEvent(new KeyboardEvent("keyup", { key: "Enter", code: "Enter", keyCode: 13, which: 13, bubbles: true }));
                 return { sent: true };
-            }
-            composer.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", code: "Enter", keyCode: 13, which: 13, bubbles: true }));
-            composer.dispatchEvent(new KeyboardEvent("keypress", { key: "Enter", code: "Enter", keyCode: 13, which: 13, bubbles: true }));
-            composer.dispatchEvent(new KeyboardEvent("keyup", { key: "Enter", code: "Enter", keyCode: 13, which: 13, bubbles: true }));
-            return { sent: true };
-        }, text));
+            }, text);
+        });
         if (!result.sent) {
             throw new Error(String(result.reason || "Nao consegui enviar a mensagem no WhatsApp Web."));
         }
@@ -569,7 +583,7 @@ export class WhatsAppBackgroundBrowser {
         if (!matched) {
             return {
                 ok: false,
-                reason: "Nao consegui confirmar visualmente a mensagem enviada no WhatsApp.",
+                reason: "Nao consegui confirmar na conversa do WhatsApp se a mensagem foi enviada.",
             };
         }
         return { ok: true, reason: "" };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leg3ndy/otto-bridge",
-  "version": "0.6.8",
+  "version": "0.6.9",
   "private": false,
   "type": "module",
   "description": "Local companion for Otto Bridge device pairing and WebSocket runtime.",