Update static/js/script.js

static/js/script.js

@@ -1,23 +1,26 @@
-let chatHistory = [];
+/**
+ * ORBIT – Educational Research Assistant
+ * Logic with Multi-Session History Support
+ */
+
+let currentSid = null;
+let sessions = JSON.parse(localStorage.getItem('orbit_sessions')) || {};
 let currentSettings = null;
 let modelsOR = [];
 let modelsNV = [];
 let pdfText = "";
 let pdfFilename = "";
-let savedSessions = JSON.parse(localStorage.getItem('orbit_sessions')) || [];
 
-// 1. Inisialisasi Aplikasi (Load User & Settings)
+// 1. Boot Application
 async function initApp() {
     try {
         const userRes = await fetch('/api/me');
         if (!userRes.ok) throw new Error('Not logged in');
         const userData = await userRes.json();
         
-        // Render Profil
         document.getElementById('user-name').textContent = userData.name || userData.email;
         if (userData.picture) document.getElementById('user-avatar').src = userData.picture;
 
-        // Render Settings
         const setRes = await fetch('/api/settings');
         if (setRes.ok) {
             currentSettings = await setRes.json();
@@ -25,14 +28,26 @@ async function initApp() {
             modelsNV = currentSettings.models_nvidia || [];
             populateModelDropdown(currentSettings);
         }
+
         renderHistoryList();
+        
+        // Load sesi terakhir jika ada, kalau tak buat sesi baru
+        const ids = Object.keys(sessions).sort((a, b) => b - a);
+        if (ids.length > 0) {
+            switchSession(ids[0]);
+        } else {
+            newSession();
+        }
+
     } catch (error) {
+        console.error("Init failed:", error);
         window.location.href = '/login';
     }
 }
 
 function populateModelDropdown(settings) {
     const select = document.getElementById('model-select');
+    if(!select) return;
     select.innerHTML = '';
     let models = [];
     if (settings.provider === 'Google Gemini') models = ['gemini-1.5-pro-latest', 'gemini-1.5-flash-latest'];
@@ -49,309 +64,250 @@ function populateModelDropdown(settings) {
     });
 }
 
-// 2. Sidebar & Clear Chat Logic
-const sidebar = document.getElementById('sidebar');
-const overlay = document.getElementById('sidebar-overlay');
-
-function toggleSidebar() {
-    sidebar.classList.toggle('-translate-x-full');
-    overlay.classList.toggle('hidden');
+// 2. Session Management
+function saveToLocalStorage() {
+    localStorage.setItem('orbit_sessions', JSON.stringify(sessions));
 }
 
-// Pasang event listener secara aman
-const btnHamburger = document.getElementById('btn-hamburger');
-if(btnHamburger) btnHamburger.addEventListener('click', toggleSidebar);
-
-const btnCloseSidebar = document.getElementById('btn-close-sidebar');
-if(btnCloseSidebar) btnCloseSidebar.addEventListener('click', toggleSidebar);
+function newSession() {
+    const id = Date.now().toString();
+    sessions[id] = {
+        title: "New Chat",
+        messages: []
+    };
+    currentSid = id;
+    saveToLocalStorage();
+    renderHistoryList();
+    displayMessages();
+}
 
-if(overlay) overlay.addEventListener('click', toggleSidebar);
+function switchSession(id) {
+    if (!sessions[id]) return;
+    currentSid = id;
+    renderHistoryList();
+    displayMessages();
+    if(window.innerWidth < 768) toggleSidebar();
+}
 
-function clearChat() {
-    chatHistory = [];
-    removeAttach();
+function displayMessages() {
     const chatBox = document.getElementById('chat-messages');
-    if(chatBox) {
+    if(!chatBox) return;
+    chatBox.innerHTML = '';
+    
+    const msgs = sessions[currentSid].messages;
+    
+    if (msgs.length === 0) {
         chatBox.innerHTML = `
         <div id="welcome-msg" class="flex flex-col items-center justify-center h-full text-center px-4">
             <img src="/static/icon.png" class="w-16 h-16 mb-4 shadow-sm rounded-2xl" onerror="this.style.display='none'">
             <h2 class="text-2xl font-bold text-gray-800 mb-2">Welcome to ORBIT</h2>
             <p class="text-gray-500 text-sm max-w-md">Your AI-powered Educational Research Assistant. Upload a document or type a prompt below to begin.</p>
-        </div>
-        `;
-    }
-    if(window.innerWidth < 768 && !sidebar.classList.contains('-translate-x-full')) {
-        toggleSidebar();
+        </div>`;
+    } else {
+        msgs.forEach(m => {
+            if (m.role === 'user') {
+                renderUserBubble(m.displayContent || m.content);
+            } else {
+                renderAiBubble(m.content);
+            }
+        });
     }
+    chatBox.scrollTop = chatBox.scrollHeight;
 }
 
-const btnNewChat = document.getElementById('btn-new-chat');
-if(btnNewChat) btnNewChat.addEventListener('click', clearChat);
-
-const btnClearTop = document.getElementById('btn-clear-chat-top');
-if(btnClearTop) btnClearTop.addEventListener('click', clearChat);
-
-// 3. LocalStorage History
 function renderHistoryList() {
     const list = document.getElementById('history-list');
     if(!list) return;
-    if(savedSessions.length === 0) {
+    const ids = Object.keys(sessions).sort((a, b) => b - a);
+    
+    if(ids.length === 0) {
         list.innerHTML = `<p class="text-xs text-gray-400 px-3 py-2 italic">No recent chats.</p>`;
         return;
     }
-    list.innerHTML = savedSessions.map(s => `
-        <button class="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium text-gray-600 hover:bg-white hover:text-accent hover:shadow-sm transition-all text-left truncate">
-            <svg class="w-4 h-4 shrink-0" 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">${s.title}</span>
-        </button>
-    `).join('');
-}
 
-function saveSessionTitle(prompt) {
-    if(chatHistory.length === 1) {
-        const title = prompt.length > 25 ? prompt.substring(0, 25) + "..." : prompt;
-        savedSessions.unshift({ id: Date.now(), title: title });
-        if(savedSessions.length > 10) savedSessions.pop(); // Max 10 histori
-        localStorage.setItem('orbit_sessions', JSON.stringify(savedSessions));
-        renderHistoryList();
-    }
+    list.innerHTML = ids.map(id => {
+        const activeClass = (id === currentSid) ? 'bg-white text-accent shadow-sm ring-1 ring-slate-200' : 'text-gray-600 hover:bg-white hover:text-accent';
+        return `
+        <button onclick="switchSession('${id}')" class="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium 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 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('');
 }
 
-// 4. Modal Settings
-const setModal = document.getElementById('settings-modal');
-
-function renderModelLists() {
-    const listOR = document.getElementById('models-list-openrouter');
-    const listNV = document.getElementById('models-list-nvidia');
-    if(listOR) {
-        listOR.innerHTML = modelsOR.map((m, i) => `<div class="flex justify-between items-center p-1.5 border-b border-gray-100 text-sm text-gray-600"><span>${m}</span><button onclick="modelsOR.splice(${i},1);renderModelLists()" class="text-red-400 hover:text-red-600 hover:bg-red-50 rounded px-2 font-bold transition-colors">×</button></div>`).join('');
-    }
-    if(listNV) {
-        listNV.innerHTML = modelsNV.map((m, i) => `<div class="flex justify-between items-center p-1.5 border-b border-gray-100 text-sm text-gray-600"><span>${m}</span><button onclick="modelsNV.splice(${i},1);renderModelLists()" class="text-red-400 hover:text-red-600 hover:bg-red-50 rounded px-2 font-bold transition-colors">×</button></div>`).join('');
-    }
-}
-
-const btnAddOR = document.getElementById('btn-add-model-or');
-if(btnAddOR) {
-    btnAddOR.addEventListener('click', () => {
-        const val = document.getElementById('new-model-or').value.trim();
-        if(val && !modelsOR.includes(val)) { modelsOR.push(val); document.getElementById('new-model-or').value=''; renderModelLists(); }
-    });
-}
+// 3. UI Helpers
+const sidebar = document.getElementById('sidebar');
+const overlay = document.getElementById('sidebar-overlay');
 
-const btnAddNV = document.getElementById('btn-add-model-nv');
-if(btnAddNV) {
-    btnAddNV.addEventListener('click', () => {
-        const val = document.getElementById('new-model-nv').value.trim();
-        if(val && !modelsNV.includes(val)) { modelsNV.push(val); document.getElementById('new-model-nv').value=''; renderModelLists(); }
-    });
+function toggleSidebar() {
+    sidebar.classList.toggle('-translate-x-full');
+    overlay.classList.toggle('hidden');
 }
 
-const btnOpenSettings = document.getElementById('btn-open-settings');
-if(btnOpenSettings) {
-    btnOpenSettings.addEventListener('click', () => {
-        if(currentSettings) {
-            document.getElementById('settings-provider').value = currentSettings.provider;
-            document.getElementById('settings-url').value = currentSettings.base_url;
-            document.getElementById('settings-apikey').value = currentSettings.api_key;
-            modelsOR = [...currentSettings.models_openrouter];
-            modelsNV = [...currentSettings.models_nvidia];
-            renderModelLists();
-        }
-        if(setModal) setModal.classList.remove('hidden');
-        if(window.innerWidth < 768) toggleSidebar();
-    });
-}
+document.getElementById('btn-hamburger').addEventListener('click', toggleSidebar);
+if(document.getElementById('btn-close-sidebar')) document.getElementById('btn-close-sidebar').addEventListener('click', toggleSidebar);
+overlay.addEventListener('click', toggleSidebar);
+
+document.getElementById('btn-new-chat').addEventListener('click', newSession);
+document.getElementById('btn-clear-chat-top').addEventListener('click', () => {
+    if(confirm("Clear this conversation?")) {
+        sessions[currentSid].messages = [];
+        sessions[currentSid].title = "New Chat";
+        saveToLocalStorage();
+        displayMessages();
+        renderHistoryList();
+    }
+});
 
-if(document.getElementById('btn-close-settings')) document.getElementById('btn-close-settings').addEventListener('click', () => setModal.classList.add('hidden'));
-if(document.getElementById('btn-cancel-settings')) document.getElementById('btn-cancel-settings').addEventListener('click', () => setModal.classList.add('hidden'));
-
-const btnSaveSettings = document.getElementById('btn-save-settings');
-if(btnSaveSettings) {
-    btnSaveSettings.addEventListener('click', async () => {
-        const payload = {
-            provider: document.getElementById('settings-provider').value,
-            base_url: document.getElementById('settings-url').value,
-            api_key: document.getElementById('settings-apikey').value,
-            models_openrouter: modelsOR,
-            models_nvidia: modelsNV,
-            current_model: document.getElementById('model-select').value
-        };
-        await fetch('/api/settings', { method: 'POST', body: JSON.stringify(payload) });
-        if(setModal) setModal.classList.add('hidden');
-        initApp(); // Refresh settingan dropdown
-    });
-}
+// 4. Chat Logic
+const tx = document.getElementById('chat-textarea');
+const btnSend = document.getElementById('btn-send');
 
-// 5. Modal DOI
-const doiModal = document.getElementById('doi-modal');
-const btnOpenDoi = document.getElementById('btn-open-doi');
-if(btnOpenDoi) {
-    btnOpenDoi.addEventListener('click', () => {
-        if(doiModal) doiModal.classList.remove('hidden');
-        const resDiv = document.getElementById('doi-result');
-        if(resDiv) resDiv.classList.add('hidden');
-        if(window.innerWidth < 768) toggleSidebar();
-    });
+function renderUserBubble(content) {
+    const chatBox = document.getElementById('chat-messages');
+    chatBox.innerHTML += `<div class="flex justify-end mb-6"><div class="bg-accent text-white p-4 rounded-2xl rounded-tr-none max-w-[85%] shadow-sm text-[15px] leading-relaxed">${content.replace(/\n/g, '<br>')}</div></div>`;
 }
 
-if(document.getElementById('btn-close-doi')) document.getElementById('btn-close-doi').addEventListener('click', () => doiModal.classList.add('hidden'));
-
-const btnValDoi = document.getElementById('btn-validate-doi-submit');
-if(btnValDoi) {
-    btnValDoi.addEventListener('click', async () => {
-        const doi = document.getElementById('doi-input').value;
-        const resDiv = document.getElementById('doi-result');
-        if(!doi) return;
-        
-        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>`;
-        
-        const res = await fetch('/api/validate_doi', { method: 'POST', body: JSON.stringify({doi: doi}) });
-        const data = await res.json();
-        
-        if(data.error) {
-            resDiv.innerHTML = `<span class="text-red-500 font-medium">Error: ${data.error}</span>`;
-        } else {
-            resDiv.innerHTML = `<strong class="text-gray-800">${data.title}</strong><br><span class="text-xs text-gray-500 block mt-1">${data.authors} (${data.year})</span><span class="inline-block mt-2 px-2 py-1 bg-blue-50 text-blue-600 text-[10px] rounded border border-blue-100 uppercase tracking-wide font-bold">${data.type}</span>`;
-        }
-    });
+function renderAiBubble(content) {
+    const chatBox = document.getElementById('chat-messages');
+    const renderedMarkdown = marked.parse(content);
+    chatBox.innerHTML += `<div 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" 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">${renderedMarkdown}</div></div>`;
 }
 
-// 6. PDF Attachment
-const btnAttach = document.getElementById('btn-attach');
-const pdfInput = document.getElementById('pdf-input');
-
-if(btnAttach && pdfInput) {
-    btnAttach.addEventListener('click', () => pdfInput.click());
+btnSend.addEventListener('click', async () => {
+    let prompt = tx.value.trim();
+    if(!prompt && !pdfText) return;
     
-    pdfInput.addEventListener('change', async (e) => {
-        const file = e.target.files[0];
-        if(!file) return;
-        const formData = new FormData();
-        formData.append('file', file);
-        
-        document.getElementById('attach-name').textContent = "Extracting...";
-        document.getElementById('attach-badge').classList.remove('hidden');
-        
-        try {
-            const res = await fetch('/api/upload_pdf', { method: 'POST', body: formData });
-            const data = await res.json();
-            if(res.ok) {
-                pdfText = data.text;
-                pdfFilename = data.filename;
-                document.getElementById('attach-name').textContent = pdfFilename;
-            } else {
-                throw new Error(data.error);
-            }
-        } catch (err) {
-            alert("Upload failed: " + err.message);
-            removeAttach();
-        }
-    });
-}
+    if(document.getElementById('welcome-msg')) document.getElementById('welcome-msg').remove();
 
-function removeAttach() {
-    pdfText = ""; pdfFilename = "";
-    if(document.getElementById('pdf-input')) document.getElementById('pdf-input').value = "";
-    if(document.getElementById('attach-badge')) document.getElementById('attach-badge').classList.add('hidden');
-}
-
-const btnRemoveAttach = document.getElementById('btn-remove-attach');
-if(btnRemoveAttach) btnRemoveAttach.addEventListener('click', removeAttach);
+    tx.value = ''; 
+    tx.style.height = 'auto';
+    btnSend.disabled = true;
+    
+    let displayPrompt = prompt;
+    let fullSystemPrompt = prompt;
+    
+    if (pdfText) {
+        displayPrompt = `<div class="flex items-center gap-1.5 bg-blue-500/30 text-white text-xs px-2.5 py-1.5 rounded-lg mb-2 font-medium w-fit"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"></path></svg> ${pdfFilename}</div>${prompt}`;
+        fullSystemPrompt = `[Attached Document: ${pdfFilename}]\n${pdfText}\n\nUser Question: ${prompt}`;
+        removeAttach();
+    }
 
-// 7. Chat Logic
-const tx = document.getElementById('chat-textarea');
-const btnSend = document.getElementById('btn-send');
+    // Kemaskini History tajuk jika ini mesej pertama
+    if(sessions[currentSid].messages.length === 0) {
+        sessions[currentSid].title = prompt.substring(0, 25) || pdfFilename.substring(0, 25);
+    }
 
-if(tx) {
-    tx.addEventListener("input", function() { 
-        this.style.height = 'auto'; 
-        this.style.height = (this.scrollHeight) + 'px'; 
-    });
+    sessions[currentSid].messages.push({ role: "user", content: fullSystemPrompt, displayContent: displayPrompt });
+    renderUserBubble(displayPrompt);
     
-    tx.addEventListener('keydown', function(e) { 
-        if (e.key === 'Enter' && !e.shiftKey) { 
-            e.preventDefault(); 
-            if(btnSend) btnSend.click(); 
-        }
-    });
-}
+    const loadId = 'load-' + Date.now();
+    document.getElementById('chat-messages').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>`;
+    document.getElementById('chat-messages').scrollTop = document.getElementById('chat-messages').scrollHeight;
 
-if(btnSend) {
-    btnSend.addEventListener('click', async () => {
-        let prompt = tx.value.trim();
-        if(!prompt && !pdfText) return;
-        
-        const chatBox = document.getElementById('chat-messages');
-        const welcomeMsg = document.getElementById('welcome-msg');
-        if(welcomeMsg) welcomeMsg.remove();
-
-        tx.value = ''; 
-        tx.style.height = 'auto';
-        btnSend.disabled = true;
-        
-        let displayPrompt = prompt;
-        let systemPrompt = prompt;
+    try {
+        const res = await fetch('/api/chat', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ 
+                prompt: fullSystemPrompt, 
+                messages: sessions[currentSid].messages.slice(0, -1), 
+                model: document.getElementById('model-select').value 
+            })
+        });
+        const data = await res.json();
+        document.getElementById(loadId).remove();
         
-        // Inject PDF context
-        if (pdfText) {
-            displayPrompt = `<div class="flex items-center gap-1.5 bg-blue-500/30 text-white text-xs px-2.5 py-1.5 rounded-lg mb-2 font-medium w-fit"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"></path></svg> ${pdfFilename}</div>${prompt}`;
-            systemPrompt = `[Attached Document: ${pdfFilename}]\n${pdfText}\n\nUser Question: ${prompt}`;
-            removeAttach();
-        }
-
-        // Tampilkan pesan User
-        chatHistory.push({ role: "user", content: systemPrompt });
-        saveSessionTitle(prompt || pdfFilename);
+        if(!res.ok) throw new Error(data.error || 'Server error');
         
-        chatBox.innerHTML += `<div class="flex justify-end mb-6"><div class="bg-accent text-white p-4 rounded-2xl rounded-tr-none max-w-[85%] shadow-sm text-[15px] leading-relaxed">${displayPrompt.replace(/\n/g, '<br>')}</div></div>`;
-        chatBox.scrollTop = chatBox.scrollHeight;
-
-        // Tampilkan loading AI
-        const loadId = 'load-' + Date.now();
-        chatBox.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" onerror="this.style.display='none'"><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>`;
-        chatBox.scrollTop = chatBox.scrollHeight;
-
-        try {
-            // Tembak API
-            const res = await fetch('/api/chat', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ 
-                    prompt: systemPrompt, 
-                    messages: chatHistory.slice(0, -1), 
-                    model: document.getElementById('model-select').value 
-                })
-            });
-            const data = await res.json();
-            
-            document.getElementById(loadId).remove();
-            
-            if(!res.ok) throw new Error(data.error || 'Server error');
-            
-            chatHistory.push({ role: "assistant", content: data.reply });
-            
-            // Render format Markdown pakai library Marked.js
-            const renderedMarkdown = marked.parse(data.reply);
-            chatBox.innerHTML += `<div 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" 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">${renderedMarkdown}</div></div>`;
-            
-        } catch (e) {
-            if(document.getElementById(loadId)) document.getElementById(loadId).remove();
-            chatBox.innerHTML += `<div class="flex mb-6 gap-4 items-start"><div class="bg-red-50 text-red-600 p-4 rounded-2xl rounded-tl-none border border-red-100 max-w-[85%] text-[15px] shadow-sm"><strong class="block mb-1">Error processing request:</strong>${e.message}</div></div>`;
-        }
+        sessions[currentSid].messages.push({ role: "assistant", content: data.reply });
+        saveToLocalStorage();
+        renderHistoryList();
+        renderAiBubble(data.reply);
         
-        btnSend.disabled = false;
-        chatBox.scrollTop = chatBox.scrollHeight;
-    });
-}
+    } catch (e) {
+        if(document.getElementById(loadId)) document.getElementById(loadId).remove();
+        document.getElementById('chat-messages').innerHTML += `<div class="flex mb-6 gap-4 items-start"><div class="bg-red-50 text-red-600 p-4 rounded-2xl rounded-tl-none border border-red-100 max-w-[85%] text-sm shadow-sm"><strong>Error:</strong> ${e.message}</div></div>`;
+    }
+    
+    btnSend.disabled = false;
+    document.getElementById('chat-messages').scrollTop = document.getElementById('chat-messages').scrollHeight;
+});
 
-// 8. Boot & Service Worker
-initApp();
+// 5. Tool Modals
+const setModal = document.getElementById('settings-modal');
+const doiModal = document.getElementById('doi-modal');
 
-if ('serviceWorker' in navigator) {
-  window.addEventListener('load', () => {
-    navigator.serviceWorker.register('/sw.js', { scope: '/' })
-      .catch(err => console.error('PWA SW failed:', err));
-  });
-}
+document.getElementById('btn-open-settings').addEventListener('click', () => {
+    if(currentSettings) {
+        document.getElementById('settings-provider').value = currentSettings.provider;
+        document.getElementById('settings-url').value = currentSettings.base_url;
+        document.getElementById('settings-apikey').value = currentSettings.api_key;
+        renderModelLists();
+    }
+    setModal.classList.remove('hidden');
+    if(window.innerWidth < 768) toggleSidebar();
+});
+
+document.getElementById('btn-save-settings').addEventListener('click', async () => {
+    const payload = {
+        provider: document.getElementById('settings-provider').value,
+        base_url: document.getElementById('settings-url').value,
+        api_key: document.getElementById('settings-apikey').value,
+        models_openrouter: modelsOR,
+        models_nvidia: modelsNV,
+        current_model: document.getElementById('model-select').value
+    };
+    await fetch('/api/settings', { method: 'POST', body: JSON.stringify(payload) });
+    setModal.classList.add('hidden');
+    initApp();
+});
+
+document.getElementById('btn-open-doi').addEventListener('click', () => {
+    doiModal.classList.remove('hidden');
+    if(window.innerWidth < 768) toggleSidebar();
+});
+
+document.getElementById('btn-validate-doi-submit').addEventListener('click', async () => {
+    const doi = document.getElementById('doi-input').value;
+    const resDiv = document.getElementById('doi-result');
+    if(!doi) return;
+    resDiv.classList.remove('hidden');
+    resDiv.innerHTML = `Validating...`;
+    const res = await fetch('/api/validate_doi', { method: 'POST', body: JSON.stringify({doi: doi}) });
+    const data = await res.json();
+    if(data.error) resDiv.innerHTML = `<span class="text-red-500">${data.error}</span>`;
+    else resDiv.innerHTML = `<strong>${data.title}</strong><br><span class="text-xs">${data.authors} (${data.year})</span>`;
+});
+
+// 6. PDF Logic
+function removeAttach() {
+    pdfText = ""; pdfFilename = "";
+    document.getElementById('pdf-input').value = "";
+    document.getElementById('attach-badge').classList.add('hidden');
+}
+document.getElementById('btn-attach').addEventListener('click', () => document.getElementById('pdf-input').click());
+document.getElementById('pdf-input').addEventListener('change', async (e) => {
+    const file = e.target.files[0];
+    if(!file) return;
+    const formData = new FormData();
+    formData.append('file', file);
+    document.getElementById('attach-name').textContent = "Extracting...";
+    document.getElementById('attach-badge').classList.remove('hidden');
+    const res = await fetch('/api/upload_pdf', { method: 'POST', body: formData });
+    const data = await res.json();
+    if(res.ok) { pdfText = data.text; pdfFilename = data.filename; document.getElementById('attach-name').textContent = pdfFilename; }
+    else { alert(data.error); removeAttach(); }
+});
+document.getElementById('btn-remove-attach').addEventListener('click', removeAttach);
+
+// Close Modals
+document.getElementById('btn-close-settings').onclick = () => setModal.classList.add('hidden');
+document.getElementById('btn-cancel-settings').onclick = () => setModal.classList.add('hidden');
+document.getElementById('btn-close-doi').onclick = () => doiModal.classList.add('hidden');
+
+tx.addEventListener("input", function() { this.style.height = 'auto'; this.style.height = (this.scrollHeight) + 'px'; });
+tx.addEventListener('keydown', (e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); btnSend.click(); }});
+
+// Boot
+initApp();