Update static/js/script.js

static/js/script.js

@@ -1,20 +1,42 @@
+/**
+ * ORBIT – Educational Research Assistant
+ * SCRIPT FINAL: Welcome Screen Injector + PWA Fixed
+ */
+
 document.addEventListener('DOMContentLoaded', () => {
     const $ = id => document.getElementById(id);
     const addEvt = (id, event, handler) => { if($(id)) $(id).addEventListener(event, handler); };
 
     let currentSid = null;
-    let sessions = JSON.parse(localStorage.getItem('orbit_sessions_v10')) || {};
-    if (typeof sessions !== 'object' || Array.isArray(sessions)) sessions = {};
-    
+    let sessions = {};
     let appSettings = null;
     let isBusy = false;
-    let pdfText = ""; let pdfFilename = "";
+    let pdfText = ""; 
+    let pdfFilename = "";
+
+    // Template Welcome Screen (Disuntik manual tiap buka chat baru)
+    const welcomeHTML = `
+        <div id="welcome-msg" class="flex flex-col items-center justify-center h-full text-center py-20 px-4">
+            <img src="/static/icon.png" class="w-16 h-16 mb-4 shadow-sm rounded-2xl" onerror="this.style.display='none'">
+            <h2 class="text-2xl font-bold text-gray-800 mb-2">Welcome to ORBIT</h2>
+            <p class="text-gray-500 text-sm max-w-md mt-2">Your AI-powered Educational Research Assistant. Upload a document or type a prompt below to begin.</p>
+        </div>`;
+
+    // 1. DATA RECOVERY
+    try {
+        const stored = localStorage.getItem('orbit_sessions_v8');
+        sessions = stored ? JSON.parse(stored) : {};
+        if (typeof sessions !== 'object' || Array.isArray(sessions)) sessions = {};
+    } catch(e) {
+        sessions = {};
+    }
 
-    // PWA INSTALL LOGIC (Fixed line breaks alert)
+    // 2. PWA INSTALL LOGIC (PAKSA MUNCUL)
     let deferredPrompt;
     if ($('btn-install-pwa') && !window.matchMedia('(display-mode: standalone)').matches) {
         $('btn-install-pwa').classList.remove('hidden');
     }
+
     window.addEventListener('beforeinstallprompt', (e) => {
         e.preventDefault();
         deferredPrompt = e;
@@ -27,30 +49,24 @@ document.addEventListener('DOMContentLoaded', () => {
             if(outcome === 'accepted' && $('btn-install-pwa')) $('btn-install-pwa').classList.add('hidden');
             deferredPrompt = null;
         } else {
-            // Fix: \n\n diganti agar berfungsi sebagai line break betulan di javascript
             alert("Chrome memblokir pop-up otomatis.\n\nUntuk Install: Klik ikon Titik-Tiga (⋮) di pojok kanan atas browser Anda, lalu pilih 'Tambahkan ke Layar Utama' (Add to Home screen).");
         }
     });
 
-    // BOOT & INIT
+    // 3. BOOT & INIT
     async function init() {
         try {
-            const me = await fetch('/api/me');
-            if(me.status === 401) { window.location.href = '/login'; return; }
-            const user = await me.json();
+            const meRes = await fetch('/api/me');
+            if(meRes.status === 401) { window.location.href = '/login'; return; }
+            const user = await meRes.json();
+            
             if($('user-name')) $('user-name').textContent = user.name || user.email;
             if($('user-avatar') && user.picture) $('user-avatar').src = user.picture;
 
             const setRes = await fetch('/api/settings');
-            if(setRes.ok) {
-                appSettings = await setRes.json();
-                // Ensure arrays exist
-                if(!appSettings.models_openrouter) appSettings.models_openrouter = [];
-                if(!appSettings.models_nvidia) appSettings.models_nvidia = [];
-                if(!appSettings.models_gemini) appSettings.models_gemini = ["gemini-1.5-pro-latest", "gemini-1.5-flash-latest"];
-                if(!appSettings.models_agentrouter) appSettings.models_agentrouter = [];
-                if(!appSettings.models_openai) appSettings.models_openai = [];
-            }
+            if(setRes.ok) appSettings = await setRes.json();
+        } catch(e) {
+            console.error("Init failed:", e);
         } finally {
             populateModelSelect();
             const ids = Object.keys(sessions).sort((a,b) => b-a);
@@ -58,138 +74,168 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     }
 
-    function save() { localStorage.setItem('orbit_sessions_v10', JSON.stringify(sessions)); }
-    function newSession() { const id = Date.now().toString(); sessions[id] = { title: "New Chat", messages: [] }; loadSession(id); }
+    // 4. SESSION MANAGEMENT
+    function save() { localStorage.setItem('orbit_sessions_v8', JSON.stringify(sessions)); }
+
+    function newSession() {
+        const id = Date.now().toString();
+        sessions[id] = { title: "New Chat", messages: [] };
+        loadSession(id);
+    }
     addEvt('btn-new-chat', 'click', newSession);
 
     function loadSession(id) {
+        if(!sessions[id]) return;
         currentSid = id;
-        const cm = $('chat-messages'); if(!cm) return;
+        const cm = $('chat-messages');
+        if(!cm) return;
+        
+        // Bersihkan area chat
         cm.innerHTML = '';
-        if(sessions[id].messages && sessions[id].messages.length) {
-            if($('welcome-msg')) $('welcome-msg').style.display = 'none';
+        
+        if(sessions[id].messages && sessions[id].messages.length > 0) {
+            // Kalau ada chat, render semua pesannya
             sessions[id].messages.forEach(m => renderBubble(m.role, m.displayContent || m.content));
         } else {
-            if($('welcome-msg')) $('welcome-msg').style.display = 'flex';
+            // Kalau chatnya kosong, SUNTIK ULANG WELCOME SCREEN!
+            cm.innerHTML = welcomeHTML;
         }
-        renderHistory(); cm.scrollTop = cm.scrollHeight;
+        
+        renderHistory();
+        cm.scrollTop = cm.scrollHeight;
     }
 
     function renderHistory() {
         const list = $('history-list'); if(!list) return;
         const ids = Object.keys(sessions).sort((a,b) => b-a);
+        if(ids.length === 0) {
+            list.innerHTML = '<p class="text-xs text-gray-400 px-3 py-2 italic">No recent chats.</p>';
+            return;
+        }
         list.innerHTML = ids.map(id => {
-            const active = (id === currentSid) ? 'bg-accent-light text-accent shadow-sm' : 'text-gray-600 hover:bg-white';
-            return `<button onclick="window.ls('${id}')" class="w-full text-left px-3 py-2.5 rounded-xl text-xs truncate font-medium ${active}">${sessions[id].title || "New Chat"}</button>`;
+            const active = (id === currentSid) ? 'bg-accent-light text-accent font-semibold shadow-sm' : 'text-gray-600 hover:bg-white';
+            return `<button onclick="window.ls('${id}')" class="w-full text-left px-3 py-2.5 rounded-xl text-xs truncate font-medium transition-all ${active}">${sessions[id].title || "New Chat"}</button>`;
         }).join('');
     }
     window.ls = id => { loadSession(id); if(window.innerWidth < 768) toggleSidebar(); };
 
+    // 5. CHAT UI RENDERING
     function renderBubble(role, content) {
         const isUser = (role === 'user');
         const wrap = document.createElement('div');
         wrap.className = `flex mb-6 ${isUser ? 'justify-end' : 'justify-start'}`;
+        
         if(isUser) {
-            wrap.innerHTML = `<div class="bg-accent text-white p-4 rounded-2xl rounded-tr-none max-w-[85%] text-[15px] leading-relaxed">${content}</div>`;
+            wrap.innerHTML = `<div class="bg-accent text-white p-4 rounded-2xl rounded-tr-none max-w-[85%] text-[15px] shadow-sm leading-relaxed">${content}</div>`;
         } else {
-            let html = content; try { html = marked.parse(content); } catch(e) { html = content.replace(/\n/g, '<br>'); }
-            wrap.innerHTML = `<div class="flex gap-4 items-start w-full"><img src="/static/icon.png" class="w-8 h-8 rounded-full shrink-0" onerror="this.style.display='none'"><div class="bg-[#f8f9fa] border border-slate-200 p-5 rounded-2xl rounded-tl-none max-w-[90%] md:max-w-[85%] prose-orbit w-full">${html}</div></div>`;
+            let html = content;
+            try { 
+                html = (typeof marked !== 'undefined') ? marked.parse(content) : content.replace(/\n/g, '<br>'); 
+            } catch(e) { html = content; }
+            wrap.innerHTML = `
+                <div class="flex gap-4 items-start w-full">
+                    <img src="/static/icon.png" class="w-8 h-8 rounded-full border border-slate-200 shadow-sm shrink-0" onerror="this.style.display='none'">
+                    <div class="bg-[#f8f9fa] border border-slate-200 p-5 rounded-2xl rounded-tl-none max-w-[90%] md:max-w-[85%] prose-orbit shadow-sm w-full">${html}</div>
+                </div>`;
         }
-        if($('chat-messages')) { $('chat-messages').appendChild(wrap); $('chat-messages').scrollTop = $('chat-messages').scrollHeight; }
+        $('chat-messages').appendChild(wrap);
+        $('chat-messages').scrollTop = $('chat-messages').scrollHeight;
     }
 
+    // 6. API INTERACTION (Send Chat)
     async function sendChat() {
         if(isBusy) return;
-        const raw = $('chat-textarea').value.trim();
+        const inputEl = $('chat-textarea');
+        const raw = inputEl.value.trim();
         if(!raw && !pdfText) return;
         
-        $('chat-textarea').value = ''; $('chat-textarea').style.height = 'auto';
-        if($('welcome-msg')) $('welcome-msg').style.display = 'none';
+        inputEl.value = '';
+        inputEl.style.height = 'auto';
         
-        let full = raw; let display = raw.replace(/\n/g, '<br>');
-        if(pdfText) { full = `[PDF: ${pdfFilename}]\n${pdfText}\n\nUser: ${raw}`; display = `<div class="bg-blue-500 text-white text-[10px] px-2 py-1 rounded w-fit mb-1 font-bold">📄 ${pdfFilename}</div>${display}`; pdfText = ""; $('attach-badge').classList.add('hidden'); }
+        // Hapus Welcome Screen pas mulai ngetik chat
+        if($('welcome-msg')) $('welcome-msg').remove();
+        
+        let fullPrompt = raw;
+        let displayPrompt = raw.replace(/\n/g, '<br>');
+
+        if(pdfText) {
+            fullPrompt = `[Attached PDF: ${pdfFilename}]\n${pdfText}\n\nUser Question: ${raw}`;
+            displayPrompt = `<div class="bg-blue-500 text-white text-[10px] px-2 py-1 rounded w-fit mb-1 font-bold">📄 ${pdfFilename}</div>${displayPrompt}`;
+            pdfText = ""; pdfFilename = "";
+            $('attach-badge').classList.add('hidden');
+        }
 
-        if(!sessions[currentSid].messages || !sessions[currentSid].messages.length) sessions[currentSid].title = raw.slice(0, 20) || "New Chat";
-        sessions[currentSid].messages.push({ role: 'user', content: full, displayContent: display });
-        renderBubble('user', display);
+        // Set title dari pesan pertama
+        if(!sessions[currentSid].messages || sessions[currentSid].messages.length === 0) {
+            sessions[currentSid].title = raw.substring(0, 25) || "New Chat";
+        }
+
+        sessions[currentSid].messages.push({ role: 'user', content: fullPrompt, displayContent: displayPrompt });
+        renderBubble('user', displayPrompt);
         
         isBusy = true; $('btn-send').disabled = true;
         const loadId = 'load-' + Date.now();
-        if($('chat-messages')) { $('chat-messages').insertAdjacentHTML('beforeend', `<div id="${loadId}" class="flex mb-6 gap-4 items-start animate-pulse"><img src="/static/icon.png" class="w-8 h-8 rounded-full shrink-0"><div class="bg-slate-50 p-4 rounded-2xl rounded-tl-none text-gray-400 text-sm">Analyzing...</div></div>`); $('chat-messages').scrollTop = $('chat-messages').scrollHeight; }
+        $('chat-messages').insertAdjacentHTML('beforeend', `<div id="${loadId}" class="flex mb-6 gap-4 items-start animate-pulse"><img src="/static/icon.png" class="w-8 h-8 rounded-full shrink-0"><div class="bg-slate-50 p-4 rounded-2xl rounded-tl-none text-gray-400 text-sm">Analyzing...</div></div>`);
+        $('chat-messages').scrollTop = $('chat-messages').scrollHeight;
 
         try {
             const res = await fetch('/api/chat', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ prompt: full, model: $('model-select').value, messages: sessions[currentSid].messages.slice(0,-1) })
+                body: JSON.stringify({ 
+                    prompt: fullPrompt, 
+                    model: $('model-select').value, 
+                    messages: sessions[currentSid].messages.slice(0,-1) 
+                })
             });
             const data = await res.json();
             if($(loadId)) $(loadId).remove();
+
             if(!res.ok) throw new Error(data.error || "Server error");
+
             sessions[currentSid].messages.push({ role: 'assistant', content: data.reply });
             renderBubble('assistant', data.reply);
             save(); renderHistory();
         } catch(e) {
             if($(loadId)) $(loadId).remove();
             renderBubble('assistant', `**Error:** ${e.message}`);
-        } finally { isBusy = false; $('btn-send').disabled = false; }
+        } finally {
+            isBusy = false; $('btn-send').disabled = false;
+        }
     }
 
     addEvt('btn-send', 'click', sendChat);
     addEvt('chat-textarea', 'keydown', e => { if(e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendChat(); } });
-    if($('chat-textarea')) $('chat-textarea').addEventListener('input', function() { this.style.height = 'auto'; this.style.height = Math.min(this.scrollHeight, 160) + 'px'; });
-
-    // SETTINGS MODAL & DYNAMIC UI
-    const provMap = { "OpenRouter": "or", "Nvidia NIM": "nv", "Google Gemini": "gem", "AgentRouter": "ar", "Custom OpenAI": "oai" };
-
-    function syncProviderUI() {
-        const prov = $('settings-provider').value;
-        // Hide all sections first
-        document.querySelectorAll('.prov-sec').forEach(el => el.classList.add('hidden'));
-        // Show matching section
-        const secId = provMap[prov];
-        if(secId && $(`sec-${secId}`)) {
-            $(`sec-${secId}`).classList.remove('hidden');
-        }
+    if($('chat-textarea')) {
+        $('chat-textarea').addEventListener('input', function() {
+            this.style.height = 'auto';
+            this.style.height = Math.min(this.scrollHeight, 160) + 'px';
+        });
     }
 
+    // 7. MODALS LOGIC
     function populateModelSelect() {
         const ms = $('model-select'); if(!ms) return;
         ms.innerHTML = "";
-        let list = [];
-        if(appSettings) {
-            const mapKey = { "OpenRouter": "models_openrouter", "Nvidia NIM": "models_nvidia", "Google Gemini": "models_gemini", "AgentRouter": "models_agentrouter", "Custom OpenAI": "models_openai" };
-            const k = mapKey[appSettings.provider];
-            list = appSettings[k] || [];
-        }
-        if(list.length === 0) list = ["default-model"];
-        list.forEach(m => { const opt = document.createElement('option'); opt.value = m; opt.textContent = m; if(appSettings && m === appSettings.current_model) opt.selected = true; ms.appendChild(opt); });
-    }
-
-    function renderDynamicLists() {
-        const draw = (arr, listId, k) => {
-            const lst = $(listId); if(!lst) return;
-            lst.innerHTML = (arr||[]).map((m,i) => `<div class="flex items-center justify-between px-2 py-1.5 rounded hover:bg-white group"><span class="text-xs truncate flex-1">${m}</span><button data-i="${i}" data-k="${k}" class="btn-del text-red-400 font-bold ml-2">✕</button></div>`).join('');
-            lst.querySelectorAll('.btn-del').forEach(b => {
-                b.addEventListener('click', function() { appSettings[this.dataset.k].splice(Number(this.dataset.i), 1); renderDynamicLists(); });
-            });
-        };
+        let list = ["gemini-1.5-pro-latest", "gemini-1.5-flash-latest"]; 
+        
         if(appSettings) {
-            draw(appSettings.models_openrouter, 'list-or', 'models_openrouter');
-            draw(appSettings.models_nvidia, 'list-nv', 'models_nvidia');
-            draw(appSettings.models_gemini, 'list-gem', 'models_gemini');
-            draw(appSettings.models_agentrouter, 'list-ar', 'models_agentrouter');
-            draw(appSettings.models_openai, 'list-oai', 'models_openai');
+            if(appSettings.provider === "OpenRouter") list = appSettings.models_openrouter || list;
+            else if(appSettings.provider === "Nvidia NIM") list = appSettings.models_nvidia || list;
         }
+        
+        list.forEach(m => {
+            const opt = document.createElement('option');
+            opt.value = m; opt.textContent = m;
+            if(appSettings && m === appSettings.current_model) opt.selected = true;
+            ms.appendChild(opt);
+        });
     }
 
     addEvt('btn-settings', 'click', () => {
         if(appSettings) {
             $('settings-provider').value = appSettings.provider;
             $('settings-apikey').value = appSettings.api_key || "";
-            $('settings-url').value = appSettings.base_url || "";
-            renderDynamicLists();
-            syncProviderUI();
         }
         $('settings-modal').classList.remove('hidden');
         if(window.innerWidth < 768) toggleSidebar();
@@ -197,76 +243,62 @@ document.addEventListener('DOMContentLoaded', () => {
     addEvt('btn-close-settings', 'click', () => $('settings-modal').classList.add('hidden'));
     addEvt('btn-cancel-settings', 'click', () => $('settings-modal').classList.add('hidden'));
 
-    addEvt('settings-provider', 'change', () => {
-        const prov = $('settings-provider').value;
-        const urls = { "OpenRouter": "https://openrouter.ai/api/v1/chat/completions", "Nvidia NIM": "https://integrate.api.nvidia.com/v1/chat/completions", "Google Gemini": "https://generativelanguage.googleapis.com/v1beta/models/", "AgentRouter": "https://agentrouter.org/v1/chat/completions" };
-        if (urls[prov] && $('settings-url')) $('settings-url').value = urls[prov];
-        syncProviderUI();
-    });
-
-    addEvt('btn-toggle-key', 'click', () => { const inp = $('settings-apikey'); if(inp) inp.type = inp.type === 'password' ? 'text' : 'password'; });
-
-    const bindAdd = (btnId, inpId, listKey) => {
-        const f = () => {
-            const val = $(inpId)?.value.trim();
-            if(!val || !appSettings) return;
-            if(!appSettings[listKey].includes(val)) { appSettings[listKey].push(val); $(inpId).value = ""; renderDynamicLists(); }
-        };
-        addEvt(btnId, 'click', f);
-        if($(inpId)) $(inpId).addEventListener('keydown', e => { if(e.key==='Enter') f(); });
-    };
-    bindAdd('btn-add-or', 'inp-or', 'models_openrouter');
-    bindAdd('btn-add-nv', 'inp-nv', 'models_nvidia');
-    bindAdd('btn-add-gem', 'inp-gem', 'models_gemini');
-    bindAdd('btn-add-ar', 'inp-ar', 'models_agentrouter');
-    bindAdd('btn-add-oai', 'inp-oai', 'models_openai');
-
     addEvt('btn-save-settings', async () => {
         const payload = {
             provider: $('settings-provider').value,
-            base_url: $('settings-url').value,
             api_key: $('settings-apikey').value,
-            models_openrouter: appSettings.models_openrouter,
-            models_nvidia: appSettings.models_nvidia,
-            models_gemini: appSettings.models_gemini,
-            models_agentrouter: appSettings.models_agentrouter,
-            models_openai: appSettings.models_openai,
-            current_model: $('model-select').value // prevent override if empty
+            current_model: $('model-select').value
         };
         const res = await fetch('/api/settings', { method: 'POST', body: JSON.stringify(payload) });
-        if(res.ok) { appSettings = await res.json(); populateModelSelect(); $('settings-modal').classList.add('hidden'); }
+        if(res.ok) {
+            appSettings = await res.json();
+            populateModelSelect();
+            $('settings-modal').classList.add('hidden');
+        }
     });
 
-    // MISC (Sidebar, PDF, DOI)
-    function toggleSidebar() { $('sidebar').classList.toggle('-translate-x-full'); $('sidebar-overlay').classList.toggle('hidden'); }
-    addEvt('btn-hamburger', 'click', toggleSidebar); addEvt('btn-close-sidebar', 'click', toggleSidebar); addEvt('sidebar-overlay', 'click', toggleSidebar);
-
-    function clr() {
-        if(!currentSid) return; sessions[currentSid].messages = []; sessions[currentSid].title = "New Chat"; save(); loadSession(currentSid);
-    }
-    addEvt('btn-clear-chat-top', 'click', clr); addEvt('btn-clear-chat-mobile', 'click', clr);
-
+    // 8. PDF UPLOAD
     addEvt('btn-attach', 'click', () => $('pdf-input').click());
-    addEvt('btn-remove-attach', 'click', () => { pdfText = ""; $('attach-badge').classList.add('hidden'); });
     if($('pdf-input')) {
         $('pdf-input').addEventListener('change', async e => {
-            const f = e.target.files[0]; if(!f) return; const fd = new FormData(); fd.append('file', f);
+            const f = e.target.files[0]; if(!f) return;
+            const fd = new FormData(); fd.append('file', f);
             $('attach-badge').classList.remove('hidden'); $('attach-name').textContent = "Extracting...";
-            const res = await fetch('/api/upload_pdf', { method: 'POST', body: fd });
-            const d = await res.json();
-            if(res.ok) { pdfText = d.text; pdfFilename = d.filename; $('attach-name').textContent = d.filename; } else { alert(d.error); $('attach-badge').classList.add('hidden'); }
+            try {
+                const res = await fetch('/api/upload_pdf', { method: 'POST', body: fd });
+                const d = await res.json();
+                if(res.ok) {
+                    pdfText = d.text; pdfFilename = d.filename; $('attach-name').textContent = d.filename;
+                } else throw new Error(d.error);
+            } catch(err) {
+                alert(err.message);
+                $('attach-badge').classList.add('hidden');
+            }
         });
     }
+    addEvt('btn-remove-attach', 'click', () => { pdfText = ""; $('attach-badge').classList.add('hidden'); });
+
+    // 9. UI TOGGLES
+    function toggleSidebar() {
+        $('sidebar').classList.toggle('-translate-x-full');
+        $('sidebar-overlay').classList.toggle('hidden');
+    }
+    addEvt('btn-hamburger', 'click', toggleSidebar);
+    addEvt('btn-close-sidebar', 'click', toggleSidebar);
+    addEvt('sidebar-overlay', 'click', toggleSidebar);
 
-    addEvt('btn-doi', 'click', () => { $('doi-modal').classList.remove('hidden'); if(window.innerWidth < 768) toggleSidebar(); });
-    addEvt('btn-close-doi', 'click', () => $('doi-modal').classList.add('hidden'));
-    addEvt('btn-validate-doi', 'click', async () => {
-        const doi = $('doi-input').value.trim(); if(!doi) return;
-        $('doi-result').classList.remove('hidden'); $('doi-result').innerHTML = "Validating...";
-        const res = await fetch('/api/validate_doi', { method: 'POST', body: JSON.stringify({doi}) });
-        const d = await res.json();
-        if(!res.ok || d.error) $('doi-result').innerHTML = d.error || "Gagal"; else $('doi-result').innerHTML = `<b>${d.title}</b><br>${d.authors} (${d.year})`;
+    addEvt('btn-clear-chat-top', 'click', () => {
+        if(confirm("Hapus obrolan ini?")) {
+            sessions[currentSid].messages = [];
+            sessions[currentSid].title = "New Chat";
+            save(); loadSession(currentSid); // Ini bakal langsung nge-load ulang welcome screen
+        }
     });
+    addEvt('btn-clear-chat-mobile', 'click', () => $('btn-clear-chat-top').click());
 
+    // 10. START
     init();
+    if ('serviceWorker' in navigator) {
+        window.addEventListener('load', () => navigator.serviceWorker.register('/sw.js', { scope: '/' }));
+    }
 });