MediaWiki:Common.js

/* Any JavaScript here will be loaded for all users on every page load. */
// Helix Project AI Assistant - Enhanced Chatbase Integration
window.addEventListener('load', function() {
    console.log('Loading Helix AI Assistant...');
    
    // Remove any existing Chatbase elements first
    const existingChatbase = document.querySelector('[chatbotid="i65eBj3COxUlFEU_Lsrw0"]');
    if (existingChatbase) {
        existingChatbase.remove();
    }
    
    var script = document.createElement('script');
    script.src = 'https://www.chatbase.co/embed.min.js';
    script.setAttribute('chatbotId', 'i65eBj3COxUlFEU_Lsrw0');
    script.setAttribute('domain', 'www.chatbase.co');
    script.defer = true;
    
    script.onload = function() {
        console.log('Chatbase script loaded, waiting for initialization...');
        
        // Chatbase sometimes needs a manual trigger
        setTimeout(function() {
            console.log('Attempting to initialize Chatbase...');
            
            // Try to manually trigger the chat bubble
            const chatbaseBubble = document.querySelector('[class*="chatbase"], [id*="chatbase"]');
            if (chatbaseBubble) {
                console.log('Chatbase bubble found, adding click handler...');
                chatbaseBubble.style.display = 'block';
                chatbaseBubble.style.visibility = 'visible';
                
                // Ensure it's clickable
                chatbaseBubble.onclick = function(e) {
                    e.preventDefault();
                    console.log('Chat bubble clicked, opening chat...');
                    // Chatbase should handle the rest
                };
            } else {
                console.warn('Chatbase bubble not found in DOM');
                createFunctionalFallback();
            }
        }, 2000);
    };
    
    script.onerror = function() {
        console.error('Chatbase failed to load, creating functional fallback...');
        createFunctionalFallback();
    };
    
    document.body.appendChild(script);
});

// Create a working fallback chat interface
function createFunctionalFallback() {
    console.log('Creating functional chat fallback...');
    
    const chatBubble = document.createElement('div');
    chatBubble.innerHTML = '💬 Ask Helix AI';
    chatBubble.style.cssText = `
        position: fixed;
        bottom: 20px;
        right: 20px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 15px 20px;
        border-radius: 25px;
        cursor: pointer;
        z-index: 10000;
        box-shadow: 0 4px 20px rgba(0,0,0,0.3);
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        font-size: 14px;
        font-weight: 600;
        transition: all 0.3s ease;
    `;
    
    // Add hover effects
    chatBubble.onmouseenter = function() {
        this.style.transform = 'scale(1.1)';
        this.style.boxShadow = '0 6px 25px rgba(0,0,0,0.4)';
    };
    
    chatBubble.onmouseleave = function() {
        this.style.transform = 'scale(1)';
        this.style.boxShadow = '0 4px 20px rgba(0,0,0,0.3)';
    };
    
    // Create a simple chat interface
    chatBubble.onclick = function() {
        // Create modal chat interface
        const chatModal = document.createElement('div');
        chatModal.style.cssText = `
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: white;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
            z-index: 10001;
            min-width: 300px;
            text-align: center;
        `;
        
        chatModal.innerHTML = `
            <h3 style="margin: 0 0 15px 0; color: #333;">Helix AI Assistant</h3>
            <p style="color: #666; margin-bottom: 20px;">Chat functionality coming soon!</p>
            <p style="color: #888; font-size: 12px; margin-bottom: 15px;">For now, please visit the wiki for assistance.</p>
            <button onclick="this.parentElement.remove()" style="
                background: #667eea;
                color: white;
                border: none;
                padding: 10px 20px;
                border-radius: 5px;
                cursor: pointer;
            ">Close</button>
        `;
        
        // Add overlay
        const overlay = document.createElement('div');
        overlay.style.cssText = `
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 10000;
        `;
        overlay.onclick = function() {
            chatModal.remove();
            overlay.remove();
        };
        
        document.body.appendChild(overlay);
        document.body.appendChild(chatModal);
    };
    
    document.body.appendChild(chatBubble);
    console.log('Functional fallback chat bubble created!');
}

// Alternative: Link to a specific wiki help page
function createWikiHelpBubble() {
    const helpBubble = document.createElement('a');
    helpBubble.href = '/wiki/Helix_AI_Assistant';
    helpBubble.innerHTML = '💬 Get AI Help';
    helpBubble.style.cssText = `
        position: fixed;
        bottom: 20px;
        right: 20px;
        background: #007cba;
        color: white;
        padding: 15px 20px;
        border-radius: 25px;
        cursor: pointer;
        z-index: 1000;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        font-family: sans-serif;
        font-size: 14px;
        text-decoration: none;
        display: block;
    `;
    document.body.appendChild(helpBubble);
}