Spaces:

lvvignesh2122
/

Gemini-Rag-Fastapi-Pro

Running

App Files Files Community

lvvignesh2122 commited on 5 days ago

Commit

5f2824f

1 Parent(s): 5bf211e

feat: UI overhaul with dark mode, glassmorphism, and tavily dependency fix

Browse files

Files changed (5) hide show

frontend/index.html +68 -414
frontend/script.js +260 -0
frontend/style.css +363 -0
rag_eval_logs.jsonl +20 -0
requirements.txt +1 -0

frontend/index.html CHANGED Viewed

@@ -1,442 +1,96 @@
 <!DOCTYPE html>
-<html lang="en">
 <head>
-  <meta charset="UTF-8" />
   <title>Gemini RAG Assistant</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
-  <style>
-    :root {
-      --bg: radial-gradient(1200px 600px at top, #e0e7ff 0%, #f8fafc 60%);
-      --card: rgba(255, 255, 255, 0.9);
-      --border: rgba(15, 23, 42, 0.08);
-      --primary: #4f46e5;
-      --secondary: #0ea5e9;
-      --text: #0f172a;
-      --muted: #64748b;
-      --error: #dc2626;
-      --success: #16a34a;
-    }
-    [data-theme="dark"] {
-      --bg: radial-gradient(1200px 600px at top, #1e1b4b 0%, #0f172a 60%);
-      --card: rgba(30, 41, 59, 0.9);
-      --border: rgba(148, 163, 184, 0.1);
-      --primary: #818cf8;
-      --secondary: #38bdf8;
-      --text: #f1f5f9;
-      --muted: #94a3b8;
-      --error: #f87171;
-      --success: #4ade80;
-    }
-    * {
-      box-sizing: border-box;
-      font-family: Inter, sans-serif;
-    }
-    body {
-      margin: 0;
-      min-height: 100vh;
-      background: var(--bg);
-      display: flex;
-      color: var(--text);
-    }
-    /* Layout */
-    .app_layout {
-      display: grid;
-      grid-template-columns: 260px 1fr;
-      width: 100%;
-      height: 100vh;
-    }
-    /* Sidebar */
-    .sidebar {
-      background: rgba(255, 255, 255, 0.5);
-      /* Glass-ish */
-      backdrop-filter: blur(12px);
-      border-right: 1px solid var(--border);
-      padding: 24px;
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-      overflow-y: auto;
-    }
-    .main-content {
-      padding: 40px;
-      overflow-y: auto;
-      display: flex;
-      justify-content: center;
-    }
-    .container {
-      width: 100%;
-      max-width: 800px;
-      /* background: var(--card); Removed container bg for cleaner look in main area */
-      /* border-radius: 24px; */
-      /* padding: 36px; */
-      /* border: 1px solid var(--border); */
-      /* box-shadow: 0 40px 120px rgba(15, 23, 42, .15); */
-    }
-    .history-item {
-      padding: 10px 14px;
-      margin-bottom: 8px;
-      background: var(--card);
-      border: 1px solid var(--border);
-      border-radius: 10px;
-      cursor: pointer;
-      font-size: 0.9rem;
-      transition: all 0.2s;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    .history-item:hover {
-      background: var(--primary);
-      color: white;
-    }
-    .sidebar-header {
-      margin-bottom: 20px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-    .new-chat-btn {
-      width: 100%;
-      padding: 10px;
-      margin-bottom: 20px;
-      background: var(--primary);
-      color: white;
-      border: none;
-      border-radius: 10px;
-      cursor: pointer;
-      font-weight: 600;
-    }
-    h1 {
-      font-size: 2.2rem;
-      margin: 0;
-      font-weight: 700;
-      background: linear-gradient(135deg, #4f46e5, #06b6d4);
-      background-clip: text;
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-    }
-    .subtitle {
-      margin-top: 8px;
-      color: var(--muted);
-    }
-    .card {
-      margin-top: 28px;
-      padding: 24px;
-      border-radius: 18px;
-      border: 1px solid var(--border);
-      background: var(--card);
-    }
-    textarea,
-    input[type="file"] {
-      width: 100%;
-      padding: 14px;
-      border-radius: 14px;
-      border: 1px solid var(--border);
-      background: var(--card);
-      color: var(--text);
-    }
-    textarea {
-      min-height: 100px;
-    }
-    button {
-      padding: 12px 24px;
-      border-radius: 14px;
-      border: none;
-      background: var(--primary);
-      color: white;
-      font-weight: 600;
-      cursor: pointer;
-    }
-    button.secondary {
-      background: var(--secondary);
-    }
-    .row {
-      display: flex;
-      gap: 12px;
-      margin-top: 12px;
-    }
-    .answer {
-      margin-top: 24px;
-      padding: 22px;
-      border-radius: 16px;
-      border: 1px solid var(--border);
-      background: var(--card);
-      line-height: 1.6;
-    }
-    .confidence-badge {
-      margin-top: 12px;
-      display: inline-block;
-      padding: 4px 12px;
-      border-radius: 20px;
-      background: #dcfce7;
-      color: #166534;
-      font-size: 0.8rem;
-      font-weight: 600;
-    }
-    .citations {
-      margin-top: 14px;
-      font-size: 0.85rem;
-      color: var(--muted);
-    }
-  </style>
-</head>
-<body>
-  <div class="app_layout">
-    <div class="sidebar">
-      <div class="sidebar-header">
-        <h2 style="font-size: 1.2rem; margin:0;">History</h2>
-        <button onclick="clearHistory()"
-          style="background:none; border:none; color:var(--error); cursor:pointer; padding:0; font-size:0.8rem; width:auto; text-decoration:underline; margin:0;">Clear</button>
       </div>
-      <button class="new-chat-btn" onclick="newChat()">+ New Chat</button>
-      <div id="historyList"></div>
-    </div>
-    <div class="main-content">
-      <div class="container">
-        <h1>Gemini RAG Assistant</h1>
-        <div class="subtitle">
-          Upload documents · Ask questions · Get grounded answers ·
-          <a href="/frontend/analytics.html">📊 Analytics</a>
-        </div>
-        <div class="card">
-          <h3>Upload Knowledge</h3>
-          <input type="file" id="files" multiple />
-          <div class="row">
-            <button onclick="upload()">Upload</button>
-          </div>
-          <!-- Progress Bar Container -->
-          <div id="progressContainer" style="display: none; margin-top: 16px;">
-            <div style="background: var(--border); border-radius: 8px; overflow: hidden; height: 10px;">
-              <div id="progressBar"
-                style="width: 0%; height: 100%; background: var(--primary); transition: width 0.2s;">
-              </div>
-            </div>
-            <div id="progressText"
-              style="margin-top: 6px; font-size: 0.85rem; color: var(--muted); text-align: center;">0%
-            </div>
-          </div>
-          <div id="uploadStatus" style="margin-top: 12px; font-weight: 500;"></div>
         </div>
-        <div class="card">
-          <h3>Ask or Summarize</h3>
-          <textarea id="question"></textarea>
-          <div class="row">
-            <button onclick="ask()">Ask</button>
-            <button class="secondary" onclick="summarize()">Summarize</button>
-          </div>
         </div>
-        <div id="answerBox" class="answer" style="display:none;"></div>
       </div>
-    </div>
-  </div>
-  <script>
-    const MAX_FILE_SIZE = 50 * 1024 * 1024; // 50MB
-    let threadId = sessionStorage.getItem("rag_thread_id") || crypto.randomUUID();
-    sessionStorage.setItem("rag_thread_id", threadId);
-    async function upload() {
-      const fileInput = document.getElementById("files");
-      const files = fileInput.files;
-      const statusDiv = document.getElementById("uploadStatus");
-      const progressContainer = document.getElementById("progressContainer");
-      const progressBar = document.getElementById("progressBar");
-      const progressText = document.getElementById("progressText");
-      if (!files.length) {
-        alert("Please select at least one file.");
-        return;
-      }
-      // 1. Client-side Validation
-      for (let f of files) {
-        if (f.size > MAX_FILE_SIZE) {
-          alert(`File "${f.name}" is too large (>${MAX_FILE_SIZE / 1024 / 1024}MB). Max allowed is 50MB.`);
-          return;
-        }
-      }
-      // Reset UI
-      statusDiv.innerText = "";
-      statusDiv.style.color = "var(--text)";
-      progressContainer.style.display = "block";
-      progressBar.style.width = "0%";
-      progressText.innerText = "0%";
-      const fd = new FormData();
-      for (let f of files) fd.append("files", f);
-      // 2. Upload via XMLHttpRequest for progress events
-      const xhr = new XMLHttpRequest();
-      xhr.upload.addEventListener("progress", (event) => {
-        if (event.lengthComputable) {
-          const percent = Math.round((event.loaded / event.total) * 100);
-          progressBar.style.width = percent + "%";
-          progressText.innerText = percent + "%";
-        }
-      });
-      xhr.addEventListener("load", () => {
-        if (xhr.status >= 200 && xhr.status < 300) {
-          try {
-            const data = JSON.parse(xhr.responseText);
-            statusDiv.innerText = data.message || "Upload complete!";
-            statusDiv.style.color = "var(--success)";
-            progressBar.style.width = "100%";
-            progressText.innerText = "Processing complete";
-            fileInput.value = ""; // Clear input
-          } catch (e) {
-            statusDiv.innerText = "Error parsing server response.";
-            statusDiv.style.color = "var(--error)";
-          }
-        } else {
-          statusDiv.innerText = `Upload failed: ${xhr.statusText || xhr.status}`;
-          statusDiv.style.color = "var(--error)";
-        }
-      });
-      xhr.addEventListener("error", () => {
-        statusDiv.innerText = "Network error during upload.";
-        statusDiv.style.color = "var(--error)";
-      });
-      xhr.open("POST", "/upload");
-      xhr.send(fd);
-    }
-    // --- HISTORY LOGIC ---
-    function loadHistory() {
-      const list = document.getElementById("historyList");
-      list.innerHTML = "";
-      const history = JSON.parse(localStorage.getItem("rag_history") || "[]");
-      history.forEach((item, index) => {
-        const div = document.createElement("div");
-        div.className = "history-item";
-        div.innerText = item.query;
-        div.onclick = () => loadSession(index);
-        list.appendChild(div);
-      });
-    }
-    function saveToHistory(query, answerHtml) {
-      const history = JSON.parse(localStorage.getItem("rag_history") || "[]");
-      // Prepend new item
-      history.unshift({ query, answerHtml, timestamp: Date.now() });
-      // Keep max 50
-      if (history.length > 50) history.pop();
-      localStorage.setItem("rag_history", JSON.stringify(history));
-      loadHistory();
-    }
-    function loadSession(index) {
-      const history = JSON.parse(localStorage.getItem("rag_history") || "[]");
-      const item = history[index];
-      if (!item) return;
-      document.getElementById("question").value = item.query;
-      const box = document.getElementById("answerBox");
-      box.style.display = "block";
-      box.innerHTML = item.answerHtml;
-    }
-    function newChat() {
-      document.getElementById("answerBox").style.display = "none";
-      document.getElementById("answerBox").innerHTML = "";
-      threadId = crypto.randomUUID();
-      sessionStorage.setItem("rag_thread_id", threadId);
-    }
-    function clearHistory() {
-      if (confirm("Clear all history?")) {
-        localStorage.removeItem("rag_history");
-        loadHistory();
-        newChat();
-      }
-    }
-    // Init
-    loadHistory();
-    async function ask() {
-      const q = document.getElementById("question").value.trim();
-      if (!q) return;
-      const box = document.getElementById("answerBox");
-      box.style.display = "block";
-      box.innerHTML = "Thinking...";
-      const res = await fetch("/ask", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ prompt: q, thread_id: threadId })
-      });
-      const data = await res.json();
-      let html = `<strong>Answer:</strong><br>${data.answer.replace(/\n/g, "<br>")}`;
-      if (data.confidence > 0) {
-        let label = "Low";
-        if (data.confidence >= 0.7) label = "High";
-        else if (data.confidence >= 0.5) label = "Medium";
-        html += `<div class="confidence-badge">Confidence: ${label} (${Math.round(data.confidence * 100)}%)</div>`;
-      }
-      if (data.citations?.length) {
-        html += "<div class='citations'><strong>Sources:</strong><ul>";
-        data.citations.forEach(c => {
-          html += `<li>${c.source} (Page ${c.page})</li>`;
-        });
-        html += "</ul></div>";
-      }
-      box.innerHTML = html;
-      saveToHistory(q, html); // Save to history
-    }
-    function summarize() {
-      document.getElementById("question").value = "Summarize the uploaded documents";
-      ask();
-    }
-  </script>
 </body>
 </html>

 <!DOCTYPE html>
+<html lang="en" data-theme="light">
 <head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Gemini RAG Assistant</title>
+  <!-- Fonts -->
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <!-- CSS -->
+  <link rel="stylesheet" href="/frontend/style.css">
+</head>
+<body>
+  <div class="app-container">
+    <!-- SIDEBAR -->
+    <aside class="sidebar">
+      <div class="brand">Gemini RAG</div>
+      <button class="new-chat-btn" onclick="newChat()">
+        <span>+</span> New Chat
+      </button>
+      <div class="history-list" id="historyList">
+        <!-- History items injected by JS -->
+      </div>
+      <div class="sidebar-footer">
+        <a href="/frontend/analytics.html" style="font-size: 0.9rem; color: var(--text-muted);">📊 Analytics
+          Dashboard</a>
+        <button onclick="clearHistory()"
+          style="background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:0.8rem;">Clear
+          All</button>
+      </div>
+    </aside>
+    <!-- MAIN CONTENT -->
+    <main class="main-content" id="mainContent">
+      <!-- TOP BAR (Theme Toggle) -->
+      <div class="top-bar">
+        <button class="theme-toggle" id="themeToggleBtn" onclick="toggleTheme()" title="Toggle Dark Mode">
+          <!-- Icon injected by JS -->
+        </button>
+      </div>
+      <!-- CHAT AREA -->
+      <div class="chat-container" id="chatContainer">
+        <!-- Messages injected by JS -->
       </div>
+      <!-- INPUT AREA (Floating) -->
+      <div class="input-area glass input-card">
+        <div class="file-row">
+          <label class="file-upload-label" for="files">
+            <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+              <path
+                d="M21.44 11.05l-9.19 9.19a6 1.83 6 1.83 0 0 1-2.59-2.59l8.6-8.6a4 1.83 4 1.83 0 0 1 2.59 2.59l-8.6 8.6a2 1.83 2 1.83 0 0 1-2.59-2.59l9.19-9.19">
+              </path>
+            </svg>
+            Upload Documents (PDF/TXT)
+          </label>
+          <div id="uploadStatus" style="font-size: 0.8rem; margin-left: auto;"></div>
+        </div>
+        <input type="file" id="files" multiple onchange="upload()">
+        <div class="progress-container">
+          <div class="progress-bar"></div>
         </div>
+        <div class="textarea-wrapper">
+          <textarea id="question" placeholder="Ask a question or type 'Summarize'..."
+            onkeydown="handleKey(event)"></textarea>
+          <button class="send-btn" onclick="ask()">
+            <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+              <line x1="22" y1="2" x2="11" y2="13"></line>
+              <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
+            </svg>
+          </button>
         </div>
       </div>
+    </main>
+  </div>
+  <!-- JS -->
+  <script src="/frontend/script.js"></script>
 </body>
 </html>

frontend/script.js ADDED Viewed

	@@ -0,0 +1,260 @@

+const MAX_FILE_SIZE = 50 * 1024 * 1024; // 50MB
+let threadId = sessionStorage.getItem("rag_thread_id") || crypto.randomUUID();
+sessionStorage.setItem("rag_thread_id", threadId);
+// =========================================
+// THEME LOGIC
+// =========================================
+function initTheme() {
+    const savedTheme = localStorage.getItem("theme") || "light";
+    document.documentElement.setAttribute("data-theme", savedTheme);
+    updateThemeIcon(savedTheme);
+}
+function toggleTheme() {
+    const current = document.documentElement.getAttribute("data-theme");
+    const next = current === "light" ? "dark" : "light";
+    document.documentElement.setAttribute("data-theme", next);
+    localStorage.setItem("theme", next);
+    updateThemeIcon(next);
+}
+function updateThemeIcon(theme) {
+    const btn = document.getElementById("themeToggleBtn");
+    if (!btn) return;
+    // Simple Moon/Sun icons
+    btn.innerHTML = theme === "light"
+        ? `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>` // Sun
+        : `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>`; // Moon
+}
+// =========================================
+// CHAT & UPLOAD LOGIC
+// =========================================
+// Handle Enter key to send
+function handleKey(e) {
+    if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        ask();
+    }
+}
+async function upload() {
+    const fileInput = document.getElementById("files");
+    const files = fileInput.files;
+    const statusDiv = document.getElementById("uploadStatus");
+    const progressContainer = document.querySelector(".progress-container");
+    const progressBar = document.querySelector(".progress-bar");
+    if (!files.length) {
+        alert("Please select at least one file.");
+        return;
+    }
+    // Validation
+    for (let f of files) {
+        if (f.size > MAX_FILE_SIZE) {
+            alert(`File "${f.name}" is too large. Max allowed is 50MB.`);
+            return;
+        }
+    }
+    // Reset UI
+    if (statusDiv) statusDiv.innerText = "Uploading...";
+    if (progressContainer) {
+        progressContainer.style.display = "block";
+        progressBar.style.width = "0%";
+    }
+    const fd = new FormData();
+    for (let f of files) fd.append("files", f);
+    const xhr = new XMLHttpRequest();
+    xhr.upload.addEventListener("progress", (event) => {
+        if (event.lengthComputable) {
+            const percent = Math.round((event.loaded / event.total) * 100);
+            if (progressBar) progressBar.style.width = percent + "%";
+        }
+    });
+    xhr.addEventListener("load", () => {
+        if (xhr.status >= 200 && xhr.status < 300) {
+            try {
+                const data = JSON.parse(xhr.responseText);
+                if (statusDiv) {
+                    statusDiv.innerText = data.message || "Upload complete!";
+                    statusDiv.style.color = "var(--success, green)";
+                }
+                if (progressBar) progressBar.style.width = "100%";
+                fileInput.value = "";
+                // Add a system message to chat
+                addMessage("ai", `✅ **System:** ${data.message || "Files processed successfully."}`);
+            } catch (e) {
+                if (statusDiv) statusDiv.innerText = "Error parsing server response.";
+            }
+        } else {
+            if (statusDiv) statusDiv.innerText = "Upload failed.";
+        }
+    });
+    xhr.addEventListener("error", () => {
+        if (statusDiv) statusDiv.innerText = "Network error.";
+    });
+    xhr.open("POST", "/upload");
+    xhr.send(fd);
+}
+async function ask() {
+    const input = document.getElementById("question");
+    const q = input.value.trim();
+    if (!q) return;
+    // Clear input
+    input.value = "";
+    // Add User Message
+    addMessage("user", q);
+    // Show thinking bubble
+    const thinkingId = addMessage("ai", '<div class="typing-indicator">Thinking...</div>');
+    try {
+        const res = await fetch("/ask", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ prompt: q, thread_id: threadId })
+        });
+        const data = await res.json();
+        // Remove thinking bubble and add real answer
+        removeMessage(thinkingId);
+        let html = formatAnswer(data);
+        addMessage("ai", html);
+        saveToHistory(q, html);
+    } catch (e) {
+        removeMessage(thinkingId);
+        addMessage("ai", "❌ **Error:** Could not connect to the server.");
+    }
+}
+function formatAnswer(data) {
+    let html = data.answer
+        .replace(/\n/g, "<br>")
+        .replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>"); // Basic Markdown bold
+    if (data.confidence > 0) {
+        let label = "Low";
+        if (data.confidence >= 0.7) label = "High";
+        else if (data.confidence >= 0.5) label = "Medium";
+        html += `<br><div class="confidence-badge">Confidence: ${label} (${Math.round(data.confidence * 100)}%)</div>`;
+    }
+    if (data.citations?.length) {
+        html += "<div class='citation-box'><strong>Sources:</strong><ul>";
+        data.citations.forEach(c => {
+            html += `<li>${c.source} (Page ${c.page})</li>`;
+        });
+        html += "</ul></div>";
+    }
+    return html;
+}
+function summarize() {
+    const input = document.getElementById("question");
+    input.value = "Summarize the uploaded documents";
+    ask();
+}
+// =========================================
+// UI HELPERS
+// =========================================
+function addMessage(type, html) {
+    const chatContainer = document.getElementById("chatContainer");
+    const div = document.createElement("div");
+    div.className = `message ${type}-message`;
+    div.id = "msg-" + Date.now();
+    div.innerHTML = `
+        <div class="bubble ${type}-bubble glass">
+            ${html}
+        </div>
+    `;
+    chatContainer.appendChild(div);
+    scrollToBottom();
+    return div.id;
+}
+function removeMessage(id) {
+    const el = document.getElementById(id);
+    if (el) el.remove();
+}
+function scrollToBottom() {
+    const container = document.getElementById("mainContent"); // The scrollable area
+    container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' });
+}
+// =========================================
+// HISTORY
+// =========================================
+function loadHistory() {
+    const list = document.getElementById("historyList");
+    if (!list) return;
+    list.innerHTML = "";
+    const history = JSON.parse(localStorage.getItem("rag_history") || "[]");
+    history.forEach((item, index) => {
+        const div = document.createElement("div");
+        div.className = "history-item";
+        div.innerText = item.query;
+        div.onclick = () => loadSession(item);
+        list.appendChild(div);
+    });
+}
+function saveToHistory(query, answerHtml) {
+    const history = JSON.parse(localStorage.getItem("rag_history") || "[]");
+    history.unshift({ query, answerHtml, timestamp: Date.now() });
+    if (history.length > 50) history.pop();
+    localStorage.setItem("rag_history", JSON.stringify(history));
+    loadHistory();
+}
+function loadSession(item) {
+    // Clear chat and load just this exchange? Or append?
+    // Let's clear for "session-like" feel
+    document.getElementById("chatContainer").innerHTML = "";
+    addMessage("user", item.query);
+    addMessage("ai", item.answerHtml);
+}
+function newChat() {
+    document.getElementById("chatContainer").innerHTML = "";
+    addMessage("ai", "Hello! I am your Agentic RAG Assistant. Upload a document or ask me anything.");
+    threadId = crypto.randomUUID();
+    sessionStorage.setItem("rag_thread_id", threadId);
+}
+function clearHistory() {
+    if (confirm("Delete all history?")) {
+        localStorage.removeItem("rag_history");
+        loadHistory();
+        newChat();
+    }
+}
+// Init
+window.addEventListener("DOMContentLoaded", () => {
+    initTheme();
+    loadHistory();
+    newChat(); // Show welcome message
+});

frontend/style.css ADDED Viewed

	@@ -0,0 +1,363 @@

+:root {
+  /* Default (Light) Theme */
+  --bg-gradient: radial-gradient(circle at top left, #eef2ff, #f8fafc, #fff1f2);
+  --glass-bg: rgba(255, 255, 255, 0.65);
+  --glass-border: rgba(255, 255, 255, 0.4);
+  --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
+  --primary: #6366f1; /* Indigo 500 */
+  --primary-hover: #4f46e5;
+  --secondary: #0ea5e9; /* Sky 500 */
+  --text-main: #1e293b; /* Slate 800 */
+  --text-muted: #64748b; /* Slate 500 */
+  --accent-glow: rgba(99, 102, 241, 0.2);
+  --sidebar-bg: rgba(255, 255, 255, 0.5);
+  --input-bg: rgba(255, 255, 255, 0.8);
+  --user-bubble: linear-gradient(135deg, #6366f1, #8b5cf6);
+  --ai-bubble: rgba(255, 255, 255, 0.7);
+  /* Scrollbar */
+  --scroll-thumb: #cbd5e1;
+}
+[data-theme="dark"] {
+  /* Dark Theme - Deep Space / Cyberpunk vibes */
+  --bg-gradient: radial-gradient(circle at top, #0f172a, #1e1b4b);
+  --glass-bg: rgba(30, 41, 59, 0.6);
+  --glass-border: rgba(255, 255, 255, 0.08);
+  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
+  --primary: #818cf8; /* Indigo 400 */
+  --primary-hover: #6366f1;
+  --secondary: #38bdf8;
+  --text-main: #f1f5f9; /* Slate 100 */
+  --text-muted: #94a3b8; /* Slate 400 */
+  --accent-glow: rgba(129, 140, 248, 0.15);
+  --sidebar-bg: rgba(15, 23, 42, 0.6);
+  --input-bg: rgba(30, 41, 59, 0.6);
+  --user-bubble: linear-gradient(135deg, #4f46e5, #7c3aed);
+  --ai-bubble: rgba(30, 41, 59, 0.7);
+  --scroll-thumb: #475569;
+}
+* {
+  box-sizing: border-box;
+  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
+}
+body {
+  margin: 0;
+  font-family: 'Inter', sans-serif;
+  background: var(--bg-gradient);
+  background-attachment: fixed; /* Keep heavy gradient fixed */
+  color: var(--text-main);
+  height: 100vh;
+  overflow: hidden;
+}
+/* Glassmorphism Utility */
+.glass {
+  background: var(--glass-bg);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border: 1px solid var(--glass-border);
+  box-shadow: var(--glass-shadow);
+}
+/* Layout */
+.app-container {
+  display: flex;
+  height: 100vh;
+  width: 100%;
+}
+/* Sidebar */
+.sidebar {
+  width: 280px;
+  display: flex;
+  flex-direction: column;
+  padding: 1.5rem;
+  border-right: 1px solid var(--glass-border);
+  background: var(--sidebar-bg);
+  backdrop-filter: blur(12px);
+  z-index: 10;
+}
+.brand {
+  font-size: 1.5rem;
+  font-weight: 800;
+  background: linear-gradient(135deg, var(--primary), var(--secondary));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  margin-bottom: 2rem;
+  letter-spacing: -0.5px;
+}
+.new-chat-btn {
+  background: linear-gradient(135deg, var(--primary), #4338ca);
+  color: white;
+  border: none;
+  padding: 0.8rem 1rem;
+  border-radius: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
+  transition: transform 0.2s, box-shadow 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+.new-chat-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);
+}
+.history-list {
+  margin-top: 1.5rem;
+  overflow-y: auto;
+  flex: 1;
+}
+.history-item {
+  padding: 0.75rem 1rem;
+  border-radius: 10px;
+  margin-bottom: 0.5rem;
+  cursor: pointer;
+  font-size: 0.9rem;
+  color: var(--text-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border: 1px solid transparent;
+}
+.history-item:hover {
+  background: var(--accent-glow);
+  color: var(--primary);
+  border-color: var(--glass-border);
+}
+.sidebar-footer {
+  margin-top: auto;
+  padding-top: 1rem;
+  border-top: 1px solid var(--glass-border);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+/* Main Content */
+.main-content {
+  flex: 1;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+.top-bar {
+  padding: 1.5rem 2rem;
+  display: flex;
+  justify-content: flex-end; /* Just the theme toggle here */
+  align-items: center;
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 100%;
+  pointer-events: none; /* Let clicks pass through to chat */
+}
+.top-bar > * { pointer-events: auto; }
+.theme-toggle {
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
+  padding: 0.5rem;
+  border-radius: 50%;
+  cursor: pointer;
+  color: var(--text-main);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  backdrop-filter: blur(4px);
+  transition: background 0.2s;
+}
+.theme-toggle:hover {
+  background: var(--accent-glow);
+}
+/* Chat Area */
+.chat-container {
+  flex: 1;
+  overflow-y: auto;
+  padding: 2rem 15% 10rem 15%; /* Bottom padding for input area */
+  scroll-behavior: smooth;
+}
+/* Bubbles */
+.message {
+  display: flex;
+  margin-bottom: 1.5rem;
+  opacity: 0;
+  animation: slideIn 0.3s forwards;
+}
+@keyframes slideIn { to { opacity: 1; transform: translateY(0); } from { opacity: 0; transform: translateY(10px); } }
+.user-message { justify-content: flex-end; }
+.ai-message { justify-content: flex-start; }
+.bubble {
+  max-width: 80%;
+  padding: 1rem 1.5rem;
+  border-radius: 18px;
+  line-height: 1.6;
+  font-size: 0.95rem;
+  position: relative;
+}
+.user-bubble {
+  background: var(--user-bubble);
+  color: white;
+  border-bottom-right-radius: 4px;
+  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
+}
+.ai-bubble {
+  background: var(--ai-bubble);
+  border: 1px solid var(--glass-border);
+  border-bottom-left-radius: 4px;
+  backdrop-filter: blur(8px);
+}
+/* Inputs & Forms - Floating at bottom */
+.input-area {
+  position: absolute;
+  bottom: 2rem;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 70%;
+  max-width: 900px;
+  z-index: 20;
+}
+.input-card {
+  border-radius: 20px;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.textarea-wrapper {
+  position: relative;
+  width: 100%;
+}
+textarea {
+  width: 100%;
+  background: var(--input-bg);
+  border: 1px solid var(--glass-border);
+  border-radius: 14px;
+  padding: 1rem 3rem 1rem 1rem; /* Space for send button */
+  color: var(--text-main);
+  font-family: inherit;
+  resize: none;
+  min-height: 60px;
+  max-height: 200px;
+  box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
+}
+textarea:focus {
+  outline: none;
+  border-color: var(--primary);
+  box-shadow: 0 0 0 2px var(--accent-glow);
+}
+.send-btn {
+  position: absolute;
+  right: 12px;
+  bottom: 12px;
+  background: var(--primary);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+.send-btn:hover { background: var(--primary-hover); transform: scale(1.05); }
+.file-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 0.5rem;
+}
+.file-upload-label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 0.85rem;
+  color: var(--text-muted);
+  cursor: pointer;
+}
+.file-upload-label:hover { color: var(--primary); }
+#files { display: none; } /* Hide default file input */
+/* Progress Bar */
+.progress-container {
+  height: 4px;
+  background: var(--glass-border);
+  border-radius: 2px;
+  margin-top: 8px;
+  overflow: hidden;
+  display: none;
+}
+.progress-bar {
+  height: 100%;
+  background: var(--success, #10b981);
+  width: 0%;
+  transition: width 0.3s;
+}
+/* Citations & Analytics Links inside bubbles */
+a { color: var(--primary); text-decoration: none; font-weight: 500; }
+a:hover { text-decoration: underline; }
+.confidence-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  background: rgba(16, 185, 129, 0.1);
+  color: #10b981;
+  border-radius: 12px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  margin-top: 8px;
+}
+.citation-box {
+  background: rgba(0,0,0,0.03);
+  border-left: 3px solid var(--primary);
+  padding: 8px 12px;
+  margin-top: 8px;
+  font-size: 0.85rem;
+  border-radius: 0 8px 8px 0;
+}
+/* Scrollbar Styling */
+::-webkit-scrollbar { width: 8px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 4px; }
+::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

rag_eval_logs.jsonl CHANGED Viewed

@@ -61,3 +61,23 @@
 {"timestamp": 1768121326.683464, "query": "what is the location ?", "retrieved_count": 5, "confidence": 1.0, "answer_known": true}
 {"timestamp": 1768121412.7319663, "query": "what is the conditions for OSHC?", "retrieved_count": 5, "confidence": 1.0, "answer_known": true}
 {"timestamp": 1768207382.1637495, "query": "what is application ID number?", "retrieved_count": 5, "confidence": 0.95, "answer_known": false}

 {"timestamp": 1768121326.683464, "query": "what is the location ?", "retrieved_count": 5, "confidence": 1.0, "answer_known": true}
 {"timestamp": 1768121412.7319663, "query": "what is the conditions for OSHC?", "retrieved_count": 5, "confidence": 1.0, "answer_known": true}
 {"timestamp": 1768207382.1637495, "query": "what is application ID number?", "retrieved_count": 5, "confidence": 0.95, "answer_known": false}
+{"timestamp": 1768315860.3629532, "query": "Compare the OSHC requirements in this letter to the current 2026 Australian student visa health insurance laws.", "retrieved_count": 4, "confidence": 0.9, "answer_known": true, "source_type": "internal_pdf"}
+{"timestamp": 1768315871.1952653, "query": "Compare the OSHC requirements in this letter to the current 2026 Australian student visa health insurance laws.", "retrieved_count": 4, "confidence": 0.9, "answer_known": true, "source_type": "internal_pdf"}
+{"timestamp": 1768315930.346082, "query": "Compare the OSHC requirements in this letter to the current 2026 Australian student visa health insurance laws.", "retrieved_count": 1, "confidence": 0.7, "answer_known": true, "source_type": "external_web"}
+{"timestamp": 1768315944.8304691, "query": "Compare the OSHC requirements in this letter to the current 2026 Australian student visa health insurance laws.", "retrieved_count": 4, "confidence": 0.9, "answer_known": true, "source_type": "internal_pdf"}
+{"timestamp": 1768315957.5130162, "query": "Compare the OSHC requirements in this letter to the current 2026 Australian student visa health insurance laws.", "retrieved_count": 4, "confidence": 0.9, "answer_known": true, "source_type": "internal_pdf"}
+{"timestamp": 1768315975.0261414, "query": "Compare the OSHC requirements in this letter to the current 2026 Australian student visa health insurance laws.", "retrieved_count": 1, "confidence": 0.7, "answer_known": true, "source_type": "external_web"}
+{"timestamp": 1768315993.1562846, "query": "Compare the OSHC requirements in this letter to the current 2026 Australian student visa health insurance laws.", "retrieved_count": 4, "confidence": 0.9, "answer_known": true, "source_type": "internal_pdf"}
+{"timestamp": 1768316005.2227218, "query": "Compare the OSHC requirements in this letter to the current 2026 Australian student visa health insurance laws.", "retrieved_count": 1, "confidence": 0.7, "answer_known": true, "source_type": "external_web"}
+{"timestamp": 1768316027.8866844, "query": "Compare the OSHC requirements in this letter to the current 2026 Australian student visa health insurance laws.", "retrieved_count": 1, "confidence": 0.7, "answer_known": true, "source_type": "external_web"}
+{"timestamp": 1768316040.887511, "query": "Compare the OSHC requirements in this letter to the current 2026 Australian student visa health insurance laws.", "retrieved_count": 4, "confidence": 0.9, "answer_known": true, "source_type": "internal_pdf"}
+{"timestamp": 1768316051.8234782, "query": "\"What is the specific refund percentage for a withdrawal 2 weeks before the start date?\"", "retrieved_count": 4, "confidence": 0.9, "answer_known": true, "source_type": "internal_pdf"}
+{"timestamp": 1768316054.490359, "query": "\"What is the specific refund percentage for a withdrawal 2 weeks before the start date?\"", "retrieved_count": 4, "confidence": 0.9, "answer_known": true, "source_type": "internal_pdf"}
+{"timestamp": 1768316058.364325, "query": "\"What is the specific refund percentage for a withdrawal 2 weeks before the start date?\"", "retrieved_count": 4, "confidence": 0.9, "answer_known": true, "source_type": "internal_pdf"}
+{"timestamp": 1768316061.0153518, "query": "\"What is the specific refund percentage for a withdrawal 2 weeks before the start date?\"", "retrieved_count": 4, "confidence": 0.9, "answer_known": true, "source_type": "internal_pdf"}
+{"timestamp": 1768316070.7566097, "query": "\"What is the specific refund percentage for a withdrawal 2 weeks before the start date?\"", "retrieved_count": 4, "confidence": 0.9, "answer_known": true, "source_type": "internal_pdf"}
+{"timestamp": 1768316080.946659, "query": "\"What is the specific refund percentage for a withdrawal 2 weeks before the start date?\"", "retrieved_count": 4, "confidence": 0.9, "answer_known": true, "source_type": "internal_pdf"}
+{"timestamp": 1768316094.0294836, "query": "\"What is the specific refund percentage for a withdrawal 2 weeks before the start date?\"", "retrieved_count": 4, "confidence": 0.9, "answer_known": true, "source_type": "internal_pdf"}
+{"timestamp": 1768316097.8382766, "query": "\"What is the specific refund percentage for a withdrawal 2 weeks before the start date?\"", "retrieved_count": 4, "confidence": 0.9, "answer_known": true, "source_type": "internal_pdf"}
+{"timestamp": 1768316102.216011, "query": "\"What is the specific refund percentage for a withdrawal 2 weeks before the start date?\"", "retrieved_count": 4, "confidence": 0.9, "answer_known": true, "source_type": "internal_pdf"}
+{"timestamp": 1768316113.0092435, "query": "\"What is the specific refund percentage for a withdrawal 2 weeks before the start date?\"", "retrieved_count": 4, "confidence": 0.9, "answer_known": true, "source_type": "internal_pdf"}

requirements.txt CHANGED Viewed

@@ -9,3 +9,4 @@ numpy
 python-multipart
 rank_bm25

 python-multipart
 rank_bm25
+tavily-python