Upload folder using huggingface_hub

frontend/app.js

@@ -226,12 +226,12 @@ function appendUserBubble(text, scroll = true) {
   const div = document.createElement("div");
   div.className = "flex items-start gap-4 ml-12 flex-row-reverse";
   div.innerHTML = `
-    <div class="w-10 h-10 clay-card flex-shrink-0 bg-primary text-white flex items-center justify-center">
-      <span class="material-symbols-outlined">person</span>
+    <div class="w-8 h-8 clay-card flex-shrink-0 bg-primary text-white flex items-center justify-center">
+      <span class="material-symbols-outlined text-sm">person</span>
     </div>
-    <div class="clay-card p-6 bg-primary-container text-white shadow-lg max-w-xl">
-      <p class="text-sm opacity-60 mb-2">Advocate</p>
-      <p class="font-medium">${escHtml(text)}</p>
+    <div class="clay-card p-4 bg-primary-container text-white shadow-lg max-w-xl">
+      <p class="text-xs opacity-60 mb-1.5">You</p>
+      <p class="text-sm leading-relaxed">${escHtml(text)}</p>
     </div>
   `;
   messagesList.appendChild(div);
@@ -248,25 +248,25 @@ function appendAIBubble(data, scroll = true) {
   const sourceCount = (data.sources || data.source_judgments || []).length;
   
   const sourcesBtn = sourceCount > 0 ? `
-    <button class="text-[11px] font-bold text-secondary uppercase tracking-widest flex items-center gap-1 hover:underline">
-      <span class="material-symbols-outlined text-sm">description</span> ${sourceCount} Citation${sourceCount > 1 ? "s" : ""}
+    <button class="text-[10px] font-bold text-secondary uppercase tracking-wider flex items-center gap-1 hover:underline">
+      <span class="material-symbols-outlined text-xs">description</span> ${sourceCount} Citation${sourceCount > 1 ? "s" : ""}
     </button>` : "";
 
   const div = document.createElement("div");
   div.className = "flex items-start gap-4 mr-12";
   div.innerHTML = `
-    <div class="w-10 h-10 clay-card flex-shrink-0 bg-secondary-container flex items-center justify-center text-primary">
-      <span class="material-symbols-outlined text-2xl" style="font-variation-settings: 'FILL' 1;">smart_toy</span>
+    <div class="w-8 h-8 clay-card flex-shrink-0 bg-secondary-container flex items-center justify-center text-primary">
+      <span class="material-symbols-outlined text-lg" style="font-variation-settings: 'FILL' 1;">smart_toy</span>
     </div>
-    <div class="clay-card p-6 bg-white text-primary leading-relaxed shadow-sm max-w-2xl">
-      <p class="text-sm font-medium mb-4">Registry Assistant</p>
-      <div class="font-serif text-lg leading-relaxed text-primary/90">
+    <div class="clay-card p-4 bg-white text-primary leading-relaxed shadow-sm max-w-2xl">
+      <p class="text-xs font-medium mb-2.5 text-primary/70">Registry Assistant</p>
+      <div class="text-sm leading-relaxed text-primary/90">
         ${formatAnswer(answer)}
       </div>
-      <div class="mt-6 pt-4 border-t border-primary/5 flex gap-4">
+      <div class="mt-4 pt-3 border-t border-primary/5 flex gap-3 flex-wrap">
         ${sourcesBtn}
-        <button class="text-[11px] font-bold text-secondary uppercase tracking-widest flex items-center gap-1 hover:underline">
-          <span class="material-symbols-outlined text-sm">picture_as_pdf</span> Export Brief
+        <button class="text-[10px] font-bold text-secondary uppercase tracking-wider flex items-center gap-1 hover:underline">
+          <span class="material-symbols-outlined text-xs">picture_as_pdf</span> Export
         </button>
       </div>
     </div>
@@ -281,12 +281,12 @@ function appendErrorBubble(text, scroll = true) {
   const div = document.createElement("div");
   div.className = "flex items-start gap-4 mr-12";
   div.innerHTML = `
-    <div class="w-10 h-10 clay-card flex-shrink-0 bg-error-container flex items-center justify-center text-error">
-      <span class="material-symbols-outlined">error</span>
+    <div class="w-8 h-8 clay-card flex-shrink-0 bg-error-container flex items-center justify-center text-error">
+      <span class="material-symbols-outlined text-lg">error</span>
     </div>
-    <div class="clay-card p-6 bg-error-container text-error-container/90 shadow-sm">
-      <p class="text-sm font-medium mb-2">Error</p>
-      <p>${escHtml(text)}</p>
+    <div class="clay-card p-4 bg-error-container text-error-container/90 shadow-sm">
+      <p class="text-xs font-medium mb-1.5">Error</p>
+      <p class="text-sm">${escHtml(text)}</p>
     </div>
   `;
   messagesList.appendChild(div);
@@ -300,15 +300,15 @@ function appendLoader() {
   div.id = id;
   div.className = "flex items-start gap-4 mr-12";
   div.innerHTML = `
-    <div class="w-10 h-10 clay-card flex-shrink-0 bg-secondary-container flex items-center justify-center text-primary animate-pulse">
-      <span class="material-symbols-outlined">smart_toy</span>
+    <div class="w-8 h-8 clay-card flex-shrink-0 bg-secondary-container flex items-center justify-center text-primary animate-pulse">
+      <span class="material-symbols-outlined text-lg">smart_toy</span>
     </div>
-    <div class="clay-card p-6 bg-white text-primary">
-      <p class="text-sm font-medium">Searching legal archives...</p>
-      <div class="flex gap-2 mt-4">
-        <div class="w-2 h-2 bg-primary rounded-full animate-bounce" style="animation-delay: 0s"></div>
-        <div class="w-2 h-2 bg-primary rounded-full animate-bounce" style="animation-delay: 0.2s"></div>
-        <div class="w-2 h-2 bg-primary rounded-full animate-bounce" style="animation-delay: 0.4s"></div>
+    <div class="clay-card p-4 bg-white text-primary">
+      <p class="text-xs font-medium">Searching legal archives...</p>
+      <div class="flex gap-1.5 mt-3">
+        <div class="w-1.5 h-1.5 bg-primary rounded-full animate-bounce" style="animation-delay: 0s"></div>
+        <div class="w-1.5 h-1.5 bg-primary rounded-full animate-bounce" style="animation-delay: 0.2s"></div>
+        <div class="w-1.5 h-1.5 bg-primary rounded-full animate-bounce" style="animation-delay: 0.4s"></div>
       </div>
     </div>
   `;

frontend/index.html

@@ -124,39 +124,39 @@
 <body class="bg-[#F5F0E8] text-on-surface font-body h-screen flex overflow-hidden">
 
 <!-- Left Side: Sidebar -->
-<aside class="w-80 h-full flex flex-col bg-surface-container-low p-6 z-30 transition-all duration-300 overflow-y-auto custom-scrollbar" id="sidebar">
+<aside class="w-64 h-full flex flex-col bg-primary/5 border-r border-primary/10 p-5 z-30 transition-all duration-300 overflow-y-auto custom-scrollbar" id="sidebar">
   <!-- Brand Header -->
-  <div class="flex items-center gap-3 mb-10 px-2">
+  <div class="flex items-center gap-2 mb-8 px-2">
     <div class="w-12 h-12 clay-card flex items-center justify-center bg-primary text-secondary-container flex-shrink-0">
       <span class="material-symbols-outlined text-2xl" style="font-variation-settings: 'FILL' 1;">gavel</span>
     </div>
     <div class="flex-1 min-w-0">
-      <h1 class="font-headline font-bold text-primary text-xl leading-tight tracking-tight truncate">NYAYA SETU</h1>
-      <p class="text-[10px] uppercase tracking-widest text-secondary font-bold opacity-70 truncate">Legal Research Registry</p>
+      <h1 class="font-headline font-bold text-primary text-lg leading-tight tracking-tight truncate">NYAYA</h1>
+      <p class="text-[9px] uppercase tracking-widest text-secondary font-bold opacity-70 truncate">Registry</p>
     </div>
   </div>
 
   <!-- Primary Action -->
-  <button onclick="newChat()" class="clay-button-primary w-full py-4 px-6 flex items-center justify-center gap-2 text-white font-semibold rounded-xl mb-8 group">
+  <button onclick="newChat()" class="clay-button-primary w-full py-2.5 px-4 flex items-center justify-center gap-2 text-white font-semibold text-sm rounded-lg mb-6 group">
     <span class="material-symbols-outlined transition-transform group-hover:rotate-90">add_circle</span>
     <span>New Petition</span>
   </button>
 
   <!-- Navigation Links -->
-  <nav class="space-y-2 mb-10">
-    <button onclick="showAnalytics()" class="w-full flex items-center gap-3 px-4 py-3 clay-card text-secondary font-semibold hover:bg-white/80 transition-colors">
-      <span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">analytics</span>
-      <span>Case Analytics</span>
+  <nav class="space-y-2 mb-8">
+    <button onclick="showAnalytics()" class="w-full flex items-center gap-2 px-3 py-2.5 clay-card text-secondary font-semibold text-sm hover:bg-white/80 transition-colors">
+      <span class="material-symbols-outlined text-lg" style="font-variation-settings: 'FILL' 1;">analytics</span>
+      <span>Analytics</span>
     </button>
-    <a href="/court/ui" class="flex items-center gap-3 px-4 py-3 text-primary/60 hover:text-primary transition-colors font-medium">
-      <span class="material-symbols-outlined">balance</span>
+    <a href="/court/ui" class="flex items-center gap-2 px-3 py-2.5 text-primary/60 hover:text-primary transition-colors font-medium text-sm">
+      <span class="material-symbols-outlined text-lg">balance</span>
       <span>Moot Court</span>
     </a>
   </nav>
 
   <!-- Session List Container -->
   <div class="flex-1 overflow-hidden flex flex-col min-h-0">
-    <h3 class="text-[11px] uppercase tracking-[0.2em] text-primary/40 font-bold px-4 mb-4">Recent Sessions</h3>
+    <h3 class="text-[10px] uppercase tracking-[0.15em] text-primary/40 font-bold px-3 mb-3">Sessions</h3>
     <div class="flex-1 overflow-y-auto space-y-3 px-1 custom-scrollbar" id="sessions-list">
       <div class="sessions-empty text-xs text-primary/50 px-4 py-8 text-center">No active cases</div>
     </div>
@@ -186,7 +186,7 @@
   </header>
 
   <!-- Content Canvas -->
-  <div class="flex-1 overflow-y-auto px-8 pb-24 custom-scrollbar relative">
+  <div class="flex-1 overflow-y-auto px-8 pb-20 custom-scrollbar relative">
     <!-- Welcome Screen -->
     <section class="max-w-4xl mx-auto pt-8 flex flex-col items-center text-center screen active" id="screen-welcome">
       <div class="relative mb-8">
@@ -257,13 +257,12 @@
   </div>
 
   <!-- Sticky Input Area -->
-  <div class="absolute bottom-0 left-0 right-0 bg-[#F5F0E8]/80 backdrop-blur-md p-6 z-40">
-    <div class="max-w-4xl mx-auto clay-inset p-2 flex items-end gap-2 shadow-lg" id="petition-input">
-      <div class="flex-1 min-h-[48px] px-4 py-2">
-        <textarea id="query-input" class="w-full bg-transparent border-none focus:ring-0 text-primary placeholder-primary/30 font-medium custom-scrollbar text-sm" placeholder="State your inquiry..." rows="1"></textarea>
+  <div class="absolute bottom-0 left-0 right-0 bg-[#F5F0E8]/90 backdrop-blur-md px-8 py-4 z-40 border-t border-primary/5">
+    <div class="max-w-4xl mx-auto clay-inset p-1.5 flex items-end gap-2" id="petition-input">
+      <div class="flex-1 min-h-[40px] px-3 py-2">
+        <textarea id="query-input" class="w-full bg-transparent border-none focus:ring-0 text-primary placeholder-primary/30 font-normal custom-scrollbar text-xs" placeholder="Ask anything..." rows="1"></textarea>
       </div>
-      <button onclick="submitQuery()" class="clay-button-primary px-6 py-2 rounded-lg text-white font-bold flex items-center gap-2 shadow-lg flex-shrink-0" id="send-btn">
-        <span class="text-sm">Submit</span>
+      <button onclick="submitQuery()" class="clay-button-primary px-4 py-1.5 rounded-md text-white font-semibold flex items-center gap-1.5 shadow-lg flex-shrink-0" id="send-btn">
         <span class="material-symbols-outlined text-base">send</span>
       </button>
     </div>