corat-coret/quickreplywaweb.user.js

// ==UserScript==
// @name         Quick Reply for WhatsApp Web +
// @namespace    https://github.com/laksa19/textexpander4whatsappweb
// @version      0.2
// @description  Quick Reply for WhatsApp Web with Reply Button
// @author       Laksamadi Guko
// @match        https://web.whatsapp.com/*
// @icon         https://laksa19.github.io/textexpander4whatsappweb/favicon.png
// @grant        none
// ==/UserScript==


(function() {
    'use strict';

    // JSON configuration for buttons and messages
    const quickReplyConfig = [
        { "text": "Hello!", "message": "Hello! How can I help you today?" },
        { "text": "Thanks", "message": "Thank you for reaching out!" },
        { "text": "Bye", "message": "Goodbye! Have a great day!" }
    ];

    // Function to create and insert quick reply buttons
    function insertQuickReplyButtons() {
        // Check if the attach menu button exists
        let attachMenuButton = document.querySelector('span[data-icon="attach-menu-plus"]');
        if (!attachMenuButton) {
            console.error('Attach menu button not found');
            return;
        }

        // Check if the buttons already exist to avoid duplication
        if (document.getElementById('quickReplyButtonsContainer')) return;

        // Create a container for the buttons
        let container = document.createElement('div');
        container.id = 'quickReplyButtonsContainer';
        container.style.display = 'flex';
        container.style.flexWrap = 'wrap';
        container.style.gap = '10px';
        container.style.margin = '10px 0';
        container.style.justifyContent = 'center'; // Align buttons to the center

        // Create and append each button based on the JSON configuration
        quickReplyConfig.forEach(config => {
            let button = document.createElement('button');
            button.innerText = config.text;
            button.title = config.message; // Set the title attribute
            button.style.padding = '8px';
            button.style.backgroundColor = '#25D366';
            button.style.color = 'white';
            button.style.border = 'none';
            button.style.borderRadius = '5px';
            button.style.cursor = 'pointer';

            // Add click event listener to the button
            button.addEventListener('click', function() {
                let messageBox = document.querySelector("div[contenteditable='true'][data-tab='10']");
                let predefinedMessage = config.message;

                if (messageBox) {
                    // Set the message in the input field
                    messageBox.focus();
                    document.execCommand('insertText', false, predefinedMessage);

                    // Dispatch input event to notify React of the change
                    let event = new InputEvent('input', {
                        bubbles: true,
                        cancelable: true,
                    });
                    messageBox.dispatchEvent(event);

                    // Simulate sending the message
                    setTimeout(function(){
                        let sendButton = document.querySelector("span[data-icon='send']");
                        if (sendButton) {
                            sendButton.click();
                        }
                    }, 200);
                } else {
                    console.error("Message box not found");
                }
            });

            // Append the button to the container
            container.appendChild(button);
        });

        // Find and prepend the container to the chat footer
        let footer = document.querySelector('footer');
        if (footer) {
            footer.prepend(container);
        } else {
            console.error("Footer not found");
        }
    }

    // Function to handle body clicks
    function handleBodyClick() {
        insertQuickReplyButtons();
    }

    // Add event listener to the body
    document.body.addEventListener('click', handleBodyClick);

})();