☰

Floating Poe AI Bubble

Small draggable AI iframe with quick Poe bot switching, drag-and-drop, and hotkeys

// ==UserScript==
// @name         Floating Poe AI Bubble
// @namespace    https://openuserjs.org/users/OlaCodez
// @version      3.1
// @description  Small draggable AI iframe with quick Poe bot switching, drag-and-drop, and hotkeys
// @author       OlaCodez
// @license      MIT
// @match        *://*/*
// @grant        none
// ==/UserScript==


(function () {
    'use strict';

    // 🚫 Prevent running inside iframes
    if (window.top !== window.self) return;

    const POE_BOTS = {
        "ChatGPT": "https://poe.com/ChatGPT",
        "GPT-4": "https://poe.com/gpt-4",
        "Claude-3": "https://poe.com/claude-3-opus",
        "Gemini": "https://poe.com/google-gemini-pro"
    };

    const EXCLUDED_DOMAINS = ["poe.com"];
    if (EXCLUDED_DOMAINS.some(domain => location.hostname.includes(domain))) return;

    let currentBot = localStorage.getItem("poe_bot") || "ChatGPT";
    let minimized = true;
    const BUBBLE_SIZE = 400;
    const BTN_OFFSET = 20;

    // === IFRAME ===
    const iframeContainer = document.createElement('div');
    Object.assign(iframeContainer.style, {
        position: 'fixed',
        bottom: `${BTN_OFFSET + 50}px`,
        right: `${BTN_OFFSET}px`,
        width: `${BUBBLE_SIZE}px`,
        height: `${BUBBLE_SIZE}px`,
        borderRadius: '20px',
        overflow: 'hidden',
        border: '1px solid #333',
        boxShadow: '0 5px 15px rgba(0,0,0,0.4)',
        zIndex: '99999',
        display: 'none',
        background: '#000'
    });

    const iframe = document.createElement('iframe');
    iframe.src = POE_BOTS[currentBot];
    Object.assign(iframe.style, {
        width: '100%',
        height: '100%',
        border: 'none'
    });

    iframeContainer.appendChild(iframe);
    document.body.appendChild(iframeContainer);

    // === TOGGLE BUTTON ===
    const toggleBtn = document.createElement('div');
    toggleBtn.textContent = '💬';
    Object.assign(toggleBtn.style, {
        position: 'fixed',
        bottom: `${BTN_OFFSET}px`,
        right: `${BTN_OFFSET}px`,
        width: '45px',
        height: '45px',
        background: '#222',
        color: '#fff',
        borderRadius: '50%',
        textAlign: 'center',
        lineHeight: '45px',
        fontSize: '22px',
        cursor: 'pointer',
        zIndex: '100000',
        boxShadow: '0 2px 6px rgba(0,0,0,0.3)',
        userSelect: 'none'
    });
    document.body.appendChild(toggleBtn);

    toggleBtn.onclick = () => {
        minimized = !minimized;
        iframeContainer.style.display = minimized ? 'none' : 'block';
    };

    // === AI SWITCH BUTTONS (ROW) ===
    const switcherBar = document.createElement('div');
    Object.assign(switcherBar.style, {
        position: 'fixed',
        bottom: `${BTN_OFFSET + 5}px`,
        right: `${BTN_OFFSET + 60}px`,
        display: 'flex',
        gap: '6px',
        zIndex: '100000',
        background: 'transparent',
        padding: '4px'
    });

    for (const [name, url] of Object.entries(POE_BOTS)) {
        const btn = document.createElement('div');
        btn.textContent = name;
        Object.assign(btn.style, {
            padding: '6px 10px',
            borderRadius: '20px',
            background: name === currentBot ? '#444' : '#222',
            color: '#fff',
            fontSize: '13px',
            cursor: 'pointer',
            userSelect: 'none',
            border: '1px solid #555'
        });

        btn.onclick = () => {
            currentBot = name;
            iframe.src = url;
            localStorage.setItem("poe_bot", name);
            Array.from(switcherBar.children).forEach(child => {
                child.style.background = (child.textContent === name) ? '#444' : '#222';
            });
        };

        switcherBar.appendChild(btn);
    }

    document.body.appendChild(switcherBar);

    // === DRAG TOGGLE & BAR ===
    [toggleBtn, switcherBar].forEach(el => {
        let offsetX = 0, offsetY = 0, dragging = false;

        el.addEventListener('mousedown', (e) => {
            dragging = true;
            offsetX = e.clientX - el.getBoundingClientRect().left;
            offsetY = e.clientY - el.getBoundingClientRect().top;
            e.preventDefault();
        });

        document.addEventListener('mousemove', (e) => {
            if (!dragging) return;
            const x = e.clientX - offsetX;
            const y = e.clientY - offsetY;
            Object.assign(el.style, {
                left: x + 'px',
                top: y + 'px',
                right: 'auto',
                bottom: 'auto',
                position: 'fixed'
            });
        });

        document.addEventListener('mouseup', () => {
            dragging = false;
        });
    });

    // === HOTKEYS ===
    document.addEventListener('keydown', (e) => {
        // Ctrl + Shift + H → Hide all buttons
        if (e.ctrlKey && e.shiftKey && e.key.toLowerCase() === 'h') {
            toggleBtn.style.display = 'none';
            switcherBar.style.display = 'none';
        }

        // Ctrl + K then Ctrl + Z → Show all buttons
        if (e.ctrlKey && e.key.toLowerCase() === 'k') {
            const onZ = (ev) => {
                if (ev.ctrlKey && ev.key.toLowerCase() === 'z') {
                    toggleBtn.style.display = 'block';
                    switcherBar.style.display = 'flex';
                    document.removeEventListener('keydown', onZ);
                }
            };
            document.addEventListener('keydown', onZ);
        }
    });
})();