UI changes

chrome-extension/manifest.json

@@ -20,7 +20,7 @@
     "48": "icons/icon48.png",
     "128": "icons/icon128.png"
   },
-  "permissions": ["activeTab", "scripting", "sidePanel"],
+  "permissions": ["activeTab", "scripting", "sidePanel", "storage"],
   "host_permissions": [
     "http://localhost:8000/*",
     "https://mothy-08-ragbot.hf.space/*",

chrome-extension/sidepanel.css

@@ -1,4 +1,4 @@
-/* RESET & BASE */
+/* --- VARIABLES & THEME --- */
 :root {
   --bg-color: #ffffff;
   --text-primary: #111111;
@@ -8,17 +8,19 @@
   --border-color: #e5e5e5;
   --msg-bot-bg: #f4f4f5;
   --msg-user-bg: #111111;
+  --transition-speed: 0.2s;
 }
 
 * {
   box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font: inherit;
 }
 
 body {
-  margin: 0;
-  padding: 0;
   width: 100%;
-  height: 100vh; /* Critical for Side Panel: Fills full vertical height */
+  height: 100vh;
   font-family:
     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
     Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
@@ -26,18 +28,35 @@ body {
   color: var(--text-primary);
   display: flex;
   flex-direction: column;
-  overflow: hidden; /* Prevents double scrollbars */
+  overflow: hidden;
+}
+
+/* --- SCROLLBARS --- */
+#messages::-webkit-scrollbar {
+  width: 6px;
+}
+#messages::-webkit-scrollbar-track {
+  background: transparent;
+}
+#messages::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.1);
+  border-radius: 10px;
+}
+#messages:hover::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.2);
 }
 
-/* HEADER */
+/* --- HEADER --- */
 header {
-  padding: 1rem;
+  min-height: 60px;
+  padding-inline: 1rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
   backdrop-filter: blur(10px);
   z-index: 10;
-  flex-shrink: 0; /* Prevents header from shrinking when chat gets full */
+  flex-shrink: 0;
+  border-bottom: 1px solid transparent;
 }
 
 h1 {
@@ -48,6 +67,12 @@ h1 {
   letter-spacing: 0.05em;
 }
 
+.header-controls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
 .badge {
   font-size: 0.7rem;
   padding: 4px 8px;
@@ -57,9 +82,57 @@ h1 {
   font-family: monospace;
 }
 
-/* MAIN CONTAINER */
+/* --- ICON BUTTONS & TOOLTIP --- */
+.icon-btn {
+  position: relative; /* For Tooltip positioning */
+  background: transparent;
+  color: var(--text-secondary);
+  width: auto;
+  max-width: none;
+  padding: 4px;
+  border: none;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition:
+    color 0.2s ease,
+    background-color 0.2s ease;
+}
+
+.icon-btn:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+  color: #d32f2f;
+  transform: none;
+}
+
+/* CUSTOM POPUP MODAL (Tooltip) */
+.icon-btn:hover::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: 10px;
+  background: var(--msg-bot-bg);
+  color: var(--text-primary);
+  padding: 6px 10px;
+  border-radius: 6px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  font-family:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
+    Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  white-space: nowrap;
+  pointer-events: none !important;
+  z-index: 100;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  animation: fadeIn 0.2s ease-out;
+}
+
+/* --- MAIN VIEWS --- */
 main {
-  flex: 1; /* Takes remaining height */
+  flex: 1;
   position: relative;
   display: flex;
   flex-direction: column;
@@ -73,37 +146,15 @@ main {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  animation: fadeIn 0.2s ease-out;
+  animation: fadeIn 0.3s ease-out;
 }
 
 .hidden {
   display: none !important;
 }
 
-/* STATES & ICONS */
-.icon-large {
-  font-size: 3rem;
-  margin-bottom: 1rem;
-  opacity: 0.8;
-}
-
-h2 {
-  font-size: 1.1rem;
-  font-weight: 600;
-  margin: 0 0 0.5rem 0;
-}
-
-p {
-  font-size: 0.9rem;
-  color: var(--text-secondary);
-  text-align: center;
-  line-height: 1.5;
-  margin-bottom: 1.5rem;
-  max-width: 280px;
-}
-
-/* BUTTONS */
-button {
+/* --- BUTTONS --- */
+button:not(.icon-btn):not(.send-btn) {
   background: var(--accent-color);
   color: var(--accent-text);
   border: 1px solid transparent;
@@ -117,13 +168,13 @@ button {
   max-width: 200px;
 }
 
-button:hover {
+button:not(.icon-btn):not(.send-btn):hover {
   background: #333;
   transform: translateY(-1px);
 }
 
 button:active {
-  transform: translateY(0);
+  transform: scale(0.96) !important;
 }
 
 button:disabled {
@@ -132,16 +183,16 @@ button:disabled {
   transform: none;
 }
 
-/* CHAT INTERFACE */
+/* --- CHAT AREA --- */
 #chat-view {
   padding: 0;
-  justify-content: flex-end; /* Anchors content to bottom initially */
+  justify-content: flex-end;
 }
 
 #messages {
-  flex: 1; /* Grows to fill space */
+  flex: 1;
   width: 100%;
-  overflow-y: auto; /* Scrollable area */
+  overflow-y: auto;
   padding: 1rem;
   display: flex;
   flex-direction: column;
@@ -152,11 +203,14 @@ button:disabled {
 .msg {
   max-width: 90%;
   padding: 10px 14px;
-  border-radius: 8px;
+  border-radius: 12px;
   font-size: 0.9rem;
   line-height: 1.5;
   position: relative;
   word-wrap: break-word;
+  opacity: 0;
+  animation: popIn 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
+  will-change: transform, opacity;
 }
 
 .msg.user {
@@ -164,6 +218,7 @@ button:disabled {
   background: var(--msg-user-bg);
   color: white;
   border-bottom-right-radius: 2px;
+  transform-origin: bottom right;
 }
 
 .msg.bot {
@@ -171,52 +226,128 @@ button:disabled {
   background: var(--msg-bot-bg);
   color: var(--text-primary);
   border-bottom-left-radius: 2px;
+  transform-origin: bottom left;
 }
 
 .error {
-  color: red;
+  color: #d32f2f;
+  background: #ffebee;
+  border: 1px solid #ffcdd2;
+  padding: 1rem;
+  border-radius: 8px;
+  text-align: center;
 }
 
-/* INPUT AREA */
+/* --- INPUT AREA --- */
 .input-area {
   width: 100%;
-  padding: 1rem;
+  padding: 12px;
   backdrop-filter: blur(10px);
+  background: rgba(255, 255, 255, 0.8);
   display: flex;
   gap: 8px;
-  flex-shrink: 0; /* Prevents squashing */
+  flex-shrink: 0;
 }
 
 input {
   flex: 1;
-  padding: 10px 12px;
+  padding: 10px 14px;
   border: 1px solid var(--border-color);
-  border-radius: 14px;
+  border-radius: 20px;
   font-size: 0.9rem;
   outline: none;
   transition:
     border-color 0.2s,
-    background 0.2s;
+    box-shadow 0.2s;
 }
 
 input:focus {
   border-color: var(--accent-color);
-  background: #fff;
+  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
 }
 
 .send-btn {
   background: none;
+  border: none;
   color: var(--text-primary);
   width: 40px;
   padding: 0;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 0.75rem;
-  border-radius: 6px;
+  border-radius: 50%;
+  cursor: pointer;
+  transition:
+    transform 0.1s ease,
+    background-color 0.2s ease;
+}
+
+.send-btn:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+  transform: none;
+}
+
+.send-btn:active {
+  transform: scale(0.9);
+}
+
+/* --- ANIMATIONS --- */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(5px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes popIn {
+  0% {
+    opacity: 0;
+    transform: translateY(10px) scale(0.98);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.msg.loading {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  width: fit-content;
+  padding: 12px 16px;
+}
+
+.dot {
+  width: 6px;
+  height: 6px;
+  background-color: #999;
+  border-radius: 50%;
+  animation: bounce 1.4s infinite ease-in-out both;
+}
+
+.dot:nth-child(1) {
+  animation-delay: -0.32s;
+}
+.dot:nth-child(2) {
+  animation-delay: -0.16s;
+}
+
+@keyframes bounce {
+  0%,
+  80%,
+  100% {
+    transform: scale(0);
+  }
+  40% {
+    transform: scale(1);
+  }
 }
 
-/* LOADER */
 .loader {
   border: 2px solid #f3f3f3;
   border-top: 2px solid var(--accent-color);
@@ -238,13 +369,24 @@ input:focus {
   }
 }
 
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(5px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+.icon-large {
+  font-size: 3rem;
+  margin-bottom: 1rem;
+  opacity: 0.8;
+  animation: float 3s ease-in-out infinite;
+}
+
+h2 {
+  font-size: 1.1rem;
+  font-weight: 600;
+  margin: 0 0 0.5rem 0;
+}
+
+p {
+  font-size: 0.9rem;
+  color: var(--text-secondary);
+  text-align: center;
+  line-height: 1.5;
+  margin-bottom: 1.5rem;
+  max-width: 280px;
 }

chrome-extension/sidepanel.html

@@ -7,14 +7,23 @@
     <link rel="stylesheet" href="sidepanel.css" />
     <link
       rel="stylesheet"
-      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=send"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=delete,send"
     />
     <script src="sidepanel.js" defer></script>
   </head>
   <body>
     <header>
       <h1>Ragbot</h1>
-      <span id="domain-badge" class="badge">Checking...</span>
+      <div class="header-controls">
+        <span id="domain-badge" class="badge">Checking...</span>
+        <button
+          id="delete-btn"
+          class="icon-btn material-symbols-outlined hidden"
+          data-tooltip="Clear Chat History"
+        >
+          delete
+        </button>
+      </div>
     </header>
 
     <main>

chrome-extension/sidepanel.js

@@ -14,6 +14,7 @@ const els = {
   messages: document.getElementById("messages"),
   input: document.getElementById("user-input"),
   sendBtn: document.getElementById("send-btn"),
+  deleteBtn: document.getElementById("delete-btn"),
 };
 
 // State
@@ -21,17 +22,14 @@ let currentUrl = "";
 
 // --- Initialization ---
 
-// Side Panels stay open, so we need to listen for tab changes
 document.addEventListener("DOMContentLoaded", () => {
-  updateContext(); // Run once on load
+  updateContext();
 });
 
-// Listen for when user switches tabs
 chrome.tabs.onActivated.addListener(() => {
   updateContext();
 });
 
-// Listen for when user navigates within a tab
 chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
   if (changeInfo.status === "complete" && tab.active) {
     updateContext();
@@ -44,28 +42,25 @@ async function updateContext() {
   try {
     const tab = await getCurrentTab();
 
-    // 1. Safety Check: If no URL or not a web page, stop here
     if (!tab.url || !tab.url.startsWith("http")) {
       currentUrl = "";
       els.domainBadge.textContent = "Restricted";
-      showView("loading"); // Or a specific "error" view
+      showView("loading");
       document.querySelector("#loading-view p").textContent =
         "Please open a valid website.";
       return;
     }
 
-    // 2. Only reload if URL actually changed
     if (tab.url === currentUrl) return;
 
     currentUrl = tab.url;
-
-    // 3. Update Badge
     const urlObj = new URL(currentUrl);
     els.domainBadge.textContent = urlObj.hostname;
 
-    // 4. Reset UI & Check Backend
-    els.messages.innerHTML =
-      '<div class="msg bot">Hello! Ask me anything about this page.</div>';
+    // Load history OR Default message
+    await loadChatHistory(currentUrl);
+
+    // Now check if the backend is ready
     await checkIndexStatus(currentUrl);
   } catch (err) {
     console.error(err);
@@ -74,9 +69,13 @@ async function updateContext() {
 }
 
 async function checkIndexStatus(url) {
-  showView("loading");
-  document.querySelector("#loading-view p").textContent =
-    "Connecting to Brain...";
+  const hasHistory = els.messages.childElementCount > 1;
+
+  if (!hasHistory) {
+    showView("loading");
+    document.querySelector("#loading-view p").textContent =
+      "Connecting to Brain...";
+  }
 
   try {
     const res = await fetch(`${API_BASE}/check`, {
@@ -93,7 +92,9 @@ async function checkIndexStatus(url) {
       showView("train");
     }
   } catch (err) {
-    showError("Backend Offline. Is server.py running?");
+    if (!hasHistory) {
+      showError("Backend Offline. Is the Space running?");
+    }
   }
 }
 
@@ -110,14 +111,16 @@ async function startTraining() {
 
     await res.json();
 
-    // Fake delay for UX
+    // UX: Clear the "Hello" message so we don't have double messages
+    await clearHistory(false); // false = do NOT reload default message
+
     setTimeout(() => {
       showView("chat");
       addMessage(
         "bot",
         "I've started reading this site! You can ask me questions now.",
       );
-    }, 2000);
+    }, 1500);
   } catch (err) {
     els.trainBtn.disabled = false;
     els.trainStatus.classList.add("hidden");
@@ -130,10 +133,13 @@ async function sendMessage() {
   if (!text) return;
 
   addMessage("user", text);
+
   els.input.value = "";
   els.input.disabled = true;
   els.sendBtn.disabled = true;
 
+  const loadingBubble = addLoadingBubble();
+
   try {
     const res = await fetch(`${API_BASE}/chat`, {
       method: "POST",
@@ -147,8 +153,11 @@ async function sendMessage() {
     if (!res.ok) throw new Error("API Error");
 
     const data = await res.json();
+
+    loadingBubble.remove();
     addMessage("bot", data.answer);
   } catch (err) {
+    loadingBubble.remove();
     addMessage("error", "Failed to get response. Try again.");
   } finally {
     els.input.disabled = false;
@@ -157,13 +166,74 @@ async function sendMessage() {
   }
 }
 
+// --- Storage & History Logic ---
+
+async function loadChatHistory(url) {
+  els.messages.innerHTML = ""; // Clear current view
+
+  const key = `chat_${url}`;
+  const result = await chrome.storage.local.get(key);
+  const history = result[key] || [];
+
+  if (history.length === 0) {
+    const text = "Hello! Ask me anything about this page.";
+    // 1. Show it
+    const div = document.createElement("div");
+    div.className = "msg bot";
+    div.innerText = text;
+    els.messages.appendChild(div);
+
+    // 2. Save it
+    saveMessageToStorage(url, "bot", text);
+  } else {
+    // Render saved history
+    history.forEach((msg) => {
+      const div = document.createElement("div");
+      div.className = `msg ${msg.type}`;
+      div.innerText = msg.text;
+      els.messages.appendChild(div);
+    });
+    scrollToBottom();
+  }
+}
+
+async function saveMessageToStorage(url, type, text) {
+  if (type === "error") return;
+
+  const key = `chat_${url}`;
+  const result = await chrome.storage.local.get(key);
+  const history = result[key] || [];
+
+  history.push({ type, text, timestamp: Date.now() });
+
+  if (history.length > 50) history.shift();
+
+  await chrome.storage.local.set({ [key]: history });
+}
+
+// Added 'reloadDefault' param to control behavior
+async function clearHistory(reloadDefault = true) {
+  if (!currentUrl) return;
+  const key = `chat_${currentUrl}`;
+
+  // Wipe from storage
+  await chrome.storage.local.remove(key);
+
+  // Wipe visual
+  els.messages.innerHTML = "";
+
+  if (reloadDefault) {
+    await loadChatHistory(currentUrl);
+  }
+}
+
 // --- Utilities ---
 
 function getCurrentTab() {
   return new Promise((resolve) => {
     chrome.tabs.query({ active: true, lastFocusedWindow: true }, (tabs) => {
       if (tabs && tabs[0]) resolve(tabs[0]);
-      else resolve({}); // Return empty object instead of crashing
+      else resolve({});
     });
   });
 }
@@ -171,6 +241,13 @@ function getCurrentTab() {
 function showView(name) {
   Object.values(views).forEach((el) => el.classList.add("hidden"));
   views[name].classList.remove("hidden");
+
+  // UX Fix: Only show Delete Button in Chat View
+  if (name === "chat") {
+    els.deleteBtn.classList.remove("hidden");
+  } else {
+    els.deleteBtn.classList.add("hidden");
+  }
 }
 
 function addMessage(type, text) {
@@ -178,19 +255,44 @@ function addMessage(type, text) {
   div.className = `msg ${type}`;
   div.innerText = text;
   els.messages.appendChild(div);
-  els.messages.scrollTop = els.messages.scrollHeight;
+  scrollToBottom();
+
+  saveMessageToStorage(currentUrl, type, text);
+}
+
+function addLoadingBubble() {
+  const div = document.createElement("div");
+  div.className = "msg bot loading";
+  div.innerHTML = `
+    <div class="dot"></div>
+    <div class="dot"></div>
+    <div class="dot"></div>
+  `;
+  els.messages.appendChild(div);
+  scrollToBottom();
+  return div;
+}
+
+function scrollToBottom() {
+  els.messages.scrollTo({
+    top: els.messages.scrollHeight,
+    behavior: "smooth",
+  });
 }
 
 function showError(msg) {
-  // Overwrite main content for critical errors
-  document.querySelector("main").innerHTML =
-    `<div class="error view">${msg}</div>`;
+  document.querySelector("main").innerHTML = `
+    <div class="view">
+      <div class="error" style="max-width: 80%">${msg}</div>
+    </div>
+  `;
 }
 
 // --- Event Listeners ---
 
 els.trainBtn.addEventListener("click", startTraining);
 els.sendBtn.addEventListener("click", sendMessage);
+els.deleteBtn.addEventListener("click", () => clearHistory(true));
 els.input.addEventListener("keypress", (e) => {
   if (e.key === "Enter") sendMessage();
 });