Update static/js/script.js

static/js/script.js

@@ -1,6 +1,6 @@
 /**
  * ORBIT – Educational Research Assistant
- * Logic with Multi-Session History Support
+ * Logic with Multi-Session History Support & Crash Protection
  */
 
 let currentSid = null;
@@ -15,7 +15,13 @@ let pdfFilename = "";
 async function initApp() {
     try {
         const userRes = await fetch('/api/me');
-        if (!userRes.ok) throw new Error('Not logged in');
+        // HANYA lempar ke login kalau benar-benar statusnya 401 (Unauthorized)
+        if (userRes.status === 401) {
+            window.location.href = '/login';
+            return;
+        }
+        
+        if (!userRes.ok) throw new Error('Gagal memuat data user');
         const userData = await userRes.json();
         
         document.getElementById('user-name').textContent = userData.name || userData.email;
@@ -32,7 +38,7 @@ async function initApp() {
         renderHistoryList();
         
         // Load sesi terakhir jika ada, kalau tak buat sesi baru
-        const ids = Object.keys(sessions).sort((a, b) => b - a);
+        const ids = Object.keys(sessions).sort((a, b) => Number(b) - Number(a));
         if (ids.length > 0) {
             switchSession(ids[0]);
         } else {
@@ -40,8 +46,8 @@ async function initApp() {
         }
 
     } catch (error) {
-        console.error("Init failed:", error);
-        window.location.href = '/login';
+        // Skrip berhenti di sini kalau ada error ringan, tapi TIDAK AKAN infinite loop
+        console.error("System Init Error:", error);
     }
 }
 
@@ -81,7 +87,8 @@ function newSession() {
     displayMessages();
 }
 
-function switchSession(id) {
+// Jadikan fungsi ini global agar bisa dipanggil dari onclick HTML
+window.switchSession = function(id) {
     if (!sessions[id]) return;
     currentSid = id;
     renderHistoryList();
@@ -94,7 +101,7 @@ function displayMessages() {
     if(!chatBox) return;
     chatBox.innerHTML = '';
     
-    const msgs = sessions[currentSid].messages;
+    const msgs = sessions[currentSid]?.messages || [];
     
     if (msgs.length === 0) {
         chatBox.innerHTML = `
@@ -118,7 +125,7 @@ function displayMessages() {
 function renderHistoryList() {
     const list = document.getElementById('history-list');
     if(!list) return;
-    const ids = Object.keys(sessions).sort((a, b) => b - a);
+    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>`;
@@ -128,7 +135,7 @@ function 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}">
+        <button onclick="window.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>`;
@@ -140,24 +147,26 @@ const sidebar = document.getElementById('sidebar');
 const overlay = document.getElementById('sidebar-overlay');
 
 function toggleSidebar() {
-    sidebar.classList.toggle('-translate-x-full');
-    overlay.classList.toggle('hidden');
+    if(sidebar) sidebar.classList.toggle('-translate-x-full');
+    if(overlay) overlay.classList.toggle('hidden');
 }
 
-document.getElementById('btn-hamburger').addEventListener('click', toggleSidebar);
+if(document.getElementById('btn-hamburger')) 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(overlay) overlay.addEventListener('click', toggleSidebar);
+
+if(document.getElementById('btn-new-chat')) document.getElementById('btn-new-chat').addEventListener('click', newSession);
+if(document.getElementById('btn-clear-chat-top')) {
+    document.getElementById('btn-clear-chat-top').addEventListener('click', () => {
+        if(confirm("Clear this conversation?")) {
+            sessions[currentSid].messages = [];
+            sessions[currentSid].title = "New Chat";
+            saveToLocalStorage();
+            displayMessages();
+            renderHistoryList();
+        }
+    });
+}
 
 // 4. Chat Logic
 const tx = document.getElementById('chat-textarea');
@@ -165,149 +174,171 @@ const btnSend = document.getElementById('btn-send');
 
 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>`;
+    const safeContent = String(content || "");
+    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">${safeContent.replace(/\n/g, '<br>')}</div></div>`;
 }
 
 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>`;
-}
-
-btnSend.addEventListener('click', async () => {
-    let prompt = tx.value.trim();
-    if(!prompt && !pdfText) return;
-    
-    if(document.getElementById('welcome-msg')) document.getElementById('welcome-msg').remove();
-
-    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();
-    }
-
-    // Kemaskini History tajuk jika ini mesej pertama
-    if(sessions[currentSid].messages.length === 0) {
-        sessions[currentSid].title = prompt.substring(0, 25) || pdfFilename.substring(0, 25);
+    try {
+        const safeContent = String(content || "");
+        const renderedMarkdown = marked.parse(safeContent);
+        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) {
+        console.error("Markdown parse error:", e);
+        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-red-200 text-red-500 p-5 rounded-2xl rounded-tl-none max-w-[90%] md:max-w-[85%] prose-orbit shadow-sm">Pesan tidak dapat ditampilkan.</div></div>`;
     }
+}
 
-    sessions[currentSid].messages.push({ role: "user", content: fullSystemPrompt, displayContent: displayPrompt });
-    renderUserBubble(displayPrompt);
-    
-    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;
+        
+        if(document.getElementById('welcome-msg')) document.getElementById('welcome-msg').remove();
 
-    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();
+        tx.value = ''; 
+        tx.style.height = 'auto';
+        btnSend.disabled = true;
         
-        if(!res.ok) throw new Error(data.error || 'Server error');
+        let displayPrompt = prompt;
+        let fullSystemPrompt = prompt;
         
-        sessions[currentSid].messages.push({ role: "assistant", content: data.reply });
+        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();
+        }
+
+        if(sessions[currentSid].messages.length === 0) {
+            sessions[currentSid].title = prompt.substring(0, 25) || pdfFilename.substring(0, 25);
+        }
+
+        sessions[currentSid].messages.push({ role: "user", content: fullSystemPrompt, displayContent: displayPrompt });
+        renderUserBubble(displayPrompt);
         saveToLocalStorage();
         renderHistoryList();
-        renderAiBubble(data.reply);
         
-    } 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;
-});
+        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;
+
+        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();
+            
+            if(!res.ok) throw new Error(data.error || 'Server error');
+            
+            sessions[currentSid].messages.push({ role: "assistant", content: data.reply });
+            saveToLocalStorage();
+            renderAiBubble(data.reply);
+            
+        } 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;
+    });
+}
 
 // 5. Tool Modals
 const setModal = document.getElementById('settings-modal');
 const doiModal = document.getElementById('doi-modal');
 
-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();
-});
+if(document.getElementById('btn-open-settings')) {
+    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-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>`;
-});
+if(document.getElementById('btn-save-settings')) {
+    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();
+    });
+}
+
+if(document.getElementById('btn-open-doi')) {
+    document.getElementById('btn-open-doi').addEventListener('click', () => {
+        doiModal.classList.remove('hidden');
+        if(window.innerWidth < 768) toggleSidebar();
+    });
+}
+
+if(document.getElementById('btn-validate-doi-submit')) {
+    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');
+    if(document.getElementById('pdf-input')) document.getElementById('pdf-input').value = "";
+    if(document.getElementById('attach-badge')) document.getElementById('attach-badge').classList.add('hidden');
+}
+
+if(document.getElementById('btn-attach')) document.getElementById('btn-attach').addEventListener('click', () => document.getElementById('pdf-input').click());
+if(document.getElementById('pdf-input')) {
+    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-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);
+if(document.getElementById('btn-remove-attach')) 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');
+if(document.getElementById('btn-close-settings')) document.getElementById('btn-close-settings').onclick = () => setModal.classList.add('hidden');
+if(document.getElementById('btn-cancel-settings')) document.getElementById('btn-cancel-settings').onclick = () => setModal.classList.add('hidden');
+if(document.getElementById('btn-close-doi')) 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(); }});
+if(tx) {
+    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();