MediaWiki:Common.js

/* Any JavaScript here will be loaded for all users on every page load. */
// Helix Project AI Assistant - Chatbase with Fallback Bubble
window.addEventListener('load', function() {
    console.log('Loading Helix AI Assistant for Wiki...');
    
    // Add the chat bubble to wiki pages
    addChatBubbleToWiki();
    
    // Your existing Chatbase integration
    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 loaded on wiki');
    };
    
    script.onerror = function() {
        console.log('Chatbase failed, using wiki chat bubble');
    };
    
    document.body.appendChild(script);
});

// Add chat bubble specifically for wiki pages
function addChatBubbleToWiki() {
    // Remove any existing chat bubbles first
    const existingBubbles = document.querySelectorAll('[id="helix-wiki-chat"]');
    existingBubbles.forEach(bubble => bubble.remove());
    
    const chatBubble = document.createElement('div');
    chatBubble.id = 'helix-wiki-chat';
    chatBubble.innerHTML = '💬 AI Assistant';
    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)';
    };
    
    // Make it do something useful
    chatBubble.onclick = function() {
        // Show a helpful modal for wiki users
        showWikiHelpModal();
    };
    
    document.body.appendChild(chatBubble);
    console.log('Wiki chat bubble added');
}

// Helpful modal for wiki users
function showWikiHelpModal() {
    const modal = document.createElement('div');
    modal.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: 400px;
        max-width: 90vw;
        text-align: left;
    `;
    
    modal.innerHTML = `
        <h3 style="margin: 0 0 15px 0; color: #333; border-bottom: 2px solid #667eea; padding-bottom: 10px;">Helix AI Assistant</h3>
        <p style="color: #666; margin-bottom: 15px;">I can help you with:</p>
        <ul style="color: #666; margin-bottom: 20px; padding-left: 20px;">
            <li>Wiki editing and formatting</li>
            <li>Finding information in the Helix Project</li>
            <li>MediaWiki syntax help</li>
            <li>Project documentation</li>
        </ul>
        <p style="color: #888; font-size: 12px; margin-bottom: 20px; background: #f5f5f5; padding: 10px; border-radius: 5px;">
            <strong>Note:</strong> Full chat integration coming soon. For now, you can ask questions in the wiki discussion pages.
        </p>
        <div style="text-align: center;">
            <button onclick="closeModal()" style="
                background: #667eea;
                color: white;
                border: none;
                padding: 10px 20px;
                border-radius: 5px;
                cursor: pointer;
                margin: 0 5px;
            ">Got it!</button>
            <button onclick="window.location.href='/wiki/Help:Contents'" style="
                background: transparent;
                color: #667eea;
                border: 1px solid #667eea;
                padding: 10px 20px;
                border-radius: 5px;
                cursor: pointer;
                margin: 0 5px;
            ">Wiki Help</button>
        </div>
    `;
    
    // 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.id = 'helix-modal-overlay';
    
    // Close function
    window.closeModal = function() {
        modal.remove();
        overlay.remove();
    };
    
    overlay.onclick = window.closeModal;
    
    document.body.appendChild(overlay);
    document.body.appendChild(modal);
}