Update static/js/script.js

static/js/script.js

@@ -1,31 +1,36 @@
 /**
  * ORBIT – Educational Research Assistant
- * V2 SCRIPT: Anti-Crash, Safe Storage, Full Logic
+ * V3 SCRIPT: Maximum Compatibility & Anti-Crash
  */
 
 // ─────────────────────────────────────
 // 1. DOM Helper (Anti-Error)
 // ─────────────────────────────────────
-const $ = id => document.getElementById(id);
-const addEvt = (id, event, handler) => {
+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 (GANTI KEY KE V2 BIAR BERSIH)
+// 2. State & Data 
 // ─────────────────────────────────────
 let currentUser = null;
 let appSettings = null;
-// Pakai key baru "orbit_sessions_v2" untuk menghindari data korup lama
-let sessions = JSON.parse(localStorage.getItem('orbit_sessions_v2')) || {};
+let sessions = {};
 let currentSid = null;
 let pdfText = null;
 let pdfFilename = null;
 let isBusy = false;
 
-const chatMessages = $("chat-messages");
-const chatTextarea = $("chat-textarea");
+// 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
@@ -53,13 +58,7 @@ async function initApp() {
     } finally {
         populateModelSelect();
 
-        // Bersihkan data jika bentuknya Array (korup dari versi lama)
-        if (Array.isArray(sessions)) {
-            sessions = {};
-            saveSessions();
-        }
-
-        const ids = Object.keys(sessions).sort((a, b) => Number(b) - Number(a));
+        const ids = Object.keys(sessions).sort(function(a, b) { return Number(b) - Number(a); });
         if (ids.length > 0) {
             loadSession(ids[0]);
         } else {
@@ -72,7 +71,11 @@ async function initApp() {
 // 4. Session & History Logic
 // ─────────────────────────────────────
 function saveSessions() {
-    localStorage.setItem('orbit_sessions_v2', JSON.stringify(sessions));
+    try {
+        localStorage.setItem('orbit_sessions_v3', JSON.stringify(sessions));
+    } catch(e) {
+        console.error("Gagal save session", e);
+    }
 }
 
 function newSession() {
@@ -85,25 +88,22 @@ function loadSession(id) {
     if (!sessions[id]) return;
     currentSid = id;
     
-    // Sabuk pengaman: Pastikan array messages selalu ada
     if (!sessions[currentSid].messages) {
         sessions[currentSid].messages = [];
     }
 
-    if(chatMessages) chatMessages.innerHTML = '';
+    const cm = $("chat-messages");
+    if(cm) cm.innerHTML = '';
     
-    const msgs = sessions[id].messages || [];
+    const msgs = sessions[id].messages;
     if (msgs.length > 0) {
         if($("welcome-msg")) $("welcome-msg").remove();
-        msgs.forEach(m => renderBubble(m.role, m.displayContent || m.content, false));
+        msgs.forEach(function(m) { 
+            renderBubble(m.role, m.displayContent || m.content, false); 
+        });
         scrollBottom();
     } else {
-        if(chatMessages) chatMessages.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>`;
+        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>';
     }
     
     renderSidebar();
@@ -113,30 +113,31 @@ function renderSidebar() {
     const list = $('history-list');
     if(!list) return;
     
-    const ids = Object.keys(sessions).sort((a, b) => Number(b) - Number(a));
+    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>`;
+        list.innerHTML = '<p class="text-xs text-gray-400 px-3 py-2 italic">No recent chats.</p>';
         return;
     }
 
-    list.innerHTML = ids.map(id => {
+    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';
-        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 ${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">${sessions[id].title || "New Chat"}</span>
-        </button>`;
-    }).join('');
+        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, content, displayContent });
+    sessions[currentSid].messages.push({ role: role, content: content, displayContent: displayContent });
     
-    if (role === "user" && sessions[currentSid].messages.filter(m => m.role === "user").length === 1) {
+    // 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;
@@ -154,12 +155,13 @@ window.loadSession = function(id) {
 // 5. Chat UI & Render
 // ─────────────────────────────────────
 function scrollBottom() {
-    if(chatMessages) chatMessages.scrollTop = chatMessages.scrollHeight;
+    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, (_, lang, c) => `<pre><code>${c.trim()}</code></pre>`);
+    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>");
@@ -168,18 +170,18 @@ function simpleMarkdown(text) {
     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(p => /^<(h[1-3]|ul|li|pre|blockquote)/.test(p.trim()) ? p : `<p>${p.replace(/\n/g, "<br>")}</p>`).join("\n");
+    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 = true) {
-    const isUser = role === "user";
+function renderBubble(role, content, animate) {
+    if (animate === undefined) animate = true;
+    const isUser = (role === "user");
     const wrap = document.createElement("div");
-    wrap.className = `flex ${isUser ? "justify-end" : "justify-start"} mb-6 ${animate ? " " + (isUser ? "bubble-user" : "bubble-ai") : ""}`;
+    wrap.className = "flex mb-6 " + (isUser ? "justify-end" : "justify-start") + (animate ? " bubble-" + role : "");
 
-    let innerHTML = "";
     if (isUser) {
-        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>`;
+        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 {
@@ -187,23 +189,21 @@ function renderBubble(role, content, animate = true) {
         } catch (e) {
             parsedText = simpleMarkdown(content);
         }
-        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>`;
+        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>';
     }
 
-    wrap.innerHTML = innerHTML;
-    if(chatMessages) chatMessages.appendChild(wrap);
+    const cm = $("chat-messages");
+    if(cm) cm.appendChild(wrap);
     if(animate) scrollBottom();
 }
 
-function renderSys(text, isErr = false) {
+function renderSys(text, isErr) {
     const wrap = document.createElement("div");
-    wrap.className = `flex justify-center mb-4`;
-    wrap.innerHTML = `<span class="text-[11px] px-3 py-1.5 rounded-full ${isErr ? "bg-red-50 text-red-500" : "bg-gray-100 text-gray-500"}">${text}</span>`;
-    if(chatMessages) chatMessages.appendChild(wrap);
+    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();
 }
 
@@ -213,30 +213,31 @@ function renderSys(text, isErr = false) {
 function setBusy(busy) {
     isBusy = busy;
     if($('btn-send')) $('btn-send').disabled = busy;
-    if(chatTextarea) chatTextarea.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 = chatTextarea ? chatTextarea.value.trim() : "";
+    const inputEl = $("chat-textarea");
+    const raw = inputEl ? inputEl.value.trim() : "";
     if (!raw && !pdfText) return;
 
     let fullPrompt = raw;
-    let displayPrompt = raw.replace(/\n/g, '<br>');
+    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>${raw.replace(/\n/g, '<br>')}`;
+        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(chatTextarea) { chatTextarea.value = ""; chatTextarea.style.height = "auto"; }
+    if(inputEl) { inputEl.value = ""; inputEl.style.height = "auto"; }
     if($("welcome-msg")) $("welcome-msg").remove();
     
-    // Safety check session
-    if (!sessions[currentSid] || !sessions[currentSid].messages) {
+    if (!currentSid || !sessions[currentSid] || !sessions[currentSid].messages) {
         newSession();
     }
 
@@ -245,16 +246,20 @@ async function sendChat() {
     appendMessage("user", fullPrompt, displayPrompt);
 
     const loadId = 'load-' + Date.now();
-    if(chatMessages) {
-        chatMessages.innerHTML += `<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>`;
+    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();
     }
 
     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) : [];
+        
         const payload = {
             prompt: fullPrompt,
-            model: $("model-select") ? $("model-select").value : (appSettings?.current_model || ""),
-            messages: sessions[currentSid].messages.slice(0, -1) // Aman karena udah di-check di atas
+            model: currentModel,
+            messages: msgsToSend
         };
 
         const res = await fetch("/api/chat", {
@@ -263,6 +268,7 @@ async function sendChat() {
             body: JSON.stringify(payload),
         });
         const data = await res.json();
+        
         if($(loadId)) $(loadId).remove();
 
         if (!res.ok || data.error) {
@@ -273,19 +279,19 @@ async function sendChat() {
         }
     } catch (err) {
         if($(loadId)) $(loadId).remove();
-        renderSys(`Network error: ${err.message}`, true);
+        renderSys("Network error: " + err.message, true);
     } finally {
         setBusy(false);
-        if(chatTextarea) chatTextarea.focus();
+        if($("chat-textarea")) $("chat-textarea").focus();
     }
 }
 
-if(chatTextarea) {
-    chatTextarea.addEventListener("input", function() {
+if($("chat-textarea")) {
+    $("chat-textarea").addEventListener("input", function() {
         this.style.height = "auto";
         this.style.height = Math.min(this.scrollHeight, 160) + "px";
     });
-    chatTextarea.addEventListener("keydown", e => {
+    $("chat-textarea").addEventListener("keydown", function(e) {
         if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); sendChat(); }
     });
 }
@@ -309,10 +315,10 @@ function populateModelSelect() {
         list = ["Default Model"];
     }
 
-    list.forEach(m => {
+    list.forEach(function(m) {
         const opt = document.createElement("option");
         opt.value = m;
-        opt.textContent = m.length > 30 ? m.slice(0, 28) + "…" : m;
+        opt.textContent = (m && m.length > 30) ? m.slice(0, 28) + "…" : m;
         if (appSettings && m === appSettings.current_model) opt.selected = true;
         modelSelect.appendChild(opt);
     });
@@ -324,16 +330,17 @@ function renderModelListSetting(containerId, models, provider) {
     const list = $(containerId);
     if(!list) return;
     list.innerHTML = "";
-    (models || []).forEach((m, i) => {
+    (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>`;
+        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);
     });
-    list.querySelectorAll(".btn-del-model").forEach(btn => {
-        btn.addEventListener("click", () => {
-            const idx = Number(btn.dataset.i);
-            if (btn.dataset.prov === "OpenRouter") {
+    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 {
@@ -341,7 +348,7 @@ function renderModelListSetting(containerId, models, provider) {
                 renderModelListSetting("models-list-nvidia", appSettings.models_nvidia, "Nvidia NIM");
             }
         });
-    });
+    }
 }
 
 function openSettings() {
@@ -363,7 +370,7 @@ addEvt("btn-open-settings", "click", openSettings);
 addEvt("btn-close-settings", "click", closeSettings);
 addEvt("btn-cancel-settings", "click", closeSettings);
 
-addEvt("settings-provider", "change", () => {
+addEvt("settings-provider", "change", function() {
     const prov = $("settings-provider").value;
     const urls = {
         "OpenRouter": "https://openrouter.ai/api/v1/chat/completions",
@@ -374,32 +381,37 @@ addEvt("settings-provider", "change", () => {
     if (urls[prov] && $("settings-url")) $("settings-url").value = urls[prov];
 });
 
-addEvt("btn-toggle-key", "click", () => {
+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 = () => {
-        const val = $(inputId)?.value.trim();
+    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);
-            $(inputId).value = "";
+            inp.value = "";
             renderModelListSetting(containerId, appSettings[listKey], provLabel);
         }
     };
     addEvt(btnId, "click", doAdd);
-    if($(inputId)) $(inputId).addEventListener("keydown", e => { if (e.key === "Enter") { e.preventDefault(); 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 () => {
+addEvt("btn-save-settings", "click", async function() {
+    const pEl = $("settings-provider");
+    const uEl = $("settings-url");
+    const kEl = $("settings-apikey");
+    
     const payload = {
-        provider: $("settings-provider")?.value,
-        base_url: $("settings-url")?.value.trim(),
-        api_key: $("settings-apikey")?.value.trim(),
+        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,
     };
@@ -410,24 +422,25 @@ addEvt("btn-save-settings", "click", async () => {
         closeSettings();
         renderSys("Settings saved.");
     } catch (err) {
-        renderSys(`Failed to save: ${err.message}`, true);
+        renderSys("Failed to save: " + err.message, true);
     }
 });
 
 // ─────────────────────────────────────
 // 8. Modals DOI
 // ─────────────────────────────────────
-addEvt("btn-open-doi", "click", () => {
+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", () => { if($("doi-modal")) $("doi-modal").classList.add("hidden"); });
-addEvt("doi-input", "keydown", e => { if (e.key === "Enter") { $("btn-validate-doi-submit").click(); } });
+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 () => {
-    const doi = $("doi-input")?.value.trim();
+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;
     
@@ -435,24 +448,18 @@ addEvt("btn-validate-doi-submit", "click", async () => {
     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>`;
+    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>';
 
     try {
-        const res = await fetch("/api/validate_doi", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ doi }) });
+        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>`;
+            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>`;
+            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) {
-        resDiv.innerHTML = `<p class="text-red-500">${err.message}</p>`;
+        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;
@@ -485,9 +492,9 @@ function handleClear() {
     sessions[currentSid].messages = [];
     sessions[currentSid].title = "New Chat";
     saveSessions();
-    if(chatMessages) chatMessages.innerHTML = "";
+    if($("chat-messages")) $("chat-messages").innerHTML = "";
     if($("welcome-screen")) $("welcome-screen").style.display = "flex";
-    if(chatTitle) chatTitle.textContent = "New Chat";
+    if($("chat-title")) $("chat-title").textContent = "New Chat";
     renderSidebar();
 }
 addEvt("btn-clear-chat-top", "click", handleClear);
@@ -498,10 +505,10 @@ function clearAttachment() {
     if($("attach-badge")) $("attach-badge").classList.add("hidden");
 }
 addEvt("btn-remove-attach", "click", clearAttachment);
-addEvt("btn-attach", "click", () => { if($("pdf-input")) $("pdf-input").click(); });
+addEvt("btn-attach", "click", function() { if($("pdf-input")) $("pdf-input").click(); });
 
 if($("pdf-input")) {
-    $("pdf-input").addEventListener("change", async e => {
+    $("pdf-input").addEventListener("change", async function(e) {
         const file = e.target.files[0];
         if (!file) return;
         e.target.value = "";
@@ -515,9 +522,9 @@ if($("pdf-input")) {
             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($("attach-name")) $("attach-name").textContent = data.filename + ' · ' + data.word_count + ' words';
         } catch (err) {
-            alert(`Upload failed: ${err.message}`);
+            alert("Upload failed: " + err.message);
             clearAttachment();
         }
     });
@@ -529,7 +536,7 @@ if($("pdf-input")) {
 initApp();
 
 if ('serviceWorker' in navigator) {
-  window.addEventListener('load', () => {
-    navigator.serviceWorker.register('/sw.js', { scope: '/' }).catch(e => console.error(e));
+  window.addEventListener('load', function() {
+    navigator.serviceWorker.register('/sw.js', { scope: '/' }).catch(function(e) { console.error(e); });
   });
 }