Update static/js/script.js

static/js/script.js

@@ -1,6 +1,6 @@
 /**
  * ORBIT – Educational Research Assistant
- * FULL V-MASTER SCRIPT - WITH "THINKING PROCESS" ILLUSION & ELEGANT UI
+ * FULL V-MASTER SCRIPT - WITH VISION (IMAGE), DOCX SUPPORT & THINKING ILLUSION
  */
 
 document.addEventListener('DOMContentLoaded', () => {
@@ -12,7 +12,9 @@ document.addEventListener('DOMContentLoaded', () => {
     let sessions = {};
     let appSettings = null;
     let isBusy = false;
-    let pdfText = ""; let pdfFilename = "";
+    
+    // Penampung File Universal
+    let attachedFile = null; 
 
     const DEFAULT_OR_MODELS = [
         "baidu/cobuddy:free",  
@@ -29,7 +31,7 @@ document.addEventListener('DOMContentLoaded', () => {
         "meta-llama/llama-3.3-70b-instruct:free"
     ];
 
-    // TOAST NOTIFICATION (DIJAMIN MUNCUL - MURNI VANILLA CSS)
+    // TOAST NOTIFICATION
     function showToast(message, isError = false) {
         let toast = $('orbit-toast');
         if (!toast) {
@@ -48,25 +50,16 @@ document.addEventListener('DOMContentLoaded', () => {
         toast.style.backgroundColor = isError ? '#ef4444' : '#10b981';
         toast.innerHTML = isError ? `<span>❌</span> <span>${message}</span>` : `<span>✅</span> <span>${message}</span>`;
         
-        setTimeout(() => {
-            toast.style.opacity = '1';
-            toast.style.transform = 'translate(-50%, 0)';
-        }, 10);
-        
-        setTimeout(() => {
-            toast.style.opacity = '0';
-            toast.style.transform = 'translate(-50%, -20px)';
-        }, 3000);
+        setTimeout(() => { toast.style.opacity = '1'; toast.style.transform = 'translate(-50%, 0)'; }, 10);
+        setTimeout(() => { toast.style.opacity = '0'; toast.style.transform = 'translate(-50%, -20px)'; }, 4000);
     }
 
-    // 1. DATA RECOVERY
     try {
         const stored = localStorage.getItem('orbit_sessions_v14');
         sessions = stored ? JSON.parse(stored) : {};
         if (typeof sessions !== 'object' || Array.isArray(sessions)) sessions = {};
     } catch(e) { sessions = {}; }
 
-    // 2. PWA INSTALL LOGIC
     const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
     let deferredPrompt;
     
@@ -89,7 +82,6 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     });
 
-    // 3. BOOT & INIT
     async function init() {
         try {
             const me = await fetch('/api/me', { cache: 'no-store' });
@@ -112,12 +104,7 @@ document.addEventListener('DOMContentLoaded', () => {
                 if (!localStorage.getItem('orbit_force_free_v6')) {
                     appSettings.models_openrouter = [...DEFAULT_OR_MODELS];
                     localStorage.setItem('orbit_force_free_v6', 'true');
-                    
-                    fetch('/api/settings', { 
-                        method: 'POST', 
-                        headers: {'Content-Type': 'application/json'}, 
-                        body: JSON.stringify(appSettings) 
-                    }).catch(err => console.error("Auto-save failed", err));
+                    fetch('/api/settings', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(appSettings) }).catch(err => console.error("Auto-save failed", err));
                 } else {
                     appSettings.models_openrouter = safeArr(appSettings.models_openrouter);
                 }
@@ -131,7 +118,6 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     }
 
-    // 4. SESSIONS & HISTORY
     function save() { try { localStorage.setItem('orbit_sessions_v14', JSON.stringify(sessions)); } catch(e){} }
     function newSession() { const id = Date.now().toString(); sessions[id] = { title: "New Chat", messages: [] }; loadSession(id); }
     addEvt('btn-new-chat', 'click', newSession);
@@ -140,9 +126,7 @@ document.addEventListener('DOMContentLoaded', () => {
         if(!sessions[id]) return;
         currentSid = id;
         
-        const cm = $('chat-messages'); 
-        const ws = $('welcome-msg');
-        
+        const cm = $('chat-messages'); const ws = $('welcome-msg');
         if(cm) cm.innerHTML = '';
         
         if(sessions[id].messages && sessions[id].messages.length > 0) {
@@ -153,8 +137,7 @@ document.addEventListener('DOMContentLoaded', () => {
         }
         
         renderHistory(); 
-        const ca = $('chat-area');
-        if(ca) ca.scrollTop = ca.scrollHeight;
+        const ca = $('chat-area'); if(ca) ca.scrollTop = ca.scrollHeight;
     }
 
     function renderHistory() {
@@ -168,7 +151,6 @@ document.addEventListener('DOMContentLoaded', () => {
     }
     window.ls = id => { loadSession(id); if(window.innerWidth < 768) toggleSidebar(); };
 
-    // 5. CHAT UI
     function renderBubble(role, content) {
         const isUser = (role === 'user');
         const wrap = document.createElement('div');
@@ -188,40 +170,53 @@ document.addEventListener('DOMContentLoaded', () => {
     async function sendChat() {
         if(isBusy) return;
         const raw = $('chat-textarea').value.trim();
-        if(!raw && !pdfText) return;
+        if(!raw && !attachedFile) return;
         
         $('chat-textarea').value = ''; $('chat-textarea').style.height = 'auto';
         if($('welcome-msg')) $('welcome-msg').classList.add('hidden');
         
         let full = raw; let display = raw.replace(/\n/g, '<br>');
-        if(pdfText) { full = `[PDF: ${pdfFilename}]\n${pdfText}\n\nUser: ${raw}`; display = `<div class="bg-blue-500 text-white text-[10px] px-2 py-1 rounded w-fit mb-1 font-bold">📄 ${pdfFilename}</div>${display}`; pdfText = ""; $('attach-badge').classList.add('hidden'); }
+        let payloadImage = null;
+        let historyContent = raw; // Khusus buat disimpen di memori lokal biar ga overload
+
+        // JIKA ADA FILE ATTACHED
+        if (attachedFile) {
+            if (attachedFile.type === 'document') {
+                full = `[Document: ${attachedFile.filename}]\n${attachedFile.text}\n\nUser: ${raw}`;
+                historyContent = full;
+                display = `<div class="bg-emerald-500 text-white text-[10px] px-2 py-1 rounded w-fit mb-2 font-bold flex items-center gap-1"><svg class="w-3 h-3" 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>${attachedFile.filename}</div>${display}`;
+            } else if (attachedFile.type === 'image') {
+                payloadImage = { base64: attachedFile.base64, mime: attachedFile.mime };
+                historyContent = `[Gambar Diunggah: ${attachedFile.filename}]\n\n${raw}`; // Base64 ga kita simpen ke localstorage biar ga crash HP user
+                display = `<div class="mb-2"><img src="data:${attachedFile.mime};base64,${attachedFile.base64}" class="max-h-[200px] rounded-xl border border-gray-200 shadow-sm bg-white" /></div>${display}`;
+            }
+            attachedFile = null;
+            $('attach-badge').classList.add('hidden');
+            $('pdf-input').value = '';
+        }
 
         if(!sessions[currentSid].messages || !sessions[currentSid].messages.length) sessions[currentSid].title = raw.slice(0, 20) || "New Chat";
-        sessions[currentSid].messages.push({ role: 'user', content: full, displayContent: display });
+        sessions[currentSid].messages.push({ role: 'user', content: historyContent, displayContent: display });
         renderBubble('user', display);
         
         isBusy = true; $('btn-send').disabled = true;
         
-        // --- ANIMASI KERANGKA BERPIKIR DIMULAI ---
+        // --- ANIMASI KERANGKA BERPIKIR ---
         const loadId = 'load-' + Date.now();
         const textId = 'text-' + Date.now();
-        
         const thinkingSteps = [
-            "Memahami konteks pertanyaan akademis...",
+            "Memahami konteks pertanyaan...",
             "Memindai literatur dan referensi yang relevan...",
-            "Mengekstrak poin-poin penting dari data...",
-            "Menyusun kerangka sintesis dan argumen...",
-            "Memvalidasi struktur logika...",
-            "Menyempurnakan tata bahasa dan penyajian akhir..."
+            "Mengekstrak poin-poin penting...",
+            "Menyusun kerangka sintesis...",
+            "Menyempurnakan tata bahasa..."
         ];
 
         if($('chat-messages')) { 
             $('chat-messages').insertAdjacentHTML('beforeend', `
                 <div id="${loadId}" class="flex mb-8 gap-4 items-start">
-                    <div class="w-9 h-9 rounded-2xl bg-white shadow-sm border border-gray-200 flex items-center justify-center shrink-0 overflow-hidden mt-1">
-                        <img src="/static/icon.png" class="w-5 h-5 object-contain" onerror="this.style.display='none'">
-                    </div>
-                    <div class="bg-white border border-gray-200 px-5 py-4 rounded-[24px] rounded-tl-[8px] shadow-sm flex flex-col gap-2 min-w-[220px] md:min-w-[300px]">
+                    <img src="/static/icon.png" class="w-8 h-8 rounded-full shadow-sm shrink-0">
+                    <div class="bg-white border border-gray-200 px-5 py-4 rounded-[24px] rounded-tl-[8px] shadow-sm flex flex-col gap-2 min-w-[220px]">
                         <div class="flex items-center gap-3 text-accent text-sm font-bold">
                             <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>
                             Thinking Process
@@ -241,17 +236,20 @@ document.addEventListener('DOMContentLoaded', () => {
                 stepIndex++;
             }
         }, 2200);
-        // --- ILUSI SELESAI ---
 
         try {
             const res = await fetch('/api/chat', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ prompt: full, model: $('model-select').value, messages: sessions[currentSid].messages.slice(0,-1) })
+                body: JSON.stringify({ 
+                    prompt: full, 
+                    model: $('model-select').value, 
+                    messages: sessions[currentSid].messages.slice(0,-1),
+                    image: payloadImage // Ngirim payload ke backend
+                })
             });
             const data = await res.json();
             
-            // Hentikan animasi saat API merespons
             clearInterval(thinkingInterval);
             if($(loadId)) $(loadId).remove();
             
@@ -260,20 +258,16 @@ document.addEventListener('DOMContentLoaded', () => {
             renderBubble('assistant', data.reply);
             save(); renderHistory();
         } catch(e) {
-            // Pastikan animasi juga berhenti jika error
             clearInterval(thinkingInterval);
             if($(loadId)) $(loadId).remove();
             renderBubble('assistant', `**Error:** ${e.message}`);
-        } finally { 
-            isBusy = false; $('btn-send').disabled = false; 
-        }
+        } finally { isBusy = false; $('btn-send').disabled = false; }
     }
 
     addEvt('btn-send', 'click', sendChat);
     addEvt('chat-textarea', 'keydown', e => { if(e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendChat(); } });
     if($('chat-textarea')) $('chat-textarea').addEventListener('input', function() { this.style.height = 'auto'; this.style.height = Math.min(this.scrollHeight, 160) + 'px'; });
 
-    // 6. SETTINGS MODAL
     const provMap = { "OpenRouter": "or", "Nvidia NIM": "nv", "Google Gemini": "gem", "AgentRouter": "ar", "Custom OpenAI": "oai" };
 
     function syncProviderUI() {
@@ -350,7 +344,6 @@ document.addEventListener('DOMContentLoaded', () => {
     bindAdd('btn-add-ar', 'inp-ar', 'models_agentrouter');
     bindAdd('btn-add-oai', 'inp-oai', 'models_openai');
 
-    // MANTAP: TYPO 'CLICK' UDAH DIBENERIN DI SINI !!!
     addEvt('btn-save-settings', 'click', async () => {
         const btn = $('btn-save-settings');
         const originalText = btn.textContent;
@@ -393,10 +386,7 @@ document.addEventListener('DOMContentLoaded', () => {
             console.error(e);
             showToast(`Error: ${e.message}`, true); 
         } finally {
-            setTimeout(() => {
-                btn.textContent = originalText;
-                btn.disabled = false;
-            }, 300);
+            setTimeout(() => { btn.textContent = originalText; btn.disabled = false; }, 300);
         }
     });
 
@@ -431,7 +421,6 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     });
 
-    // 8. MISC
     function toggleSidebar() { $('sidebar').classList.toggle('-translate-x-full'); $('sidebar-overlay').classList.toggle('hidden'); }
     addEvt('btn-hamburger', 'click', toggleSidebar); addEvt('btn-close-sidebar', 'click', toggleSidebar); addEvt('sidebar-overlay', 'click', toggleSidebar);
 
@@ -440,17 +429,46 @@ document.addEventListener('DOMContentLoaded', () => {
     }
     addEvt('btn-clear-chat-top', 'click', clr); addEvt('btn-clear-chat-mobile', 'click', clr);
 
+    // 8. LOGIKA UPLOAD MULTI-FILE 
     addEvt('btn-attach', 'click', () => $('pdf-input').click());
-    addEvt('btn-remove-attach', 'click', () => { pdfText = ""; $('attach-badge').classList.add('hidden'); });
+    addEvt('btn-remove-attach', 'click', () => { attachedFile = null; $('attach-badge').classList.add('hidden'); $('pdf-input').value = ''; });
+    
     if($('pdf-input')) {
         $('pdf-input').addEventListener('change', async e => {
-            const f = e.target.files[0]; if(!f) return; const fd = new FormData(); fd.append('file', f);
-            $('attach-badge').classList.remove('hidden'); $('attach-name').textContent = "Extracting...";
+            const f = e.target.files[0]; if(!f) return; 
+            
+            // VALIDASI EKSTENSI (GUE TAMBAHIN DISINI SESUAI MINTA LU)
+            const allowed = ['pdf', 'doc', 'docx', 'jpg', 'jpeg', 'png'];
+            const ext = f.name.split('.').pop().toLowerCase();
+            
+            if(!allowed.includes(ext)) {
+                showToast("Error: Ekstensi file tidak valid atau tidak diterima!", true);
+                $('pdf-input').value = ''; // Reset inputnya
+                return;
+            }
+
+            const fd = new FormData(); fd.append('file', f);
+            $('attach-badge').classList.remove('hidden'); 
+            $('attach-name').textContent = "Memproses file...";
+            
             try {
-                const res = await fetch('/api/upload_pdf', { method: 'POST', body: fd });
+                // Tembak ke endpoint yang udah gue update di app.py
+                const res = await fetch('/api/upload_file', { method: 'POST', body: fd });
                 const d = await res.json();
-                if(res.ok) { pdfText = d.text; pdfFilename = d.filename; $('attach-name').textContent = d.filename; } else { alert(d.error); $('attach-badge').classList.add('hidden'); }
-            } catch(e) { alert(e.message); $('attach-badge').classList.add('hidden'); }
+                
+                if(res.ok) { 
+                    attachedFile = d; // Nampung data (text atau gambar base64)
+                    $('attach-name').textContent = d.filename; 
+                } else { 
+                    showToast(d.error || "Gagal mengunggah file.", true); 
+                    $('attach-badge').classList.add('hidden'); 
+                    $('pdf-input').value = '';
+                }
+            } catch(e) { 
+                showToast(e.message, true); 
+                $('attach-badge').classList.add('hidden'); 
+                $('pdf-input').value = '';
+            }
         });
     }