Update static/js/script.js

static/js/script.js

@@ -1,44 +1,20 @@
-/**
- * ORBIT – Educational Research Assistant
- * V-FINAL SCRIPT: Welcome Screen Fix & Forced PWA Button
- */
-
 document.addEventListener('DOMContentLoaded', () => {
     const $ = id => document.getElementById(id);
     const addEvt = (id, event, handler) => { if($(id)) $(id).addEventListener(event, handler); };
 
     let currentSid = null;
-    let sessions = {};
+    let sessions = JSON.parse(localStorage.getItem('orbit_sessions_v10')) || {};
+    if (typeof sessions !== 'object' || Array.isArray(sessions)) sessions = {};
+    
     let appSettings = null;
     let isBusy = false;
-    let pdfText = ""; 
-    let pdfFilename = "";
+    let pdfText = ""; let pdfFilename = "";
 
-    // Template HTML untuk Welcome Screen yang re-usable
-    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 = {};
-    }
-
-    // 2. PWA INSTALL LOGIC (DIPAKSA MUNCUL)
+    // PWA INSTALL LOGIC (Fixed line breaks alert)
     let deferredPrompt;
-    
-    // Paksa tombol muncul, KECUALI webnya udah di-install (jalan sbg aplikasi)
     if ($('btn-install-pwa') && !window.matchMedia('(display-mode: standalone)').matches) {
         $('btn-install-pwa').classList.remove('hidden');
     }
-
     window.addEventListener('beforeinstallprompt', (e) => {
         e.preventDefault();
         deferredPrompt = e;
@@ -51,25 +27,30 @@ document.addEventListener('DOMContentLoaded', () => {
             if(outcome === 'accepted' && $('btn-install-pwa')) $('btn-install-pwa').classList.add('hidden');
             deferredPrompt = null;
         } else {
-            // Fallback kalau Chrome memblokir pop-up PWA
-            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).");
+            // 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).");
         }
     });
 
-    // 3. BOOT & INIT
+    // BOOT & INIT
     async function init() {
         try {
-            const meRes = await fetch('/api/me');
-            if(meRes.status === 401) { window.location.href = '/login'; return; }
-            const user = await meRes.json();
-            
+            const me = await fetch('/api/me');
+            if(me.status === 401) { window.location.href = '/login'; return; }
+            const user = await me.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();
-        } catch(e) {
-            console.error("Init failed:", e);
+            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 = [];
+            }
         } finally {
             populateModelSelect();
             const ids = Object.keys(sessions).sort((a,b) => b-a);
@@ -77,165 +58,138 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     }
 
-    // 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);
-    }
+    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); }
     addEvt('btn-new-chat', 'click', newSession);
 
     function loadSession(id) {
-        if(!sessions[id]) return;
         currentSid = id;
-        const cm = $('chat-messages');
-        if(!cm) return;
-        
-        // Bersihkan area chat
+        const cm = $('chat-messages'); if(!cm) return;
         cm.innerHTML = '';
-        
         if(sessions[id].messages && sessions[id].messages.length) {
-            // Render ulang semua bubble chat
+            if($('welcome-msg')) $('welcome-msg').style.display = 'none';
             sessions[id].messages.forEach(m => renderBubble(m.role, m.displayContent || m.content));
         } else {
-            // Inject ulang Welcome Screen jika kosong (ANTI BLANK PUTIH)
-            cm.innerHTML = welcomeHTML;
+            if($('welcome-msg')) $('welcome-msg').style.display = 'flex';
         }
-        
-        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 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>`;
+            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>`;
         }).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] shadow-sm leading-relaxed">${content}</div>`;
+            wrap.innerHTML = `<div class="bg-accent text-white p-4 rounded-2xl rounded-tr-none max-w-[85%] text-[15px] leading-relaxed">${content}</div>`;
         } else {
-            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>`;
+            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>`;
         }
-        $('chat-messages').appendChild(wrap);
-        $('chat-messages').scrollTop = $('chat-messages').scrollHeight;
+        if($('chat-messages')) { $('chat-messages').appendChild(wrap); $('chat-messages').scrollTop = $('chat-messages').scrollHeight; }
     }
 
-    // 6. API INTERACTION (Send Chat)
     async function sendChat() {
         if(isBusy) return;
-        const inputEl = $('chat-textarea');
-        const raw = inputEl.value.trim();
+        const raw = $('chat-textarea').value.trim();
         if(!raw && !pdfText) return;
         
-        inputEl.value = '';
-        inputEl.style.height = 'auto';
-        if($('welcome-msg')) $('welcome-msg').remove();
+        $('chat-textarea').value = ''; $('chat-textarea').style.height = 'auto';
+        if($('welcome-msg')) $('welcome-msg').style.display = 'none';
         
-        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');
-        }
+        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'); }
 
-        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);
+        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);
         
         isBusy = true; $('btn-send').disabled = true;
         const loadId = 'load-' + Date.now();
-        $('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;
+        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; }
 
         try {
             const res = await fetch('/api/chat', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ 
-                    prompt: fullPrompt, 
-                    model: $('model-select').value, 
-                    messages: sessions[currentSid].messages.slice(0,-1) 
-                })
+                body: JSON.stringify({ prompt: full, 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';
-        });
+    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');
+        }
     }
 
-    // 7. MODALS LOGIC
     function populateModelSelect() {
         const ms = $('model-select'); if(!ms) return;
         ms.innerHTML = "";
-        let list = ["gemini-1.5-pro-latest", "gemini-1.5-flash-latest"]; 
-        
+        let list = [];
         if(appSettings) {
-            if(appSettings.provider === "OpenRouter") list = appSettings.models_openrouter || list;
-            else if(appSettings.provider === "Nvidia NIM") list = appSettings.models_nvidia || list;
+            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(); });
+            });
+        };
+        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');
         }
-        
-        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();
@@ -243,62 +197,76 @@ 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,
-            current_model: $('model-select').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
         };
         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'); }
     });
 
-    // 8. PDF UPLOAD
+    // 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);
+
     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...";
-            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');
-            }
+            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'); }
         });
     }
-    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-clear-chat-top', 'click', () => {
-        if(confirm("Hapus obrolan ini?")) {
-            sessions[currentSid].messages = [];
-            sessions[currentSid].title = "New Chat";
-            save(); loadSession(currentSid);
-        }
+    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-mobile', 'click', () => $('btn-clear-chat-top').click());
 
-    // 10. START
     init();
-    if ('serviceWorker' in navigator) {
-        window.addEventListener('load', () => navigator.serviceWorker.register('/sw.js', { scope: '/' }));
-    }
 });