feat: add frontend and backend code for multimodal RAG knowledge assistant

.gitignore

@@ -0,0 +1,29 @@
+# Python
+__pycache__/
+*.pyc
+*.pyo
+*.pyd
+*.sqlite3
+.env
+.venv/
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Data (don't upload raw large files)
+data/raw/*
+data/processed/images/*
+data/processed/text/*
+data/processed/audio/*
+data/users/
+data/*.db
+
+# Frontend
+frontend/node_modules/
+frontend/dist/
+frontend/.vite/
+
+# Model caches
+*.pt
+*.bin

backend/auth.py

@@ -0,0 +1,46 @@
+import os
+from datetime import datetime, timedelta
+from typing import Optional
+from jose import JWTError, jwt
+from passlib.context import CryptContext
+from fastapi import Depends, HTTPException, status
+from fastapi.security import OAuth2PasswordBearer
+from dotenv import load_dotenv
+load_dotenv()
+
+SECRET_KEY = os.getenv("ENCRYPTION_KEY")
+ALGORITHM = "HS256"
+ACCESS_TOKEN_EXPIRE_MINUTES = 30
+
+pwd_context = CryptContext(schemes=["bcrypt"], deprecated="auto")
+oauth2_scheme = OAuth2PasswordBearer(tokenUrl="token")
+
+def verify_password(plain_password, hashed_password):
+    return pwd_context.verify(plain_password, hashed_password)
+
+def get_password_hash(password):
+    return pwd_context.hash(password)
+
+def create_access_token(data: dict):
+    to_encode = data.copy()
+    expire = datetime.utcnow() + timedelta(minutes = ACCESS_TOKEN_EXPIRE_MINUTES)
+    to_encode.update({"exp": expire})
+
+    encoded_jwt = jwt.encode(to_encode, SECRET_KEY, algorithm=ALGORITHM)
+    return encoded_jwt
+
+async def get_current_user(token: str = Depends(oauth2_scheme)):
+    credentials_exception = HTTPException(
+        status_code = status.HTTP_401_UNAUTHORIZED,
+        detail = "Could not validate credentials",
+        headers={"WWW-Authenticate": "Bearer"},
+    )
+    try:
+        payload = jwt.decode(token, SECRET_KEY, algorithms=[ALGORITHM])
+        username: str = payload.get("sub")
+        if username is None:
+            raise credentials_exception
+    except JWTError:
+        raise credentials_exception
+    
+    return username

backend/ingest/audio_ingest.py

@@ -0,0 +1,7 @@
+import whisper
+
+model = whisper.load_model("base")
+
+def ingest_audio(audio_path):
+    result = model.transcribe(audio_path)
+    return result["text"]

backend/ingest/image_ingest.py

@@ -0,0 +1,15 @@
+from PIL import Image
+import os
+import shutil
+
+def ingest_image(image_path, output_dir):
+    os.makedirs(output_dir, exist_ok=True)
+
+    img = Image.open(image_path).convert("RGB")
+
+    filename = os.path.basename(image_path)
+    save_path = os.path.join(output_dir, filename)
+
+    shutil.copy(image_path, save_path)
+
+    return save_path

backend/ingest/pdf_ingest.py

@@ -0,0 +1,60 @@
+import fitz
+import os
+
+def ingest_pdf(pdf_paths, output_dir):
+
+    # 🔹 Allow both single path (string) and list of paths
+    if isinstance(pdf_paths, str):
+        pdf_paths = [pdf_paths]
+
+    all_text_chunks = []
+    all_extracted_images = []
+
+    os.makedirs(output_dir, exist_ok=True)
+
+    for pdf_path in pdf_paths:
+        try:
+            print("Processing PDF:", pdf_path)
+            doc = fitz.open(pdf_path)
+
+            image_count = 0
+            source_name = os.path.basename(pdf_path)
+
+            for page_num, page in enumerate(doc):
+
+                # ------------------
+                # Extract Text
+                # ------------------
+                text = page.get_text()
+
+                if text.strip():
+                    all_text_chunks.append({
+                        "page": page_num,
+                        "text": text,
+                        "source": source_name  # important for multi-doc retrieval
+                    })
+
+                # ------------------
+                # Extract Images
+                # ------------------
+                for img in page.get_images(full=True):
+                    xref = img[0]
+                    base_image = doc.extract_image(xref)
+                    image_bytes = base_image["image"]
+                    image_ext = base_image["ext"]
+
+                    img_path = os.path.join(
+                        output_dir,
+                        f"{source_name}_page_{page_num}_img_{image_count}.{image_ext}"
+                    )
+
+                    with open(img_path, "wb") as f:
+                        f.write(image_bytes)
+
+                    all_extracted_images.append(img_path)
+                    image_count += 1
+
+        except Exception as e:
+            print(f"Error processing {pdf_path}: {e}")
+
+    return all_text_chunks, all_extracted_images

backend/main.py

@@ -0,0 +1,288 @@
+import os
+import shutil
+import glob
+from fastapi import FastAPI, UploadFile, File, HTTPException, Depends
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.staticfiles import StaticFiles
+from pydantic import BaseModel
+from typing import List
+import sqlite3
+from fastapi.security import OAuth2PasswordRequestForm
+from auth import get_password_hash, verify_password, create_access_token, get_current_user
+# Import our RAG components
+# Ensure these imports match your actual file structure
+from ingest.pdf_ingest import ingest_pdf
+from vectorstore.document_index import DocumentIndex
+from vectorstore.chunk_index import ChunkIndex
+from vectorstore.image_store import ImageVectorStore
+from vectorstore.index_manager import IndexManager
+from rag.generator import generate_answer
+from rag.reranker import rerank
+
+DB_PATH = "../data/users.db"
+
+def init_db():
+    os.makedirs(os.path.dirname(DB_PATH), exist_ok=True)
+    conn = sqlite3.connect(DB_PATH)
+    cursor = conn.cursor()
+    cursor.execute("""
+    CREATE TABLE IF NOT EXISTS users(
+        username TEXT PRIMARY KEY,
+        hashed_password TEXT NOT NULL
+        )
+        """)
+    conn.commit()
+    conn.close()
+# --- Paths ---
+# Assuming run from 'backend/' directory
+DATA_DIR = "../data"
+RAW_DIR = os.path.join(DATA_DIR, "raw")
+PROCESSED_DIR = os.path.join(DATA_DIR, "processed", "images")
+INDICES_DIR = os.path.join(DATA_DIR, "indices")
+
+CHUNK_INDEX_PATH = os.path.join(INDICES_DIR, "chunks")
+DOC_INDEX_PATH = os.path.join(INDICES_DIR, "docs")
+IMAGE_INDEX_PATH = os.path.join(INDICES_DIR, "images")
+
+# --- Global State ---
+# Initialize generic stores
+doc_index = DocumentIndex()
+chunk_index = ChunkIndex()
+image_store = ImageVectorStore()
+# Manager will be bound on startup
+index_manager = IndexManager(doc_index, chunk_index)
+
+app = FastAPI()
+
+# Enable CORS for Frontend (React default port is 5173)
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["http://localhost:5173"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# Serve static images so frontend can display them via URL
+os.makedirs(PROCESSED_DIR, exist_ok=True)
+@app.get("/images/{username}/{filename}")
+async def save_user_image(username: str, filename: str):
+    from fastapi.responses import FileResponse
+    image_path = os.path.join(DATA_DIR, "users", username, "processed", "images", filename)
+    if not os.path.exists(image_path):
+        raise HTTPException(status_code=404, detail="Image not found")
+    
+    return FileResponse(image_path)
+
+@app.on_event("startup")
+async def startup_event():
+    init_db()
+    """Load indices from disk on startup if they exist."""
+    print("Checking for existing indices...")
+    if os.path.exists(CHUNK_INDEX_PATH) and os.path.exists(DOC_INDEX_PATH) and os.path.exists(IMAGE_INDEX_PATH):
+        try:
+            chunk_index.load_local(CHUNK_INDEX_PATH)
+            doc_index.load_local(DOC_INDEX_PATH)
+            image_store.load_local(IMAGE_INDEX_PATH)
+            
+            # Re-bind manager with loaded indices
+            global index_manager
+            index_manager = IndexManager(doc_index, chunk_index)
+            print("indices loaded successfully!")
+        except Exception as e:
+            print(f"Failed to load indices: {e}")
+    else:
+        print("No indices found. System execution will rely on /ingest endpoint.")
+
+@app.get("/")
+def health_check():
+    return {"status": "ok", "message": "Multimodal RAG Backend Ready"}
+
+class UserRegister(BaseModel):
+    username: str
+    password: str
+
+@app.post("/register")
+async def register(user: UserRegister):
+    conn = sqlite3.connect(DB_PATH)
+    cursor = conn.cursor()
+
+    cursor.execute("SELECT username FROM users WHERE username = ?", (user.username,))
+    if cursor.fetchone():
+        raise HTTPException(status_code=400, detail="Username already exists")
+
+    hashed = get_password_hash(user.password)
+    cursor.execute("INSERT INTO users (username, hashed_password) VALUES (?, ?)", (user.username, hashed))
+    conn.commit()
+    conn.close()
+    return {"message": "User registered!"}
+
+@app.post("/token")
+async def login(form_data: OAuth2PasswordRequestForm = Depends()):
+
+    conn = sqlite3.connect(DB_PATH)
+    cursor = conn.cursor()
+    cursor.execute("SELECT hashed_password FROM users WHERE username = ?", (form_data.username,))
+    result = cursor.fetchone()
+    conn.close()
+
+    if not result or not verify_password(form_data.password, result[0]):
+        raise HTTPException(status_code=401, detail="Invalid credentials")
+
+    access_token = create_access_token(data={"sub": form_data.username})
+    return {"access_token": access_token, "token_type": "bearer"}
+@app.post("/ingest")
+async def ingest_endpoint(file: UploadFile = File(...),
+                          username: str = Depends(get_current_user)
+                          ):
+    USER_DIR = os.path.join(DATA_DIR, "users", username)
+    USER_RAW_DIR = os.path.join(USER_DIR, "raw")
+    USER_PROCESSED_DIR = os.path.join(USER_DIR, "processed", "images")
+    USER_INDICES_DIR = os.path.join(USER_DIR, "indices")
+    
+    USER_CHUNK_INDEX_PATH = os.path.join(USER_INDICES_DIR, "chunks")
+    USER_DOC_INDEX_PATH = os.path.join(USER_INDICES_DIR, "docs")
+    USER_IMAGE_INDEX_PATH = os.path.join(USER_INDICES_DIR, "images")
+   
+    user_doc_index = DocumentIndex()
+    user_chunk_index = ChunkIndex()
+    user_image_store = ImageVectorStore()
+    
+    # Load existing user data if available
+    if os.path.exists(USER_CHUNK_INDEX_PATH):
+        user_chunk_index.load_local(USER_CHUNK_INDEX_PATH)
+        user_doc_index.load_local(USER_DOC_INDEX_PATH)
+        user_image_store.load_local(USER_IMAGE_INDEX_PATH)
+    
+    filename = file.filename
+    save_path = os.path.join(USER_RAW_DIR, filename)
+    os.makedirs(USER_RAW_DIR, exist_ok=True)
+    
+    # Save Uploaded File
+    with open(save_path, "wb") as buffer:
+        shutil.copyfileobj(file.file, buffer)
+        
+    print(f"[{username}] Ingesting {filename}...")
+    text_chunks, _ = ingest_pdf(save_path, USER_PROCESSED_DIR)
+    
+    # --- Index Text ---
+    from collections import defaultdict
+    chunks_by_source = defaultdict(list)
+    for chunk in text_chunks:
+        chunks_by_source[chunk["source"]].append(chunk["text"])
+    for source, chunks in chunks_by_source.items():
+        slide_chunks = []
+        full_text = ""
+        for text in chunks:
+            text = text.strip()
+            if len(text) > 50:
+                full_text += text + "\n"
+                slide_chunks.append(text)
+        
+        if slide_chunks:
+            user_doc_index.add_document(full_text, source)
+            user_chunk_index.add_chunks(source, slide_chunks)
+            
+    # --- Index Images ---
+    all_images = glob.glob(os.path.join(USER_PROCESSED_DIR, "*.png"))
+    pdf_basename = os.path.basename(save_path)
+    new_images = [img for img in all_images if pdf_basename in os.path.basename(img)]
+    
+    image_metadata = []
+    for p in new_images:
+        try:
+            parts = p.split("_page_")
+            page_num = int(parts[1].split("_img_")[0]) if len(parts) > 1 else 0
+        except:
+            page_num = 0
+        image_metadata.append({"image_path": p, "page": page_num})
+        
+    if new_images:
+        user_image_store.add_images(new_images, image_metadata)
+    # --- Save Updates ---
+    user_chunk_index.save_local(USER_CHUNK_INDEX_PATH)
+    user_doc_index.save_local(USER_DOC_INDEX_PATH)
+    user_image_store.save_local(USER_IMAGE_INDEX_PATH)
+    
+    return {
+        "message": f"Successfully ingested {filename}", 
+        "chunks": len(text_chunks), 
+        "images": len(new_images)
+    }
+
+class QueryRequest(BaseModel):
+    query: str
+
+@app.post("/chat")
+async def chat_endpoint(
+    request: QueryRequest,
+    username: str = Depends(get_current_user)  # <-- ADD THIS
+):
+    query = request.query
+    
+    # User-specific directories
+    USER_DIR = os.path.join(DATA_DIR, "users", username)
+    USER_INDICES_DIR = os.path.join(USER_DIR, "indices")
+    USER_PROCESSED_DIR = os.path.join(USER_DIR, "processed", "images")
+    
+    USER_CHUNK_INDEX_PATH = os.path.join(USER_INDICES_DIR, "chunks")
+    USER_DOC_INDEX_PATH = os.path.join(USER_INDICES_DIR, "docs")
+    USER_IMAGE_INDEX_PATH = os.path.join(USER_INDICES_DIR, "images")
+    
+    # Load user's indices
+    user_doc_index = DocumentIndex()
+    user_chunk_index = ChunkIndex()
+    user_image_store = ImageVectorStore()
+    
+    if not os.path.exists(USER_CHUNK_INDEX_PATH):
+        return {
+            "answer": "You haven't uploaded any documents yet. Please upload a PDF first.",
+            "sources": [],
+            "images": []
+        }
+    
+    user_chunk_index.load_local(USER_CHUNK_INDEX_PATH)
+    user_doc_index.load_local(USER_DOC_INDEX_PATH)
+    user_image_store.load_local(USER_IMAGE_INDEX_PATH)
+    
+    user_index_manager = IndexManager(user_doc_index, user_chunk_index)
+    
+    # 1. Retrieve Text
+    retrieved_chunks = user_index_manager.retrieve(query)
+    
+    # Deduplicate
+    unique_chunks = []
+    seen = set()
+    for r in retrieved_chunks:
+        if r["content"] not in seen:
+            unique_chunks.append(r)
+            seen.add(r["content"])
+            
+    # 2. Rerank
+    ranked_chunks = rerank(query, unique_chunks, top_k=5)
+    
+    # 3. Retrieve Images
+    image_results = user_image_store.search(query, k=4)
+    
+    # 4. Generate Answer
+    try:
+        answer = generate_answer(query, ranked_chunks, image_results)
+    except Exception as e:
+        answer = f"Error generating answer: {e}"
+        
+    # 5. Format Response for Frontend
+    # Convert local image paths to URLs
+    base_url = f"http://localhost:8000/images/{username}/"
+    frontend_images = []
+    for img in image_results:
+        fname = os.path.basename(img["image_path"])
+        frontend_images.append({
+            "url": base_url + fname,
+            "page": img.get("page", 0)
+        })
+        
+    return {
+        "answer": answer,
+        "sources": ranked_chunks,
+        "images": frontend_images
+    }

backend/rag/generator.py

@@ -0,0 +1,57 @@
+import os
+from dotenv import load_dotenv
+import google.genai as genai
+load_dotenv()
+
+client = genai.Client(api_key=os.getenv("GEMINI_API_KEY"))
+def decompose_query(user_query):
+    prompt = f"""
+Break the following user question into smaller, independent search queries.
+
+Question:
+{user_query}
+
+Return 2–4 focused sub-queries related to the input documents, if the query can be broken down, else return a singular query.
+Do NOT answer the question.
+Only return the search queries.
+"""
+
+    response = client.models.generate_content(
+        model="gemini-2.5-flash",
+        contents=prompt
+    )
+
+    return [q.strip("- ").strip() for q in response.text.split("\n") if q.strip()]
+
+def generate_answer(query, text_contexts, image_contexts):
+    text_block = "\n\n".join(
+        [f"[Text Source {i+1}]\n{ctx['content']}"
+        for i, ctx in enumerate(text_contexts)]
+    )
+
+    image_block = "\n\n".join(
+        [f"[Image Source {i+1}] Page {ctx['page']} -> {ctx['image_path']}"
+         for i, ctx in enumerate(image_contexts)]
+    )
+
+    prompt = f"""
+You are a multimodal AI Knowledge assistant. Use ONLY the provided context to answer the question. If the answer is not in the context, say you don't know.
+Provide detailed, informative answers to the user to the best of your ability.
+
+TEXT CONTEXT:
+{text_block}
+
+IMAGE CONTEXT:
+{image_block}
+
+QUESTION:
+{query}
+
+Provide a clear answer with references like:
+(Text Source 1), (Image Source 2)
+"""
+    response = client.models.generate_content(
+        model = "gemini-2.5-flash",
+        contents=prompt
+    )
+    return response.text

backend/rag/reranker.py

@@ -0,0 +1,17 @@
+from sentence_transformers import CrossEncoder
+
+reranker = CrossEncoder("cross-encoder/ms-marco-MiniLM-L-6-v2")
+
+def rerank(query, docs, top_k=5):
+    if not docs:
+        return []
+    pairs = [(query, doc['content']) for doc in docs]
+    scores = reranker.predict(pairs)
+
+    ranked = sorted(
+        zip(docs, scores),
+        key=lambda x: x[1],
+        reverse=True
+    )
+
+    return [doc for doc, score in ranked[:top_k]]

backend/test-rag.py

@@ -0,0 +1,138 @@
+from vectorstore.document_index import DocumentIndex
+from vectorstore.chunk_index import ChunkIndex
+from vectorstore.image_store import ImageVectorStore
+from vectorstore.index_manager import IndexManager
+
+from rag.generator import generate_answer, decompose_query
+from rag.reranker import rerank
+
+from ingest.pdf_ingest import ingest_pdf
+from utils.text_utils import chunk_by_slide
+
+import os
+import glob
+
+
+
+
+doc_index = DocumentIndex()
+chunk_index = ChunkIndex()
+image_store = ImageVectorStore()
+
+index_manager = IndexManager(doc_index, chunk_index)
+
+
+DATA_DIR = "../data"
+INDICES_DIR = os.path.join(DATA_DIR, "indices")
+
+CHUNK_INDEX_PATH = os.path.join(INDICES_DIR, "chunks")
+DOC_INDEX_PATH = os.path.join(INDICES_DIR, "docs")
+IMAGE_INDEX_PATH = os.path.join(INDICES_DIR, "images")
+
+if os.path.exists(CHUNK_INDEX_PATH) and os.path.exists(DOC_INDEX_PATH) and os.path.exists(IMAGE_INDEX_PATH):
+    print("Loading indices from disk (skipping ingestion)...")
+
+    chunk_index.load_local(CHUNK_INDEX_PATH)
+    doc_index.load_local(DOC_INDEX_PATH)
+    image_store.load_local(IMAGE_INDEX_PATH)
+
+    index_manager = IndexManager(doc_index, chunk_index)
+else:
+    print("Indices not found. Starting fresh ingesetion...")
+
+    pdf_list = [
+        "../data/raw/os.pdf",
+        "../data/raw/DEVOPS.pdf",
+        "../data/raw/DBMS_Notes.pdf"
+    ]
+    
+    text_chunks, _ = ingest_pdf(pdf_list, "../data/processed/images")
+
+    from collections import defaultdict
+    chunks_by_source = defaultdict(list)
+
+    for chunk in text_chunks:
+        chunks_by_source[chunk["source"]].append(chunk["text"])
+
+    for source, chunks in chunks_by_source.items():
+        slide_chunks = []
+        full_text = ""
+        for text in chunks:
+            text = text.strip()
+            if len(text) > 50:
+                full_text += text + "\n"
+                slide_chunks.append(text)
+            
+        if(slide_chunks):
+            doc_index.add_document(full_text, source)
+            chunk_index.add_chunks(source, slide_chunks)
+
+    image_paths = glob.glob("../data/processed/images/*.png")
+    image_metadata = []
+
+    for p in image_paths:
+        try:
+            parts = p.split("_page_")
+            page_num = int(parts[1].split("_img_")[0]) if len(parts) > 1 else 0
+        except:
+            page_num = 0
+        image_metadata.append({"image_path": p, "page": page_num})
+    
+    image_store.add_images(image_paths[:20], image_metadata[:20])
+
+    print("Saving indices to disk...")
+    chunk_index.save_local(CHUNK_INDEX_PATH)
+    doc_index.save_local(DOC_INDEX_PATH)
+    image_store.save_local(IMAGE_INDEX_PATH)
+
+print("System ready!")
+
+
+
+
+
+
+
+
+query = input("Enter your question: ")
+
+# Optional: decompose
+# Optional: decompose
+# Skip decomposition for speed
+subqueries = [query]
+
+all_chunks = []
+
+for sq in subqueries:
+    retrieved_chunks = index_manager.retrieve(sq)
+    all_chunks.extend(retrieved_chunks)
+
+# Deduplicate
+# Deduplicate
+unique = []
+seen = set()
+
+for r in all_chunks:
+    content_text = r["content"]  # this should be string
+    if content_text not in seen:
+        unique.append(r)
+        seen.add(content_text)
+
+print(f"\nFound {len(unique)} unique chunks.")
+for i, r in enumerate(unique[:3]):
+    print(f"Chunk {i}: {r['content'][:100]}...")
+
+text_results = rerank(query, unique, top_k=6)
+print(f"Reranked to {len(text_results)} chunks.")
+
+# Image retrieval stays global (can improve later)
+image_results = image_store.search(query, k=6)
+
+try:
+    answer = generate_answer(query, text_results, image_results)
+    print("\n=== FINAL ANSWER ===\n")
+    print(answer)
+except Exception as e:
+    print(f"\nGeneration failed: {e}")
+    # Don't fail the script, just report error
+

backend/test.py

@@ -0,0 +1,5 @@
+from ingest.audio_ingest import ingest_audio
+from ingest.pdf_ingest import ingest_pdf
+
+print(ingest_pdf("../data/raw/os.pdf", "../data/processed/images"))
+print(ingest_audio("../data/raw/Recording.mp3"))

backend/test_standalone_image.py

@@ -0,0 +1,13 @@
+from ingest.image_ingest import ingest_image
+from PIL import Image
+
+img_path = ingest_image(
+    "../data/raw/devops.png",
+    "../data/processed/images"
+)
+
+img = Image.open(img_path)
+img.verify()
+
+print(" Standalone image ingestion works")
+

backend/testv.py

@@ -0,0 +1,20 @@
+from vectorstore.text_store import TextVectorStore
+from vectorstore.image_store import ImageVectorStore
+import glob
+image_paths = glob.glob("../data/processed/images/*.png")
+# TEXT
+text_store = TextVectorStore()
+text_store.add_texts(
+    ["Git is a version control system", "Docker uses containers"],
+    [{"src": "pdf"}, {"src": "pdf"}]
+)
+
+print(text_store.search("What is git?"))
+
+# IMAGE
+image_store = ImageVectorStore()
+image_store.add_images(
+    image_paths,
+    [{"page": i} for i in range(len(image_paths))]
+)
+print(image_store.search("types of operating systems"))

backend/utils/text_utils.py

@@ -0,0 +1,23 @@
+def chunk_by_slide(text):
+    # Split by newline and group logically
+    lines = text.split("\n")
+    chunks = []
+    current_chunk = ""
+
+    for line in lines:
+        line = line.strip()
+        if not line:
+            continue
+
+        # If line looks like a heading, start new chunk
+        if line.endswith("Structure") or line.endswith("Generation"):
+            if current_chunk:
+                chunks.append(current_chunk.strip())
+            current_chunk = line + "\n"
+        else:
+            current_chunk += line + " "
+
+    if current_chunk:
+        chunks.append(current_chunk.strip())
+
+    return chunks

backend/vectorstore/chunk_index.py

@@ -0,0 +1,80 @@
+import faiss
+import numpy as np
+from sentence_transformers import SentenceTransformer
+import pickle
+import os
+
+class ChunkIndex:
+    def __init__(self):
+        self.model = SentenceTransformer("all-MiniLM-L6-v2")
+        # Global index for ALL chunks
+        self.index = None
+        self.chunks = []  # List of dicts: {"source": str, "text": str}
+
+    def add_chunks(self, source, chunks):
+        """
+        chunks: list of strings (the text segments)
+        source: filename or identifier
+        """
+        if not chunks:
+            return
+
+        # 1. Store metadata
+        for text in chunks:
+            self.chunks.append({
+                "source": source,
+                "text": text
+            })
+
+        # 2. Embed
+        embeddings = self.model.encode(chunks)
+        embeddings = np.array(embeddings)
+
+        # Ensure 2D
+        if embeddings.ndim == 1:
+            embeddings = embeddings.reshape(1, -1)
+
+        embeddings = embeddings.astype("float32")
+        faiss.normalize_L2(embeddings)
+
+        # 3. Add to FAISS index
+        if self.index is None:
+            self.index = faiss.IndexFlatIP(embeddings.shape[1])
+
+        self.index.add(embeddings)
+
+    def search(self, query, k=6):
+        if self.index is None or self.index.ntotal == 0:
+            return []
+
+        q_emb = self.model.encode([query])
+        q_emb = np.array(q_emb).astype("float32")
+        faiss.normalize_L2(q_emb)
+
+        k = min(k, self.index.ntotal)
+        scores, idxs = self.index.search(q_emb, k)
+
+        results = []
+        for i in idxs[0]:
+            if i < len(self.chunks):
+                item = self.chunks[i]
+                results.append({
+                    "source": item["source"],
+                    "content": item["text"]
+                })
+        
+        return results
+    
+    def save_local(self, folder_path):
+        os.makedirs(folder_path, exist_ok=True)
+
+        faiss.write_index(self.index, os.path.join(folder_path, "index.faiss"))
+
+        with open(os.path.join(folder_path, "chunks.pkl"), "wb") as f:
+            pickle.dump(self.chunks, f)
+    
+    def load_local(self, folder_path):
+        self.index = faiss.read_index(os.path.join(folder_path, "index.faiss"))
+            
+        with open(os.path.join(folder_path, "chunks.pkl"), "rb") as f:
+            self.chunks = pickle.load(f)

backend/vectorstore/document_index.py

@@ -0,0 +1,46 @@
+import faiss
+import numpy as np
+from sentence_transformers import SentenceTransformer
+import os
+import pickle
+
+class DocumentIndex:
+    def __init__(self):
+        self.model = SentenceTransformer("all-MiniLM-L6-v2")
+        self.index = faiss.IndexFlatIP(384)
+        self.metadata = []
+
+    def add_document(self, full_text, source):
+        embedding = self.model.encode([full_text])
+        embedding = np.array(embedding).astype("float32")
+        faiss.normalize_L2(embedding)
+
+        self.index.add(embedding)
+
+        self.metadata.append({
+            "source": source,
+            "full_text": full_text
+        })
+
+    def search(self, query, k=2):
+        q_emb = self.model.encode([query])
+        q_emb = np.array(q_emb).astype("float32")
+        faiss.normalize_L2(q_emb)
+
+        scores, idxs = self.index.search(q_emb, k)
+
+        return [self.metadata[i] for i in idxs[0]]
+
+    def save_local(self, folder_path):
+        os.makedirs(folder_path, exist_ok=True)
+
+        faiss.write_index(self.index, os.path.join(folder_path, "index.faiss"))
+
+        with open(os.path.join(folder_path, "metadata.pkl"), "wb") as f:
+            pickle.dump(self.metadata, f)
+    
+    def load_local(self, folder_path):
+        self.index = faiss.read_index(os.path.join(folder_path, "index.faiss"))
+            
+        with open(os.path.join(folder_path, "metadata.pkl"), "rb") as f:
+            self.metadata = pickle.load(f)

backend/vectorstore/image_store.py

@@ -0,0 +1,52 @@
+import clip
+import torch
+import faiss
+import numpy as np
+from PIL import Image
+import os
+import pickle
+class ImageVectorStore:
+    def __init__(self):
+        self.device = "cuda" if torch.cuda.is_available() else "cpu"
+        self.model, self.preprocess = clip.load("ViT-B/32", device=self.device)
+        self.index = faiss.IndexFlatL2(512)  # 512 is the dimension of the embeddings from the model
+        self.metadata = []
+
+    def add_images(self, image_paths, metadatas):
+        images = [
+            self.preprocess(Image.open(p)).unsqueeze(0)
+            for p in image_paths
+        ]
+        images = torch.cat(images).to(self.device)
+
+        with torch.no_grad():
+            emb = self.model.encode_image(images)
+
+        self.index.add(emb.cpu().numpy().astype("float32"))
+
+        for path, meta in zip(image_paths, metadatas):
+            enriched_meta = meta.copy()
+            enriched_meta["image_path"] = path
+            self.metadata.append(enriched_meta)
+
+    def search(self, query_text, k=5):
+        text_tokens = clip.tokenize([query_text]).to(self.device)
+        with torch.no_grad():
+            q_emb = self.model.encode_text(text_tokens)
+        
+        _, idxs = self.index.search(q_emb.cpu().numpy().astype("float32"), k)
+        return [self.metadata[i] for i in idxs[0]]
+    
+    def save_local(self, folder_path):
+        os.makedirs(folder_path, exist_ok=True)
+
+        faiss.write_index(self.index, os.path.join(folder_path, "index.faiss"))
+
+        with open(os.path.join(folder_path, "metadata.pkl"), "wb") as f:
+            pickle.dump(self.metadata, f)
+    
+    def load_local(self, folder_path):
+        self.index = faiss.read_index(os.path.join(folder_path, "index.faiss"))
+            
+        with open(os.path.join(folder_path, "metadata.pkl"), "rb") as f:
+            self.metadata = pickle.load(f)

backend/vectorstore/index_manager.py

@@ -0,0 +1,10 @@
+class IndexManager:
+    def __init__(self, doc_index, chunk_index):
+        self.doc_index = doc_index
+        self.chunk_index = chunk_index
+
+    def retrieve(self, query):
+
+        # Search global chunk index directly
+        all_chunks = self.chunk_index.search(query, k=10)
+        return all_chunks

backend/vectorstore/text_store.py

@@ -0,0 +1,29 @@
+from sentence_transformers import SentenceTransformer
+import faiss
+import numpy as np
+
+class TextVectorStore:
+    def __init__(self):
+        self.model = SentenceTransformer('all-MiniLM-L6-v2')
+        self.index = faiss.IndexFlatIP(384)  # 384 is the dimension of the embeddings from the model
+        self.metadata = []
+
+    def add_texts(self, texts, metadatas=None):
+        embeddings = self.model.encode(texts)
+        embeddings = np.array(embeddings).astype("float32")
+        faiss.normalize_L2(embeddings)
+        self.index.add(embeddings)
+
+        for text, meta in zip(texts, metadatas):
+            enriched_meta = meta.copy()
+            enriched_meta["content"] = text
+            self.metadata.append(enriched_meta)
+
+    def search(self, query, k=5):
+        q_emb = self.model.encode([query])
+        q_emb = np.array(q_emb).astype("float32")
+        faiss.normalize_L2(q_emb)
+        _, idxs = self.index.search(q_emb.astype("float32"), k)
+        return [self.metadata[i] for i in idxs[0]]
+
+    

frontend/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="RAG Knowledge Assistant - AI-powered document Q&A with source citations" />
+    <title>RAG Knowledge Assistant</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

frontend/package.json

@@ -0,0 +1,23 @@
+{
+    "name": "rag-frontend",
+    "private": true,
+    "version": "0.0.0",
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": "vite build",
+        "lint": "eslint .",
+        "preview": "vite preview"
+    },
+    "dependencies": {
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "react-markdown": "^9.0.1"
+    },
+    "devDependencies": {
+        "@types/react": "^18.3.12",
+        "@types/react-dom": "^18.3.1",
+        "@vitejs/plugin-react": "^4.3.3",
+        "vite": "^5.4.10"
+    }
+}

frontend/src/App.jsx

@@ -0,0 +1,245 @@
+import { useState, useEffect, useRef } from 'react'
+import TopNav from './components/TopNav'
+import Sidebar from './components/Sidebar'
+import ChatArea from './components/ChatArea'
+
+const API_BASE = 'http://localhost:8000'
+
+function App() {
+    const [sidebarOpen, setSidebarOpen] = useState(true)
+    const [documents, setDocuments] = useState([])
+    const [messages, setMessages] = useState([])
+    const [isLoading, setIsLoading] = useState(false)
+    const [error, setError] = useState(null)
+    const [token, setToken] = useState(() => localStorage.getItem('token'))
+    const [user, setUser] = useState(null)
+
+    // Auth state
+    const isAuthenticated = !!token
+
+    // Fetch documents on mount
+    useEffect(() => {
+        if (isAuthenticated) {
+            // Load messages from localStorage if available
+            const saved = localStorage.getItem('chat_messages')
+            if (saved) {
+                try {
+                    setMessages(JSON.parse(saved))
+                } catch (e) {
+                    console.error('Failed to parse saved messages')
+                }
+            }
+        }
+    }, [isAuthenticated])
+
+    // Save messages to localStorage
+    useEffect(() => {
+        if (messages.length > 0) {
+            localStorage.setItem('chat_messages', JSON.stringify(messages))
+        }
+    }, [messages])
+
+    const handleLogin = async (username, password) => {
+        try {
+            setError(null)
+            const formData = new FormData()
+            formData.append('username', username)
+            formData.append('password', password)
+
+            const res = await fetch(`${API_BASE}/token`, {
+                method: 'POST',
+                body: formData,
+            })
+
+            if (!res.ok) {
+                const data = await res.json()
+                throw new Error(data.detail || 'Login failed')
+            }
+
+            const data = await res.json()
+            localStorage.setItem('token', data.access_token)
+            setToken(data.access_token)
+            setUser(username)
+        } catch (err) {
+            setError(err.message)
+            throw err
+        }
+    }
+
+    const handleRegister = async (username, password) => {
+        try {
+            setError(null)
+            const res = await fetch(`${API_BASE}/register`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ username, password }),
+            })
+
+            if (!res.ok) {
+                const data = await res.json()
+                throw new Error(data.detail || 'Registration failed')
+            }
+
+            // Auto-login after registration
+            await handleLogin(username, password)
+        } catch (err) {
+            setError(err.message)
+            throw err
+        }
+    }
+
+    const handleLogout = () => {
+        localStorage.removeItem('token')
+        localStorage.removeItem('chat_messages')
+        setToken(null)
+        setUser(null)
+        setMessages([])
+        setDocuments([])
+    }
+
+    const handleUpload = async (file) => {
+        try {
+            setError(null)
+            const formData = new FormData()
+            formData.append('file', file)
+
+            // Add optimistic document
+            const tempDoc = {
+                id: Date.now(),
+                name: file.name,
+                status: 'uploading',
+                progress: 0,
+            }
+            setDocuments(prev => [...prev, tempDoc])
+
+            const res = await fetch(`${API_BASE}/ingest`, {
+                method: 'POST',
+                headers: {
+                    Authorization: `Bearer ${token}`,
+                },
+                body: formData,
+            })
+
+            if (!res.ok) {
+                throw new Error('Upload failed')
+            }
+
+            const data = await res.json()
+
+            // Update document status
+            setDocuments(prev =>
+                prev.map(doc =>
+                    doc.id === tempDoc.id
+                        ? { ...doc, status: 'ready', chunks: data.chunks, images: data.images }
+                        : doc
+                )
+            )
+
+            return data
+        } catch (err) {
+            setError(err.message)
+            // Update document status to error
+            setDocuments(prev =>
+                prev.map(doc =>
+                    doc.status === 'uploading' ? { ...doc, status: 'error' } : doc
+                )
+            )
+            throw err
+        }
+    }
+
+    const handleSendMessage = async (content) => {
+        if (!content.trim() || isLoading) return
+
+        const userMessage = {
+            id: Date.now(),
+            role: 'user',
+            content: content.trim(),
+            timestamp: new Date().toISOString(),
+        }
+
+        setMessages(prev => [...prev, userMessage])
+        setIsLoading(true)
+        setError(null)
+
+        try {
+            const res = await fetch(`${API_BASE}/chat`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    Authorization: `Bearer ${token}`,
+                },
+                body: JSON.stringify({ query: content.trim() }),
+            })
+
+            if (!res.ok) {
+                throw new Error('Failed to get response')
+            }
+
+            const data = await res.json()
+
+            const aiMessage = {
+                id: Date.now() + 1,
+                role: 'assistant',
+                content: data.answer,
+                sources: data.sources || [],
+                images: data.images || [],
+                timestamp: new Date().toISOString(),
+            }
+
+            setMessages(prev => [...prev, aiMessage])
+        } catch (err) {
+            setError(err.message)
+            // Add error message
+            setMessages(prev => [
+                ...prev,
+                {
+                    id: Date.now() + 1,
+                    role: 'error',
+                    content: 'Failed to get response. Please try again.',
+                    timestamp: new Date().toISOString(),
+                },
+            ])
+        } finally {
+            setIsLoading(false)
+        }
+    }
+
+    const clearChat = () => {
+        setMessages([])
+        localStorage.removeItem('chat_messages')
+    }
+
+    return (
+        <div className={`app-layout ${!sidebarOpen ? 'sidebar-collapsed' : ''}`}>
+            <TopNav
+                user={user}
+                isAuthenticated={isAuthenticated}
+                onLogin={handleLogin}
+                onRegister={handleRegister}
+                onLogout={handleLogout}
+                onToggleSidebar={() => setSidebarOpen(!sidebarOpen)}
+                sidebarOpen={sidebarOpen}
+            />
+
+            <Sidebar
+                isOpen={sidebarOpen}
+                documents={documents}
+                onUpload={handleUpload}
+                onDeleteDocument={(id) => setDocuments(prev => prev.filter(d => d.id !== id))}
+            />
+
+            <ChatArea
+                messages={messages}
+                isLoading={isLoading}
+                error={error}
+                isAuthenticated={isAuthenticated}
+                onSendMessage={handleSendMessage}
+                onClearChat={clearChat}
+                onDismissError={() => setError(null)}
+            />
+        </div>
+    )
+}
+
+export default App

frontend/src/components/ChatArea.css

@@ -0,0 +1,332 @@
+.chat-area {
+    grid-row: 2;
+    display: flex;
+    flex-direction: column;
+    height: calc(100vh - var(--topnav-height));
+    overflow: hidden;
+    position: relative;
+}
+
+/* Welcome Screen (Unauthenticated) */
+.chat-welcome {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: var(--space-8);
+    height: 100%;
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.welcome-icon {
+    width: 100px;
+    height: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--bg-glass);
+    border-radius: var(--radius-2xl);
+    margin-bottom: var(--space-6);
+    border: 1px solid var(--border-subtle);
+}
+
+.chat-welcome h1 {
+    font-size: var(--text-3xl);
+    font-weight: 700;
+    letter-spacing: -0.03em;
+    margin-bottom: var(--space-3);
+    background: var(--accent-gradient);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.chat-welcome>p {
+    font-size: var(--text-lg);
+    color: var(--text-secondary);
+    max-width: 500px;
+    margin-bottom: var(--space-8);
+}
+
+.welcome-features {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: var(--space-4);
+    width: 100%;
+    max-width: 600px;
+    margin-bottom: var(--space-8);
+}
+
+.feature-card {
+    padding: var(--space-5);
+    background: var(--bg-glass);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-lg);
+    text-align: center;
+    transition: all var(--transition-base);
+}
+
+.feature-card:hover {
+    background: var(--bg-glass-hover);
+    border-color: var(--border-medium);
+    transform: translateY(-2px);
+}
+
+.feature-card svg {
+    color: var(--accent-primary);
+    margin-bottom: var(--space-3);
+}
+
+.feature-card h3 {
+    font-size: var(--text-sm);
+    font-weight: 600;
+    margin-bottom: var(--space-1);
+}
+
+.feature-card p {
+    font-size: var(--text-xs);
+    color: var(--text-tertiary);
+}
+
+.welcome-cta {
+    font-size: var(--text-sm);
+    color: var(--text-tertiary);
+}
+
+/* Error Toast */
+.error-toast {
+    position: absolute;
+    top: var(--space-4);
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    padding: var(--space-3) var(--space-4);
+    background: var(--error-bg);
+    border: 1px solid rgba(239, 68, 68, 0.3);
+    border-radius: var(--radius-lg);
+    color: var(--error);
+    z-index: 10;
+    max-width: 90%;
+}
+
+.error-toast span {
+    font-size: var(--text-sm);
+}
+
+/* Messages Container */
+.messages-container {
+    flex: 1;
+    overflow-y: auto;
+    padding: var(--space-6) var(--space-4);
+}
+
+.messages-wrapper {
+    max-width: var(--chat-max-width);
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-6);
+}
+
+/* Empty State */
+.chat-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: var(--space-16) var(--space-4);
+    min-height: 50vh;
+}
+
+.empty-icon {
+    width: 80px;
+    height: 80px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--bg-glass);
+    border-radius: var(--radius-xl);
+    margin-bottom: var(--space-6);
+    color: var(--text-tertiary);
+}
+
+.chat-empty h2 {
+    font-size: var(--text-xl);
+    font-weight: 600;
+    margin-bottom: var(--space-2);
+}
+
+.chat-empty>p {
+    color: var(--text-secondary);
+    margin-bottom: var(--space-8);
+}
+
+/* Suggested Questions */
+.suggested-questions {
+    width: 100%;
+    max-width: 600px;
+}
+
+.suggestions-label {
+    font-size: var(--text-sm);
+    color: var(--text-tertiary);
+    margin-bottom: var(--space-3);
+}
+
+.suggestions-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: var(--space-2);
+}
+
+.suggestion-chip {
+    padding: var(--space-3) var(--space-4);
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-lg);
+    color: var(--text-secondary);
+    font-size: var(--text-sm);
+    text-align: left;
+    cursor: pointer;
+    transition: all var(--transition-base);
+}
+
+.suggestion-chip:hover {
+    background: var(--bg-elevated);
+    border-color: var(--accent-primary);
+    color: var(--text-primary);
+}
+
+/* Loading Bubble */
+.message-bubble.loading {
+    animation: fadeInUp var(--transition-slow) ease;
+}
+
+.typing-indicator {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: var(--space-3) 0;
+}
+
+.typing-indicator span {
+    width: 8px;
+    height: 8px;
+    background: var(--text-tertiary);
+    border-radius: 50%;
+    animation: bounce 1.4s ease-in-out infinite;
+}
+
+.typing-indicator span:nth-child(1) {
+    animation-delay: 0s;
+}
+
+.typing-indicator span:nth-child(2) {
+    animation-delay: 0.16s;
+}
+
+.typing-indicator span:nth-child(3) {
+    animation-delay: 0.32s;
+}
+
+/* Input Area */
+.input-area {
+    padding: var(--space-4) var(--space-4) var(--space-6);
+    background: linear-gradient(to top, var(--bg-primary) 80%, transparent);
+}
+
+.input-wrapper {
+    max-width: var(--chat-max-width);
+    margin: 0 auto;
+    display: flex;
+    align-items: flex-end;
+    gap: var(--space-2);
+}
+
+.clear-btn {
+    flex-shrink: 0;
+    margin-bottom: var(--space-1);
+}
+
+.chat-form {
+    flex: 1;
+    display: flex;
+    align-items: flex-end;
+    gap: var(--space-2);
+    padding: var(--space-3);
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-xl);
+    transition: all var(--transition-base);
+}
+
+.chat-form:focus-within {
+    border-color: var(--accent-primary);
+    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+}
+
+.chat-input {
+    flex: 1;
+    background: transparent;
+    border: none;
+    color: var(--text-primary);
+    font-family: var(--font-sans);
+    font-size: var(--text-base);
+    line-height: 1.5;
+    resize: none;
+    max-height: 200px;
+    padding: var(--space-1) var(--space-2);
+}
+
+.chat-input::placeholder {
+    color: var(--text-tertiary);
+}
+
+.chat-input:focus {
+    outline: none;
+}
+
+.send-btn {
+    flex-shrink: 0;
+    padding: var(--space-2) var(--space-3);
+    border-radius: var(--radius-lg);
+}
+
+.send-btn .loading-dots {
+    display: flex;
+    gap: 2px;
+}
+
+.send-btn .loading-dots span {
+    width: 4px;
+    height: 4px;
+    background: currentColor;
+    border-radius: 50%;
+    animation: bounce 1.4s ease-in-out infinite;
+}
+
+.input-hint {
+    text-align: center;
+    font-size: var(--text-xs);
+    color: var(--text-tertiary);
+    margin-top: var(--space-2);
+}
+
+@media (max-width: 768px) {
+    .welcome-features {
+        grid-template-columns: 1fr;
+    }
+
+    .suggestions-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .chat-welcome h1 {
+        font-size: var(--text-2xl);
+    }
+}

frontend/src/components/ChatArea.jsx

@@ -0,0 +1,246 @@
+import { useState, useRef, useEffect } from 'react'
+import MessageBubble from './MessageBubble'
+import './ChatArea.css'
+
+function ChatArea({
+    messages,
+    isLoading,
+    error,
+    isAuthenticated,
+    onSendMessage,
+    onClearChat,
+    onDismissError
+}) {
+    const [input, setInput] = useState('')
+    const messagesEndRef = useRef(null)
+    const textareaRef = useRef(null)
+
+    const scrollToBottom = () => {
+        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
+    }
+
+    useEffect(() => {
+        scrollToBottom()
+    }, [messages])
+
+    const handleSubmit = (e) => {
+        e.preventDefault()
+        if (input.trim() && !isLoading) {
+            onSendMessage(input)
+            setInput('')
+            if (textareaRef.current) {
+                textareaRef.current.style.height = 'auto'
+            }
+        }
+    }
+
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault()
+            handleSubmit(e)
+        }
+    }
+
+    const handleTextareaChange = (e) => {
+        setInput(e.target.value)
+        // Auto-resize textarea
+        e.target.style.height = 'auto'
+        e.target.style.height = Math.min(e.target.scrollHeight, 200) + 'px'
+    }
+
+    const suggestedQuestions = [
+        'What are the key concepts in my documents?',
+        'Summarize the main ideas',
+        'Find information about...',
+        'Compare topics across documents'
+    ]
+
+    if (!isAuthenticated) {
+        return (
+            <main className="chat-area">
+                <div className="chat-welcome">
+                    <div className="welcome-icon">
+                        <svg width="64" height="64" viewBox="0 0 24 24" fill="none">
+                            <path
+                                d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"
+                                stroke="url(#welcome-gradient)"
+                                strokeWidth="1.5"
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                            />
+                            <defs>
+                                <linearGradient id="welcome-gradient" x1="2" y1="2" x2="22" y2="22">
+                                    <stop stopColor="#6366f1" />
+                                    <stop offset="1" stopColor="#a855f7" />
+                                </linearGradient>
+                            </defs>
+                        </svg>
+                    </div>
+                    <h1>RAG Knowledge Assistant</h1>
+                    <p>Upload documents and ask questions to get AI-powered answers with source citations</p>
+                    <div className="welcome-features">
+                        <div className="feature-card">
+                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+                                <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" />
+                                <path d="M14 2v6h6M16 13H8M16 17H8M10 9H8" />
+                            </svg>
+                            <h3>Upload Documents</h3>
+                            <p>PDF, TXT, DOCX supported</p>
+                        </div>
+                        <div className="feature-card">
+                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+                                <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" />
+                            </svg>
+                            <h3>Ask Questions</h3>
+                            <p>Natural language queries</p>
+                        </div>
+                        <div className="feature-card">
+                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+                                <circle cx="11" cy="11" r="8" />
+                                <path d="M21 21l-4.35-4.35" />
+                            </svg>
+                            <h3>Get Citations</h3>
+                            <p>Answers with sources</p>
+                        </div>
+                    </div>
+                    <p className="welcome-cta">Sign in to get started</p>
+                </div>
+            </main>
+        )
+    }
+
+    return (
+        <main className="chat-area">
+            {/* Error Toast */}
+            {error && (
+                <div className="error-toast animate-fade-in-up">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                        <circle cx="12" cy="12" r="10" />
+                        <path d="M12 8v4M12 16h.01" />
+                    </svg>
+                    <span>{error}</span>
+                    <button
+                        className="btn btn-ghost btn-icon"
+                        onClick={onDismissError}
+                    >
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                            <path d="M18 6L6 18M6 6l12 12" />
+                        </svg>
+                    </button>
+                </div>
+            )}
+
+            {/* Messages Container */}
+            <div className="messages-container">
+                <div className="messages-wrapper">
+                    {messages.length === 0 ? (
+                        <div className="chat-empty">
+                            <div className="empty-icon">
+                                <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1">
+                                    <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" />
+                                </svg>
+                            </div>
+                            <h2>Start a Conversation</h2>
+                            <p>Upload documents and ask questions about their content</p>
+
+                            <div className="suggested-questions">
+                                <p className="suggestions-label">Try asking:</p>
+                                <div className="suggestions-grid">
+                                    {suggestedQuestions.map((q, i) => (
+                                        <button
+                                            key={i}
+                                            className="suggestion-chip"
+                                            onClick={() => setInput(q)}
+                                        >
+                                            {q}
+                                        </button>
+                                    ))}
+                                </div>
+                            </div>
+                        </div>
+                    ) : (
+                        <>
+                            {messages.map((msg, index) => (
+                                <MessageBubble
+                                    key={msg.id}
+                                    message={msg}
+                                    isLast={index === messages.length - 1}
+                                />
+                            ))}
+
+                            {isLoading && (
+                                <div className="message-bubble assistant loading">
+                                    <div className="assistant-avatar">
+                                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                                            <path
+                                                d="M12 2L2 7l10 5 10-5-10-5z"
+                                                stroke="currentColor"
+                                                strokeWidth="1.5"
+                                            />
+                                        </svg>
+                                    </div>
+                                    <div className="message-content">
+                                        <div className="typing-indicator">
+                                            <span></span>
+                                            <span></span>
+                                            <span></span>
+                                        </div>
+                                    </div>
+                                </div>
+                            )}
+                        </>
+                    )}
+                    <div ref={messagesEndRef} />
+                </div>
+            </div>
+
+            {/* Input Area */}
+            <div className="input-area">
+                <div className="input-wrapper">
+                    {messages.length > 0 && (
+                        <button
+                            className="btn btn-ghost btn-icon clear-btn"
+                            onClick={onClearChat}
+                            title="Clear chat"
+                        >
+                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                                <path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2" />
+                            </svg>
+                        </button>
+                    )}
+
+                    <form onSubmit={handleSubmit} className="chat-form">
+                        <textarea
+                            ref={textareaRef}
+                            value={input}
+                            onChange={handleTextareaChange}
+                            onKeyDown={handleKeyDown}
+                            placeholder="Ask about your documents..."
+                            rows={1}
+                            disabled={isLoading}
+                            className="chat-input"
+                        />
+                        <button
+                            type="submit"
+                            className="btn btn-primary send-btn"
+                            disabled={!input.trim() || isLoading}
+                        >
+                            {isLoading ? (
+                                <div className="loading-dots">
+                                    <span></span><span></span><span></span>
+                                </div>
+                            ) : (
+                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                                    <path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z" />
+                                </svg>
+                            )}
+                        </button>
+                    </form>
+                </div>
+                <p className="input-hint">Press Enter to send, Shift+Enter for new line</p>
+            </div>
+        </main>
+    )
+}
+
+export default ChatArea

frontend/src/components/MessageBubble.css

@@ -0,0 +1,288 @@
+.message-bubble {
+    display: flex;
+    gap: var(--space-3);
+    animation: fadeInUp var(--transition-slow) ease;
+}
+
+.message-bubble.user {
+    justify-content: flex-end;
+}
+
+.message-bubble.error {
+    justify-content: flex-end;
+}
+
+/* Avatars */
+.assistant-avatar {
+    width: 36px;
+    height: 36px;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--bg-glass);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-lg);
+    color: var(--accent-primary);
+}
+
+.user-avatar {
+    width: 36px;
+    height: 36px;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--accent-gradient);
+    border-radius: var(--radius-lg);
+    color: white;
+}
+
+.error-icon {
+    width: 36px;
+    height: 36px;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--error-bg);
+    border: 1px solid rgba(239, 68, 68, 0.2);
+    border-radius: var(--radius-lg);
+    color: var(--error);
+}
+
+/* Message Content */
+.message-content {
+    max-width: 75%;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+}
+
+.message-bubble.user .message-content {
+    align-items: flex-end;
+}
+
+.message-text {
+    padding: var(--space-4);
+    border-radius: var(--radius-xl);
+    font-size: var(--text-base);
+    line-height: 1.7;
+    white-space: pre-wrap;
+    word-break: break-word;
+}
+
+.message-bubble.assistant .message-text {
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border-subtle);
+    border-top-left-radius: var(--radius-sm);
+}
+
+.message-bubble.user .message-text {
+    background: var(--accent-gradient);
+    color: white;
+    border-top-right-radius: var(--radius-sm);
+}
+
+.message-bubble.error .message-text {
+    background: var(--error-bg);
+    border: 1px solid rgba(239, 68, 68, 0.2);
+    color: var(--error);
+    border-top-right-radius: var(--radius-sm);
+}
+
+/* Images */
+.message-images {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-2);
+    padding-left: var(--space-1);
+}
+
+.image-thumb {
+    position: relative;
+    width: 100px;
+    height: 100px;
+    border-radius: var(--radius-md);
+    overflow: hidden;
+    border: 1px solid var(--border-subtle);
+    cursor: pointer;
+    background: var(--bg-tertiary);
+    padding: 0;
+    transition: all var(--transition-base);
+}
+
+.image-thumb:hover {
+    border-color: var(--accent-primary);
+    transform: scale(1.05);
+}
+
+.image-thumb img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.image-page {
+    position: absolute;
+    bottom: var(--space-1);
+    right: var(--space-1);
+    padding: var(--space-1) var(--space-2);
+    background: rgba(0, 0, 0, 0.7);
+    border-radius: var(--radius-sm);
+    font-size: var(--text-xs);
+    color: white;
+}
+
+/* Sources */
+.message-sources {
+    padding-left: var(--space-1);
+}
+
+.sources-toggle {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-2) var(--space-3);
+    background: var(--bg-glass);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-md);
+    color: var(--text-secondary);
+    font-size: var(--text-sm);
+    cursor: pointer;
+    transition: all var(--transition-base);
+}
+
+.sources-toggle:hover {
+    background: var(--bg-glass-hover);
+    color: var(--text-primary);
+}
+
+.sources-toggle .chevron {
+    transition: transform var(--transition-base);
+}
+
+.sources-toggle .chevron.open {
+    transform: rotate(180deg);
+}
+
+.sources-list {
+    margin-top: var(--space-2);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    animation: fadeIn var(--transition-base) ease;
+}
+
+.source-item {
+    padding: var(--space-3);
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-md);
+}
+
+.source-header {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    margin-bottom: var(--space-2);
+}
+
+.source-num {
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--accent-primary);
+    color: white;
+    border-radius: var(--radius-full);
+    font-size: var(--text-xs);
+    font-weight: 600;
+}
+
+.source-file {
+    font-size: var(--text-sm);
+    font-weight: 500;
+    color: var(--text-primary);
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.source-score {
+    font-size: var(--text-xs);
+    color: var(--success);
+    padding: var(--space-1) var(--space-2);
+    background: var(--success-bg);
+    border-radius: var(--radius-full);
+}
+
+.source-content {
+    font-size: var(--text-sm);
+    color: var(--text-secondary);
+    line-height: 1.6;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+/* Timestamp */
+.message-time {
+    font-size: var(--text-xs);
+    color: var(--text-tertiary);
+    padding: 0 var(--space-2);
+}
+
+/* Image Modal */
+.image-modal {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.9);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    animation: fadeIn var(--transition-fast) ease;
+}
+
+.image-modal-content {
+    position: relative;
+    max-width: 90vw;
+    max-height: 90vh;
+    animation: fadeInUp var(--transition-base) ease;
+}
+
+.modal-close {
+    position: absolute;
+    top: calc(-1 * var(--space-10));
+    right: 0;
+    color: white;
+}
+
+.image-modal-content img {
+    max-width: 100%;
+    max-height: 80vh;
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-xl);
+}
+
+.image-caption {
+    text-align: center;
+    color: var(--text-secondary);
+    margin-top: var(--space-3);
+    font-size: var(--text-sm);
+}
+
+@media (max-width: 768px) {
+    .message-content {
+        max-width: 85%;
+    }
+
+    .image-thumb {
+        width: 80px;
+        height: 80px;
+    }
+}

frontend/src/components/MessageBubble.jsx

@@ -0,0 +1,162 @@
+import { useState } from 'react'
+import './MessageBubble.css'
+
+function MessageBubble({ message, isLast }) {
+    const [showSources, setShowSources] = useState(false)
+    const [selectedImage, setSelectedImage] = useState(null)
+
+    const isUser = message.role === 'user'
+    const isError = message.role === 'error'
+    const isAssistant = message.role === 'assistant'
+
+    const formatTime = (timestamp) => {
+        return new Date(timestamp).toLocaleTimeString([], {
+            hour: '2-digit',
+            minute: '2-digit'
+        })
+    }
+
+    return (
+        <div className={`message-bubble ${message.role} ${isLast ? 'is-last' : ''}`}>
+            {/* Avatar */}
+            {isAssistant && (
+                <div className="assistant-avatar">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                        <path
+                            d="M12 2L2 7l10 5 10-5-10-5z"
+                            stroke="currentColor"
+                            strokeWidth="1.5"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                        />
+                        <path
+                            d="M2 17l10 5 10-5M2 12l10 5 10-5"
+                            stroke="currentColor"
+                            strokeWidth="1.5"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                        />
+                    </svg>
+                </div>
+            )}
+
+            <div className="message-content">
+                {/* Message Text */}
+                <div className="message-text">
+                    {message.content}
+                </div>
+
+                {/* Images */}
+                {isAssistant && message.images && message.images.length > 0 && (
+                    <div className="message-images">
+                        {message.images.map((img, i) => (
+                            <button
+                                key={i}
+                                className="image-thumb"
+                                onClick={() => setSelectedImage(img)}
+                            >
+                                <img
+                                    src={img.url}
+                                    alt={`Reference image from page ${img.page}`}
+                                    loading="lazy"
+                                />
+                                <span className="image-page">p.{img.page}</span>
+                            </button>
+                        ))}
+                    </div>
+                )}
+
+                {/* Sources */}
+                {isAssistant && message.sources && message.sources.length > 0 && (
+                    <div className="message-sources">
+                        <button
+                            className="sources-toggle"
+                            onClick={() => setShowSources(!showSources)}
+                        >
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                                <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" />
+                                <path d="M14 2v6h6" />
+                            </svg>
+                            <span>{message.sources.length} source{message.sources.length !== 1 ? 's' : ''}</span>
+                            <svg
+                                className={`chevron ${showSources ? 'open' : ''}`}
+                                width="16"
+                                height="16"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                strokeWidth="2"
+                            >
+                                <path d="M6 9l6 6 6-6" />
+                            </svg>
+                        </button>
+
+                        {showSources && (
+                            <div className="sources-list">
+                                {message.sources.map((source, i) => (
+                                    <div key={i} className="source-item">
+                                        <div className="source-header">
+                                            <span className="source-num">{i + 1}</span>
+                                            <span className="source-file">{source.source || 'Document'}</span>
+                                            {source.score && (
+                                                <span className="source-score">
+                                                    {(source.score * 100).toFixed(0)}% match
+                                                </span>
+                                            )}
+                                        </div>
+                                        <p className="source-content">{source.content}</p>
+                                    </div>
+                                ))}
+                            </div>
+                        )}
+                    </div>
+                )}
+
+                {/* Timestamp */}
+                <div className="message-time">
+                    {formatTime(message.timestamp)}
+                </div>
+            </div>
+
+            {/* User Avatar */}
+            {isUser && (
+                <div className="user-avatar">
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                        <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" />
+                        <circle cx="12" cy="7" r="4" />
+                    </svg>
+                </div>
+            )}
+
+            {/* Error Icon */}
+            {isError && (
+                <div className="error-icon">
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                        <circle cx="12" cy="12" r="10" />
+                        <path d="M12 8v4M12 16h.01" />
+                    </svg>
+                </div>
+            )}
+
+            {/* Image Modal */}
+            {selectedImage && (
+                <div className="image-modal" onClick={() => setSelectedImage(null)}>
+                    <div className="image-modal-content" onClick={e => e.stopPropagation()}>
+                        <button
+                            className="modal-close btn btn-ghost btn-icon"
+                            onClick={() => setSelectedImage(null)}
+                        >
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                                <path d="M18 6L6 18M6 6l12 12" />
+                            </svg>
+                        </button>
+                        <img src={selectedImage.url} alt="Full size reference" />
+                        <p className="image-caption">Page {selectedImage.page}</p>
+                    </div>
+                </div>
+            )}
+        </div>
+    )
+}
+
+export default MessageBubble

frontend/src/components/Sidebar.css

@@ -0,0 +1,259 @@
+.sidebar {
+    grid-row: 2;
+    background: var(--bg-secondary);
+    border-right: 1px solid var(--border-subtle);
+    display: flex;
+    flex-direction: column;
+    transition: width var(--transition-base), opacity var(--transition-base);
+    overflow: hidden;
+}
+
+.sidebar.open {
+    width: var(--sidebar-width);
+}
+
+.sidebar.closed {
+    width: 0;
+    border-right: none;
+}
+
+.sidebar-content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding: var(--space-4);
+    min-width: var(--sidebar-width);
+    overflow-y: auto;
+}
+
+.sidebar-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: var(--space-4);
+}
+
+.sidebar-header h3 {
+    font-size: var(--text-sm);
+    font-weight: 600;
+    color: var(--text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.doc-count {
+    font-size: var(--text-xs);
+    font-weight: 500;
+    color: var(--text-tertiary);
+    background: var(--bg-tertiary);
+    padding: var(--space-1) var(--space-2);
+    border-radius: var(--radius-full);
+}
+
+/* Upload Zone */
+.upload-zone {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: var(--space-6) var(--space-4);
+    border: 2px dashed var(--border-subtle);
+    border-radius: var(--radius-lg);
+    cursor: pointer;
+    transition: all var(--transition-base);
+    margin-bottom: var(--space-4);
+}
+
+.upload-zone:hover {
+    border-color: var(--accent-primary);
+    background: rgba(99, 102, 241, 0.05);
+}
+
+.upload-zone.dragging {
+    border-color: var(--accent-primary);
+    background: rgba(99, 102, 241, 0.1);
+    border-style: solid;
+}
+
+.upload-icon {
+    width: 48px;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--bg-glass);
+    border-radius: var(--radius-lg);
+    color: var(--accent-primary);
+    margin-bottom: var(--space-3);
+}
+
+.upload-text {
+    font-size: var(--text-sm);
+    font-weight: 500;
+    color: var(--text-primary);
+    margin-bottom: var(--space-1);
+}
+
+.upload-hint {
+    font-size: var(--text-xs);
+    color: var(--text-tertiary);
+}
+
+/* Upload Progress */
+.upload-progress {
+    padding: var(--space-3);
+    background: var(--bg-tertiary);
+    border-radius: var(--radius-md);
+    margin-bottom: var(--space-4);
+}
+
+.progress-info {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: var(--space-2);
+}
+
+.progress-name {
+    font-size: var(--text-xs);
+    color: var(--text-primary);
+    max-width: 150px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.progress-status {
+    font-size: var(--text-xs);
+    color: var(--accent-primary);
+}
+
+.progress-bar {
+    height: 4px;
+    background: var(--bg-elevated);
+    border-radius: var(--radius-full);
+    overflow: hidden;
+}
+
+.progress-fill {
+    height: 100%;
+    background: var(--accent-gradient);
+    border-radius: var(--radius-full);
+    transition: width var(--transition-base);
+}
+
+/* Document List */
+.document-list {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    overflow-y: auto;
+}
+
+.empty-docs {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: var(--space-8) var(--space-4);
+    text-align: center;
+    color: var(--text-tertiary);
+}
+
+.empty-docs svg {
+    margin-bottom: var(--space-4);
+    opacity: 0.5;
+}
+
+.empty-docs p {
+    font-size: var(--text-sm);
+    color: var(--text-secondary);
+    margin-bottom: var(--space-1);
+}
+
+.empty-docs span {
+    font-size: var(--text-xs);
+}
+
+/* Document Item */
+.document-item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    padding: var(--space-3);
+    background: var(--bg-tertiary);
+    border-radius: var(--radius-md);
+    transition: all var(--transition-fast);
+    animation: fadeInUp var(--transition-base) ease;
+}
+
+.document-item:hover {
+    background: var(--bg-elevated);
+}
+
+.doc-icon {
+    color: var(--text-tertiary);
+    flex-shrink: 0;
+}
+
+.doc-info {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+}
+
+.doc-name {
+    font-size: var(--text-sm);
+    color: var(--text-primary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.doc-meta {
+    font-size: var(--text-xs);
+    color: var(--text-tertiary);
+}
+
+.status-icon {
+    flex-shrink: 0;
+}
+
+.status-icon.uploading {
+    color: var(--accent-primary);
+}
+
+.status-icon.ready {
+    color: var(--success);
+}
+
+.status-icon.error {
+    color: var(--error);
+}
+
+.doc-delete {
+    opacity: 0;
+    transition: opacity var(--transition-fast);
+}
+
+.document-item:hover .doc-delete {
+    opacity: 1;
+}
+
+@media (max-width: 768px) {
+    .sidebar {
+        position: fixed;
+        top: var(--topnav-height);
+        left: 0;
+        bottom: 0;
+        z-index: 50;
+        width: 280px !important;
+        transform: translateX(-100%);
+    }
+
+    .sidebar.open {
+        transform: translateX(0);
+        box-shadow: var(--shadow-xl);
+    }
+}

frontend/src/components/Sidebar.jsx

@@ -0,0 +1,195 @@
+import { useState, useRef } from 'react'
+import './Sidebar.css'
+
+function Sidebar({ isOpen, documents, onUpload, onDeleteDocument }) {
+    const [isDragging, setIsDragging] = useState(false)
+    const [uploadProgress, setUploadProgress] = useState(null)
+    const fileInputRef = useRef(null)
+
+    const handleDragOver = (e) => {
+        e.preventDefault()
+        setIsDragging(true)
+    }
+
+    const handleDragLeave = (e) => {
+        e.preventDefault()
+        setIsDragging(false)
+    }
+
+    const handleDrop = async (e) => {
+        e.preventDefault()
+        setIsDragging(false)
+
+        const files = Array.from(e.dataTransfer.files)
+        const validFiles = files.filter(f =>
+            f.type === 'application/pdf' ||
+            f.type === 'text/plain' ||
+            f.name.endsWith('.docx')
+        )
+
+        for (const file of validFiles) {
+            try {
+                setUploadProgress({ name: file.name, percent: 0 })
+                await onUpload(file)
+                setUploadProgress(null)
+            } catch (err) {
+                console.error('Upload failed:', err)
+                setUploadProgress(null)
+            }
+        }
+    }
+
+    const handleFileSelect = async (e) => {
+        const files = Array.from(e.target.files)
+        for (const file of files) {
+            try {
+                setUploadProgress({ name: file.name, percent: 0 })
+                await onUpload(file)
+                setUploadProgress(null)
+            } catch (err) {
+                console.error('Upload failed:', err)
+                setUploadProgress(null)
+            }
+        }
+        e.target.value = ''
+    }
+
+    const getStatusIcon = (status) => {
+        switch (status) {
+            case 'uploading':
+                return (
+                    <div className="status-icon uploading">
+                        <svg className="animate-spin" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                            <path d="M21 12a9 9 0 11-6.219-8.56" />
+                        </svg>
+                    </div>
+                )
+            case 'ready':
+                return (
+                    <div className="status-icon ready">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                            <path d="M20 6L9 17l-5-5" />
+                        </svg>
+                    </div>
+                )
+            case 'error':
+                return (
+                    <div className="status-icon error">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                            <circle cx="12" cy="12" r="10" />
+                            <path d="M12 8v4M12 16h.01" />
+                        </svg>
+                    </div>
+                )
+            default:
+                return null
+        }
+    }
+
+    const getFileIcon = (name) => {
+        if (name.endsWith('.pdf')) {
+            return (
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+                    <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" />
+                    <path d="M14 2v6h6M9 15h6M9 11h6" />
+                </svg>
+            )
+        }
+        return (
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+                <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" />
+                <path d="M14 2v6h6" />
+            </svg>
+        )
+    }
+
+    return (
+        <aside className={`sidebar ${isOpen ? 'open' : 'closed'}`}>
+            <div className="sidebar-content">
+                <div className="sidebar-header">
+                    <h3>Documents</h3>
+                    <span className="doc-count">{documents.length}</span>
+                </div>
+
+                {/* Upload Zone */}
+                <div
+                    className={`upload-zone ${isDragging ? 'dragging' : ''}`}
+                    onDragOver={handleDragOver}
+                    onDragLeave={handleDragLeave}
+                    onDrop={handleDrop}
+                    onClick={() => fileInputRef.current?.click()}
+                >
+                    <input
+                        ref={fileInputRef}
+                        type="file"
+                        accept=".pdf,.txt,.docx"
+                        multiple
+                        onChange={handleFileSelect}
+                        hidden
+                    />
+
+                    <div className="upload-icon">
+                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                            <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M17 8l-5-5-5 5M12 3v12" />
+                        </svg>
+                    </div>
+                    <p className="upload-text">
+                        {isDragging ? 'Drop files here' : 'Upload documents'}
+                    </p>
+                    <p className="upload-hint">PDF, TXT, DOCX</p>
+                </div>
+
+                {/* Upload Progress */}
+                {uploadProgress && (
+                    <div className="upload-progress">
+                        <div className="progress-info">
+                            <span className="progress-name">{uploadProgress.name}</span>
+                            <span className="progress-status">Uploading...</span>
+                        </div>
+                        <div className="progress-bar">
+                            <div className="progress-fill animate-pulse" style={{ width: '100%' }} />
+                        </div>
+                    </div>
+                )}
+
+                {/* Document List */}
+                <div className="document-list">
+                    {documents.length === 0 ? (
+                        <div className="empty-docs">
+                            <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1">
+                                <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" />
+                                <path d="M14 2v6h6M12 11v6M9 14h6" />
+                            </svg>
+                            <p>No documents yet</p>
+                            <span>Upload files to get started</span>
+                        </div>
+                    ) : (
+                        documents.map((doc) => (
+                            <div key={doc.id} className={`document-item ${doc.status}`}>
+                                <div className="doc-icon">{getFileIcon(doc.name)}</div>
+                                <div className="doc-info">
+                                    <span className="doc-name">{doc.name}</span>
+                                    {doc.chunks && (
+                                        <span className="doc-meta">{doc.chunks} chunks</span>
+                                    )}
+                                </div>
+                                {getStatusIcon(doc.status)}
+                                <button
+                                    className="doc-delete btn btn-ghost btn-icon"
+                                    onClick={() => onDeleteDocument(doc.id)}
+                                    aria-label="Delete document"
+                                >
+                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                                        <path d="M18 6L6 18M6 6l12 12" />
+                                    </svg>
+                                </button>
+                            </div>
+                        ))
+                    )}
+                </div>
+            </div>
+        </aside>
+    )
+}
+
+export default Sidebar

frontend/src/components/TopNav.css

@@ -0,0 +1,202 @@
+.topnav {
+    grid-column: 1 / -1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 var(--space-6);
+    background: var(--bg-secondary);
+    border-bottom: 1px solid var(--border-subtle);
+    position: sticky;
+    top: 0;
+    z-index: 100;
+}
+
+.topnav-left {
+    display: flex;
+    align-items: center;
+    gap: var(--space-4);
+}
+
+.sidebar-toggle {
+    display: flex;
+}
+
+.topnav-brand {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+}
+
+.brand-icon {
+    width: 36px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--bg-glass);
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--border-subtle);
+}
+
+.brand-name {
+    font-size: var(--text-lg);
+    font-weight: 600;
+    letter-spacing: -0.02em;
+    background: var(--accent-gradient);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.topnav-right {
+    display: flex;
+    align-items: center;
+    gap: var(--space-4);
+}
+
+.user-menu {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+}
+
+.user-avatar {
+    width: 32px;
+    height: 32px;
+    border-radius: var(--radius-full);
+    background: var(--accent-gradient);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--text-sm);
+    font-weight: 600;
+    color: white;
+}
+
+.user-name {
+    font-size: var(--text-sm);
+    color: var(--text-secondary);
+}
+
+/* Modal Styles */
+.modal-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.7);
+    backdrop-filter: blur(4px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    animation: fadeIn var(--transition-fast) ease;
+}
+
+.modal {
+    width: 100%;
+    max-width: 400px;
+    margin: var(--space-4);
+    animation: fadeInUp var(--transition-base) ease;
+}
+
+.modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: var(--space-6);
+}
+
+.modal-header h2 {
+    font-size: var(--text-xl);
+    font-weight: 600;
+    letter-spacing: -0.02em;
+}
+
+.auth-form {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-5);
+}
+
+.form-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+}
+
+.form-group label {
+    font-size: var(--text-sm);
+    font-weight: 500;
+    color: var(--text-secondary);
+}
+
+.auth-error {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-3) var(--space-4);
+    background: var(--error-bg);
+    border: 1px solid rgba(239, 68, 68, 0.2);
+    border-radius: var(--radius-md);
+    color: var(--error);
+    font-size: var(--text-sm);
+}
+
+.auth-switch {
+    text-align: center;
+    font-size: var(--text-sm);
+    color: var(--text-secondary);
+}
+
+.auth-switch button {
+    background: none;
+    border: none;
+    color: var(--accent-primary);
+    cursor: pointer;
+    font-size: inherit;
+    padding: 0;
+}
+
+.auth-switch button:hover {
+    text-decoration: underline;
+}
+
+/* Loading Dots */
+.loading-dots {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.loading-dots span {
+    width: 6px;
+    height: 6px;
+    background: currentColor;
+    border-radius: 50%;
+    animation: bounce 1.4s ease-in-out infinite;
+}
+
+.loading-dots span:nth-child(1) {
+    animation-delay: 0s;
+}
+
+.loading-dots span:nth-child(2) {
+    animation-delay: 0.16s;
+}
+
+.loading-dots span:nth-child(3) {
+    animation-delay: 0.32s;
+}
+
+@media (max-width: 768px) {
+    .topnav {
+        padding: 0 var(--space-4);
+    }
+
+    .brand-name {
+        display: none;
+    }
+
+    .user-name {
+        display: none;
+    }
+}

frontend/src/components/TopNav.jsx

@@ -0,0 +1,196 @@
+import { useState } from 'react'
+import './TopNav.css'
+
+function TopNav({
+    user,
+    isAuthenticated,
+    onLogin,
+    onRegister,
+    onLogout,
+    onToggleSidebar,
+    sidebarOpen
+}) {
+    const [showAuthModal, setShowAuthModal] = useState(false)
+    const [authMode, setAuthMode] = useState('login')
+    const [username, setUsername] = useState('')
+    const [password, setPassword] = useState('')
+    const [loading, setLoading] = useState(false)
+    const [error, setError] = useState('')
+
+    const handleSubmit = async (e) => {
+        e.preventDefault()
+        setLoading(true)
+        setError('')
+
+        try {
+            if (authMode === 'login') {
+                await onLogin(username, password)
+            } else {
+                await onRegister(username, password)
+            }
+            setShowAuthModal(false)
+            setUsername('')
+            setPassword('')
+        } catch (err) {
+            setError(err.message)
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    return (
+        <>
+            <nav className="topnav">
+                <div className="topnav-left">
+                    <button
+                        className="btn btn-ghost btn-icon sidebar-toggle"
+                        onClick={onToggleSidebar}
+                        aria-label="Toggle sidebar"
+                    >
+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                            {sidebarOpen ? (
+                                <path d="M11 19l-7-7 7-7M18 19l-7-7 7-7" />
+                            ) : (
+                                <path d="M3 12h18M3 6h18M3 18h18" />
+                            )}
+                        </svg>
+                    </button>
+
+                    <div className="topnav-brand">
+                        <div className="brand-icon">
+                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                                <path
+                                    d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"
+                                    stroke="url(#brand-gradient)"
+                                    strokeWidth="2"
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                />
+                                <defs>
+                                    <linearGradient id="brand-gradient" x1="2" y1="2" x2="22" y2="22">
+                                        <stop stopColor="#6366f1" />
+                                        <stop offset="1" stopColor="#a855f7" />
+                                    </linearGradient>
+                                </defs>
+                            </svg>
+                        </div>
+                        <span className="brand-name">RAG Assistant</span>
+                    </div>
+                </div>
+
+                <div className="topnav-right">
+                    {isAuthenticated ? (
+                        <div className="user-menu">
+                            <div className="user-avatar">
+                                {user?.[0]?.toUpperCase() || 'U'}
+                            </div>
+                            <span className="user-name">{user}</span>
+                            <button className="btn btn-ghost btn-sm" onClick={onLogout}>
+                                Logout
+                            </button>
+                        </div>
+                    ) : (
+                        <button
+                            className="btn btn-primary btn-sm"
+                            onClick={() => setShowAuthModal(true)}
+                        >
+                            Sign In
+                        </button>
+                    )}
+                </div>
+            </nav>
+
+            {/* Auth Modal */}
+            {showAuthModal && (
+                <div className="modal-overlay" onClick={() => setShowAuthModal(false)}>
+                    <div className="modal card-glass" onClick={e => e.stopPropagation()}>
+                        <div className="modal-header">
+                            <h2>{authMode === 'login' ? 'Welcome Back' : 'Create Account'}</h2>
+                            <button
+                                className="btn btn-ghost btn-icon"
+                                onClick={() => setShowAuthModal(false)}
+                            >
+                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                                    <path d="M18 6L6 18M6 6l12 12" />
+                                </svg>
+                            </button>
+                        </div>
+
+                        <form onSubmit={handleSubmit} className="auth-form">
+                            {error && (
+                                <div className="auth-error">
+                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                                        <circle cx="12" cy="12" r="10" />
+                                        <path d="M12 8v4M12 16h.01" />
+                                    </svg>
+                                    {error}
+                                </div>
+                            )}
+
+                            <div className="form-group">
+                                <label htmlFor="username">Username</label>
+                                <input
+                                    id="username"
+                                    type="text"
+                                    className="input"
+                                    value={username}
+                                    onChange={e => setUsername(e.target.value)}
+                                    placeholder="Enter username"
+                                    required
+                                    autoComplete="username"
+                                />
+                            </div>
+
+                            <div className="form-group">
+                                <label htmlFor="password">Password</label>
+                                <input
+                                    id="password"
+                                    type="password"
+                                    className="input"
+                                    value={password}
+                                    onChange={e => setPassword(e.target.value)}
+                                    placeholder="Enter password"
+                                    required
+                                    autoComplete={authMode === 'login' ? 'current-password' : 'new-password'}
+                                />
+                            </div>
+
+                            <button
+                                type="submit"
+                                className="btn btn-primary btn-lg"
+                                disabled={loading}
+                                style={{ width: '100%' }}
+                            >
+                                {loading ? (
+                                    <span className="loading-dots">
+                                        <span></span><span></span><span></span>
+                                    </span>
+                                ) : authMode === 'login' ? 'Sign In' : 'Create Account'}
+                            </button>
+
+                            <div className="auth-switch">
+                                {authMode === 'login' ? (
+                                    <>
+                                        Don't have an account?{' '}
+                                        <button type="button" onClick={() => setAuthMode('register')}>
+                                            Sign up
+                                        </button>
+                                    </>
+                                ) : (
+                                    <>
+                                        Already have an account?{' '}
+                                        <button type="button" onClick={() => setAuthMode('login')}>
+                                            Sign in
+                                        </button>
+                                    </>
+                                )}
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            )}
+        </>
+    )
+}
+
+export default TopNav

frontend/src/index.css

@@ -0,0 +1,479 @@
+/* ============================================
+   RAG Knowledge Assistant - Design System
+   ============================================ */
+
+/* CSS Reset & Base */
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  /* Colors - Dark Theme */
+  --bg-primary: #0a0a0f;
+  --bg-secondary: #12121a;
+  --bg-tertiary: #1a1a24;
+  --bg-elevated: #22222e;
+  --bg-glass: rgba(255, 255, 255, 0.03);
+  --bg-glass-hover: rgba(255, 255, 255, 0.06);
+  
+  /* Accent Colors */
+  --accent-primary: #6366f1;
+  --accent-secondary: #818cf8;
+  --accent-tertiary: #a5b4fc;
+  --accent-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
+  --accent-glow: 0 0 20px rgba(99, 102, 241, 0.4);
+  
+  /* Text Colors */
+  --text-primary: #f4f4f5;
+  --text-secondary: #a1a1aa;
+  --text-tertiary: #71717a;
+  --text-inverse: #09090b;
+  
+  /* Border Colors */
+  --border-subtle: rgba(255, 255, 255, 0.08);
+  --border-medium: rgba(255, 255, 255, 0.12);
+  --border-accent: rgba(99, 102, 241, 0.4);
+  
+  /* Status Colors */
+  --success: #22c55e;
+  --success-bg: rgba(34, 197, 94, 0.1);
+  --error: #ef4444;
+  --error-bg: rgba(239, 68, 68, 0.1);
+  --warning: #f59e0b;
+  --warning-bg: rgba(245, 158, 11, 0.1);
+  --info: #3b82f6;
+  --info-bg: rgba(59, 130, 246, 0.1);
+  
+  /* Typography */
+  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
+  
+  /* Font Sizes */
+  --text-xs: 0.75rem;
+  --text-sm: 0.875rem;
+  --text-base: 1rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.25rem;
+  --text-2xl: 1.5rem;
+  --text-3xl: 1.875rem;
+  
+  /* Spacing */
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.25rem;
+  --space-6: 1.5rem;
+  --space-8: 2rem;
+  --space-10: 2.5rem;
+  --space-12: 3rem;
+  --space-16: 4rem;
+  
+  /* Border Radius */
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+  --radius-2xl: 24px;
+  --radius-full: 9999px;
+  
+  /* Shadows */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
+  --shadow-glow: 0 0 40px rgba(99, 102, 241, 0.15);
+  
+  /* Transitions */
+  --transition-fast: 150ms ease;
+  --transition-base: 200ms ease;
+  --transition-slow: 300ms ease;
+  --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
+  
+  /* Layout */
+  --sidebar-width: 280px;
+  --topnav-height: 64px;
+  --chat-max-width: 800px;
+}
+
+/* Base Styles */
+html {
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  font-family: var(--font-sans);
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  line-height: 1.6;
+  min-height: 100vh;
+  overflow: hidden;
+}
+
+#root {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Scrollbar Styling */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--border-medium);
+  border-radius: var(--radius-full);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--text-tertiary);
+}
+
+/* Focus Styles */
+:focus-visible {
+  outline: 2px solid var(--accent-primary);
+  outline-offset: 2px;
+}
+
+/* Selection */
+::selection {
+  background: rgba(99, 102, 241, 0.3);
+  color: var(--text-primary);
+}
+
+/* ============================================
+   Utility Classes
+   ============================================ */
+
+.glass {
+  background: var(--bg-glass);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid var(--border-subtle);
+}
+
+.glass-strong {
+  background: rgba(18, 18, 26, 0.8);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid var(--border-subtle);
+}
+
+/* ============================================
+   Button Styles
+   ============================================ */
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  padding: var(--space-3) var(--space-5);
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  font-weight: 500;
+  border-radius: var(--radius-lg);
+  border: none;
+  cursor: pointer;
+  transition: all var(--transition-base);
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn-primary {
+  background: var(--accent-gradient);
+  color: white;
+  box-shadow: var(--shadow-md), 0 0 20px rgba(99, 102, 241, 0.3);
+}
+
+.btn-primary:hover:not(:disabled) {
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-lg), 0 0 30px rgba(99, 102, 241, 0.4);
+}
+
+.btn-primary:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.btn-secondary {
+  background: var(--bg-glass);
+  color: var(--text-primary);
+  border: 1px solid var(--border-subtle);
+}
+
+.btn-secondary:hover:not(:disabled) {
+  background: var(--bg-glass-hover);
+  border-color: var(--border-medium);
+}
+
+.btn-ghost {
+  background: transparent;
+  color: var(--text-secondary);
+}
+
+.btn-ghost:hover:not(:disabled) {
+  background: var(--bg-glass);
+  color: var(--text-primary);
+}
+
+.btn-icon {
+  padding: var(--space-2);
+  border-radius: var(--radius-md);
+}
+
+.btn-sm {
+  padding: var(--space-2) var(--space-3);
+  font-size: var(--text-xs);
+}
+
+.btn-lg {
+  padding: var(--space-4) var(--space-6);
+  font-size: var(--text-base);
+}
+
+/* ============================================
+   Input Styles
+   ============================================ */
+
+.input {
+  width: 100%;
+  padding: var(--space-3) var(--space-4);
+  font-family: var(--font-sans);
+  font-size: var(--text-base);
+  color: var(--text-primary);
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  transition: all var(--transition-base);
+}
+
+.input::placeholder {
+  color: var(--text-tertiary);
+}
+
+.input:hover {
+  border-color: var(--border-medium);
+}
+
+.input:focus {
+  outline: none;
+  border-color: var(--accent-primary);
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
+}
+
+/* ============================================
+   Card Styles
+   ============================================ */
+
+.card {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-xl);
+  padding: var(--space-6);
+}
+
+.card-glass {
+  background: var(--bg-glass);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-xl);
+  padding: var(--space-6);
+}
+
+/* ============================================
+   Animation Keyframes
+   ============================================ */
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideInRight {
+  from {
+    opacity: 0;
+    transform: translateX(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@keyframes bounce {
+  0%, 80%, 100% {
+    transform: translateY(0);
+  }
+  40% {
+    transform: translateY(-6px);
+  }
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Animation Classes */
+.animate-fade-in {
+  animation: fadeIn var(--transition-base) ease forwards;
+}
+
+.animate-fade-in-up {
+  animation: fadeInUp var(--transition-slow) ease forwards;
+}
+
+.animate-slide-in-right {
+  animation: slideInRight var(--transition-slow) ease forwards;
+}
+
+.animate-pulse {
+  animation: pulse 2s ease-in-out infinite;
+}
+
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
+
+/* Skeleton Loading */
+.skeleton {
+  background: linear-gradient(
+    90deg,
+    var(--bg-tertiary) 0%,
+    var(--bg-elevated) 50%,
+    var(--bg-tertiary) 100%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.5s ease-in-out infinite;
+  border-radius: var(--radius-md);
+}
+
+/* ============================================
+   Layout Components
+   ============================================ */
+
+.app-layout {
+  display: grid;
+  grid-template-rows: var(--topnav-height) 1fr;
+  grid-template-columns: var(--sidebar-width) 1fr;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.app-layout.sidebar-collapsed {
+  grid-template-columns: 0 1fr;
+}
+
+/* ============================================
+   Badge Styles
+   ============================================ */
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--space-1) var(--space-2);
+  font-size: var(--text-xs);
+  font-weight: 500;
+  border-radius: var(--radius-full);
+  background: var(--bg-glass);
+  color: var(--text-secondary);
+  border: 1px solid var(--border-subtle);
+}
+
+.badge-success {
+  background: var(--success-bg);
+  color: var(--success);
+  border-color: rgba(34, 197, 94, 0.2);
+}
+
+.badge-error {
+  background: var(--error-bg);
+  color: var(--error);
+  border-color: rgba(239, 68, 68, 0.2);
+}
+
+.badge-warning {
+  background: var(--warning-bg);
+  color: var(--warning);
+  border-color: rgba(245, 158, 11, 0.2);
+}
+
+.badge-info {
+  background: var(--info-bg);
+  color: var(--info);
+  border-color: rgba(59, 130, 246, 0.2);
+}
+
+/* ============================================
+   Responsive Breakpoints
+   ============================================ */
+
+@media (max-width: 1024px) {
+  :root {
+    --sidebar-width: 240px;
+  }
+}
+
+@media (max-width: 768px) {
+  :root {
+    --sidebar-width: 0;
+    --topnav-height: 56px;
+  }
+  
+  .app-layout {
+    grid-template-columns: 1fr;
+  }
+}

frontend/src/main.jsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+
+createRoot(document.getElementById('root')).render(
+    <StrictMode>
+        <App />
+    </StrictMode>,
+)

frontend/vite.config.js

@@ -0,0 +1,17 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+    plugins: [react()],
+    server: {
+        port: 5173,
+        proxy: {
+            '/api': {
+                target: 'http://localhost:8000',
+                changeOrigin: true,
+                rewrite: (path) => path.replace(/^\/api/, '')
+            }
+        }
+    }
+})

requirements.txt

@@ -0,0 +1,39 @@
+# FastAPI & Server
+fastapi
+uvicorn[standard]
+python-multipart
+
+protobuf==5.28.3
+timm==0.9.16
+
+# Authentication
+python-jose[cryptography]
+passlib[bcrypt]
+python-dotenv
+
+# PDF Processing
+pymupdf
+
+# Image Processing
+pillow
+clip @ git+https://github.com/openai/CLIP.git
+
+# Machine Learning & Embeddings
+torch
+transformers
+sentence-transformers
+faiss-cpu
+
+# RAG Components
+langchain
+tqdm
+
+# Audio Processing (optional)
+openai-whisper
+
+# Google Generative AI
+google-genai
+
+# Utilities
+numpy
+pydantic