MediaWiki:Common.js: Difference between revisions

From Helix Project Wiki
No edit summary
No edit summary
Line 1: Line 1:
/* Any JavaScript here will be loaded for all users on every page load. */
/* Any JavaScript here will be loaded for all users on every page load. */
// Helix Project AI Assistant - Chatbase with Fallback Bubble
// Helix Project - Wiki Chat Bubble
window.addEventListener('load', function() {
window.addEventListener('load', function() {
     console.log('Loading Helix AI Assistant for Wiki...');
     console.log('Loading Helix Wiki Chat Bubble...');
   
    // 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());
      
      
    // Simple, reliable chat bubble for wiki
     const chatBubble = document.createElement('div');
     const chatBubble = document.createElement('div');
     chatBubble.id = 'helix-wiki-chat';
     chatBubble.innerHTML = '💬 Wiki Help';
     chatBubble.innerHTML = '💬 AI Assistant';
     chatBubble.id = 'helix-wiki-chat-bubble';
     chatBubble.style.cssText = `
     chatBubble.style.cssText = `
         position: fixed;
         position: fixed;
         bottom: 20px;
         bottom: 20px;
         right: 20px;
         right: 20px;
         background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
         background: #007cba;
         color: white;
         color: white;
         padding: 15px 20px;
         padding: 12px 18px;
         border-radius: 25px;
         border-radius: 20px;
         cursor: pointer;
         cursor: pointer;
         z-index: 10000;
         z-index: 1000;
         box-shadow: 0 4px 20px rgba(0,0,0,0.3);
         box-shadow: 0 2px 10px rgba(0,0,0,0.2);
         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
         font-family: sans-serif;
         font-size: 14px;
         font-size: 14px;
         font-weight: 600;
         font-weight: bold;
        transition: all 0.3s ease;
     `;
     `;
      
      
     // Add hover effects
     // Simple click action - go to wiki help
     chatBubble.onmouseenter = function() {
     chatBubble.onclick = function() {
         this.style.transform = 'scale(1.1)';
         window.location.href = '/wiki/Help:Contents';
        this.style.boxShadow = '0 6px 25px rgba(0,0,0,0.4)';
     };
     };
      
      
     chatBubble.onmouseleave = function() {
    // Add hover effect
         this.style.transform = 'scale(1)';
     chatBubble.onmouseover = function() {
         this.style.boxShadow = '0 4px 20px rgba(0,0,0,0.3)';
         this.style.background = '#005a87';
         this.style.transform = 'scale(1.05)';
     };
     };
      
      
    // Make it do something useful
     chatBubble.onmouseout = function() {
     chatBubble.onclick = function() {
         this.style.background = '#007cba';
         // Show a helpful modal for wiki users
         this.style.transform = 'scale(1)';
         showWikiHelpModal();
     };
     };
      
      
     document.body.appendChild(chatBubble);
     document.body.appendChild(chatBubble);
     console.log('Wiki chat bubble added');
     console.log('Helix Wiki Chat Bubble added successfully');
}
 
// 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 = `
     // Optional: Keep your existing Chatbase integration
        <h3 style="margin: 0 0 15px 0; color: #333; border-bottom: 2px solid #667eea; padding-bottom: 10px;">Helix AI Assistant</h3>
    var script = document.createElement('script');
        <p style="color: #666; margin-bottom: 15px;">I can help you with:</p>
    script.src = 'https://www.chatbase.co/embed.min.js';
        <ul style="color: #666; margin-bottom: 20px; padding-left: 20px;">
     script.setAttribute('chatbotId', 'i65eBj3COxUlFEU_Lsrw0');
            <li>Wiki editing and formatting</li>
     script.setAttribute('domain', 'www.chatbase.co');
            <li>Finding information in the Helix Project</li>
     script.defer = true;
            <li>MediaWiki syntax help</li>
     document.body.appendChild(script);
            <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);
}

Revision as of 11:45, 7 October 2025

/* Any JavaScript here will be loaded for all users on every page load. */
// Helix Project - Wiki Chat Bubble
window.addEventListener('load', function() {
    console.log('Loading Helix Wiki Chat Bubble...');
    
    // Simple, reliable chat bubble for wiki
    const chatBubble = document.createElement('div');
    chatBubble.innerHTML = '💬 Wiki Help';
    chatBubble.id = 'helix-wiki-chat-bubble';
    chatBubble.style.cssText = `
        position: fixed;
        bottom: 20px;
        right: 20px;
        background: #007cba;
        color: white;
        padding: 12px 18px;
        border-radius: 20px;
        cursor: pointer;
        z-index: 1000;
        box-shadow: 0 2px 10px rgba(0,0,0,0.2);
        font-family: sans-serif;
        font-size: 14px;
        font-weight: bold;
    `;
    
    // Simple click action - go to wiki help
    chatBubble.onclick = function() {
        window.location.href = '/wiki/Help:Contents';
    };
    
    // Add hover effect
    chatBubble.onmouseover = function() {
        this.style.background = '#005a87';
        this.style.transform = 'scale(1.05)';
    };
    
    chatBubble.onmouseout = function() {
        this.style.background = '#007cba';
        this.style.transform = 'scale(1)';
    };
    
    document.body.appendChild(chatBubble);
    console.log('Helix Wiki Chat Bubble added successfully');
    
    // Optional: Keep 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;
    document.body.appendChild(script);
});