Update index.html

index.html

@@ -4038,6 +4038,41 @@
                 display: none;
             }
         }
+        /* FIXED: Added visual states for disabled buttons */
+        .send-button:disabled {
+            opacity: 0.3 !important;
+            cursor: not-allowed !important;
+            transform: none !important;
+        }
+
+        .btn-primary:disabled {
+            opacity: 0.6 !important;
+            cursor: wait !important;
+        }
+
+        /* FIXED: Ensure auth overlay is always on top */
+        #authOverlay {
+            z-index: 9999 !important;
+        }
+
+        /* FIXED: Send/Stop button positioning */
+        .input-actions {
+            position: relative;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .stop-button {
+            display: none;
+            background: var(--bg-secondary);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+        }
+
+        .stop-button.active {
+            display: flex;
+        }
     </style>
 </head>
 
@@ -4068,7 +4103,8 @@
             <p class="hero-subtitle">Chat with Nexa AI to get answers, generate stunning images, and boost your productivity. Your personal AI assistant for work and creativity.</p>
             <div class="cta-container">
                 <button onclick="enterApp()" class="btn-primary landing-cta">Start Chatting — Free Forever</button>
-                <button class="btn-secondary" data-section="featuresSection">View Demo</button>
+                <!-- FIXED: Replaced data-section with direct onclick for reliability -->
+                <button class="btn-secondary" onclick="scrollToSection('featuresSection')">View Demo</button>
             </div>
             <div class="trust-badges">
                 <div class="trust-badge"><i data-lucide="shield-check"></i> No credit card required</div>
@@ -4298,7 +4334,8 @@
                         <span>Deep Research</span>
                     </div>
                     <label class="switch">
-                        <input type="checkbox" id="deepResearchToggle">
+                        <!-- FIXED: Added explicit parameter to toggleDeepResearch -->
+                        <input type="checkbox" id="deepResearchToggle" onchange="toggleDeepResearch(this.checked)">
                         <span class="slider"></span>
                     </label>
                 </div>
@@ -4530,12 +4567,13 @@
                             <button class="action-btn mic-btn" id="micBtn" onclick="toggleSpeechRecognition()" title="Voice Input">
                                 <i data-lucide="mic"></i>
                             </button>
-                            <button class="send-button" id="sendBtn" onclick="sendMessage()">
+                            <!-- FIXED: Removed inline onclick to prevent double-firing and used consistent SVG icons -->
+                            <button class="send-button" id="sendBtn" title="Send message (Enter)">
                                 <svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
                                 </svg>
                             </button>
-                            <button class="stop-button" id="stopBtn" onclick="stopAI()">
+                            <button class="stop-button" id="stopBtn" title="Stop generating (Esc)">
                                 <svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                     <rect x="6" y="6" width="12" height="12" rx="2" fill="currentColor" />
                                 </svg>
@@ -4814,6 +4852,7 @@
         };
 
         // Critical Global Functions (Must be defined first)
+        <!-- FIXED: Optimized enterApp to handle unauthenticated state properly -->
         function enterApp() {
             try {
                 const landing = document.getElementById('landingPage');
@@ -4822,11 +4861,13 @@
 
                 if (!currentUser) {
                     if (landing) {
+                        // Immediately hide landing page
+                        landing.style.display = 'none';
                         landing.classList.add('hidden');
-                        setTimeout(() => { if (landing) landing.style.display = 'none'; }, 800);
                     }
                     if (authOvl) {
                         authOvl.style.display = 'flex';
+                        authOvl.style.zIndex = '9999'; // Ensure auth is above everything
                         authOvl.classList.add('show');
                     }
                     if (window.lightningTimeout) {
@@ -4854,6 +4895,7 @@
             }
         }
 
+        <!-- FIXED: Improved scrollToSection with null-safety and smooth scrolling -->
         function scrollToSection(id) {
             try {
                 const el = document.getElementById(id);
@@ -5011,15 +5053,9 @@
             if (modelDropdown) modelDropdown.classList.remove('open');
         });
 
+        <!-- FIXED: Removed inversion logic and added explicit parameter -->
         function toggleDeepResearch(checked) {
-            const toggle = document.getElementById('deepResearchToggle');
-            if (checked !== undefined) {
-                isDeepResearch = checked;
-            } else {
-                isDeepResearch = !isDeepResearch;
-                toggle.checked = isDeepResearch;
-            }
-            
+            isDeepResearch = !!checked;
             localStorage.setItem('nexa_ai_deep_research', isDeepResearch);
             
             // Update UI indicator
@@ -5028,8 +5064,6 @@
                 if (isDeepResearch) indicator.classList.add('visible');
                 else indicator.classList.remove('visible');
             }
-            
-            console.log(`Deep Research Mode: ${isDeepResearch}`);
         }
 
         function initAiModes() {
@@ -5461,21 +5495,31 @@
         }
 
         function stopAI() {
-            if (abortController) {
-                abortController.abort();
+            try {
+                if (abortController) {
+                    abortController.abort();
+                }
+            } catch (e) {
+                console.error("Stop AI error:", e);
+            } finally {
+                // FIXED: Ensure all states are reset in finally block
                 abortController = null;
+                isTyping = false;
+                isGeneratingImage = false;
+                isSearching = false;
+                isAnalyzingFile = false;
+                
+                // UI Cleanup
+                const thinking = document.getElementById('thinkingMessage');
+                if (thinking) thinking.remove();
+                
+                if (stopBtn) stopBtn.classList.remove('active');
+                if (sendBtn) {
+                    sendBtn.style.display = 'flex';
+                    sendBtn.disabled = false;
+                }
+                updateSendButtonState();
             }
-            isTyping = false;
-            isGeneratingImage = false;
-            isSearching = false;
-            isAnalyzingFile = false;
-            
-            // UI Cleanup
-            const thinking = document.getElementById('thinkingMessage');
-            if (thinking) thinking.remove();
-            
-            if (stopBtn) stopBtn.classList.remove('active');
-            if (sendBtn) sendBtn.style.display = 'flex';
         }
 
         function handleImageRemix(encodedQuery) {
@@ -5519,7 +5563,7 @@
         }
 
         function setupEventListeners() {
-            // SINGLE Global Delegation for EVERYTHING (Landing + App)
+            // FIXED: Restructured with early returns to prevent fall-through bugs
             document.addEventListener('click', (e) => {
                 const target = e.target;
                 
@@ -5528,29 +5572,19 @@
                 // 1. Landing Navigation Links (Features, Pricing, etc.)
                 const navLink = target.closest('.nav-link[data-section]');
                 if (navLink) {
-                    const sectionId = navLink.getAttribute('data-section');
-                    scrollToSection(sectionId);
                     e.preventDefault();
+                    scrollToSection(navLink.getAttribute('data-section'));
                     return;
                 }
 
                 // 2. Landing CTA Buttons ("Try Nexa AI", "Start Chatting")
                 if (target.closest('.landing-cta')) {
-                    enterApp();
-                    e.preventDefault();
-                    return;
-                }
-
-                // 3. Landing "View Demo" Button
-                const demoBtn = target.closest('.btn-secondary[data-section]');
-                if (demoBtn) {
-                    const sectionId = demoBtn.getAttribute('data-section');
-                    scrollToSection(sectionId);
                     e.preventDefault();
+                    enterApp();
                     return;
                 }
 
-                // 8. FAQ Items
+                // 3. FAQ Items
                 const faqQuestion = target.closest('.faq-question');
                 if (faqQuestion) {
                     const item = faqQuestion.parentElement;
@@ -5574,23 +5608,12 @@
                     return;
                 }
 
-                // 6. Tool Actions (+ Menu items)
+                // 6. Tool Actions (Using data-action instead of regex parsing)
                 const toolBtn = target.closest('.tool-btn');
                 if (toolBtn) {
-                    // Try to find action from handleToolAction call or text
-                    let action = toolBtn.getAttribute('onclick')?.match(/'(.*)'/)?.[1];
-                    if (!action) {
-                        const text = toolBtn.textContent.toLowerCase();
-                        if (text.includes('image')) action = 'image';
-                        else if (text.includes('search')) action = 'search';
-                        else if (text.includes('video')) action = 'video';
-                        else if (text.includes('upload')) action = 'upload';
-                        else if (text.includes('voice')) action = 'voice';
-                    }
-                    if (action) {
-                        e.preventDefault();
-                        handleToolAction(action);
-                    }
+                    e.preventDefault();
+                    const action = toolBtn.dataset.action;
+                    if (action) handleToolAction(action);
                     return;
                 }
 
@@ -5605,14 +5628,15 @@
                     return;
                 }
 
-                // 9. Account Dropdown Toggle
+                // 8. Account Dropdown Toggle
                 if (target.closest('.account-btn')) {
                     toggleAccountDropdown();
                     return;
                 }
 
-                // 10. Close dropdowns when clicking outside
+                // 9. Close dropdowns when clicking outside
                 if (!target.closest('.mode-dropdown') && !target.closest('.account-btn') && !target.closest('.top-right-menu')) {
+                    isDropdownOpen = false;
                     document.querySelectorAll('.mode-dropdown, .account-dropdown').forEach(d => d.classList.remove('open', 'show'));
                 }
                 
@@ -7061,6 +7085,8 @@
         }
 
         function startNewChat() {
+            // FIXED: Close sidebar on mobile when starting a new chat
+            closeSidebarOnMobile();
             currentConversationId = null;
             const messageInput = document.getElementById('messageInput');
             if (messageInput) messageInput.placeholder = "Message Nexa AI...";
@@ -7427,8 +7453,12 @@
         }
 
         // Account dropdown
+        let isDropdownOpen = false; // FIXED: Track dropdown state globally
         function toggleAccountDropdown() {
-            if (accountDropdown) accountDropdown.classList.toggle('show');
+            if (accountDropdown) {
+                isDropdownOpen = !isDropdownOpen;
+                accountDropdown.classList.toggle('show', isDropdownOpen);
+            }
         }
 
         // Hidden file input
@@ -7733,10 +7763,13 @@
             if (e.target === document.getElementById('imgModalOverlay')) closeImageGenModal();
         }
 
+        let isGeneratingImageModal = false; // FIXED: Prevent double-clicks in modal
         async function generateImage() {
+            if (isGeneratingImageModal) return;
             const prompt = document.getElementById('imgPromptInput').value.trim();
             if (!prompt) return;
 
+            isGeneratingImageModal = true;
             const genBtn = document.getElementById('imgGenerateBtn');
             const skeleton = document.getElementById('imgSkeleton');
             const resultArea = document.getElementById('imgResultArea');
@@ -7764,6 +7797,7 @@
                     resultArea.classList.add('visible');
                     statusEl.textContent = '✓ Done!';
                     genBtn.disabled = false;
+                    isGeneratingImageModal = false;
                 };
                 img.onerror = () => {
                     throw new Error("Failed to load image from Pollinations AI");
@@ -7774,6 +7808,7 @@
                 skeleton.classList.remove('visible');
                 statusEl.textContent = '✗ Error: ' + err.message;
                 genBtn.disabled = false;
+                isGeneratingImageModal = false;
             }
         }
 
@@ -7903,7 +7938,10 @@
         }
 
         function handleSettingsOverlayClick(e) {
-            if (e.target === document.getElementById('settingsModalOverlay')) closeSettings();
+            // FIXED: Improved click-outside detection for settings modal
+            if (e.target.closest('.settings-modal') === null) {
+                closeSettings();
+            }
         }
 
         let isAutoVoiceEnabled = localStorage.getItem('nexa_auto_voice') !== 'false';