Merge pull request #2 from ramailkk/qamar/frontend-integration

.gitignore

@@ -0,0 +1,31 @@
+# python specific ignores
+__pycache__/
+*.py[cod]
+*$py.class
+
+# Virtual environments
+.venv/
+venv/
+env/
+ENV/
+
+# Environment and local secrets
+.env
+.env.*
+!.env.example
+
+# Build and packaging artifacts
+build/
+dist/
+*.egg-info/
+.eggs/
+
+# Caches and tooling
+.pytest_cache/
+.mypy_cache/
+.ruff_cache/
+.ipynb_checkpoints/
+
+# IDE/editor
+.vscode/
+.idea/

api.py

@@ -0,0 +1,200 @@
+# Fastapi endpoints defined here
+import os
+import time
+from typing import Any
+
+from dotenv import load_dotenv
+from fastapi import FastAPI, HTTPException
+from fastapi.middleware.cors import CORSMiddleware
+from pydantic import BaseModel, Field
+
+from vector_db import get_pinecone_index
+from retriever.retriever import HybridRetriever
+from retriever.generator import RAGGenerator
+from retriever.processor import ChunkProcessor
+
+from models.llama_3_8b import Llama3_8B
+from models.mistral_7b import Mistral_7b
+from models.qwen_2_5 import Qwen2_5
+from models.deepseek_v3 import DeepSeek_V3
+from models.tiny_aya import TinyAya
+
+# Reuse the same query-only helper for loading BM25 corpus from Pinecone metadata.
+from query_only import _load_chunks_from_pinecone
+
+
+class PredictRequest(BaseModel):
+    query: str = Field(..., min_length=1, description="User query text")
+    model: str = Field(default="Llama-3-8B", description="Model name key")
+    top_k: int = Field(default=10, ge=1, le=50)
+    final_k: int = Field(default=5, ge=1, le=20)
+    mode: str = Field(default="hybrid", description="semantic | bm25 | hybrid")
+    rerank_strategy: str = Field(default="cross-encoder", description="cross-encoder | rrf | none")
+
+
+class PredictResponse(BaseModel):
+    model: str
+    answer: str
+    contexts: list[str]
+    metrics: dict[str, float]
+
+
+
+# Fastapi setup
+# Fastapi allows us to define python based endpoint
+# That is called from the react based frontend
+
+app = FastAPI(title="RAG-AS3 API", version="0.1.0")
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+
+state: dict[str, Any] = {}
+
+
+def _build_models(hf_token: str) -> dict[str, Any]:
+    return {
+        "Llama-3-8B": Llama3_8B(token=hf_token),
+        "Mistral-7B": Mistral_7b(token=hf_token),
+        "Qwen-2.5": Qwen2_5(token=hf_token),
+        "DeepSeek-V3": DeepSeek_V3(token=hf_token),
+        "TinyAya": TinyAya(token=hf_token),
+    }
+
+
+def _resolve_model(name: str, models: dict[str, Any]) -> tuple[str, Any]:
+    aliases = {
+        "llama": "Llama-3-8B",
+        "mistral": "Mistral-7B",
+        "qwen": "Qwen-2.5",
+        "deepseek": "DeepSeek-V3",
+        "tinyaya": "TinyAya",
+    }
+    model_key = aliases.get(name.lower(), name)
+    if model_key not in models:
+        allowed = ", ".join(models.keys())
+        raise HTTPException(status_code=400, detail=f"Unknown model '{name}'. Use one of: {allowed}")
+    return model_key, models[model_key]
+
+
+# On startup most of the time is spent loading chunks from pinecone
+# This is done because bm25 needs the enture corpus in memory
+# we want to avoid loading it on every query, so loading it at startup is better
+
+# COuld improve this as not ideal to load entire corpus in memory
+# currently it wont scale well
+
+@app.on_event("startup")
+def startup_event() -> None:
+    load_dotenv()
+
+    hf_token = os.getenv("HF_TOKEN")
+    pinecone_api_key = os.getenv("PINECONE_API_KEY")
+
+    if not pinecone_api_key:
+        raise RuntimeError("PINECONE_API_KEY not found in environment variables")
+    if not hf_token:
+        raise RuntimeError("HF_TOKEN not found in environment variables")
+
+    index_name = "arxiv-index"
+    embed_model_name = "all-MiniLM-L6-v2"
+
+    startup_start = time.perf_counter()
+
+    index = get_pinecone_index(
+        api_key=pinecone_api_key,
+        index_name=index_name,
+        dimension=384,
+        metric="cosine",
+    )
+
+    chunks_start = time.perf_counter()
+    final_chunks = _load_chunks_from_pinecone(index)
+    chunk_load_time = time.perf_counter() - chunks_start
+
+    if not final_chunks:
+        raise RuntimeError("No chunks found in Pinecone metadata. Run indexing once before API mode.")
+
+    proc = ChunkProcessor(model_name=embed_model_name, verbose=False)
+    retriever = HybridRetriever(final_chunks, proc.encoder, verbose=False)
+    rag_engine = RAGGenerator()
+    models = _build_models(hf_token)
+
+    state["index"] = index
+    state["retriever"] = retriever
+    state["rag_engine"] = rag_engine
+    state["models"] = models
+
+    startup_time = time.perf_counter() - startup_start
+    print(
+        f"API startup complete | chunks={len(final_chunks)} | "
+        f"chunk_load={chunk_load_time:.3f}s | total={startup_time:.3f}s"
+    )
+
+
+@app.get("/health")
+def health() -> dict[str, str]:
+    ready = all(k in state for k in ("index", "retriever", "rag_engine", "models"))
+    return {"status": "ok" if ready else "starting"}
+
+
+
+# Predict endpoint that takes a query and returns an answer along with contexts and metrics
+# is called from the frontend when user clicks submits
+# Also resolves model based on user selection
+@app.post("/predict", response_model=PredictResponse)
+def predict(payload: PredictRequest) -> PredictResponse:
+    if not state:
+        raise HTTPException(status_code=503, detail="Service not initialized yet")
+
+    query = payload.query.strip()
+    if not query:
+        raise HTTPException(status_code=400, detail="Query cannot be empty")
+
+    total_start = time.perf_counter()
+
+    retriever: HybridRetriever = state["retriever"]
+    index = state["index"]
+    rag_engine: RAGGenerator = state["rag_engine"]
+    models: dict[str, Any] = state["models"]
+
+    model_name, model_instance = _resolve_model(payload.model, models)
+
+    retrieval_start = time.perf_counter()
+    contexts = retriever.search(
+        query,
+        index,
+        mode=payload.mode,
+        rerank_strategy=payload.rerank_strategy,
+        use_mmr=True,
+        top_k=payload.top_k,
+        final_k=payload.final_k,
+        verbose=False,
+    )
+    retrieval_time = time.perf_counter() - retrieval_start
+
+    if not contexts:
+        raise HTTPException(status_code=404, detail="No context chunks retrieved for this query")
+
+    generation_start = time.perf_counter()
+    answer = rag_engine.get_answer(model_instance, query, contexts, temperature=0.1)
+    generation_time = time.perf_counter() - generation_start
+
+    total_time = time.perf_counter() - total_start
+
+    return PredictResponse(
+        model=model_name,
+        answer=answer,
+        contexts=contexts,
+        metrics={
+            "retrieval_s": round(retrieval_time, 3),
+            "generation_s": round(generation_time, 3),
+            "total_s": round(total_time, 3),
+        },
+    )

frontend/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

frontend/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

frontend/app/globals.css

@@ -0,0 +1,141 @@
+@import "tailwindcss";
+
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+:root {
+  --radius: 0.625rem;
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.129 0.042 264.695);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.129 0.042 264.695);
+  --primary: oklch(0.208 0.042 265.755);
+  --primary-foreground: oklch(0.984 0.003 247.858);
+  --secondary: oklch(0.968 0.007 247.896);
+  --secondary-foreground: oklch(0.208 0.042 265.755);
+  --muted: oklch(0.968 0.007 247.896);
+  --muted-foreground: oklch(0.554 0.046 257.417);
+  --accent: oklch(0.968 0.007 247.896);
+  --accent-foreground: oklch(0.208 0.042 265.755);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.929 0.013 255.508);
+  --input: oklch(0.929 0.013 255.508);
+  --ring: oklch(0.704 0.04 256.788);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.984 0.003 247.858);
+  --sidebar-foreground: oklch(0.129 0.042 264.695);
+  --sidebar-primary: oklch(0.208 0.042 265.755);
+  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-accent: oklch(0.968 0.007 247.896);
+  --sidebar-accent-foreground: oklch(0.208 0.042 265.755);
+  --sidebar-border: oklch(0.929 0.013 255.508);
+  --sidebar-ring: oklch(0.704 0.04 256.788);
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.129 0.042 264.695);
+}
+
+.dark {
+  --background: oklch(0.129 0.042 264.695);
+  --foreground: oklch(0.984 0.003 247.858);
+  --card: oklch(0.208 0.042 265.755);
+  --card-foreground: oklch(0.984 0.003 247.858);
+  --popover: oklch(0.208 0.042 265.755);
+  --popover-foreground: oklch(0.984 0.003 247.858);
+  --primary: oklch(0.929 0.013 255.508);
+  --primary-foreground: oklch(0.208 0.042 265.755);
+  --secondary: oklch(0.279 0.041 260.031);
+  --secondary-foreground: oklch(0.984 0.003 247.858);
+  --muted: oklch(0.279 0.041 260.031);
+  --muted-foreground: oklch(0.704 0.04 256.788);
+  --accent: oklch(0.279 0.041 260.031);
+  --accent-foreground: oklch(0.984 0.003 247.858);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.551 0.027 264.364);
+  --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.208 0.042 265.755);
+  --sidebar-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-accent: oklch(0.279 0.041 260.031);
+  --sidebar-accent-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.551 0.027 264.364);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+/*
+ Added these lines to animate the gradient text.
+*/
+
+@keyframes gradient {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+.animate-gradient {
+  animation: gradient 8s linear infinite;
+}

frontend/app/layout.tsx

@@ -0,0 +1,38 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Fluora Care",
+  description: "An MLops Project",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      {/*
+        Background color: bg-gray-950 (dark gray shade instead of pure black)
+      */}
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased bg-gray-950 text-white`}
+        suppressHydrationWarning
+      >
+        {children}
+      </body>
+    </html>
+  );
+}

frontend/app/learn-more/page.tsx

@@ -0,0 +1,5 @@
+import AIAssistantUI from "@/components/AIAssistantUI";
+// Hello
+export default function Page() {
+  return <AIAssistantUI />
+}

frontend/app/page.tsx

@@ -0,0 +1,110 @@
+// File: app/page.tsx
+
+'use client';
+
+import Aurora from '@/components/Aurora';
+import GradientText from '@/components/GradientText';
+import Link from 'next/link';
+import Header from '@/components/Header';
+import { motion } from "motion/react";
+
+export default function Home() {
+  const buttonClass = "bg-black/30 backdrop-blur-md border border-green-500/30 text-green-400 font-semibold py-4 px-12 rounded-full shadow-[0_0_15px_rgba(74,222,128,0.1)] hover:shadow-[0_0_30px_rgba(74,222,128,0.4)] hover:border-green-400 hover:scale-105 transition-all duration-300 ease-out min-w-[200px] flex justify-center items-center tracking-wide";
+
+  return (
+    <main className="relative flex min-h-screen flex-col items-center justify-start overflow-hidden bg-black selection:bg-green-500/30">
+
+      {/* Header Wrapper */}
+      <div className="w-full z-50">
+        <Header />
+      </div>
+
+      {/* Background Layer */}
+      <div className="absolute inset-0 z-0">
+        <Aurora
+          colorStops={["#1E4620", "#1A5D3B", "#2A9D8F"]}
+          blend={0.5}
+          amplitude={1.0}
+          speed={0.5}
+        />
+        {/* Futuristic Grid Overlay */}
+        <div className="absolute inset-0 bg-[linear-gradient(to_right,#222_1px,transparent_1px),linear-gradient(to_bottom,#222_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)] opacity-20 pointer-events-none"></div>
+      </div>
+
+      {/* Main Content Container - Aligned with max-width */}
+      <div className="relative z-10 flex flex-col items-center justify-center w-full max-w-7xl mx-auto px-6 pt-32 md:pt-48 text-center">
+
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, ease: "easeOut" }}
+        >
+          <h1 className="mb-8 tracking-tighter">
+            <GradientText
+              colors={["#40ffaa", "#4079ff", "#40ffaa", "#4079ff", "#40ffaa"]}
+              animationSpeed={8}
+              showBorder={false}
+              className="text-6xl font-bold md:text-8xl lg:text-9xl drop-shadow-2xl"
+            >
+              Fluora Care
+            </GradientText>
+          </h1>
+        </motion.div>
+
+        <motion.p
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.2, ease: "easeOut" }}
+          className="max-w-3xl text-xl md:text-2xl text-neutral-300 mb-12 leading-relaxed font-light"
+        >
+          Experience the future of botanical intelligence.
+          <br className="hidden md:block" />
+          Advanced computer vision for precise plant health diagnostics.
+        </motion.p>
+
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.4, ease: "easeOut" }}
+          className="flex flex-wrap items-center justify-center gap-6"
+        >
+          <Link href="/try-it-out" className={buttonClass}>
+            Learn More
+          </Link>
+          <Link href="/learn-more" className={buttonClass}>
+            Try It Out
+          </Link>
+        </motion.div>
+
+        {/* Stats / Features Footer to fill space */}
+        <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 1, delay: 0.8 }}
+            className="mt-32 grid grid-cols-1 md:grid-cols-3 gap-12 text-center border-t border-neutral-800/50 pt-10 w-full max-w-4xl"
+        >
+            <div className="flex flex-col items-center group cursor-default">
+                <span className="text-4xl font-bold text-[#40ffaa] mb-2 drop-shadow-[0_0_10px_rgba(64,255,170,0.5)]">99.86%</span>
+                <span className="text-sm text-neutral-400 uppercase tracking-widest font-medium">Accuracy</span>
+            </div>
+            <div className="flex flex-col items-center group cursor-default">
+                <span className="text-4xl font-bold text-white mb-2 drop-shadow-[0_0_10px_rgba(255,255,255,0.5)]">29 Diseases</span>
+                <span className="text-sm text-neutral-400 uppercase tracking-widest font-medium">Detection</span>
+            </div>
+            <div className="flex flex-col items-center group cursor-default">
+                <GradientText
+                    colors={["#40ffaa", "#ef4444", "#166534", "#4079ff", "#40ffaa"]}
+                    animationSpeed={16}
+                    showBorder={false}
+                    className="text-4xl font-bold mb-2 drop-shadow-[0_0_10px_rgba(64,121,255,0.5)] rounded-lg px-4 py-2"
+                >
+                    RAG Powered
+                </GradientText>
+                <span className="text-sm text-neutral-400 uppercase tracking-widest font-medium">Chatbot</span>
+            </div>
+        </motion.div>
+
+      </div>
+    </main>
+  );
+}

frontend/app/try-it-out/page.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import Header from "@/components/Header";
+
+export default function LearnMorePage() {
+  return (
+    <div className="min-h-screen bg-black text-white flex flex-col items-center justify-start overflow-hidden">
+       <div className="w-full z-50">
+        <Header />
+      </div>
+
+      <div className="flex-1 flex flex-col items-center justify-center p-4 w-full max-w-4xl mt-20">
+        <div className="text-center space-y-8">
+          <h1 className="text-5xl md:text-7xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-green-400 to-blue-500">
+            Coming Soon
+          </h1>
+          <p className="text-xl text-neutral-400 max-w-2xl mx-auto">
+            We are building a comprehensive guide to our botanical intelligence system.
+            Check back soon for detailed documentation, case studies, and technical deep dives.
+          </p>
+
+          <div className="p-8 border border-neutral-800 rounded-2xl bg-neutral-900/50 backdrop-blur-sm">
+            <p className="text-sm text-neutral-500 uppercase tracking-widest mb-4">What to expect</p>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-left">
+              <div className="p-4 bg-neutral-900 rounded-lg">
+                <h3 className="text-green-400 font-semibold mb-2">Architecture</h3>
+                <p className="text-neutral-400 text-sm">Deep dive into our RAG + CNN hybrid model structure.</p>
+              </div>
+              <div className="p-4 bg-neutral-900 rounded-lg">
+                <h3 className="text-blue-400 font-semibold mb-2">Dataset</h3>
+                <p className="text-neutral-400 text-sm">Exploration of the 50k+ image dataset used for training.</p>
+              </div>
+              <div className="p-4 bg-neutral-900 rounded-lg">
+                <h3 className="text-purple-400 font-semibold mb-2">API Docs</h3>
+                <p className="text-neutral-400 text-sm">Full reference for integrating Flora Care into your apps.</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/components.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {
+    "@reui": "https://reui.io/r/{name}.json",
+    "@aceternity": "https://ui.aceternity.com/registry/{name}.json"
+  }
+}

frontend/components/AIAssistantUI.jsx

@@ -0,0 +1,409 @@
+"use client"
+
+import React, { useEffect, useMemo, useRef, useState } from "react"
+import { Calendar, LayoutGrid, MoreHorizontal } from "lucide-react"
+import Sidebar from "./Sidebar"
+import Header from "./Header_Chatbot"
+import ChatPane from "./ChatPane"
+import GhostIconButton from "./GhostIconButton"
+import ThemeToggle from "./ThemeToggle"
+import { INITIAL_CONVERSATIONS, INITIAL_TEMPLATES, INITIAL_FOLDERS } from "./mockData"
+
+const MODEL_OPTIONS = ["Llama-3-8B", "Mistral-7B", "Qwen-2.5", "DeepSeek-V3", "TinyAya"]
+
+export default function AIAssistantUI() {
+  const [theme, setTheme] = useState(() => {
+    const saved = typeof window !== "undefined" && localStorage.getItem("theme")
+    if (saved) return saved
+    if (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches)
+      return "dark"
+    return "light"
+  })
+
+  useEffect(() => {
+    try {
+      if (theme === "dark") document.documentElement.classList.add("dark")
+      else document.documentElement.classList.remove("dark")
+      document.documentElement.setAttribute("data-theme", theme)
+      document.documentElement.style.colorScheme = theme
+      localStorage.setItem("theme", theme)
+    } catch {}
+  }, [theme])
+
+  useEffect(() => {
+    try {
+      const media = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)")
+      if (!media) return
+      const listener = (e) => {
+        const saved = localStorage.getItem("theme")
+        if (!saved) setTheme(e.matches ? "dark" : "light")
+      }
+      media.addEventListener("change", listener)
+      return () => media.removeEventListener("change", listener)
+    } catch {}
+  }, [])
+
+  const [sidebarOpen, setSidebarOpen] = useState(false)
+  const [collapsed, setCollapsed] = useState(() => {
+    try {
+      const raw = localStorage.getItem("sidebar-collapsed")
+      return raw ? JSON.parse(raw) : { pinned: true, recent: false, folders: true, templates: true }
+    } catch {
+      return { pinned: true, recent: false, folders: true, templates: true }
+    }
+  })
+  useEffect(() => {
+    try {
+      localStorage.setItem("sidebar-collapsed", JSON.stringify(collapsed))
+    } catch {}
+  }, [collapsed])
+
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(() => {
+    try {
+      const saved = localStorage.getItem("sidebar-collapsed-state")
+      return saved ? JSON.parse(saved) : false
+    } catch {
+      return false
+    }
+  })
+
+  useEffect(() => {
+    try {
+      localStorage.setItem("sidebar-collapsed-state", JSON.stringify(sidebarCollapsed))
+    } catch {}
+  }, [sidebarCollapsed])
+
+  const [conversations, setConversations] = useState(INITIAL_CONVERSATIONS)
+  const [selectedId, setSelectedId] = useState(null)
+  const [templates, setTemplates] = useState(INITIAL_TEMPLATES)
+  const [folders, setFolders] = useState(INITIAL_FOLDERS)
+
+  const [query, setQuery] = useState("")
+  const searchRef = useRef(null)
+  const [selectedModel, setSelectedModel] = useState("Llama-3-8B")
+
+  const [isThinking, setIsThinking] = useState(false)
+  const [thinkingConvId, setThinkingConvId] = useState(null)
+
+  useEffect(() => {
+    const onKey = (e) => {
+      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "n") {
+        e.preventDefault()
+        createNewChat()
+      }
+      if (!e.metaKey && !e.ctrlKey && e.key === "/") {
+        const tag = document.activeElement?.tagName?.toLowerCase()
+        if (tag !== "input" && tag !== "textarea") {
+          e.preventDefault()
+          searchRef.current?.focus()
+        }
+      }
+      if (e.key === "Escape" && sidebarOpen) setSidebarOpen(false)
+    }
+    window.addEventListener("keydown", onKey)
+    return () => window.removeEventListener("keydown", onKey)
+  }, [sidebarOpen, conversations])
+
+  const initialized = useRef(false)
+
+  useEffect(() => {
+    if (!initialized.current && !selectedId) {
+      initialized.current = true
+      createNewChat()
+    }
+  }, [])
+
+  const filtered = useMemo(() => {
+    if (!query.trim()) return conversations
+    const q = query.toLowerCase()
+    return conversations.filter((c) => c.title.toLowerCase().includes(q) || c.preview.toLowerCase().includes(q))
+  }, [conversations, query])
+
+  const pinned = filtered.filter((c) => c.pinned).sort((a, b) => (a.updatedAt < b.updatedAt ? 1 : -1))
+
+  const recent = filtered
+    .filter((c) => !c.pinned)
+    .sort((a, b) => (a.updatedAt < b.updatedAt ? 1 : -1))
+    .slice(0, 10)
+
+  const folderCounts = React.useMemo(() => {
+    const map = Object.fromEntries(folders.map((f) => [f.name, 0]))
+    for (const c of conversations) if (map[c.folder] != null) map[c.folder] += 1
+    return map
+  }, [conversations, folders])
+
+  function togglePin(id) {
+    setConversations((prev) => prev.map((c) => (c.id === id ? { ...c, pinned: !c.pinned } : c)))
+  }
+
+  function deleteChat(id) {
+    setConversations((prev) => prev.filter((c) => c.id !== id))
+    if (selectedId === id) {
+      setSelectedId(null)
+    }
+  }
+
+  function renameChat(id, nextTitle) {
+    const trimmed = (nextTitle || "").trim()
+    if (!trimmed) return
+
+    setConversations((prev) =>
+      prev.map((c) =>
+        c.id === id
+          ? {
+              ...c,
+              title: trimmed,
+              updatedAt: new Date().toISOString(),
+            }
+          : c,
+      ),
+    )
+  }
+
+  function createNewChat() {
+    const id = Math.random().toString(36).slice(2)
+    const item = {
+      id,
+      title: "New Chat",
+      updatedAt: new Date().toISOString(),
+      messageCount: 1,
+      preview: "Ask a question about your indexed knowledge base...",
+      pinned: false,
+      folder: "Work Projects",
+      messages: [
+        {
+          id: Math.random().toString(36).slice(2),
+          role: "assistant",
+          content: "Hello! Ask me anything about your indexed documents and I will retrieve context before answering.",
+          createdAt: new Date().toISOString(),
+        }
+      ],
+    }
+    setConversations((prev) => [item, ...prev])
+    setSelectedId(id)
+    setSidebarOpen(false)
+  }
+
+  function createFolder() {
+    const name = prompt("Folder name")
+    if (!name) return
+    if (folders.some((f) => f.name.toLowerCase() === name.toLowerCase())) return alert("Folder already exists.")
+    setFolders((prev) => [...prev, { id: Math.random().toString(36).slice(2), name }])
+  }
+
+  async function sendMessage(convId, content) {
+    if (!content.trim()) return
+    const now = new Date().toISOString()
+    const userMsg = { id: Math.random().toString(36).slice(2), role: "user", content, createdAt: now }
+
+    setConversations((prev) =>
+      prev.map((c) => {
+        if (c.id !== convId) return c
+        const msgs = [...(c.messages || []), userMsg]
+        return {
+          ...c,
+          messages: msgs,
+          updatedAt: now,
+          messageCount: msgs.length,
+          preview: content.slice(0, 80),
+        }
+      }),
+    )
+
+    setIsThinking(true)
+    setThinkingConvId(convId)
+
+    const currentConvId = convId
+
+    // Prefer same-origin proxy to avoid browser CORS/network issues in development.
+    const primaryUrl = "/api/proxy"
+    const fallbackUrl = process.env.NEXT_PUBLIC_API_URL || "http://127.0.0.1:8000"
+
+    const fetchOptions = {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        query: content,
+        model: selectedModel,
+      }),
+    }
+
+    try {
+      let res
+
+      try {
+        res = await fetch(`${primaryUrl}/predict`, fetchOptions)
+      } catch {}
+
+      if (!res || !res.ok) {
+        // Retry direct backend URL if proxy is not reachable.
+        res = await fetch(`${fallbackUrl}/predict`, fetchOptions)
+      }
+
+      if (!res.ok) {
+        const details = await res.text().catch(() => "")
+        throw new Error(`Prediction failed (${res.status}) ${details}`.trim())
+      }
+
+      const data = await res.json()
+
+      setConversations((prev) =>
+        prev.map((c) => {
+          if (c.id !== currentConvId) return c
+          const asstMsg = {
+            id: Math.random().toString(36).slice(2),
+            role: "assistant",
+            content: data.answer || "Sorry, I encountered an error.",
+            createdAt: new Date().toISOString(),
+          }
+          const msgs = [...(c.messages || []), asstMsg]
+          return {
+            ...c,
+            messages: msgs,
+            updatedAt: new Date().toISOString(),
+            messageCount: msgs.length,
+            preview: (asstMsg.content || "").slice(0, 80),
+          }
+        }),
+      )
+    } catch (err) {
+      console.error("predict request failed:", err)
+      setConversations((prev) =>
+        prev.map((c) => {
+          if (c.id !== currentConvId) return c
+          const errorMsg = {
+            id: Math.random().toString(36).slice(2),
+            role: "assistant",
+            content: "Sorry, I could not reach the backend. Start FastAPI and verify frontend .env.local URLs, then restart Next.js dev server.",
+            createdAt: new Date().toISOString(),
+          }
+          const msgs = [...(c.messages || []), errorMsg]
+          return {
+            ...c,
+            messages: msgs,
+            updatedAt: new Date().toISOString(),
+            messageCount: msgs.length,
+            preview: errorMsg.content.slice(0, 80),
+          }
+        }),
+      )
+    } finally {
+      setIsThinking(false)
+      setThinkingConvId(null)
+    }
+  }
+
+  function editMessage(convId, messageId, newContent) {
+    const now = new Date().toISOString()
+    setConversations((prev) =>
+      prev.map((c) => {
+        if (c.id !== convId) return c
+        const msgs = (c.messages || []).map((m) =>
+          m.id === messageId ? { ...m, content: newContent, editedAt: now } : m,
+        )
+        return {
+          ...c,
+          messages: msgs,
+          preview: msgs[msgs.length - 1]?.content?.slice(0, 80) || c.preview,
+        }
+      }),
+    )
+  }
+
+  function resendMessage(convId, messageId) {
+    const conv = conversations.find((c) => c.id === convId)
+    const msg = conv?.messages?.find((m) => m.id === messageId)
+    if (!msg) return
+    sendMessage(convId, msg.content)
+  }
+
+  function pauseThinking() {
+    setIsThinking(false)
+    setThinkingConvId(null)
+  }
+
+  function handleUseTemplate(template) {
+    // This will be passed down to the Composer component
+    // The Composer will handle inserting the template content
+    if (composerRef.current) {
+      composerRef.current.insertTemplate(template.content)
+    }
+  }
+
+  const composerRef = useRef(null)
+
+  const selected = conversations.find((c) => c.id === selectedId) || null
+
+  return (
+    <div className="h-screen w-full bg-zinc-50 text-zinc-900 dark:bg-zinc-950 dark:text-zinc-100">
+      <div className="md:hidden sticky top-0 z-40 flex items-center gap-2 border-b border-zinc-200/60 bg-white/80 px-3 py-2 backdrop-blur dark:border-zinc-800 dark:bg-zinc-900/70">
+        <div className="ml-1 flex items-center gap-2 text-sm font-semibold tracking-tight">
+          <span className="inline-flex h-4 w-4 items-center justify-center">✱</span> RAG Assistant
+        </div>
+        <div className="ml-auto flex items-center gap-2">
+          <GhostIconButton label="Schedule">
+            <Calendar className="h-4 w-4" />
+          </GhostIconButton>
+          <GhostIconButton label="Apps">
+            <LayoutGrid className="h-4 w-4" />
+          </GhostIconButton>
+          <GhostIconButton label="More">
+            <MoreHorizontal className="h-4 w-4" />
+          </GhostIconButton>
+          <ThemeToggle theme={theme} setTheme={setTheme} />
+        </div>
+      </div>
+
+      <div className="flex h-[calc(100vh-0px)] w-full">
+        <Sidebar
+          open={sidebarOpen}
+          onClose={() => setSidebarOpen(false)}
+          theme={theme}
+          setTheme={setTheme}
+          collapsed={collapsed}
+          setCollapsed={setCollapsed}
+          sidebarCollapsed={sidebarCollapsed}
+          setSidebarCollapsed={setSidebarCollapsed}
+          conversations={conversations}
+          pinned={pinned}
+          recent={recent}
+          folders={folders}
+          folderCounts={folderCounts}
+          selectedId={selectedId}
+          onSelect={(id) => setSelectedId(id)}
+          togglePin={togglePin}
+          deleteChat={deleteChat}
+          renameChat={renameChat}
+          query={query}
+          setQuery={setQuery}
+          searchRef={searchRef}
+          createFolder={createFolder}
+          createNewChat={createNewChat}
+          templates={templates}
+          setTemplates={setTemplates}
+          onUseTemplate={handleUseTemplate}
+        />
+
+        <main className="relative flex min-w-0 flex-1 flex-col">
+          <Header
+            createNewChat={createNewChat}
+            sidebarCollapsed={sidebarCollapsed}
+            setSidebarOpen={setSidebarOpen}
+            selectedModel={selectedModel}
+            onModelChange={setSelectedModel}
+            modelOptions={MODEL_OPTIONS}
+          />
+          <ChatPane
+            ref={composerRef}
+            conversation={selected}
+            onSend={(content) => selected && sendMessage(selected.id, content)}
+            onEditMessage={(messageId, newContent) => selected && editMessage(selected.id, messageId, newContent)}
+            onResendMessage={(messageId) => selected && resendMessage(selected.id, messageId)}
+            isThinking={isThinking && thinkingConvId === selected?.id}
+            onPauseThinking={pauseThinking}
+          />
+        </main>
+      </div>
+    </div>
+  )
+}

frontend/components/Aurora.tsx

@@ -0,0 +1,209 @@
+import { useEffect, useRef } from 'react';
+import { Renderer, Program, Mesh, Color, Triangle } from 'ogl';
+
+const VERT = `#version 300 es
+in vec2 position;
+void main() {
+  gl_Position = vec4(position, 0.0, 1.0);
+}
+`;
+
+const FRAG = `#version 300 es
+precision highp float;
+
+uniform float uTime;
+uniform float uAmplitude;
+uniform vec3 uColorStops[3];
+uniform vec2 uResolution;
+uniform float uBlend;
+
+out vec4 fragColor;
+
+vec3 permute(vec3 x) {
+  return mod(((x * 34.0) + 1.0) * x, 289.0);
+}
+
+float snoise(vec2 v){
+  const vec4 C = vec4(
+      0.211324865405187, 0.366025403784439,
+      -0.577350269189626, 0.024390243902439
+  );
+  vec2 i  = floor(v + dot(v, C.yy));
+  vec2 x0 = v - i + dot(i, C.xx);
+  vec2 i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
+  vec4 x12 = x0.xyxy + C.xxzz;
+  x12.xy -= i1;
+  i = mod(i, 289.0);
+
+  vec3 p = permute(
+      permute(i.y + vec3(0.0, i1.y, 1.0))
+    + i.x + vec3(0.0, i1.x, 1.0)
+  );
+
+  vec3 m = max(
+      0.5 - vec3(
+          dot(x0, x0),
+          dot(x12.xy, x12.xy),
+          dot(x12.zw, x12.zw)
+      ),
+      0.0
+  );
+  m = m * m;
+  m = m * m;
+
+  vec3 x = 2.0 * fract(p * C.www) - 1.0;
+  vec3 h = abs(x) - 0.5;
+  vec3 ox = floor(x + 0.5);
+  vec3 a0 = x - ox;
+  m *= 1.79284291400159 - 0.85373472095314 * (a0*a0 + h*h);
+
+  vec3 g;
+  g.x  = a0.x  * x0.x  + h.x  * x0.y;
+  g.yz = a0.yz * x12.xz + h.yz * x12.yw;
+  return 130.0 * dot(m, g);
+}
+
+struct ColorStop {
+  vec3 color;
+  float position;
+};
+
+#define COLOR_RAMP(colors, factor, finalColor) {              \
+  int index = 0;                                            \
+  for (int i = 0; i < 2; i++) {                               \
+     ColorStop currentColor = colors[i];                    \
+     bool isInBetween = currentColor.position <= factor;    \
+     index = int(mix(float(index), float(i), float(isInBetween))); \
+  }                                                         \
+  ColorStop currentColor = colors[index];                   \
+  ColorStop nextColor = colors[index + 1];                  \
+  float range = nextColor.position - currentColor.position; \
+  float lerpFactor = (factor - currentColor.position) / range; \
+  finalColor = mix(currentColor.color, nextColor.color, lerpFactor); \
+}
+
+void main() {
+  vec2 uv = gl_FragCoord.xy / uResolution;
+
+  ColorStop colors[3];
+  colors[0] = ColorStop(uColorStops[0], 0.0);
+  colors[1] = ColorStop(uColorStops[1], 0.5);
+  colors[2] = ColorStop(uColorStops[2], 1.0);
+
+  vec3 rampColor;
+  COLOR_RAMP(colors, uv.x, rampColor);
+
+  float height = snoise(vec2(uv.x * 2.0 + uTime * 0.1, uTime * 0.25)) * 0.5 * uAmplitude;
+  height = exp(height);
+  height = (uv.y * 2.0 - height + 0.2);
+  float intensity = 0.6 * height;
+
+  float midPoint = 0.20;
+  float auroraAlpha = smoothstep(midPoint - uBlend * 0.5, midPoint + uBlend * 0.5, intensity);
+
+  vec3 auroraColor = intensity * rampColor;
+
+  fragColor = vec4(auroraColor * auroraAlpha, auroraAlpha);
+}
+`;
+
+interface AuroraProps {
+  colorStops?: string[];
+  amplitude?: number;
+  blend?: number;
+  time?: number;
+  speed?: number;
+}
+
+export default function Aurora(props: AuroraProps) {
+  const { colorStops = ['#5227FF', '#7cff67', '#5227FF'], amplitude = 1.0, blend = 0.5 } = props;
+  const propsRef = useRef<AuroraProps>(props);
+  propsRef.current = props;
+
+  const ctnDom = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const ctn = ctnDom.current;
+    if (!ctn) return;
+
+    const renderer = new Renderer({
+      alpha: true,
+      premultipliedAlpha: true,
+      antialias: true
+    });
+    const gl = renderer.gl;
+    gl.clearColor(0, 0, 0, 0);
+    gl.enable(gl.BLEND);
+    gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+    gl.canvas.style.backgroundColor = 'transparent';
+
+    let program: Program | undefined;
+
+    function resize() {
+      if (!ctn) return;
+      const width = ctn.offsetWidth;
+      const height = ctn.offsetHeight;
+      renderer.setSize(width, height);
+      if (program) {
+        program.uniforms.uResolution.value = [width, height];
+      }
+    }
+    window.addEventListener('resize', resize);
+
+    const geometry = new Triangle(gl);
+    if (geometry.attributes.uv) {
+      delete geometry.attributes.uv;
+    }
+
+    const colorStopsArray = colorStops.map(hex => {
+      const c = new Color(hex);
+      return [c.r, c.g, c.b];
+    });
+
+    program = new Program(gl, {
+      vertex: VERT,
+      fragment: FRAG,
+      uniforms: {
+        uTime: { value: 0 },
+        uAmplitude: { value: amplitude },
+        uColorStops: { value: colorStopsArray },
+        uResolution: { value: [ctn.offsetWidth, ctn.offsetHeight] },
+        uBlend: { value: blend }
+      }
+    });
+
+    const mesh = new Mesh(gl, { geometry, program });
+    ctn.appendChild(gl.canvas);
+
+    let animateId = 0;
+    const update = (t: number) => {
+      animateId = requestAnimationFrame(update);
+      const { time = t * 0.01, speed = 1.0 } = propsRef.current;
+      if (program) {
+        program.uniforms.uTime.value = time * speed * 0.1;
+        program.uniforms.uAmplitude.value = propsRef.current.amplitude ?? 1.0;
+        program.uniforms.uBlend.value = propsRef.current.blend ?? blend;
+        const stops = propsRef.current.colorStops ?? colorStops;
+        program.uniforms.uColorStops.value = stops.map((hex: string) => {
+          const c = new Color(hex);
+          return [c.r, c.g, c.b];
+        });
+        renderer.render({ scene: mesh });
+      }
+    };
+    animateId = requestAnimationFrame(update);
+
+    resize();
+
+    return () => {
+      cancelAnimationFrame(animateId);
+      window.removeEventListener('resize', resize);
+      if (ctn && gl.canvas.parentNode === ctn) {
+        ctn.removeChild(gl.canvas);
+      }
+      gl.getExtension('WEBGL_lose_context')?.loseContext();
+    };
+  }, [amplitude]);
+
+  return <div ref={ctnDom} className="w-full h-full" />;
+}

frontend/components/ChatPane.jsx

@@ -0,0 +1,199 @@
+"use client"
+
+import { useState, forwardRef, useImperativeHandle, useRef } from "react"
+import { RefreshCw, Check, X, Square } from "lucide-react"
+import Message from "./Message"
+import Composer from "./Composer"
+import { cls, timeAgo } from "./utils"
+
+function ThinkingMessage({ onPause }) {
+  return (
+    <Message role="assistant">
+      <div className="flex items-center gap-3">
+        <div className="flex items-center gap-1">
+          <div className="h-2 w-2 animate-bounce rounded-full bg-zinc-400 [animation-delay:-0.3s]"></div>
+          <div className="h-2 w-2 animate-bounce rounded-full bg-zinc-400 [animation-delay:-0.15s]"></div>
+          <div className="h-2 w-2 animate-bounce rounded-full bg-zinc-400"></div>
+        </div>
+        <span className="text-sm text-zinc-500">RAG assistant is thinking...</span>
+        <button
+          onClick={onPause}
+          className="ml-auto inline-flex items-center gap-1 rounded-full border border-zinc-300 px-2 py-1 text-xs text-zinc-600 hover:bg-zinc-50 dark:border-zinc-700 dark:text-zinc-400 dark:hover:bg-zinc-800"
+        >
+          <Square className="h-3 w-3" /> Pause
+        </button>
+      </div>
+    </Message>
+  )
+}
+
+const ChatPane = forwardRef(function ChatPane(
+  {
+    conversation,
+    onSend,
+    onEditMessage,
+    onResendMessage,
+    isThinking,
+    onPauseThinking,
+  },
+  ref,
+) {
+  const [editingId, setEditingId] = useState(null)
+  const [draft, setDraft] = useState("")
+  const [busy, setBusy] = useState(false)
+  const composerRef = useRef(null)
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      insertTemplate: (templateContent) => {
+        composerRef.current?.insertTemplate(templateContent)
+      },
+    }),
+    [],
+  )
+
+  if (!conversation) {
+    return (
+      <div className="flex h-full flex-col items-center justify-center bg-zinc-50 dark:bg-zinc-950">
+        <div className="flex flex-col items-center gap-4">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="200"
+            height="200"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            className="text-green-500/20 dark:text-green-400/20"
+          >
+            {/* Cute Potato Body */}
+            <path d="M12 4c-5.5 0-8.5 4-8.5 9c0 5.5 3.5 8.5 8.5 8.5c5.5 0 8.5-3.5 8.5-8.5c0-5.5-3-8.5-8.5-8.5z" />
+            {/* Eyes */}
+            <path d="M9 11h.01" strokeWidth="3" />
+            <path d="M15 11h.01" strokeWidth="3" />
+            {/* Smile */}
+            <path d="M10 14a2.5 2.5 0 0 0 4 0" />
+            {/* Blush/Cheeks (Optional details for cuteness) */}
+            <path d="M7.5 12.5a1 1 0 0 1 0 .5" opacity="0.5" />
+            <path d="M16.5 12.5a1 1 0 0 1 0 .5" opacity="0.5" />
+          </svg>
+          <p className="text-lg font-medium text-zinc-500 dark:text-zinc-400">
+            Select a chat to get started
+          </p>
+        </div>
+      </div>
+    )
+  }
+
+  const tags = ["Certified", "Personalized", "Experienced", "Helpful"]
+  const messages = Array.isArray(conversation.messages) ? conversation.messages : []
+  const count = messages.length || conversation.messageCount || 0
+
+  function startEdit(m) {
+    setEditingId(m.id)
+    setDraft(m.content)
+  }
+  function cancelEdit() {
+    setEditingId(null)
+    setDraft("")
+  }
+  function saveEdit() {
+    if (!editingId) return
+    onEditMessage?.(editingId, draft)
+    cancelEdit()
+  }
+  function saveAndResend() {
+    if (!editingId) return
+    onEditMessage?.(editingId, draft)
+    onResendMessage?.(editingId)
+    cancelEdit()
+  }
+
+  return (
+    <div className="flex h-full min-h-0 flex-1 flex-col">
+      <div className="flex-1 space-y-5 overflow-y-auto px-4 py-6 sm:px-8">
+        <div className="mb-2 text-3xl font-serif tracking-tight sm:text-4xl md:text-5xl">
+          <span className="block leading-[1.05] font-sans text-2xl">{conversation.title}</span>
+        </div>
+        <div className="mb-4 text-sm text-zinc-500 dark:text-zinc-400">
+          Updated {timeAgo(conversation.updatedAt)} · {count} messages
+        </div>
+
+        <div className="mb-6 flex flex-wrap gap-2 border-b border-zinc-200 pb-5 dark:border-zinc-800">
+          {tags.map((t) => (
+            <span
+              key={t}
+              className="inline-flex items-center rounded-full border border-zinc-200 px-3 py-1 text-xs text-zinc-700 dark:border-zinc-800 dark:text-zinc-200"
+            >
+              {t}
+            </span>
+          ))}
+        </div>
+
+        {messages.length === 0 ? (
+          <div className="rounded-xl border border-dashed border-zinc-300 p-6 text-sm text-zinc-500 dark:border-zinc-700 dark:text-zinc-400">
+            No messages yet. Say hello to start.
+          </div>
+        ) : (
+          <>
+            {messages.map((m) => (
+              <div key={m.id} className="space-y-2">
+                {editingId === m.id ? (
+                  <div className={cls("rounded-2xl border p-2", "border-zinc-200 dark:border-zinc-800")}>
+                    <textarea
+                      value={draft}
+                      onChange={(e) => setDraft(e.target.value)}
+                      className="w-full resize-y rounded-xl bg-transparent p-2 text-sm outline-none"
+                      rows={3}
+                    />
+                    <div className="mt-2 flex items-center gap-2">
+                      <button
+                        onClick={saveEdit}
+                        className="inline-flex items-center gap-1 rounded-full bg-zinc-900 px-3 py-1.5 text-xs text-white dark:bg-white dark:text-zinc-900"
+                      >
+                        <Check className="h-3.5 w-3.5" /> Save
+                      </button>
+                      <button
+                        onClick={saveAndResend}
+                        className="inline-flex items-center gap-1 rounded-full border px-3 py-1.5 text-xs"
+                      >
+                        <RefreshCw className="h-3.5 w-3.5" /> Save & Resend
+                      </button>
+                      <button
+                        onClick={cancelEdit}
+                        className="inline-flex items-center gap-1 rounded-full px-3 py-1.5 text-xs"
+                      >
+                        <X className="h-3.5 w-3.5" /> Cancel
+                      </button>
+                    </div>
+                  </div>
+                ) : (
+                  <Message role={m.role}>
+                    <div className="whitespace-pre-wrap">{m.content}</div>
+                  </Message>
+                )}
+              </div>
+            ))}
+            {isThinking && <ThinkingMessage onPause={onPauseThinking} />}
+          </>
+        )}
+      </div>
+
+      <Composer
+        ref={composerRef}
+        onSend={async (text) => {
+          if (!text.trim()) return
+          setBusy(true)
+          await onSend?.(text)
+          setBusy(false)
+        }}
+        busy={busy}
+      />
+    </div>
+  )
+})
+
+export default ChatPane

frontend/components/Composer.jsx

@@ -0,0 +1,149 @@
+"use client"
+
+import { useRef, useState, forwardRef, useImperativeHandle, useEffect } from "react"
+import { Send, Loader2, Mic } from "lucide-react"
+import { cls } from "./utils"
+
+const Composer = forwardRef(function Composer({ onSend, busy }, ref) {
+  const [value, setValue] = useState("")
+  const [sending, setSending] = useState(false)
+  const [isFocused, setIsFocused] = useState(false)
+  const [lineCount, setLineCount] = useState(1)
+  const inputRef = useRef(null)
+
+  useEffect(() => {
+    if (inputRef.current) {
+      const textarea = inputRef.current
+      const lineHeight = 18
+      const minHeight = 32
+
+      textarea.style.height = "auto"
+      const scrollHeight = textarea.scrollHeight
+      const calculatedLines = Math.max(1, Math.floor((scrollHeight - 16) / lineHeight))
+
+      setLineCount(calculatedLines)
+
+      if (calculatedLines <= 6) {
+        textarea.style.height = `${Math.max(minHeight, scrollHeight)}px`
+        textarea.style.overflowY = "hidden"
+      } else {
+        textarea.style.height = `${minHeight + 5 * lineHeight}px`
+        textarea.style.overflowY = "auto"
+      }
+    }
+  }, [value])
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      insertTemplate: (templateContent) => {
+        setValue((prev) => {
+          const newValue = prev ? `${prev}\n\n${templateContent}` : templateContent
+          setTimeout(() => {
+            inputRef.current?.focus()
+            const length = newValue.length
+            inputRef.current?.setSelectionRange(length, length)
+          }, 0)
+          return newValue
+        })
+      },
+      focus: () => {
+        inputRef.current?.focus()
+      },
+    }),
+    [],
+  )
+
+  async function handleSend() {
+    if (!value.trim() || sending) return
+    const outgoingText = value
+    setValue("")
+    setSending(true)
+    try {
+      await onSend?.(outgoingText)
+      inputRef.current?.focus()
+    } catch (err) {
+      // Restore text so user can retry without retyping if request fails.
+      setValue(outgoingText)
+      throw err
+    } finally {
+      setSending(false)
+    }
+  }
+
+  return (
+    <div className="border-t border-zinc-200/60 p-4 dark:border-zinc-800">
+      <div
+        className={cls(
+          "mx-auto flex flex-col rounded-2xl border bg-white shadow-sm dark:bg-zinc-950 transition-all duration-200",
+          "max-w-3xl border-zinc-300 dark:border-zinc-700 p-2",
+        )}
+      >
+        <div className="flex-1 relative">
+          <textarea
+            ref={inputRef}
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            onFocus={() => setIsFocused(true)}
+            onBlur={() => setIsFocused(false)}
+            placeholder="Ask a question about your documents..."
+            rows={1}
+            className={cls(
+              "w-full resize-none bg-transparent text-sm outline-none placeholder:text-zinc-400 transition-all duration-200",
+              "px-0 py-1.5 min-h-[32px] text-left",
+            )}
+            style={{
+              height: "auto",
+              overflowY: lineCount > 6 ? "auto" : "hidden",
+            }}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && !e.shiftKey) {
+                e.preventDefault()
+                handleSend()
+              }
+            }}
+          />
+        </div>
+
+        <div className="flex items-center justify-end mt-2 gap-3">
+          <div className="flex items-center gap-1 shrink-0">
+            <button
+              className="inline-flex items-center justify-center rounded-full p-2 text-zinc-500 hover:bg-zinc-100 hover:text-zinc-700 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-zinc-300 transition-colors"
+              title="Voice input"
+            >
+              <Mic className="h-4 w-4" />
+            </button>
+            <button
+              onClick={handleSend}
+              disabled={sending || busy || !value.trim()}
+              className={cls(
+                "inline-flex shrink-0 items-center gap-2 rounded-full bg-zinc-900 px-3 py-2 text-sm font-medium text-white shadow-sm transition hover:bg-zinc-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 dark:bg-white dark:text-zinc-900",
+                (sending || busy || !value.trim()) && "opacity-50 cursor-not-allowed",
+              )}
+            >
+              {sending || busy ? <Loader2 className="h-4 w-4 animate-spin" /> : <Send className="h-4 w-4" />}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div className="mx-auto mt-2 max-w-3xl px-1 text-[11px] text-zinc-500 dark:text-zinc-400">
+        Press{" "}
+        <kbd className="rounded border border-zinc-300 bg-zinc-50 px-1 dark:border-zinc-600 dark:bg-zinc-800">
+          Enter
+        </kbd>{" "}
+        to send ·{" "}
+        <kbd className="rounded border border-zinc-300 bg-zinc-50 px-1 dark:border-zinc-600 dark:bg-zinc-800">
+          Shift
+        </kbd>
+        +
+        <kbd className="rounded border border-zinc-300 bg-zinc-50 px-1 dark:border-zinc-600 dark:bg-zinc-800">
+          Enter
+        </kbd>{" "}
+        for newline
+      </div>
+    </div>
+  )
+})
+
+export default Composer

frontend/components/ConversationRow.jsx

@@ -0,0 +1,131 @@
+"use client"
+import { useState } from "react"
+import { Pencil, Star, Trash2 } from "lucide-react"
+import { cls } from "./utils"
+
+export default function ConversationRow({ data, active, onSelect, onTogglePin, onDelete, onRename, showMeta }) {
+  const [isRenaming, setIsRenaming] = useState(false)
+  const [draftTitle, setDraftTitle] = useState(data.title)
+
+  // This helper function handles keyboard accessibility.
+  // It allows the user to trigger the onSelect function by pressing Enter or Space.
+  const handleKeyDown = (e) => {
+    if (isRenaming) return
+    if (e.key === 'Enter' || e.key === ' ') {
+      // Prevent the default action (like scrolling the page on spacebar press)
+      e.preventDefault();
+      onSelect();
+    }
+  };
+
+  const beginRename = (e) => {
+    e.stopPropagation()
+    setDraftTitle(data.title)
+    setIsRenaming(true)
+  }
+
+  const commitRename = () => {
+    const trimmed = draftTitle.trim()
+    if (trimmed && trimmed !== data.title) {
+      onRename?.(trimmed)
+    }
+    setIsRenaming(false)
+  }
+
+  const cancelRename = () => {
+    setDraftTitle(data.title)
+    setIsRenaming(false)
+  }
+
+  return (
+    <div className="group relative">
+      {/* 1. Changed <button> to <div> */}
+      <div
+        onClick={onSelect}
+        // 2. Added accessibility attributes and keyboard handler
+        role="button"
+        tabIndex="0"
+        onKeyDown={handleKeyDown}
+        // 3. Added 'cursor-pointer' to the className for visual feedback
+        className={cls(
+          "-mx-1 flex w-[calc(100%+8px)] items-center gap-2 rounded-lg px-2 py-2 text-left cursor-pointer",
+          active
+            ? "bg-zinc-100 text-zinc-900 dark:bg-zinc-800/60 dark:text-zinc-100"
+            : "hover:bg-zinc-100 dark:hover:bg-zinc-800",
+        )}
+        title={data.title}
+      >
+        <div className="min-w-0 flex-1">
+          <div className="flex items-center gap-2">
+            {isRenaming ? (
+              <input
+                autoFocus
+                value={draftTitle}
+                onChange={(e) => setDraftTitle(e.target.value)}
+                onClick={(e) => e.stopPropagation()}
+                onBlur={commitRename}
+                onKeyDown={(e) => {
+                  e.stopPropagation()
+                  if (e.key === "Enter") {
+                    e.preventDefault()
+                    commitRename()
+                  }
+                  if (e.key === "Escape") {
+                    e.preventDefault()
+                    cancelRename()
+                  }
+                }}
+                className="w-full rounded-md border border-zinc-300 bg-white px-2 py-1 text-sm font-medium tracking-tight outline-none focus:border-blue-500 dark:border-zinc-700 dark:bg-zinc-900"
+                aria-label="Rename chat"
+              />
+            ) : (
+              <span className="truncate text-sm font-medium tracking-tight">{data.title}</span>
+            )}
+          </div>
+        </div>
+
+        <div className="flex items-center gap-1">
+          {/* Rename Button */}
+          <button
+            onClick={beginRename}
+            title="Rename chat"
+            className="rounded-md p-1 text-zinc-500 opacity-0 transition group-hover:opacity-100 hover:bg-zinc-200/50 dark:text-zinc-300 dark:hover:bg-zinc-700/60"
+            aria-label="Rename conversation"
+          >
+            <Pencil className="h-4 w-4" />
+          </button>
+
+          {/* Delete Button */}
+          <button
+            onClick={(e) => {
+              e.stopPropagation()
+              onDelete()
+            }}
+            title="Delete chat"
+            className="rounded-md p-1 text-zinc-500 opacity-0 transition group-hover:opacity-100 hover:bg-red-100 hover:text-red-600 dark:text-zinc-400 dark:hover:bg-red-900/30 dark:hover:text-red-400"
+            aria-label="Delete conversation"
+          >
+            <Trash2 className="h-4 w-4" />
+          </button>
+
+          {/* Pin Button */}
+          <button
+            onClick={(e) => {
+              e.stopPropagation()
+              onTogglePin()
+            }}
+            title={data.pinned ? "Unpin" : "Pin"}
+            className="rounded-md p-1 text-zinc-500 opacity-0 transition group-hover:opacity-100 hover:bg-zinc-200/50 dark:text-zinc-300 dark:hover:bg-zinc-700/60"
+            aria-label={data.pinned ? "Unpin conversation" : "Pin conversation"}
+          >
+            {data.pinned ? (
+              <Star className="h-4 w-4 fill-zinc-800 text-zinc-800 dark:fill-zinc-200 dark:text-zinc-200" />
+            ) : (
+              <Star className="h-4 w-4" />
+            )}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

frontend/components/CreateFolderModal.jsx

@@ -0,0 +1,90 @@
+"use client"
+import { motion, AnimatePresence } from "framer-motion"
+import { X, Lightbulb } from "lucide-react"
+import { useState } from "react"
+
+export default function CreateFolderModal({ isOpen, onClose, onCreateFolder }) {
+  const [folderName, setFolderName] = useState("")
+
+  const handleSubmit = (e) => {
+    e.preventDefault()
+    if (folderName.trim()) {
+      onCreateFolder(folderName.trim())
+      setFolderName("")
+      onClose()
+    }
+  }
+
+  const handleCancel = () => {
+    setFolderName("")
+    onClose()
+  }
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <>
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="fixed inset-0 z-50 bg-black/60"
+            onClick={handleCancel}
+          />
+          <motion.div
+            initial={{ opacity: 0, scale: 0.95 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0, scale: 0.95 }}
+            className="fixed left-1/2 top-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-2xl border border-zinc-200 bg-white p-6 shadow-xl dark:border-zinc-800 dark:bg-zinc-900"
+          >
+            <div className="flex items-center justify-between mb-4">
+              <h2 className="text-lg font-semibold">Folder name</h2>
+              <button onClick={handleCancel} className="rounded-lg p-1 hover:bg-zinc-100 dark:hover:bg-zinc-800">
+                <X className="h-5 w-5" />
+              </button>
+            </div>
+
+            <form onSubmit={handleSubmit}>
+              <input
+                type="text"
+                value={folderName}
+                onChange={(e) => setFolderName(e.target.value)}
+                placeholder="E.g. Marketing Projects"
+                className="w-full rounded-lg border border-zinc-300 px-4 py-3 text-sm outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 dark:border-zinc-700 dark:bg-zinc-800"
+                autoFocus
+              />
+
+              <div className="mt-4 flex items-start gap-3 rounded-lg bg-zinc-50 p-4 dark:bg-zinc-800/50">
+                <Lightbulb className="h-5 w-5 text-zinc-500 mt-0.5 shrink-0" />
+                <div className="text-sm text-zinc-600 dark:text-zinc-400">
+                  <div className="font-medium mb-1">What's a folder?</div>
+                  <div>
+                    Folders keep chats, files, and custom instructions in one place. Use them for ongoing work, or just
+                    to keep things tidy.
+                  </div>
+                </div>
+              </div>
+
+              <div className="flex gap-3 mt-6">
+                <button
+                  type="button"
+                  onClick={handleCancel}
+                  className="flex-1 rounded-lg border border-zinc-300 px-4 py-2 text-sm font-medium hover:bg-zinc-50 dark:border-zinc-700 dark:hover:bg-zinc-800"
+                >
+                  Cancel
+                </button>
+                <button
+                  type="submit"
+                  disabled={!folderName.trim()}
+                  className="flex-1 rounded-lg bg-zinc-900 px-4 py-2 text-sm font-medium text-white hover:bg-zinc-800 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-white dark:text-zinc-900 dark:hover:bg-zinc-100"
+                >
+                  Create folder
+                </button>
+              </div>
+            </form>
+          </motion.div>
+        </>
+      )}
+    </AnimatePresence>
+  )
+}

frontend/components/CreateTemplateModal.jsx

@@ -0,0 +1,134 @@
+"use client"
+import { motion, AnimatePresence } from "framer-motion"
+import { X, Lightbulb } from "lucide-react"
+import { useState } from "react"
+
+export default function CreateTemplateModal({ isOpen, onClose, onCreateTemplate, editingTemplate = null }) {
+  const [templateName, setTemplateName] = useState(editingTemplate?.name || "")
+  const [templateContent, setTemplateContent] = useState(editingTemplate?.content || "")
+
+  const isEditing = !!editingTemplate
+
+  const handleSubmit = (e) => {
+    e.preventDefault()
+    if (templateName.trim() && templateContent.trim()) {
+      const templateData = {
+        name: templateName.trim(),
+        content: templateContent.trim(),
+        snippet: templateContent.trim().slice(0, 100) + (templateContent.trim().length > 100 ? "..." : ""),
+        createdAt: editingTemplate?.createdAt || new Date().toISOString(),
+        updatedAt: new Date().toISOString(),
+      }
+
+      if (isEditing) {
+        onCreateTemplate({ ...templateData, id: editingTemplate.id })
+      } else {
+        onCreateTemplate(templateData)
+      }
+
+      handleCancel()
+    }
+  }
+
+  const handleCancel = () => {
+    setTemplateName("")
+    setTemplateContent("")
+    onClose()
+  }
+
+  // Update form when editingTemplate changes
+  useState(() => {
+    if (editingTemplate) {
+      setTemplateName(editingTemplate.name || "")
+      setTemplateContent(editingTemplate.content || "")
+    }
+  }, [editingTemplate])
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <>
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="fixed inset-0 z-50 bg-black/60"
+            onClick={handleCancel}
+          />
+          <motion.div
+            initial={{ opacity: 0, scale: 0.95 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0, scale: 0.95 }}
+            className="fixed left-1/2 top-1/2 z-50 w-full max-w-2xl -translate-x-1/2 -translate-y-1/2 rounded-2xl border border-zinc-200 bg-white p-6 shadow-xl dark:border-zinc-800 dark:bg-zinc-900"
+          >
+            <div className="flex items-center justify-between mb-4">
+              <h2 className="text-lg font-semibold">{isEditing ? "Edit Template" : "Create Template"}</h2>
+              <button onClick={handleCancel} className="rounded-lg p-1 hover:bg-zinc-100 dark:hover:bg-zinc-800">
+                <X className="h-5 w-5" />
+              </button>
+            </div>
+
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div>
+                <label htmlFor="templateName" className="block text-sm font-medium mb-2">
+                  Template Name
+                </label>
+                <input
+                  id="templateName"
+                  type="text"
+                  value={templateName}
+                  onChange={(e) => setTemplateName(e.target.value)}
+                  placeholder="E.g. Email Response, Code Review, Meeting Notes"
+                  className="w-full rounded-lg border border-zinc-300 px-4 py-3 text-sm outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 dark:border-zinc-700 dark:bg-zinc-800"
+                  autoFocus
+                />
+              </div>
+
+              <div>
+                <label htmlFor="templateContent" className="block text-sm font-medium mb-2">
+                  Template Content
+                </label>
+                <textarea
+                  id="templateContent"
+                  value={templateContent}
+                  onChange={(e) => setTemplateContent(e.target.value)}
+                  placeholder="Enter your template content here. This will be inserted into the chat when you use the template."
+                  rows={8}
+                  className="w-full rounded-lg border border-zinc-300 px-4 py-3 text-sm outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 dark:border-zinc-700 dark:bg-zinc-800 resize-none"
+                />
+              </div>
+
+              <div className="flex items-start gap-3 rounded-lg bg-zinc-50 p-4 dark:bg-zinc-800/50">
+                <Lightbulb className="h-5 w-5 text-zinc-500 mt-0.5 shrink-0" />
+                <div className="text-sm text-zinc-600 dark:text-zinc-400">
+                  <div className="font-medium mb-1">Pro tip</div>
+                  <div>
+                    Templates are perfect for frequently used prompts, instructions, or conversation starters. They'll
+                    be inserted directly into your chat input when selected.
+                  </div>
+                </div>
+              </div>
+
+              <div className="flex gap-3 pt-2">
+                <button
+                  type="button"
+                  onClick={handleCancel}
+                  className="flex-1 rounded-lg border border-zinc-300 px-4 py-2 text-sm font-medium hover:bg-zinc-50 dark:border-zinc-700 dark:hover:bg-zinc-800"
+                >
+                  Cancel
+                </button>
+                <button
+                  type="submit"
+                  disabled={!templateName.trim() || !templateContent.trim()}
+                  className="flex-1 rounded-lg bg-zinc-900 px-4 py-2 text-sm font-medium text-white hover:bg-zinc-800 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-white dark:text-zinc-900 dark:hover:bg-zinc-100"
+                >
+                  {isEditing ? "Update Template" : "Create Template"}
+                </button>
+              </div>
+            </form>
+          </motion.div>
+        </>
+      )}
+    </AnimatePresence>
+  )
+}

frontend/components/FolderRow.jsx

@@ -0,0 +1,147 @@
+"use client"
+
+import { useState, useRef, useEffect } from "react"
+import { FolderIcon, ChevronRight, ChevronDown, MoreHorizontal } from "lucide-react"
+import ConversationRow from "./ConversationRow"
+import { motion, AnimatePresence } from "framer-motion"
+
+export default function FolderRow({
+  name,
+  count,
+  conversations = [],
+  selectedId,
+  onSelect,
+  togglePin,
+  onDeleteFolder,
+  onRenameFolder,
+}) {
+  const [isExpanded, setIsExpanded] = useState(false)
+  const [showMenu, setShowMenu] = useState(false)
+  const menuRef = useRef(null)
+
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (menuRef.current && !menuRef.current.contains(event.target)) {
+        setShowMenu(false)
+      }
+    }
+
+    if (showMenu) {
+      document.addEventListener("mousedown", handleClickOutside)
+    }
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside)
+    }
+  }, [showMenu])
+
+  const handleToggle = () => {
+    setIsExpanded(!isExpanded)
+  }
+
+  const handleRename = () => {
+    const newName = prompt(`Rename folder "${name}" to:`, name)
+    if (newName && newName.trim() && newName !== name) {
+      onRenameFolder?.(name, newName.trim())
+    }
+    setShowMenu(false)
+  }
+
+  const handleDelete = () => {
+    if (
+      confirm(
+        `Are you sure you want to delete the folder "${name}"? This will move all conversations to the root level.`,
+      )
+    ) {
+      onDeleteFolder?.(name)
+    }
+    setShowMenu(false)
+  }
+
+  return (
+    <div className="group">
+      <div className="flex items-center justify-between rounded-lg px-2 py-2 text-sm hover:bg-zinc-100 dark:hover:bg-zinc-800">
+        <button onClick={handleToggle} className="flex items-center gap-2 flex-1 text-left">
+          {isExpanded ? (
+            <ChevronDown className="h-4 w-4 text-zinc-500" />
+          ) : (
+            <ChevronRight className="h-4 w-4 text-zinc-500" />
+          )}
+          <FolderIcon className="h-4 w-4" />
+          <span className="truncate">{name}</span>
+        </button>
+
+        <div className="flex items-center gap-1">
+          <span className="rounded-md bg-zinc-100 px-1.5 py-0.5 text-[11px] text-zinc-600 dark:bg-zinc-800 dark:text-zinc-300">
+            {count}
+          </span>
+
+          <div className="relative" ref={menuRef}>
+            <button
+              onClick={(e) => {
+                e.stopPropagation()
+                setShowMenu(!showMenu)
+              }}
+              className="opacity-0 group-hover:opacity-100 p-1 rounded hover:bg-zinc-200 dark:hover:bg-zinc-700 transition-opacity"
+            >
+              <MoreHorizontal className="h-3 w-3" />
+            </button>
+
+            <AnimatePresence>
+              {showMenu && (
+                <motion.div
+                  initial={{ opacity: 0, scale: 0.95 }}
+                  animate={{ opacity: 1, scale: 1 }}
+                  exit={{ opacity: 0, scale: 0.95 }}
+                  className="absolute right-0 top-full mt-1 w-32 rounded-lg border border-zinc-200 bg-white py-1 shadow-lg dark:border-zinc-800 dark:bg-zinc-900 z-[100]"
+                >
+                  <button
+                    onClick={handleRename}
+                    className="w-full px-3 py-1.5 text-left text-xs hover:bg-zinc-100 dark:hover:bg-zinc-800"
+                  >
+                    Rename
+                  </button>
+                  <button
+                    onClick={handleDelete}
+                    className="w-full px-3 py-1.5 text-left text-xs text-red-600 hover:bg-zinc-100 dark:hover:bg-zinc-800"
+                  >
+                    Delete
+                  </button>
+                </motion.div>
+              )}
+            </AnimatePresence>
+          </div>
+        </div>
+      </div>
+
+      <AnimatePresence>
+        {isExpanded && (
+          <motion.div
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: "auto", opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            className="overflow-hidden"
+          >
+            <div className="ml-6 space-y-1 py-1">
+              {conversations.map((conversation) => (
+                <ConversationRow
+                  key={conversation.id}
+                  data={conversation}
+                  active={conversation.id === selectedId}
+                  onSelect={() => onSelect(conversation.id)}
+                  onTogglePin={() => togglePin(conversation.id)}
+                  showMeta
+                />
+              ))}
+              {conversations.length === 0 && (
+                <div className="px-2 py-2 text-xs text-zinc-500 dark:text-zinc-400">
+                  No conversations in this folder
+                </div>
+              )}
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  )
+}

frontend/components/GhostIconButton.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+export default function GhostIconButton({ label, children }) {
+  return (
+    <button
+      className="hidden rounded-full border border-zinc-200 bg-white/70 p-2 text-zinc-700 hover:bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 md:inline-flex dark:border-zinc-800 dark:bg-zinc-900/70 dark:text-zinc-200"
+      aria-label={label}
+      title={label}
+    >
+      {children}
+    </button>
+  );
+}

frontend/components/GradientText.tsx

@@ -0,0 +1,91 @@
+import React, { ReactNode } from 'react';
+import { cn } from '@/lib/utils';
+
+interface GradientTextProps {
+  children: ReactNode;
+  className?: string;
+  colors?: string[];
+  animationSpeed?: number;
+  showBorder?: boolean;
+}
+
+export default function GradientText({
+  children,
+  className = '',
+  colors = ['#ffaa40', '#9c40ff', '#ffaa40'],
+  animationSpeed = 8,
+  showBorder = false
+}: GradientTextProps) {
+  const gradientStyle = {
+    backgroundImage: `linear-gradient(to right, ${colors.join(', ')})`,
+    animationDuration: `${animationSpeed}s`
+  };
+
+  return (
+    <div
+      className={cn(
+        "relative mx-auto flex max-w-fit flex-row items-center justify-center rounded-[1.25rem] font-medium backdrop-blur transition-shadow duration-500 overflow-hidden cursor-pointer",
+        className
+      )}
+    >
+      {showBorder && (
+        <div
+          className="absolute inset-0 bg-cover z-0 pointer-events-none animate-gradient"
+          style={{
+            ...gradientStyle,
+            backgroundSize: '300% 100%'
+          }}
+        >
+          <div
+            className={cn(
+              "absolute inset-0 bg-black rounded-[1.25rem] z-[-1]",
+              // Try to match the parent's roundedness if possible, but for now hardcoded or we need to extract it.
+              // Since showBorder is false for the case in question, this part is less critical right now.
+              // But to be safe, let's just keep it as is or maybe allow overriding via a prop?
+              // For now, I'll leave the inner rounded hardcoded as it matches the default outer.
+              // If the user overrides outer, inner might look weird if showBorder is true.
+              // But showBorder is false for "RAG Powered".
+            )}
+            style={{
+              width: 'calc(100% - 2px)',
+              height: 'calc(100% - 2px)',
+              left: '50%',
+              top: '50%',
+              transform: 'translate(-50%, -50%)'
+            }}
+          ></div>
+        </div>
+      )}
+      <div
+        className="inline-block relative z-2 text-transparent bg-cover animate-gradient"
+        style={{
+          ...gradientStyle,
+          backgroundClip: 'text',
+          WebkitBackgroundClip: 'text',
+          backgroundSize: '300% 100%'
+        }}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
+
+// tailwind.config.js
+// module.exports = {
+//   theme: {
+//     extend: {
+//       keyframes: {
+//         gradient: {
+//           '0%': { backgroundPosition: '0% 50%' },
+//           '50%': { backgroundPosition: '100% 50%' },
+//           '100%': { backgroundPosition: '0% 50%' },
+//         },
+//       },
+//       animation: {
+//         gradient: 'gradient 8s linear infinite'
+//       },
+//     },
+//   },
+//   plugins: [],
+// };

frontend/components/Header.tsx

@@ -0,0 +1,38 @@
+import Link from 'next/link';
+import { GithubButton } from '@/components/ui/github-button'; // Importing your new component
+import { IconLeaf } from '@tabler/icons-react';
+
+export default function Header() {
+  return (
+    <header className="absolute top-0 left-0 z-20 w-full p-4 md:p-6">
+      <nav className="flex w-full items-center justify-between">
+
+        {/* Left Side -- Name of Project  */}
+        <Link
+          href="/"
+          className="flex items-center gap-2 px-4 py-2 rounded-full bg-black border border-gray-700 text-white transition-all hover:bg-neutral-900 hover:border-gray-500 hover:scale-105"
+        >
+          <IconLeaf className="w-5 h-5 text-green-400" />
+          <span className="text-lg font-bold tracking-wider">RAG Assistant</span>
+        </Link>
+
+        {/* Right Side --  Github link */}
+        <GithubButton
+          // see https://reui.io/docs/github-button for more variables
+          initialStars={1}
+          label=""
+          targetStars={5}
+
+          repoUrl="https://github.com/Qar-Raz/mlops_project.git"
+
+          filled = {true}
+          animationDuration= {5}
+          roundStars={true}
+          // below line can be commented out for clear black button --@Qamar
+          className="bg-gray-900/50 border-gray-700 text-gray-200 hover:bg-gray-800/50 hover:border-gray-600"
+        />
+
+      </nav>
+    </header>
+  );
+}

frontend/components/Header_Chatbot.jsx

@@ -0,0 +1,52 @@
+"use client"
+import { Menu } from "lucide-react"
+import { useState, useEffect } from "react"
+import Link from 'next/link';
+import { IconLeaf } from '@tabler/icons-react';
+
+export default function Header({
+  createNewChat,
+  sidebarCollapsed,
+  setSidebarOpen,
+  selectedModel,
+  onModelChange,
+  modelOptions = [],
+}) {
+  const [isMounted, setIsMounted] = useState(false)
+
+  useEffect(() => {
+    setIsMounted(true)
+  }, [])
+
+  return (
+    <div className="sticky top-0 z-30 flex items-center gap-2 border-b border-zinc-200/60 bg-white/80 px-4 py-3 backdrop-blur dark:border-zinc-800 dark:bg-zinc-900/70">
+      {isMounted && sidebarCollapsed && (
+        <button
+          onClick={() => setSidebarOpen(true)}
+          className="md:hidden inline-flex items-center justify-center rounded-lg p-2 hover:bg-zinc-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 dark:hover:bg-zinc-800"
+          aria-label="Open sidebar"
+        >
+          <Menu className="h-5 w-5" />
+        </button>
+      )}
+
+      <div className="ml-auto flex items-center gap-2">
+        <label htmlFor="header-model-selector" className="sr-only">
+          Select model
+        </label>
+        <select
+          id="header-model-selector"
+          value={selectedModel || ""}
+          onChange={(e) => onModelChange?.(e.target.value)}
+          className="max-w-[180px] rounded-lg border border-zinc-300 bg-white px-2 py-1.5 text-xs text-zinc-700 outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-200"
+        >
+          {modelOptions.map((model) => (
+            <option key={model} value={model}>
+              {model}
+            </option>
+          ))}
+        </select>
+      </div>
+    </div>
+  )
+}

frontend/components/Message.jsx

@@ -0,0 +1,33 @@
+import { cls } from "./utils"
+
+export default function Message({ role, children }) {
+  const isUser = role === "user"
+  return (
+    <div className={cls("flex gap-3", isUser ? "justify-end" : "justify-start")}>
+      {!isUser && (
+        <div className="mt-0.5 grid h-7 w-7 place-items-center rounded-full border border-blue-500 bg-zinc-950 text-[10px] font-bold text-blue-400 shrink-0">
+          RA
+        </div>
+      )}
+      <div className="flex flex-col gap-2 max-w-[85%]">
+        {children && (
+          <div
+            className={cls(
+              "rounded-2xl px-3 py-2 text-sm shadow-sm",
+              isUser
+                ? "bg-zinc-900 text-white dark:bg-white dark:text-zinc-900"
+                : "bg-white text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100 border border-zinc-200 dark:border-zinc-800",
+            )}
+          >
+            {children}
+          </div>
+        )}
+      </div>
+      {isUser && (
+        <div className="mt-0.5 grid h-7 w-7 place-items-center rounded-full bg-zinc-900 text-[10px] font-bold text-white dark:bg-white dark:text-zinc-900 shrink-0">
+          QR
+        </div>
+      )}
+    </div>
+  )
+}

frontend/components/SearchModal.jsx

@@ -0,0 +1,176 @@
+"use client"
+import { motion, AnimatePresence } from "framer-motion"
+import { X, SearchIcon, Plus, Clock } from "lucide-react"
+import { useState, useEffect, useMemo } from "react"
+
+function getTimeGroup(dateString) {
+  const date = new Date(dateString)
+  const now = new Date()
+  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
+  const yesterday = new Date(today.getTime() - 24 * 60 * 60 * 1000)
+  const sevenDaysAgo = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000)
+
+  if (date >= today) return "Today"
+  if (date >= yesterday) return "Yesterday"
+  if (date >= sevenDaysAgo) return "Previous 7 Days"
+  return "Older"
+}
+
+export default function SearchModal({
+  isOpen,
+  onClose,
+  conversations,
+  selectedId,
+  onSelect,
+  togglePin,
+  createNewChat,
+}) {
+  const [query, setQuery] = useState("")
+
+  const filteredConversations = useMemo(() => {
+    if (!query.trim()) return conversations
+    const q = query.toLowerCase()
+    return conversations.filter((c) => c.title.toLowerCase().includes(q) || c.preview.toLowerCase().includes(q))
+  }, [conversations, query])
+
+  const groupedConversations = useMemo(() => {
+    const groups = {
+      Today: [],
+      Yesterday: [],
+      "Previous 7 Days": [],
+      Older: [],
+    }
+
+    filteredConversations
+      .sort((a, b) => new Date(b.updatedAt) - new Date(a.updatedAt))
+      .forEach((conv) => {
+        const group = getTimeGroup(conv.updatedAt)
+        groups[group].push(conv)
+      })
+
+    return groups
+  }, [filteredConversations])
+
+  const handleClose = () => {
+    setQuery("")
+    onClose()
+  }
+
+  const handleNewChat = () => {
+    createNewChat()
+    handleClose()
+  }
+
+  const handleSelectConversation = (id) => {
+    onSelect(id)
+    handleClose()
+  }
+
+  useEffect(() => {
+    const handleEscape = (e) => {
+      if (e.key === "Escape") handleClose()
+    }
+
+    if (isOpen) {
+      document.addEventListener("keydown", handleEscape)
+      return () => document.removeEventListener("keydown", handleEscape)
+    }
+  }, [isOpen])
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <>
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="fixed inset-0 z-50 bg-black/60"
+            onClick={handleClose}
+          />
+          <motion.div
+            initial={{ opacity: 0, scale: 0.95, y: -20 }}
+            animate={{ opacity: 1, scale: 1, y: 0 }}
+            exit={{ opacity: 0, scale: 0.95, y: -20 }}
+            className="fixed left-1/2 top-[20%] z-50 w-full max-w-2xl -translate-x-1/2 rounded-2xl border border-zinc-200 bg-white shadow-2xl dark:border-zinc-800 dark:bg-zinc-900"
+          >
+            {/* Search Header */}
+            <div className="flex items-center gap-3 border-b border-zinc-200 p-4 dark:border-zinc-800">
+              <SearchIcon className="h-5 w-5 text-zinc-400" />
+              <input
+                type="text"
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                placeholder="Search chats..."
+                className="flex-1 bg-transparent text-lg outline-none placeholder:text-zinc-400"
+                autoFocus
+              />
+              <button onClick={handleClose} className="rounded-lg p-1.5 hover:bg-zinc-100 dark:hover:bg-zinc-800">
+                <X className="h-5 w-5" />
+              </button>
+            </div>
+
+            {/* Search Results */}
+            <div className="max-h-[60vh] overflow-y-auto">
+              {/* New Chat Option */}
+              <div className="border-b border-zinc-200 p-2 dark:border-zinc-800">
+                <button
+                  onClick={handleNewChat}
+                  className="flex w-full items-center gap-3 rounded-lg p-3 text-left hover:bg-zinc-100 dark:hover:bg-zinc-800"
+                >
+                  <Plus className="h-5 w-5 text-zinc-500" />
+                  <span className="font-medium">New chat</span>
+                </button>
+              </div>
+
+              {/* Conversation Groups */}
+              {Object.entries(groupedConversations).map(([groupName, convs]) => {
+                if (convs.length === 0) return null
+
+                return (
+                  <div key={groupName} className="border-b border-zinc-200 p-2 last:border-b-0 dark:border-zinc-800">
+                    <div className="px-3 py-2 text-xs font-medium text-zinc-500 dark:text-zinc-400">{groupName}</div>
+                    <div className="space-y-1">
+                      {convs.map((conv) => (
+                        <button
+                          key={conv.id}
+                          onClick={() => handleSelectConversation(conv.id)}
+                          className="flex w-full items-center gap-3 rounded-lg p-3 text-left hover:bg-zinc-100 dark:hover:bg-zinc-800"
+                        >
+                          <Clock className="h-4 w-4 text-zinc-400 shrink-0" />
+                          <div className="min-w-0 flex-1">
+                            <div className="truncate font-medium">{conv.title}</div>
+                            <div className="truncate text-sm text-zinc-500 dark:text-zinc-400">{conv.preview}</div>
+                          </div>
+                        </button>
+                      ))}
+                    </div>
+                  </div>
+                )
+              })}
+
+              {/* Empty State */}
+              {filteredConversations.length === 0 && query.trim() && (
+                <div className="p-8 text-center">
+                  <SearchIcon className="mx-auto h-12 w-12 text-zinc-300 dark:text-zinc-600" />
+                  <div className="mt-4 text-lg font-medium text-zinc-900 dark:text-zinc-100">No chats found</div>
+                  <div className="mt-2 text-sm text-zinc-500 dark:text-zinc-400">
+                    Try searching with different keywords
+                  </div>
+                </div>
+              )}
+
+              {/* Default State - Show all conversations when no query */}
+              {!query.trim() && conversations.length === 0 && (
+                <div className="p-8 text-center">
+                  <div className="text-lg font-medium text-zinc-900 dark:text-zinc-100">No conversations yet</div>
+                  <div className="mt-2 text-sm text-zinc-500 dark:text-zinc-400">Start a new chat to begin</div>
+                </div>
+              )}
+            </div>
+          </motion.div>
+        </>
+      )}
+    </AnimatePresence>
+  )
+}

frontend/components/SettingsPopover.jsx

@@ -0,0 +1,50 @@
+"use client"
+import { useState } from "react"
+import { User, BookOpen, LogOut, ChevronRight } from "lucide-react"
+import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover"
+
+export default function SettingsPopover({ children }) {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>{children}</PopoverTrigger>
+      <PopoverContent className="w-80 p-0" align="start" side="top">
+        <div className="p-4">
+          <div className="text-sm text-zinc-600 dark:text-zinc-400 mb-3">j@gmail.com</div>
+
+          <div className="flex items-center gap-3 p-3 rounded-lg bg-zinc-50 dark:bg-zinc-800/50 mb-4">
+            <div className="flex items-center gap-2">
+              <User className="h-4 w-4" />
+              <span className="text-sm font-medium">Qamar Raza</span>
+            </div>
+            <div className="text-blue-500">
+              <svg className="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
+                <path
+                  fillRule="evenodd"
+                  d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                  clipRule="evenodd"
+                />
+              </svg>
+            </div>
+          </div>
+
+          <div className="space-y-1">
+            <div className="text-sm font-medium text-zinc-900 dark:text-zinc-100 mb-2">Settings</div>
+
+            <button className="flex items-center gap-3 w-full p-2 text-sm text-left hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded-lg">
+              <BookOpen className="h-4 w-4" />
+              <span>Learn more</span>
+              <ChevronRight className="h-4 w-4 ml-auto" />
+            </button>
+
+            <button className="flex items-center gap-3 w-full p-2 text-sm text-left hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded-lg">
+              <LogOut className="h-4 w-4" />
+              <span>Log out</span>
+            </button>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}

frontend/components/Sidebar.jsx

@@ -0,0 +1,396 @@
+"use client"
+import { motion, AnimatePresence } from "framer-motion"
+import Link from 'next/link';
+import { IconLeaf } from '@tabler/icons-react';
+import {
+  PanelLeftClose,
+  PanelLeftOpen,
+  SearchIcon,
+  Plus,
+  Star,
+  Clock,
+  FolderIcon,
+  Settings,
+  Asterisk,
+} from "lucide-react"
+import SidebarSection from "./SidebarSection"
+import ConversationRow from "./ConversationRow"
+import ThemeToggle from "./ThemeToggle"
+import CreateFolderModal from "./CreateFolderModal"
+import CreateTemplateModal from "./CreateTemplateModal"
+import SearchModal from "./SearchModal"
+import SettingsPopover from "./SettingsPopover"
+import { cls } from "./utils"
+import { useState, useEffect } from "react"
+
+// A custom hook to safely check screen size on the client side.
+// This is the standard way to avoid hydration errors with responsive design.
+const useMediaQuery = (query) => {
+  const [matches, setMatches] = useState(false);
+
+  useEffect(() => {
+    // Set the initial value once the component mounts on the client
+    const media = window.matchMedia(query);
+    if (media.matches !== matches) {
+      setMatches(media.matches);
+    }
+
+    // Set up a listener for changes in window size
+    const listener = () => setMatches(media.matches);
+    window.addEventListener("resize", listener);
+
+    // Cleanup the listener when the component unmounts
+    return () => window.removeEventListener("resize", listener);
+  }, [matches, query]);
+
+  return matches;
+};
+
+
+export default function Sidebar({
+  open,
+  onClose,
+  theme,
+  setTheme,
+  collapsed,
+  setCollapsed,
+  conversations,
+  pinned,
+  recent,
+  folders,
+  folderCounts,
+  selectedId,
+  onSelect,
+  togglePin,
+  deleteChat,
+  renameChat,
+  query,
+  setQuery,
+  searchRef,
+  createFolder,
+  createNewChat,
+  templates = [],
+  setTemplates = () => {},
+  onUseTemplate = () => {},
+  sidebarCollapsed = false,
+  setSidebarCollapsed = () => {},
+}) {
+  const [showCreateFolderModal, setShowCreateFolderModal] = useState(false)
+  const [showCreateTemplateModal, setShowCreateTemplateModal] = useState(false)
+  const [editingTemplate, setEditingTemplate] = useState(null)
+  const [showSearchModal, setShowSearchModal] = useState(false)
+
+  // Use the hook to determine if we are on a desktop-sized screen.
+  // 768px is the standard 'md' breakpoint in Tailwind.
+  const isDesktop = useMediaQuery("(min-width: 768px)");
+
+  const getConversationsByFolder = (folderName) => {
+    return conversations.filter((conv) => conv.folder === folderName)
+  }
+
+  const handleCreateFolder = (folderName) => {
+    createFolder(folderName)
+  }
+
+  const handleDeleteFolder = (folderName) => {
+    const updatedConversations = conversations.map((conv) =>
+      conv.folder === folderName ? { ...conv, folder: null } : conv,
+    )
+    console.log("Delete folder:", folderName, "Updated conversations:", updatedConversations)
+  }
+
+  const handleRenameFolder = (oldName, newName) => {
+    const updatedConversations = conversations.map((conv) =>
+      conv.folder === oldName ? { ...conv, folder: newName } : conv,
+    )
+    console.log("Rename folder:", oldName, "to", newName, "Updated conversations:", updatedConversations)
+  }
+
+  const handleCreateTemplate = (templateData) => {
+    if (editingTemplate) {
+      const updatedTemplates = templates.map((t) =>
+        t.id === editingTemplate.id ? { ...templateData, id: editingTemplate.id } : t,
+      )
+      setTemplates(updatedTemplates)
+      setEditingTemplate(null)
+    } else {
+      const newTemplate = {
+        ...templateData,
+        id: Date.now().toString(),
+      }
+      setTemplates([...templates, newTemplate])
+    }
+    setShowCreateTemplateModal(false)
+  }
+
+  const handleEditTemplate = (template) => {
+    setEditingTemplate(template)
+    setShowCreateTemplateModal(true)
+  }
+
+  const handleRenameTemplate = (templateId, newName) => {
+    const updatedTemplates = templates.map((t) =>
+      t.id === templateId ? { ...t, name: newName, updatedAt: new Date().toISOString() } : t,
+    )
+    setTemplates(updatedTemplates)
+  }
+
+  const handleDeleteTemplate = (templateId) => {
+    const updatedTemplates = templates.filter((t) => t.id !== templateId)
+    setTemplates(updatedTemplates)
+  }
+
+  const handleUseTemplate = (template) => {
+    onUseTemplate(template)
+  }
+
+  if (isDesktop && sidebarCollapsed) {
+    return (
+      <motion.aside
+        initial={{ width: 320 }}
+        animate={{ width: 64 }}
+        transition={{ type: "spring", stiffness: 260, damping: 28 }}
+        className="z-50 flex h-full shrink-0 flex-col border-r border-zinc-200/60 bg-white dark:border-zinc-800 dark:bg-zinc-900"
+      >
+        <div className="flex items-center justify-center border-b border-zinc-200/60 px-3 py-3 dark:border-zinc-800">
+          <button
+            onClick={() => setSidebarCollapsed(false)}
+            className="rounded-xl p-2 hover:bg-zinc-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 dark:hover:bg-zinc-800"
+            aria-label="Open sidebar"
+            title="Open sidebar"
+          >
+            <PanelLeftOpen className="h-5 w-5" />
+          </button>
+        </div>
+
+        <div className="flex flex-col items-center gap-4 pt-4">
+          <button
+            onClick={createNewChat}
+            className="rounded-xl p-2 hover:bg-zinc-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 dark:hover:bg-zinc-800"
+            title="New Chat"
+          >
+            <Plus className="h-5 w-5" />
+          </button>
+
+          <button
+            onClick={() => setShowSearchModal(true)}
+            className="rounded-xl p-2 hover:bg-zinc-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 dark:hover:bg-zinc-800"
+            title="Search"
+          >
+            <SearchIcon className="h-5 w-5" />
+          </button>
+
+          <button
+            className="rounded-xl p-2 hover:bg-zinc-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 dark:hover:bg-zinc-800"
+            title="Folders"
+          >
+            <FolderIcon className="h-5 w-5" />
+          </button>
+
+          <div className="mt-auto mb-4">
+            <SettingsPopover>
+              <button
+                className="rounded-xl p-2 hover:bg-zinc-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 dark:hover:bg-zinc-800"
+                title="Settings"
+              >
+                <Settings className="h-5 w-5" />
+              </button>
+            </SettingsPopover>
+          </div>
+        </div>
+      </motion.aside>
+    )
+  }
+
+  return (
+    <>
+      {/* The mobile overlay should only appear on mobile screens when the menu is open */}
+      <AnimatePresence>
+        {!isDesktop && open && (
+          <motion.div
+            key="overlay"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 0.5 }}
+            exit={{ opacity: 0 }}
+            className="fixed inset-0 z-40 bg-black/60 md:hidden"
+            onClick={onClose}
+          />
+        )}
+      </AnimatePresence>
+
+      {/* The sidebar should appear if it's desktop OR if the mobile menu is open */}
+      <AnimatePresence>
+        {(isDesktop || open) && (
+          <motion.aside
+            key="sidebar"
+            initial={{ x: -340 }}
+            animate={{ x: 0 }}
+            exit={{ x: -340 }}
+            transition={{ type: "spring", stiffness: 260, damping: 28 }}
+            className={cls(
+              "z-50 flex h-full w-80 shrink-0 flex-col border-r border-zinc-200/60 bg-white dark:border-zinc-800 dark:bg-zinc-900",
+              "fixed inset-y-0 left-0 md:static md:translate-x-0",
+            )}
+          >
+            <div className="flex items-center gap-2 border-b border-zinc-200/60 px-3 py-3 dark:border-zinc-800">
+              <Link
+                href="/"
+                className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-black border border-gray-700 text-white transition-all hover:bg-neutral-900 hover:border-gray-500 hover:scale-105"
+              >
+                <IconLeaf className="w-4 h-4 text-green-400" />
+                <span className="text-sm font-bold tracking-wider">RAG Assistant</span>
+              </Link>
+              <div className="ml-auto flex items-center gap-1">
+                <button
+                  onClick={() => setSidebarCollapsed(true)}
+                  className="hidden md:block rounded-xl p-2 hover:bg-zinc-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 dark:hover:bg-zinc-800"
+                  aria-label="Close sidebar"
+                  title="Close sidebar"
+                >
+                  <PanelLeftClose className="h-5 w-5" />
+                </button>
+
+                <button
+                  onClick={onClose}
+                  className="md:hidden rounded-xl p-2 hover:bg-zinc-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 dark:hover:bg-zinc-800"
+                  aria-label="Close sidebar"
+                >
+                  <PanelLeftClose className="h-5 w-5" />
+                </button>
+              </div>
+            </div>
+
+            <div className="px-3 pt-3">
+              <label htmlFor="search" className="sr-only">
+                Search conversations
+              </label>
+              <div className="relative">
+                <SearchIcon className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-zinc-400" />
+                <input
+                  id="search"
+                  ref={searchRef}
+                  type="text"
+                  value={query}
+                  onChange={(e) => setQuery(e.target.value)}
+                  placeholder="Search…"
+                  onClick={() => setShowSearchModal(true)}
+                  onFocus={() => setShowSearchModal(true)}
+                  className="w-full rounded-full border border-zinc-200 bg-white py-2 pl-9 pr-3 text-sm outline-none ring-0 placeholder:text-zinc-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-500 dark:border-zinc-800 dark:bg-zinc-950/50"
+                />
+              </div>
+            </div>
+
+            <div className="px-3 pt-3">
+              <button
+                onClick={createNewChat}
+                className="flex w-full items-center justify-center gap-2 rounded-full bg-zinc-900 px-4 py-2 text-sm font-medium text-white shadow-sm transition hover:bg-zinc-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 dark:bg-white dark:text-zinc-900"
+              >
+                <Plus className="h-4 w-4" /> Start New Chat
+              </button>
+            </div>
+
+            <nav className="mt-4 flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto px-2 pb-4">
+              <SidebarSection
+                icon={<Star className="h-4 w-4" />}
+                title="PINNED CHATS" // Renamed from "PINNED CONVERSATIONS" to "PINNED CHATS"
+                collapsed={collapsed.pinned}
+                onToggle={() => setCollapsed((s) => ({ ...s, pinned: !s.pinned }))}
+              >
+                {pinned.length === 0 ? (
+                  <div className="select-none rounded-lg border border-dashed border-zinc-200 px-3 py-3 text-center text-xs text-zinc-500 dark:border-zinc-800 dark:text-zinc-400">
+                    Pin important threads for quick access.
+                  </div>
+                ) : (
+                  pinned.map((c) => (
+                    <ConversationRow
+                      key={c.id}
+                      data={c}
+                      active={c.id === selectedId}
+                      onSelect={() => onSelect(c.id)}
+                      onTogglePin={() => togglePin(c.id)}
+                      onDelete={() => deleteChat(c.id)}
+                      onRename={(newTitle) => renameChat?.(c.id, newTitle)}
+                    />
+                  ))
+                )}
+              </SidebarSection>
+
+              <SidebarSection
+                icon={null}
+                title="CHATS"
+                collapsed={collapsed.recent}
+                onToggle={() => setCollapsed((s) => ({ ...s, recent: !s.recent }))}
+              >
+                {recent.length === 0 ? (
+                  <div className="select-none rounded-lg border border-dashed border-zinc-200 px-3 py-3 text-center text-xs text-zinc-500 dark:border-zinc-800 dark:text-zinc-400">
+                    No conversations yet. Start a new one!
+                  </div>
+                ) : (
+                  recent.map((c) => (
+                    <ConversationRow
+                      key={c.id}
+                      data={c}
+                      active={c.id === selectedId}
+                      onSelect={() => onSelect(c.id)}
+                      onTogglePin={() => togglePin(c.id)}
+                      onDelete={() => deleteChat(c.id)}
+                      onRename={(newTitle) => renameChat?.(c.id, newTitle)}
+                      showMeta
+                    />
+                  ))
+                )}
+              </SidebarSection>
+            </nav>
+
+            <div className="mt-auto border-t border-zinc-200/60 px-3 py-3 dark:border-zinc-800">
+              <div className="flex items-center gap-2">
+                <SettingsPopover>
+                  <button className="inline-flex items-center gap-2 rounded-lg px-2 py-2 text-sm hover:bg-zinc-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 dark:hover:bg-zinc-800">
+                    <Settings className="h-4 w-4" /> Settings
+                  </button>
+                </SettingsPopover>
+                <div className="ml-auto">
+                  <ThemeToggle theme={theme} setTheme={setTheme} />
+                </div>
+              </div>
+              <div className="mt-2 flex items-center gap-2 rounded-xl bg-zinc-50 p-2 dark:bg-zinc-800/60">
+                <div className="grid h-8 w-8 place-items-center rounded-full bg-zinc-900 text-xs font-bold text-white dark:bg-white dark:text-zinc-900">
+                  QR
+                </div>
+                <div className="min-w-0">
+                  <div className="truncate text-sm font-medium">Qamar Raza</div>
+                </div>
+              </div>
+            </div>
+          </motion.aside>
+        )}
+      </AnimatePresence>
+
+      <CreateFolderModal
+        isOpen={showCreateFolderModal}
+        onClose={() => setShowCreateFolderModal(false)}
+        onCreateFolder={handleCreateFolder}
+      />
+
+      <CreateTemplateModal
+        isOpen={showCreateTemplateModal}
+        onClose={() => {
+          setShowCreateTemplateModal(false)
+          setEditingTemplate(null)
+        }}
+        onCreateTemplate={handleCreateTemplate}
+        editingTemplate={editingTemplate}
+      />
+
+      <SearchModal
+        isOpen={showSearchModal}
+        onClose={() => setShowSearchModal(false)}
+        conversations={conversations}
+        selectedId={selectedId}
+        onSelect={onSelect}
+        togglePin={togglePin}
+        createNewChat={createNewChat}
+      />
+    </>
+  )
+}

frontend/components/SidebarSection.jsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { ChevronDown, ChevronRight } from "lucide-react";
+
+export default function SidebarSection({ icon, title, children, collapsed, onToggle }) {
+  return (
+    <section>
+      <button
+        onClick={onToggle}
+        className="sticky top-0 z-10 -mx-2 mb-1 flex w-[calc(100%+16px)] items-center gap-2 border-y border-transparent bg-gradient-to-b from-white to-white/70 px-2 py-2 text-[11px] font-semibold tracking-wide text-zinc-500 backdrop-blur hover:text-zinc-700 dark:from-zinc-900 dark:to-zinc-900/70 dark:hover:text-zinc-300"
+        aria-expanded={!collapsed}
+      >
+        <span className="mr-1" aria-hidden>
+          {collapsed ? <ChevronRight className="h-3.5 w-3.5" /> : <ChevronDown className="h-3.5 w-3.5" />}
+        </span>
+        <span className="flex items-center gap-2">
+          <span className="opacity-70" aria-hidden>
+            {icon}
+          </span>
+          {title}
+        </span>
+      </button>
+      <AnimatePresence initial={false}>
+        {!collapsed && (
+          <motion.div
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: "auto", opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={{ duration: 0.18 }}
+            className="space-y-0.5"
+          >
+            {children}
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </section>
+  );
+}

frontend/components/TemplateRow.jsx

@@ -0,0 +1,124 @@
+"use client"
+
+import { useState, useRef, useEffect } from "react"
+import { FileText, MoreHorizontal, Copy, Edit3, Trash2 } from "lucide-react"
+import { motion, AnimatePresence } from "framer-motion"
+
+export default function TemplateRow({ template, onUseTemplate, onEditTemplate, onRenameTemplate, onDeleteTemplate }) {
+  const [showMenu, setShowMenu] = useState(false)
+  const menuRef = useRef(null)
+
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (menuRef.current && !menuRef.current.contains(event.target)) {
+        setShowMenu(false)
+      }
+    }
+
+    if (showMenu) {
+      document.addEventListener("mousedown", handleClickOutside)
+    }
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside)
+    }
+  }, [showMenu])
+
+  const handleUse = () => {
+    onUseTemplate?.(template)
+    setShowMenu(false)
+  }
+
+  const handleEdit = () => {
+    onEditTemplate?.(template)
+    setShowMenu(false)
+  }
+
+  const handleRename = () => {
+    const newName = prompt(`Rename template "${template.name}" to:`, template.name)
+    if (newName && newName.trim() && newName !== template.name) {
+      onRenameTemplate?.(template.id, newName.trim())
+    }
+    setShowMenu(false)
+  }
+
+  const handleDelete = () => {
+    if (confirm(`Are you sure you want to delete the template "${template.name}"?`)) {
+      onDeleteTemplate?.(template.id)
+    }
+    setShowMenu(false)
+  }
+
+  return (
+    <div className="group">
+      <div className="flex items-center justify-between rounded-lg px-2 py-2 text-sm hover:bg-zinc-100 dark:hover:bg-zinc-800">
+        <button
+          onClick={handleUse}
+          className="flex items-center gap-2 flex-1 text-left min-w-0"
+          title={`Use template: ${template.snippet}`}
+        >
+          <FileText className="h-4 w-4 text-zinc-500 shrink-0" />
+          <div className="min-w-0 flex-1">
+            <div className="truncate font-medium">{template.name}</div>
+            <div className="truncate text-xs text-zinc-500 dark:text-zinc-400">{template.snippet}</div>
+          </div>
+        </button>
+
+        <div className="flex items-center gap-1">
+          <span className="hidden group-hover:inline text-xs text-zinc-500 dark:text-zinc-400 px-1">Use</span>
+
+          <div className="relative" ref={menuRef}>
+            <button
+              onClick={(e) => {
+                e.stopPropagation()
+                setShowMenu(!showMenu)
+              }}
+              className="opacity-0 group-hover:opacity-100 p-1 rounded hover:bg-zinc-200 dark:hover:bg-zinc-700 transition-opacity"
+            >
+              <MoreHorizontal className="h-3 w-3" />
+            </button>
+
+            <AnimatePresence>
+              {showMenu && (
+                <motion.div
+                  initial={{ opacity: 0, scale: 0.95 }}
+                  animate={{ opacity: 1, scale: 1 }}
+                  exit={{ opacity: 0, scale: 0.95 }}
+                  className="absolute right-0 top-full mt-1 w-36 rounded-lg border border-zinc-200 bg-white py-1 shadow-lg dark:border-zinc-800 dark:bg-zinc-900 z-[100]"
+                >
+                  <button
+                    onClick={handleUse}
+                    className="w-full px-3 py-1.5 text-left text-xs hover:bg-zinc-100 dark:hover:bg-zinc-800 flex items-center gap-2"
+                  >
+                    <Copy className="h-3 w-3" />
+                    Use Template
+                  </button>
+                  <button
+                    onClick={handleEdit}
+                    className="w-full px-3 py-1.5 text-left text-xs hover:bg-zinc-100 dark:hover:bg-zinc-800 flex items-center gap-2"
+                  >
+                    <Edit3 className="h-3 w-3" />
+                    Edit
+                  </button>
+                  <button
+                    onClick={handleRename}
+                    className="w-full px-3 py-1.5 text-left text-xs hover:bg-zinc-100 dark:hover:bg-zinc-800"
+                  >
+                    Rename
+                  </button>
+                  <button
+                    onClick={handleDelete}
+                    className="w-full px-3 py-1.5 text-left text-xs text-red-600 hover:bg-zinc-100 dark:hover:bg-zinc-800 flex items-center gap-2"
+                  >
+                    <Trash2 className="h-3 w-3" />
+                    Delete
+                  </button>
+                </motion.div>
+              )}
+            </AnimatePresence>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

frontend/components/ThemeToggle.jsx

@@ -0,0 +1,43 @@
+"use client" // This directive is important for using hooks
+
+import React, { useState, useEffect } from "react"; // 1. Import useState and useEffect
+import { Sun, Moon } from "lucide-react";
+
+export default function ThemeToggle({ theme, setTheme }) {
+  // 2. State to track if the component has mounted on the client
+  const [isMounted, setIsMounted] = useState(false);
+
+  // 3. This effect runs only once on the client after the initial render
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  // 4. A simple loading state to prevent a "layout jump"
+  // While isMounted is false, we render a placeholder with the same size.
+  if (!isMounted) {
+    return (
+      <button
+        className="inline-flex h-[34px] w-[34px] items-center gap-2 rounded-full border border-zinc-200 bg-white px-2.5 py-1.5 dark:border-zinc-800 dark:bg-zinc-950 sm:w-auto"
+        aria-label="Toggle theme"
+        title="Toggle theme"
+        disabled // Disable the button while it's not ready
+      >
+        <div className="h-4 w-4" /> {/* Placeholder for the icon */}
+        <span className="hidden sm:inline">...</span> {/* Placeholder for the text */}
+      </button>
+    );
+  }
+
+  // 5. Once mounted, render the actual component with the correct theme
+  return (
+    <button
+      className="inline-flex items-center gap-2 rounded-full border border-zinc-200 bg-white px-2.5 py-1.5 text-sm hover:bg-zinc-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 dark:border-zinc-800 dark:bg-zinc-950 dark:hover:bg-zinc-800"
+      onClick={() => setTheme((t) => (t === "dark" ? "light" : "dark"))}
+      aria-label="Toggle theme"
+      title="Toggle theme"
+    >
+      {theme === "dark" ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
+      <span className="hidden sm:inline">{theme === "dark" ? "Light" : "Dark"}</span>
+    </button>
+  );
+}

frontend/components/mockData.js

@@ -0,0 +1,117 @@
+import { makeId } from "./utils"
+
+export const INITIAL_CONVERSATIONS = []
+
+export const INITIAL_TEMPLATES = [
+  {
+    id: "t1",
+    name: "Bug Report",
+    content: `**Bug Report**
+
+**Description:**
+Brief description of the issue
+
+**Steps to Reproduce:**
+1. Step one
+2. Step two
+3. Step three
+
+**Expected Behavior:**
+What should happen
+
+**Actual Behavior:**
+What actually happens
+
+**Environment:**
+- Browser/OS:
+- Version:
+- Additional context:`,
+    snippet: "Structured bug report template with steps to reproduce...",
+    createdAt: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString(),
+    updatedAt: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString(),
+  },
+  {
+    id: "t2",
+    name: "Daily Standup",
+    content: `**Daily Standup Update**
+
+**Yesterday:**
+- Completed task A
+- Made progress on task B
+
+**Today:**
+- Plan to work on task C
+- Continue with task B
+
+**Blockers:**
+- None / List any blockers here
+
+**Notes:**
+Any additional context or updates`,
+    snippet: "Daily standup format with yesterday, today, and blockers...",
+    createdAt: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000).toISOString(),
+    updatedAt: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000).toISOString(),
+  },
+  {
+    id: "t3",
+    name: "Code Review",
+    content: `**Code Review Checklist**
+
+**Scope:**
+What changes are being reviewed
+
+**Key Areas to Focus:**
+- Logic correctness
+- Performance implications
+- Security considerations
+- Test coverage
+
+**Questions:**
+- Any specific concerns?
+- Performance impact?
+- Breaking changes?
+
+**Testing:**
+- Unit tests added/updated?
+- Manual testing completed?`,
+    snippet: "Comprehensive code review checklist and questions...",
+    createdAt: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000).toISOString(),
+    updatedAt: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000).toISOString(),
+  },
+  {
+    id: "t4",
+    name: "Meeting Notes",
+    content: `**Meeting Notes - [Meeting Title]**
+
+**Date:** [Date]
+**Attendees:** [List attendees]
+
+**Agenda:**
+1. Topic 1
+2. Topic 2
+3. Topic 3
+
+**Key Decisions:**
+- Decision 1
+- Decision 2
+
+**Action Items:**
+- [ ] Task 1 - @person - Due: [date]
+- [ ] Task 2 - @person - Due: [date]
+
+**Next Steps:**
+What happens next
+
+**Notes:**
+Additional context and discussion points`,
+    snippet: "Meeting notes template with agenda, decisions, and action items...",
+    createdAt: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000).toISOString(),
+    updatedAt: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000).toISOString(),
+  },
+]
+
+export const INITIAL_FOLDERS = [
+  { id: "f1", name: "Work Projects" },
+  { id: "f2", name: "Personal" },
+  { id: "f3", name: "Code Reviews" },
+]

frontend/components/ui/github-button.tsx

@@ -0,0 +1,296 @@
+'use client';
+
+import React, { useCallback, useEffect, useState } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Star } from 'lucide-react';
+import { motion, useInView, type SpringOptions, type UseInViewOptions } from 'motion/react';
+import { cn } from '@/lib/utils';
+
+const githubButtonVariants = cva(
+  'cursor-pointer relative overflow-hidden will-change-transform backface-visibility-hidden transform-gpu transition-transform duration-200 ease-out hover:scale-105 group whitespace-nowrap focus-visible:outline-hidden inline-flex items-center justify-center whitespace-nowrap font-medium ring-offset-background disabled:pointer-events-none disabled:opacity-60 [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default:
+          'bg-zinc-950 hover:bg-zinc-900 text-white border-gray-700 dark:bg-zinc-50 dark:border-gray-300 dark:text-zinc-950 dark:hover:bg-zinc-50',
+        outline: 'bg-background text-accent-foreground border border-input hover:bg-accent',
+      },
+      size: {
+        default: 'h-8.5 rounded-md px-3 gap-2 text-[0.8125rem] leading-none [&_svg]:size-4 gap-2',
+        sm: 'h-7 rounded-md px-2.5 gap-1.5 text-xs leading-none [&_svg]:size-3.5 gap-1.5',
+        lg: 'h-10 rounded-md px-4 gap-2.5 text-sm leading-none [&_svg]:size-5 gap-2.5',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+
+interface GithubButtonProps extends React.ComponentProps<'button'>, VariantProps<typeof githubButtonVariants> {
+  /** Whether to round stars */
+  roundStars?: boolean;
+  /** Whether to show Github icon */
+  fixedWidth?: boolean;
+  /** Initial number of stars */
+  initialStars?: number;
+  /** Class for stars */
+  starsClass?: string;
+  /** Target number of stars to animate to */
+  targetStars?: number;
+  /** Animation duration in seconds */
+  animationDuration?: number;
+  /** Animation delay in seconds */
+  animationDelay?: number;
+  /** Whether to start animation automatically */
+  autoAnimate?: boolean;
+  /** Callback when animation completes */
+  onAnimationComplete?: () => void;
+  /** Whether to show Github icon */
+  showGithubIcon?: boolean;
+  /** Whether to show star icon */
+  showStarIcon?: boolean;
+  /** Whether to show separator */
+  separator?: boolean;
+  /** Whether stars should be filled */
+  filled?: boolean;
+  /** Repository URL for actual Github integration */
+  repoUrl?: string;
+  /** Button text label */
+  label?: string;
+  /** Use in-view detection to trigger animation */
+  useInViewTrigger?: boolean;
+  /** In-view options */
+  inViewOptions?: UseInViewOptions;
+  /** Spring transition options */
+  transition?: SpringOptions;
+}
+
+function GithubButton({
+  initialStars = 0,
+  targetStars = 0,
+  starsClass = '',
+  fixedWidth = true,
+  animationDuration = 2,
+  animationDelay = 0,
+  autoAnimate = true,
+  className,
+  variant = 'default',
+  size = 'default',
+  showGithubIcon = true,
+  showStarIcon = true,
+  roundStars = false,
+  separator = false,
+  filled = false,
+  repoUrl,
+  onClick,
+  label = '',
+  useInViewTrigger = false,
+  inViewOptions = { once: true },
+  transition,
+  ...props
+}: GithubButtonProps) {
+  const [currentStars, setCurrentStars] = useState(initialStars);
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [starProgress, setStarProgress] = useState(filled ? 100 : 0);
+  const [hasAnimated, setHasAnimated] = useState(false);
+
+  // Format number with units
+  const formatNumber = (num: number) => {
+    const units = ['k', 'M', 'B', 'T'];
+
+    if (roundStars && num >= 1000) {
+      let unitIndex = -1;
+      let value = num;
+
+      while (value >= 1000 && unitIndex < units.length - 1) {
+        value /= 1000;
+        unitIndex++;
+      }
+
+      // Format to 1 decimal place if needed, otherwise show whole number
+      const formatted = value % 1 === 0 ? value.toString() : value.toFixed(1);
+      return `${formatted}${units[unitIndex]}`;
+    }
+
+    return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+  };
+
+  // Start animation
+  const startAnimation = useCallback(() => {
+    if (isAnimating || hasAnimated) return;
+
+    setIsAnimating(true);
+    const startTime = Date.now();
+    const startValue = 0; // Always start from 0 for number animation
+    const endValue = targetStars;
+    const duration = animationDuration * 1000;
+
+    const animate = () => {
+      const elapsed = Date.now() - startTime;
+      const progress = Math.min(elapsed / duration, 1);
+
+      // Easing function for smooth animation
+      const easeOutQuart = 1 - Math.pow(1 - progress, 4);
+
+      // Update star count from 0 to target with more frequent updates
+      const newStars = Math.round(startValue + (endValue - startValue) * easeOutQuart);
+      setCurrentStars(newStars);
+
+      // Update star fill progress (0 to 100)
+      setStarProgress(progress * 100);
+
+      if (progress < 1) {
+        requestAnimationFrame(animate);
+      } else {
+        setCurrentStars(endValue);
+        setStarProgress(100);
+        setIsAnimating(false);
+        setHasAnimated(true);
+      }
+    };
+
+    setTimeout(() => {
+      requestAnimationFrame(animate);
+    }, animationDelay * 1000);
+  }, [isAnimating, hasAnimated, targetStars, animationDuration, animationDelay]);
+
+  // Use in-view detection if enabled
+  const ref = React.useRef(null);
+  const isInView = useInView(ref, inViewOptions);
+
+  // Reset animation state when targetStars changes
+  useEffect(() => {
+    setHasAnimated(false);
+    setCurrentStars(initialStars);
+  }, [targetStars, initialStars]);
+
+  // Auto-start animation or use in-view trigger
+  useEffect(() => {
+    if (useInViewTrigger) {
+      if (isInView && !hasAnimated) {
+        startAnimation();
+      }
+    } else if (autoAnimate && !hasAnimated) {
+      startAnimation();
+    }
+  }, [autoAnimate, useInViewTrigger, isInView, hasAnimated, startAnimation]);
+
+  const navigateToRepo = () => {
+    if (!repoUrl) {
+      return;
+    }
+
+    // Next.js compatible navigation approach
+    try {
+      // Create a temporary anchor element for reliable navigation
+      const link = document.createElement('a');
+      link.href = repoUrl;
+      link.target = '_blank';
+      link.rel = 'noopener noreferrer';
+
+      // Temporarily add to DOM and click
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    } catch {
+      // Fallback to window.open
+      try {
+        window.open(repoUrl, '_blank', 'noopener,noreferrer');
+      } catch {
+        // Final fallback
+        window.location.href = repoUrl;
+      }
+    }
+  };
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    if (onClick) {
+      onClick(event);
+      return;
+    }
+
+    if (repoUrl) {
+      navigateToRepo();
+    } else if (!hasAnimated) {
+      startAnimation();
+    }
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {
+    // Handle Enter and Space key presses for accessibility
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+
+      if (repoUrl) {
+        navigateToRepo();
+      } else if (!hasAnimated) {
+        startAnimation();
+      }
+    }
+  };
+
+  return (
+    <button
+      ref={ref}
+      className={cn(githubButtonVariants({ variant, size, className }), separator && 'ps-0')}
+      onClick={handleClick}
+      onKeyDown={handleKeyDown}
+      role="button"
+      tabIndex={0}
+      aria-label={repoUrl ? `Star ${label} on GitHub` : label}
+      {...props}
+    >
+      {showGithubIcon && (
+        <div
+          className={cn(
+            'h-full relative flex items-center justify-center',
+            separator && 'w-9 bg-muted/60 border-e border-input',
+          )}
+        >
+          <svg role="img" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+          </svg>
+        </div>
+      )}
+
+      {label && <span>{label}</span>}
+
+      {/* Animated Star Icon */}
+      {showStarIcon && (
+        <div className="relative inline-flex shrink-0">
+          <Star className="fill-muted-foreground text-muted-foreground" aria-hidden="true" />
+          <Star
+            className="absolute top-0 start-0 text-yellow-400 fill-yellow-400"
+            size={18}
+            aria-hidden="true"
+            style={{
+              clipPath: `inset(${100 - starProgress}% 0 0 0)`,
+            }}
+          />
+        </div>
+      )}
+
+      {/* Animated Number Counter with Ticker Effect */}
+      <div className={cn('flex flex-col font-semibold relative overflow-hidden', starsClass)}>
+        <motion.div
+          animate={{ opacity: 1 }}
+          transition={{
+            type: 'spring',
+            stiffness: 300,
+            damping: 30,
+            ...transition,
+          }}
+          className="tabular-nums"
+        >
+          <span>{currentStars > 0 && formatNumber(currentStars)}</span>
+        </motion.div>
+        {fixedWidth && <span className="opacity-0 h-0 overflow-hidden tabular-nums">{formatNumber(targetStars)}</span>}
+      </div>
+    </button>
+  );
+}
+
+export { GithubButton, githubButtonVariants };
+export type { GithubButtonProps };

frontend/components/ui/popover.tsx

@@ -0,0 +1,31 @@
+'use client'
+
+import * as React from 'react'
+import * as PopoverPrimitive from '@radix-ui/react-popover'
+
+import { cn } from '@/lib/utils'
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        className,
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent }

frontend/components/ui/sidebar.tsx

@@ -0,0 +1,188 @@
+"use client";
+import { cn } from "@/lib/utils";
+import React, { useState, createContext, useContext } from "react";
+import { AnimatePresence, motion } from "motion/react";
+import { IconMenu2, IconX } from "@tabler/icons-react";
+
+interface Links {
+  label: string;
+  href: string;
+  icon: React.JSX.Element | React.ReactNode;
+}
+
+interface SidebarContextProps {
+  open: boolean;
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  animate: boolean;
+}
+
+const SidebarContext = createContext<SidebarContextProps | undefined>(
+  undefined
+);
+
+export const useSidebar = () => {
+  const context = useContext(SidebarContext);
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider");
+  }
+  return context;
+};
+
+export const SidebarProvider = ({
+  children,
+  open: openProp,
+  setOpen: setOpenProp,
+  animate = true,
+}: {
+  children: React.ReactNode;
+  open?: boolean;
+  setOpen?: React.Dispatch<React.SetStateAction<boolean>>;
+  animate?: boolean;
+}) => {
+  const [openState, setOpenState] = useState(false);
+
+  const open = openProp !== undefined ? openProp : openState;
+  const setOpen = setOpenProp !== undefined ? setOpenProp : setOpenState;
+
+  return (
+    <SidebarContext.Provider value={{ open, setOpen, animate: animate }}>
+      {children}
+    </SidebarContext.Provider>
+  );
+};
+
+export const Sidebar = ({
+  children,
+  open,
+  setOpen,
+  animate,
+}: {
+  children: React.ReactNode;
+  open?: boolean;
+  setOpen?: React.Dispatch<React.SetStateAction<boolean>>;
+  animate?: boolean;
+}) => {
+  return (
+    <SidebarProvider open={open} setOpen={setOpen} animate={animate}>
+      {children}
+    </SidebarProvider>
+  );
+};
+
+export const SidebarBody = (props: React.ComponentProps<typeof motion.div>) => {
+  return (
+    <>
+      <DesktopSidebar {...props} />
+      <MobileSidebar {...(props as React.ComponentProps<"div">)} />
+    </>
+  );
+};
+
+export const DesktopSidebar = ({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof motion.div>) => {
+  const { open, setOpen, animate } = useSidebar();
+  return (
+    <>
+      <motion.div
+        className={cn(
+          "h-full px-4 py-4 hidden  md:flex md:flex-col bg-neutral-900 w-[175px] shrink-0",
+          className
+        )}
+        animate={{
+          width: animate ? (open ? "175px" : "60px") : "200px",
+        }}
+        onMouseEnter={() => setOpen(true)}
+        onMouseLeave={() => setOpen(false)}
+        {...props}
+      >
+        {children}
+      </motion.div>
+    </>
+  );
+};
+
+export const MobileSidebar = ({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div">) => {
+  const { open, setOpen } = useSidebar();
+  return (
+    <>
+      <div
+        className={cn(
+          "h-10 px-4 py-4 flex flex-row md:hidden  items-center justify-between bg-neutral-900 w-full"
+        )}
+        {...props}
+      >
+        <div className="flex justify-end z-20 w-full">
+          <IconMenu2
+            className="text-neutral-800 dark:text-neutral-200"
+            onClick={() => setOpen(!open)}
+          />
+        </div>
+        <AnimatePresence>
+          {open && (
+            <motion.div
+              initial={{ x: "-100%", opacity: 0 }}
+              animate={{ x: 0, opacity: 1 }}
+              exit={{ x: "-100%", opacity: 0 }}
+              transition={{
+                duration: 0.3,
+                ease: "easeInOut",
+              }}
+              className={cn(
+                "fixed h-full w-full inset-0 bg-neutral-900 p-10 z-[100] flex flex-col justify-between",
+                className
+              )}
+            >
+              <div
+                className="absolute right-10 top-10 z-50 text-neutral-800 dark:text-neutral-200"
+                onClick={() => setOpen(!open)}
+              >
+                <IconX />
+              </div>
+              {children}
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+    </>
+  );
+};
+
+export const SidebarLink = ({
+  link,
+  className,
+  ...props
+}: {
+  link: Links;
+  className?: string;
+}) => {
+  const { open, animate } = useSidebar();
+  return (
+    <a
+      href={link.href}
+      className={cn(
+        "flex items-center justify-start gap-2  group/sidebar py-2",
+        className
+      )}
+      {...props}
+    >
+      {link.icon}
+
+      <motion.span
+        animate={{
+          display: animate ? (open ? "inline-block" : "none") : "inline-block",
+          opacity: animate ? (open ? 1 : 0) : 1,
+        }}
+        className="text-neutral-200 text-sm group-hover/sidebar:translate-x-1 transition duration-150 whitespace-pre inline-block !p-0 !m-0"
+      >
+        {link.label}
+      </motion.span>
+    </a>
+  );
+};

frontend/components/utils.js

@@ -0,0 +1,30 @@
+export const cls = (...c) => c.filter(Boolean).join(" ");
+
+export function timeAgo(date) {
+  const d = typeof date === "string" ? new Date(date) : date;
+  const now = new Date();
+  const sec = Math.max(1, Math.floor((now - d) / 1000));
+  const rtf = new Intl.RelativeTimeFormat(undefined, { numeric: "auto" });
+  const ranges = [
+    [60, "seconds"], [3600, "minutes"], [86400, "hours"],
+    [604800, "days"], [2629800, "weeks"], [31557600, "months"],
+  ];
+  let unit = "years";
+  let value = -Math.floor(sec / 31557600);
+  for (const [limit, u] of ranges) {
+    if (sec < limit) {
+      unit = u;
+      const div =
+        unit === "seconds" ? 1 :
+        limit / (unit === "minutes" ? 60 :
+        unit === "hours" ? 3600 :
+        unit === "days" ? 86400 :
+        unit === "weeks" ? 604800 : 2629800);
+      value = -Math.floor(sec / div);
+      break;
+    }
+  }
+  return rtf.format(value, /** @type {Intl.RelativeTimeFormatUnit} */ (unit));
+}
+
+export const makeId = (p) => `${p}${Math.random().toString(36).slice(2, 10)}`;

frontend/eslint.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

frontend/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

frontend/next.config.ts

@@ -0,0 +1,14 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  async rewrites() {
+    return [
+      {
+        source: '/api/proxy/:path*',
+        destination: `${process.env.BACKEND_URL || 'http://4.144.73.42:8000'}/:path*`,
+      },
+    ]
+  },
+};
+
+export default nextConfig;

frontend/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "frontend",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev -p 3001",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "@radix-ui/react-popover": "^1.1.15",
+    "@svgr/webpack": "^8.1.0",
+    "@tabler/icons-react": "^3.35.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.548.0",
+    "motion": "^12.23.24",
+    "next": "^16.0.7",
+    "ogl": "^1.0.11",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1",
+    "react-dropzone": "^14.3.8",
+    "react-icons": "^5.5.0",
+    "react-use-measure": "^2.1.7",
+    "tailwind-merge": "^3.3.1"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.0.0",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}

frontend/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

frontend/tsconfig.json

@@ -0,0 +1,44 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts",
+    ".next\\dev/types/**/*.ts",
+    ".next\\dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

main.py

@@ -19,6 +19,7 @@ def main():
 
     # ------------------------------------------------------------------
     # 0. Configuration
+    # Query defined here
     # ------------------------------------------------------------------
     hf_token        = os.getenv("HF_TOKEN")
     pinecone_api_key = os.getenv("PINECONE_API_KEY")

query_only.py

@@ -0,0 +1,195 @@
+# This file is for inference without actually embedding documents
+# Main does embedding everytime, is redundant for querying.
+# made this just to test querying part --@Qamar
+
+import os
+import time
+from typing import Any
+
+from dotenv import load_dotenv
+
+from vector_db import get_pinecone_index
+from retriever.retriever import HybridRetriever
+from retriever.generator import RAGGenerator
+from retriever.processor import ChunkProcessor
+
+from models.llama_3_8b import Llama3_8B
+from models.mistral_7b import Mistral_7b
+from models.qwen_2_5 import Qwen2_5
+from models.deepseek_v3 import DeepSeek_V3
+from models.tiny_aya import TinyAya
+
+
+def _to_dict_maybe(obj: Any) -> dict[str, Any]:
+    if isinstance(obj, dict):
+        return obj
+    if hasattr(obj, "to_dict"):
+        return obj.to_dict()
+    return {}
+
+
+def _list_namespaces(index) -> list[str]:
+    stats = index.describe_index_stats()
+    stats_dict = _to_dict_maybe(stats)
+
+    namespaces_obj = stats_dict.get("namespaces", {})
+    if not namespaces_obj and hasattr(stats, "namespaces"):
+        namespaces_obj = getattr(stats, "namespaces")
+
+    if isinstance(namespaces_obj, dict):
+        namespaces = list(namespaces_obj.keys())
+    else:
+        namespaces = []
+
+    # Pinecone default namespace can appear as empty string.
+    return namespaces if namespaces else [""]
+
+
+def _load_chunks_from_pinecone(index, batch_size: int = 100) -> list[dict[str, Any]]:
+    namespaces = _list_namespaces(index)
+    all_chunks: list[dict[str, Any]] = []
+    seen_ids = set()
+
+    print(f"Loading existing vectors from Pinecone namespaces: {namespaces}")
+
+    for namespace in namespaces:
+        namespace_arg = namespace if namespace else None
+        vector_count = 0
+
+        for id_batch in index.list(namespace=namespace_arg, limit=batch_size):
+            if not id_batch:
+                continue
+
+            fetched = index.fetch(ids=id_batch, namespace=namespace_arg)
+            vectors = getattr(fetched, "vectors", {})
+
+            for vector_id, vector in vectors.items():
+                if vector_id in seen_ids:
+                    continue
+                seen_ids.add(vector_id)
+
+                metadata = getattr(vector, "metadata", None)
+                if metadata is None and isinstance(vector, dict):
+                    metadata = vector.get("metadata", {})
+
+                if not isinstance(metadata, dict):
+                    metadata = {}
+
+                text = metadata.get("text")
+                if not text:
+                    continue
+
+                all_chunks.append(
+                    {
+                        "id": vector_id,
+                        "metadata": {
+                            "text": text,
+                            "title": metadata.get("title", ""),
+                            "url": metadata.get("url", ""),
+                        },
+                    }
+                )
+                vector_count += 1
+
+        ns_label = namespace if namespace else "<default>"
+        print(f"Loaded {vector_count} chunks from namespace {ns_label}")
+
+    print(f"Total loaded chunks for BM25 corpus: {len(all_chunks)}")
+    return all_chunks
+
+
+def _build_models(hf_token: str) -> dict[str, Any]:
+    return {
+        "Llama-3-8B": Llama3_8B(token=hf_token),
+        "Mistral-7B": Mistral_7b(token=hf_token),
+        "Qwen-2.5": Qwen2_5(token=hf_token),
+        "DeepSeek-V3": DeepSeek_V3(token=hf_token),
+        "TinyAya": TinyAya(token=hf_token),
+    }
+
+
+def main() -> None:
+    pipeline_start = time.perf_counter()
+    load_dotenv()
+
+    hf_token = os.getenv("HF_TOKEN")
+    pinecone_api_key = os.getenv("PINECONE_API_KEY")
+
+    if not pinecone_api_key:
+        raise ValueError("PINECONE_API_KEY not found in environment variables")
+    if not hf_token:
+        raise ValueError("HF_TOKEN not found in environment variables")
+
+    # Configuration
+    # Query defined here
+    query = "How do transformers handle long sequences?"
+    index_name = "arxiv-index"
+    embed_model_name = "all-MiniLM-L6-v2"
+
+    index = get_pinecone_index(
+        api_key=pinecone_api_key,
+        index_name=index_name,
+        dimension=384,
+        metric="cosine",
+    )
+
+    # Load text metadata from Pinecone once and use it as the BM25 corpus.
+    load_start = time.perf_counter()
+    final_chunks = _load_chunks_from_pinecone(index)
+    load_time = time.perf_counter() - load_start
+    print(f"Chunk load time: {load_time:.3f}s")
+    if not final_chunks:
+        raise ValueError(
+            "No chunks found in Pinecone index metadata. Run your indexing pipeline once before query-only mode."
+        )
+
+    # Using ChunkProcessor and HybridRetriever object
+    #using the same pattern as main.py
+
+    proc = ChunkProcessor(model_name=embed_model_name, verbose=True)
+    retriever = HybridRetriever(final_chunks, proc.encoder, verbose=True)
+
+    retrieval_start = time.perf_counter()
+    context_chunks = retriever.search(
+        query,
+        index,
+        mode="hybrid",
+        rerank_strategy="cross-encoder",
+        use_mmr=True,
+        top_k=10,
+        final_k=5,
+    )
+    retrieval_time = time.perf_counter() - retrieval_start
+    print(f"Retrieval call time: {retrieval_time:.3f}s")
+
+    if not context_chunks:
+        print("No context chunks retrieved. Check your query and index contents.")
+        return
+
+    #usign Raggenerator object to get answer from retrieved context
+    rag_engine = RAGGenerator()
+    models = _build_models(hf_token)
+    total_generation_time = 0.0
+
+    for name, model in models.items():
+        print(f"\n--- {name} ---")
+        try:
+            model_gen_start = time.perf_counter()
+            answer = rag_engine.get_answer(model, query, context_chunks, temperature=0.1)
+            model_gen_time = time.perf_counter() - model_gen_start
+            total_generation_time += model_gen_time
+            print(answer)
+            print(f"Generation time ({name}): {model_gen_time:.3f}s")
+        except Exception as exc:
+            print(f"Error: {exc}")
+
+    pipeline_time = time.perf_counter() - pipeline_start
+    print("\nTiming Summary:")
+    print(f"  Chunk Load: {load_time:.3f}s")
+    print(f"  Retrieval: {retrieval_time:.3f}s")
+    print(f"  Generation (all models): {total_generation_time:.3f}s")
+    print(f"  End-to-end: {pipeline_time:.3f}s")
+
+
+if __name__ == "__main__":
+    main()

requirements.txt

@@ -0,0 +1,94 @@
+aiohappyeyeballs==2.6.1
+aiohttp==3.13.3
+aiosignal==1.4.0
+annotated-doc==0.0.4
+annotated-types==0.7.0
+anyio==4.12.1
+arxiv==2.4.1
+attrs==26.1.0
+certifi==2026.2.25
+charset-normalizer==3.4.6
+click==8.3.1
+colorama==0.4.6
+dataclasses-json==0.6.7
+feedparser==6.0.12
+fastapi==0.121.1
+filelock==3.25.2
+frozenlist==1.8.0
+fsspec==2026.2.0
+greenlet==3.3.2
+h11==0.16.0
+hf-xet==1.4.2
+httpcore==1.0.9
+httpx==0.28.1
+httpx-sse==0.4.3
+huggingface_hub==1.7.2
+idna==3.11
+Jinja2==3.1.6
+joblib==1.5.3
+jsonpatch==1.33
+jsonpointer==3.1.1
+langchain-classic==1.0.3
+langchain-community==0.4.1
+langchain-core==1.2.21
+langchain-experimental==0.4.1
+langchain-huggingface==1.2.1
+langchain-text-splitters==1.1.1
+langsmith==0.7.22
+markdown-it-py==4.0.0
+MarkupSafe==3.0.3
+marshmallow==3.26.2
+mdurl==0.1.2
+mpmath==1.3.0
+multidict==6.7.1
+mypy_extensions==1.1.0
+networkx==3.6.1
+nltk==3.9.4
+numpy==2.4.3
+orjson==3.11.7
+packaging==24.2
+pandas==3.0.1
+pinecone==8.1.0
+pinecone-plugin-assistant==3.0.2
+pinecone-plugin-interface==0.0.7
+propcache==0.4.1
+pydantic==2.12.5
+pydantic-settings==2.13.1
+pydantic_core==2.41.5
+Pygments==2.19.2
+PyMuPDF==1.27.2.2
+python-dateutil==2.9.0.post0
+python-dotenv==1.2.2
+PyYAML==6.0.3
+rank-bm25==0.2.2
+regex==2026.2.28
+requests==2.32.5
+requests-toolbelt==1.0.0
+rich==14.3.3
+safetensors==0.7.0
+scikit-learn==1.8.0
+scipy==1.17.1
+sentence-transformers==5.3.0
+setuptools==81.0.0
+sgmllib3k==1.0.0
+shellingham==1.5.4
+six==1.17.0
+SQLAlchemy==2.0.48
+sympy==1.14.0
+tenacity==9.1.4
+threadpoolctl==3.6.0
+tokenizers==0.22.2
+torch==2.11.0
+tqdm==4.67.3
+transformers==5.3.0
+typer==0.24.1
+typing-inspect==0.9.0
+typing-inspection==0.4.2
+typing_extensions==4.15.0
+tzdata==2025.3
+urllib3==2.6.3
+uvicorn==0.38.0
+uuid_utils==0.14.1
+xxhash==3.6.0
+yarl==1.23.0
+zstandard==0.25.0

retriever/retriever.py

@@ -1,4 +1,5 @@
 import numpy as np
+import time
 from rank_bm25 import BM25Okapi
 from sentence_transformers import CrossEncoder
 from sklearn.metrics.pairwise import cosine_similarity
@@ -99,6 +100,11 @@ class HybridRetriever:
         :param lambda_param:     MMR trade-off between relevance (1.0) and diversity (0.0)
         """
         should_print = verbose if verbose is not None else self.verbose
+        total_start = time.perf_counter()
+        semantic_time = 0.0
+        bm25_time = 0.0
+        rerank_time = 0.0
+        mmr_time = 0.0
         
         if should_print:
             self._print_search_header(query, mode, rerank_strategy, top_k, final_k)
@@ -108,16 +114,23 @@ class HybridRetriever:
         semantic_chunks, bm25_chunks = [], []
 
         if mode in ["semantic", "hybrid"]:
+            semantic_start = time.perf_counter()
             query_vector, semantic_chunks = self._semantic_search(query, index, top_k)
+            semantic_time = time.perf_counter() - semantic_start
             if should_print:
                 self._print_candidates("Semantic Search", semantic_chunks)
+                print(f"Semantic time: {semantic_time:.3f}s")
 
         if mode in ["bm25", "hybrid"]:
+            bm25_start = time.perf_counter()
             bm25_chunks = self._bm25_search(query, top_k)
+            bm25_time = time.perf_counter() - bm25_start
             if should_print:
                 self._print_candidates("BM25 Search", bm25_chunks)
+                print(f"BM25 time: {bm25_time:.3f}s")
 
         # 2. Fuse / rerank
+        rerank_start = time.perf_counter()
         if rerank_strategy == "rrf":
             candidates = self._rrf_score(semantic_chunks, bm25_chunks)[:final_k]
             label = "RRF"
@@ -128,17 +141,23 @@ class HybridRetriever:
         else:  # "none"
             candidates = list(dict.fromkeys(semantic_chunks + bm25_chunks))[:final_k]
             label = "No Reranking"
+        rerank_time = time.perf_counter() - rerank_start
 
         # 3. MMR diversity filter (applied after reranking)
         if use_mmr and candidates:
+            mmr_start = time.perf_counter()
             if query_vector is None:
                 query_vector = self.embed_model.encode(query)
             candidates = self._maximal_marginal_relevance(query_vector, candidates,
                                                           lambda_param=lambda_param, top_k=3)
             label += " + MMR"
+            mmr_time = time.perf_counter() - mmr_start
+
+        total_time = time.perf_counter() - total_start
 
         if should_print:
             self._print_final_results(candidates, label)
+            self._print_timing_summary(semantic_time, bm25_time, rerank_time, mmr_time, total_time)
 
         return candidates
 
@@ -165,3 +184,11 @@ class HybridRetriever:
             preview = chunk[:150] + "..." if len(chunk) > 150 else chunk
             print(f"   [{i+1}] {preview}")
         print("="*80)
+
+    def _print_timing_summary(self, semantic_time, bm25_time, rerank_time, mmr_time, total_time):
+        print(" Retrieval Timing:")
+        print(f"   Semantic: {semantic_time:.3f}s")
+        print(f"   BM25: {bm25_time:.3f}s")
+        print(f"   Rerank/Fusion: {rerank_time:.3f}s")
+        print(f"   MMR: {mmr_time:.3f}s")
+        print(f"   Total Retrieval: {total_time:.3f}s")

startup.txt

@@ -0,0 +1,14 @@
+1) Create virtual environment (from project root):
+python -m venv .venv
+
+2) Activate virtual environment in Git Bash:
+source .venv/Scripts/activate
+
+3) Install dependencies from requirements file:
+pip install -r requirements.txt
+
+4) Start FastAPI server with Uvicorn:
+uvicorn api:app --reload --host 0.0.0.0 --port 8000
+
+5) (Optional) Verify server is up:
+Open: http://127.0.0.1:8000/health