chore: finally untrack large database files

.dockerignore

@@ -0,0 +1,22 @@
+# Exclude node modules and build artifacts from Docker build context
+Frontend/node_modules
+Frontend/.next
+Frontend/.pnpm-store
+**/node_modules
+**/.next
+
+# General ignores
+.git
+.gitignore
+.vscode
+__pycache__/
+*.pyc
+*.pyo
+*.pyd
+dist/
+build/
+.DS_Store
+
+# env ignore
+.env
+.env.local

.env.example

@@ -0,0 +1 @@
+MISTRAL_API_KEY=your_api_key_here

.env.production.example

@@ -0,0 +1,16 @@
+# --- Backend Production Environment Variables ---
+
+# Mistral AI API Key (Required for RAG)
+MISTRAL_API_KEY=your_mistral_api_key_here
+
+# Supabase Configuration (Required for Auth and Chat History)
+SUPABASE_URL=https://your-project-id.supabase.co
+SUPABASE_ANON_KEY=your-anon-key
+SUPABASE_SERVICE_ROLE_KEY=your-service-role-key
+
+# JWT Configuration
+JWT_SECRET=your-super-secret-key-change-this
+JWT_ALGORITHM=HS256
+
+# Optional: Port (Defaults to 7860 in Dockerfile)
+# PORT=7860

.github/workflows/ci.yml

@@ -0,0 +1,48 @@
+name: CI
+
+on:
+  push:
+    branches: '**'
+  pull_request:
+    branches: '**'
+
+jobs:
+  backend-tests:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Set up Python
+        uses: actions/setup-python@v4
+        with:
+          python-version: '3.11'
+
+      - name: Install dependencies
+        run: |
+          python -m pip install --upgrade pip
+          pip install -r requirements.txt
+          if [ -f Backend/requirements.txt ]; then pip install -r Backend/requirements.txt; fi
+
+      - name: Run tests
+        run: |
+          python -m pytest api/ -v --ignore=api/test_supabase_auth.py
+
+  docker-build:
+    runs-on: ubuntu-latest
+    needs: [backend-tests]
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v2
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Build backend image
+        uses: docker/build-push-action@v4
+        with:
+          context: .
+          file: Backend.Dockerfile
+          push: false
+          tags: backend:local

.gitignore

@@ -0,0 +1,103 @@
+# ===============================
+# Python
+# ===============================
+__pycache__/
+*.py[cod]
+*.pyo
+*.pyd
+*.so
+*.egg-info/
+.eggs/
+*.egg
+
+# ===============================
+# Virtual Environments
+# ===============================
+venv/
+.venv/
+env/
+ENV/
+.python-version
+Backend/.env
+
+# ===============================
+# Environment Variables
+# ===============================
+.env
+.env.*
+!.env.example
+!.env.*.example
+
+# ===============================
+# FastAPI / ASGI
+# ===============================
+*.log
+logs/
+uvicorn.log
+gunicorn.log
+
+# ===============================
+# Databases
+# ===============================
+*.sqlite3
+*.db
+
+# ===============================
+# Testing / Coverage
+# ===============================
+.pytest_cache/
+.coverage
+htmlcov/
+.tox/
+.nox/
+
+# ===============================
+# Build / Distribution
+# ===============================
+build/
+dist/
+wheelhouse/
+pip-wheel-metadata/
+
+# ===============================
+# IDEs & Editors
+# ===============================
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# ===============================
+# OS Files
+# ===============================
+.DS_Store
+Thumbs.db
+
+# ===============================
+# Jupyter
+# ===============================
+.ipynb_checkpoints/
+
+# ===============================
+# MyPy / Ruff / Pyright
+# ===============================
+.mypy_cache/
+.ruff_cache/
+.pyright/
+
+# ===============================
+# Docker
+# ===============================
+docker-compose.override.yml
+
+
+**/.env
+**/.env.*
+!**/.env.example
+!**/.env.*.example
+
+# ===============================
+# Data & Vector DBs
+# ===============================
+**/vector_db/
+**/chunks/

Backend.Dockerfile

@@ -0,0 +1,36 @@
+# Use Python 3.12-slim as the base image
+FROM python:3.12-slim
+
+# Set working directory
+WORKDIR /app
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    build-essential \
+    libmagic1 \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy requirements.txt
+COPY requirements.txt .
+
+# Install Python dependencies
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy the rest of the application code
+COPY . .
+
+# Expose the port the app runs on (Hugging Face Spaces uses 7860 by default)
+EXPOSE 7860
+
+# Script to build vector DBs and start the server
+RUN echo '#!/bin/bash\n\
+    echo "Building Vector Databases..."\n\
+    python -m module_a.process_documents\n\
+    python -m module_a.build_vector_db\n\
+    python -m module_c.indexer\n\
+    echo "Starting FastAPI server on port ${PORT:-7860}..."\n\
+    uvicorn api.main:app --host 0.0.0.0 --port ${PORT:-7860}\n\
+    ' > /app/start.sh && chmod +x /app/start.sh
+
+# Run the startup script
+CMD ["/app/start.sh"]

Backend/.env.example

@@ -0,0 +1 @@
+MONGODB_URL == YOUR_MONGODB_URL

Backend/core/config.py

@@ -0,0 +1,17 @@
+from pydantic_settings import BaseSettings , SettingsConfigDict 
+from functools import lru_cache
+
+class Settings(BaseSettings):
+
+    #MongoDB 
+    mongodb_url: str 
+    database_name: str
+    secret_key: str 
+    access_token_expire_minutes: int 
+    algorithm: str
+    frontend_url: str
+
+    ## To get all the values 
+    model_config = SettingsConfigDict(env_file=".env")
+
+settings = Settings()

Backend/core/deps.py

@@ -0,0 +1,37 @@
+from fastapi import Depends, HTTPException, status
+from fastapi.security import OAuth2PasswordBearer
+from jose import JWTError, jwt
+from db.mongodb import get_database
+from core.config import settings
+
+oauth2_scheme = OAuth2PasswordBearer(tokenUrl="/auth/login")
+
+async def get_current_user(
+    token: str = Depends(oauth2_scheme),
+    db = Depends(get_database)
+):
+    credentials_exception = HTTPException(
+        status_code=status.HTTP_401_UNAUTHORIZED,
+        detail="Could not validate credentials",
+        headers={"WWW-Authenticate": "Bearer"},
+    )
+    
+    try:
+        # Decode the JWT token
+        payload = jwt.decode(token, settings.secret_key, algorithms=[settings.algorithm])
+        email: str = payload.get("sub")
+        if email is None:
+            raise credentials_exception
+    except JWTError:
+        raise credentials_exception
+    
+    # Find user in database
+    user = await db["users"].find_one({"email": email})
+    if user is None:
+        raise credentials_exception
+    
+    # Convert ObjectId to string and remove password
+    user["_id"] = str(user["_id"])
+    user.pop("password", None)
+    
+    return user

Backend/core/security.py

@@ -0,0 +1,33 @@
+import bcrypt
+import hashlib
+import base64
+from datetime import datetime, timedelta
+from jose import jwt
+from core.config import settings
+
+
+def _prehash_password(password: str) -> bytes:
+    """Pre-hash password with SHA-256 to handle any length."""
+    sha256_hash = hashlib.sha256(password.encode('utf-8')).digest()
+    return base64.b64encode(sha256_hash)
+
+
+def hash_password(password: str) -> str:
+    """Hash a password using bcrypt."""
+    prehashed = _prehash_password(password)
+    salt = bcrypt.gensalt()
+    hashed = bcrypt.hashpw(prehashed, salt)
+    return hashed.decode('utf-8')
+
+
+def verify_password(plain_password: str, hashed_password: str) -> bool:
+    """Verify a password against its hash."""
+    prehashed = _prehash_password(plain_password)
+    return bcrypt.checkpw(prehashed, hashed_password.encode('utf-8'))
+
+
+def create_access_token(data: dict):
+    to_encode = data.copy()
+    expire = datetime.utcnow() + timedelta(minutes=settings.access_token_expire_minutes)
+    to_encode.update({"exp": expire})
+    return jwt.encode(to_encode, settings.secret_key, algorithm=settings.algorithm)

Backend/db/mongodb.py

@@ -0,0 +1,10 @@
+from motor.motor_asyncio import AsyncIOMotorClient
+from core.config import settings 
+
+class Database:
+    client: AsyncIOMotorClient = None
+
+db_instance = Database()
+
+async def get_database():
+    return db_instance.client[settings.database_name]

Backend/main.py

@@ -0,0 +1,42 @@
+from fastapi import FastAPI , Request
+from fastapi.middleware.cors import CORSMiddleware
+from motor.motor_asyncio import AsyncIOMotorClient
+from core.config import settings
+from db.mongodb import db_instance
+from routes import auth 
+from contextlib import asynccontextmanager
+from fastapi.exceptions import RequestValidationError
+from fastapi.responses import JSONResponse
+
+## CORS Setup 
+@asynccontextmanager
+async def lifespan(app: FastAPI):
+    ## Starting logic 
+    db_instance.client = AsyncIOMotorClient(settings.mongodb_url)
+    print("Succesfully Connected to MongoDB")
+
+    yield
+
+    db_instance.client.close()
+    print("MongoDB connection closed")
+
+
+app = FastAPI(title="FastAPI Mongo Auth",lifespan=lifespan)
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials= True,
+    allow_methods = ["*"],
+    allow_headers = ["*"],
+)
+app.include_router(auth.router)
+
+@app.exception_handler(RequestValidationError)
+async def validation_exception_handler(request: Request, exc: RequestValidationError):
+    print("❌ Validation Error:")
+    print(exc.errors())  # This will print in your terminal
+    print("📦 Request body:", await request.body())
+    return JSONResponse(
+        status_code=422,
+        content={"detail": exc.errors()}
+    )

Backend/requirements.txt

@@ -0,0 +1,7 @@
+fastapi
+uvicorn[standard]
+motor
+pydantic-settings
+passlib[bcrypt]
+python-jose[cryptography]
+python-multipart

Backend/routes/auth.py

@@ -0,0 +1,55 @@
+from fastapi import APIRouter , HTTPException , Depends , status
+from schemas.user import UserCreate, Userlogin , Token
+from core.security import hash_password , verify_password , create_access_token
+from db.mongodb import get_database
+
+router = APIRouter(prefix="/auth",tags=["Authentication"])
+
+@router.post("/register", status_code=status.HTTP_201_CREATED)
+async def signup(user_in: UserCreate, db = Depends(get_database)):
+    
+    # 1. Check if user exists
+    user_exists = await db["users"].find_one({'email': user_in.email})
+    if user_exists:
+        raise HTTPException(status_code=400, detail="User with this email already exists")
+    
+    # 2. Convert Pydantic model to dict
+    user_dict = user_in.model_dump()
+
+    # 3. Replace plain password with hashed password
+    user_dict["password"] = hash_password(user_in.password)
+
+    # 4. Insert into MongoDB
+    result = await db["users"].insert_one(user_dict)
+    
+    # 5. Create access token for auto-login
+    access_token = create_access_token(data={"sub": user_in.email})
+    
+    # 6. Prepare user data for response (remove password)
+    user_response = {k: v for k, v in user_dict.items() if k != "password"}
+    user_response["_id"] = str(result.inserted_id)
+    
+    return {
+        "message": "User registered successfully",
+        "access_token": access_token,
+        "token_type": "bearer",
+        "user": user_response
+    }
+
+@router.post("/login",response_model=Token)
+async def login(user_in:Userlogin,db= Depends(get_database)):
+    ## Finding the  user 
+    user = await db["users"].find_one({"email":user_in.email})
+
+    ## Verifying the password 
+    if not user or not verify_password(user_in.password,user["password"]):
+        raise HTTPException(status_code=401,detail="Incorrect email or password")
+    
+    ##Create Token 
+    access_token = create_access_token(data={"sub":user["email"]})
+    return {"access_token":access_token,"token_type": "bearer"}
+
+@router.get("/me")
+async def get_user_info(current_user: dict = Depends(get_current_user)):
+    """Get current logged-in user's information"""
+    return current_user

Backend/schemas/user.py

@@ -0,0 +1,25 @@
+from pydantic import BaseModel, EmailStr
+from typing import Optional
+
+class UserCreate(BaseModel):
+    name: str
+    email: EmailStr
+    password: str
+    nid: str
+    age: str
+    education: str
+    salary: str
+    hasDisability: str  # or bool if you convert "yes"/"no"
+    disabilityType: Optional[str] = None
+    province: str
+    district: str
+    municipality: str
+    ward: str
+
+class Userlogin(BaseModel):
+    email: EmailStr
+    password: str
+
+class Token(BaseModel):
+    access_token: str
+    token_type: str

Frontend.Dockerfile

@@ -0,0 +1,29 @@
+# Use Node.js 20-alpine as the base image
+FROM node:20-alpine AS base
+
+# Install pnpm
+RUN npm install -g pnpm
+
+# Set working directory
+WORKDIR /app
+
+# Copy package.json and pnpm-lock.yaml
+COPY Frontend/package.json Frontend/pnpm-lock.yaml* ./
+
+# Install dependencies
+RUN pnpm install
+
+# Copy the rest of the frontend code
+COPY Frontend/ .
+
+# Set environment variables for build
+ENV NEXT_PUBLIC_BACKEND_URL=http://localhost:8000
+
+# Build the Next.js application
+RUN pnpm build
+
+# Expose the port the app runs on
+EXPOSE 3000
+
+# Start the application
+CMD ["pnpm", "start"]

Frontend/.env.production.example

@@ -0,0 +1,4 @@
+# --- Frontend Production Environment Variables ---
+
+# URL of your deployed FastAPI backend (e.g., Hugging Face Space URL)
+NEXT_PUBLIC_BACKEND_URL=https://your-backend-space.hf.space

Frontend/.gitignore

@@ -0,0 +1,29 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files
+.env*
+!.env.example
+!.env.*.example
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

Frontend/app/api/Bias_Chat/route.ts

@@ -0,0 +1,30 @@
+import { type NextRequest, NextResponse } from "next/server"
+
+export async function POST(req: NextRequest) {
+  try {
+    const { messages, type } = await req.json()
+
+    // Example for a custom AI API call:
+    // const response = await fetch("https://your-ai-api.com/v1/chat", {
+    //   method: "POST",
+    //   headers: { "Authorization": `Bearer ${process.env.MY_AI_KEY}` },
+    //   body: JSON.stringify({ messages })
+    // })
+    // const data = await response.json()
+
+    // For now, we'll simulate a real API response that you can easily swap
+    const lastMessage = messages[messages.length - 1].content
+
+    let aiContent = ""
+    if (type === "legal") {
+      aiContent = `Based on your query about "${lastMessage}", under Nepali Law, this is typically governed by specific statutes...`
+    } else {
+      aiContent = "Standard AI response for non-legal queries."
+    }
+
+    return NextResponse.json({ content: aiContent })
+  } catch (error) {
+    console.error("[v0] AI API Error:", error)
+    return NextResponse.json({ error: "Failed to fetch AI response" }, { status: 500 })
+  }
+}

Frontend/app/api/Legal_Chat/route.ts

@@ -0,0 +1,97 @@
+import { type NextRequest, NextResponse } from "next/server"
+
+const BACKEND_URL = "http://localhost:8000"
+
+export async function POST(req: NextRequest) {
+  try {
+    const { messages, type, conversation_id } = await req.json()
+
+    if (type !== "legal") {
+      return NextResponse.json({ content: "Standard AI response for non-legal queries." })
+    }
+
+    const lastMessage = messages[messages.length - 1].content
+
+    // Get Authorization header from incoming request
+    const authHeader = req.headers.get("authorization")
+    const headers: Record<string, string> = { "Content-Type": "application/json" }
+    if (authHeader) {
+      headers["Authorization"] = authHeader
+    }
+
+    // Use the new context-aware chat endpoint
+    const response = await fetch(`${BACKEND_URL}/api/v1/law-explanation/chat`, {
+      method: "POST",
+      headers,
+      body: JSON.stringify({
+        query: lastMessage,
+        conversation_id: conversation_id || null,
+      }),
+    })
+
+    if (!response.ok) {
+      throw new Error(`Backend API returned ${response.status}`)
+    }
+
+    const data = await response.json()
+
+    // Check if this is a non-legal query (greeting, thanks, etc.)
+    if (data.is_non_legal) {
+      return NextResponse.json({ content: data.explanation })
+    }
+
+    // Format sources properly from backend response
+    let sourcesText = ""
+    console.log("[Legal Chat] Sources from backend:", data.sources)
+
+    if (data.sources && data.sources.length > 0) {
+      const formattedSources = data.sources
+        .filter((s: any) => s && (s.file || s.section)) // Only include sources with file or section
+        .map((s: any, i: number) => {
+          // Extract and clean filename
+          let fileName = "Legal Document"
+          if (s.file) {
+            fileName = s.file
+              .replace(/_en\.pdf$/i, "") // Remove _en.pdf extension
+              .replace(/\.pdf$/i, "") // Remove .pdf extension
+              .replace(/_/g, " ") // Replace underscores with spaces
+          }
+
+          // Format: **filename** (section)
+          const section = s.section || s.article_section || "General Reference"
+          return `   ${i + 1}. **${fileName}** (${section})`
+        })
+        .join("\n")
+
+      if (formattedSources) {
+        sourcesText = `\n\n### 📚 Resources\n${formattedSources}`
+      }
+    }
+
+    // Add context indicator if context was used
+    const contextBadge = data.context_used ? "\n\n> 💡 *Used conversation context*" : ""
+
+    // Return the data as-is since backend already returns markdown format
+    // Format it nicely for the frontend with clear sections
+    const formattedContent = `### 📝 Summary\n${data.summary}
+
+### 💬 Detailed Explanation\n${data.explanation}
+
+### 🔑 Key Points
+- ${data.key_point}
+
+### 📋 Next Steps
+${data.next_steps}${sourcesText}${contextBadge}`.trim()
+
+    return NextResponse.json({
+      content: formattedContent,
+      suggested_action: data.suggested_action || null
+    })
+  } catch (error) {
+    console.error("[Legal Chat API Error]:", error)
+    return NextResponse.json(
+      { error: "Failed to fetch response from legal AI backend. Please ensure the backend server is running." },
+      { status: 500 }
+    )
+  }
+}

Frontend/app/api/bias-detection-hitl/approve/route.ts

@@ -0,0 +1,39 @@
+import { type NextRequest, NextResponse } from "next/server"
+
+const BACKEND_URL = process.env.NEXT_PUBLIC_BACKEND_URL || "http://localhost:8000"
+
+export async function POST(req: NextRequest) {
+  try {
+    const authHeader = req.headers.get("authorization")
+    const headers: Record<string, string> = {
+      "Content-Type": "application/json"
+    }
+    if (authHeader) {
+      headers["Authorization"] = authHeader
+    }
+
+    const body = await req.json()
+
+    const response = await fetch(`${BACKEND_URL}/api/v1/bias-detection-hitl/approve-suggestion`, {
+      method: "POST",
+      headers,
+      body: JSON.stringify(body),
+    })
+
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => ({}))
+      throw new Error(errorData.detail || "Failed to approve/reject suggestion")
+    }
+
+    const data = await response.json()
+    return NextResponse.json(data)
+  } catch (error) {
+    console.error("[HITL Approve Error]:", error)
+    return NextResponse.json(
+      {
+        error: error instanceof Error ? error.message : "Failed to process approval",
+      },
+      { status: 500 }
+    )
+  }
+}

Frontend/app/api/bias-detection-hitl/generate-pdf/route.ts

@@ -0,0 +1,53 @@
+import { type NextRequest, NextResponse } from "next/server"
+
+const BACKEND_URL = process.env.NEXT_PUBLIC_BACKEND_URL || "http://localhost:8000"
+
+export async function POST(req: NextRequest) {
+  try {
+    const authHeader = req.headers.get("authorization")
+    const headers: Record<string, string> = {
+      "Content-Type": "application/json"
+    }
+    if (authHeader) {
+      headers["Authorization"] = authHeader
+    }
+
+    const body = await req.json()
+
+    const response = await fetch(`${BACKEND_URL}/api/v1/bias-detection-hitl/generate-pdf`, {
+      method: "POST",
+      headers,
+      body: JSON.stringify(body),
+    })
+
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => ({}))
+      throw new Error(errorData.detail || "Failed to generate PDF")
+    }
+
+    // Get PDF blob
+    const pdfBlob = await response.blob()
+
+    // Get filename from headers
+    const contentDisposition = response.headers.get("Content-Disposition")
+    const changesApplied = response.headers.get("X-Changes-Applied")
+
+    // Return PDF as blob with headers
+    return new NextResponse(pdfBlob, {
+      status: 200,
+      headers: {
+        "Content-Type": "application/pdf",
+        "Content-Disposition": contentDisposition || 'attachment; filename="debiased_document.pdf"',
+        "X-Changes-Applied": changesApplied || "0"
+      }
+    })
+  } catch (error) {
+    console.error("[HITL Generate PDF Error]:", error)
+    return NextResponse.json(
+      {
+        error: error instanceof Error ? error.message : "Failed to generate PDF",
+      },
+      { status: 500 }
+    )
+  }
+}

Frontend/app/api/bias-detection-hitl/regenerate/route.ts

@@ -0,0 +1,39 @@
+import { type NextRequest, NextResponse } from "next/server"
+
+const BACKEND_URL = process.env.NEXT_PUBLIC_BACKEND_URL || "http://localhost:8000"
+
+export async function POST(req: NextRequest) {
+  try {
+    const authHeader = req.headers.get("authorization")
+    const headers: Record<string, string> = {
+      "Content-Type": "application/json"
+    }
+    if (authHeader) {
+      headers["Authorization"] = authHeader
+    }
+
+    const body = await req.json()
+
+    const response = await fetch(`${BACKEND_URL}/api/v1/bias-detection-hitl/regenerate-suggestion`, {
+      method: "POST",
+      headers,
+      body: JSON.stringify(body),
+    })
+
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => ({}))
+      throw new Error(errorData.detail || "Failed to regenerate suggestion")
+    }
+
+    const data = await response.json()
+    return NextResponse.json(data)
+  } catch (error) {
+    console.error("[HITL Regenerate Error]:", error)
+    return NextResponse.json(
+      {
+        error: error instanceof Error ? error.message : "Failed to regenerate suggestion",
+      },
+      { status: 500 }
+    )
+  }
+}

Frontend/app/api/bias-detection/route.ts

@@ -0,0 +1,222 @@
+import { type NextRequest, NextResponse } from "next/server"
+
+const BACKEND_URL = "http://localhost:8000"
+
+export async function POST(req: NextRequest) {
+  try {
+    // Get Authorization header from incoming request
+    const authHeader = req.headers.get("authorization")
+    const headers: Record<string, string> = {}
+    if (authHeader) {
+      headers["Authorization"] = authHeader
+    }
+
+    const formData = await req.formData()
+    const file = formData.get("file") as File | null
+    const text = formData.get("text") as string | null
+    const confidenceThreshold = parseFloat(formData.get("confidence_threshold") as string || "0.7")
+    const useHITL = formData.get("use_hitl") === "true"
+
+    // If using HITL workflow for PDF files
+    if (file && useHITL) {
+      console.log("Using HITL workflow for PDF processing...")
+      const hitlFormData = new FormData()
+      hitlFormData.append("file", file)
+      hitlFormData.append("refine_with_llm", "true")
+      hitlFormData.append("confidence_threshold", confidenceThreshold.toString())
+
+      const response = await fetch(`${BACKEND_URL}/api/v1/bias-detection-hitl/start-review`, {
+        method: "POST",
+        headers,
+        body: hitlFormData,
+      })
+
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}))
+        throw new Error(errorData.detail || "Failed to start HITL review")
+      }
+
+      const data = await response.json()
+      console.log("HITL session created:", data.session_id)
+
+      // Return the HITL session data
+      return NextResponse.json(data)
+    }
+
+    // Original non-HITL workflow for text or non-HITL PDF processing
+    let sentences: string[] = []
+    let filename: string | undefined
+
+    if (file) {
+      // Step 1: Process PDF to extract sentences with LLM refinement
+      console.log("Step 1: Processing PDF to extract sentences...")
+      const pdfFormData = new FormData()
+      pdfFormData.append("file", file)
+      pdfFormData.append("refine_with_llm", "true")
+
+      const pdfResponse = await fetch(`${BACKEND_URL}/api/v1/process-pdf`, {
+        method: "POST",
+        headers,
+        body: pdfFormData,
+      })
+
+      if (!pdfResponse.ok) {
+        throw new Error("Failed to process PDF")
+      }
+
+      const pdfData = await pdfResponse.json()
+      sentences = pdfData.sentences
+      filename = pdfData.filename
+      console.log(`Extracted ${sentences.length} sentences from PDF`)
+    } else if (text) {
+      // For text input, use single sentence as array
+      sentences = [text]
+    } else {
+      return NextResponse.json({ error: "Either file or text must be provided" }, { status: 400 })
+    }
+
+    // Step 2: Detect bias using batch endpoint
+    console.log("Step 2: Detecting bias in sentences...")
+    const biasHeaders = { ...headers, "Content-Type": "application/json" }
+    const batchBiasResponse = await fetch(`${BACKEND_URL}/api/v1/detect-bias/batch`, {
+      method: "POST",
+      headers: biasHeaders,
+      body: JSON.stringify({
+        texts: sentences,
+        confidence_threshold: confidenceThreshold,
+      }),
+    })
+
+    if (!batchBiasResponse.ok) {
+      throw new Error("Failed to detect bias")
+    }
+
+    const batchBiasData = await batchBiasResponse.json()
+
+    // Count biased and unbiased sentences
+    let biasedCount = 0
+    let unbiasedCount = 0
+    const biasedSentencesData: Array<{
+      sentence: string
+      category: string
+      confidence: number
+      explanation?: string
+    }> = []
+
+    // Process batch results
+    for (const item of batchBiasData.items) {
+      const result = item.result
+      if (result.success && result.results) {
+        for (const sentenceResult of result.results) {
+          if (sentenceResult.is_biased) {
+            biasedCount++
+            biasedSentencesData.push({
+              sentence: sentenceResult.sentence,
+              category: sentenceResult.category,
+              confidence: sentenceResult.confidence,
+            })
+          } else {
+            unbiasedCount++
+          }
+        }
+      }
+    }
+
+    console.log(`Found ${biasedCount} biased sentences and ${unbiasedCount} unbiased sentences`)
+
+    // Step 3: Get debiasing suggestions for biased sentences
+    console.log("Step 3: Getting debiasing suggestions...")
+    const suggestionsData: Array<{
+      original: string
+      category: string
+      confidence: number
+      suggestion: string | null
+      explanation: string | null
+      success: boolean
+    }> = []
+
+    if (biasedSentencesData.length > 0) {
+      // Prepare batch debias request
+      const debiasItems = biasedSentencesData.map((item) => ({
+        sentence: item.sentence,
+        category: item.category,
+        context: null,
+      }))
+
+      const debiasResponse = await fetch(`${BACKEND_URL}/api/v1/debias-sentence/batch`, {
+        method: "POST",
+        headers: biasHeaders,
+        body: JSON.stringify({
+          items: debiasItems,
+        }),
+      })
+
+      if (debiasResponse.ok) {
+        const debiasData = await debiasResponse.json()
+
+        for (let i = 0; i < biasedSentencesData.length; i++) {
+          const original = biasedSentencesData[i]
+          const debiasResult = debiasData.items?.[i]?.result
+
+          // Generate explanation based on category
+          const categoryExplanations: Record<string, string> = {
+            gender: "This sentence contains gender-based bias, using language that may stereotype, exclude, or unfairly characterize individuals based on their gender.",
+            religional: "This sentence contains religious bias, using language that may discriminate against or unfairly characterize individuals based on their religious beliefs.",
+            caste: "This sentence contains caste-based bias, using language that may perpetuate discrimination or unfair treatment based on caste identity.",
+            religion: "This sentence contains religious bias, with language that may show prejudice or discrimination based on religious affiliation.",
+            appearence: "This sentence contains appearance-based bias, using language that may judge or discriminate based on physical appearance or looks.",
+            socialstatus: "This sentence contains social status bias, using language that may discriminate or show prejudice based on socioeconomic status or class.",
+            political: "This sentence contains political bias, showing unfair preference or prejudice toward a particular political viewpoint or party.",
+            Age: "This sentence contains age-based bias, using language that may stereotype or discriminate based on age or generation.",
+            Disablity: "This sentence contains disability-based bias, using language that may discriminate against or unfairly characterize individuals with disabilities.",
+            amiguity: "This sentence contains ambiguous language that may lead to misinterpretation or unclear bias.",
+          }
+
+          const explanation = categoryExplanations[original.category] || "This sentence has been flagged for potential bias."
+
+          suggestionsData.push({
+            original: original.sentence,
+            category: original.category,
+            confidence: original.confidence,
+            suggestion: debiasResult?.suggestion || null,
+            explanation: explanation,
+            success: debiasResult?.success || false,
+          })
+        }
+      } else {
+        // If debias fails, still return results without suggestions
+        console.warn("Debiasing failed, returning results without suggestions")
+        for (const item of biasedSentencesData) {
+          suggestionsData.push({
+            original: item.sentence,
+            category: item.category,
+            confidence: item.confidence,
+            suggestion: null,
+            explanation: null,
+            success: false,
+          })
+        }
+      }
+    }
+
+    console.log("Analysis complete!")
+
+    // Return formatted response
+    return NextResponse.json({
+      success: true,
+      biasedCount,
+      unbiasedCount,
+      totalSentences: biasedCount + unbiasedCount,
+      biasedSentences: suggestionsData,
+      filename,
+    })
+  } catch (error) {
+    console.error("[Bias Detection API Error]:", error)
+    return NextResponse.json(
+      {
+        error: error instanceof Error ? error.message : "Failed to analyze bias. Please ensure the backend server is running.",
+      },
+      { status: 500 }
+    )
+  }
+}

Frontend/app/api/letter-generation/route.ts

@@ -0,0 +1,97 @@
+import { type NextRequest, NextResponse } from "next/server"
+
+const BACKEND_URL = process.env.NEXT_PUBLIC_BACKEND_URL || "http://localhost:8000"
+
+export async function POST(req: NextRequest) {
+  try {
+    const body = await req.json()
+    const { action, data } = body
+
+    // Get Authorization header from incoming request
+    const authHeader = req.headers.get("authorization")
+    const headers: Record<string, string> = { "Content-Type": "application/json" }
+    if (authHeader) {
+      headers["Authorization"] = authHeader
+    }
+
+    let response: Response
+    let result: any
+
+    switch (action) {
+      case "search-template":
+        // Step 1: Search for template based on user requirement
+        response = await fetch(`${BACKEND_URL}/api/v1/search-template`, {
+          method: "POST",
+          headers,
+          body: JSON.stringify({ query: data.query }),
+        })
+
+        if (!response.ok) {
+          throw new Error("Failed to search template")
+        }
+
+        result = await response.json()
+        return NextResponse.json({
+          success: result.success,
+          templateName: result.template_name,
+          score: result.score,
+          content: result.content,
+          error: result.error,
+        })
+
+      case "get-template-details":
+        // Step 2: Get placeholder details for the template
+        response = await fetch(`${BACKEND_URL}/api/v1/get-template-details`, {
+          method: "POST",
+          headers,
+          body: JSON.stringify({ template_name: data.templateName }),
+        })
+
+        if (!response.ok) {
+          throw new Error("Failed to get template details")
+        }
+
+        result = await response.json()
+        return NextResponse.json({
+          success: result.success,
+          templateName: result.template_name,
+          placeholders: result.placeholders,
+          content: result.content,
+          error: result.error,
+        })
+
+      case "fill-template":
+        // Step 3: Fill template with provided placeholder values
+        response = await fetch(`${BACKEND_URL}/api/v1/fill-template`, {
+          method: "POST",
+          headers,
+          body: JSON.stringify({
+            template_name: data.templateName,
+            placeholders: data.placeholders,
+          }),
+        })
+
+        if (!response.ok) {
+          throw new Error("Failed to fill template")
+        }
+
+        result = await response.json()
+        return NextResponse.json({
+          success: result.success,
+          letter: result.letter,
+          error: result.error,
+        })
+
+      default:
+        return NextResponse.json({ error: "Invalid action" }, { status: 400 })
+    }
+  } catch (error) {
+    console.error("[Letter Generation API Error]:", error)
+    return NextResponse.json(
+      {
+        error: error instanceof Error ? error.message : "Failed to process request. Please ensure the backend server is running.",
+      },
+      { status: 500 }
+    )
+  }
+}

Frontend/app/api/login/route.ts

@@ -0,0 +1,20 @@
+import { type NextRequest, NextResponse } from "next/server"
+
+export async function POST(req: NextRequest) {
+  try {
+    const body = await req.json()
+
+    const backendRes = await fetch("http://localhost:8000/login", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(body),
+    })
+
+    const data = await backendRes.json().catch(() => null)
+
+    return NextResponse.json(data ?? { message: "No JSON response from backend" }, { status: backendRes.status })
+  } catch (error) {
+    console.error("/api/login proxy error:", error)
+    return NextResponse.json({ error: "Proxy failed" }, { status: 500 })
+  }
+}

Frontend/app/bias-checker/page.tsx

@@ -0,0 +1,47 @@
+"use client"
+
+import { BiasChecker } from "@/components/chatbot/bias-checker"
+import { Navbar } from "@/components/layout/navbar"
+import { Footer } from "@/components/layout/footer"
+import { useAuthGuard } from "@/hooks/use-auth-guard"
+
+export default function BiasCheckerPage() {
+  const { isLoading, isAuthenticated } = useAuthGuard()
+
+  if (isLoading) {
+    return (
+      <div className="flex flex-col min-h-screen">
+        <Navbar />
+        <main className="flex-1 flex items-center justify-center">
+          <div className="text-center">
+            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto mb-4"></div>
+            <p className="text-muted-foreground">Checking authentication...</p>
+          </div>
+        </main>
+        <Footer />
+      </div>
+    )
+  }
+
+  if (!isAuthenticated) {
+    return null // Will redirect to login
+  }
+
+  return (
+    <div className="flex flex-col min-h-screen">
+      <Navbar />
+      <main className="flex-1 p-4 md:p-8 bg-muted/20">
+        <div className="container mx-auto max-w-7xl">
+          <div className="mb-8">
+            <h1 className="text-3xl font-bold text-primary tracking-tight">Legal Notice Analyzer</h1>
+            <p className="text-muted-foreground">
+              Empowering fair communication by detecting socioeconomic and linguistic biases in legal documents.
+            </p>
+          </div>
+          <BiasChecker />
+        </div>
+      </main>
+      <Footer />
+    </div>
+  )
+}

Frontend/app/chatbot/page.tsx

@@ -0,0 +1,45 @@
+"use client"
+
+import { LawChatbot } from "@/components/chatbot/law-chatbot"
+import { Navbar } from "@/components/layout/navbar"
+import { Footer } from "@/components/layout/footer"
+import { useAuthGuard } from "@/hooks/use-auth-guard"
+
+export default function ChatbotPage() {
+  const { isLoading, isAuthenticated } = useAuthGuard()
+
+  if (isLoading) {
+    return (
+      <div className="flex flex-col min-h-screen">
+        <Navbar />
+        <main className="flex-1 flex items-center justify-center">
+          <div className="text-center">
+            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto mb-4"></div>
+            <p className="text-muted-foreground">Checking authentication...</p>
+          </div>
+        </main>
+        <Footer />
+      </div>
+    )
+  }
+
+  if (!isAuthenticated) {
+    return null // Will redirect to login
+  }
+
+  return (
+    <div className="flex flex-col min-h-screen">
+      <Navbar />
+      <main className="flex-1 p-4 md:p-8 bg-muted/20">
+        <div className="container mx-auto max-w-7xl h-full">
+          <div className="mb-6">
+            <h1 className="text-2xl font-bold text-primary">Nepali Law Assistant</h1>
+            <p className="text-sm text-muted-foreground">Ask questions about Nepali law, rights, and regulations.</p>
+          </div>
+          <LawChatbot />
+        </div>
+      </main>
+      <Footer />
+    </div>
+  )
+}

Frontend/app/dashboard/page.tsx

@@ -0,0 +1,323 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { cn } from "@/lib/utils"
+
+import { useAuth } from "@/context/auth-context"
+import { Navbar } from "@/components/layout/navbar"
+import { Footer } from "@/components/layout/footer"
+import { Button } from "@/components/ui/button"
+import { Card, CardHeader, CardTitle, CardContent, CardDescription } from "@/components/ui/card"
+import { StatsCard } from "@/components/dashboard/stats-card"
+import { MessageSquare, ShieldCheck, Clock, ArrowUpRight, BookOpen, Lightbulb, Bell, FileText } from "lucide-react"
+import Link from "next/link"
+import { redirect } from "next/navigation"
+import { getDocumentStats } from "@/lib/document-cache"
+
+export default function DashboardPage() {
+  const { user, isLoading } = useAuth()
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+    console.log("Dashboard - isLoading:", isLoading);
+    console.log("Dashboard - user:", user);
+    console.log("Token in localStorage:", localStorage.getItem('access_token'));
+  }, [isLoading, user])
+
+  const [tips, setTips] = useState<any[]>([])
+  const [currentTipIndex, setCurrentTipIndex] = useState<number>(0)
+  const [showNepali, setShowNepali] = useState<boolean>(false)
+  const [totalConsultations, setTotalConsultations] = useState<number>(0)
+  const [recentActivities, setRecentActivities] = useState<any[]>([])
+  const [documentStats, setDocumentStats] = useState({
+    totalAnalyzed: 0,
+    totalInclusive: 0,
+    totalFlagged: 0,
+    totalLetters: 0,
+  })
+
+  useEffect(() => {
+    fetch("/data.json")
+      .then((res) => res.json())
+      .then((data) => {
+        if (Array.isArray(data) && data.length > 0) {
+          setTips(data)
+          setCurrentTipIndex(Math.floor(Math.random() * data.length))
+        }
+      })
+      .catch((err) => console.error("Failed to load tips:", err))
+
+    // Load document stats from cache
+    const stats = getDocumentStats()
+    setDocumentStats(stats)
+  }, [])
+
+  // Fetch total consultations count and recent activities
+  useEffect(() => {
+    const fetchConsultations = async () => {
+      const token = localStorage.getItem("access_token")
+      if (!token) return
+
+      const BACKEND_URL = (process.env.NEXT_PUBLIC_BACKEND_URL as string) || "http://localhost:8000"
+
+      try {
+        const response = await fetch(`${BACKEND_URL}/api/v1/chat-history/conversations`, {
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${token}`,
+          },
+        })
+
+        if (response.ok) {
+          const data = await response.json()
+          setTotalConsultations(data.length)
+
+          // Transform conversations into activity format
+          const activities = data.slice(0, 5).map((conv: any) => ({
+            type: "chat",
+            title: conv.title,
+            time: formatRelativeTime(conv.updated_at),
+            icon: MessageSquare,
+            color: "text-primary bg-primary/10",
+            conversationId: conv.id,
+          }))
+          setRecentActivities(activities)
+        }
+      } catch (error) {
+        console.error("Failed to fetch consultations:", error)
+      }
+    }
+
+    if (user) {
+      fetchConsultations()
+    }
+  }, [user])
+
+  // Helper function to format relative time
+  const formatRelativeTime = (dateString: string) => {
+    const date = new Date(dateString)
+    const now = new Date()
+    const diffMs = now.getTime() - date.getTime()
+    const diffMins = Math.floor(diffMs / 60000)
+    const diffHours = Math.floor(diffMs / 3600000)
+    const diffDays = Math.floor(diffMs / 86400000)
+
+    if (diffMins < 60) {
+      return diffMins <= 1 ? "Just now" : `${diffMins} minutes ago`
+    } else if (diffHours < 24) {
+      return diffHours === 1 ? "1 hour ago" : `${diffHours} hours ago`
+    } else if (diffDays === 1) {
+      return "Yesterday"
+    } else if (diffDays < 7) {
+      return `${diffDays} days ago`
+    } else {
+      return date.toLocaleDateString()
+    }
+  }
+
+  if (!mounted || isLoading) return null
+  if (!user) redirect("/login")
+
+  // Calculate profile progress based on name, email, NID, and age
+  const calculateProfileProgress = () => {
+    let completedFields = 0
+    const totalFields = 4
+
+    // Name is always present (required during registration)
+    if (user.name) completedFields++
+
+    // Email is always present (required during registration)
+    if (user.email) completedFields++
+
+    // Check if NID is filled
+    if (user.details?.nid) completedFields++
+
+    // Check if age is filled
+    if (user.details?.age) completedFields++
+
+    return Math.round((completedFields / totalFields) * 100)
+  }
+
+  const profileProgress = calculateProfileProgress()
+
+
+  return (
+    <div className="flex flex-col min-h-screen">
+      <Navbar />
+      <main className="flex-1 p-4 md:p-8 bg-muted/20">
+        <div className="container mx-auto max-w-7xl">
+          {/* Header */}
+          <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-8">
+            <div className="space-y-1">
+              <h1 className="text-3xl font-bold tracking-tight">Welcome back, {user.name}</h1>
+              <p className="text-muted-foreground">Here&apos;s an overview of your legal welfare activity.</p>
+            </div>
+            <div className="flex items-center gap-3">
+              <Button variant="outline" size="icon" className="relative bg-transparent">
+                <Bell className="h-5 w-5" />
+                <span className="absolute top-1 right-1 h-2 w-2 rounded-full bg-destructive" />
+              </Button>
+              <Button className="bg-primary" asChild>
+                <Link href="/chatbot">Start New Consultation</Link>
+              </Button>
+            </div>
+          </div>
+
+          {/* Stats Grid */}
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+            <StatsCard
+              title="Total Consultations"
+              value={totalConsultations.toString()}
+              description={`${totalConsultations} chat ${totalConsultations === 1 ? 'history' : 'histories'}`}
+              icon={MessageSquare}
+              color="primary"
+            />
+            <StatsCard
+              title="Documents Analyzed"
+              value={documentStats.totalAnalyzed.toString()}
+              description={`${documentStats.totalInclusive} inclusive, ${documentStats.totalFlagged} flagged`}
+              icon={ShieldCheck}
+              color="accent"
+            />
+            <StatsCard
+              title="Letters Generated"
+              value={documentStats.totalLetters.toString()}
+              description="Cached locally"
+              icon={FileText}
+              color="success"
+            />
+            <Link href="/profile" className="block">
+              <StatsCard
+                title="Profile Progress"
+                value={`${profileProgress}%`}
+                description="Complete your details"
+                icon={ArrowUpRight}
+                color="primary"
+              />
+            </Link>
+          </div>
+
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            {/* Recent Activity */}
+            <Card className="lg:col-span-2 border-primary/10">
+              <CardHeader className="flex flex-row items-center justify-between">
+                <div>
+                  <CardTitle>Recent Activity</CardTitle>
+                  <CardDescription>Your latest interactions with our legal tools.</CardDescription>
+                </div>
+                <Button variant="ghost" size="sm" className="text-primary">
+                  View All
+                </Button>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-6">
+                  {recentActivities.length > 0 ? (
+                    recentActivities.map((activity, i) => (
+                      <Link key={i} href="/chatbot">
+                        <div className="flex items-start gap-4 group cursor-pointer">
+                          <div className={cn("p-2 rounded-lg border border-transparent transition-colors", activity.color)}>
+                            <activity.icon className="h-5 w-5" />
+                          </div>
+                          <div className="flex-1 space-y-1">
+                            <p className="text-sm font-bold group-hover:text-primary transition-colors">{activity.title}</p>
+                            <p className="text-xs text-muted-foreground">{activity.time}</p>
+                          </div>
+                          <ArrowUpRight className="h-4 w-4 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity" />
+                        </div>
+                      </Link>
+                    ))
+                  ) : (
+                    <div className="text-center py-8 text-muted-foreground">
+                      <MessageSquare className="h-12 w-12 mx-auto mb-3 opacity-20" />
+                      <p className="text-sm">No recent activity yet</p>
+                      <p className="text-xs mt-1">Start a conversation with our legal chatbot</p>
+                    </div>
+                  )}
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Side Panel: Tips & Actions */}
+            <div className="space-y-8">
+              <Card className="bg-primary text-primary-foreground border-none relative overflow-hidden">
+                <div className="absolute inset-0 nepali-pattern opacity-10" />
+                <CardHeader className="relative">
+                  <CardTitle className="flex items-center gap-2">
+                    <Lightbulb className="h-5 w-5 text-accent" />
+                    Legal Tip of the Day
+                  </CardTitle>
+                </CardHeader>
+                <CardContent className="relative">
+                  <p className="text-sm leading-relaxed opacity-90">
+                    {tips.length > 0 ? (showNepali ? tips[currentTipIndex]?.fact_np : tips[currentTipIndex]?.fact_en) : "Loading tip..."}
+                  </p>
+
+                  <div className="mt-4 w-full flex gap-3 items-center">
+                    <Button
+                      variant="ghost"
+                      size="lg"
+                      className="flex-1 bg-white/10 hover:bg-white/20 text-white/95 rounded-lg px-4 py-2 flex items-center gap-3 justify-center shadow-md"
+                      onClick={() => {
+                        // pick a new random tip (keep current language)
+                        if (tips.length > 1) {
+                          let idx = Math.floor(Math.random() * tips.length)
+                          if (tips.length > 1 && idx === currentTipIndex) idx = (idx + 1) % tips.length
+                          setCurrentTipIndex(idx)
+                        }
+                      }}
+                      title={showNepali ? "नेपालीमा" : "View more tips"}
+                    >
+                      <Lightbulb className="h-4 w-4 text-accent" />
+                      <span className="font-medium">
+                        {showNepali ? "थप सुझावहरू" : "View More Tips"}
+                      </span>
+                    </Button>
+
+                    <Button
+                      variant="default"
+                      size="sm"
+                      className="rounded-full w-12 h-12 flex items-center justify-center shadow ring-1 ring-white/10 hover:scale-105 transition-transform"
+                      onClick={() => setShowNepali((s) => !s)}
+                      aria-label={showNepali ? "Switch to English" : "नेपालीमा हेर्नुहोस्"}
+                      title={showNepali ? "Show in English" : "नेपालीमा हेर्नुहोस्"}
+                    >
+                      <span className="text-lg">{showNepali ? "EN" : "🇳🇵"}</span>
+                    </Button>
+                  </div>
+                </CardContent>
+              </Card>
+
+              <Card className="border-primary/10">
+                <CardHeader>
+                  <CardTitle>Quick Actions</CardTitle>
+                </CardHeader>
+                <CardContent className="grid gap-4">
+                  <Button variant="outline" className="w-full justify-start text-sm bg-transparent" asChild>
+                    <Link href="/bias-checker">
+                      <ShieldCheck className="mr-2 h-4 w-4 text-accent" />
+                      Analyze a New Document
+                    </Link>
+                  </Button>
+                  <Button variant="outline" className="w-full justify-start text-sm bg-transparent" asChild>
+                    <Link href="/resources">
+                      <BookOpen className="mr-2 h-4 w-4 text-success" />
+                      Browse Legal Guides
+                    </Link>
+                  </Button>
+                  <Button variant="outline" className="w-full justify-start text-sm bg-transparent" asChild>
+                    <Link href="/profile">
+                      <Clock className="mr-2 h-4 w-4 text-primary" />
+                      Update Personal Details
+                    </Link>
+                  </Button>
+                </CardContent>
+              </Card>
+            </div>
+          </div>
+        </div>
+      </main>
+      <Footer />
+    </div>
+  )
+}

Frontend/app/globals.css

@@ -0,0 +1,160 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --background: oklch(0.99 0.01 240);
+  --foreground: oklch(0.1 0.02 240);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.1 0.02 240);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.1 0.02 240);
+  /* deep blue primary */
+  --primary: oklch(0.25 0.05 240);
+  --primary-foreground: oklch(0.98 0.01 240);
+  /* bright blue secondary */
+  --secondary: oklch(0.6 0.15 240);
+  --secondary-foreground: oklch(1 0 0);
+  --muted: oklch(0.95 0.01 240);
+  --muted-foreground: oklch(0.4 0.02 240);
+  /* gold accent */
+  --accent: oklch(0.75 0.12 85);
+  --accent-foreground: oklch(0.2 0.05 85);
+  --destructive: oklch(0.6 0.2 25);
+  --destructive-foreground: oklch(0.98 0.01 25);
+  --success: oklch(0.65 0.15 150);
+  --success-foreground: oklch(0.98 0.01 150);
+  --border: oklch(0.9 0.01 240);
+  --input: oklch(0.9 0.01 240);
+  --ring: oklch(0.6 0.15 240);
+  --radius: 0.75rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.145 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.145 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.396 0.141 25.723);
+  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --border: oklch(0.269 0 0);
+  --input: oklch(0.269 0 0);
+  --ring: oklch(0.439 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.269 0 0);
+  --sidebar-ring: oklch(0.439 0 0);
+}
+
+@theme inline {
+  --font-sans: "Geist", "Geist Fallback";
+  --font-mono: "Geist Mono", "Geist Mono Fallback";
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+
+  /* Custom animations for chat and micro-interactions */
+  --animate-in: in 0.3s ease-out;
+  --animate-out: out 0.3s ease-in;
+  --animate-fade-in: fade-in 0.5s ease-out;
+  --animate-slide-up: slide-up 0.4s ease-out;
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slide-up {
+  from {
+    transform: translateY(10px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground selection:bg-accent/30 px-4 sm:px-6 lg:px-8;
+  }
+
+  /* Custom patterns for Nepali cultural feel */
+  .nepali-pattern {
+    background-image: radial-gradient(var(--accent) 0.5px, transparent 0.5px);
+    background-size: 20px 20px;
+    opacity: 0.05;
+  }
+}

Frontend/app/layout.tsx

@@ -0,0 +1,48 @@
+import type React from "react"
+import type { Metadata } from "next"
+import { Geist, Geist_Mono } from "next/font/google"
+import "./globals.css"
+import { AuthProvider } from "@/context/auth-context"
+import { Toaster } from "@/components/ui/toaster"
+
+const _geist = Geist({ subsets: ["latin"] })
+const _geistMono = Geist_Mono({ subsets: ["latin"] })
+
+export const metadata: Metadata = {
+  title: "Setu",
+  description: "Your digital legal assistant for legal welfare and rights in Nepal.",
+  // icons: {
+  //   icon: [
+  //     {
+  //       url: "/icon-light-32x32.png",
+  //       media: "(prefers-color-scheme: light)",
+  //     },
+  //     {
+  //       url: "/icon-dark-32x32.png",
+  //       media: "(prefers-color-scheme: dark)",
+  //     },
+  //     {
+  //       url: "/icon.svg",
+  //       type: "image/svg+xml",
+  //     },
+  //   ],
+  //   apple: "/apple-icon.png",
+  // },
+}
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className={`font-sans antialiased min-h-screen flex flex-col`}>
+        <AuthProvider>
+          {children}
+          <Toaster />
+        </AuthProvider>
+      </body>
+    </html>
+  )
+}

Frontend/app/letter-generator/page.tsx

@@ -0,0 +1,64 @@
+"use client"
+
+import { LetterGenerator } from "@/components/chatbot/letter-generator"
+import { Navbar } from "@/components/layout/navbar"
+import { Footer } from "@/components/layout/footer"
+import { useAuthGuard } from "@/hooks/use-auth-guard"
+
+export default function LetterGeneratorPage() {
+  const { isLoading, isAuthenticated } = useAuthGuard()
+
+  if (isLoading) {
+    return (
+      <div className="flex flex-col min-h-screen">
+        <Navbar />
+        <main className="flex-1 flex items-center justify-center">
+          <div className="text-center">
+            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto mb-4"></div>
+            <p className="text-muted-foreground">Checking authentication...</p>
+          </div>
+        </main>
+        <Footer />
+      </div>
+    )
+  }
+
+  if (!isAuthenticated) {
+    return null // Will redirect to login
+  }
+
+  return (
+    <>
+      {/* Load Nepali fonts for letter generation */}
+      <link
+        rel="preconnect"
+        href="https://fonts.googleapis.com"
+      />
+      <link
+        rel="preconnect"
+        href="https://fonts.gstatic.com"
+        crossOrigin="anonymous"
+      />
+      <link
+        href="https://fonts.googleapis.com/css2?family=Noto+Sans+Devanagari:wght@400;600;700&display=swap"
+        rel="stylesheet"
+      />
+
+      <div className="flex flex-col min-h-screen">
+        <Navbar />
+        <main className="flex-1 p-4 md:p-8 bg-muted/20">
+          <div className="container mx-auto max-w-7xl h-full">
+            <div className="mb-6">
+              <h1 className="text-2xl font-bold text-primary">Letter Generation Assistant</h1>
+              <p className="text-sm text-muted-foreground">
+                Generate official letters for various purposes with AI assistance
+              </p>
+            </div>
+            <LetterGenerator />
+          </div>
+        </main>
+        <Footer />
+      </div>
+    </>
+  )
+}

Frontend/app/loading.tsx

@@ -0,0 +1,3 @@
+export default function Loading() {
+  return null
+}

Frontend/app/login/page.tsx

@@ -0,0 +1,131 @@
+"use client"
+
+import type React from "react"
+import { useState } from "react"
+import { useRouter } from "next/navigation"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/components/ui/card"
+import { Navbar } from "@/components/layout/navbar"
+import { Footer } from "@/components/layout/footer"
+import Link from "next/link"
+import { Scale, AlertCircle } from "lucide-react"
+import { Alert, AlertDescription } from "@/components/ui/alert"
+import { useAuth } from "@/context/auth-context"
+import { apiClient } from "@/lib/api-client"
+
+export default function LoginPage() {
+  const [email, setEmail] = useState("")
+  const [password, setPassword] = useState("")
+  const [error, setError] = useState<string | null>(null)
+  const [isLoading, setIsLoading] = useState(false)
+  const router = useRouter()
+  const { login } = useAuth()
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setError(null)
+    setIsLoading(true)
+
+    try {
+      // Call backend login endpoint using API client
+      const data = await apiClient.login(email, password)
+
+      console.log("Login response:", data)
+      console.log("User data from backend:", data.user)
+
+      // Store token and user data in localStorage
+      localStorage.setItem("access_token", data.access_token)
+      if (data.user) {
+        localStorage.setItem("user", JSON.stringify(data.user))
+        console.log("Stored user in localStorage:", localStorage.getItem("user"))
+      }
+
+      // Update auth context with the new token
+      login(data.access_token)
+
+      // Check for redirect parameter
+      const searchParams = new URLSearchParams(window.location.search)
+      const redirectTo = searchParams.get("redirect")
+
+      // Redirect to the original page or dashboard
+      router.push(redirectTo || "/dashboard")
+    } catch (err) {
+      if (err instanceof Error) {
+        setError(err.message)
+      } else {
+        setError("Server connection failed. Please try again later.")
+      }
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <div className="flex flex-col min-h-screen">
+      <Navbar />
+      <main className="flex-1 flex items-center justify-center p-4 bg-muted/20">
+        <Card className="w-full max-w-md border-primary/20 shadow-lg">
+          <CardHeader className="text-center">
+            <div className="flex justify-center mb-4">
+              <div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center text-primary">
+                <Scale className="h-6 w-6" />
+              </div>
+            </div>
+            <CardTitle className="text-2xl font-bold">Welcome Back</CardTitle>
+            <CardDescription>Enter your email to access your legal dashboard</CardDescription>
+          </CardHeader>
+          <form onSubmit={handleSubmit}>
+            <CardContent className="space-y-4">
+              
+              {/* --- ERROR MESSAGE DISPLAY --- */}
+              {error && (
+                <Alert variant="destructive" className="bg-red-50 text-red-900 border-red-200">
+                  <AlertCircle className="h-4 w-4" />
+                  <AlertDescription>{error}</AlertDescription>
+                </Alert>
+              )}
+
+              <div className="space-y-2">
+                <Label htmlFor="email">Email</Label>
+                  <Input
+                    id="email"
+                    name="email"
+                    type="email"
+                    placeholder="name@example.com"
+                    required
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                  />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="password">Password</Label>
+                  <Input
+                    id="password"
+                    name="password"
+                    type="password"
+                    required
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                  />
+              </div>
+            </CardContent>
+            <CardFooter className="flex flex-col gap-4 pt-4">
+              <Button type="submit" className="w-full bg-primary" disabled={isLoading}>
+                {isLoading ? "Signing In..." : "Sign In"}
+              </Button>
+              <p className="text-sm text-center text-muted-foreground">
+                Don&apos;t have an account?{" "}
+                <Link href="/register" className="text-primary hover:underline">
+                  Register here
+                </Link>
+              </p>
+            </CardFooter>
+          </form>
+        </Card>
+      </main>
+      <Footer />
+    </div>
+  )
+}

Frontend/app/page.tsx

@@ -0,0 +1,147 @@
+import { Navbar } from "@/components/layout/navbar"
+import { Footer } from "@/components/layout/footer"
+import { Button } from "@/components/ui/button"
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card"
+import { MessageSquare, Search, BookOpen, CheckCircle } from "lucide-react"
+import Link from "next/link"
+
+export default function Home() {
+  return (
+    <div className="flex flex-col min-h-screen">
+      <Navbar />
+      <main className="flex-1">
+        {/* Hero Section */}
+        <section className="relative py-20 md:py-32 overflow-hidden">
+          <div className="absolute inset-0 nepali-pattern -z-10" />
+          <div className="container max-w-7xl mx-auto relative text-center space-y-8">
+            {/* <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 text-primary text-xs font-semibold mb-4 border border-primary/20">
+              <CheckCircle className="h-3 w-3" />
+              Trusted by 5,000+ Nepali Citizens
+            </div> */}
+            <h1 className="text-4xl md:text-6xl font-extrabold tracking-tight text-balance">
+              Know Your Rights - <span className="text-primary">Nepal Legal Assistance</span>
+            </h1>
+            <p className="max-w-[700px] mx-auto text-muted-foreground md:text-xl text-pretty">
+              Your digital gateway to legal justice in Nepal. Access our AI-powered law assistant, analyze legal notices
+              for bias, and learn about your fundamental rights.
+            </p>
+            <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
+              <Button size="lg" className="h-12 px-8 bg-primary hover:bg-primary/90" asChild>
+                <Link href="/chatbot">Start Legal Consultation</Link>
+              </Button>
+              <Button
+                size="lg"
+                variant="outline"
+                className="h-12 px-8 border-primary text-primary hover:bg-primary/5 bg-transparent"
+                asChild
+              >
+                <Link href="/bias-checker">Analyze Legal Documents</Link>
+              </Button>
+            </div>
+          </div>
+        </section>
+
+        {/* Features Grid */}
+        <section className="py-20 bg-muted/30">
+          <div className="container max-w-7xl mx-auto">
+            <div className="text-center mb-16 space-y-4">
+              <h2 className="text-3xl font-bold tracking-tight">Comprehensive Legal Services</h2>
+              <p className="text-muted-foreground max-w-[600px] mx-auto">
+                Tailored solutions for every legal need, built with privacy and accessibility in mind.
+              </p>
+            </div>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+              <Card className="hover:shadow-lg transition-all border-primary/10">
+                <CardHeader>
+                  <div className="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4">
+                    <MessageSquare className="h-6 w-6 text-primary" />
+                  </div>
+                  <CardTitle>Law Chatbot</CardTitle>
+                  <CardDescription>Get instant answers to your legal queries based on Nepali law.</CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <Button variant="link" className="p-0 h-auto text-primary" asChild>
+                    <Link href="/chatbot">Learn more →</Link>
+                  </Button>
+                </CardContent>
+              </Card>
+
+              <Card className="hover:shadow-lg transition-all border-primary/10">
+                <CardHeader>
+                  <div className="h-12 w-12 rounded-lg bg-accent/10 flex items-center justify-center mb-4">
+                    <Search className="h-6 w-6 text-accent" />
+                  </div>
+                  <CardTitle>Bias Checker</CardTitle>
+                  <CardDescription>
+                    Analyze legal notices and contracts for potential linguistic biases.
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <Button variant="link" className="p-0 h-auto text-accent" asChild>
+                    <Link href="/bias-checker">Try it now →</Link>
+                  </Button>
+                </CardContent>
+              </Card>
+
+              <Card className="hover:shadow-lg transition-all border-primary/10">
+                <CardHeader>
+                  <div className="h-12 w-12 rounded-lg bg-success/10 flex items-center justify-center mb-4">
+                    <BookOpen className="h-6 w-6 text-success" />
+                  </div>
+                  <CardTitle>Letter Generator</CardTitle>
+                  <CardDescription>
+                    Generate professional government letters effortlessly. Describe what you need, provide the required information, and get an official letter tailored to your reques
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <Button variant="link" className="p-0 h-auto text-success" asChild>
+                    <Link href="/letter-generator">Generate Letters →</Link>
+                  </Button>
+                </CardContent>
+              </Card>
+            </div>
+          </div>
+        </section>
+
+        {/* It is the section that shows the users stats */}
+        {/* Statistics Section */}
+        {/* <section className="py-20 border-y">
+          <div className="container grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
+            <div className="space-y-2">
+              <div className="text-4xl font-bold text-primary">15k+</div>
+              <p className="text-sm text-muted-foreground uppercase tracking-wider font-semibold">Users Helped</p>
+            </div>
+            <div className="space-y-2">
+              <div className="text-4xl font-bold text-primary">50k+</div>
+              <p className="text-sm text-muted-foreground uppercase tracking-wider font-semibold">Queries Answered</p>
+            </div>
+            <div className="space-y-2">
+              <div className="text-4xl font-bold text-primary">2.5k+</div>
+              <p className="text-sm text-muted-foreground uppercase tracking-wider font-semibold">Docs Analyzed</p>
+            </div>
+            <div className="space-y-2">
+              <div className="text-4xl font-bold text-primary">98%</div>
+              <p className="text-sm text-muted-foreground uppercase tracking-wider font-semibold">Satisfaction Rate</p>
+            </div>
+          </div>
+        </section> */}
+
+        {/* CTA Section */}
+        {/** This is the section we can add to get the Create account section */}
+        {/* <section className="py-20 bg-primary text-primary-foreground relative overflow-hidden">
+          <div className="absolute inset-0 opacity-10 nepali-pattern" />
+          <div className="container relative text-center space-y-6">
+            <h2 className="text-3xl md:text-4xl font-bold">Ready to take control of your legal journey?</h2>
+            <p className="max-w-[600px] mx-auto opacity-90">
+              Join thousands of Nepali citizens who are using our platform to understand their rights and seek justice.
+            </p>
+            <Button size="lg" variant="secondary" className="h-12 px-8" asChild>
+              <Link href="/register">Create Your Account</Link>
+            </Button>
+          </div>
+        </section> */}
+      </main>
+      <Footer />
+    </div>
+  )
+}

Frontend/app/profile/page.tsx

@@ -0,0 +1,197 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { useAuth } from "@/context/auth-context"
+import { Navbar } from "@/components/layout/navbar"
+import { Footer } from "@/components/layout/footer"
+import { Button } from "@/components/ui/button"
+import { Card, CardHeader, CardTitle, CardContent, CardDescription } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Avatar, AvatarFallback } from "@/components/ui/avatar"
+import { useToast } from "@/hooks/use-toast"
+import { redirect } from "next/navigation"
+
+export default function ProfilePage() {
+  const { user, isLoading, updateUserDetails } = useAuth()
+  const { toast } = useToast()
+  const [age, setAge] = useState("")
+  const [nid, setNid] = useState("")
+  const [nidError, setNidError] = useState("")
+
+  useEffect(() => {
+    if (user?.details?.age) {
+      setAge(user.details.age.toString())
+    }
+    if (user?.details?.nid) {
+      setNid(user.details.nid)
+    }
+  }, [user])
+
+  if (isLoading) return null
+  if (!user) redirect("/login")
+
+  // Get the first letter of the user's name
+  const getInitial = () => {
+    if (user?.name) {
+      return user.name.charAt(0).toUpperCase()
+    }
+    return "U"
+  }
+
+  // Handle age input - only allow numbers, max 3 digits
+  const handleAgeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value
+    // Only allow numbers and limit to 3 digits
+    if (value === "" || (/^\d+$/.test(value) && value.length <= 3)) {
+      setAge(value)
+    }
+  }
+
+  // Handle NID input with auto-hyphen formatting (xxx-xxx-xxx-x)
+  const handleNidChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    let value = e.target.value
+    // Remove all non-digit characters
+    value = value.replace(/\D/g, "")
+
+    // Limit to 10 digits
+    if (value.length > 10) {
+      value = value.slice(0, 10)
+    }
+
+    // Format with hyphens: xxx-xxx-xxx-x
+    let formatted = ""
+    if (value.length > 0) {
+      formatted = value.slice(0, 3)
+      if (value.length > 3) {
+        formatted += "-" + value.slice(3, 6)
+      }
+      if (value.length > 6) {
+        formatted += "-" + value.slice(6, 9)
+      }
+      if (value.length > 9) {
+        formatted += "-" + value.slice(9, 10)
+      }
+    }
+
+    setNid(formatted)
+
+    // Validate NID format
+    if (formatted && formatted.length < 13) {
+      setNidError("NID must be in format: xxx-xxx-xxx-x")
+    } else {
+      setNidError("")
+    }
+  }
+
+  // Handle form submission
+  const handleSave = async () => {
+    // Validate NID format before saving
+    if (nid && nid.length !== 13) {
+      toast({
+        title: "Error",
+        description: "NID must be in format: xxx-xxx-xxx-x (10 digits)",
+        variant: "destructive",
+      })
+      return
+    }
+
+    // Validate age
+    if (age && (parseInt(age) < 0 || parseInt(age) > 150)) {
+      toast({
+        title: "Error",
+        description: "Please enter a valid age",
+        variant: "destructive",
+      })
+      return
+    }
+
+    // Update user details in auth context
+    const updatedDetails = {
+      ...user.details,
+      nid: nid || user.details?.nid,
+      age: age ? parseInt(age) : user.details?.age,
+    }
+
+    await updateUserDetails(updatedDetails)
+
+    // Here you would typically save to backend
+    toast({
+      title: "Success",
+      description: "Profile updated successfully!",
+    })
+  }
+
+  return (
+    <div className="flex flex-col min-h-screen">
+      <Navbar />
+      <main className="flex-1 p-4 md:p-8 bg-muted/20">
+        <div className="container mx-auto max-w-2xl">
+          <div className="mb-8">
+            <h1 className="text-3xl font-bold text-primary tracking-tight">Profile</h1>
+            <p className="text-muted-foreground">View and manage your personal information</p>
+          </div>
+
+          <Card className="border-primary/10">
+            <CardHeader>
+              <div className="flex flex-col items-center gap-4 text-center">
+                <Avatar className="h-32 w-32 border-4 border-primary">
+                  <AvatarFallback className="bg-primary text-primary-foreground text-5xl">
+                    {getInitial()}
+                  </AvatarFallback>
+                </Avatar>
+                <div>
+                  <CardTitle className="text-2xl">{user.name}</CardTitle>
+                  <CardDescription className="text-base mt-1">{user.email}</CardDescription>
+                  
+                </div>
+              </div>
+            </CardHeader>
+            <CardContent className="space-y-6">
+
+              <div className="space-y-2">
+                <Label htmlFor="age">Age</Label>
+                <Input
+                  id="age"
+                  type="text"
+                  value={age}
+                  onChange={handleAgeChange}
+                  placeholder="Enter your age"
+                  className="max-w-xs"
+                />
+                <p className="text-xs text-muted-foreground">Enter numbers only</p>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="nid">National ID (NID)</Label>
+                <Input
+                  id="nid"
+                  type="text"
+                  value={nid}
+                  onChange={handleNidChange}
+                  placeholder="xxx-xxx-xxx-x"
+                  maxLength={13}
+                />
+                {nidError && (
+                  <p className="text-xs text-destructive">{nidError}</p>
+                )}
+                <p className="text-xs text-muted-foreground">Format: xxx-xxx-xxx-x (10 digits)</p>
+              </div>
+
+              <div className="pt-4">
+                <Button
+                  onClick={handleSave}
+                  className="w-full bg-primary hover:bg-primary/90"
+                  disabled={!!nidError && nid.length > 0}
+                >
+                  Save Changes
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </main>
+      <Footer />
+    </div>
+  )
+}

Frontend/app/register/page.tsx

@@ -0,0 +1,17 @@
+import { RegisterForm } from "@/components/auth/register-form"
+import { Navbar } from "@/components/layout/navbar"
+import { Footer } from "@/components/layout/footer"
+
+export default function RegisterPage() {
+  return (
+    <div className="flex flex-col min-h-screen">
+      <Navbar />
+      <main className="flex-1 flex items-center justify-center p-4 md:p-8 bg-muted/20">
+        <div className="w-full max-w-2xl">
+          <RegisterForm />
+        </div>
+      </main>
+      <Footer />
+    </div>
+  )
+}

Frontend/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

Frontend/components/auth/register-form.tsx

@@ -0,0 +1,194 @@
+"use client"
+
+import type React from "react"
+import { useState } from "react"
+import { useRouter } from "next/navigation"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/components/ui/card"
+import { useToast } from "@/hooks/use-toast"
+import { Scale, Eye, EyeOff } from "lucide-react"
+import { apiClient } from "@/lib/api-client"
+import { setAuthData } from "@/lib/auth-utils"
+import { useAuth } from "@/context/auth-context"
+
+export function RegisterForm() {
+  const [formData, setFormData] = useState({
+    name: "",
+    email: "",
+    password: "",
+    confirmPassword: "",
+  })
+  const [showPassword, setShowPassword] = useState(false)
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false)
+  const [isLoading, setIsLoading] = useState(false)
+  const router = useRouter()
+  const { toast } = useToast()
+  const { login } = useAuth()
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setFormData({ ...formData, [e.target.name]: e.target.value })
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+
+    // Validate password match
+    if (formData.password !== formData.confirmPassword) {
+      toast({
+        title: "Error",
+        description: "Passwords do not match",
+        variant: "destructive",
+      })
+      return
+    }
+
+    // Validate password length
+    if (formData.password.length < 6) {
+      toast({
+        title: "Error",
+        description: "Password must be at least 6 characters long",
+        variant: "destructive",
+      })
+      return
+    }
+
+    setIsLoading(true)
+
+    try {
+      // Call the backend API
+      const response = await apiClient.register(
+        formData.email,
+        formData.password,
+        formData.name
+      )
+
+      console.log("Registration response:", response)
+
+      // Store the access token and user data in localStorage
+      if (response.access_token) {
+        setAuthData(response.access_token, response.refresh_token, response.user)
+
+        // Update auth context
+        login(response.access_token)
+
+        console.log("Stored user data:", localStorage.getItem("user"))
+
+        toast({
+          title: "Success",
+          description: "Account created successfully! Redirecting...",
+        })
+
+        // Redirect to dashboard or home page after successful registration
+        setTimeout(() => {
+          router.push("/dashboard")
+        }, 1500)
+      }
+    } catch (error) {
+      console.error("Registration error:", error)
+      toast({
+        title: "Registration Failed",
+        description: error instanceof Error ? error.message : "An error occurred during registration",
+        variant: "destructive",
+      })
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <Card className="w-full max-w-md mx-auto border-primary/20 shadow-xl overflow-hidden">
+      <CardHeader className="text-center pt-8">
+        <div className="flex justify-center mb-4">
+          <div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center text-primary">
+            <Scale className="h-6 w-6" />
+          </div>
+        </div>
+        <CardTitle className="text-2xl font-bold">Create Your Account</CardTitle>
+        <CardDescription>
+          Enter your basic information to get started
+        </CardDescription>
+      </CardHeader>
+
+      <form onSubmit={handleSubmit}>
+        <CardContent className="space-y-4 pt-4">
+          <div className="space-y-2">
+            <Label htmlFor="name">Full Name</Label>
+            <Input
+              name="name"
+              id="name"
+              placeholder="John Doe"
+              required
+              value={formData.name}
+              onChange={handleInputChange}
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="email">Email Address</Label>
+            <Input
+              name="email"
+              id="email"
+              type="email"
+              placeholder="john@example.com"
+              required
+              value={formData.email}
+              onChange={handleInputChange}
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="password">Password</Label>
+            <div className="relative">
+              <Input
+                name="password"
+                id="password"
+                type={showPassword ? "text" : "password"}
+                required
+                value={formData.password}
+                onChange={handleInputChange}
+                className="pr-10"
+              />
+              <button
+                type="button"
+                onClick={() => setShowPassword(!showPassword)}
+                className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+              >
+                {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+              </button>
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="confirmPassword">Confirm Password</Label>
+            <div className="relative">
+              <Input
+                name="confirmPassword"
+                id="confirmPassword"
+                type={showConfirmPassword ? "text" : "password"}
+                required
+                value={formData.confirmPassword}
+                onChange={handleInputChange}
+                className="pr-10"
+              />
+              <button
+                type="button"
+                onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+                className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+              >
+                {showConfirmPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+              </button>
+            </div>
+          </div>
+        </CardContent>
+
+        <CardFooter className="flex justify-center pb-8">
+          <Button type="submit" className="w-full bg-primary hover:bg-primary/90" disabled={isLoading}>
+            {isLoading ? "Creating Account..." : "Create Account"}
+          </Button>
+        </CardFooter>
+      </form>
+    </Card>
+  )
+}

Frontend/components/chatbot/bias-checker.tsx

@@ -0,0 +1,805 @@
+"use client"
+
+import { useState, useRef } from "react"
+import { Button } from "@/components/ui/button"
+import { Textarea } from "@/components/ui/textarea"
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
+import { Progress } from "@/components/ui/progress"
+import { Badge } from "@/components/ui/badge"
+import { AlertCircle, Info, Search, Upload, X, CheckCircle2, ShieldAlert, FileText, Download, RefreshCw, ThumbsUp, ThumbsDown } from "lucide-react"
+import { cn } from "@/lib/utils"
+import { addDocumentToCache } from "@/lib/document-cache"
+
+interface BiasedSentence {
+  original: string
+  category: string
+  confidence: number
+  suggestion: string | null
+  explanation: string | null
+  success: boolean
+}
+
+interface BiasAnalysisResult {
+  success: boolean
+  biasedCount: number
+  unbiasedCount: number
+  totalSentences: number
+  biasedSentences: BiasedSentence[]
+  filename?: string
+}
+
+// HITL Interfaces
+interface HITLReviewItem {
+  sentence_id: string
+  original_sentence: string
+  is_biased: boolean
+  category: string
+  confidence: number
+  suggestion: string | null
+  approved_suggestion: string | null
+  status: "pending" | "approved" | "needs_regeneration"
+}
+
+interface HITLSessionData {
+  success: boolean
+  session_id: string
+  total_sentences: number
+  biased_count: number
+  neutral_count: number
+  sentences: HITLReviewItem[]
+  filename: string
+}
+
+// Category display names in Nepali/English
+const categoryLabels: Record<string, string> = {
+  neutral: "Neutral",
+  gender: "Gender Bias",
+  religional: "Religious Bias",
+  caste: "Caste Bias",
+  religion: "Religion Bias",
+  appearence: "Appearance Bias",
+  socialstatus: "Social Status Bias",
+  amiguity: "Ambiguity",
+  political: "Political Bias",
+  Age: "Age Bias",
+  Disablity: "Disability Bias",
+}
+
+export function BiasChecker() {
+  const [text, setText] = useState("")
+  const [file, setFile] = useState<File | null>(null)
+  const [isAnalyzing, setIsAnalyzing] = useState(false)
+  const [result, setResult] = useState<BiasAnalysisResult | null>(null)
+  const [dragActive, setDragActive] = useState(false)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  // HITL state
+  const [useHITL, setUseHITL] = useState(true) // Enable HITL by default for PDFs
+  const [hitlSession, setHitlSession] = useState<HITLSessionData | null>(null)
+  const [isGeneratingPDF, setIsGeneratingPDF] = useState(false)
+
+  const handleDrag = (e: React.DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    if (e.type === "dragenter" || e.type === "dragover") {
+      setDragActive(true)
+    } else if (e.type === "dragleave") {
+      setDragActive(false)
+    }
+  }
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault()
+    setDragActive(false)
+    if (e.dataTransfer.files && e.dataTransfer.files[0]) {
+      const selectedFile = e.dataTransfer.files[0]
+      if (selectedFile.type === "application/pdf" || selectedFile.name.endsWith(".pdf")) {
+        setFile(selectedFile)
+        setText("") // Clear text input when file is uploaded
+      }
+    }
+  }
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files[0]) {
+      setFile(e.target.files[0])
+      setText("") // Clear text input when file is uploaded
+    }
+  }
+
+  const removeFile = () => {
+    setFile(null)
+    if (fileInputRef.current) fileInputRef.current.value = ""
+  }
+
+  const analyzeText = async () => {
+    if (!text.trim() && !file) return
+    setIsAnalyzing(true)
+    setResult(null)
+    setHitlSession(null)
+
+    try {
+      const formData = new FormData()
+
+      if (file) {
+        formData.append("file", file)
+        formData.append("use_hitl", useHITL ? "true" : "false")
+      } else {
+        formData.append("text", text)
+        formData.append("use_hitl", "false")
+      }
+
+      formData.append("confidence_threshold", "0.7")
+
+      const token = localStorage.getItem("access_token")
+      const headers: Record<string, string> = {}
+      if (token) {
+        headers["Authorization"] = `Bearer ${token}`
+      }
+
+      const response = await fetch("/api/bias-detection", {
+        method: "POST",
+        headers,
+        body: formData,
+      })
+
+      if (!response.ok) {
+        throw new Error("Failed to analyze bias")
+      }
+
+      const data = await response.json()
+
+      // Check if response is HITL session data
+      if (data.session_id && data.sentences) {
+        setHitlSession(data as HITLSessionData)
+
+        // Cache the analyzed document
+        if (file) {
+          addDocumentToCache({
+            filename: data.filename || file.name,
+            type: "bias-detection",
+            result: {
+              totalSentences: data.total_sentences,
+              biasedCount: data.biased_count,
+              neutralCount: data.neutral_count,
+              success: data.success,
+            },
+            sessionId: data.session_id,
+          })
+        }
+      } else {
+        setResult(data as BiasAnalysisResult)
+
+        // Cache the analyzed document
+        if (file) {
+          addDocumentToCache({
+            filename: data.filename || file.name,
+            type: "bias-detection",
+            result: {
+              totalSentences: data.totalSentences,
+              biasedCount: data.biasedCount,
+              neutralCount: data.unbiasedCount,
+              success: data.success,
+            },
+          })
+        }
+      }
+    } catch (error) {
+      console.error("[Bias Detection Error]:", error)
+      alert("Failed to analyze bias. Please ensure the backend server is running.")
+    } finally {
+      setIsAnalyzing(false)
+    }
+  }
+
+  const handleApproveSuggestion = async (sentenceId: string, suggestion: string) => {
+    if (!hitlSession) return
+
+    try {
+      const token = localStorage.getItem("access_token")
+      const headers: Record<string, string> = {
+        "Content-Type": "application/json"
+      }
+      if (token) {
+        headers["Authorization"] = `Bearer ${token}`
+      }
+
+      const response = await fetch("/api/bias-detection-hitl/approve", {
+        method: "POST",
+        headers,
+        body: JSON.stringify({
+          session_id: hitlSession.session_id,
+          sentence_id: sentenceId,
+          action: "approve",
+          approved_suggestion: suggestion
+        })
+      })
+
+      if (!response.ok) {
+        throw new Error("Failed to approve suggestion")
+      }
+
+      // Update local state
+      setHitlSession({
+        ...hitlSession,
+        sentences: hitlSession.sentences.map(s =>
+          s.sentence_id === sentenceId
+            ? { ...s, status: "approved", approved_suggestion: suggestion }
+            : s
+        )
+      })
+    } catch (error) {
+      console.error("[Approve Error]:", error)
+      alert("Failed to approve suggestion")
+    }
+  }
+
+  const handleRejectSuggestion = async (sentenceId: string) => {
+    if (!hitlSession) return
+
+    try {
+      const token = localStorage.getItem("access_token")
+      const headers: Record<string, string> = {
+        "Content-Type": "application/json"
+      }
+      if (token) {
+        headers["Authorization"] = `Bearer ${token}`
+      }
+
+      const response = await fetch("/api/bias-detection-hitl/approve", {
+        method: "POST",
+        headers,
+        body: JSON.stringify({
+          session_id: hitlSession.session_id,
+          sentence_id: sentenceId,
+          action: "reject"
+        })
+      })
+
+      if (!response.ok) {
+        throw new Error("Failed to reject suggestion")
+      }
+
+      // Update local state
+      setHitlSession({
+        ...hitlSession,
+        sentences: hitlSession.sentences.map(s =>
+          s.sentence_id === sentenceId
+            ? { ...s, status: "needs_regeneration" }
+            : s
+        )
+      })
+    } catch (error) {
+      console.error("[Reject Error]:", error)
+      alert("Failed to reject suggestion")
+    }
+  }
+
+  const handleRegenerateSuggestion = async (sentenceId: string) => {
+    if (!hitlSession) return
+
+    try {
+      const token = localStorage.getItem("access_token")
+      const headers: Record<string, string> = {
+        "Content-Type": "application/json"
+      }
+      if (token) {
+        headers["Authorization"] = `Bearer ${token}`
+      }
+
+      const response = await fetch("/api/bias-detection-hitl/regenerate", {
+        method: "POST",
+        headers,
+        body: JSON.stringify({
+          session_id: hitlSession.session_id,
+          sentence_id: sentenceId
+        })
+      })
+
+      if (!response.ok) {
+        throw new Error("Failed to regenerate suggestion")
+      }
+
+      const data = await response.json()
+
+      // Update local state with new suggestion
+      setHitlSession({
+        ...hitlSession,
+        sentences: hitlSession.sentences.map(s =>
+          s.sentence_id === sentenceId
+            ? { ...s, suggestion: data.new_suggestion, status: "pending" }
+            : s
+        )
+      })
+    } catch (error) {
+      console.error("[Regenerate Error]:", error)
+      alert("Failed to regenerate suggestion")
+    }
+  }
+
+  const handleGeneratePDF = async () => {
+    if (!hitlSession) return
+
+    setIsGeneratingPDF(true)
+    try {
+      const token = localStorage.getItem("access_token")
+      const headers: Record<string, string> = {
+        "Content-Type": "application/json"
+      }
+      if (token) {
+        headers["Authorization"] = `Bearer ${token}`
+      }
+
+      const response = await fetch("/api/bias-detection-hitl/generate-pdf", {
+        method: "POST",
+        headers,
+        body: JSON.stringify({
+          session_id: hitlSession.session_id
+        })
+      })
+
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}))
+        throw new Error(errorData.error || "Failed to generate PDF")
+      }
+
+      // Download the PDF
+      const blob = await response.blob()
+      const url = window.URL.createObjectURL(blob)
+      const link = document.createElement("a")
+      link.href = url
+
+      const contentDisposition = response.headers.get("Content-Disposition")
+      const filename = contentDisposition
+        ? contentDisposition.split("filename=")[1]?.replace(/"/g, "")
+        : `debiased_${hitlSession.filename}`
+
+      link.setAttribute("download", filename)
+      document.body.appendChild(link)
+      link.click()
+      link.remove()
+      window.URL.revokeObjectURL(url)
+
+      alert("PDF generated successfully!")
+    } catch (error) {
+      console.error("[Generate PDF Error]:", error)
+      alert(error instanceof Error ? error.message : "Failed to generate PDF")
+    } finally {
+      setIsGeneratingPDF(false)
+    }
+  }
+
+  const getPendingCount = () => {
+    if (!hitlSession) return 0
+    return hitlSession.sentences.filter(s => s.status === "pending" && s.is_biased).length
+  }
+
+  const getNeedsRegenerationCount = () => {
+    if (!hitlSession) return 0
+    return hitlSession.sentences.filter(s => s.status === "needs_regeneration").length
+  }
+
+  const isReadyForPDF = () => {
+    return getPendingCount() === 0 && getNeedsRegenerationCount() === 0
+  }
+
+  const calculateScore = (result: BiasAnalysisResult) => {
+    if (result.totalSentences === 0) return 100
+    return Math.round((result.unbiasedCount / result.totalSentences) * 100)
+  }
+
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start">
+      {/* Input Side */}
+      <div className="space-y-6">
+        <Card className="border-primary/10 shadow-lg">
+          <CardHeader>
+            <CardTitle>Nepali Bias Checker</CardTitle>
+            <CardDescription>
+              Paste Nepali text or upload a PDF document to check for linguistic biases.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-6">
+            <div className="space-y-4">
+              <Textarea
+                placeholder="नेपाली पाठ यहाँ पेस्ट गर्नुहोस्... (Paste Nepali text here...)"
+                className="min-h-[300px] resize-none border-primary/10 focus-visible:ring-primary font-[system-ui]"
+                value={text}
+                onChange={(e) => {
+                  setText(e.target.value)
+                  if (e.target.value.trim()) setFile(null) // Clear file when typing
+                }}
+                disabled={!!file}
+              />
+              <div className="flex items-center gap-4">
+                <div className="h-px flex-1 bg-border" />
+                <span className="text-xs text-muted-foreground font-medium uppercase tracking-widest">or</span>
+                <div className="h-px flex-1 bg-border" />
+              </div>
+
+              {/* File Upload */}
+              <div className="relative">
+                <input
+                  ref={fileInputRef}
+                  type="file"
+                  accept=".pdf"
+                  onChange={handleFileChange}
+                  className="hidden"
+                  id="file-upload"
+                />
+                <label
+                  htmlFor="file-upload"
+                  onDragEnter={handleDrag}
+                  onDragLeave={handleDrag}
+                  onDragOver={handleDrag}
+                  onDrop={handleDrop}
+                  className={cn(
+                    "flex flex-col items-center justify-center w-full h-40 border-2 border-dashed rounded-xl cursor-pointer transition-all duration-200",
+                    dragActive
+                      ? "border-primary bg-primary/5 scale-[1.01]"
+                      : "border-muted hover:border-primary/50 hover:bg-muted/30",
+                    file ? "border-success/50 bg-success/5" : ""
+                  )}
+                >
+                  {file ? (
+                    <div className="flex flex-col items-center gap-2">
+                      <CheckCircle2 className="h-10 w-10 text-success" />
+                      <div className="flex items-center gap-2">
+                        <FileText className="h-4 w-4" />
+                        <p className="text-sm font-medium">{file.name}</p>
+                      </div>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className="h-7 text-xs"
+                        onClick={(e) => {
+                          e.preventDefault()
+                          removeFile()
+                        }}
+                      >
+                        <X className="h-3 w-3 mr-1" /> Remove
+                      </Button>
+                    </div>
+                  ) : (
+                    <div className="flex flex-col items-center gap-2 p-6 text-center">
+                      <Upload className="h-10 w-10 text-muted-foreground mb-2" />
+                      <p className="text-sm font-semibold">Click or drag PDF to upload</p>
+                      <p className="text-xs text-muted-foreground">Nepali PDF documents supported</p>
+                    </div>
+                  )}
+                </label>
+              </div>
+            </div>
+          </CardContent>
+          <CardContent className="pt-0">
+            <Button
+              className="w-full h-12 text-lg bg-primary hover:bg-primary/90"
+              onClick={analyzeText}
+              disabled={isAnalyzing || (!text.trim() && !file)}
+            >
+              {isAnalyzing ? (
+                <>
+                  <Search className="mr-2 h-5 w-5 animate-spin" />
+                  Analyzing Document...
+                </>
+              ) : (
+                <>
+                  <ShieldAlert className="mr-2 h-5 w-5" />
+                  Analyze for Bias
+                </>
+              )}
+            </Button>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Results Side */}
+      <div className="space-y-6 sticky top-24">
+        {hitlSession ? (
+          <div className="space-y-6 animate-in fade-in slide-in-from-right-8 duration-500">
+            <Card className="border-primary/20 shadow-xl overflow-hidden">
+              <div className="h-2 w-full bg-primary" />
+              <CardHeader className="pb-2">
+                <div className="flex justify-between items-center mb-4">
+                  <CardTitle>HITL Review Session</CardTitle>
+                  <Badge variant="outline" className="text-lg py-1 px-3">
+                    {hitlSession.biased_count} Biased
+                  </Badge>
+                </div>
+                <Progress
+                  value={((hitlSession.total_sentences - getPendingCount() - getNeedsRegenerationCount()) / hitlSession.total_sentences) * 100}
+                  className="h-3"
+                />
+                <div className="flex justify-between text-xs text-muted-foreground font-bold pt-2">
+                  <span>Pending: {getPendingCount()}</span>
+                  <span>Needs Regen: {getNeedsRegenerationCount()}</span>
+                  <span>Total: {hitlSession.total_sentences}</span>
+                </div>
+              </CardHeader>
+              <CardContent className="space-y-4 pt-4">
+                <div className="p-4 rounded-xl bg-muted/50 border border-primary/5">
+                  <h4 className="flex items-center gap-2 text-sm font-bold mb-2">
+                    <Info className="h-4 w-4 text-primary" />
+                    Session Info
+                  </h4>
+                  <div className="space-y-2 text-sm">
+                    <p>Session ID: <code className="text-xs bg-muted px-1 py-0.5 rounded">{hitlSession.session_id}</code></p>
+                    <p>File: {hitlSession.filename}</p>
+                    <p>Total Sentences: {hitlSession.total_sentences}</p>
+                    <p className="text-destructive font-semibold">Biased: {hitlSession.biased_count}</p>
+                    <p className="text-success font-semibold">Neutral: {hitlSession.neutral_count}</p>
+                  </div>
+                </div>
+
+                {/* Biased Sentences Review */}
+                <div className="space-y-4">
+                  <h4 className="text-sm font-bold flex items-center gap-2">
+                    <AlertCircle className="h-4 w-4 text-destructive" />
+                    Review Biased Sentences
+                  </h4>
+                  <div className="space-y-4 max-h-[500px] overflow-y-auto pr-2">
+                    {hitlSession.sentences
+                      .filter(s => s.is_biased)
+                      .map((item) => (
+                        <div key={item.sentence_id} className="p-4 rounded-xl border bg-background space-y-3 shadow-sm">
+                          <div className="space-y-2">
+                            <div className="flex items-center gap-2 flex-wrap mb-2">
+                              <Badge variant="destructive" className="text-xs">
+                                {categoryLabels[item.category] || item.category}
+                              </Badge>
+                              <Badge variant="outline" className="text-xs">
+                                {Math.round(item.confidence * 100)}% confidence
+                              </Badge>
+                              <Badge
+                                variant={item.status === "approved" ? "default" : item.status === "needs_regeneration" ? "destructive" : "secondary"}
+                                className="text-xs"
+                              >
+                                {item.status}
+                              </Badge>
+                            </div>
+
+                            {/* Original Sentence */}
+                            <div>
+                              <p className="text-xs font-bold text-muted-foreground uppercase tracking-wider mb-1">
+                                Original (Biased):
+                              </p>
+                              <p className="text-sm font-medium leading-relaxed font-[system-ui] bg-destructive/5 p-2 rounded border border-destructive/20">
+                                {item.original_sentence}
+                              </p>
+                            </div>
+
+                            {/* Suggestion */}
+                            {item.suggestion && (
+                              <div>
+                                <p className="text-xs font-bold text-success uppercase tracking-wider mb-1">
+                                  Suggested (Unbiased):
+                                </p>
+                                <p className="text-sm font-medium leading-relaxed font-[system-ui] bg-success/5 p-2 rounded border border-success/20">
+                                  {item.suggestion}
+                                </p>
+                              </div>
+                            )}
+
+                            {/* Action Buttons */}
+                            {item.status === "pending" && item.suggestion && (
+                              <div className="flex gap-2 pt-2">
+                                <Button
+                                  size="sm"
+                                  variant="default"
+                                  className="flex-1"
+                                  onClick={() => handleApproveSuggestion(item.sentence_id, item.suggestion!)}
+                                >
+                                  <ThumbsUp className="h-4 w-4 mr-1" />
+                                  Approve
+                                </Button>
+                                <Button
+                                  size="sm"
+                                  variant="destructive"
+                                  className="flex-1"
+                                  onClick={() => handleRejectSuggestion(item.sentence_id)}
+                                >
+                                  <ThumbsDown className="h-4 w-4 mr-1" />
+                                  Reject
+                                </Button>
+                              </div>
+                            )}
+
+                            {item.status === "needs_regeneration" && (
+                              <div className="pt-2">
+                                <Button
+                                  size="sm"
+                                  variant="outline"
+                                  className="w-full"
+                                  onClick={() => handleRegenerateSuggestion(item.sentence_id)}
+                                >
+                                  <RefreshCw className="h-4 w-4 mr-1" />
+                                  Regenerate Suggestion
+                                </Button>
+                              </div>
+                            )}
+
+                            {item.status === "approved" && (
+                              <div className="pt-2">
+                                <div className="flex items-center gap-2 text-success text-sm">
+                                  <CheckCircle2 className="h-4 w-4" />
+                                  <span className="font-semibold">Approved</span>
+                                </div>
+                                {item.approved_suggestion && (
+                                  <p className="text-xs text-muted-foreground mt-1">
+                                    Approved: {item.approved_suggestion}
+                                  </p>
+                                )}
+                              </div>
+                            )}
+                          </div>
+                        </div>
+                      ))}
+                  </div>
+                </div>
+
+                {/* Generate PDF Button */}
+                <div className="pt-4">
+                  <Button
+                    className="w-full h-12 text-lg"
+                    onClick={handleGeneratePDF}
+                    disabled={!isReadyForPDF() || isGeneratingPDF}
+                  >
+                    {isGeneratingPDF ? (
+                      <>
+                        <RefreshCw className="mr-2 h-5 w-5 animate-spin" />
+                        Generating PDF...
+                      </>
+                    ) : !isReadyForPDF() ? (
+                      <>
+                        <AlertCircle className="mr-2 h-5 w-5" />
+                        Review All Sentences First
+                      </>
+                    ) : (
+                      <>
+                        <Download className="mr-2 h-5 w-5" />
+                        Generate Debiased PDF
+                      </>
+                    )}
+                  </Button>
+                  {!isReadyForPDF() && (
+                    <p className="text-xs text-center text-muted-foreground mt-2">
+                      {getPendingCount()} pending, {getNeedsRegenerationCount()} need regeneration
+                    </p>
+                  )}
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        ) : result ? (
+          <div className="space-y-6 animate-in fade-in slide-in-from-right-8 duration-500">
+            <Card className="border-primary/20 shadow-xl overflow-hidden">
+              <div
+                className={cn(
+                  "h-2 w-full",
+                  calculateScore(result) > 70
+                    ? "bg-success"
+                    : calculateScore(result) > 40
+                      ? "bg-accent"
+                      : "bg-destructive"
+                )}
+              />
+              <CardHeader className="pb-2">
+                <div className="flex justify-between items-center mb-4">
+                  <CardTitle>Analysis Results</CardTitle>
+                  <Badge variant="outline" className="text-lg py-1 px-3">
+                    Score: {calculateScore(result)}/100
+                  </Badge>
+                </div>
+                <Progress value={calculateScore(result)} className="h-3" />
+                <div className="flex justify-between text-[10px] text-muted-foreground font-bold pt-2 uppercase tracking-tighter">
+                  <span>Critical Bias</span>
+                  <span>Moderate</span>
+                  <span>Inclusive</span>
+                </div>
+              </CardHeader>
+              <CardContent className="space-y-4 pt-4">
+                <div className="p-4 rounded-xl bg-muted/50 border border-primary/5">
+                  <h4 className="flex items-center gap-2 text-sm font-bold mb-2">
+                    <Info className="h-4 w-4 text-primary" />
+                    Summary
+                  </h4>
+                  <div className="space-y-2">
+                    <p className="text-base leading-relaxed font-semibold">
+                      Biased sentences = <span className="text-destructive">{result.biasedCount}</span>
+                    </p>
+                    <p className="text-base leading-relaxed font-semibold">
+                      Unbiased sentences = <span className="text-success">{result.unbiasedCount}</span>
+                    </p>
+                    {result.filename && (
+                      <p className="text-xs text-muted-foreground mt-2">File: {result.filename}</p>
+                    )}
+                  </div>
+                </div>
+
+                {result.biasedSentences.length > 0 && (
+                  <div className="space-y-4">
+                    <h4 className="text-sm font-bold flex items-center gap-2">
+                      <AlertCircle className="h-4 w-4 text-destructive" />
+                      Biased Sentences with Suggestions
+                    </h4>
+                    <div className="space-y-4 max-h-[600px] overflow-y-auto pr-2">
+                      {result.biasedSentences.map((item, idx) => (
+                        <div key={idx} className="p-4 rounded-xl border bg-background space-y-3 shadow-sm">
+                          <div className="space-y-2">
+                            <div className="flex items-center gap-2 flex-wrap mb-2">
+                              <Badge variant="destructive" className="text-xs">
+                                {categoryLabels[item.category] || item.category}
+                              </Badge>
+                              <Badge variant="outline" className="text-xs">
+                                {Math.round(item.confidence * 100)}% confidence
+                              </Badge>
+                            </div>
+                            <div>
+                              <p className="text-xs font-bold text-muted-foreground uppercase tracking-wider mb-1">
+                                Original (Biased):
+                              </p>
+                              <p className="text-sm font-medium leading-relaxed font-[system-ui] bg-destructive/5 p-2 rounded border border-destructive/20">
+                                {item.original}
+                              </p>
+                            </div>
+                            {item.explanation && (
+                              <div>
+                                <p className="text-xs font-bold text-amber-600 uppercase tracking-wider mb-1">
+                                  Why is this biased?
+                                </p>
+                                <p className="text-xs leading-relaxed bg-amber-50 dark:bg-amber-950/20 p-2 rounded border border-amber-200 dark:border-amber-800 text-amber-900 dark:text-amber-100">
+                                  {item.explanation}
+                                </p>
+                              </div>
+                            )}
+                            {item.suggestion && item.success ? (
+                              <div>
+                                <p className="text-xs font-bold text-success uppercase tracking-wider mb-1">
+                                  Suggested (Unbiased):
+                                </p>
+                                <p className="text-sm font-medium leading-relaxed font-[system-ui] bg-success/5 p-2 rounded border border-success/20">
+                                  {item.suggestion}
+                                </p>
+                              </div>
+                            ) : (
+                              <div>
+                                <p className="text-xs font-bold text-muted-foreground uppercase tracking-wider mb-1">
+                                  Suggestion:
+                                </p>
+                                <p className="text-xs text-muted-foreground italic">
+                                  Suggestion not available
+                                </p>
+                              </div>
+                            )}
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
+
+                {result.biasedSentences.length === 0 && (
+                  <div className="p-6 rounded-xl border border-success/20 bg-success/5 text-center">
+                    <CheckCircle2 className="h-12 w-12 text-success mx-auto mb-2" />
+                    <p className="font-semibold text-success">No biases detected!</p>
+                    <p className="text-xs text-muted-foreground mt-1">The text appears to be neutral and inclusive.</p>
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+          </div>
+        ) : (
+          <div className="h-full min-h-[500px] flex flex-col items-center justify-center text-center p-8 rounded-3xl border-2 border-dashed bg-muted/10 opacity-60">
+            <div className="h-20 w-20 rounded-full bg-muted flex items-center justify-center mb-6">
+              <Search className="h-10 w-10 text-muted-foreground/50" />
+            </div>
+            <h3 className="text-xl font-bold mb-2 text-muted-foreground">Waiting for analysis</h3>
+            <p className="max-w-[300px] text-sm text-muted-foreground">
+              Enter Nepali text or upload a PDF on the left and click "Analyze for Bias" to see linguistic insights.
+            </p>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

Frontend/components/chatbot/bias-checker.tsx.backup

@@ -0,0 +1,213 @@
+"use client"
+
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Textarea } from "@/components/ui/textarea"
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
+import { Progress } from "@/components/ui/progress"
+import { Badge } from "@/components/ui/badge"
+import { FileUpload } from "@/components/common/file-upload"
+import { AlertCircle, Info, Search, History, ArrowRight, ShieldAlert } from "lucide-react"
+import { cn } from "@/lib/utils"
+
+interface BiasResult {
+  score: number
+  problematicPhrases: { phrase: string; reason: string; recommendation: string }[]
+  summary: string
+}
+
+export function BiasChecker() {
+  const [text, setText] = useState("")
+  const [isAnalyzing, setIsAnalyzing] = useState(false)
+  const [result, setResult] = useState<BiasResult | null>(null)
+
+  const analyzeText = () => {
+    if (!text.trim()) return
+    setIsAnalyzing(true)
+
+    // Simulate AI analysis delay
+    setTimeout(() => {
+      const mockResult: BiasResult = {
+        score: 65,
+        summary:
+          "The document contains several instances of exclusionary language and ambiguous legal terminology that might favor certain socioeconomic groups.",
+        problematicPhrases: [
+          {
+            phrase: "duly qualified applicants",
+            reason: "Vague terminology that often serves as a gatekeeping mechanism without specific criteria.",
+            recommendation: "Use 'applicants meeting the specific criteria listed below'.",
+          },
+          {
+            phrase: "standard processing fees apply",
+            reason: "Potentially exclusionary for lower-income individuals without stating exact amounts.",
+            recommendation: "Clearly list the fee structure or mention available waivers.",
+          },
+          {
+            phrase: "formal education only",
+            reason: "Excludes qualified individuals with non-traditional or vocational backgrounds.",
+            recommendation: "Consider 'equivalent experience' or specific skill-based testing.",
+          },
+        ],
+      }
+      setResult(mockResult)
+      setIsAnalyzing(false)
+    }, 2000)
+  }
+
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start">
+      {/* Input Side */}
+      <div className="space-y-6">
+        <Card className="border-primary/10 shadow-lg">
+          <CardHeader>
+            <CardTitle>Legal Notice Analyzer</CardTitle>
+            <CardDescription>Paste legal content or upload a document to check for linguistic biases.</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-6">
+            <div className="space-y-4">
+              <Textarea
+                placeholder="Paste legal notice content here..."
+                className="min-h-[300px] resize-none border-primary/10 focus-visible:ring-primary"
+                value={text}
+                onChange={(e) => setText(e.target.value)}
+              />
+              <div className="flex items-center gap-4">
+                <div className="h-px flex-1 bg-border" />
+                <span className="text-xs text-muted-foreground font-medium uppercase tracking-widest">or</span>
+                <div className="h-px flex-1 bg-border" />
+              </div>
+              <FileUpload onFileSelect={(txt) => setText(txt)} />
+            </div>
+          </CardContent>
+          <CardContent className="pt-0">
+            <Button
+              className="w-full h-12 text-lg bg-primary hover:bg-primary/90"
+              onClick={analyzeText}
+              disabled={isAnalyzing || !text.trim()}
+            >
+              {isAnalyzing ? (
+                <>
+                  <Search className="mr-2 h-5 w-5 animate-spin" />
+                  Analyzing Document...
+                </>
+              ) : (
+                <>
+                  <ShieldAlert className="mr-2 h-5 w-5" />
+                  Analyze for Bias
+                </>
+              )}
+            </Button>
+          </CardContent>
+        </Card>
+
+        <Card className="bg-muted/50 border-none">
+          <CardHeader className="py-4">
+            <div className="flex items-center gap-2 text-sm font-semibold">
+              <History className="h-4 w-4 text-primary" />
+              Recent Analyses
+            </div>
+          </CardHeader>
+          <CardContent className="py-0 pb-4">
+            <div className="space-y-2">
+              {[1, 2].map((i) => (
+                <div
+                  key={i}
+                  className="flex items-center justify-between p-3 rounded-lg bg-background border text-sm group cursor-pointer hover:border-primary/30 transition-colors"
+                >
+                  <span className="truncate max-w-[200px] font-medium">Labor Notice Draft 0{i}.txt</span>
+                  <div className="flex items-center gap-3">
+                    <Badge variant="secondary" className="bg-success/10 text-success border-success/20">
+                      Clean
+                    </Badge>
+                    <ArrowRight className="h-4 w-4 text-muted-foreground group-hover:text-primary transition-transform group-hover:translate-x-1" />
+                  </div>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Results Side */}
+      <div className="space-y-6 sticky top-24">
+        {result ? (
+          <div className="space-y-6 animate-in fade-in slide-in-from-right-8 duration-500">
+            <Card className="border-primary/20 shadow-xl overflow-hidden">
+              <div
+                className={cn(
+                  "h-2 w-full",
+                  result.score > 70 ? "bg-success" : result.score > 40 ? "bg-accent" : "bg-destructive",
+                )}
+              />
+              <CardHeader className="pb-2">
+                <div className="flex justify-between items-center mb-4">
+                  <CardTitle>Analysis Results</CardTitle>
+                  <Badge variant="outline" className="text-lg py-1 px-3">
+                    Score: {result.score}/100
+                  </Badge>
+                </div>
+                <Progress value={result.score} className="h-3" />
+                <div className="flex justify-between text-[10px] text-muted-foreground font-bold pt-2 uppercase tracking-tighter">
+                  <span>Critical Bias</span>
+                  <span>Moderate</span>
+                  <span>Inclusive</span>
+                </div>
+              </CardHeader>
+              <CardContent className="space-y-4 pt-4">
+                <div className="p-4 rounded-xl bg-muted/50 border border-primary/5">
+                  <h4 className="flex items-center gap-2 text-sm font-bold mb-2">
+                    <Info className="h-4 w-4 text-primary" />
+                    Summary
+                  </h4>
+                  <p className="text-sm leading-relaxed">{result.summary}</p>
+                </div>
+
+                <div className="space-y-4">
+                  <h4 className="text-sm font-bold flex items-center gap-2">
+                    <AlertCircle className="h-4 w-4 text-destructive" />
+                    Detected Issues
+                  </h4>
+                  <div className="space-y-3">
+                    {result.problematicPhrases.map((item, idx) => (
+                      <div key={idx} className="p-4 rounded-xl border bg-background space-y-3 shadow-sm">
+                        <div className="flex items-start justify-between">
+                          <code className="text-destructive font-bold bg-destructive/5 px-2 py-0.5 rounded text-sm">
+                            "{item.phrase}"
+                          </code>
+                        </div>
+                        <div className="grid gap-2">
+                          <p className="text-xs leading-relaxed">
+                            <span className="font-bold text-muted-foreground uppercase tracking-widest text-[9px] mr-2">
+                              Reason:
+                            </span>
+                            {item.reason}
+                          </p>
+                          <div className="p-2 rounded bg-success/5 border border-success/10">
+                            <p className="text-xs leading-relaxed font-medium text-success">
+                              <span className="font-bold uppercase tracking-widest text-[9px] mr-2">Recommended:</span>
+                              {item.recommendation}
+                            </p>
+                          </div>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        ) : (
+          <div className="h-full min-h-[500px] flex flex-col items-center justify-center text-center p-8 rounded-3xl border-2 border-dashed bg-muted/10 opacity-60">
+            <div className="h-20 w-20 rounded-full bg-muted flex items-center justify-center mb-6">
+              <Search className="h-10 w-10 text-muted-foreground/50" />
+            </div>
+            <h3 className="text-xl font-bold mb-2 text-muted-foreground">Waiting for analysis</h3>
+            <p className="max-w-[300px] text-sm text-muted-foreground">
+              Enter text on the left and click "Analyze for Bias" to see linguistic insights and recommendations.
+            </p>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

Frontend/components/chatbot/law-chatbot.tsx

@@ -0,0 +1,674 @@
+"use client"
+
+import { useState, useRef, useEffect } from "react"
+import { useRouter } from "next/navigation"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
+import { Avatar, AvatarFallback } from "@/components/ui/avatar"
+import { Badge } from "@/components/ui/badge"
+import { Send, Scale, User, Download, Plus, MessageSquare, Trash2, Menu, X } from "lucide-react"
+import { cn } from "@/lib/utils"
+import ReactMarkdown from "react-markdown"
+import remarkGfm from "remark-gfm"
+import { useToast } from "@/hooks/use-toast"
+
+interface SuggestedAction {
+  action: string
+  description: string
+  letter_type: string
+  prompt: string
+}
+
+interface Message {
+  id: string
+  role: "user" | "assistant"
+  content: string
+  timestamp: Date
+  suggested_action?: SuggestedAction
+  metadata?: {
+    summary?: string
+    key_point?: string
+    next_steps?: string
+    sources?: any[]
+    context_used?: boolean
+    is_non_legal?: boolean
+  }
+}
+
+interface Conversation {
+  id: string
+  title: string
+  updated_at: string
+  message_count: number
+}
+
+export function LawChatbot() {
+  const router = useRouter()
+  const [messages, setMessages] = useState<Message[]>([
+    {
+      id: "1",
+      role: "assistant",
+      content: "Namaste! I am your Nepali Law Assistant. How can I help you today?",
+      timestamp: new Date(),
+    },
+  ])
+  const [input, setInput] = useState("")
+  const [isTyping, setIsTyping] = useState(false)
+  const [conversationId, setConversationId] = useState<string | null>(null)
+  const [conversations, setConversations] = useState<Conversation[]>([])
+  const [isLoadingConversations, setIsLoadingConversations] = useState(false)
+  const [showLetterDialog, setShowLetterDialog] = useState(false)
+  const [pendingAction, setPendingAction] = useState<SuggestedAction | null>(null)
+  const [isMobileSidebarOpen, setIsMobileSidebarOpen] = useState(false)
+  const scrollAreaRef = useRef<HTMLDivElement>(null)
+  const { toast } = useToast()
+
+  const suggestedQuestions = [
+    "What are my property rights?",
+    "Labor law basics",
+    "Consumer rights",
+    "Women's rights in Nepal",
+  ]
+
+  // Load conversations on mount
+  useEffect(() => {
+    loadConversations()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  // Scroll to bottom whenever messages change
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      if (scrollAreaRef.current) {
+        const scrollContainer = scrollAreaRef.current.querySelector("[data-radix-scroll-area-viewport]")
+        if (scrollContainer) {
+          scrollContainer.scrollTo({
+            top: scrollContainer.scrollHeight,
+            behavior: "smooth",
+          })
+        }
+      }
+    }, 100)
+    return () => clearTimeout(timer)
+  }, [messages, isTyping])
+
+  const getAuthHeaders = () => {
+    const token = localStorage.getItem("access_token")
+    return {
+      "Content-Type": "application/json",
+      ...(token && { Authorization: `Bearer ${token}` }),
+    }
+  }
+
+  // Use public env var so frontend can target backend in different environments
+  const BACKEND_URL = (process.env.NEXT_PUBLIC_BACKEND_URL as string) || "http://localhost:8000"
+
+  const loadConversations = async () => {
+    const token = localStorage.getItem("access_token")
+    if (!token) return
+
+    setIsLoadingConversations(true)
+    try {
+      const response = await fetch(`${BACKEND_URL}/api/v1/chat-history/conversations`, {
+        headers: getAuthHeaders(),
+      })
+
+      if (response.ok) {
+        const data = await response.json()
+        setConversations(data)
+      }
+    } catch (error) {
+      console.error("Failed to load conversations:", error)
+    } finally {
+      setIsLoadingConversations(false)
+    }
+  }
+
+  const loadConversation = async (convId: string) => {
+    try {
+      const response = await fetch(`${BACKEND_URL}/api/v1/chat-history/conversations/${convId}`, {
+        headers: getAuthHeaders(),
+      })
+
+      if (response.ok) {
+        const data = await response.json()
+        const loadedMessages: Message[] = data.messages.map((msg: any) => {
+          let content = msg.content
+
+          // If this is an assistant message with metadata, reconstruct the full formatted content
+          if (msg.role === "assistant" && msg.metadata) {
+            const meta = msg.metadata
+
+            // Check if metadata has the structured fields
+            if (meta.summary || meta.key_point || meta.next_steps) {
+              // Format sources
+              let sourcesText = ""
+              if (meta.sources && meta.sources.length > 0) {
+                const formattedSources = meta.sources
+                  .filter((s: any) => s && (s.file || s.section))
+                  .map((s: any, i: number) => {
+                    let fileName = "Legal Document"
+                    if (s.file) {
+                      fileName = s.file
+                        .replace(/_en\.pdf$/i, "")
+                        .replace(/\.pdf$/i, "")
+                        .replace(/_/g, " ")
+                    }
+                    const section = s.section || s.article_section || "General Reference"
+                    return `   ${i + 1}. **${fileName}** (${section})`
+                  })
+                  .join("\n")
+
+                if (formattedSources) {
+                  sourcesText = `\n\n### 📚 Resources\n${formattedSources}`
+                }
+              }
+
+              const contextBadge = meta.context_used ? "\n\n> 💡 *Used conversation context*" : ""
+
+              // Reconstruct the full formatted content
+              content = `### 📝 Summary\n${meta.summary || ""}
+
+### 💬 Detailed Explanation
+${msg.content}
+
+### 🔑 Key Points
+- ${meta.key_point || ""}
+
+### 📋 Next Steps
+${meta.next_steps || ""}${sourcesText}${contextBadge}`.trim()
+            }
+          }
+
+          return {
+            id: msg.id,
+            role: msg.role,
+            content: content,
+            timestamp: new Date(msg.timestamp),
+            metadata: msg.metadata,
+          }
+        })
+        setMessages(loadedMessages)
+        setConversationId(convId)
+        // Close mobile sidebar after loading conversation
+        setIsMobileSidebarOpen(false)
+      }
+    } catch (error) {
+      console.error("Failed to load conversation:", error)
+      toast({
+        title: "Error",
+        description: "Failed to load conversation",
+        variant: "destructive",
+      })
+    }
+  }
+
+  const createNewConversation = async (firstMessage: string) => {
+    const token = localStorage.getItem("access_token")
+    if (!token) {
+      toast({
+        title: "Authentication Required",
+        description: "Please login to save chat history",
+        variant: "destructive",
+      })
+      return null
+    }
+
+    try {
+      const title = firstMessage.slice(0, 50) + (firstMessage.length > 50 ? "..." : "")
+      const response = await fetch(`${BACKEND_URL}/api/v1/chat-history/conversations`, {
+        method: "POST",
+        headers: getAuthHeaders(),
+        body: JSON.stringify({ title }),
+      })
+
+      if (response.ok) {
+        const data = await response.json()
+        setConversationId(data.id)
+        loadConversations() // Refresh conversation list
+        return data.id
+      }
+    } catch (error) {
+      console.error("Failed to create conversation:", error)
+    }
+    return null
+  }
+
+  const deleteConversation = async (convId: string) => {
+    try {
+      const response = await fetch(`${BACKEND_URL}/api/v1/chat-history/conversations/${convId}`, {
+        method: "DELETE",
+        headers: getAuthHeaders(),
+      })
+
+      if (response.ok) {
+        toast({
+          title: "Success",
+          description: "Conversation deleted successfully",
+        })
+
+        // If deleted conversation was active, start new chat
+        if (conversationId === convId) {
+          startNewChat()
+        }
+
+        // Refresh conversation list
+        loadConversations()
+      } else {
+        throw new Error("Failed to delete")
+      }
+    } catch (error) {
+      console.error("Failed to delete conversation:", error)
+      toast({
+        title: "Error",
+        description: "Failed to delete conversation",
+        variant: "destructive",
+      })
+    }
+  }
+
+
+  const confirmLetterGeneration = () => {
+    if (!pendingAction) return
+
+    // Store the description in localStorage to pass to letter generator page
+    localStorage.setItem("letter_generation_prompt", pendingAction.description)
+    localStorage.setItem("letter_type", pendingAction.letter_type)
+
+    // Close dialog
+    setShowLetterDialog(false)
+    setPendingAction(null)
+
+    // Redirect to letter generator page
+    router.push("/letter-generator")
+
+    toast({
+      title: "Redirecting...",
+      description: "Taking you to the letter generation section",
+    })
+  }
+
+  const cancelLetterGeneration = () => {
+    setShowLetterDialog(false)
+    setPendingAction(null)
+  }
+
+  const startNewChat = () => {
+    setMessages([
+      {
+        id: "1",
+        role: "assistant",
+        content: "Namaste! I am your Nepali Law Assistant. How can I help you today?",
+        timestamp: new Date(),
+      },
+    ])
+    setConversationId(null)
+    // Close mobile sidebar after starting new chat
+    setIsMobileSidebarOpen(false)
+  }
+
+  const handleSend = async (content: string) => {
+    if (!content.trim()) return
+
+    const userMsg: Message = {
+      id: Date.now().toString(),
+      role: "user",
+      content,
+      timestamp: new Date(),
+    }
+
+    setMessages((prev) => [...prev, userMsg])
+    setInput("")
+    setIsTyping(true)
+
+    try {
+      // Create conversation if this is the first message
+      let currentConvId = conversationId
+      if (!currentConvId && localStorage.getItem("access_token")) {
+        currentConvId = await createNewConversation(content)
+      }
+
+      const token = localStorage.getItem("access_token")
+      const headers: Record<string, string> = { "Content-Type": "application/json" }
+      if (token) {
+        headers["Authorization"] = `Bearer ${token}`
+      }
+
+      const response = await fetch("/api/Legal_Chat", {
+        method: "POST",
+        headers,
+        body: JSON.stringify({
+          messages: [...messages, { role: "user", content }],
+          type: "legal",
+          conversation_id: currentConvId,
+        }),
+      })
+
+      const data = await response.json()
+
+      const assistantMsg: Message = {
+        id: (Date.now() + 1).toString(),
+        role: "assistant",
+        content: data.content || data.error || "I am having trouble connecting to my legal database.",
+        timestamp: new Date(),
+        suggested_action: data.suggested_action || undefined,
+      }
+      setMessages((prev) => [...prev, assistantMsg])
+
+      // If there's a suggested action, show the dialog
+      if (data.suggested_action) {
+        setPendingAction(data.suggested_action)
+        setShowLetterDialog(true)
+      }
+
+      // Note: Messages are now automatically saved by the backend /chat endpoint
+    } catch (error) {
+      console.error("[Legal Chat Error]:", error)
+      const errorMsg: Message = {
+        id: (Date.now() + 1).toString(),
+        role: "assistant",
+        content: "I encountered an error while processing your request. Please ensure the backend server is running.",
+        timestamp: new Date(),
+      }
+      setMessages((prev) => [...prev, errorMsg])
+    } finally {
+      setIsTyping(false)
+    }
+  }
+
+  const exportChat = () => {
+    const chatContent = messages
+      .map((m) => `[${m.role.toUpperCase()} - ${m.timestamp.toLocaleTimeString()}]: ${m.content}`)
+      .join("\n\n")
+    const blob = new Blob([chatContent], { type: "text/plain" })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement("a")
+    a.href = url
+    a.download = "legal-chat-history.txt"
+    a.click()
+  }
+
+  return (
+    <div className="w-full max-w-[1600px] mx-auto">
+      <div className="flex h-[calc(100vh-10rem)] gap-4 relative">
+        {/* Mobile Sidebar Overlay */}
+        {isMobileSidebarOpen && (
+          <div
+            className="fixed inset-0 bg-black/50 z-40 lg:hidden"
+            onClick={() => setIsMobileSidebarOpen(false)}
+          />
+        )}
+
+        {/* Sidebar - Chat History */}
+        <div
+          className={cn(
+            "w-64 flex-col gap-4 border-r pr-4 bg-background z-50",
+            "lg:flex lg:relative lg:translate-x-0",
+            "fixed left-0 top-0 h-full transition-transform duration-300 ease-in-out p-4 lg:p-0",
+            isMobileSidebarOpen ? "flex translate-x-0" : "hidden lg:flex -translate-x-full lg:translate-x-0"
+          )}
+        >
+        {/* Close button for mobile */}
+        <div className="flex items-center justify-between lg:hidden mb-4">
+          <h3 className="font-semibold">Chat History</h3>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => setIsMobileSidebarOpen(false)}
+            className="h-8 w-8"
+          >
+            <X className="h-4 w-4" />
+          </Button>
+        </div>
+
+        <Button className="w-full justify-start gap-2 bg-primary" onClick={startNewChat}>
+          <Plus className="h-4 w-4" /> New Conversation
+        </Button>
+        <ScrollArea className="flex-1">
+          <div className="space-y-2">
+            <p className="text-xs font-semibold text-muted-foreground px-2 uppercase tracking-wider">Recent Chats</p>
+            {isLoadingConversations ? (
+              <p className="text-xs text-muted-foreground px-2">Loading...</p>
+            ) : conversations.length > 0 ? (
+              conversations.map((conv) => (
+                <div
+                  key={conv.id}
+                  className={cn(
+                    "w-full rounded-lg transition-colors border flex items-center gap-2",
+                    conversationId === conv.id
+                      ? "bg-muted border-border"
+                      : "border-transparent hover:border-border hover:bg-muted/50"
+                  )}
+                >
+                  <button
+                    className="p-2 rounded-md text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-all shrink-0"
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      if (confirm("Delete this conversation? This cannot be undone.")) {
+                        deleteConversation(conv.id)
+                      }
+                    }}
+                    title="Delete conversation"
+                  >
+                    <Trash2 className="h-4 w-4" />
+                  </button>
+                  <button
+                    className="flex-1 text-left p-3 pr-2"
+                    onClick={() => loadConversation(conv.id)}
+                  >
+                    <div className="flex items-center gap-2 mb-1">
+                      <MessageSquare className="h-4 w-4 text-primary shrink-0" />
+                      <span className="text-sm font-medium truncate">{conv.title}</span>
+                    </div>
+                    <div className="flex items-center justify-between">
+                      <span className="text-xs text-muted-foreground">
+                        {new Date(conv.updated_at).toLocaleDateString()}
+                      </span>
+                      <span className="text-xs text-muted-foreground">{conv.message_count} msgs</span>
+                    </div>
+                  </button>
+                </div>
+              ))
+            ) : (
+              <p className="text-xs text-muted-foreground px-2">No conversations yet</p>
+            )}
+          </div>
+        </ScrollArea>
+      </div>
+
+      {/* Main Chat Interface */}
+      <Card className="flex-1 flex flex-col shadow-lg border-primary/10 overflow-hidden bg-card/50 backdrop-blur-sm">
+        <CardHeader className="border-b py-4 flex flex-row items-center justify-between">
+          <div className="flex items-center gap-3">
+            {/* Mobile menu button */}
+            <Button
+              variant="ghost"
+              size="icon"
+              className="lg:hidden"
+              onClick={() => setIsMobileSidebarOpen(true)}
+              title="Open chat history"
+            >
+              <Menu className="h-5 w-5" />
+            </Button>
+
+            <div className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
+              <Scale className="h-5 w-5" />
+            </div>
+            <div>
+              <CardTitle className="text-lg">Nepali Law Assistant</CardTitle>
+              <div className="flex items-center gap-2">
+                <span className="h-2 w-2 rounded-full bg-success animate-pulse" />
+                <span className="text-xs text-muted-foreground">AI Powered & Ready</span>
+              </div>
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <Button variant="ghost" size="sm" onClick={exportChat} title="Export conversation">
+              <Download className="h-4 w-4 mr-2" />
+              Export
+            </Button>
+          </div>
+        </CardHeader>
+
+        <CardContent className="flex-1 p-0 overflow-hidden">
+          <ScrollArea ref={scrollAreaRef} className="h-full">
+            <div className="space-y-6 max-w-4xl mx-auto p-4 md:p-6">
+              {messages.map((m) => (
+                <div
+                  key={m.id}
+                  className={cn(
+                    "flex gap-3 animate-in fade-in slide-in-from-bottom-2",
+                    m.role === "user" ? "flex-row-reverse" : "flex-row",
+                  )}
+                >
+                  <Avatar className={cn("h-8 w-8 border", m.role === "assistant" ? "bg-primary/10" : "bg-muted")}>
+                    <AvatarFallback className={m.role === "assistant" ? "text-primary" : "text-muted-foreground"}>
+                      {m.role === "assistant" ? <Scale className="h-4 w-4" /> : <User className="h-4 w-4" />}
+                    </AvatarFallback>
+                  </Avatar>
+                  <div
+                    className={cn("flex flex-col gap-1 max-w-[80%]", m.role === "user" ? "items-end" : "items-start")}
+                  >
+                    <div
+                      className={cn(
+                        "rounded-2xl px-4 py-3 text-sm shadow-sm",
+                        m.role === "user"
+                          ? "bg-primary text-primary-foreground rounded-tr-none"
+                          : "bg-muted/80 backdrop-blur-sm rounded-tl-none border",
+                      )}
+                    >
+                      {m.role === "assistant" ? (
+                        <div className="prose prose-sm dark:prose-invert max-w-none overflow-wrap-anywhere wrap-break-word">
+                          <ReactMarkdown
+                            remarkPlugins={[remarkGfm]}
+                            components={{
+                              p: ({ children }) => <p className="mb-3 last:mb-0 leading-relaxed">{children}</p>,
+                              strong: ({ children }) => <strong className="font-semibold text-foreground">{children}</strong>,
+                              ul: ({ children }) => <ul className="list-disc list-inside mb-3 space-y-1">{children}</ul>,
+                              ol: ({ children }) => <ol className="list-decimal list-inside mb-3 space-y-1">{children}</ol>,
+                              li: ({ children }) => <li className="leading-relaxed">{children}</li>,
+                              a: ({ href, children }) => (
+                                <a
+                                  href={href}
+                                  className="text-primary hover:underline underline-offset-2"
+                                  target="_blank"
+                                  rel="noopener noreferrer"
+                                >
+                                  {children}
+                                </a>
+                              ),
+                              h1: ({ children }) => <h1 className="text-lg font-bold mb-2 mt-4 first:mt-0">{children}</h1>,
+                              h2: ({ children }) => <h2 className="text-base font-bold mb-2 mt-3 first:mt-0">{children}</h2>,
+                              h3: ({ children }) => <h3 className="text-sm font-semibold mb-2 mt-2 first:mt-0">{children}</h3>,
+                              code: ({ children }) => (
+                                <code className="bg-muted px-1.5 py-0.5 rounded text-xs font-mono">{children}</code>
+                              ),
+                              pre: ({ children }) => (
+                                <pre className="bg-muted p-3 rounded-lg overflow-x-auto mb-3 text-xs">{children}</pre>
+                              ),
+                            }}
+                          >
+                            {m.content}
+                          </ReactMarkdown>
+                        </div>
+                      ) : (
+                        <div className="wrap-break-word">{m.content}</div>
+                      )}
+                    </div>
+                    <span className="text-[10px] text-muted-foreground px-1">
+                      {m.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}
+                    </span>
+                  </div>
+                </div>
+              ))}
+              {isTyping && (
+                <div className="flex gap-3 animate-in fade-in">
+                  <Avatar className="h-8 w-8 border bg-primary/10">
+                    <AvatarFallback className="text-primary">
+                      <Scale className="h-4 w-4" />
+                    </AvatarFallback>
+                  </Avatar>
+                  <div className="bg-muted/80 border rounded-2xl rounded-tl-none px-4 py-3 flex gap-1">
+                    <span
+                      className="h-1.5 w-1.5 rounded-full bg-primary/40 animate-bounce"
+                      style={{ animationDelay: "0ms" }}
+                    />
+                    <span
+                      className="h-1.5 w-1.5 rounded-full bg-primary/40 animate-bounce"
+                      style={{ animationDelay: "150ms" }}
+                    />
+                    <span
+                      className="h-1.5 w-1.5 rounded-full bg-primary/40 animate-bounce"
+                      style={{ animationDelay: "300ms" }}
+                    />
+                  </div>
+                </div>
+              )}
+            </div>
+          </ScrollArea>
+        </CardContent>
+
+        <CardFooter className="p-4 border-t bg-muted/20 backdrop-blur-md">
+          <div className="w-full space-y-4 max-w-4xl mx-auto">
+            {messages.length < 3 && (
+              <div className="flex flex-wrap gap-2">
+                {suggestedQuestions.map((q) => (
+                  <Badge
+                    key={q}
+                    variant="outline"
+                    className="cursor-pointer hover:bg-primary/10 hover:border-primary/30 transition-colors px-3 py-1 bg-background"
+                    onClick={() => handleSend(q)}
+                  >
+                    {q}
+                  </Badge>
+                ))}
+              </div>
+            )}
+            <div className="flex gap-2 relative">
+              <Input
+                placeholder="Type your legal question here..."
+                value={input}
+                onChange={(e) => setInput(e.target.value)}
+                onKeyDown={(e) => e.key === "Enter" && handleSend(input)}
+                className="pr-12 h-12 bg-background border-primary/20 focus-visible:ring-primary shadow-inner"
+              />
+              <Button
+                size="icon"
+                onClick={() => handleSend(input)}
+                className="absolute right-1 top-1 h-10 w-10 bg-primary hover:bg-primary/90 transition-transform active:scale-95"
+              >
+                <Send className="h-4 w-4" />
+              </Button>
+            </div>
+            <p className="text-[10px] text-center text-muted-foreground">
+              AI responses are for information only and not professional legal advice.
+            </p>
+          </div>
+        </CardFooter>
+      </Card>
+      </div>
+
+      {/* Letter Generation Confirmation Card */}
+      {showLetterDialog && pendingAction && (
+        <Card className="fixed bottom-6 right-6 z-50 shadow-2xl border-primary/20 w-[90vw] sm:w-96 animate-in slide-in-from-bottom-4 fade-in duration-300">
+          <CardHeader className="pb-3">
+            <CardTitle className="text-base">Generate Letter</CardTitle>
+            <p className="text-sm text-muted-foreground mt-1">
+              Would you like me to help you draft a {pendingAction.letter_type}?
+            </p>
+          </CardHeader>
+          <CardFooter className="gap-2 pt-3">
+            <Button variant="outline" onClick={cancelLetterGeneration} className="flex-1">
+              No, thanks
+            </Button>
+            <Button onClick={confirmLetterGeneration} className="flex-1">
+              Yes, generate it
+            </Button>
+          </CardFooter>
+        </Card>
+      )}
+    </div>
+  )
+}

Frontend/components/chatbot/letter-generator.tsx

@@ -0,0 +1,739 @@
+"use client"
+
+import { useState, useRef, useEffect } from "react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
+import { Avatar, AvatarFallback } from "@/components/ui/avatar"
+import { Badge } from "@/components/ui/badge"
+import { Send, FileText, User, Download, Loader2, CheckCircle2, Printer } from "lucide-react"
+import { cn } from "@/lib/utils"
+import ReactMarkdown from "react-markdown"
+import remarkGfm from "remark-gfm"
+import html2canvas from "html2canvas"
+import { addDocumentToCache } from "@/lib/document-cache"
+
+type MessageRole = "user" | "assistant" | "system"
+
+interface Message {
+  id: string
+  role: MessageRole
+  content: string
+  timestamp: Date
+}
+
+type ConversationState = "initial" | "template-search" | "collecting-placeholders" | "generating" | "completed"
+
+interface PlaceholderData {
+  [key: string]: string
+}
+
+export function LetterGenerator() {
+  const [messages, setMessages] = useState<Message[]>([
+    {
+      id: "1",
+      role: "assistant",
+      content: "Namaste! I am your Letter Generation Assistant. What kind of letter would you like to generate? (e.g., citizenship application, leave application, complaint letter, etc.)",
+      timestamp: new Date(),
+    },
+  ])
+  const [input, setInput] = useState("")
+  const [isTyping, setIsTyping] = useState(false)
+  const [conversationState, setConversationState] = useState<ConversationState>("initial")
+  const [templateName, setTemplateName] = useState<string | null>(null)
+  const [placeholders, setPlaceholders] = useState<string[]>([])
+  const [placeholderData, setPlaceholderData] = useState<PlaceholderData>({})
+  const [currentPlaceholderIndex, setCurrentPlaceholderIndex] = useState(0)
+  const [generatedLetter, setGeneratedLetter] = useState<string | null>(null)
+  const [generatedLetterImage, setGeneratedLetterImage] = useState<string | null>(null)
+  const [isGeneratingImage, setIsGeneratingImage] = useState(false)
+  const scrollAreaRef = useRef<HTMLDivElement>(null)
+  const letterTemplateRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      if (scrollAreaRef.current) {
+        const scrollContainer = scrollAreaRef.current.querySelector("[data-radix-scroll-area-viewport]")
+        if (scrollContainer) {
+          scrollContainer.scrollTo({
+            top: scrollContainer.scrollHeight,
+            behavior: "smooth",
+          })
+        }
+      }
+    }, 100)
+    return () => clearTimeout(timer)
+  }, [messages, isTyping])
+
+  // Auto-fill prompt from chatbot redirect
+  useEffect(() => {
+    const prompt = localStorage.getItem("letter_generation_prompt")
+    const letterType = localStorage.getItem("letter_type")
+
+    if (prompt) {
+      // Clear the stored data
+      localStorage.removeItem("letter_generation_prompt")
+      localStorage.removeItem("letter_type")
+
+      // Auto-send the prompt
+      setInput(prompt)
+      setTimeout(() => {
+        handleSend(prompt)
+      }, 500)
+    }
+  }, [])
+
+  const addMessage = (role: MessageRole, content: string) => {
+    const newMessage: Message = {
+      id: `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`, // Unique ID
+      role,
+      content,
+      timestamp: new Date(),
+    }
+    setMessages((prev) => [...prev, newMessage])
+  }
+
+  const handleSend = async (content: string) => {
+    if (!content.trim()) return
+
+    addMessage("user", content)
+    setInput("")
+    setIsTyping(true)
+
+    try {
+      if (conversationState === "initial" || conversationState === "template-search") {
+        // Step 1: Search for template
+        await searchTemplate(content)
+      } else if (conversationState === "collecting-placeholders") {
+        // Step 2: Collect placeholder values
+        await collectPlaceholder(content)
+      }
+    } catch (error) {
+      console.error("[Letter Generation Error]:", error)
+      addMessage("assistant", "I encountered an error. Please try again or rephrase your request.")
+    } finally {
+      setIsTyping(false)
+    }
+  }
+
+  const searchTemplate = async (query: string) => {
+    try {
+      const token = localStorage.getItem("access_token")
+      const headers: Record<string, string> = { "Content-Type": "application/json" }
+      if (token) {
+        headers["Authorization"] = `Bearer ${token}`
+      }
+
+      const response = await fetch("/api/letter-generation", {
+        method: "POST",
+        headers,
+        body: JSON.stringify({
+          action: "search-template",
+          data: { query },
+        }),
+      })
+
+      const data = await response.json()
+
+      if (data.success && data.templateName) {
+        setTemplateName(data.templateName)
+        addMessage(
+          "assistant",
+          `I found a template: **${data.templateName}**. Let me get the required information for this letter.`
+        )
+
+        // Get template details
+        await getTemplateDetails(data.templateName)
+      } else {
+        addMessage(
+          "assistant",
+          "I couldn't find a suitable template for your request. Could you please provide more details about the type of letter you need?"
+        )
+        setConversationState("template-search")
+      }
+    } catch (error) {
+      throw error
+    }
+  }
+
+  const getTemplateDetails = async (templateName: string) => {
+    try {
+      const token = localStorage.getItem("access_token")
+      const headers: Record<string, string> = { "Content-Type": "application/json" }
+      if (token) {
+        headers["Authorization"] = `Bearer ${token}`
+      }
+
+      const response = await fetch("/api/letter-generation", {
+        method: "POST",
+        headers,
+        body: JSON.stringify({
+          action: "get-template-details",
+          data: { templateName },
+        }),
+      })
+
+      const data = await response.json()
+
+      if (data.success && data.placeholders) {
+        setPlaceholders(data.placeholders)
+        setCurrentPlaceholderIndex(0)
+        setConversationState("collecting-placeholders")
+
+        if (data.placeholders.length > 0) {
+          const firstPlaceholder = data.placeholders[0]
+          addMessage(
+            "assistant",
+            `Great! I need some information from you. Please provide the **${formatPlaceholder(firstPlaceholder)}**:`
+          )
+        } else {
+          // No placeholders needed, generate directly
+          await fillTemplate(templateName, {})
+        }
+      } else {
+        addMessage("assistant", "I encountered an issue retrieving the template details. Please try again.")
+      }
+    } catch (error) {
+      throw error
+    }
+  }
+
+  const collectPlaceholder = async (value: string) => {
+    const currentPlaceholder = placeholders[currentPlaceholderIndex]
+    const newPlaceholderData = {
+      ...placeholderData,
+      [currentPlaceholder]: value,
+    }
+    setPlaceholderData(newPlaceholderData)
+
+    const nextIndex = currentPlaceholderIndex + 1
+
+    if (nextIndex < placeholders.length) {
+      // Ask for next placeholder
+      setCurrentPlaceholderIndex(nextIndex)
+      const nextPlaceholder = placeholders[nextIndex]
+      addMessage("assistant", `Thank you! Now, please provide the **${formatPlaceholder(nextPlaceholder)}**:`)
+    } else {
+      // All placeholders collected, generate letter
+      setConversationState("generating")
+      addMessage("assistant", "Perfect! I have all the information I need. Generating your letter...")
+      await fillTemplate(templateName!, newPlaceholderData)
+    }
+  }
+
+  const fillTemplate = async (templateName: string, placeholders: PlaceholderData) => {
+    try {
+      const token = localStorage.getItem("access_token")
+      const headers: Record<string, string> = { "Content-Type": "application/json" }
+      if (token) {
+        headers["Authorization"] = `Bearer ${token}`
+      }
+
+      const response = await fetch("/api/letter-generation", {
+        method: "POST",
+        headers,
+        body: JSON.stringify({
+          action: "fill-template",
+          data: { templateName, placeholders },
+        }),
+      })
+
+      const data = await response.json()
+
+      if (data.success && data.letter) {
+        setGeneratedLetter(data.letter)
+        setConversationState("completed")
+        addMessage(
+          "assistant",
+          `✅ Your letter has been generated successfully! You can download it using the button below.\n\n**Preview:**\n\n${data.letter}`
+        )
+
+        // Cache the generated letter
+        addDocumentToCache({
+          filename: `${templateName || "letter"}_${Date.now()}.txt`,
+          type: "letter-generation",
+          result: {
+            success: true,
+          },
+        })
+      } else {
+        addMessage("assistant", "Failed to generate the letter. Please try again.")
+        setConversationState("initial")
+      }
+    } catch (error) {
+      throw error
+    }
+  }
+
+  const formatPlaceholder = (placeholder: string): string => {
+    return placeholder
+      .replace(/{|}/g, "")
+      .replace(/_/g, " ")
+      .replace(/\b\w/g, (char) => char.toUpperCase())
+  }
+
+  const generateLetterImage = async () => {
+    if (!letterTemplateRef.current) {
+      console.log("Letter template ref not available")
+      return
+    }
+
+    setIsGeneratingImage(true)
+    try {
+      console.log("Starting image generation...")
+
+      // Create an iframe to completely isolate rendering context
+      const iframe = document.createElement('iframe')
+      iframe.style.cssText = 'position: fixed; left: -10000px; top: 0; width: 794px; height: 1123px; border: none;'
+      document.body.appendChild(iframe)
+
+      const iframeDoc = iframe.contentDocument || iframe.contentWindow?.document
+      if (!iframeDoc) throw new Error('Unable to access iframe document')
+
+      // Write clean HTML with only our content
+      iframeDoc.open()
+      iframeDoc.write(`
+        <!DOCTYPE html>
+        <html>
+          <head>
+            <meta charset="UTF-8">
+            <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Devanagari:wght@400;600;700&display=swap" rel="stylesheet">
+            <style>
+              * { margin: 10; padding: 10; box-sizing: border-box; }
+              body { background: white; margin: 0; padding: 0; }
+            </style>
+          </head>
+          <body>${letterTemplateRef.current.innerHTML}</body>
+        </html>
+      `)
+      iframeDoc.close()
+
+      // Wait for fonts to load
+      await new Promise(resolve => setTimeout(resolve, 500))
+
+      const canvas = await html2canvas(iframeDoc.body, {
+        scale: 2,
+        useCORS: true,
+        allowTaint: true,
+        backgroundColor: '#ffffff',
+        logging: false,
+        width: 794,
+        height: 1123,
+      })
+
+      // Clean up
+      document.body.removeChild(iframe)
+
+      console.log("Canvas created, converting to data URL...")
+      const dataUrl = canvas.toDataURL("image/png", 1.0)
+      console.log("Image generated successfully")
+      setGeneratedLetterImage(dataUrl)
+      setIsGeneratingImage(false)
+    } catch (error) {
+      console.error("Image generation failed:", error)
+      setIsGeneratingImage(false)
+      addMessage("assistant", "Failed to generate letter image. You can still download the text version.")
+    }
+  }
+
+  useEffect(() => {
+    if (generatedLetter && conversationState === "completed") {
+      // Generate image after a short delay to ensure DOM is rendered
+      setTimeout(() => {
+        generateLetterImage()
+      }, 500)
+    }
+  }, [generatedLetter, conversationState])
+
+  const downloadLetterImage = () => {
+    if (!generatedLetterImage) {
+      console.log("No image available to download")
+      return
+    }
+
+    try {
+      console.log("Starting download...")
+      const link = document.createElement("a")
+      link.href = generatedLetterImage
+      link.download = `${templateName || "letter"}_${Date.now()}.png`
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link)
+      console.log("Download initiated successfully")
+    } catch (error) {
+      console.error("Download failed:", error)
+      addMessage("assistant", "Download failed. Please try the Print option or download as text.")
+    }
+  }
+
+  const downloadLetterText = () => {
+    if (!generatedLetter) return
+
+    const blob = new Blob([generatedLetter], { type: "text/plain;charset=utf-8" })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement("a")
+    a.href = url
+    a.download = `${templateName || "letter"}_${Date.now()}.txt`
+    a.click()
+    URL.revokeObjectURL(url)
+  }
+
+  const printLetter = () => {
+    if (!generatedLetterImage) return
+
+    const printWindow = window.open("", "", "width=800,height=600")
+    if (!printWindow) return
+
+    printWindow.document.write(`
+      <html>
+        <head>
+          <title>Print Letter</title>
+          <style>
+            @page { size: A4; margin: 0; }
+            body { margin: 10; padding: 10; }
+            img { width: 80%; height: auto; display: block; }
+          </style>
+        </head>
+        <body>
+          <img src="${generatedLetterImage}" onload="window.print(); window.close();" />
+        </body>
+      </html>
+    `)
+    printWindow.document.close()
+  }
+
+  const startNew = () => {
+    setConversationState("initial")
+    setTemplateName(null)
+    setPlaceholders([])
+    setPlaceholderData({})
+    setCurrentPlaceholderIndex(0)
+    setGeneratedLetter(null)
+    setGeneratedLetterImage(null)
+    setMessages([
+      {
+        id: Date.now().toString(),
+        role: "assistant",
+        content:
+          "Let's generate another letter! What kind of letter would you like to create?",
+        timestamp: new Date(),
+      },
+    ])
+  }
+
+  return (
+    <div className="w-full max-w-[1600px] mx-auto">
+      <div className="flex h-[calc(100vh-10rem)] gap-4">
+        {/* Main Chat Interface */}
+        <Card className="flex-1 flex flex-col shadow-lg border-primary/10 overflow-hidden bg-card/50 backdrop-blur-sm">
+        <CardHeader className="border-b py-4 flex flex-row items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
+              <FileText className="h-5 w-5" />
+            </div>
+            <div>
+              <CardTitle className="text-lg">Letter Generation Assistant</CardTitle>
+              <div className="flex items-center gap-2">
+                <span className="h-2 w-2 rounded-full bg-success animate-pulse" />
+                <span className="text-xs text-muted-foreground">AI Powered & Ready</span>
+              </div>
+            </div>
+          </div>
+          {conversationState === "completed" && (
+            <div className="flex gap-2">
+              <Button
+                variant="default"
+                size="sm"
+                onClick={downloadLetterImage}
+                disabled={!generatedLetterImage || isGeneratingImage}
+              >
+                <Download className="h-4 w-4 mr-2" />
+                {isGeneratingImage ? "Generating..." : "Download Image"}
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={printLetter}
+                disabled={!generatedLetterImage || isGeneratingImage}
+              >
+                <Printer className="h-4 w-4 mr-2" />
+                Print
+              </Button>
+              <Button variant="outline" size="sm" onClick={downloadLetterText}>
+                <FileText className="h-4 w-4 mr-2" />
+                Download Text
+              </Button>
+              <Button variant="secondary" size="sm" onClick={startNew}>
+                <FileText className="h-4 w-4 mr-2" />
+                New Letter
+              </Button>
+            </div>
+          )}
+        </CardHeader>
+
+        <CardContent className="flex-1 p-0 overflow-hidden">
+          <ScrollArea ref={scrollAreaRef} className="h-full">
+            <div className="space-y-6 max-w-4xl mx-auto p-4 md:p-6">
+              {messages.map((m) => (
+                <div
+                  key={m.id}
+                  className={cn(
+                    "flex gap-3 animate-in fade-in slide-in-from-bottom-2",
+                    m.role === "user" ? "flex-row-reverse" : "flex-row"
+                  )}
+                >
+                  <Avatar className={cn("h-8 w-8 border", m.role === "assistant" ? "bg-primary/10" : "bg-muted")}>
+                    <AvatarFallback className={m.role === "assistant" ? "text-primary" : "text-muted-foreground"}>
+                      {m.role === "assistant" ? <FileText className="h-4 w-4" /> : <User className="h-4 w-4" />}
+                    </AvatarFallback>
+                  </Avatar>
+                  <div
+                    className={cn("flex flex-col gap-1 max-w-[80%]", m.role === "user" ? "items-end" : "items-start")}
+                  >
+                    <div
+                      className={cn(
+                        "rounded-2xl px-4 py-3 text-sm shadow-sm",
+                        m.role === "user"
+                          ? "bg-primary text-primary-foreground rounded-tr-none"
+                          : "bg-muted/80 backdrop-blur-sm rounded-tl-none border"
+                      )}
+                    >
+                      {m.role === "assistant" ? (
+                        <div className="prose prose-sm dark:prose-invert max-w-none overflow-wrap-anywhere wrap-break-word">
+                          <ReactMarkdown
+                            remarkPlugins={[remarkGfm]}
+                            components={{
+                              p: ({ children }) => <p className="mb-3 last:mb-0 leading-relaxed">{children}</p>,
+                              strong: ({ children }) => <strong className="font-semibold text-foreground">{children}</strong>,
+                              ul: ({ children }) => <ul className="list-disc list-inside mb-3 space-y-1">{children}</ul>,
+                              ol: ({ children }) => <ol className="list-decimal list-inside mb-3 space-y-1">{children}</ol>,
+                              li: ({ children }) => <li className="leading-relaxed">{children}</li>,
+                              code: ({ children }) => (
+                                <code className="bg-muted px-1.5 py-0.5 rounded text-xs font-mono">{children}</code>
+                              ),
+                              pre: ({ children }) => (
+                                <pre className="bg-muted p-3 rounded-lg overflow-x-auto mb-3 text-xs whitespace-pre-wrap">
+                                  {children}
+                                </pre>
+                              ),
+                            }}
+                          >
+                            {m.content}
+                          </ReactMarkdown>
+                        </div>
+                      ) : (
+                        <div className="wrap-break-word">{m.content}</div>
+                      )}
+                    </div>
+                    <span className="text-[10px] text-muted-foreground px-1">
+                      {m.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}
+                    </span>
+                  </div>
+                </div>
+              ))}
+              {isTyping && (
+                <div className="flex gap-3 animate-in fade-in">
+                  <Avatar className="h-8 w-8 border bg-primary/10">
+                    <AvatarFallback className="text-primary">
+                      <FileText className="h-4 w-4" />
+                    </AvatarFallback>
+                  </Avatar>
+                  <div className="bg-muted/80 border rounded-2xl rounded-tl-none px-4 py-3 flex gap-1">
+                    <span
+                      className="h-1.5 w-1.5 rounded-full bg-primary/40 animate-bounce"
+                      style={{ animationDelay: "0ms" }}
+                    />
+                    <span
+                      className="h-1.5 w-1.5 rounded-full bg-primary/40 animate-bounce"
+                      style={{ animationDelay: "150ms" }}
+                    />
+                    <span
+                      className="h-1.5 w-1.5 rounded-full bg-primary/40 animate-bounce"
+                      style={{ animationDelay: "300ms" }}
+                    />
+                  </div>
+                </div>
+              )}
+            </div>
+          </ScrollArea>
+
+          {/* Preview of generated letter image */}
+          {conversationState === "completed" && (
+            <div className="p-4 border-t bg-muted/10">
+              <div className="max-w-4xl mx-auto">
+                <div className="flex justify-between items-center mb-3">
+                  <h3 className="text-sm font-semibold">Generated Letter Preview (Nepali Format):</h3>
+                  {!generatedLetterImage && !isGeneratingImage && (
+                    <Button size="sm" variant="outline" onClick={generateLetterImage}>
+                      Generate Image
+                    </Button>
+                  )}
+                  {isGeneratingImage && (
+                    <span className="text-xs text-muted-foreground flex items-center gap-2">
+                      <Loader2 className="h-3 w-3 animate-spin" />
+                      Generating image...
+                    </span>
+                  )}
+                </div>
+                {generatedLetterImage ? (
+                  <div className="border rounded-lg overflow-hidden shadow-lg bg-white">
+                    <img src={generatedLetterImage} alt="Nepali Letter" className="w-full" />
+                  </div>
+                ) : (
+                  <div className="border rounded-lg p-8 text-center bg-muted/50">
+                    <p className="text-sm text-muted-foreground">
+                      Click "Generate Image" to create the Nepali format version
+                    </p>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+        </CardContent>
+
+        <CardFooter className="p-4 border-t bg-muted/20 backdrop-blur-md">
+          <div className="w-full space-y-4 max-w-4xl mx-auto">
+            {conversationState !== "completed" && (
+              <div className="flex gap-2 relative">
+                <Input
+                  placeholder={
+                    conversationState === "collecting-placeholders"
+                      ? `Enter ${formatPlaceholder(placeholders[currentPlaceholderIndex] || "")}...`
+                      : "Describe the letter you need..."
+                  }
+                  value={input}
+                  onChange={(e) => setInput(e.target.value)}
+                  onKeyDown={(e) => e.key === "Enter" && handleSend(input)}
+                  className="pr-12 h-12 bg-background border-primary/20 focus-visible:ring-primary shadow-inner"
+                  disabled={isTyping}
+                />
+                <Button
+                  size="icon"
+                  onClick={() => handleSend(input)}
+                  className="absolute right-1 top-1 h-10 w-10 bg-primary hover:bg-primary/90 transition-transform active:scale-95"
+                  disabled={isTyping || !input.trim()}
+                >
+                  {isTyping ? <Loader2 className="h-4 w-4 animate-spin" /> : <Send className="h-4 w-4" />}
+                </Button>
+              </div>
+            )}
+            <p className="text-[10px] text-center text-muted-foreground">
+              AI-generated letters should be reviewed before official use.
+            </p>
+          </div>
+        </CardFooter>
+      </Card>
+      </div>
+
+      {/* Hidden Nepali Paper Template for Image Generation */}
+      {generatedLetter && (
+        <div
+          ref={letterTemplateRef}
+          style={{
+            position: "fixed",
+            left: "-10000px",
+            top: "90",
+            width: "794px", // A4 width at 96 DPI
+            minHeight: "1123px", // A4 height at 96 DPI
+            backgroundColor: "rgb(255, 255, 255)",
+            fontFamily: '"Noto Sans Devanagari", "Kalimati", Arial, sans-serif',
+            fontSize: "14pt",
+            lineHeight: "1.8",
+            color: "rgb(0, 0, 0)",
+            padding: "80px 80px",
+            boxSizing: "border-box",
+            visibility: "hidden",
+            pointerEvents: "none",
+            border: "none",
+            margin: "10",
+            isolation: "isolate", // Isolate from parent styles
+          }}
+        >
+          {/* Reference Number (Date removed) */}
+          <div
+            style={{
+              marginBottom: "24px",
+              fontSize: "11pt",
+              fontWeight: "600",
+              color: "rgb(0, 0, 0)",
+            }}
+          >
+            <div style={{marginLeft:"40px",marginTop:"50px"}}>चि. नं.: {placeholderData.reference_no || placeholderData.ref_no || "............."}</div>
+          </div>
+
+          {/* Recipient Address */}
+          {(placeholderData.recipient_name || placeholderData.receiver_name) && (
+            <div style={{ marginBottom: "24px", fontSize: "12pt", color: "rgb(0, 0, 0)",marginRight:"30px", }}>
+              <div style={{ fontWeight: "600" }}>श्रीमान्,</div>
+              <div>{placeholderData.recipient_name || placeholderData.receiver_name}</div>
+              {placeholderData.recipient_designation && <div>{placeholderData.recipient_designation}</div>}
+              {placeholderData.recipient_address && <div>{placeholderData.recipient_address}</div>}
+            </div>
+          )}
+
+          {/* Subject */}
+          {placeholderData.subject && (
+            <div style={{ marginBottom: "20px", fontSize: "12pt", fontWeight: "600", color: "rgb(0, 0, 0)",marginLeft:"50px",marginRight:"30px", }}>
+              <strong>विषय:</strong> {placeholderData.subject}
+            </div>
+          )}
+
+          {/* Salutation */}
+          <div style={{ marginBottom: "16px", fontSize: "12pt", color: "rgb(0, 0, 0)",marginLeft:"40px",marginRight:"30px", }}>महोदय,</div>
+
+          {/* Main Letter Content */}
+          <div
+            style={{
+              marginBottom: "40px",
+              marginLeft: "40px",
+              marginRight:"30px",
+              textAlign: "justify",
+              whiteSpace: "pre-wrap",
+              fontSize: "12pt",
+              lineHeight: "2",
+              color: "rgb(0, 0, 0)",
+            }}
+          >
+            {generatedLetter}
+          </div>
+
+          {/* Signature Section */}
+          {/* <div style={{ marginTop: "60px", float: "right", textAlign: "center", fontSize: "12pt", color: "rgb(0, 0, 0)" }}>
+            <div
+              style={{
+                borderTop: "2px solid rgb(0, 0, 0)",
+                paddingTop: "8px",
+                minWidth: "200px",
+                marginTop: "60px",
+              }}
+            >
+              <div style={{ fontWeight: "700", marginBottom: "4px", color: "rgb(0, 0, 0)" }}>
+                {placeholderData.sender_name || placeholderData.name || "........................."}
+              </div>
+              <div style={{ fontSize: "11pt", color: "rgb(55, 65, 81)" }}>
+                {placeholderData.sender_designation ||
+                  placeholderData.designation ||
+                  placeholderData.position ||
+                  "........................."}
+              </div>
+              {placeholderData.sender_office && (
+                <div style={{ fontSize: "10pt", color: "rgb(107, 114, 128)", marginTop: "2px" }}>
+                  {placeholderData.sender_office}
+                </div>
+              )}
+            </div>
+          </div> */}
+
+          {/* Footer with contact info (if available) */}
+          <div style={{ clear: "both", marginTop: "100px", paddingTop: "20px", borderTop: "1px solid rgb(229, 231, 235)" }}>
+            <div style={{ fontSize: "9pt", color: "rgb(107, 114, 128)", textAlign: "center" }}>
+              {placeholderData.contact_email && <span>Email: {placeholderData.contact_email} | </span>}
+              {placeholderData.contact_phone && <span>Phone: {placeholderData.contact_phone}</span>}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

Frontend/components/common/file-upload.tsx

@@ -0,0 +1,108 @@
+"use client"
+
+import type React from "react"
+
+import { useState, useRef } from "react"
+import { Button } from "@/components/ui/button"
+import { Upload, X, CheckCircle2 } from "lucide-react"
+import { cn } from "@/lib/utils"
+
+interface FileUploadProps {
+  onFileSelect: (text: string) => void
+  accept?: string
+  className?: string
+}
+
+export function FileUpload({ onFileSelect, accept = ".txt,.pdf", className }: FileUploadProps) {
+  const [dragActive, setDragActive] = useState(false)
+  const [fileName, setFileName] = useState<string | null>(null)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  const handleDrag = (e: React.DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    if (e.type === "dragenter" || e.type === "dragover") {
+      setDragActive(true)
+    } else if (e.type === "dragleave") {
+      setDragActive(false)
+    }
+  }
+
+  const processFile = async (file: File) => {
+    setFileName(file.name)
+    if (file.type === "text/plain") {
+      const text = await file.text()
+      onFileSelect(text)
+    } else {
+      // PDF processing would normally happen here via a library
+      // For this demo, we'll simulate it
+      onFileSelect(`Simulated text content from: ${file.name}\n\nThis legal notice contains various clauses...`)
+    }
+  }
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault()
+    setDragActive(false)
+    if (e.dataTransfer.files && e.dataTransfer.files[0]) {
+      processFile(e.dataTransfer.files[0])
+    }
+  }
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files[0]) {
+      processFile(e.target.files[0])
+    }
+  }
+
+  return (
+    <div className={cn("relative", className)}>
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept={accept}
+        onChange={handleChange}
+        className="hidden"
+        id="file-upload"
+      />
+      <label
+        htmlFor="file-upload"
+        onDragEnter={handleDrag}
+        onDragLeave={handleDrag}
+        onDragOver={handleDrag}
+        onDrop={handleDrop}
+        className={cn(
+          "flex flex-col items-center justify-center w-full h-40 border-2 border-dashed rounded-xl cursor-pointer transition-all duration-200",
+          dragActive
+            ? "border-primary bg-primary/5 scale-[1.01]"
+            : "border-muted hover:border-primary/50 hover:bg-muted/30",
+          fileName ? "border-success/50 bg-success/5" : "",
+        )}
+      >
+        {fileName ? (
+          <div className="flex flex-col items-center gap-2">
+            <CheckCircle2 className="h-10 w-10 text-success" />
+            <p className="text-sm font-medium">{fileName}</p>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 text-xs"
+              onClick={(e) => {
+                e.preventDefault()
+                setFileName(null)
+                if (fileInputRef.current) fileInputRef.current.value = ""
+              }}
+            >
+              <X className="h-3 w-3 mr-1" /> Remove
+            </Button>
+          </div>
+        ) : (
+          <div className="flex flex-col items-center gap-2 p-6 text-center">
+            <Upload className="h-10 w-10 text-muted-foreground mb-2" />
+            <p className="text-sm font-semibold">Click or drag to upload document</p>
+            <p className="text-xs text-muted-foreground">Supported formats: .txt, .pdf</p>
+          </div>
+        )}
+      </label>
+    </div>
+  )
+}

Frontend/components/dashboard/stats-card.tsx

@@ -0,0 +1,37 @@
+import { Card, CardContent } from "@/components/ui/card"
+import type { LucideIcon } from "lucide-react"
+import { cn } from "@/lib/utils"
+
+interface StatsCardProps {
+  title: string
+  value: string | number
+  description: string
+  icon: LucideIcon
+  color: "primary" | "accent" | "success" | "destructive"
+}
+
+export function StatsCard({ title, value, description, icon: Icon, color }: StatsCardProps) {
+  const colorMap = {
+    primary: "bg-primary/10 text-primary border-primary/20",
+    accent: "bg-accent/10 text-accent border-accent/20",
+    success: "bg-success/10 text-success border-success/20",
+    destructive: "bg-destructive/10 text-destructive border-destructive/20",
+  }
+
+  return (
+    <Card className="border-primary/10 hover:shadow-md transition-shadow">
+      <CardContent className="p-6">
+        <div className="flex items-center justify-between space-y-0 pb-2">
+          <p className="text-sm font-medium text-muted-foreground">{title}</p>
+          <div className={cn("p-2 rounded-lg border", colorMap[color])}>
+            <Icon className="h-4 w-4" />
+          </div>
+        </div>
+        <div className="pt-2">
+          <div className="text-2xl font-bold">{value}</div>
+          <p className="text-xs text-muted-foreground pt-1">{description}</p>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

Frontend/components/layout/footer.tsx

@@ -0,0 +1,133 @@
+import { Button } from "@/components/ui/button"
+import Link from "next/link"
+import { Scale, MessageSquare, ShieldCheck, BookOpen, ArrowRight } from "lucide-react"
+
+export function Footer() {
+  return (
+    <footer className="w-full border-t bg-muted/30">
+      <div className="container max-w-7xl mx-auto py-12 md:py-16">
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
+          <div className="space-y-4">
+            <div className="flex items-center gap-2 text-primary">
+              <Scale className="h-6 w-6" />
+              <span className="font-bold text-lg">Know Your Rights</span>
+            </div>
+            <p className="text-sm text-muted-foreground">
+              Empowering citizens of Nepal through legal literacy and digital assistance.
+            </p>
+            {/* <div className="flex gap-4">
+              <Link href="#" className="text-muted-foreground hover:text-primary">
+                <Facebook className="h-5 w-5" />
+              </Link>
+              <Link href="#" className="text-muted-foreground hover:text-primary">
+                <Twitter className="h-5 w-5" />
+              </Link>
+              <Link href="#" className="text-muted-foreground hover:text-primary">
+                <Instagram className="h-5 w-5" />
+              </Link>
+              <Link href="#" className="text-muted-foreground hover:text-primary">
+                <Mail className="h-5 w-5" />
+              </Link>
+            </div> */}
+          </div>
+          <div className="md:col-span-3">
+            <h3 className="font-semibold mb-6 text-lg">Quick Access</h3>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              <Link
+                href="/chatbot"
+                className="group relative overflow-hidden rounded-lg border bg-card p-5 hover:shadow-lg transition-all duration-300 hover:border-primary/50"
+              >
+                <div className="flex items-start gap-3">
+                  <div className="rounded-lg bg-primary/10 p-2.5 group-hover:bg-primary/20 transition-colors">
+                    <MessageSquare className="h-5 w-5 text-primary" />
+                  </div>
+                  <div className="flex-1">
+                    <h4 className="font-semibold text-sm mb-1 group-hover:text-primary transition-colors">
+                      Law Chatbot
+                    </h4>
+                    <p className="text-xs text-muted-foreground">
+                      Get instant legal guidance
+                    </p>
+                  </div>
+                  <ArrowRight className="h-4 w-4 text-muted-foreground group-hover:text-primary group-hover:translate-x-1 transition-all" />
+                </div>
+              </Link>
+
+              <Link
+                href="/bias-checker"
+                className="group relative overflow-hidden rounded-lg border bg-card p-5 hover:shadow-lg transition-all duration-300 hover:border-primary/50"
+              >
+                <div className="flex items-start gap-3">
+                  <div className="rounded-lg bg-primary/10 p-2.5 group-hover:bg-primary/20 transition-colors">
+                    <ShieldCheck className="h-5 w-5 text-primary" />
+                  </div>
+                  <div className="flex-1">
+                    <h4 className="font-semibold text-sm mb-1 group-hover:text-primary transition-colors">
+                      Bias Checker
+                    </h4>
+                    <p className="text-xs text-muted-foreground">
+                      Analyze legal documents
+                    </p>
+                  </div>
+                  <ArrowRight className="h-4 w-4 text-muted-foreground group-hover:text-primary group-hover:translate-x-1 transition-all" />
+                </div>
+              </Link>
+
+              <Link
+                href="/resources"
+                className="group relative overflow-hidden rounded-lg border bg-card p-5 hover:shadow-lg transition-all duration-300 hover:border-primary/50"
+              >
+                <div className="flex items-start gap-3">
+                  <div className="rounded-lg bg-primary/10 p-2.5 group-hover:bg-primary/20 transition-colors">
+                    <BookOpen className="h-5 w-5 text-primary" />
+                  </div>
+                  <div className="flex-1">
+                    <h4 className="font-semibold text-sm mb-1 group-hover:text-primary transition-colors">
+                      Legal Resources
+                    </h4>
+                    <p className="text-xs text-muted-foreground">
+                      Browse legal information
+                    </p>
+                  </div>
+                  <ArrowRight className="h-4 w-4 text-muted-foreground group-hover:text-primary group-hover:translate-x-1 transition-all" />
+                </div>
+              </Link>
+            </div>
+          </div>
+          {/* <div>
+            <h3 className="font-semibold mb-4">Support</h3>
+            <ul className="space-y-2 text-sm">
+              <li>
+                <Link href="#" className="text-muted-foreground hover:text-primary">
+                  Contact Us
+                </Link>
+              </li>
+              <li>
+                <Link href="#" className="text-muted-foreground hover:text-primary">
+                  Privacy Policy
+                </Link>
+              </li>
+              <li>
+                <Link href="#" className="text-muted-foreground hover:text-primary">
+                  Terms of Service
+                </Link>
+              </li>
+            </ul>
+          </div> */}
+          {/* <div className="bg-primary/5 p-6 rounded-xl border border-primary/10">
+            <h3 className="font-semibold mb-2">Need Urgent Help?</h3>
+            <p className="text-xs text-muted-foreground mb-4">
+              Contact our 24/7 legal helpline for immediate assistance.
+            </p>
+            <Button size="sm" className="w-full">
+              Call Hotline
+            </Button>
+          </div> */}
+        </div>
+        <div className="mt-12 pt-8 border-t text-center text-xs text-muted-foreground">
+          © {new Date().getFullYear()} Know Your Rights Nepal. All rights reserved.
+        </div>
+      </div>
+    </footer>
+  )
+}

Frontend/components/layout/navbar.tsx

@@ -0,0 +1,192 @@
+"use client"
+
+import Link from "next/link"
+import { useRouter } from "next/navigation"
+import { useAuth } from "@/context/auth-context"
+import { Button } from "@/components/ui/button"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
+import { Avatar, AvatarFallback } from "@/components/ui/avatar"
+import { Menu, X, Scale, LogOut, LayoutDashboard, MessageSquare, Search, User } from "lucide-react"
+import { useState } from "react"
+import { clearAuthData } from "@/lib/auth-utils"
+
+export function Navbar() {
+  const { user, logout } = useAuth()
+  const [isMenuOpen, setIsMenuOpen] = useState(false)
+  const router = useRouter()
+
+  const handleLogout = () => {
+    // Clear all auth data from localStorage first
+    clearAuthData()
+    // Update auth context
+    logout()
+    // Force navigation to landing page
+    window.location.href = "/"
+  }
+
+  const handleHomeClick = (e: React.MouseEvent) => {
+    if (user) {
+      e.preventDefault()
+      router.push("/dashboard")
+    }
+  }
+
+  // Define navigation items based on authentication status
+  const getNavItems = () => {
+    if (user) {
+      // Show only protected features when logged in
+      return [
+        { label: "Chatbot", href: "/chatbot", icon: MessageSquare },
+        { label: "Bias Checker", href: "/bias-checker", icon: Search },
+        { label: "Letter Generator", href: "/letter-generator" },
+      ]
+    } else {
+      // Show only Home when not logged in
+      return [
+        { label: "Home", href: "/" },
+      ]
+    }
+  }
+
+  const navItems = getNavItems()
+
+  return (
+    <nav className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <div className="container flex h-16 items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Link
+            href={user ? "/dashboard" : "/"}
+            onClick={handleHomeClick}
+            className="flex items-center gap-2 text-primary"
+          >
+            <Scale className="h-6 w-6" />
+            <span className="font-bold text-lg tracking-tight">Know Your Rights Nepal</span>
+          </Link>
+        </div>
+
+        {/* Desktop Navigation */}
+        <div className="hidden md:flex items-center gap-6">
+          {navItems.map((item) => (
+            <Link key={item.href} href={item.href} className="text-sm font-medium transition-colors hover:text-primary">
+              {item.label}
+            </Link>
+          ))}
+
+          {user ? (
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="ghost" className="relative h-8 w-8 rounded-full focus-visible:ring-0 focus-visible:ring-offset-0 hover:bg-transparent">
+                  <Avatar className="h-8 w-8 border hover:border-primary transition-colors">
+                    <AvatarFallback className="bg-primary text-primary-foreground">
+                      {user?.name ? user.name.slice(0, 2).toUpperCase() : 'U'}
+                    </AvatarFallback>
+                  </Avatar>
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="w-56">
+                <div className="px-4 py-3 border-b">
+                  <div className="font-medium">{user?.name}</div>
+                  <div className="text-xs text-muted-foreground">{user?.email}</div>
+                </div>
+                <DropdownMenuItem asChild>
+                  <Link href="/dashboard">
+                    <LayoutDashboard className="mr-2 h-4 w-4" />
+                    Dashboard
+                  </Link>
+                </DropdownMenuItem>
+                <DropdownMenuItem asChild>
+                  <Link href="/profile">
+                    <User className="mr-2 h-4 w-4" />
+                    Profile
+                  </Link>
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={handleLogout} className="text-destructive">
+                  <LogOut className="mr-2 h-4 w-4" />
+                  Logout
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          ) : (
+            <div className="flex items-center gap-2">
+              <Button asChild variant="ghost">
+                <Link href="/login">Login</Link>
+              </Button>
+              <Button asChild className="bg-primary hover:bg-primary/90">
+                <Link href="/register">Register</Link>
+              </Button>
+            </div>
+          )}
+        </div>
+
+        {/* Mobile Navigation */}
+        <div className="md:hidden flex items-center">
+          <Button variant="ghost" size="icon" onClick={() => setIsMenuOpen(!isMenuOpen)}>
+            {isMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
+          </Button>
+        </div>
+      </div>
+
+      {isMenuOpen && (
+        <div className="md:hidden border-t bg-background p-4 animate-in fade-in slide-in-from-top-2">
+          <div className="flex flex-col gap-4">
+            {navItems.map((item) => (
+              <Link
+                key={item.href}
+                href={item.href}
+                onClick={() => setIsMenuOpen(false)}
+                className="text-sm font-medium p-2 hover:bg-muted rounded-md"
+              >
+                {item.label}
+              </Link>
+            ))}
+
+            {user ? (
+              <>
+                <Link
+                  href="/dashboard"
+                  onClick={() => setIsMenuOpen(false)}
+                  className="text-sm font-medium p-2 hover:bg-muted rounded-md flex items-center gap-2"
+                >
+                  <LayoutDashboard className="h-4 w-4" />
+                  Dashboard
+                </Link>
+                <Link
+                  href="/profile"
+                  onClick={() => setIsMenuOpen(false)}
+                  className="text-sm font-medium p-2 hover:bg-muted rounded-md flex items-center gap-2"
+                >
+                  <User className="h-4 w-4" />
+                  Profile
+                </Link>
+                <Button
+                  onClick={() => {
+                    setIsMenuOpen(false)
+                    handleLogout()
+                  }}
+                  variant="destructive"
+                  className="w-full"
+                >
+                  <LogOut className="mr-2 h-4 w-4" />
+                  Logout
+                </Button>
+              </>
+            ) : (
+              <>
+                <Button asChild variant="outline" className="w-full">
+                  <Link href="/login" onClick={() => setIsMenuOpen(false)}>
+                    Login
+                  </Link>
+                </Button>
+                <Button asChild className="w-full bg-primary">
+                  <Link href="/register" onClick={() => setIsMenuOpen(false)}>
+                    Register
+                  </Link>
+                </Button>
+              </>
+            )}
+          </div>
+        </div>
+      )}
+    </nav>
+  )
+}

Frontend/components/theme-provider.tsx

@@ -0,0 +1,11 @@
+'use client'
+
+import * as React from 'react'
+import {
+  ThemeProvider as NextThemesProvider,
+  type ThemeProviderProps,
+} from 'next-themes'
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}

Frontend/components/ui/accordion.tsx

@@ -0,0 +1,66 @@
+'use client'
+
+import * as React from 'react'
+import * as AccordionPrimitive from '@radix-ui/react-accordion'
+import { ChevronDownIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn('border-b last:border-b-0', className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      {...props}
+    >
+      <div className={cn('pt-0 pb-4', className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

Frontend/components/ui/alert-dialog.tsx

@@ -0,0 +1,157 @@
+'use client'
+
+import * as React from 'react'
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
+
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/components/ui/button'
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={cn(
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+          className,
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn('text-lg font-semibold', className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+  return (
+    <AlertDialogPrimitive.Action
+      className={cn(buttonVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+  return (
+    <AlertDialogPrimitive.Cancel
+      className={cn(buttonVariants({ variant: 'outline' }), className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}