Update static/js/script.js

static/js/script.js

@@ -1,634 +1,357 @@
-/**
- * ORBIT – SaaS Client Logic
- * Settings & API key live on the server (DB-backed).
- * Chat sessions stored in localStorage, keyed per user.
- */
-
-// ─────────────────────────────────────
-// Constants
-// ─────────────────────────────────────
-const PROVIDER_URLS = {
-  "OpenRouter":    "https://openrouter.ai/api/v1/chat/completions",
-  "Nvidia NIM":    "https://integrate.api.nvidia.com/v1/chat/completions",
-  "Google Gemini": "https://generativelanguage.googleapis.com/v1beta/models/",
-  "AgentRouter":   "https://agentrouter.org/v1/chat/completions",
-  "Custom OpenAI": "https://api.openai.com/v1/chat/completions",
-};
-
-// ─────────────────────────────────────
-// State
-// ─────────────────────────────────────
-let currentUser  = null;
-let appSettings  = null;
-let sessions     = {};
-let currentSid   = null;
-let attachment   = null;   // { text, filename, wordCount }
-let isBusy       = false;
-let sessionsKey  = "orbit_sessions";
-
-// ─────────────────────────────────────
-// DOM
-// ─────────────────────────────────────
-const $ = id => document.getElementById(id);
-const chatMessages  = $("chat-messages");
-const chatTextarea  = $("chat-textarea");
-const btnSend       = $("btn-send");
-const sendIcon      = $("send-icon");
-const loadingIcon   = $("loading-icon");
-const welcomeScreen = $("welcome-screen");
-const attachBadge   = $("attach-badge");
-const attachNameEl  = $("attach-name");
-const modelSelect   = $("model-select");
-const historyList   = $("history-list");
-const chatTitle     = $("chat-title");
-
-// ─────────────────────────────────────
-// LocalStorage
-// ─────────────────────────────────────
-function saveSessions() {
-  try { localStorage.setItem(sessionsKey, JSON.stringify(sessions)); } catch (_) {}
-}
-function loadSessions() {
-  try { sessions = JSON.parse(localStorage.getItem(sessionsKey) || "{}"); }
-  catch (_) { sessions = {}; }
-}
-
-// ─────────────────────────────────────
-// Session Management
-// ─────────────────────────────────────
-function newSession() {
-  const id = String(Date.now());
-  sessions[id] = { title: "New Chat", messages: [] };
-  currentSid   = id;
-  saveSessions();
-  return id;
-}
-function getMessages() {
-  if (!currentSid || !sessions[currentSid]) newSession();
-  return sessions[currentSid].messages;
-}
-function appendMessage(role, content) {
-  const msgs = getMessages();
-  msgs.push({ role, content });
-  if (role === "user" && msgs.filter(m => m.role === "user").length === 1) {
-    sessions[currentSid].title = content.split(" ").slice(0, 7).join(" ") + "…";
-    chatTitle.textContent = sessions[currentSid].title;
-    renderSidebar();
-  }
-  saveSessions();
-}
-
-// ─────────────────────────────────────
-// Sidebar
-// ─────────────────────────────────────
-function renderSidebar() {
-  historyList.innerHTML = "";
-  const entries = Object.entries(sessions).sort(([a], [b]) => Number(b) - Number(a));
-  entries.forEach(([id, s]) => {
-    const btn = document.createElement("button");
-    const isActive = id === currentSid;
-    btn.className = `sidebar-item w-full text-left px-3 py-2 rounded-xl text-xs truncate transition-all ${
-      isActive
-        ? "bg-accent-light text-accent font-semibold"
-        : "text-gray-600 hover:bg-white hover:shadow-sm font-medium"
-    }`;
-    btn.textContent = s.title || "New Chat";
-    btn.addEventListener("click", () => loadSession(id));
-    historyList.appendChild(btn);
-  });
+let chatHistory = [];
+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)
+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();
+            modelsOR = currentSettings.models_openrouter || [];
+            modelsNV = currentSettings.models_nvidia || [];
+            populateModelDropdown(currentSettings);
+        }
+        renderHistoryList();
+    } catch (error) {
+        window.location.href = '/login';
+    }
 }
 
-function loadSession(id) {
-  currentSid = id;
-  clearChatView();
-  const msgs = sessions[id]?.messages || [];
-  if (msgs.length) {
-    hideWelcome();
-    msgs.forEach(m => renderBubble(m.role, m.content, false));
-    scrollBottom();
-  } else {
-    showWelcome();
-  }
-  chatTitle.textContent = sessions[id]?.title || "New Chat";
-  renderSidebar();
+function populateModelDropdown(settings) {
+    const select = document.getElementById('model-select');
+    select.innerHTML = '';
+    let models = [];
+    if (settings.provider === 'Google Gemini') models = ['gemini-1.5-pro-latest', 'gemini-1.5-flash-latest'];
+    else if (settings.provider === 'OpenRouter') models = settings.models_openrouter || [];
+    else if (settings.provider === 'Nvidia NIM') models = settings.models_nvidia || [];
+    else models = [settings.current_model || 'default-model'];
+
+    models.forEach(m => {
+        let opt = document.createElement('option');
+        opt.value = m;
+        opt.textContent = m;
+        if(m === settings.current_model) opt.selected = true;
+        select.appendChild(opt);
+    });
 }
 
-// ─────────────────────────────────────
-// Model Dropdown — Dynamic by Provider
-// ─────────────────────────────────────
-function populateModelSelect() {
-  if (!appSettings) return;
-  const list = appSettings.provider === "Nvidia NIM"
-    ? (appSettings.models_nvidia || [])
-    : (appSettings.models_openrouter || []);
-
-  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);
-  });
-  // fallback: if current_model not in list, select first
-  if (modelSelect.options.length && !modelSelect.value) {
-    modelSelect.selectedIndex = 0;
-  }
-}
+// 2. Sidebar & Clear Chat Logic
+const sidebar = document.getElementById('sidebar');
+const overlay = document.getElementById('sidebar-overlay');
 
-modelSelect.addEventListener("change", async () => {
-  if (!appSettings) return;
-  appSettings.current_model = modelSelect.value;
-  try {
-    await fetch("/api/settings", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ current_model: modelSelect.value }),
-    });
-  } catch (_) {}
-});
-
-// ─────────────────────────────────────
-// Chat UI Helpers
-// ─────────────────────────────────────
-function showWelcome() {
-  welcomeScreen.style.display = "";
-  welcomeScreen.style.opacity = "1";
-}
-function hideWelcome() {
-  welcomeScreen.style.display = "none";
-}
-function clearChatView() {
-  chatMessages.innerHTML = "";
-}
-function scrollBottom() {
-  chatMessages.scrollTop = chatMessages.scrollHeight;
+function toggleSidebar() {
+    sidebar.classList.toggle('-translate-x-full');
+    overlay.classList.toggle('hidden');
 }
 
-function simpleMarkdown(text) {
-  let h = text
-    .replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-  // code blocks
-  h = h.replace(/```(\w*)\n?([\s\S]*?)```/g, (_, lang, c) =>
-    `<pre><code>${c.trim()}</code></pre>`);
-  // inline code
-  h = h.replace(/`([^`\n]+)`/g, "<code>$1</code>");
-  // bold / italic
-  h = h.replace(/\*\*\*(.+?)\*\*\*/g, "<strong><em>$1</em></strong>");
-  h = h.replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>");
-  h = h.replace(/\*(.+?)\*/g, "<em>$1</em>");
-  // headings
-  h = h.replace(/^### (.+)$/gm, "<h3>$1</h3>");
-  h = h.replace(/^## (.+)$/gm,  "<h2>$1</h2>");
-  h = h.replace(/^# (.+)$/gm,   "<h1>$1</h1>");
-  // blockquote
-  h = h.replace(/^> (.+)$/gm, "<blockquote>$1</blockquote>");
-  // lists
-  h = h.replace(/^\s*[-*] (.+)/gm, "<li>$1</li>");
-  h = h.replace(/(<li>.*<\/li>\n?)+/g, m => `<ul>${m}</ul>`);
-  // paragraphs
-  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;
+// 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);
+
+if(overlay) overlay.addEventListener('click', toggleSidebar);
+
+function clearChat() {
+    chatHistory = [];
+    removeAttach();
+    const chatBox = document.getElementById('chat-messages');
+    if(chatBox) {
+        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();
+    }
 }
 
-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 btnNewChat = document.getElementById('btn-new-chat');
+if(btnNewChat) btnNewChat.addEventListener('click', clearChat);
 
-  const col = document.createElement("div");
-  col.className = isUser ? "flex flex-col items-end" : "flex flex-col items-start";
+const btnClearTop = document.getElementById('btn-clear-chat-top');
+if(btnClearTop) btnClearTop.addEventListener('click', clearChat);
 
-  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";
+// 3. LocalStorage History
+function renderHistoryList() {
+    const list = document.getElementById('history-list');
+    if(!list) return;
+    if(savedSessions.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('');
+}
 
-  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";
+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();
+    }
+}
 
-  if (isUser) bub.textContent = content;
-  else bub.innerHTML = simpleMarkdown(content);
+// 4. Modal Settings
+const setModal = document.getElementById('settings-modal');
 
-  col.appendChild(label);
-  col.appendChild(bub);
-  wrap.appendChild(col);
-  chatMessages.appendChild(wrap);
-  if (animate) scrollBottom();
+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('');
+    }
 }
 
-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();
-}
-function removeTyping() {
-  const e = $("typing-indicator");
-  if (e) e.remove();
+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(); }
+    });
 }
 
-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);
-  scrollBottom();
+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(); }
+    });
 }
 
-// ─────────────────────────────────────
-// Busy State
-// ─────────────────────────────────────
-function setBusy(busy) {
-  isBusy = busy;
-  btnSend.disabled      = busy;
-  chatTextarea.disabled = busy;
-  sendIcon.classList.toggle("hidden", busy);
-  loadingIcon.classList.toggle("hidden", !busy);
+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();
+    });
 }
 
-// ─────────────────────────────────────
-// Send Chat
-// ─────────────────────────────────────
-async function sendChat() {
-  if (isBusy) return;
-  const raw = chatTextarea.value.trim();
-  if (!raw) return;
-
-  let fullPrompt = raw;
-  if (attachment) {
-    fullPrompt = `Document Context:\n${attachment.text}\n\nUser Question: ${raw}`;
-    clearAttachment();
-  }
-
-  chatTextarea.value = "";
-  autoResize();
-  hideWelcome();
-  setBusy(true);
-
-  renderBubble("user", raw);
-  appendMessage("user", fullPrompt);
-  renderTyping();
-
-  try {
-    const res  = await fetch("/api/chat", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({
-        prompt:   fullPrompt,
-        model:    modelSelect.value || appSettings?.current_model || "",
-        messages: getMessages().slice(0, -1),
-      }),
+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
     });
-    const data = await res.json();
-    removeTyping();
-    if (!res.ok || data.error) {
-      renderSys(data.error || "Unknown error.", true);
-    } else {
-      renderBubble("assistant", data.reply);
-      appendMessage("assistant", data.reply);
-    }
-  } catch (err) {
-    removeTyping();
-    renderSys(`Network error: ${err.message}`, true);
-  } finally {
-    setBusy(false);
-    chatTextarea.focus();
-  }
 }
 
-// ─────────────────────────────────────
-// Textarea Auto-resize
-// ─────────────────────────────────────
-function autoResize() {
-  chatTextarea.style.height = "auto";
-  chatTextarea.style.height = Math.min(chatTextarea.scrollHeight, 160) + "px";
-}
-chatTextarea.addEventListener("input", autoResize);
-chatTextarea.addEventListener("keydown", e => {
-  if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); sendChat(); }
-});
-btnSend.addEventListener("click", sendChat);
-
-// ─────────────────────────────────────
-// PDF Attachment
-// ─────────────────────────────────────
-function clearAttachment() {
-  attachment = null;
-  attachBadge.classList.add("hidden");
-  attachNameEl.textContent = "";
+// 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();
+    });
 }
 
-$("btn-attach").addEventListener("click", () => $("pdf-input").click());
-$("btn-remove-attach").addEventListener("click", clearAttachment);
-
-$("pdf-input").addEventListener("change", async e => {
-  const file = e.target.files[0];
-  if (!file) return;
-  e.target.value = "";
-  if (!file.name.toLowerCase().endsWith(".pdf")) {
-    renderSys("Only PDF files are supported.", true);
-    return;
-  }
-  const fd = new FormData();
-  fd.append("file", file);
-  renderSys(`Uploading "${file.name}"…`);
-  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; }
-    attachment = { text: data.text, filename: data.filename, wordCount: data.word_count };
-    attachNameEl.textContent = `${data.filename} · ${data.word_count} words`;
-    attachBadge.classList.remove("hidden");
-    renderSys(`"${data.filename}" attached — ${data.word_count} words extracted.`);
-  } catch (err) {
-    renderSys(`Upload failed: ${err.message}`, true);
-  }
-});
-
-// ─────────────────────────────────────
-// DOI Modal
-// ─────────────────────────────────────
-$("btn-doi").addEventListener("click", () => {
-  $("doi-modal").classList.remove("hidden");
-  $("doi-input").focus();
-});
-$("btn-close-doi").addEventListener("click", () => $("doi-modal").classList.add("hidden"));
-$("doi-modal").addEventListener("click", e => {
-  if (e.target === $("doi-modal")) $("doi-modal").classList.add("hidden");
-});
-$("doi-input").addEventListener("keydown", e => {
-  if (e.key === "Enter") $("btn-validate-doi").click();
-});
-
-$("btn-validate-doi").addEventListener("click", async () => {
-  const doi = $("doi-input").value.trim();
-  if (!doi) return;
-  $("doi-spinner").classList.remove("hidden");
-  $("doi-btn-text").textContent = "Validating…";
-  $("btn-validate-doi").disabled = true;
-  $("doi-result").classList.add("hidden");
-
-  try {
-    const res  = await fetch("/api/validate_doi", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ doi }),
+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>`;
+        }
     });
-    const data = await res.json();
-    $("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><p class="text-[10px] font-semibold text-gray-400 uppercase">DOI</p>
-               <p><a href="https://doi.org/${data.doi}" target="_blank" class="text-accent hover:underline text-sm">${data.doi}</a></p></div>
-        </div>`;
-      renderSys(`DOI validated: ${data.title} (${data.year})`);
-    }
-  } catch (err) {
-    $("doi-result").classList.remove("hidden");
-    $("doi-result").innerHTML = `<p class="text-red-500">${err.message}</p>`;
-  } finally {
-    $("doi-spinner").classList.add("hidden");
-    $("doi-btn-text").textContent = "Validate";
-    $("btn-validate-doi").disabled = false;
-  }
-});
-
-// ─────────────────────────────────────
-// Settings Modal
-// ─────────────────────────────────────
-function renderModelList(containerId, models, provider) {
-  const list = $(containerId);
-  list.innerHTML = "";
-  (models || []).forEach((m, i) => {
-    const row = document.createElement("div");
-    row.className = "flex items-center justify-between px-2 py-1.5 rounded-lg hover:bg-white group transition-colors";
-    row.innerHTML = `
-      <span class="text-xs text-gray-700 truncate flex-1">${m}</span>
-      <button data-i="${i}" data-prov="${provider}"
-        class="btn-del-model text-gray-300 hover:text-red-400 ml-2 text-xs font-bold opacity-0 group-hover:opacity-100 transition-opacity">✕</button>`;
-    list.appendChild(row);
-  });
-  list.querySelectorAll(".btn-del-model").forEach(btn => {
-    btn.addEventListener("click", () => {
-      const idx  = Number(btn.dataset.i);
-      const prov = btn.dataset.prov;
-      if (prov === "OpenRouter") {
-        appSettings.models_openrouter.splice(idx, 1);
-        renderModelList("models-list-openrouter", appSettings.models_openrouter, "OpenRouter");
-      } else {
-        appSettings.models_nvidia.splice(idx, 1);
-        renderModelList("models-list-nvidia", appSettings.models_nvidia, "Nvidia NIM");
-      }
-    });
-  });
 }
 
-function openSettings() {
-  if (!appSettings) return;
-  $("settings-provider").value = appSettings.provider;
-  $("settings-url").value      = appSettings.base_url || "";
-  $("settings-apikey").value   = appSettings.api_key  || "";
-  renderModelList("models-list-openrouter", appSettings.models_openrouter, "OpenRouter");
-  renderModelList("models-list-nvidia",     appSettings.models_nvidia,     "Nvidia NIM");
-  $("settings-modal").classList.remove("hidden");
-}
-function closeSettings() {
-  $("settings-modal").classList.add("hidden");
+// 6. PDF Attachment
+const btnAttach = document.getElementById('btn-attach');
+const pdfInput = document.getElementById('pdf-input');
+
+if(btnAttach && pdfInput) {
+    btnAttach.addEventListener('click', () => pdfInput.click());
+    
+    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();
+        }
+    });
 }
 
-$("settings-provider").addEventListener("change", () => {
-  const prov = $("settings-provider").value;
-  if (PROVIDER_URLS[prov]) $("settings-url").value = PROVIDER_URLS[prov];
-});
-
-$("btn-toggle-key").addEventListener("click", () => {
-  const inp = $("settings-apikey");
-  inp.type = inp.type === "password" ? "text" : "password";
-});
-
-// Add-model handlers
-function addModelHandler(inputId, listKey, containerId, provLabel, btnSuffix) {
-  function 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);
-    }
-  }
-  $(`btn-add-model-${btnSuffix}`).addEventListener("click", doAdd);
-  $(inputId).addEventListener("keydown", e => { if (e.key === "Enter") { e.preventDefault(); doAdd(); } });
+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');
 }
-addModelHandler("new-model-or", "models_openrouter", "models-list-openrouter", "OpenRouter", "or");
-addModelHandler("new-model-nv", "models_nvidia",     "models-list-nvidia",     "Nvidia NIM", "nv");
-
-$("btn-save-settings").addEventListener("click", async () => {
-  const payload = {
-    provider:          $("settings-provider").value,
-    base_url:          $("settings-url").value.trim(),
-    api_key:           $("settings-apikey").value.trim(),
-    models_openrouter: appSettings.models_openrouter,
-    models_nvidia:     appSettings.models_nvidia,
-  };
-  try {
-    const res = await fetch("/api/settings", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(payload),
+
+const btnRemoveAttach = document.getElementById('btn-remove-attach');
+if(btnRemoveAttach) btnRemoveAttach.addEventListener('click', removeAttach);
+
+// 7. Chat Logic
+const tx = document.getElementById('chat-textarea');
+const btnSend = document.getElementById('btn-send');
+
+if(tx) {
+    tx.addEventListener("input", function() { 
+        this.style.height = 'auto'; 
+        this.style.height = (this.scrollHeight) + 'px'; 
+    });
+    
+    tx.addEventListener('keydown', function(e) { 
+        if (e.key === 'Enter' && !e.shiftKey) { 
+            e.preventDefault(); 
+            if(btnSend) btnSend.click(); 
+        }
     });
-    appSettings = await res.json();
-    populateModelSelect();
-    closeSettings();
-    renderSys("Settings saved successfully.");
-  } catch (err) {
-    renderSys(`Could not save settings: ${err.message}`, true);
-  }
-});
-
-$("btn-settings").addEventListener("click", openSettings);
-$("btn-close-settings").addEventListener("click", closeSettings);
-$("btn-cancel-settings").addEventListener("click", closeSettings);
-$("settings-modal").addEventListener("click", e => {
-  if (e.target === $("settings-modal")) closeSettings();
-});
-
-// ─────────────────────────────────────
-// Sidebar / Nav Buttons
-// ─────────────────────────────────────
-$("btn-new-chat").addEventListener("click", () => {
-  newSession();
-  clearChatView();
-  showWelcome();
-  clearAttachment();
-  chatTitle.textContent = "New Chat";
-  renderSidebar();
-  chatTextarea.focus();
-});
-
-$("btn-clear-chat").addEventListener("click", handleClear);
-$("btn-clear-chat-mobile").addEventListener("click", handleClear);
-
-function handleClear() {
-  if (!currentSid) return;
-  sessions[currentSid].messages = [];
-  sessions[currentSid].title    = "New Chat";
-  saveSessions();
-  clearChatView();
-  showWelcome();
-  chatTitle.textContent = "New Chat";
-  renderSidebar();
 }
 
-function toggleSidebar() {
-  const sidebar = $("sidebar");
-  const overlay = $("sidebar-overlay");
-  
-  // Mobile behavior
-  if (window.innerWidth < 768) {
-    if (sidebar.classList.contains("-translate-x-full")) {
-      sidebar.classList.remove("-translate-x-full");
-      overlay.classList.remove("hidden");
-    } else {
-      sidebar.classList.add("-translate-x-full");
-      overlay.classList.add("hidden");
-    }
-  } else {
-    // Desktop behavior (hide completely)
-    sidebar.classList.toggle("hidden");
-  }
+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;
+        
+        // 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);
+        
+        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>`;
+        }
+        
+        btnSend.disabled = false;
+        chatBox.scrollTop = chatBox.scrollHeight;
+    });
 }
 
-$("btn-toggle-sidebar").addEventListener("click", toggleSidebar);
-$("btn-hamburger").addEventListener("click", toggleSidebar);
-$("sidebar-overlay").addEventListener("click", toggleSidebar);
-
-// ─────────────────────────────────────
-// Boot
-// ─────────────────────────────────────
-async function init() {
-  try {
-    // 1. Load current user
-    const meRes = await fetch("/api/me");
-    if (meRes.status === 401) { window.location.href = "/login"; return; }
-    currentUser = await meRes.json();
-
-    // 2. Populate sidebar profile
-    const avatar = $("user-avatar");
-    if (currentUser.picture) {
-      avatar.src = currentUser.picture;
-      avatar.alt = currentUser.name;
-    } else {
-      avatar.style.background = "#1a73e8";
-    }
-    $("user-name").textContent = currentUser.name || currentUser.email || "User";
-
-    // 3. Scope sessions to user
-    sessionsKey = `orbit_sessions_${currentUser.id}`;
-    loadSessions();
-
-    // 4. Load server settings
-    const setRes = await fetch("/api/settings");
-    if (!setRes.ok) throw new Error("Failed to load settings");
-    appSettings = await setRes.json();
-    populateModelSelect();
-
-    // 5. Restore or create chat session
-    const ids = Object.keys(sessions).sort((a, b) => Number(b) - Number(a));
-    if (ids.length) {
-      currentSid = ids[0];
-      const msgs = sessions[currentSid]?.messages || [];
-      if (msgs.length) {
-        hideWelcome();
-        msgs.forEach(m => renderBubble(m.role, m.content, false));
-        const t = sessions[currentSid]?.title || "New Chat";
-        chatTitle.textContent = t;
-        scrollBottom();
-      } else {
-        showWelcome();
-      }
-    } else {
-      newSession();
-      showWelcome();
-    }
-    renderSidebar();
-
-    // 6. First-run hint if no API key
-    if (!appSettings.api_key) {
-      setTimeout(() => renderSys("Welcome to ORBIT! Open Settings to add your API key."), 500);
-    }
-  } catch (err) {
-    renderSys(`Startup error: ${err.message}`, true);
-  }
-  chatTextarea.focus();
-}
+// 8. Boot & Service Worker
+initApp();
 
-init();
+if ('serviceWorker' in navigator) {
+  window.addEventListener('load', () => {
+    navigator.serviceWorker.register('/sw.js', { scope: '/' })
+      .catch(err => console.error('PWA SW failed:', err));
+  });
+}