Update static/js/script.js

static/js/script.js

@@ -1,542 +1,435 @@
-/**
- * ORBIT – Educational Research Assistant
- * V3 SCRIPT: Maximum Compatibility & Anti-Crash
- */
-
-// ─────────────────────────────────────
-// 1. DOM Helper (Anti-Error)
-// ─────────────────────────────────────
-const $ = function(id) { return document.getElementById(id); };
-const addEvt = function(id, event, handler) {
-    const el = $(id);
-    if(el) el.addEventListener(event, handler);
-};
-
-// ─────────────────────────────────────
-// 2. State & Data 
-// ─────────────────────────────────────
-let currentUser = null;
-let appSettings = null;
-let sessions = {};
-let currentSid = null;
-let pdfText = null;
-let pdfFilename = null;
-let isBusy = false;
-
-// Coba load dari localStorage dengan aman
-try {
-    const stored = localStorage.getItem('orbit_sessions_v3');
-    sessions = stored ? JSON.parse(stored) : {};
-    if (Array.isArray(sessions)) sessions = {};
-} catch(e) {
-    sessions = {};
-}
-
-// ─────────────────────────────────────
-// 3. Boot & Init
-// ─────────────────────────────────────
-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('Gagal load user');
-        
-        currentUser = await userRes.json();
-        
-        if($('user-name')) $('user-name').textContent = currentUser.name || currentUser.email;
-        if($('user-avatar') && currentUser.picture) $('user-avatar').src = currentUser.picture;
+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);
+    };
 
-        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(function(a, b) { return Number(b) - Number(a); });
-        if (ids.length > 0) {
-            loadSession(ids[0]);
-        } else {
-            newSession();
-        }
-    }
-}
+    let currentUser = null;
+    let appSettings = null;
+    let currentSid = null;
+    let pdfText = "";
+    let pdfFilename = "";
+    let isBusy = false;
+    let sessions = {};
 
-// ─────────────────────────────────────
-// 4. Session & History Logic
-// ─────────────────────────────────────
-function saveSessions() {
+    // 1. Data Recovery (Hapus memori nyangkut)
     try {
-        localStorage.setItem('orbit_sessions_v3', JSON.stringify(sessions));
+        const stored = localStorage.getItem('orbit_sessions_v4');
+        sessions = stored ? JSON.parse(stored) : {};
+        if (Array.isArray(sessions)) sessions = {};
     } catch(e) {
-        console.error("Gagal save session", e);
+        sessions = {};
     }
-}
-
-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 = [];
+
+    // 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();
+        }
     }
 
-    const cm = $("chat-messages");
-    if(cm) cm.innerHTML = '';
-    
-    const msgs = sessions[id].messages;
-    if (msgs.length > 0) {
-        if($("welcome-msg")) $("welcome-msg").remove();
-        msgs.forEach(function(m) { 
-            renderBubble(m.role, m.displayContent || m.content, false); 
-        });
-        scrollBottom();
-    } else {
-        if(cm) cm.innerHTML = '<div id="welcome-msg" class="flex flex-col items-center justify-center h-full text-center px-4 py-10"><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">Your AI-powered Educational Research Assistant. Upload a document or type a prompt below to begin.</p></div>';
+    // 3. Multi-Session Logic
+    function saveSessions() {
+        try { localStorage.setItem('orbit_sessions_v4', JSON.stringify(sessions)); } catch(e) {}
     }
-    
-    renderSidebar();
-}
-
-function renderSidebar() {
-    const list = $('history-list');
-    if(!list) return;
-    
-    const ids = Object.keys(sessions).sort(function(a, b) { return 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 newSession() {
+        const id = Date.now().toString();
+        sessions[id] = { title: "New Chat", messages: [] };
+        loadSession(id);
     }
+    addEvt("btn-new-chat", "click", newSession);
 
-    let htmlStr = "";
-    ids.forEach(function(id) {
-        const isActive = (id === currentSid);
-        const activeClass = isActive ? 'bg-accent-light text-accent font-semibold' : 'text-gray-600 hover:bg-white hover:shadow-sm font-medium';
-        const title = sessions[id].title || "New Chat";
-        htmlStr += '<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 ' + activeClass + '"><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">' + title + '</span></button>';
-    });
-    list.innerHTML = htmlStr;
-}
-
-function appendMessage(role, content, displayContent) {
-    if(!sessions[currentSid]) newSession();
-    if(!sessions[currentSid].messages) sessions[currentSid].messages = [];
-
-    sessions[currentSid].messages.push({ role: role, content: content, displayContent: displayContent });
-    
-    // Auto title
-    const userMsgs = sessions[currentSid].messages.filter(function(m) { return 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;
+    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';
+        }
+        
+        if($('chat-title')) $('chat-title').textContent = sessions[id].title;
         renderSidebar();
+        scrollBottom();
     }
-    saveSessions();
-}
-
-window.loadSession = function(id) {
-    loadSession(id);
-    if(window.innerWidth < 768) toggleSidebar();
-};
-
-// ─────────────────────────────────────
-// 5. Chat UI & Render
-// ─────────────────────────────────────
-function scrollBottom() {
-    const cm = $("chat-messages");
-    if(cm) cm.scrollTop = cm.scrollHeight;
-}
-
-function simpleMarkdown(text) {
-    let h = String(text || "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-    h = h.replace(/```(\w*)\n?([\s\S]*?)```/g, function(_, lang, c) { return '<pre><code>' + c.trim() + '</code></pre>'; });
-    h = h.replace(/`([^`\n]+)`/g, "<code>$1</code>");
-    h = h.replace(/\*\*\*(.+?)\*\*\*/g, "<strong><em>$1</em></strong>");
-    h = h.replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>");
-    h = h.replace(/\*(.+?)\*/g, "<em>$1</em>");
-    h = h.replace(/^### (.+)$/gm, "<h3>$1</h3>");
-    h = h.replace(/^## (.+)$/gm,  "<h2>$1</h2>");
-    h = h.replace(/^# (.+)$/gm,   "<h1>$1</h1>");
-    h = h.replace(/^\s*[-*] (.+)/gm, "<li>$1</li>");
-    h = h.split(/\n{2,}/).map(function(p) { return /^<(h[1-3]|ul|li|pre|blockquote)/.test(p.trim()) ? p : '<p>' + p.replace(/\n/g, "<br>") + '</p>'; }).join("\n");
-    return h;
-}
-
-function renderBubble(role, content, animate) {
-    if (animate === undefined) 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) : simpleMarkdown(content);
-        } catch (e) {
-            parsedText = simpleMarkdown(content);
+
+    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;
         }
-        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>';
+        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();
+            });
+        });
     }
 
-    const cm = $("chat-messages");
-    if(cm) cm.appendChild(wrap);
-    if(animate) scrollBottom();
-}
-
-function renderSys(text, isErr) {
-    const wrap = document.createElement("div");
-    wrap.className = "flex justify-center mb-4";
-    const bgClass = isErr ? "bg-red-50 text-red-500" : "bg-gray-100 text-gray-500";
-    wrap.innerHTML = '<span class="text-[11px] px-3 py-1.5 rounded-full ' + bgClass + '">' + text + '</span>';
-    const cm = $("chat-messages");
-    if(cm) cm.appendChild(wrap);
-    scrollBottom();
-}
-
-// ─────────────────────────────────────
-// 6. Send Chat & API
-// ─────────────────────────────────────
-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();
+    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();
     }
 
-    if(inputEl) { inputEl.value = ""; inputEl.style.height = "auto"; }
-    if($("welcome-msg")) $("welcome-msg").remove();
-    
-    if (!currentSid || !sessions[currentSid] || !sessions[currentSid].messages) {
-        newSession();
+    // 4. Chat UI
+    function scrollBottom() {
+        const cm = $('chat-messages');
+        if(cm) cm.scrollTop = cm.scrollHeight;
     }
 
-    setBusy(true);
-    renderBubble("user", displayPrompt);
-    appendMessage("user", fullPrompt, displayPrompt);
+    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 : ""}`;
 
-    const loadId = 'load-' + Date.now();
-    const cm = $("chat-messages");
-    if(cm) {
-        cm.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 (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();
     }
 
-    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) : [];
+    // 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);
+    }
+
+    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-textarea')) { $('chat-textarea').value = ""; $('chat-textarea').style.height = "auto"; }
+        if($("welcome-screen")) $("welcome-screen").style.display = 'none';
         
-        const payload = {
-            prompt: fullPrompt,
-            model: currentModel,
-            messages: msgsToSend
-        };
+        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();
+        }
+
+        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();
+        }
+    }
 
-        const res = await fetch("/api/chat", {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify(payload),
+    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 data = await res.json();
+        $('chat-textarea').addEventListener("keydown", e => {
+            if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); sendChat(); }
+        });
+    }
+
+    // ─────────────────────────────────────
+    // 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"];
         
-        if($(loadId)) $(loadId).remove();
+        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);
+        });
+    }
 
-        if (!res.ok || data.error) {
-            renderSys(data.error || "Unknown error.", true);
-        } else {
-            renderBubble("assistant", data.reply);
-            appendMessage("assistant", data.reply, data.reply);
-        }
-    } catch (err) {
-        if($(loadId)) $(loadId).remove();
-        renderSys("Network error: " + err.message, true);
-    } finally {
-        setBusy(false);
-        if($("chat-textarea")) $("chat-textarea").focus();
+    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($("chat-textarea")) {
-    $("chat-textarea").addEventListener("input", function() {
-        this.style.height = "auto";
-        this.style.height = Math.min(this.scrollHeight, 160) + "px";
-    });
-    $("chat-textarea").addEventListener("keydown", function(e) {
-        if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); sendChat(); }
+    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);
-
-// ─────────────────────────────────────
-// 7. Modals & Settings
-// ─────────────────────────────────────
-function populateModelSelect() {
-    const modelSelect = $("model-select");
-    if(!modelSelect) return;
-    modelSelect.innerHTML = "";
-    
-    let list = [];
-    if(appSettings) {
-        if (appSettings.provider === "Google Gemini") list = ["gemini-1.5-pro-latest", "gemini-1.5-flash-latest"];
-        else if (appSettings.provider === "OpenRouter") list = appSettings.models_openrouter || [];
-        else if (appSettings.provider === "Nvidia NIM") list = appSettings.models_nvidia || [];
-        else list = [appSettings.current_model || "default-model"];
-    } else {
-        list = ["Default Model"];
-    }
 
-    list.forEach(function(m) {
-        const opt = document.createElement("option");
-        opt.value = m;
-        opt.textContent = (m && m.length > 30) ? m.slice(0, 28) + "…" : m;
-        if (appSettings && m === appSettings.current_model) opt.selected = true;
-        modelSelect.appendChild(opt);
+    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];
     });
-    
-    if (modelSelect.options.length && !modelSelect.value) modelSelect.selectedIndex = 0;
-}
-
-function renderModelListSetting(containerId, models, provider) {
-    const list = $(containerId);
-    if(!list) return;
-    list.innerHTML = "";
-    (models || []).forEach(function(m, i) {
-        const row = document.createElement("div");
-        row.className = "flex items-center justify-between px-2 py-1.5 rounded-lg hover:bg-white group transition-colors";
-        row.innerHTML = '<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 opacity-0 group-hover:opacity-100 transition-opacity">✕</button>';
-        list.appendChild(row);
+
+    addEvt("btn-toggle-key", "click", () => {
+        const inp = $("settings-apikey");
+        if(inp) inp.type = inp.type === "password" ? "text" : "password";
     });
-    const btns = list.querySelectorAll(".btn-del-model");
-    for(let i=0; i<btns.length; i++) {
-        btns[i].addEventListener("click", function() {
-            const idx = Number(this.dataset.i);
-            if (this.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");
+
+    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);
             }
-        });
-    }
-}
-
-function openSettings() {
-    if (!appSettings) return;
-    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();
-}
-
-function closeSettings() {
-    if($("settings-modal")) $("settings-modal").classList.add("hidden");
-}
-
-addEvt("btn-open-settings", "click", openSettings);
-addEvt("btn-close-settings", "click", closeSettings);
-addEvt("btn-cancel-settings", "click", closeSettings);
-
-addEvt("settings-provider", "change", function() {
-    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",
-        "AgentRouter": "https://agentrouter.org/v1/chat/completions",
-        "Google Gemini": "https://generativelanguage.googleapis.com/v1beta/models/"
-    };
-    if (urls[prov] && $("settings-url")) $("settings-url").value = urls[prov];
-});
-
-addEvt("btn-toggle-key", "click", function() {
-    const inp = $("settings-apikey");
-    if(inp) inp.type = inp.type === "password" ? "text" : "password";
-});
-
-function attachAddBtn(inputId, listKey, containerId, provLabel, btnId) {
-    const doAdd = function() {
-        const inp = $(inputId);
-        const val = inp ? inp.value.trim() : "";
-        if (!val || !appSettings) return;
-        if (!appSettings[listKey].includes(val)) {
-            appSettings[listKey].push(val);
-            inp.value = "";
-            renderModelListSetting(containerId, appSettings[listKey], provLabel);
-        }
-    };
-    addEvt(btnId, "click", doAdd);
-    if($(inputId)) $(inputId).addEventListener("keydown", function(e) { if (e.key === "Enter") { e.preventDefault(); doAdd(); } });
-}
-attachAddBtn("new-model-or", "models_openrouter", "models-list-openrouter", "OpenRouter", "btn-add-model-or");
-attachAddBtn("new-model-nv", "models_nvidia", "models-list-nvidia", "Nvidia NIM", "btn-add-model-nv");
-
-addEvt("btn-save-settings", "click", async function() {
-    const pEl = $("settings-provider");
-    const uEl = $("settings-url");
-    const kEl = $("settings-apikey");
-    
-    const payload = {
-        provider: pEl ? pEl.value : "",
-        base_url: uEl ? uEl.value.trim() : "",
-        api_key: kEl ? kEl.value.trim() : "",
-        models_openrouter: appSettings.models_openrouter,
-        models_nvidia: appSettings.models_nvidia,
+        };
+        addEvt(btnId, "click", doAdd);
+        if($(inputId)) $(inputId).addEventListener("keydown", e => { if (e.key === "Enter") doAdd(); });
     };
-    try {
-        const res = await fetch("/api/settings", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(payload) });
-        appSettings = await res.json();
-        populateModelSelect();
-        closeSettings();
-        renderSys("Settings saved.");
-    } catch (err) {
-        renderSys("Failed to save: " + err.message, true);
-    }
-});
-
-// ─────────────────────────────────────
-// 8. Modals DOI
-// ─────────────────────────────────────
-addEvt("btn-open-doi", "click", function() {
-    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", function() { if($("doi-modal")) $("doi-modal").classList.add("hidden"); });
-if($("doi-input")) { $("doi-input").addEventListener("keydown", function(e) { if (e.key === "Enter") { const btn = $("btn-validate-doi-submit"); if(btn) btn.click(); } }); }
-
-addEvt("btn-validate-doi-submit", "click", async function() {
-    const inp = $("doi-input");
-    const doi = inp ? inp.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"><svg class="w-4 h-4 animate-spin" 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> Validating...</div>';
+    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");
 
-    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 || "Failed") + '</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>';
+    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);
         }
-    } 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;
-    }
-});
-
-// ─────────────────────────────────────
-// 9. Sidebar & PDF Logic
-// ─────────────────────────────────────
-function toggleSidebar() {
-    const sidebar = $("sidebar");
-    const overlay = $("sidebar-overlay");
-    if (window.innerWidth < 768) {
-        if (sidebar) sidebar.classList.toggle("-translate-x-full");
-        if (overlay) overlay.classList.toggle("hidden");
-    } else {
-        if (sidebar) sidebar.classList.toggle("hidden");
-    }
-}
-
-addEvt("btn-toggle-sidebar", "click", toggleSidebar);
-addEvt("btn-hamburger", "click", toggleSidebar);
-addEvt("btn-close-sidebar", "click", toggleSidebar);
-addEvt("sidebar-overlay", "click", toggleSidebar);
-
-addEvt("btn-new-chat", "click", newSession);
-
-function handleClear() {
-    if (!currentSid || !sessions[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-top", "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", function() { if($("pdf-input")) $("pdf-input").click(); });
-
-if($("pdf-input")) {
-    $("pdf-input").addEventListener("change", async function(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");
+    });
+
+    // ─────────────────────────────────────
+    // 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/upload_pdf", { method: "POST", body: fd });
+            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) throw new Error(data.error);
-            pdfText = data.text;
-            pdfFilename = data.filename;
-            if($("attach-name")) $("attach-name").textContent = data.filename + ' · ' + data.word_count + ' words';
+            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>`;
+            }
         } catch (err) {
-            alert("Upload failed: " + err.message);
-            clearAttachment();
+            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;
         }
     });
-}
-
-// ─────────────────────────────────────
-// 10. Start Application
-// ─────────────────────────────────────
-initApp();
-
-if ('serviceWorker' in navigator) {
-  window.addEventListener('load', function() {
-    navigator.serviceWorker.register('/sw.js', { scope: '/' }).catch(function(e) { console.error(e); });
-  });
-}
+
+    // ─────────────────────────────────────
+    // 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();
+            }
+        });
+    }
+
+    // Eksekusi jalan pertama
+    initApp();
+});