Update static/js/script.js

static/js/script.js

@@ -25,8 +25,6 @@ let isBusy = false;
 
 const chatMessages = $("chat-messages");
 const chatTextarea = $("chat-textarea");
-const welcomeScreen = $("welcome-screen");
-const chatTitle = $("chat-title");
 
 // ─────────────────────────────────────
 // 3. Boot & Init
@@ -48,19 +46,19 @@ async function initApp() {
         const setRes = await fetch('/api/settings');
         if (setRes.ok) {
             appSettings = await setRes.json();
-            populateModelDropdown(appSettings);
         }
+    } catch (error) {
+        console.error("Init Error:", error);
+    } finally {
+        // Harus selalu dijalankan meskipun gagal fetch
+        populateModelSelect();
 
-        // Load Sesi Chat
         const ids = Object.keys(sessions).sort((a, b) => Number(b) - Number(a));
         if (ids.length > 0) {
             loadSession(ids[0]);
         } else {
             newSession();
         }
-
-    } catch (error) {
-        console.error("Init Error:", error);
     }
 }
 
@@ -80,18 +78,22 @@ function newSession() {
 function loadSession(id) {
     if (!sessions[id]) return;
     currentSid = id;
-    chatMessages.innerHTML = '';
+    if(chatMessages) chatMessages.innerHTML = '';
     
-    const msgs = sessions[id].messages;
+    const msgs = sessions[id].messages || [];
     if (msgs.length > 0) {
-        if(welcomeScreen) welcomeScreen.style.display = "none";
+        if($("welcome-msg")) $("welcome-msg").remove();
         msgs.forEach(m => renderBubble(m.role, m.displayContent || m.content, false));
         scrollBottom();
     } else {
-        if(welcomeScreen) welcomeScreen.style.display = "flex";
+        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(chatTitle) chatTitle.textContent = sessions[id].title;
     renderSidebar();
 }
 
@@ -109,39 +111,39 @@ function renderSidebar() {
         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="loadSession('${id}')" class="sidebar-item w-full text-left px-3 py-2 rounded-xl text-xs truncate transition-all ${activeClass}">
-            ${sessions[id].title}
+        <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}</span>
         </button>`;
     }).join('');
 }
 
 function appendMessage(role, content, displayContent) {
+    if(!sessions[currentSid]) return;
     sessions[currentSid].messages.push({ role, content, displayContent });
     
-    // Auto-buat judul dari pesan pertama
     if (role === "user" && sessions[currentSid].messages.filter(m => m.role === "user").length === 1) {
-        let snippet = displayContent.replace(/<[^>]*>?/gm, ''); // Hapus HTML tags
+        let snippet = String(displayContent).replace(/<[^>]*>?/gm, '');
         snippet = snippet.split(" ").slice(0, 5).join(" ") + "…";
         sessions[currentSid].title = snippet;
-        if(chatTitle) chatTitle.textContent = snippet;
         renderSidebar();
     }
     saveSessions();
 }
 
-// Global function biar bisa dipanggil dari onClick HTML
 window.loadSession = function(id) {
     loadSession(id);
     if(window.innerWidth < 768) toggleSidebar();
 };
 
 // ─────────────────────────────────────
-// 5. Chat UI (Render Markdown & Bubble)
+// 5. Chat UI & Render
 // ─────────────────────────────────────
 function scrollBottom() {
-    chatMessages.scrollTop = chatMessages.scrollHeight;
+    if(chatMessages) chatMessages.scrollTop = chatMessages.scrollHeight;
 }
 
+// Fallback Markdown jika Marked.js gagal load
 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>`);
@@ -152,9 +154,7 @@ function simpleMarkdown(text) {
     h = h.replace(/^### (.+)$/gm, "<h3>$1</h3>");
     h = h.replace(/^## (.+)$/gm,  "<h2>$1</h2>");
     h = h.replace(/^# (.+)$/gm,   "<h1>$1</h1>");
-    h = h.replace(/^> (.+)$/gm, "<blockquote>$1</blockquote>");
     h = h.replace(/^\s*[-*] (.+)/gm, "<li>$1</li>");
-    h = h.replace(/(<li>.*<\/li>\n?)+/g, m => `<ul>${m}</ul>`);
     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");
     return h;
 }
@@ -162,49 +162,35 @@ function simpleMarkdown(text) {
 function renderBubble(role, content, animate = true) {
     const isUser = role === "user";
     const wrap = document.createElement("div");
-    wrap.className = `flex ${isUser ? "justify-end" : "justify-start"} px-4 md:px-16 py-2${animate ? " " + (isUser ? "bubble-user" : "bubble-ai") : ""}`;
-
-    const col = document.createElement("div");
-    col.className = isUser ? "flex flex-col items-end" : "flex flex-col items-start";
-
-    const label = document.createElement("p");
-    label.className = `text-[10px] font-semibold mb-1 ${isUser ? "text-accent text-right" : "text-gray-400"}`;
-    label.textContent = isUser ? "You" : "ORBIT";
-
-    const bub = document.createElement("div");
-    bub.className = isUser
-        ? "max-w-xl bg-accent-light text-gray-800 rounded-2xl rounded-br-sm px-4 py-2.5 text-sm leading-relaxed"
-        : "max-w-2xl bg-[#F8F9FA] text-gray-800 rounded-2xl rounded-bl-sm px-4 py-2.5 text-sm prose-orbit";
+    wrap.className = `flex ${isUser ? "justify-end" : "justify-start"} mb-6 ${animate ? " " + (isUser ? "bubble-user" : "bubble-ai") : ""}`;
 
-    if (isUser) bub.innerHTML = content; // Mengizinkan tag dokumen PDF
-    else bub.innerHTML = simpleMarkdown(content);
-
-    col.appendChild(label);
-    col.appendChild(bub);
-    wrap.appendChild(col);
-    chatMessages.appendChild(wrap);
-    if (animate) scrollBottom();
-}
-
-function renderTyping() {
-    const w = document.createElement("div");
-    w.id = "typing-indicator";
-    w.className = "flex justify-start px-4 md:px-16 py-2 bubble-ai";
-    w.innerHTML = `<div class="bg-[#F8F9FA] rounded-2xl rounded-bl-sm px-4 py-3 flex items-center gap-1.5"><span class="typing-dot w-2 h-2 rounded-full bg-gray-400 inline-block"></span><span class="typing-dot w-2 h-2 rounded-full bg-gray-400 inline-block"></span><span class="typing-dot w-2 h-2 rounded-full bg-gray-400 inline-block"></span></div>`;
-    chatMessages.appendChild(w);
-    scrollBottom();
-}
+    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>`;
+    } else {
+        let parsedText = content;
+        try {
+            parsedText = (typeof marked !== 'undefined') ? marked.parse(content) : simpleMarkdown(content);
+        } 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>`;
+    }
 
-function removeTyping() {
-    const e = $("typing-indicator");
-    if (e) e.remove();
+    wrap.innerHTML = innerHTML;
+    if(chatMessages) chatMessages.appendChild(wrap);
+    if(animate) scrollBottom();
 }
 
 function renderSys(text, isErr = false) {
-    const d = document.createElement("div");
-    d.className = "flex justify-center px-4 py-2";
-    d.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>`;
-    chatMessages.appendChild(d);
+    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);
     scrollBottom();
 }
 
@@ -221,7 +207,7 @@ function setBusy(busy) {
 
 async function sendChat() {
     if (isBusy) return;
-    const raw = chatTextarea.value.trim();
+    const raw = chatTextarea ? chatTextarea.value.trim() : "";
     if (!raw && !pdfText) return;
 
     let fullPrompt = raw;
@@ -229,17 +215,22 @@ async function sendChat() {
 
     if (pdfText) {
         fullPrompt = `[Attached Document: ${pdfFilename}]\n${pdfText}\n\nUser Question: ${raw}`;
-        displayPrompt = `<div class="bg-blue-500 text-white text-xs px-2 py-1 rounded w-fit mb-1 font-bold">📄 ${pdfFilename}</div>${raw.replace(/\n/g, '<br>')}`;
+        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>')}`;
         clearAttachment();
     }
 
     if(chatTextarea) { chatTextarea.value = ""; chatTextarea.style.height = "auto"; }
-    if(welcomeScreen) welcomeScreen.style.display = "none";
+    if($("welcome-msg")) $("welcome-msg").remove();
+    
     setBusy(true);
-
     renderBubble("user", displayPrompt);
     appendMessage("user", fullPrompt, displayPrompt);
-    renderTyping();
+
+    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>`;
+        scrollBottom();
+    }
 
     try {
         const payload = {
@@ -254,7 +245,7 @@ async function sendChat() {
             body: JSON.stringify(payload),
         });
         const data = await res.json();
-        removeTyping();
+        if($(loadId)) $(loadId).remove();
 
         if (!res.ok || data.error) {
             renderSys(data.error || "Unknown error.", true);
@@ -263,7 +254,7 @@ async function sendChat() {
             appendMessage("assistant", data.reply, data.reply);
         }
     } catch (err) {
-        removeTyping();
+        if($(loadId)) $(loadId).remove();
         renderSys(`Network error: ${err.message}`, true);
     } finally {
         setBusy(false);
@@ -283,9 +274,35 @@ if(chatTextarea) {
 addEvt("btn-send", "click", sendChat);
 
 // ─────────────────────────────────────
-// 7. Modals (Settings & DOI)
+// 7. Modals & Settings
 // ─────────────────────────────────────
-function renderModelList(containerId, models, provider) {
+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(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;
+        modelSelect.appendChild(opt);
+    });
+    
+    if (modelSelect.options.length && !modelSelect.value) modelSelect.selectedIndex = 0;
+}
+
+function renderModelListSetting(containerId, models, provider) {
     const list = $(containerId);
     if(!list) return;
     list.innerHTML = "";
@@ -300,10 +317,10 @@ function renderModelList(containerId, models, provider) {
             const idx = Number(btn.dataset.i);
             if (btn.dataset.prov === "OpenRouter") {
                 appSettings.models_openrouter.splice(idx, 1);
-                renderModelList("models-list-openrouter", appSettings.models_openrouter, "OpenRouter");
+                renderModelListSetting("models-list-openrouter", appSettings.models_openrouter, "OpenRouter");
             } else {
                 appSettings.models_nvidia.splice(idx, 1);
-                renderModelList("models-list-nvidia", appSettings.models_nvidia, "Nvidia NIM");
+                renderModelListSetting("models-list-nvidia", appSettings.models_nvidia, "Nvidia NIM");
             }
         });
     });
@@ -314,8 +331,8 @@ function openSettings() {
     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 || "";
-    renderModelList("models-list-openrouter", appSettings.models_openrouter, "OpenRouter");
-    renderModelList("models-list-nvidia", appSettings.models_nvidia, "Nvidia NIM");
+    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();
 }
@@ -324,7 +341,8 @@ function closeSettings() {
     if($("settings-modal")) $("settings-modal").classList.add("hidden");
 }
 
-addEvt("btn-settings", "click", openSettings); // INI ID YANG BENAR DI HTML LU
+// Event Listeners Modal Settings
+addEvt("btn-open-settings", "click", openSettings); // Sesuai dengan ID HTML terbaru
 addEvt("btn-close-settings", "click", closeSettings);
 addEvt("btn-cancel-settings", "click", closeSettings);
 
@@ -344,21 +362,21 @@ addEvt("btn-toggle-key", "click", () => {
     if(inp) inp.type = inp.type === "password" ? "text" : "password";
 });
 
-function addModelHandler(inputId, listKey, containerId, provLabel, btnId) {
+function attachAddBtn(inputId, listKey, containerId, provLabel, btnId) {
     const doAdd = () => {
         const val = $(inputId)?.value.trim();
         if (!val || !appSettings) return;
         if (!appSettings[listKey].includes(val)) {
             appSettings[listKey].push(val);
             $(inputId).value = "";
-            renderModelList(containerId, appSettings[listKey], provLabel);
+            renderModelListSetting(containerId, appSettings[listKey], provLabel);
         }
     };
     addEvt(btnId, "click", doAdd);
-    addEvt(inputId, "keydown", e => { if (e.key === "Enter") { e.preventDefault(); doAdd(); } });
+    if($(inputId)) $(inputId).addEventListener("keydown", e => { if (e.key === "Enter") { e.preventDefault(); doAdd(); } });
 }
-addModelHandler("new-model-or", "models_openrouter", "models-list-openrouter", "OpenRouter", "btn-add-model-or");
-addModelHandler("new-model-nv", "models_nvidia", "models-list-nvidia", "Nvidia NIM", "btn-add-model-nv");
+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 () => {
     const payload = {
@@ -371,60 +389,61 @@ addEvt("btn-save-settings", "click", async () => {
     try {
         const res = await fetch("/api/settings", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(payload) });
         appSettings = await res.json();
-        populateModelDropdown(appSettings);
+        populateModelSelect();
         closeSettings();
-        renderSys("Settings saved.");
+        renderSys("Settings berhasil disimpan.");
     } catch (err) {
-        renderSys(`Failed to save: ${err.message}`, true);
+        renderSys(`Gagal save setting: ${err.message}`, true);
     }
 });
 
-// DOI LOGIC
-addEvt("btn-doi", "click", () => { // INI ID YANG BENAR DI HTML LU
+// ─────────────────────────────────────
+// 8. Modals DOI
+// ─────────────────────────────────────
+addEvt("btn-open-doi", "click", () => {
     if($("doi-modal")) $("doi-modal").classList.remove("hidden");
-    if($("doi-input")) $("doi-input").focus();
+    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").click(); } });
+addEvt("doi-input", "keydown", e => { if (e.key === "Enter") { $("btn-validate-doi-submit").click(); } });
 
-addEvt("btn-validate-doi", "click", async () => {
+addEvt("btn-validate-doi-submit", "click", async () => {
     const doi = $("doi-input")?.value.trim();
-    if (!doi) return;
+    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;
-    if($("doi-result")) $("doi-result").classList.add("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>`;
 
     try {
         const res = await fetch("/api/validate_doi", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ doi }) });
         const data = await res.json();
-        if($("doi-result")) {
-            $("doi-result").classList.remove("hidden");
-            if (!res.ok || data.error) {
-                $("doi-result").innerHTML = `<p class="text-red-500">${data.error}</p>`;
-            } else {
-                $("doi-result").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) {
+            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) {
-        if($("doi-result")) { $("doi-result").classList.remove("hidden"); $("doi-result").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($("doi-btn-text")) $("doi-btn-text").textContent = "Validate";
-        if($("btn-validate-doi")) $("btn-validate-doi").disabled = false;
+        if($("btn-validate-doi-submit")) $("btn-validate-doi-submit").disabled = false;
     }
 });
 
 // ─────────────────────────────────────
-// 8. Sidebar & PDF Logic
+// 9. Sidebar & PDF Logic
 // ─────────────────────────────────────
 function toggleSidebar() {
     const sidebar = $("sidebar");
@@ -439,6 +458,7 @@ function toggleSidebar() {
 
 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);
@@ -448,13 +468,12 @@ function handleClear() {
     sessions[currentSid].messages = [];
     sessions[currentSid].title = "New Chat";
     saveSessions();
-    chatMessages.innerHTML = "";
-    if(welcomeScreen) welcomeScreen.style.display = "flex";
+    if(chatMessages) chatMessages.innerHTML = "";
+    if($("welcome-screen")) $("welcome-screen").style.display = "flex";
     if(chatTitle) chatTitle.textContent = "New Chat";
     renderSidebar();
 }
-addEvt("btn-clear-chat", "click", handleClear);
-addEvt("btn-clear-chat-mobile", "click", handleClear);
+addEvt("btn-clear-chat-top", "click", handleClear);
 
 function clearAttachment() {
     pdfText = null; pdfFilename = null;
@@ -471,46 +490,29 @@ if($("pdf-input")) {
         e.target.value = "";
         const fd = new FormData();
         fd.append("file", file);
-        renderSys(`Uploading "${file.name}"…`);
+        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) { renderSys(data.error, true); return; }
+            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-badge")) $("attach-badge").classList.remove("hidden");
-            renderSys(`"${data.filename}" attached.`);
         } catch (err) {
-            renderSys(`Upload failed: ${err.message}`, true);
+            alert(`Upload failed: ${err.message}`);
+            clearAttachment();
         }
     });
 }
 
-function populateModelSelect() {
-    const list = appSettings.provider === "Nvidia NIM" ? (appSettings.models_nvidia || []) : (appSettings.models_openrouter || []);
-    const modelSelect = $("model-select");
-    if(!modelSelect) return;
-    modelSelect.innerHTML = "";
-    list.forEach(m => {
-        const opt = document.createElement("option");
-        opt.value = m;
-        opt.textContent = m.length > 30 ? m.slice(0, 28) + "…" : m;
-        if (m === appSettings.current_model) opt.selected = true;
-        modelSelect.appendChild(opt);
-    });
-    if (modelSelect.options.length && !modelSelect.value) modelSelect.selectedIndex = 0;
-}
-
-if($("model-select")) {
-    $("model-select").addEventListener("change", async () => {
-        if (!appSettings) return;
-        appSettings.current_model = $("model-select").value;
-        try { await fetch("/api/settings", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ current_model: $("model-select").value }) }); } catch (_) {}
-    });
-}
-
 // ─────────────────────────────────────
-// 9. Go!
+// 10. Start Application
 // ─────────────────────────────────────
-initApp();
+initApp();
+
+if ('serviceWorker' in navigator) {
+  window.addEventListener('load', () => {
+    navigator.serviceWorker.register('/sw.js', { scope: '/' }).catch(e => console.error(e));
+  });
+}