|
|
| (5 intermediate revisions by the same user not shown) |
| 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 - Enhanced Chatbase Integration | | // Helix Project - Chatbase Integration Only |
| window.addEventListener('load', function() {
| | console.log('Loading Helix Chatbase integration...'); |
| 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 | | // Only load Chatbase - remove custom chat bubble code |
| function createFunctionalFallback() {
| | var script = document.createElement('script'); |
| console.log('Creating functional chat fallback...');
| | script.src = 'https://www.chatbase.co/embed.min.js'; |
|
| | script.setAttribute('chatbotId', 'i65eBj3COxUlFEU_Lsrw0'); |
| const chatBubble = document.createElement('div');
| | script.setAttribute('domain', 'www.chatbase.co'); |
| chatBubble.innerHTML = '💬 Ask Helix AI';
| | script.defer = true; |
| chatBubble.style.cssText = `
| | document.body.appendChild(script); |
| 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
| | console.log('Chatbase integration loaded successfully'); |
| 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);
| |
| }
| |
