☰

GPE Helper

Adds quality-of-life features for Google Product Experts.

// ==UserScript==
// @name         GPE Helper
// @namespace    https://github.com/gncnpk/GPE-Helper
// @version      0.0.5
// @description  Adds quality-of-life features for Google Product Experts.
// @author       Gavin Canon-Phratsachack (https://github.com/gncnpk)
// @match        https://support.google.com/*/thread*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=productexperts.withgoogle.com
// @grant        GM_xmlhttpRequest
// @license      MIT
// @connect      raw.githubusercontent.com
// @connect      github.com
// ==/UserScript==

(function() {
    'use strict';

    let templateResponses = {};
    let currentProduct = null;

    // GitHub responses URL
    const RESPONSES_URL = 'https://raw.githubusercontent.com/gncnpk/gpe-helper/refs/heads/main/responses.json';

    // Position management
    const POSITION_KEY = 'gpe-helper-position';
    const COLLAPSED_KEY = 'gpe-helper-collapsed';

    function detectProduct() {
        const url = window.location.href;
        const match = url.match(/support\.google\.com\/([^\/]+)\/thread/);
        return match ? match[1] : null;
    }

    function fetchResponses() {
        return new Promise((resolve, reject) => {
            GM_xmlhttpRequest({
                method: 'GET',
                url: RESPONSES_URL,
                onload: function(response) {
                    if (response.status === 200) {
                        try {
                            const data = JSON.parse(response.responseText);
                            resolve(data);
                        } catch (error) {
                            console.error('Failed to parse JSON:', error);
                            reject(error);
                        }
                    } else {
                        reject(new Error(`HTTP error! status: ${response.status}`));
                    }
                },
                onerror: function(error) {
                    console.error('Request failed:', error);
                    reject(error);
                }
            });
        });
    }

    function savePosition(x, y) {
        localStorage.setItem(POSITION_KEY, JSON.stringify({
            x,
            y
        }));
    }

    function loadPosition() {
        const saved = localStorage.getItem(POSITION_KEY);
        if (saved) {
            return JSON.parse(saved);
        }
        return {
            x: 20,
            y: 20
        }; // Default position (top-right)
    }

    function saveCollapsedState(isCollapsed) {
        localStorage.setItem(COLLAPSED_KEY, isCollapsed.toString());
    }

    function loadCollapsedState() {
        const saved = localStorage.getItem(COLLAPSED_KEY);
        return saved === 'true';
    }

    function makeDraggable(panel, header, initialPosition) {
        let isDragging = false;
        let currentX = initialPosition.x;
        let currentY = initialPosition.y;
        let initialX = 0;
        let initialY = 0;
        let xOffset = initialPosition.x;
        let yOffset = initialPosition.y;

        function dragStart(e) {
            // Only allow dragging from header, not from the toggle arrow
            if (e.target.id === 'gpe-toggle-arrow') {
                return;
            }

            if (e.type === "touchstart") {
                initialX = e.touches[0].clientX - xOffset;
                initialY = e.touches[0].clientY - yOffset;
            } else {
                initialX = e.clientX - xOffset;
                initialY = e.clientY - yOffset;
            }

            if (e.target === header || header.contains(e.target)) {
                isDragging = true;
                header.style.cursor = 'grabbing';
            }
        }

        function dragEnd(e) {
            if (isDragging) {
                initialX = currentX;
                initialY = currentY;
                isDragging = false;
                header.style.cursor = 'grab';

                // Save position
                savePosition(currentX, currentY);
            }
        }

        function drag(e) {
            if (isDragging) {
                e.preventDefault();

                if (e.type === "touchmove") {
                    currentX = e.touches[0].clientX - initialX;
                    currentY = e.touches[0].clientY - initialY;
                } else {
                    currentX = e.clientX - initialX;
                    currentY = e.clientY - initialY;
                }

                xOffset = currentX;
                yOffset = currentY;

                // Keep panel within viewport bounds
                const rect = panel.getBoundingClientRect();
                const viewportWidth = window.innerWidth;
                const viewportHeight = window.innerHeight;

                currentX = Math.max(0, Math.min(currentX, viewportWidth - rect.width));
                currentY = Math.max(0, Math.min(currentY, viewportHeight - rect.height));

                panel.style.transform = `translate(${currentX}px, ${currentY}px)`;
            }
        }

        // Add event listeners
        header.addEventListener('mousedown', dragStart);
        document.addEventListener('mousemove', drag);
        document.addEventListener('mouseup', dragEnd);

        // Touch events for mobile
        header.addEventListener('touchstart', dragStart);
        document.addEventListener('touchmove', drag);
        document.addEventListener('touchend', dragEnd);

        // Set initial cursor
        header.style.cursor = 'grab';
    }

    function waitForElm(selector, doc) {
        return new Promise(resolve => {
            if (doc.querySelector(selector)) {
                return resolve(doc.querySelector(selector));
            }

            const observer = new MutationObserver(mutations => {
                if (doc.querySelector(selector)) {
                    observer.disconnect();
                    resolve(doc.querySelector(selector));
                }
            });

            try {
                observer.observe(doc.body, {
                    childList: true,
                    subtree: true
                });
            } catch {
                observer.observe(doc, {
                    childList: true,
                    subtree: true
                });
            }
        });
    }

    function getTimeOfDay() {
        const hour = new Date().getHours();
        if (hour < 12) return 'morning';
        if (hour < 18) return 'afternoon';
        return 'evening';
    }

    function createTemplatePanel() {
        const position = loadPosition();
        const isCollapsed = loadCollapsedState();

        const panel = document.createElement('div');
        panel.id = 'gpe-template-panel';
        panel.style.cssText = `
            position: fixed;
            top: 0;
            left: 0;
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            z-index: 10000;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            max-width: 300px;
            transform: translate(${position.x}px, ${position.y}px);
            user-select: none;
        `;

        const header = document.createElement('div');
        header.style.cssText = `
            padding: 12px 16px;
            background: #f8f9fa;
            border-bottom: 1px solid #ddd;
            border-radius: 8px 8px 0 0;
            font-weight: 600;
            font-size: 14px;
            color: #333;
            cursor: grab;
            display: flex;
            justify-content: space-between;
            align-items: center;
            user-select: none;
        `;

        const content = document.createElement('div');
        content.id = 'gpe-template-content';
        content.style.cssText = `
            padding: 8px;
            display: ${isCollapsed ? 'none' : 'block'};
        `;

        // Show loading state initially
        header.innerHTML = `
            <span>GPE Helper - Loading...</span>
            <span id="gpe-toggle-arrow" style="font-size: 12px; transition: transform 0.2s; cursor: pointer;">▼</span>
        `;

        // Check if we have responses to show
        if (Object.keys(templateResponses).length === 0) {
            content.innerHTML = `
                <div style="padding: 8px; text-align: center; color: #666; font-size: 12px;">
                    ${currentProduct ? `No templates available for "${currentProduct}"` : 'Unable to detect product or load templates'}
                </div>
            `;
        } else {
            // Create buttons for each template
            Object.keys(templateResponses).forEach(templateName => {
                const button = document.createElement('button');
                button.textContent = templateName;
                button.style.cssText = `
                    display: block;
                    width: 100%;
                    padding: 8px 12px;
                    margin: 4px 0;
                    background: #4285f4;
                    color: white;
                    border: none;
                    border-radius: 4px;
                    cursor: pointer;
                    font-size: 12px;
                    transition: background-color 0.2s;
                `;

                button.addEventListener('mouseenter', () => {
                    button.style.backgroundColor = '#3367d6';
                });

                button.addEventListener('mouseleave', () => {
                    button.style.backgroundColor = '#4285f4';
                });

                button.addEventListener('click', () => {
                    appendTemplateToEditor(templateResponses[templateName]);
                });

                content.appendChild(button);
            });
        }

        // Update header text
        const productName = currentProduct ? currentProduct.charAt(0).toUpperCase() + currentProduct.slice(1) : 'Unknown';
        header.innerHTML = `
            <span>GPE Helper - ${productName}</span>
            <span id="gpe-toggle-arrow" style="font-size: 12px; transition: transform 0.2s; cursor: pointer;">▼</span>
        `;

        // Add toggle functionality
        let collapsed = isCollapsed;
        const toggleArrow = header.querySelector('#gpe-toggle-arrow');

        // Set initial arrow direction
        toggleArrow.style.transform = collapsed ? 'rotate(-90deg)' : 'rotate(0deg)';

        toggleArrow.addEventListener('click', (e) => {
            e.stopPropagation(); // Prevent drag from starting
            collapsed = !collapsed;
            content.style.display = collapsed ? 'none' : 'block';
            toggleArrow.style.transform = collapsed ? 'rotate(-90deg)' : 'rotate(0deg)';
            saveCollapsedState(collapsed);
        });

        panel.appendChild(header);
        panel.appendChild(content);
        document.body.appendChild(panel);

        // Make the panel draggable - pass the initial position
        makeDraggable(panel, header, position);
    }

    function textToHtml(text) {
        // Convert plain text with \n to HTML with <br> tags
        // Handle escaped newlines from JSON
        const unescapedText = text.replace(/\\n/g, '\n');
        return unescapedText.split('\n').map(line => {
            if (line.trim() === '') {
                return '<br>';
            }
            return line;
        }).join('<br>');
    }

    function insertHtmlAtCursor(element, htmlText) {
        const selection = window.getSelection();

        // If no selection or selection is not in our editor, append at end
        if (!selection.rangeCount || !element.contains(selection.anchorNode)) {
            element.focus();
            const range = document.createRange();
            range.selectNodeContents(element);
            range.collapse(false);
            selection.removeAllRanges();
            selection.addRange(range);
        }

        const range = selection.getRangeAt(0);

        // Delete any selected content first
        range.deleteContents();

        // Create a temporary div to parse HTML
        const tempDiv = document.createElement('div');
        tempDiv.innerHTML = htmlText;

        // Collect all nodes first to preserve order
        const nodes = Array.from(tempDiv.childNodes);

        // Insert nodes in correct order
        nodes.forEach(node => {
            range.insertNode(node);
            range.setStartAfter(node);
        });

        // Move cursor to end of inserted content
        range.collapse(false);
        selection.removeAllRanges();
        selection.addRange(range);
    }

    function needsSpacingBefore(editor) {
        const selection = window.getSelection();
        if (!selection.rangeCount) return false;

        const range = selection.getRangeAt(0);
        const textBefore = range.startContainer.textContent?.substring(0, range.startOffset) || '';

        // Check if we need spacing (content exists and doesn't end with whitespace)
        return textBefore.trim() && !textBefore.match(/\s{2,}$/);
    }

    function appendTemplateToEditor(templateText) {
        const editor = document.getElementsByClassName(
            'scTailwindSharedRichtexteditoreditor'
        )[0];

        if (editor) {
            // Focus the editor first
            editor.focus();

            // Convert template text to HTML
            let htmlToInsert = textToHtml(templateText);

            // Add spacing before template if needed
            if (needsSpacingBefore(editor)) {
                htmlToInsert = '<br><br>' + htmlToInsert;
            }

            insertHtmlAtCursor(editor, htmlToInsert);

            // Trigger input event to ensure the content is recognized
            const event = new Event('input', {
                bubbles: true
            });
            editor.dispatchEvent(event);
        }
    }

    async function init() {
        // Detect the current product
        currentProduct = detectProduct();
        console.log('Detected product:', currentProduct);

        // Fetch responses from GitHub
        try {
            const allResponses = await fetchResponses();

            if (allResponses && currentProduct && allResponses[currentProduct]) {
                templateResponses = allResponses[currentProduct];
                console.log(`Loaded responses for ${currentProduct}`, templateResponses);
            } else {
                console.warn('No responses found for product:', currentProduct);
            }
        } catch (error) {
            console.error('Failed to load responses:', error);
        }
        if (document.location.pathname.endsWith("threads")) {
            await waitForElm('.thread-list-counts__count--reply', document);
            document.querySelectorAll(".thread-list-counts__count--reply").forEach((a) => {
                if (a.innerText === "0 Replies") {
                    a.parentElement.parentElement.parentElement.parentElement.style = "background-color: rgba(255,0,0,0.1);"
                }
            })
        }
        await waitForElm('.scTailwindSharedRichtexteditoreditor', document);
        prefillResponse();
        createTemplatePanel();
    }

    function prefillResponse() {
        const timeOfDay = getTimeOfDay();
        const userElem = document.querySelector(
            '.scTailwindThreadPost_headerUserinfoname'
        );
        const username = userElem ? userElem.innerText.trim() : '';

        const editor = document.getElementsByClassName(
            'scTailwindSharedRichtexteditoreditor'
        )[0];

        editor.innerText = `Good ${timeOfDay} ${username},\n\nWaze staff does not monitor this forum.\n\n[Response here]\n\nIf there's anything else I can assist you with, please let me know!\n\nI'm not affiliated with either Waze or Google; I'm a volunteer product expert providing answers about Google Maps and Waze.`;
    }

    init();
})();