Update static/js/script.js

static/js/script.js

@@ -1,435 +1,371 @@
-document.addEventListener('DOMContentLoaded', () => {
-    // Helper function anti-error
-    const $ = id => document.getElementById(id);
-    const addEvt = (id, event, handler) => {
-        const el = $(id);
-        if (el) el.addEventListener(event, handler);
-    };
-
-    let currentUser = null;
-    let appSettings = null;
-    let currentSid = null;
-    let pdfText = "";
-    let pdfFilename = "";
-    let isBusy = false;
-    let sessions = {};
-
-    // 1. Data Recovery (Hapus memori nyangkut)
-    try {
-        const stored = localStorage.getItem('orbit_sessions_v4');
-        sessions = stored ? JSON.parse(stored) : {};
-        if (Array.isArray(sessions)) sessions = {};
-    } catch(e) {
-        sessions = {};
-    }
-
-    // 2. Init App & Load User Data
-    async function initApp() {
-        try {
-            const userRes = await fetch('/api/me');
-            if (userRes.status === 401) { window.location.href = '/login'; return; }
-            if (!userRes.ok) throw new Error('Not logged in');
-            
-            currentUser = await userRes.json();
-            if($('user-name')) $('user-name').textContent = currentUser.name || currentUser.email;
-            if($('user-avatar') && currentUser.picture) $('user-avatar').src = currentUser.picture;
-
-            const setRes = await fetch('/api/settings');
-            if (setRes.ok) {
-                appSettings = await setRes.json();
-                populateModelSelect();
-            }
-        } catch (error) {
-            console.error("Init Error:", error);
-        } finally {
-            const ids = Object.keys(sessions).sort((a,b) => Number(b) - Number(a));
-            if (ids.length > 0) loadSession(ids[0]);
-            else newSession();
+/**
+ * ORBIT – Educational Research Assistant
+ * PWA + Safe Modal + Marked JS Rendering
+ */
+
+const $ = id => document.getElementById(id);
+const addEvt = (id, event, handler) => {
+    const el = $(id);
+    if(el) el.addEventListener(event, handler);
+};
+
+let currentUser = null;
+let appSettings = null;
+let sessions = {};
+let currentSid = null;
+let pdfText = null;
+let pdfFilename = null;
+let isBusy = false;
+
+// PWA: Tangkap prompt install dari browser
+let deferredPrompt;
+window.addEventListener('beforeinstallprompt', (e) => {
+    e.preventDefault();
+    deferredPrompt = e;
+    const btnInstall = $('btn-install-pwa');
+    if (btnInstall) btnInstall.classList.remove('hidden');
+});
+
+addEvt("btn-install-pwa", "click", async () => {
+    if (deferredPrompt) {
+        deferredPrompt.prompt();
+        const { outcome } = await deferredPrompt.userChoice;
+        if (outcome === 'accepted') {
+            $('btn-install-pwa').classList.add('hidden');
         }
+        deferredPrompt = null;
     }
+});
 
-    // 3. Multi-Session Logic
-    function saveSessions() {
-        try { localStorage.setItem('orbit_sessions_v4', JSON.stringify(sessions)); } catch(e) {}
-    }
+// Load Memori
+try {
+    const stored = localStorage.getItem('orbit_sessions_v5');
+    sessions = stored ? JSON.parse(stored) : {};
+    if (Array.isArray(sessions)) sessions = {};
+} catch(e) { 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;
-        if (!sessions[id].messages) sessions[id].messages = [];
-        
-        const cm = $('chat-messages');
-        const ws = $('welcome-screen');
-        if(cm) cm.innerHTML = '';
-        
-        if (sessions[id].messages.length > 0) {
-            if(ws) ws.style.display = 'none';
-            sessions[id].messages.forEach(m => renderBubble(m.role, m.displayContent || m.content, false));
-        } else {
-            if(ws) ws.style.display = 'flex';
-        }
+async function initApp() {
+    try {
+        const userRes = await fetch('/api/me');
+        if (userRes.status === 401) { window.location.href = '/login'; return; }
+        currentUser = await userRes.json();
         
-        if($('chat-title')) $('chat-title').textContent = sessions[id].title;
-        renderSidebar();
-        scrollBottom();
-    }
-
-    function renderSidebar() {
-        const list = $('history-list');
-        if(!list) return;
+        if($('user-name')) $('user-name').textContent = currentUser.name || currentUser.email;
+        if($('user-avatar') && currentUser.picture) $('user-avatar').src = currentUser.picture;
+
+        const setRes = await fetch('/api/settings');
+        if (setRes.ok) appSettings = await setRes.json();
+    } catch (error) {
+        console.error("Init Error", error);
+    } finally {
+        populateModelSelect();
         const ids = Object.keys(sessions).sort((a, b) => Number(b) - Number(a));
-        if(ids.length === 0) {
-            list.innerHTML = '<p class="text-xs text-gray-400 px-3 py-2 italic">No recent chats.</p>';
-            return;
-        }
-        let html = "";
-        ids.forEach(id => {
-            const isActive = (id === currentSid);
-            const cls = isActive ? 'bg-accent-light text-accent font-semibold' : 'text-gray-600 hover:bg-white hover:shadow-sm font-medium';
-            html += `<button class="session-btn w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm transition-all text-left truncate ${cls}" data-id="${id}">
-                <svg class="w-4 h-4 shrink-0 opacity-60" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg>
-                <span class="truncate">${sessions[id].title}</span>
-            </button>`;
-        });
-        list.innerHTML = html;
-        document.querySelectorAll('.session-btn').forEach(btn => {
-            btn.addEventListener('click', () => {
-                loadSession(btn.getAttribute('data-id'));
-                if(window.innerWidth < 768) toggleSidebar();
-            });
-        });
+        if (ids.length > 0) loadSession(ids[0]);
+        else newSession();
     }
-
-    function appendMessage(role, content, displayContent) {
-        if(!sessions[currentSid]) newSession();
-        if(!sessions[currentSid].messages) sessions[currentSid].messages = [];
-
-        sessions[currentSid].messages.push({ role, content, displayContent });
-        
-        const userMsgs = sessions[currentSid].messages.filter(m => m.role === "user");
-        if (role === "user" && userMsgs.length === 1) {
-            let snippet = String(displayContent).replace(/<[^>]*>?/gm, '');
-            snippet = snippet.split(" ").slice(0, 5).join(" ") + "…";
-            sessions[currentSid].title = snippet;
-            if($('chat-title')) $('chat-title').textContent = snippet;
-            renderSidebar();
-        }
-        saveSessions();
+}
+
+function saveSessions() {
+    try { localStorage.setItem('orbit_sessions_v5', JSON.stringify(sessions)); } catch(e) {}
+}
+
+function newSession() {
+    const id = Date.now().toString();
+    sessions[id] = { title: "New Chat", messages: [] };
+    loadSession(id);
+}
+
+function loadSession(id) {
+    if (!sessions[id]) return;
+    currentSid = id;
+    if (!sessions[currentSid].messages) sessions[currentSid].messages = [];
+
+    const cm = $("chat-messages");
+    if(cm) cm.innerHTML = '';
+    
+    const msgs = sessions[id].messages;
+    if (msgs.length > 0) {
+        if($("welcome-msg")) $("welcome-msg").style.display = 'none';
+        msgs.forEach(m => renderBubble(m.role, m.displayContent || m.content, false));
+        scrollBottom();
+    } else {
+        if($("welcome-msg")) $("welcome-msg").style.display = 'flex';
     }
-
-    // 4. Chat UI
-    function scrollBottom() {
-        const cm = $('chat-messages');
-        if(cm) cm.scrollTop = cm.scrollHeight;
+    renderSidebar();
+}
+
+function renderSidebar() {
+    const list = $('history-list');
+    if(!list) return;
+    const ids = Object.keys(sessions).sort((a, b) => Number(b) - Number(a));
+    if(ids.length === 0) {
+        list.innerHTML = '<p class="text-xs text-gray-400 px-3 py-2 italic">No recent chats.</p>';
+        return;
     }
-
-    function renderBubble(role, content, animate = true) {
-        const isUser = (role === "user");
-        const wrap = document.createElement("div");
-        wrap.className = `flex mb-6 ${isUser ? "justify-end" : "justify-start"} ${animate ? "bubble-"+role : ""}`;
-
-        if (isUser) {
-            wrap.innerHTML = `<div class="bg-accent text-white p-4 rounded-2xl rounded-tr-none max-w-[85%] shadow-sm text-[15px] leading-relaxed">${content}</div>`;
-        } else {
-            let parsed = content;
-            try { parsed = (typeof marked !== 'undefined') ? marked.parse(content) : content.replace(/\n/g,'<br>'); } catch(e) { parsed = 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 mt-1 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">${parsed}</div></div>`;
-        }
-
-        if($('chat-messages')) $('chat-messages').appendChild(wrap);
-        if(animate) scrollBottom();
+    list.innerHTML = ids.map(id => {
+        const isActive = (id === currentSid);
+        const cls = isActive ? 'bg-accent-light text-accent font-semibold' : 'text-gray-600 hover:bg-white hover:shadow-sm font-medium';
+        return `<button onclick="window.loadSession('${id}')" class="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm transition-all text-left truncate ${cls}"><svg class="w-4 h-4 shrink-0 opacity-60" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg><span class="truncate">${sessions[id].title}</span></button>`;
+    }).join('');
+}
+
+window.loadSession = function(id) {
+    loadSession(id);
+    if(window.innerWidth < 768) toggleSidebar();
+};
+
+function appendMessage(role, content, displayContent) {
+    if(!sessions[currentSid]) newSession();
+    if(!sessions[currentSid].messages) sessions[currentSid].messages = [];
+
+    sessions[currentSid].messages.push({ role, content, displayContent });
+    
+    if (role === "user" && sessions[currentSid].messages.filter(m => m.role === "user").length === 1) {
+        let snippet = String(displayContent).replace(/<[^>]*>?/gm, '');
+        sessions[currentSid].title = snippet.split(" ").slice(0, 5).join(" ") + "…";
+        renderSidebar();
     }
-
-    // 5. Send API Logics
-    function setBusy(busy) {
-        isBusy = busy;
-        if($('btn-send')) $('btn-send').disabled = busy;
-        if($('chat-textarea')) $('chat-textarea').disabled = busy;
-        if($('send-icon')) $('send-icon').classList.toggle("hidden", busy);
-        if($('loading-icon')) $('loading-icon').classList.toggle("hidden", !busy);
+    saveSessions();
+}
+
+function scrollBottom() {
+    const cm = $("chat-messages");
+    if(cm) cm.scrollTop = cm.scrollHeight;
+}
+
+function renderBubble(role, content, animate = true) {
+    const isUser = (role === "user");
+    const wrap = document.createElement("div");
+    wrap.className = `flex mb-6 ${isUser ? "justify-end" : "justify-start"} ${animate ? "bubble-"+role : ""}`;
+
+    if (isUser) {
+        wrap.innerHTML = `<div class="bg-accent text-white p-4 rounded-2xl rounded-tr-none max-w-[85%] shadow-sm text-[15px] leading-relaxed">${content}</div>`;
+    } else {
+        let parsedText = content;
+        try { parsedText = (typeof marked !== 'undefined') ? marked.parse(content) : content.replace(/\n/g, "<br>"); } catch (e) { parsedText = 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 mt-1 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">${parsedText}</div></div>`;
     }
 
-    async function sendChat() {
-        if (isBusy) return;
-        const raw = $('chat-textarea') ? $('chat-textarea').value.trim() : "";
-        if (!raw && !pdfText) return;
-
-        let fullPrompt = raw;
-        let safeRaw = raw.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-        let displayPrompt = safeRaw.replace(/\n/g, '<br>');
-
-        if (pdfText) {
-            fullPrompt = `[Attached Document: ${pdfFilename}]\n${pdfText}\n\nUser Question: ${raw}`;
-            displayPrompt = `<div class="bg-blue-500 text-white text-xs px-2.5 py-1.5 rounded w-fit mb-2 font-bold inline-block">📄 ${pdfFilename}</div><br>${safeRaw.replace(/\n/g, '<br>')}`;
-            clearAttachment();
-        }
+    if($("chat-messages")) $("chat-messages").appendChild(wrap);
+    if(animate) scrollBottom();
+}
+
+function setBusy(busy) {
+    isBusy = busy;
+    if($('btn-send')) $('btn-send').disabled = busy;
+    if($('chat-textarea')) $('chat-textarea').disabled = busy;
+    if($('send-icon')) $('send-icon').classList.toggle("hidden", busy);
+    if($('loading-icon')) $('loading-icon').classList.toggle("hidden", !busy);
+}
+
+async function sendChat() {
+    if (isBusy) return;
+    const inputEl = $("chat-textarea");
+    const raw = inputEl ? inputEl.value.trim() : "";
+    if (!raw && !pdfText) return;
+
+    let fullPrompt = raw;
+    let safeRaw = raw.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+    let displayPrompt = safeRaw.replace(/\n/g, '<br>');
+
+    if (pdfText) {
+        fullPrompt = `[Attached Document: ${pdfFilename}]\n${pdfText}\n\nUser Question: ${raw}`;
+        displayPrompt = `<div class="bg-blue-500 text-white text-xs px-2.5 py-1.5 rounded w-fit mb-2 font-bold inline-block">📄 ${pdfFilename}</div><br>${safeRaw.replace(/\n/g, '<br>')}`;
+        clearAttachment();
+    }
 
-        if($('chat-textarea')) { $('chat-textarea').value = ""; $('chat-textarea').style.height = "auto"; }
-        if($("welcome-screen")) $("welcome-screen").style.display = 'none';
-        
-        setBusy(true);
-        renderBubble("user", displayPrompt);
-        appendMessage("user", fullPrompt, displayPrompt);
-
-        const loadId = 'load-' + Date.now();
-        if($('chat-messages')) {
-            $('chat-messages').insertAdjacentHTML('beforeend', `<div id="${loadId}" class="flex mb-6 gap-4 items-start"><img src="/static/icon.png" class="w-8 h-8 rounded-full border border-slate-200 mt-1 shadow-sm shrink-0"><div class="bg-[#f8f9fa] border border-slate-200 p-4 rounded-2xl rounded-tl-none text-gray-500 flex items-center gap-2"><svg class="w-4 h-4 animate-spin text-accent" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path></svg> Analyzing...</div></div>`);
-            scrollBottom();
-        }
+    if(inputEl) { inputEl.value = ""; inputEl.style.height = "auto"; }
+    if($("welcome-msg")) $("welcome-msg").style.display = 'none';
+    
+    if (!currentSid || !sessions[currentSid]) newSession();
 
-        try {
-            const currentModel = $('model-select') ? $('model-select').value : (appSettings?.current_model || "");
-            const msgsToSend = sessions[currentSid].messages.slice(0, -1);
-            
-            const payload = { prompt: fullPrompt, model: currentModel, messages: msgsToSend };
-            const res = await fetch("/api/chat", {
-                method: "POST",
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify(payload),
-            });
-            const data = await res.json();
-            
-            if($(loadId)) $(loadId).remove();
-
-            if (!res.ok || data.error) {
-                renderBubble("assistant", `<strong>Error:</strong> ${data.error || "Gagal menghubungi server"}`);
-            } else {
-                renderBubble("assistant", data.reply);
-                appendMessage("assistant", data.reply, data.reply);
-            }
-        } catch (err) {
-            if($(loadId)) $(loadId).remove();
-            renderBubble("assistant", `<strong>System Error:</strong> ${err.message}`);
-        } finally {
-            setBusy(false);
-            if($('chat-textarea')) $('chat-textarea').focus();
-        }
-    }
+    setBusy(true);
+    renderBubble("user", displayPrompt);
+    appendMessage("user", fullPrompt, displayPrompt);
 
-    addEvt("btn-send", "click", sendChat);
-    if($('chat-textarea')) {
-        $('chat-textarea').addEventListener("input", function() {
-            this.style.height = "auto";
-            this.style.height = Math.min(this.scrollHeight, 160) + "px";
-        });
-        $('chat-textarea').addEventListener("keydown", e => {
-            if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); sendChat(); }
-        });
+    const loadId = 'load-' + Date.now();
+    if($("chat-messages")) {
+        $("chat-messages").insertAdjacentHTML('beforeend', `<div id="${loadId}" class="flex mb-6 gap-4 items-start"><img src="/static/icon.png" class="w-8 h-8 rounded-full border border-slate-200 mt-1 shadow-sm shrink-0"><div class="bg-[#f8f9fa] border border-slate-200 p-4 rounded-2xl rounded-tl-none text-gray-500 flex items-center gap-2"><svg class="w-4 h-4 animate-spin text-accent" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path></svg> Analyzing...</div></div>`);
+        scrollBottom();
     }
 
-    // ─────────────────────────────────────
-    // 6. Settings Modal Logic
-    // ─────────────────────────────────────
-    function populateModelSelect() {
-        const ms = $("model-select");
-        if(!ms) return;
-        ms.innerHTML = "";
-        let list = appSettings ? (appSettings.provider === "Nvidia NIM" ? appSettings.models_nvidia : (appSettings.provider === "OpenRouter" ? appSettings.models_openrouter : ["gemini-1.5-pro-latest", "gemini-1.5-flash-latest"])) : [];
-        if(!list || list.length===0) list = ["default-model"];
+    try {
+        const currentModel = $("model-select") ? $("model-select").value : (appSettings ? appSettings.current_model : "");
+        const msgsToSend = (sessions[currentSid] && sessions[currentSid].messages) ? sessions[currentSid].messages.slice(0, -1) : [];
         
-        list.forEach(m => {
-            const opt = document.createElement("option");
-            opt.value = m; opt.textContent = m.length > 30 ? m.slice(0,28)+"…" : m;
-            if(appSettings && m === appSettings.current_model) opt.selected = true;
-            ms.appendChild(opt);
+        const res = await fetch("/api/chat", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ prompt: fullPrompt, model: currentModel, messages: msgsToSend }),
         });
-    }
+        const data = await res.json();
+        if($(loadId)) $(loadId).remove();
 
-    function renderModelListSetting(containerId, models, provider) {
-        const list = $(containerId);
-        if(!list) return;
-        list.innerHTML = (models || []).map((m, i) => `
-            <div class="flex items-center justify-between px-2 py-1.5 rounded-lg hover:bg-white group transition-colors">
-                <span class="text-xs text-gray-700 truncate flex-1">${m}</span>
-                <button data-i="${i}" data-prov="${provider}" class="btn-del-model text-gray-300 hover:text-red-400 ml-2 text-xs font-bold transition-opacity">✕</button>
-            </div>
-        `).join('');
-        
-        list.querySelectorAll(".btn-del-model").forEach(btn => {
-            btn.addEventListener("click", () => {
-                const idx = Number(btn.dataset.i);
-                if (btn.dataset.prov === "OpenRouter") {
-                    appSettings.models_openrouter.splice(idx, 1);
-                    renderModelListSetting("models-list-openrouter", appSettings.models_openrouter, "OpenRouter");
-                } else {
-                    appSettings.models_nvidia.splice(idx, 1);
-                    renderModelListSetting("models-list-nvidia", appSettings.models_nvidia, "Nvidia NIM");
-                }
-            });
-        });
+        if (!res.ok || data.error) {
+            renderBubble("assistant", `<strong>Error:</strong> ${data.error || "Unknown error"}`);
+        } else {
+            renderBubble("assistant", data.reply);
+            appendMessage("assistant", data.reply, data.reply);
+        }
+    } catch (err) {
+        if($(loadId)) $(loadId).remove();
+        renderBubble("assistant", `<strong>Network error:</strong> ${err.message}`);
+    } finally {
+        setBusy(false);
+        if($("chat-textarea")) $("chat-textarea").focus();
     }
+}
 
-    addEvt("btn-settings", "click", () => {
-        if (appSettings) {
-            if($("settings-provider")) $("settings-provider").value = appSettings.provider;
-            if($("settings-url")) $("settings-url").value = appSettings.base_url || "";
-            if($("settings-apikey")) $("settings-apikey").value = appSettings.api_key || "";
-            renderModelListSetting("models-list-openrouter", appSettings.models_openrouter, "OpenRouter");
-            renderModelListSetting("models-list-nvidia", appSettings.models_nvidia, "Nvidia NIM");
-        }
-        if($('settings-modal')) $('settings-modal').classList.remove('hidden');
-        if(window.innerWidth < 768) toggleSidebar();
+addEvt("btn-send", "click", sendChat);
+if($("chat-textarea")) {
+    $("chat-textarea").addEventListener("input", function() {
+        this.style.height = "auto";
+        this.style.height = Math.min(this.scrollHeight, 160) + "px";
     });
-
-    const closeSettings = () => { if($('settings-modal')) $('settings-modal').classList.add('hidden'); };
-    addEvt("btn-close-settings", "click", closeSettings);
-    addEvt("btn-cancel-settings", "click", closeSettings);
-
-    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/"
-        };
-        if (urls[prov] && $("settings-url")) $("settings-url").value = urls[prov];
+    $("chat-textarea").addEventListener("keydown", function(e) {
+        if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); sendChat(); }
     });
-
-    addEvt("btn-toggle-key", "click", () => {
-        const inp = $("settings-apikey");
-        if(inp) inp.type = inp.type === "password" ? "text" : "password";
+}
+
+// ─────────────────────────────────────
+// Helper Modals
+// ─────────────────────────────────────
+function populateModelSelect() {
+    const ms = $("model-select");
+    if(!ms) return;
+    ms.innerHTML = "";
+    let list = appSettings ? (appSettings.provider === "Nvidia NIM" ? appSettings.models_nvidia : (appSettings.provider === "OpenRouter" ? appSettings.models_openrouter : ["gemini-1.5-pro-latest", "gemini-1.5-flash-latest"])) : ["Default Model"];
+    list.forEach(m => {
+        const opt = document.createElement("option");
+        opt.value = m; opt.textContent = m.length > 30 ? m.slice(0, 28) + "…" : m;
+        if (appSettings && m === appSettings.current_model) opt.selected = true;
+        ms.appendChild(opt);
     });
-
-    const attachModelBtn = (inputId, listKey, containerId, prov, btnId) => {
-        const doAdd = () => {
-            const val = $(inputId)?.value.trim();
-            if (!val || !appSettings) return;
-            if (!appSettings[listKey].includes(val)) {
-                appSettings[listKey].push(val);
-                $(inputId).value = "";
-                renderModelListSetting(containerId, appSettings[listKey], prov);
-            }
-        };
-        addEvt(btnId, "click", doAdd);
-        if($(inputId)) $(inputId).addEventListener("keydown", e => { if (e.key === "Enter") doAdd(); });
+    if (ms.options.length && !ms.value) ms.selectedIndex = 0;
+}
+
+addEvt("btn-open-settings", "click", () => {
+    if (appSettings) {
+        if($("settings-provider")) $("settings-provider").value = appSettings.provider;
+        if($("settings-url")) $("settings-url").value = appSettings.base_url || "";
+        if($("settings-apikey")) $("settings-apikey").value = appSettings.api_key || "";
+    }
+    if($("settings-modal")) $("settings-modal").classList.remove("hidden");
+    if(window.innerWidth < 768) toggleSidebar();
+});
+addEvt("btn-close-settings", "click", () => { if($("settings-modal")) $("settings-modal").classList.add("hidden"); });
+addEvt("btn-cancel-settings", "click", () => { if($("settings-modal")) $("settings-modal").classList.add("hidden"); });
+
+addEvt("btn-save-settings", "click", async () => {
+    const payload = {
+        provider: $("settings-provider")?.value,
+        base_url: $("settings-url")?.value.trim(),
+        api_key: $("settings-apikey")?.value.trim(),
+        models_openrouter: appSettings?.models_openrouter || [],
+        models_nvidia: appSettings?.models_nvidia || [],
     };
-    attachModelBtn("new-model-or", "models_openrouter", "models-list-openrouter", "OpenRouter", "btn-add-model-or");
-    attachModelBtn("new-model-nv", "models_nvidia", "models-list-nvidia", "Nvidia NIM", "btn-add-model-nv");
-
-    addEvt("btn-save-settings", "click", async () => {
-        const payload = {
-            provider: $("settings-provider")?.value,
-            base_url: $("settings-url")?.value.trim(),
-            api_key: $("settings-apikey")?.value.trim(),
-            models_openrouter: appSettings.models_openrouter,
-            models_nvidia: appSettings.models_nvidia,
-        };
-        try {
-            const res = await fetch("/api/settings", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(payload) });
-            appSettings = await res.json();
-            populateModelSelect();
-            closeSettings();
-        } catch (err) {
-            console.error("Save error", err);
-        }
-    });
-
-    // ─────────────────────────────────────
-    // 7. DOI Modal
-    // ─────────────────────────────────────
-    addEvt("btn-doi", "click", () => {
-        if($('doi-modal')) $('doi-modal').classList.remove('hidden');
-        if($('doi-input')) { $('doi-input').value = ""; $('doi-input').focus(); }
-        if($('doi-result')) $('doi-result').classList.add('hidden');
-        if(window.innerWidth < 768) toggleSidebar();
-    });
-    addEvt("btn-close-doi", "click", () => { if($('doi-modal')) $('doi-modal').classList.add('hidden'); });
-
-    addEvt("btn-validate-doi", "click", async () => {
-        const doi = $("doi-input")?.value.trim();
-        const resDiv = $("doi-result");
-        if (!doi || !resDiv) return;
-        
-        if($("doi-spinner")) $("doi-spinner").classList.remove("hidden");
-        if($("doi-btn-text")) $("doi-btn-text").textContent = "Validating...";
-        if($("btn-validate-doi")) $("btn-validate-doi").disabled = true;
-        
-        resDiv.classList.remove("hidden");
-        resDiv.innerHTML = `<div class="flex items-center gap-2 text-blue-600">Sedang memvalidasi...</div>`;
+    try {
+        const res = await fetch("/api/settings", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(payload) });
+        appSettings = await res.json();
+        populateModelSelect();
+        if($("settings-modal")) $("settings-modal").classList.add("hidden");
+    } catch (err) { console.error("Save error", err); }
+});
+
+addEvt("btn-open-doi", "click", () => {
+    if($("doi-modal")) $("doi-modal").classList.remove("hidden");
+    if($("doi-input")) { $("doi-input").value = ""; $("doi-input").focus(); }
+    if($("doi-result")) $("doi-result").classList.add("hidden");
+    if(window.innerWidth < 768) toggleSidebar();
+});
+addEvt("btn-close-doi", "click", () => { if($("doi-modal")) $("doi-modal").classList.add("hidden"); });
+if($("doi-input")) { $("doi-input").addEventListener("keydown", e => { if (e.key === "Enter" && $("btn-validate-doi-submit")) $("btn-validate-doi-submit").click(); }); }
+
+addEvt("btn-validate-doi-submit", "click", async () => {
+    const doi = $("doi-input")?.value.trim();
+    const resDiv = $("doi-result");
+    if (!doi || !resDiv) return;
+    
+    if($("doi-spinner")) $("doi-spinner").classList.remove("hidden");
+    if($("btn-validate-doi-submit")) $("btn-validate-doi-submit").disabled = true;
+    resDiv.classList.remove("hidden");
+    resDiv.innerHTML = `<div class="flex items-center gap-2 text-blue-600">Validating...</div>`;
 
+    try {
+        const res = await fetch("/api/validate_doi", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ doi: doi }) });
+        const data = await res.json();
+        if (!res.ok || data.error) resDiv.innerHTML = `<p class="text-red-500 font-medium">Error: ${data.error}</p>`;
+        else resDiv.innerHTML = `<div><p class="text-[10px] font-semibold text-gray-400 uppercase">Title</p><p class="font-medium text-gray-800 text-sm">${data.title}</p></div>`;
+    } catch (err) { resDiv.innerHTML = `<p class="text-red-500">${err.message}</p>`; }
+    finally {
+        if($("doi-spinner")) $("doi-spinner").classList.add("hidden");
+        if($("btn-validate-doi-submit")) $("btn-validate-doi-submit").disabled = false;
+    }
+});
+
+// UI Toggles & Upload
+function toggleSidebar() {
+    if (window.innerWidth < 768) {
+        if($("sidebar")) $("sidebar").classList.toggle("-translate-x-full");
+        if($("sidebar-overlay")) $("sidebar-overlay").classList.toggle("hidden");
+    } else {
+        if($("sidebar")) $("sidebar").classList.toggle("hidden");
+    }
+}
+addEvt("btn-hamburger", "click", toggleSidebar);
+addEvt("btn-toggle-sidebar", "click", toggleSidebar);
+addEvt("btn-close-sidebar", "click", toggleSidebar);
+addEvt("sidebar-overlay", "click", toggleSidebar);
+
+function handleClear() {
+    if (!currentSid) return;
+    sessions[currentSid].messages = [];
+    sessions[currentSid].title = "New Chat";
+    saveSessions();
+    if($("chat-messages")) $("chat-messages").innerHTML = "";
+    if($("welcome-screen")) $("welcome-screen").style.display = "flex";
+    renderSidebar();
+}
+addEvt("btn-new-chat", "click", newSession);
+addEvt("btn-clear-chat-top", "click", handleClear);
+addEvt("btn-clear-chat-mobile", "click", handleClear);
+
+function clearAttachment() {
+    pdfText = null; pdfFilename = null;
+    if($("pdf-input")) $("pdf-input").value = "";
+    if($("attach-badge")) $("attach-badge").classList.add("hidden");
+}
+addEvt("btn-remove-attach", "click", clearAttachment);
+addEvt("btn-attach", "click", () => { if($("pdf-input")) $("pdf-input").click(); });
+
+if($("pdf-input")) {
+    $("pdf-input").addEventListener("change", async e => {
+        const file = e.target.files[0];
+        if (!file) return;
+        e.target.value = "";
+        const fd = new FormData();
+        fd.append("file", file);
+        if($("attach-name")) $("attach-name").textContent = "Extracting text...";
+        if($("attach-badge")) $("attach-badge").classList.remove("hidden");
         try {
-            const res = await fetch("/api/validate_doi", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ doi: doi }) });
+            const res = await fetch("/api/upload_pdf", { method: "POST", body: fd });
             const data = await res.json();
-            if (!res.ok || data.error) {
-                resDiv.innerHTML = `<p class="text-red-500 font-medium">Error: ${data.error || "Gagal validasi"}</p>`;
-            } else {
-                resDiv.innerHTML = `<div class="space-y-2"><div><p class="text-[10px] font-semibold text-gray-400 uppercase">Title</p><p class="font-medium text-gray-800 text-sm">${data.title}</p></div><div><p class="text-[10px] font-semibold text-gray-400 uppercase">Authors</p><p class="text-sm text-gray-700">${data.authors}</p></div><div class="flex gap-6"><div><p class="text-[10px] font-semibold text-gray-400 uppercase">Year</p><p class="text-sm text-gray-700">${data.year}</p></div><div><p class="text-[10px] font-semibold text-gray-400 uppercase">Type</p><p class="text-sm text-gray-700">${data.type}</p></div></div><div><p class="text-[10px] font-semibold text-gray-400 uppercase">Source</p><p class="text-sm text-gray-700">${data.journal}</p></div></div>`;
-            }
+            if (!res.ok || data.error) throw new Error(data.error);
+            pdfText = data.text;
+            pdfFilename = data.filename;
+            if($("attach-name")) $("attach-name").textContent = `${data.filename} · ${data.word_count} words`;
         } catch (err) {
-            resDiv.innerHTML = `<p class="text-red-500">${err.message}</p>`;
-        } finally {
-            if($("doi-spinner")) $("doi-spinner").classList.add("hidden");
-            if($("doi-btn-text")) $("doi-btn-text").textContent = "Validate";
-            if($("btn-validate-doi")) $("btn-validate-doi").disabled = false;
+            alert(`Upload failed: ${err.message}`);
+            clearAttachment();
         }
     });
+}
 
-    // ─────────────────────────────────────
-    // 8. Sidebar & PDF logic
-    // ─────────────────────────────────────
-    function toggleSidebar() {
-        if (window.innerWidth < 768) {
-            if($('sidebar')) $('sidebar').classList.toggle("-translate-x-full");
-            if($('sidebar-overlay')) $('sidebar-overlay').classList.toggle("hidden");
-        } else {
-            if($('sidebar')) $('sidebar').classList.toggle("hidden");
-        }
-    }
-    addEvt("btn-hamburger", "click", toggleSidebar);
-    addEvt("btn-toggle-sidebar", "click", toggleSidebar);
-    addEvt("sidebar-overlay", "click", toggleSidebar);
-
-    function handleClear() {
-        if (!currentSid) return;
-        sessions[currentSid].messages = [];
-        sessions[currentSid].title = "New Chat";
-        saveSessions();
-        if($('chat-messages')) $('chat-messages').innerHTML = "";
-        if($('welcome-screen')) $('welcome-screen').style.display = "flex";
-        if($('chat-title')) $('chat-title').textContent = "New Chat";
-        renderSidebar();
-    }
-    addEvt("btn-clear-chat", "click", handleClear);
-    addEvt("btn-clear-chat-mobile", "click", handleClear);
-
-    function clearAttachment() {
-        pdfText = null; pdfFilename = null;
-        if($("pdf-input")) $("pdf-input").value = "";
-        if($("attach-badge")) $("attach-badge").classList.add("hidden");
-    }
-    addEvt("btn-remove-attach", "click", clearAttachment);
-    addEvt("btn-attach", "click", () => { if($("pdf-input")) $("pdf-input").click(); });
-
-    if($("pdf-input")) {
-        $("pdf-input").addEventListener("change", async e => {
-            const file = e.target.files[0];
-            if (!file) return;
-            e.target.value = "";
-            const fd = new FormData();
-            fd.append("file", file);
-            if($("attach-name")) $("attach-name").textContent = "Extracting text...";
-            if($("attach-badge")) $("attach-badge").classList.remove("hidden");
-            try {
-                const res = await fetch("/api/upload_pdf", { method: "POST", body: fd });
-                const data = await res.json();
-                if (!res.ok || data.error) throw new Error(data.error);
-                pdfText = data.text;
-                pdfFilename = data.filename;
-                if($("attach-name")) $("attach-name").textContent = `${data.filename} · ${data.word_count} words`;
-            } catch (err) {
-                alert(`Upload failed: ${err.message}`);
-                clearAttachment();
-            }
-        });
-    }
+// Start
+initApp();
 
-    // Eksekusi jalan pertama
-    initApp();
-});
+if ('serviceWorker' in navigator) {
+  window.addEventListener('load', () => {
+    navigator.serviceWorker.register('/sw.js', { scope: '/' }).catch(e => console.error(e));
+  });
+}