Update index.html

index.html

@@ -37,8 +37,7 @@
             --brand-accent: #3b82f6;   
             --brand-success: #10b981;  
             --brand-danger: #ef4444;
-            --brand-warning: #f59e0b;
-            --brand-weather: #0ea5e9; /* Sky blue for weather */
+            --brand-warning: #eab308; /* Yellow */
             
             --font-ui: 'Inter', sans-serif;
             --font-code: 'JetBrains Mono', monospace;
@@ -121,13 +120,11 @@
         /* --- CHAT CONTAINER --- */
         .chat-container { flex: 1; overflow-y: auto; padding: 60px 20px 140px; display: flex; flex-direction: column; align-items: center; scroll-behavior: smooth; }
 
-        /* Welcome Center Layout */
         .welcome-center { margin: auto; text-align: center; display: flex; flex-direction: column; align-items: center; animation: fadeIn 0.4s ease; width: 100%; justify-content: center; flex: 1; }
         .welcome-center img { width: 68px; height: 68px; border-radius: 18px; margin-bottom: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); object-fit: cover; }
         .welcome-center h1 { font-size: 24px; font-weight: 500; color: var(--text-primary); margin-bottom: 6px; letter-spacing: -0.5px; }
         .welcome-center p { font-size: 14px; color: var(--text-secondary); }
 
-        /* Chat Messages Wrapper */
         #chatMessages { width: 100%; display: flex; flex-direction: column; align-items: center; }
 
         .message-wrapper { width: 100%; max-width: 780px; margin-bottom: 32px; display: flex; flex-direction: column; }
@@ -163,7 +160,7 @@
         .qwen-think-box[open] summary svg.arrow { transform: rotate(90deg); }
         .qwen-think-content { padding: 14px; border-top: 1px solid var(--border-light); font-size: 13.5px; color: var(--text-secondary); font-style: italic; background: #fff; line-height: 1.6; }
 
-        /* --- ✨ SEARCH & LOCATION ANIMATIONS --- */
+        /* --- ✨ SEARCH & LOCATION ANIMATIONS (NO SPINNING, ONLY FLICKER) --- */
         .action-status {
             display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px;
             background: var(--bg-sidebar); border-radius: 12px; font-size: 13px; font-weight: 500;
@@ -174,7 +171,7 @@
         .flicker-text { animation: pulseOpacity 1.2s infinite alternate; }
         
         @keyframes pulseOpacity { 
-            0% { opacity: 0.4; } 
+            0% { opacity: 0.3; } 
             100% { opacity: 1; } 
         }
 
@@ -226,8 +223,7 @@
         .tool-btn:hover { background: var(--bg-sidebar); color: var(--text-primary); }
         
         /* 🎨 DYNAMIC COLORS */
-        .tool-btn.active-gps { color: var(--brand-accent); background: #eff6ff; }
-        .tool-btn.active-weather { color: var(--brand-weather); background: #e0f2fe; }
+        .tool-btn.active-env { color: var(--brand-accent); background: #eff6ff; }
         
         .tool-btn.active-think-low { color: var(--brand-danger); background: #fee2e2; }
         .tool-btn.active-think-medium { color: var(--brand-warning); background: #fef3c7; }
@@ -319,10 +315,7 @@
             <svg style="width:14px; height:14px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
             New Workspace
         </button>
-        
-        <div class="sidebar-history" id="chatHistory">
-            <!-- Threads will load here dynamically -->
-        </div>
+        <div class="sidebar-history" id="chatHistory"></div>
         
         <div class="sidebar-footer">
             <div class="user-avatar" id="uAv">G</div>
@@ -338,20 +331,19 @@
 
     <main class="main-area">
         <div class="chat-container" id="chatContainer">
-            <!-- 🌟 FIXED WELCOME SCREEN LAYOUT -->
+            <!-- 🌟 STATIC WELCOME SCREEN -->
             <div class="welcome-center" id="welcomeScreen">
                 <img src="https://i.ibb.co/MyYStcGP/TIRANGA-20260613-131924-0000.png" alt="CODE VED Logo">
                 <h1>CODE VED</h1>
                 <p id="welcomeGreeting">Engineered by Divy Patel</p>
             </div>
             
-            <div id="chatMessages" style="width: 100%; display: flex; flex-direction: column; align-items: center;">
-                <!-- Chat bubbles load here so they don't overwrite the welcome screen div -->
-            </div>
+            <!-- 💬 ALL MESSAGES GO HERE -->
+            <div id="chatMessages"></div>
         </div>
 
         <div class="input-dock" id="inputDock">
-            <!-- Status Toast -->
+            <!-- 🌍 Environment Status Toast -->
             <div class="loc-toast" id="locStatus"></div>
 
             <div class="input-container">
@@ -379,14 +371,14 @@
                             <input type="file" id="docUpload" class="hidden-input" accept=".pdf,.txt,.docx,.html,.js,.py,.css,.cpp,.c,.json,.md" onchange="FileSys.process(this, 'document')">
                         </div>
                         
-                        <!-- Location (GPS) -->
-                        <button class="tool-btn" id="btnLoc" onclick="LocationManager.toggle()" title="Find Location">
-                            <svg style="width:18px;height:18px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="3"></circle></svg>
+                        <!-- Voice Typing -->
+                        <button class="tool-btn" id="btnStt" onclick="Speech.toggle()" title="Voice Typing">
+                            <svg style="width:18px;height:18px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3z"></path><path d="M19 10v2a7 7 0 0 1-14 0v-2"></path><line x1="12" y1="19" x2="12" y2="23"></line><line x1="8" y1="23" x2="16" y2="23"></line></svg>
                         </button>
 
-                        <!-- 🌤️ LIVE WEATHER (No Backend Changes Needed!) -->
-                        <button class="tool-btn" id="btnWeather" onclick="WeatherManager.toggle()" title="Live Weather">
-                            <svg style="width:18px;height:18px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"></path></svg>
+                        <!-- 🌍 UNIFIED ENVIRONMENT (Location + Weather) -->
+                        <button class="tool-btn" id="btnEnv" onclick="EnvironmentManager.toggle()" title="Environment (Location & Weather)">
+                            <svg style="width:18px;height:18px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>
                         </button>
                         
                         <!-- Thinking Effort Menu -->
@@ -413,7 +405,7 @@
         </div>
     </main>
 
-    <!-- WORKSPACE PANEL -->
+    <!-- WORKSPACE PANEL (RESTORED & FUNCTIONAL) -->
     <aside class="workspace-panel" id="workspacePanel">
         <div class="ws-header">
             <div class="ws-tabs">
@@ -491,9 +483,9 @@
             currentWs: null,
             abortController: null,
             location: null,
+            weatherContext: null, // Unified Environment Context
             thinkingMode: false,
             thinkingEffort: "medium",
-            weatherContext: null, // 🌤️ Added for Frontend Weather Injection
             lastUserMessage: null,
             currentThreadId: null,
             currentTitle: null
@@ -533,7 +525,7 @@
                 document.getElementById('btnLogout').style.display = 'flex';
                 document.getElementById('welcomeGreeting').innerText = `Ready, ${dispName}.`;
             },
-            // 🌟 Centralized Welcome Screen Logic
+            // 🌟 Permanent Welcome Screen Fix
             updateWelcomeScreen: () => {
                 const ws = document.getElementById('welcomeScreen');
                 if(State.history.length === 0) {
@@ -606,11 +598,8 @@
                         else if (action === 'login_send_otp') Auth.switchPhase('loginPhase1', 'loginPhase2');
                         else { 
                             localStorage.setItem('codeved_user', payload.email); 
-                            if(data.user && data.user.name) {
-                                localStorage.setItem('codeved_name', data.user.name);
-                            } else if (payload.name) {
-                                localStorage.setItem('codeved_name', payload.name);
-                            }
+                            if(data.user && data.user.name) localStorage.setItem('codeved_name', data.user.name);
+                            else if (payload.name) localStorage.setItem('codeved_name', payload.name);
                             location.reload(); 
                         }
                     } else { UI.showAuthMsg(data.message); }
@@ -656,21 +645,19 @@
                 if(!State.user || State.isProcessing) return;
                 State.currentThreadId = threadId;
                 
-                // Clear current messages, keep welcome screen div
-                document.getElementById('chatMessages').innerHTML = '';
-                UI.updateWelcomeScreen();
+                document.getElementById('chatMessages').innerHTML = ''; // Clear chat area
                 
                 try {
                     const res = await fetch(Config.GAS_URL, { method: 'POST', body: JSON.stringify({action: "get_chat", email: State.user, threadId: threadId})});
                     const data = await res.json();
                     if(data.status === 'success') {
                         State.history = JSON.parse(data.historyJSON || "[]");
-                        
-                        UI.updateWelcomeScreen(); // Hide it since history has items
+                        UI.updateWelcomeScreen();
                         
                         State.history.forEach(msg => {
                             if(msg.role === 'user') {
                                 let dispText = msg.content;
+                                if(dispText.includes('[SYSTEM REAL-TIME WEATHER:')) dispText = dispText.split('\n\n[SYSTEM REAL-TIME WEATHER:')[0];
                                 if(dispText.includes('---END DATA---')) dispText = dispText.split('User: ')[1] || '[Attached File]';
                                 Chat.renderUser(dispText);
                             } else {
@@ -690,9 +677,8 @@
                 State.currentTitle = null;
                 State.history = [];
                 
-                // Clean the chat area perfectly
                 document.getElementById('chatMessages').innerHTML = '';
-                UI.updateWelcomeScreen(); // Shows welcome screen since history is empty!
+                UI.updateWelcomeScreen();
                 
                 HistoryManager.syncAllChats();
                 if(window.innerWidth <= 900) UI.toggleSidebar();
@@ -703,6 +689,7 @@
                     State.currentThreadId = "thr_" + Date.now();
                     const firstUser = State.history.find(m => m.role === 'user');
                     let rawText = firstUser ? firstUser.content : "New Workspace";
+                    if(rawText.includes('[SYSTEM REAL-TIME WEATHER:')) rawText = rawText.split('\n\n[SYSTEM REAL-TIME WEATHER:')[0];
                     if(rawText.includes('---END DATA---')) rawText = rawText.split('User: ')[1] || "Document Analysis";
                     State.currentTitle = rawText.substring(0, 25) + (rawText.length > 25 ? '...' : '');
                 }
@@ -731,14 +718,15 @@
             }
         };
 
-        // --- 4. GPS, WEATHER & THINKING MANAGERS ---
-        const LocationManager = {
+        // --- 4. 🌍 UNIFIED ENVIRONMENT MANAGER (GPS + WEATHER) ---
+        const EnvironmentManager = {
             toggle: () => {
-                const btn = document.getElementById('btnLoc');
+                const btn = document.getElementById('btnEnv');
                 const status = document.getElementById('locStatus');
-                if(State.location) { 
+                if(State.location || State.weatherContext) { 
                     State.location = null; 
-                    btn.classList.remove('active-gps'); 
+                    State.weatherContext = null;
+                    btn.classList.remove('active-env'); 
                     status.style.display = 'none';
                 } else {
                     if(navigator.geolocation) {
@@ -746,65 +734,33 @@
                         status.style.display = 'flex';
                         status.innerHTML = `<svg style="width:14px;height:14px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="3"></circle></svg> <span class="flicker-text">Finding your exact location...</span>`;
                         
-                        navigator.geolocation.getCurrentPosition(
-                            pos => { 
-                                State.location = { lat: pos.coords.latitude, lng: pos.coords.longitude }; 
-                                btn.style.color = ''; 
-                                btn.classList.add('active-gps'); 
-                                status.innerHTML = `<span style="color:var(--brand-success);">Location found & attached.</span>`;
-                                setTimeout(() => status.style.display = 'none', 3000);
-                            },
-                            err => { 
-                                btn.style.color = ''; 
-                                status.innerHTML = `<span style="color:var(--brand-danger);">Location access denied.</span>`;
-                                setTimeout(() => status.style.display = 'none', 3000);
-                            }
-                        );
-                    } else { alert("GPS not supported."); }
-                }
-            }
-        };
-
-        // 🌤️ CLIENT-SIDE WEATHER MANAGER (No Backend Reconstruction Needed!)
-        const WeatherManager = {
-            toggle: async () => {
-                const btn = document.getElementById('btnWeather');
-                const status = document.getElementById('locStatus');
-                if(State.weatherContext) {
-                    State.weatherContext = null;
-                    btn.classList.remove('active-weather');
-                    status.style.display = 'none';
-                } else {
-                    if(navigator.geolocation) {
-                        btn.style.color = 'var(--brand-accent)';
-                        status.style.display = 'flex';
-                        status.innerHTML = `<span class="flicker-text">Fetching real-time weather...</span>`;
-                        
-                        navigator.geolocation.getCurrentPosition(async pos => {
+                        navigator.geolocation.getCurrentPosition(async pos => { 
+                            State.location = { lat: pos.coords.latitude, lng: pos.coords.longitude }; 
+                            status.innerHTML = `<svg style="width:14px;height:14px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"></path></svg> <span class="flicker-text">Fetching real-time weather...</span>`;
+                            
                             try {
-                                const lat = pos.coords.latitude;
-                                const lon = pos.coords.longitude;
-                                // Using free open-meteo API (no key needed)
-                                const res = await fetch(`https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${lon}&current_weather=true`);
+                                // Direct API call for Live Weather!
+                                const res = await fetch(`https://api.open-meteo.com/v1/forecast?latitude=${State.location.lat}&longitude=${State.location.lng}&current_weather=true`);
                                 const data = await res.json();
                                 const w = data.current_weather;
+                                State.weatherContext = `Temperature: ${w.temperature}°C, Wind Speed: ${w.windspeed} km/h`;
                                 
-                                State.weatherContext = `Local Weather Status: ${w.temperature}°C, Wind Speed: ${w.windspeed} km/h.`;
                                 btn.style.color = ''; 
-                                btn.classList.add('active-weather');
-                                status.innerHTML = `<span style="color:var(--brand-success);">Live weather attached!</span>`;
+                                btn.classList.add('active-env'); 
+                                status.innerHTML = `<span style="color:var(--brand-success);">Location & Weather active!</span>`;
                                 setTimeout(() => status.style.display = 'none', 3000);
-                            } catch(e) {
-                                btn.style.color = '';
-                                status.innerHTML = `<span style="color:var(--brand-danger);">Weather fetch failed.</span>`;
+                            } catch (e) {
+                                btn.style.color = ''; 
+                                btn.classList.add('active-env'); 
+                                status.innerHTML = `<span style="color:var(--brand-warning);">Location found, weather failed.</span>`;
                                 setTimeout(() => status.style.display = 'none', 3000);
                             }
-                        }, err => {
-                            btn.style.color = '';
-                            status.innerHTML = `<span style="color:var(--brand-danger);">Please allow GPS for weather access.</span>`;
+                        }, err => { 
+                            btn.style.color = ''; 
+                            status.innerHTML = `<span style="color:var(--brand-danger);">Location access denied.</span>`;
                             setTimeout(() => status.style.display = 'none', 3000);
                         });
-                    } else { alert("Geolocation not supported."); }
+                    } else { alert("GPS not supported."); }
                 }
             }
         };
@@ -830,7 +786,7 @@
             }
         };
 
-        // --- 5. FILE HANDLING ---
+        // --- 5. FILE HANDLING & VOICE ---
         const FileSys = {
             process: async (input, type) => {
                 document.getElementById('attachMenu').classList.remove('active');
@@ -847,7 +803,25 @@
                     r.onload = (e) => { State.attachment = { type: 'text', data: e.target.result, name: file.name }; }; r.readAsText(file);
                 }
                 input.value = ''; 
-            }
+            },
+            discard: () => { State.attachment = null; document.getElementById('filePreviewBar').classList.remove('active'); }
+        };
+
+        const Speech = {
+            rec: null, isRec: false,
+            init: () => {
+                const SR = window.SpeechRecognition || window.webkitSpeechRecognition;
+                if (!SR) return alert("Speech Recognition not supported.");
+                Speech.rec = new SR(); Speech.rec.continuous = false; Speech.rec.interimResults = true; Speech.rec.lang = 'en-US'; 
+                Speech.rec.onstart = () => { Speech.isRec = true; document.getElementById('btnStt').classList.add('recording'); };
+                Speech.rec.onresult = (e) => {
+                    let trans = ''; for (let i = e.resultIndex; i < e.results.length; ++i) { if (e.results[i].isFinal) trans += e.results[i][0].transcript; }
+                    if (trans) { const input = document.getElementById('mainInput'); input.value += (input.value ? ' ' : '') + trans; UI.autoGrow(input); }
+                };
+                Speech.rec.onerror = () => Speech.stop(); Speech.rec.onend = () => Speech.stop();
+            },
+            toggle: () => { if (!Speech.rec) Speech.init(); if (Speech.isRec) Speech.stop(); else { try { Speech.rec.start(); } catch(e) {} } },
+            stop: () => { if(Speech.rec) Speech.rec.stop(); Speech.isRec = false; document.getElementById('btnStt').classList.remove('recording'); }
         };
 
         // --- 6. WORKSPACE ---
@@ -917,16 +891,16 @@
         };
         marked.use({ renderer: MDRenderer });
 
-        // --- 7. CHAT ENGINE ---
+        // --- 7. CHAT ENGINE (ROCK SOLID) ---
         const Chat = {
             renderUser: (txt, attachUI = '') => {
-                const c = document.getElementById('chatMessages'); // Appending to chatMessages now
+                const c = document.getElementById('chatMessages'); // Hardbound rendering
                 const w = document.createElement('div'); w.className = 'message-wrapper';
                 w.innerHTML = `<div class="user-message">${attachUI}${txt ? UI.escape(txt) : ''}</div>`;
                 c.appendChild(w); UI.scrollToBottom();
             },
             renderBot: (msgId) => {
-                const c = document.getElementById('chatMessages'); // Appending to chatMessages now
+                const c = document.getElementById('chatMessages'); 
                 const w = document.createElement('div'); w.className = 'message-wrapper';
                 
                 const copyIcon = `<svg style="width:14px;height:14px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>`;
@@ -1038,7 +1012,6 @@
                 State.lastUserMessage = text; 
                 input.value = ''; input.style.height = 'auto'; 
                 
-                // Hide Welcome Screen on first chat
                 UI.updateWelcomeScreen();
 
                 const searchTriggers = ["search", "latest", "news", "near", "restaurant", "shop", "distance", "time", "आसपास", "दूरी", "दुकान"];
@@ -1058,14 +1031,16 @@
                     }
                 }
 
-                // 🌤️ Inject Weather Context into Backend Prompt
+                // 🌤️ Inject Weather Context Safely
+                let systemInjectedPayload = payloadStr;
                 if(State.weatherContext) {
-                    payloadStr += `\n\n[SYSTEM REAL-TIME WEATHER: ${State.weatherContext}]`;
+                    systemInjectedPayload += `\n\n[SYSTEM REAL-TIME WEATHER: ${State.weatherContext}]`;
                 }
 
                 if(!isRetry) {
+                    // Only show the user's text on screen, NOT the system tags
                     Chat.renderUser(text, attachUI);
-                    State.history.push({ role: 'user', content: payloadStr });
+                    State.history.push({ role: 'user', content: systemInjectedPayload });
                 }
                 
                 FileSys.discard();
@@ -1079,7 +1054,7 @@
                     const res = await fetch(Config.API_ENDPOINT, {
                         method: 'POST', headers: {'Content-Type': 'application/json'},
                         body: JSON.stringify({ 
-                            message: payloadStr, 
+                            message: systemInjectedPayload, 
                             attachments: mediaArray, 
                             is_search: isSearching, 
                             location: State.location, 
@@ -1111,7 +1086,9 @@
                                     if(json.choices && json.choices[0].delta.content) fullText += json.choices[0].delta.content;
                                     Chat.parseAndRender(fullText, isSearching, true, botObj.contentDiv);
                                     UI.scrollToBottom();
-                                } catch(e){}
+                                } catch(e){
+                                    // Safe parsing: Ignore incomplete chunks during stream
+                                }
                             }
                         }
                     }