Upload 56 files

.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

DEBUG_READ_RECEIPTS.md

@@ -0,0 +1,42 @@
+## Read Receipts Debug Steps
+
+### Current Issue
+Read receipts always show single tick (sent) - never upgrade to double tick (delivered/read).
+
+### What We've Found
+1. Client sends messages ✓
+2. Client receives messages ✓
+3. Client emits `message-delivered` and `message-read` ✓
+4. Server receives these events (should be in logs) ✓
+5. **Server broadcasts `message-status` but sender doesn't receive it** ❌
+
+### Problem
+The server terminal shows NO Socket.IO logs at all! This means either:
+- Socket.IO isn't starting
+- Logs are being buffered by Bun
+
+### Next Steps
+1. **Stop the server** (Ctrl+C in terminal)
+2. **Restart**: `bun dev`
+3. **Look for**: 
+   - "✓ Socket.IO server initialized"
+   - "NEW CLIENT CONNECTED:" when you open the chat
+
+4. **If NO logs appear:**
+   - Socket.IO might not be working
+   - Try using `node server.ts` instead of `bun server.ts`
+
+5. **If logs DO appear:**
+   - Send a message
+   - Look for "Received message-delivered" in server logs
+   - Look for "Broadcasted message-status to room" in server logs
+   - Check if "Received message-status" appears in SENDER browser console
+
+### Expected Flow
+```
+Sender -> send-message -> Server
+Server -> receive-message -> Receiver
+Receiver -> message-delivered/read -> Server
+Server -> message-status -> Sender (THIS ISN'T WORKING)
+Sender updates UI with ✓✓
+```

Dockerfile

@@ -0,0 +1,18 @@
+FROM oven/bun:1 AS base
+WORKDIR /app
+
+# Install dependencies
+COPY package.json bun.lock* ./
+RUN bun install --frozen-lockfile
+
+# Copy source
+COPY . .
+
+# Build
+ENV NODE_ENV=production
+RUN bun run build
+
+# Run
+ENV AUTH_TRUST_HOST=true
+EXPOSE 8000
+CMD ["bun", "server.ts"]

READ_RECEIPTS.md

@@ -0,0 +1,43 @@
+# Read Receipts Implementation
+
+## Overview
+Read receipts are now fully functional in the chat application. Messages show different status indicators based on their delivery and read state.
+
+## How It Works
+
+### Client Side (ChatRoom.tsx)
+1. **Sending Messages**: When a user sends a message, it's added locally with status `"sent"`
+2. **Receiving Messages**: When a message is received:
+   - Client immediately emits `message-delivered` event to server
+   - After successful decryption and display, client emits `message-read` event
+3. **Status Updates**: Client listens for `message-status` events and updates message status accordingly
+
+### Server Side (server.ts)
+1. **message-delivered**: Broadcasts status update to all users in the room
+2. **message-read**: Broadcasts status update to all users in the room
+3. Original sender filters updates by checking `originalSenderId === socket.id`
+
+### Status Progression
+- **sent** (single gray check): Message sent to server
+- **delivered** (double gray check): Message received by recipient
+- **read** (double blue check): Message decrypted and displayed by recipient
+
+## Visual Indicators
+- ✓ (gray) = Sent
+- ✓✓ (gray) = Delivered  
+- ✓✓ (blue) = Read
+
+## Testing
+1. Open two browser windows/tabs
+2. Join the same room from both
+3. Send a message from Window A
+4. Watch the status indicator change:
+   - Starts as single gray check (sent)
+   - Changes to double gray checks (delivered)
+   - Changes to double blue checks (read)
+
+## Technical Details
+- Message IDs are used to track status updates
+- Status updates only apply to the original sender
+- Status can only upgrade (sent → delivered → read), never downgrade
+- All communication is end-to-end encrypted

actions/login.ts

@@ -0,0 +1,58 @@
+"use server";
+
+import { signIn } from "@/auth";
+import { AuthError } from "next-auth";
+import User from "@/models/User";
+import dbConnect from "@/lib/db";
+import { compare } from "bcryptjs";
+
+export const login = async (values: any) => {
+    const { email, password, token } = values;
+
+    try {
+        // Step 1: If no token provided, check credentials and 2FA status
+        if (!token) {
+            await dbConnect();
+            const user = await User.findOne({ email });
+
+            if (!user || !user.password) {
+                return { error: "Invalid credentials" };
+            }
+
+            const isPasswordValid = await compare(password, user.password);
+
+            if (!isPasswordValid) {
+                return { error: "Invalid credentials" };
+            }
+
+            // If 2FA is enabled, signal frontend to show 2FA input
+            if (user.isTwoFactorEnabled) {
+                return { requires2FA: true };
+            }
+        }
+
+        // Step 2: Proceed with signIn (either no 2FA, or 2FA token provided)
+        const result = await signIn("credentials", {
+            email,
+            password,
+            token,
+            redirect: false,
+        });
+
+        if (result?.error) {
+            return { error: "Invalid 2FA token" };
+        }
+
+        return { success: true };
+    } catch (error) {
+        if (error instanceof AuthError) {
+            switch (error.type) {
+                case "CredentialsSignin":
+                    return { error: "Invalid 2FA token" };
+                default:
+                    return { error: "Something went wrong" };
+            }
+        }
+        throw error;
+    }
+};

actions/register.ts

@@ -0,0 +1,31 @@
+"use server";
+
+import { hash } from "bcryptjs";
+import User from "@/models/User";
+import dbConnect from "@/lib/db";
+
+export const registerUser = async (formData: FormData) => {
+    const email = formData.get("email") as string;
+    const password = formData.get("password") as string;
+
+    if (!email || !password) {
+        return { error: "Email and password are required" };
+    }
+
+    await dbConnect();
+
+    const existingUser = await User.findOne({ email });
+
+    if (existingUser) {
+        return { error: "User already exists" };
+    }
+
+    const hashedPassword = await hash(password, 10);
+
+    await User.create({
+        email,
+        password: hashedPassword,
+    });
+
+    return { success: "User created successfully" };
+};

actions/two-factor.ts

@@ -0,0 +1,67 @@
+"use server";
+
+import { auth } from "@/auth";
+import User from "@/models/User";
+import dbConnect from "@/lib/db";
+import { generateTwoFactorSecret, verifyTwoFactorToken } from "@/lib/tokens";
+
+export const getTwoFactorStatus = async () => {
+    const session = await auth();
+    if (!session?.user?.email) return { error: "Unauthorized" };
+
+    await dbConnect();
+    const user = await User.findOne({ email: session.user.email });
+    return { isEnabled: user?.isTwoFactorEnabled };
+};
+
+export const enableTwoFactor = async () => {
+    const session = await auth();
+    if (!session?.user?.email) return { error: "Unauthorized" };
+
+    await dbConnect();
+    const user = await User.findOne({ email: session.user.email });
+
+    if (!user) return { error: "User not found" };
+
+    const { secret, qrCodeUrl } = await generateTwoFactorSecret(user.email);
+
+    user.twoFactorSecret = secret;
+    await user.save();
+
+    return { secret, qrCodeUrl };
+};
+
+export const confirmTwoFactor = async (token: string) => {
+    const session = await auth();
+    if (!session?.user?.email) return { error: "Unauthorized" };
+
+    await dbConnect();
+    const user = await User.findOne({ email: session.user.email });
+
+    if (!user || !user.twoFactorSecret) return { error: "User not found or 2FA not initiated" };
+
+    const isValid = verifyTwoFactorToken(token, user.twoFactorSecret);
+
+    if (!isValid) return { error: "Invalid token" };
+
+    user.isTwoFactorEnabled = true;
+    await user.save();
+
+    return { success: true };
+};
+
+export const disableTwoFactor = async () => {
+    const session = await auth();
+    if (!session?.user?.email) return { error: "Unauthorized" };
+
+    await dbConnect();
+    const user = await User.findOne({ email: session.user.email });
+
+    if (!user) return { error: "User not found" };
+
+    user.isTwoFactorEnabled = false;
+    user.twoFactorSecret = undefined;
+    await user.save();
+
+    return { success: true };
+};

app/(auth)/login/page.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { login } from "@/actions/login";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import Link from "next/link";
+
+export default function LoginPage() {
+    const [email, setEmail] = useState("");
+    const [password, setPassword] = useState("");
+    const [token, setToken] = useState("");
+    const [showTwoFactor, setShowTwoFactor] = useState(false);
+    const [error, setError] = useState("");
+    const router = useRouter();
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setError("");
+
+        try {
+            const res = await login({
+                email,
+                password,
+                token: showTwoFactor ? token : undefined,
+            });
+
+            if (res?.requires2FA) {
+                setShowTwoFactor(true);
+            } else if (res?.error) {
+                setError(res.error);
+            } else {
+                router.push("/settings");
+                router.refresh();
+            }
+        } catch (err) {
+            setError("Something went wrong");
+        }
+    };
+
+    return (
+        <div className="flex items-center justify-center min-h-screen bg-slate-950">
+            <Card className="w-[350px] bg-slate-900 border-slate-800 text-slate-100">
+                <CardHeader>
+                    <CardTitle>Login</CardTitle>
+                </CardHeader>
+                <CardContent>
+                    <form onSubmit={handleSubmit} className="space-y-4">
+                        {!showTwoFactor && (
+                            <>
+                                <div className="space-y-2">
+                                    <label htmlFor="email">Email</label>
+                                    <Input
+                                        id="email"
+                                        type="email"
+                                        value={email}
+                                        onChange={(e) => setEmail(e.target.value)}
+                                        required
+                                        className="bg-slate-950 border-slate-800"
+                                    />
+                                </div>
+                                <div className="space-y-2">
+                                    <label htmlFor="password">Password</label>
+                                    <Input
+                                        id="password"
+                                        type="password"
+                                        value={password}
+                                        onChange={(e) => setPassword(e.target.value)}
+                                        required
+                                        className="bg-slate-950 border-slate-800"
+                                    />
+                                </div>
+                            </>
+                        )}
+
+                        {showTwoFactor && (
+                            <div className="space-y-2">
+                                <label htmlFor="token">2FA Code</label>
+                                <Input
+                                    id="token"
+                                    type="text"
+                                    value={token}
+                                    onChange={(e) => setToken(e.target.value)}
+                                    required
+                                    placeholder="123456"
+                                    className="bg-slate-950 border-slate-800"
+                                />
+                            </div>
+                        )}
+
+                        {error && <p className="text-red-500 text-sm">{error}</p>}
+
+                        <Button type="submit" className="w-full bg-emerald-600 hover:bg-emerald-700">
+                            {showTwoFactor ? "Verify" : "Login"}
+                        </Button>
+                    </form>
+                    <div className="mt-4 text-center text-sm">
+                        <Link href="/register" className="text-emerald-500 hover:underline">
+                            Don't have an account? Register
+                        </Link>
+                    </div>
+                </CardContent>
+            </Card>
+        </div>
+    );
+}

app/(auth)/register/page.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { registerUser } from "@/actions/register";
+import Link from "next/link";
+
+export default function RegisterPage() {
+    const [error, setError] = useState("");
+    const router = useRouter();
+
+    const handleSubmit = async (formData: FormData) => {
+        const res = await registerUser(formData);
+
+        if (res.error) {
+            setError(res.error);
+        } else {
+            router.push("/login");
+        }
+    };
+
+    return (
+        <div className="flex items-center justify-center min-h-screen bg-slate-950">
+            <Card className="w-[350px] bg-slate-900 border-slate-800 text-slate-100">
+                <CardHeader>
+                    <CardTitle>Create Account</CardTitle>
+                </CardHeader>
+                <CardContent>
+                    <form action={handleSubmit} className="space-y-4">
+                        <div className="space-y-2">
+                            <label htmlFor="email">Email</label>
+                            <Input
+                                id="email"
+                                name="email"
+                                type="email"
+                                required
+                                className="bg-slate-950 border-slate-800"
+                            />
+                        </div>
+                        <div className="space-y-2">
+                            <label htmlFor="password">Password</label>
+                            <Input
+                                id="password"
+                                name="password"
+                                type="password"
+                                required
+                                className="bg-slate-950 border-slate-800"
+                            />
+                        </div>
+                        {error && <p className="text-red-500 text-sm">{error}</p>}
+                        <Button type="submit" className="w-full bg-emerald-600 hover:bg-emerald-700">
+                            Register
+                        </Button>
+                    </form>
+                    <div className="mt-4 text-center text-sm">
+                        <Link href="/login" className="text-emerald-500 hover:underline">
+                            Already have an account? Login
+                        </Link>
+                    </div>
+                </CardContent>
+            </Card>
+        </div>
+    );
+}

app/api/auth/[...nextauth]/route.ts

@@ -0,0 +1,2 @@
+import { handlers } from "@/auth" // Referring to the auth.ts we just created
+export const { GET, POST } = handlers

app/api/files/[id]/route.ts

@@ -0,0 +1,62 @@
+import { NextRequest, NextResponse } from "next/server";
+import { readFile, unlink } from "fs/promises";
+import { join } from "path";
+import { existsSync } from "fs";
+
+const UPLOAD_DIR = join(process.cwd(), "uploads");
+
+export async function GET(
+    request: NextRequest,
+    { params }: { params: Promise<{ id: string }> }
+) {
+    try {
+        const { id } = await params;
+        const fileId = id;
+        const filePath = join(UPLOAD_DIR, fileId);
+
+        if (!existsSync(filePath)) {
+            return NextResponse.json(
+                { error: "File not found" },
+                { status: 404 }
+            );
+        }
+
+        const fileBuffer = await readFile(filePath);
+
+        return new NextResponse(fileBuffer, {
+            headers: {
+                "Content-Type": "application/octet-stream",
+                "Content-Disposition": "attachment",
+            },
+        });
+    } catch (error) {
+        console.error("Download error:", error);
+        return NextResponse.json(
+            { error: "Download failed" },
+            { status: 500 }
+        );
+    }
+}
+
+export async function DELETE(
+    request: NextRequest,
+    { params }: { params: Promise<{ id: string }> }
+) {
+    try {
+        const { id } = await params;
+        const fileId = id;
+        const filePath = join(UPLOAD_DIR, fileId);
+
+        if (existsSync(filePath)) {
+            await unlink(filePath);
+        }
+
+        return NextResponse.json({ success: true });
+    } catch (error) {
+        console.error("Delete error:", error);
+        return NextResponse.json(
+            { error: "Delete failed" },
+            { status: 500 }
+        );
+    }
+}

app/api/upload/route.ts

@@ -0,0 +1,61 @@
+import { NextRequest, NextResponse } from "next/server";
+import { writeFile, mkdir } from "fs/promises";
+import { join } from "path";
+import { existsSync } from "fs";
+
+const UPLOAD_DIR = join(process.cwd(), "uploads");
+const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB
+
+// Ensure upload directory exists
+async function ensureUploadDir() {
+    if (!existsSync(UPLOAD_DIR)) {
+        await mkdir(UPLOAD_DIR, { recursive: true });
+    }
+}
+
+export async function POST(request: NextRequest) {
+    try {
+        const formData = await request.formData();
+        const file = formData.get("file") as File;
+
+        if (!file) {
+            return NextResponse.json(
+                { error: "No file provided" },
+                { status: 400 }
+            );
+        }
+
+        // Check file size
+        if (file.size > MAX_FILE_SIZE) {
+            return NextResponse.json(
+                { error: "File too large. Maximum size is 10MB" },
+                { status: 400 }
+            );
+        }
+
+        // Ensure upload directory exists
+        await ensureUploadDir();
+
+        // Generate unique file ID
+        const fileId = crypto.randomUUID();
+        const bytes = await file.arrayBuffer();
+        const buffer = Buffer.from(bytes);
+
+        // Save encrypted file
+        const filePath = join(UPLOAD_DIR, fileId);
+        await writeFile(filePath, buffer);
+
+        return NextResponse.json({
+            fileId,
+            size: file.size,
+            name: file.name,
+            type: file.type,
+        });
+    } catch (error) {
+        console.error("Upload error:", error);
+        return NextResponse.json(
+            { error: "Upload failed" },
+            { status: 500 }
+        );
+    }
+}

app/globals.css

@@ -0,0 +1,158 @@
+@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);
+  
+  --animate-fade-in: fade-in 0.5s ease-out;
+  --animate-fade-in-up: fade-in-up 0.5s ease-out;
+  --animate-pulse-slow: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  
+  @keyframes fade-in {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+  }
+  
+  @keyframes fade-in-up {
+    0% { opacity: 0; transform: translateY(10px); }
+    100% { opacity: 1; transform: translateY(0); }
+  }
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --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.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.12 0.01 240); /* Slightly richer dark blue-grey */
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.18 0.02 240);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.18 0.02 240);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.65 0.2 150); /* Emerald-ish */
+  --primary-foreground: oklch(0.145 0 0);
+  --secondary: oklch(0.25 0.02 240);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.25 0.02 240);
+  --muted-foreground: oklch(0.7 0 0);
+  --accent: oklch(0.25 0.02 240);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.6 0.2 20);
+  --border: oklch(0.3 0.02 240);
+  --input: oklch(0.3 0.02 240);
+  --ring: oklch(0.65 0.2 150);
+  --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.18 0.02 240);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.65 0.2 150);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.25 0.02 240);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.3 0.02 240);
+  --sidebar-ring: oklch(0.65 0.2 150);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground antialiased selection:bg-emerald-500/30 selection:text-emerald-200;
+  }
+}
+
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  @apply bg-muted-foreground/20 rounded-full hover:bg-muted-foreground/40 transition-colors;
+}
+
+/* Glassmorphism Utilities */
+.glass {
+  @apply bg-background/60 backdrop-blur-md border border-border/50;
+}
+
+.glass-card {
+  @apply bg-card/40 backdrop-blur-sm border border-white/10 shadow-xl;
+}

app/layout.tsx

@@ -0,0 +1,44 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+import { Providers } from "@/components/providers";
+import { ThemeProvider } from "@/components/theme-provider";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="dark"
+          forcedTheme="dark"
+          enableSystem={false}
+          disableTransitionOnChange
+        >
+          <Providers>{children}</Providers>
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}

app/page.tsx

@@ -0,0 +1,264 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Card, CardContent } from "@/components/ui/card";
+import { Lock, Shield, Zap, Eye, Users, MessageSquare, ArrowRight, CheckCircle2, X } from "lucide-react";
+
+export default function Home() {
+  const router = useRouter();
+  const [roomCode, setRoomCode] = useState("");
+  const [nickname, setNickname] = useState("");
+  const [userLimit, setUserLimit] = useState("10");
+  const [password, setPassword] = useState("");
+  const [showJoinModal, setShowJoinModal] = useState(false);
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const createRoom = async () => {
+    if (!nickname.trim()) {
+      alert("Please enter a nickname");
+      return;
+    }
+    if (password) {
+      sessionStorage.setItem("temp_room_password", password);
+    }
+    const code = Math.random().toString(36).substring(2, 8).toUpperCase();
+    router.push(`/room/${code}?nickname=${encodeURIComponent(nickname)}&limit=${userLimit}`);
+  };
+
+  const joinRoom = () => {
+    if (!nickname.trim()) {
+      alert("Please enter a nickname");
+      return;
+    }
+    if (roomCode.trim()) {
+      if (password) {
+        sessionStorage.setItem("temp_room_password", password);
+      }
+      router.push(`/room/${roomCode.toUpperCase()}?nickname=${encodeURIComponent(nickname)}`);
+    }
+  };
+
+  if (!mounted) return null;
+
+  return (
+    <div className="min-h-screen bg-background relative overflow-hidden selection:bg-emerald-500/30">
+      {/* Background Gradients */}
+      <div className="fixed inset-0 z-0 pointer-events-none">
+        <div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-emerald-500/10 rounded-full blur-[120px] animate-pulse-slow" />
+        <div className="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-blue-600/10 rounded-full blur-[120px] animate-pulse-slow" style={{ animationDelay: '1.5s' }} />
+      </div>
+
+      {/* Navbar */}
+      <nav className="container mx-auto px-6 py-6 relative z-10">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className="relative w-10 h-10 bg-gradient-to-br from-emerald-400 to-cyan-400 rounded-xl flex items-center justify-center shadow-lg shadow-emerald-500/20">
+              <Lock className="w-6 h-6 text-slate-950" />
+            </div>
+            <span className="text-2xl font-bold bg-gradient-to-r from-emerald-400 to-cyan-400 bg-clip-text text-transparent">
+              WhisperNet
+            </span>
+          </div>
+          <div className="flex gap-4">
+            <Button variant="ghost" className="text-muted-foreground hover:text-foreground">Login</Button>
+            <Button className="bg-emerald-600 hover:bg-emerald-700 text-white shadow-lg shadow-emerald-500/20">Sign Up</Button>
+          </div>
+        </div>
+      </nav>
+
+      <main className="container mx-auto px-6 relative z-10">
+        {/* Hero Content */}
+        <div className="pt-20 pb-24 text-center">
+          <div className="inline-flex items-center gap-2 bg-emerald-500/10 border border-emerald-500/20 rounded-full px-4 py-2 mb-8 animate-fade-in-up">
+            <Shield className="w-4 h-4 text-emerald-400" />
+            <span className="text-sm text-emerald-400 font-medium">End-to-End Encrypted</span>
+          </div>
+
+          <h1 className="text-6xl md:text-7xl font-bold text-foreground mb-6 leading-tight tracking-tight animate-fade-in-up" style={{ animationDelay: '0.1s' }}>
+            Private Conversations,
+            <br />
+            <span className="bg-gradient-to-r from-emerald-400 via-cyan-400 to-blue-400 bg-clip-text text-transparent">
+              Zero Traces
+            </span>
+          </h1>
+
+          <p className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto animate-fade-in-up" style={{ animationDelay: '0.2s' }}>
+            Secure, ephemeral chat rooms with military-grade encryption.
+            No registration, no history, no compromises.
+          </p>
+
+          {/* CTA Buttons */}
+          <div className="flex flex-col sm:flex-row gap-4 justify-center mb-16 animate-fade-in-up" style={{ animationDelay: '0.3s' }}>
+            <Button
+              onClick={() => setShowJoinModal(true)}
+              className="h-14 px-8 text-lg bg-gradient-to-r from-emerald-500 to-cyan-500 hover:from-emerald-600 hover:to-cyan-600 text-white font-semibold shadow-lg shadow-emerald-500/25 hover:shadow-emerald-500/40 transition-all hover:scale-105"
+            >
+              Get Started
+              <ArrowRight className="ml-2 h-5 w-5" />
+            </Button>
+            <Button
+              variant="outline"
+              className="h-14 px-8 text-lg border-border bg-background/50 hover:bg-accent hover:text-accent-foreground backdrop-blur-sm transition-all"
+            >
+              Learn More
+            </Button>
+          </div>
+
+          {/* Feature Cards */}
+          <div className="grid md:grid-cols-3 gap-6 max-w-5xl mx-auto mb-24 animate-fade-in-up" style={{ animationDelay: '0.4s' }}>
+            {[
+              { icon: Lock, title: "E2E Encryption", desc: "Every message encrypted with unique keys. Nobody can intercept your conversations." },
+              { icon: Eye, title: "No Tracking", desc: "Zero data collection. No accounts required. Your privacy is absolute." },
+              { icon: Zap, title: "Instant Setup", desc: "Create or join rooms in seconds. No downloads, no hassle." }
+            ].map((feature, i) => (
+              <Card key={i} className="glass-card border-white/5 hover:border-emerald-500/30 transition-all duration-300 group hover:-translate-y-1">
+                <CardContent className="p-6">
+                  <div className="w-12 h-12 bg-gradient-to-br from-emerald-500/20 to-cyan-500/20 rounded-lg flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300">
+                    <feature.icon className="w-6 h-6 text-emerald-400" />
+                  </div>
+                  <h3 className="text-xl font-bold text-foreground mb-2">{feature.title}</h3>
+                  <p className="text-muted-foreground leading-relaxed">
+                    {feature.desc}
+                  </p>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+
+          {/* Features List */}
+          <div className="max-w-4xl mx-auto mb-24">
+            <h2 className="text-3xl font-bold text-foreground mb-12">
+              Everything you need for secure communication
+            </h2>
+            <div className="grid md:grid-cols-2 gap-6 text-left">
+              {[
+                { icon: MessageSquare, title: "Real-time Messaging", desc: "Instant message delivery with read receipts" },
+                { icon: Users, title: "Group Chats", desc: "Secure rooms for multiple participants" },
+                { icon: Shield, title: "Perfect Forward Secrecy", desc: "New keys for every session" },
+                { icon: CheckCircle2, title: "Typing Indicators", desc: "Know when others are responding" },
+              ].map((feature, i) => (
+                <div key={i} className="flex gap-4 items-start p-4 rounded-xl bg-card/30 border border-border/50 hover:bg-card/50 transition-colors">
+                  <div className="w-10 h-10 bg-emerald-500/10 rounded-lg flex items-center justify-center flex-shrink-0">
+                    <feature.icon className="w-5 h-5 text-emerald-400" />
+                  </div>
+                  <div>
+                    <h3 className="text-lg font-semibold text-foreground mb-1">{feature.title}</h3>
+                    <p className="text-muted-foreground text-sm">{feature.desc}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </main>
+
+      {/* Footer */}
+      <footer className="border-t border-border/50 py-8 relative z-10 bg-background/50 backdrop-blur-sm">
+        <div className="container mx-auto px-6 text-center text-muted-foreground text-sm">
+          <p>© 2025 WhisperNet. Secure by design.</p>
+        </div>
+      </footer>
+
+      {/* Join Modal */}
+      {showJoinModal && (
+        <div className="fixed inset-0 bg-black/60 backdrop-blur-md flex items-center justify-center p-4 z-50 animate-fade-in" onClick={() => setShowJoinModal(false)}>
+          <Card className="w-full max-w-md bg-card border-border shadow-2xl animate-fade-in-up" onClick={(e) => e.stopPropagation()}>
+            <div className="absolute right-4 top-4">
+              <Button variant="ghost" size="icon" onClick={() => setShowJoinModal(false)} className="h-8 w-8 rounded-full hover:bg-muted">
+                <X className="w-4 h-4" />
+              </Button>
+            </div>
+            <CardContent className="p-8 space-y-6">
+              <div className="text-center">
+                <div className="w-12 h-12 bg-emerald-500/10 rounded-xl flex items-center justify-center mx-auto mb-4">
+                  <Users className="w-6 h-6 text-emerald-500" />
+                </div>
+                <h2 className="text-2xl font-bold text-foreground mb-2">Join WhisperNet</h2>
+                <p className="text-muted-foreground text-sm">Enter a nickname to get started</p>
+              </div>
+
+              <div className="space-y-4">
+                <div className="space-y-2">
+                  <label className="text-sm font-medium text-foreground">Your Nickname</label>
+                  <Input
+                    placeholder="Enter your display name"
+                    value={nickname}
+                    onChange={(e) => setNickname(e.target.value)}
+                    className="bg-muted/50 border-border focus:ring-emerald-500 h-11"
+                    autoFocus
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <label className="text-sm font-medium text-foreground">Room Password (Optional)</label>
+                  <Input
+                    type="password"
+                    placeholder="Set a password for the room"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    className="bg-muted/50 border-border focus:ring-emerald-500 h-11"
+                  />
+                </div>
+
+                <div className="pt-4 border-t border-border">
+                  <label className="text-sm font-medium text-foreground mb-2 block">Create Room</label>
+                  <div className="flex gap-3">
+                    <Input
+                      type="number"
+                      placeholder="Max"
+                      value={userLimit}
+                      onChange={(e) => setUserLimit(e.target.value)}
+                      className="w-24 bg-muted/50 border-border focus:ring-emerald-500 h-11"
+                      min={2}
+                      max={50}
+                    />
+                    <Button
+                      onClick={createRoom}
+                      className="flex-1 h-11 bg-emerald-600 hover:bg-emerald-700 text-white font-semibold shadow-lg shadow-emerald-500/20"
+                    >
+                      Create Room
+                    </Button>
+                  </div>
+                </div>
+
+                <div className="relative py-2">
+                  <div className="absolute inset-0 flex items-center">
+                    <span className="w-full border-t border-border" />
+                  </div>
+                  <div className="relative flex justify-center text-xs uppercase">
+                    <span className="bg-card px-2 text-muted-foreground">Or join existing</span>
+                  </div>
+                </div>
+
+                <div className="space-y-2">
+                  <label className="text-sm font-medium text-foreground">Join Room</label>
+                  <div className="flex gap-3">
+                    <Input
+                      placeholder="Enter Room Code"
+                      value={roomCode}
+                      onChange={(e) => setRoomCode(e.target.value)}
+                      className="bg-muted/50 border-border focus:ring-emerald-500 h-11"
+                    />
+                    <Button
+                      onClick={joinRoom}
+                      className="h-11 bg-secondary hover:bg-secondary/80 text-secondary-foreground"
+                    >
+                      Join
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      )}
+    </div>
+  );
+}

app/room/[roomId]/page.tsx

@@ -0,0 +1,15 @@
+import ChatRoom from "@/components/chat/ChatRoom";
+
+interface PageProps {
+    params: Promise<{ roomId: string }>;
+}
+
+export default async function RoomPage({ params }: PageProps) {
+    const { roomId } = await params;
+
+    return (
+        <div className="min-h-screen bg-slate-950">
+            <ChatRoom roomId={roomId} />
+        </div>
+    );
+}

app/settings/page.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { enableTwoFactor, confirmTwoFactor, disableTwoFactor, getTwoFactorStatus } from "@/actions/two-factor";
+import { useSession, signOut } from "next-auth/react";
+import Image from "next/image";
+
+export default function SettingsPage() {
+    const { data: session } = useSession();
+    const [isEnabled, setIsEnabled] = useState(false);
+    const [qrCode, setQrCode] = useState("");
+    const [token, setToken] = useState("");
+    const [step, setStep] = useState<"idle" | "verify">("idle");
+    const [msg, setMsg] = useState("");
+
+    useEffect(() => {
+        getTwoFactorStatus().then((res) => {
+            if (res.isEnabled) setIsEnabled(true);
+        });
+    }, []);
+
+    const handleEnable = async () => {
+        const res = await enableTwoFactor();
+        if (res.qrCodeUrl) {
+            setQrCode(res.qrCodeUrl);
+            setStep("verify");
+        }
+    };
+
+    const handleVerify = async () => {
+        const res = await confirmTwoFactor(token);
+        if (res.success) {
+            setIsEnabled(true);
+            setStep("idle");
+            setQrCode("");
+            setMsg("2FA Enabled Successfully!");
+        } else {
+            setMsg("Invalid Token");
+        }
+    };
+
+    const handleDisable = async () => {
+        await disableTwoFactor();
+        setIsEnabled(false);
+        setMsg("2FA Disabled");
+    };
+
+    if (!session) return <div className="p-10 text-white">Loading...</div>;
+
+    return (
+        <div className="flex flex-col items-center justify-center min-h-screen bg-slate-950 text-slate-100">
+            <Card className="w-[400px] bg-slate-900 border-slate-800 text-slate-100">
+                <CardHeader>
+                    <CardTitle>Settings</CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                    <div className="flex justify-between items-center">
+                        <span>Email:</span>
+                        <span className="text-slate-400">{session.user?.email}</span>
+                    </div>
+
+                    <div className="border-t border-slate-800 pt-4">
+                        <h3 className="text-lg font-semibold mb-2">Two-Factor Authentication</h3>
+                        {isEnabled ? (
+                            <div className="space-y-2">
+                                <p className="text-emerald-500">✅ Enabled</p>
+                                <Button onClick={handleDisable} variant="destructive" className="w-full">
+                                    Disable 2FA
+                                </Button>
+                            </div>
+                        ) : (
+                            <div className="space-y-2">
+                                <p className="text-slate-400">Secure your account with 2FA.</p>
+                                {step === "idle" && (
+                                    <Button onClick={handleEnable} className="w-full bg-emerald-600 hover:bg-emerald-700">
+                                        Enable 2FA
+                                    </Button>
+                                )}
+                            </div>
+                        )}
+
+                        {step === "verify" && qrCode && (
+                            <div className="mt-4 space-y-4">
+                                <div className="flex justify-center bg-white p-2 rounded">
+                                    <Image src={qrCode} alt="QR Code" width={150} height={150} />
+                                </div>
+                                <p className="text-xs text-center text-slate-400">Scan with Google Authenticator</p>
+                                <Input
+                                    value={token}
+                                    onChange={(e) => setToken(e.target.value)}
+                                    placeholder="Enter 6-digit code"
+                                    className="bg-slate-950 border-slate-800"
+                                />
+                                <Button onClick={handleVerify} className="w-full">
+                                    Verify & Activate
+                                </Button>
+                            </div>
+                        )}
+
+                        {msg && <p className="text-center text-sm mt-2">{msg}</p>}
+                    </div>
+
+                    <div className="border-t border-slate-800 pt-4">
+                        <Button onClick={() => signOut()} variant="outline" className="w-full border-slate-700 text-slate-300 hover:bg-slate-800">
+                            Sign Out
+                        </Button>
+                    </div>
+                </CardContent>
+            </Card>
+        </div>
+    );
+}

auth.ts

@@ -0,0 +1,82 @@
+import NextAuth, { CredentialsSignin } from "next-auth";
+import Credentials from "next-auth/providers/credentials";
+import { compare } from "bcryptjs";
+import User from "@/models/User";
+import dbConnect from "@/lib/db";
+import { verifyTwoFactorToken } from "@/lib/tokens";
+
+class TwoFactorRequired extends CredentialsSignin {
+    code = "2FA_REQUIRED";
+}
+
+class InvalidToken extends CredentialsSignin {
+    code = "INVALID_2FA_TOKEN";
+}
+
+export const { handlers, signIn, signOut, auth } = NextAuth({
+    providers: [
+        Credentials({
+            credentials: {
+                email: { label: "Email", type: "email" },
+                password: { label: "Password", type: "password" },
+                token: { label: "2FA Token", type: "text" },
+            },
+            authorize: async (credentials) => {
+                await dbConnect();
+
+                const email = credentials.email as string;
+                const password = credentials.password as string;
+                const token = credentials.token as string | undefined;
+
+                if (!email || !password) {
+                    throw new Error("Missing credentials");
+                }
+
+                const user = await User.findOne({ email });
+
+                if (!user || !user.password) {
+                    throw new Error("Invalid credentials");
+                }
+
+                const isPasswordValid = await compare(password, user.password);
+
+                if (!isPasswordValid) {
+                    throw new Error("Invalid credentials");
+                }
+
+                if (user.isTwoFactorEnabled) {
+                    if (!token) {
+                        throw new TwoFactorRequired();
+                    }
+
+                    const isTokenValid = verifyTwoFactorToken(token, user.twoFactorSecret!);
+
+                    if (!isTokenValid) {
+                        throw new InvalidToken();
+                    }
+                }
+
+                return {
+                    id: user._id.toString(),
+                    email: user.email,
+                    image: user.image,
+                };
+            },
+        }),
+    ],
+    pages: {
+        signIn: "/login",
+    },
+    callbacks: {
+        async session({ session, token }) {
+            if (token.sub && session.user) {
+                session.user.id = token.sub;
+            }
+            return session;
+        },
+        async jwt({ token }) {
+            return token;
+        },
+    },
+    session: { strategy: "jwt" },
+});

components.json

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

components/chat/CallInterface.tsx

@@ -0,0 +1,125 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Mic, MicOff, Video, VideoOff, PhoneOff } from "lucide-react";
+import { Card } from "@/components/ui/card";
+
+interface CallInterfaceProps {
+    localStream: MediaStream | null;
+    remoteStreams: Map<string, MediaStream>;
+    onLeave: () => void;
+    nicknames: Map<string, string>;
+}
+
+export default function CallInterface({ localStream, remoteStreams, onLeave, nicknames }: CallInterfaceProps) {
+    const localVideoRef = useRef<HTMLVideoElement>(null);
+    const [isMuted, setIsMuted] = useState(false);
+    const [isVideoOff, setIsVideoOff] = useState(false);
+
+    useEffect(() => {
+        if (localVideoRef.current && localStream) {
+            localVideoRef.current.srcObject = localStream;
+        }
+    }, [localStream]);
+
+    const toggleMute = () => {
+        if (localStream) {
+            localStream.getAudioTracks().forEach(track => track.enabled = !track.enabled);
+            setIsMuted(!isMuted);
+        }
+    };
+
+    const toggleVideo = () => {
+        if (localStream) {
+            localStream.getVideoTracks().forEach(track => track.enabled = !track.enabled);
+            setIsVideoOff(!isVideoOff);
+        }
+    };
+
+    return (
+        <div className="fixed inset-0 bg-background/95 z-50 flex flex-col p-4">
+            <div className="flex-1 grid grid-cols-2 md:grid-cols-3 gap-4 p-4 overflow-y-auto">
+                {/* Local Video */}
+                <Card className="relative overflow-hidden bg-black/50 aspect-video flex items-center justify-center">
+                    <video
+                        ref={localVideoRef}
+                        autoPlay
+                        muted
+                        playsInline
+                        className={`w-full h-full object-cover ${isVideoOff ? "hidden" : ""}`}
+                    />
+                    {isVideoOff && (
+                        <div className="absolute inset-0 flex items-center justify-center text-muted-foreground">
+                            Video Off
+                        </div>
+                    )}
+                    <div className="absolute bottom-2 left-2 bg-black/50 px-2 py-1 rounded text-xs text-white">
+                        You {isMuted && "(Muted)"}
+                    </div>
+                </Card>
+
+                {/* Remote Videos */}
+                {Array.from(remoteStreams.entries()).map(([socketId, stream]) => (
+                    <RemoteVideo
+                        key={socketId}
+                        stream={stream}
+                        nickname={nicknames.get(socketId) || `User ${socketId.slice(0, 4)}`}
+                    />
+                ))}
+            </div>
+
+            {/* Controls */}
+            <div className="h-20 flex items-center justify-center gap-4 bg-card border-t border-border rounded-t-xl">
+                <Button
+                    variant={isMuted ? "destructive" : "secondary"}
+                    size="icon"
+                    className="rounded-full h-12 w-12"
+                    onClick={toggleMute}
+                >
+                    {isMuted ? <MicOff className="w-5 h-5" /> : <Mic className="w-5 h-5" />}
+                </Button>
+                <Button
+                    variant="destructive"
+                    size="icon"
+                    className="rounded-full h-14 w-14"
+                    onClick={onLeave}
+                >
+                    <PhoneOff className="w-6 h-6" />
+                </Button>
+                <Button
+                    variant={isVideoOff ? "destructive" : "secondary"}
+                    size="icon"
+                    className="rounded-full h-12 w-12"
+                    onClick={toggleVideo}
+                >
+                    {isVideoOff ? <VideoOff className="w-5 h-5" /> : <Video className="w-5 h-5" />}
+                </Button>
+            </div>
+        </div>
+    );
+}
+
+function RemoteVideo({ stream, nickname }: { stream: MediaStream; nickname: string }) {
+    const videoRef = useRef<HTMLVideoElement>(null);
+
+    useEffect(() => {
+        if (videoRef.current) {
+            videoRef.current.srcObject = stream;
+        }
+    }, [stream]);
+
+    return (
+        <Card className="relative overflow-hidden bg-black/50 aspect-video flex items-center justify-center">
+            <video
+                ref={videoRef}
+                autoPlay
+                playsInline
+                className="w-full h-full object-cover"
+            />
+            <div className="absolute bottom-2 left-2 bg-black/50 px-2 py-1 rounded text-xs text-white">
+                {nickname}
+            </div>
+        </Card>
+    );
+}

components/chat/ChatRoom.tsx

@@ -0,0 +1,1017 @@
+"use client";
+
+import { useEffect, useState, useRef } from "react";
+import { socket } from "@/lib/socket";
+import {
+    generateKeyPair,
+    exportKey,
+    importKey,
+    encryptMessage,
+    decryptMessage,
+    generateSymKey,
+    encryptSymMessage,
+    decryptSymMessage,
+    exportSymKey,
+    importSymKey,
+    encryptFile,
+    decryptFile,
+} from "@/lib/crypto";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Send, User, Users, Lock, Check, CheckCheck, Smile, Paperclip, FileIcon, Download, Image as ImageIcon, Settings, Phone, Mic, MicOff, UserX, X } from "lucide-react";
+import { useSearchParams, useRouter } from "next/navigation";
+import dynamic from "next/dynamic";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { ThemeToggle } from "@/components/theme-toggle";
+import { useTheme } from "next-themes";
+import { useWebRTC } from "@/hooks/useWebRTC";
+import CallInterface from "./CallInterface";
+
+const EmojiPicker = dynamic(() => import("emoji-picker-react"), { ssr: false });
+
+interface Message {
+    id: string;
+    senderId: string;
+    content: string;
+    timestamp: number;
+    status?: "sending" | "sent" | "delivered" | "read";
+    type?: "text" | "file";
+    file?: {
+        id: string;
+        name: string;
+        size: number;
+        mimeType: string;
+        url?: string;
+    };
+    encryptedKey?: string;
+    reactions?: Record<string, string[]>; // emoji -> [senderIds]
+}
+
+interface ChatRoomProps {
+    roomId: string;
+}
+
+export default function ChatRoom({ roomId }: ChatRoomProps) {
+    const [messages, setMessages] = useState<Message[]>([]);
+    const [inputMessage, setInputMessage] = useState("");
+    const [isConnected, setIsConnected] = useState(false);
+    const [participantCount, setParticipantCount] = useState(1);
+    const [nicknames, setNicknames] = useState<Map<string, string>>(new Map());
+    const [typingUsers, setTypingUsers] = useState<Set<string>>(new Set());
+    const [showEmojiPicker, setShowEmojiPicker] = useState(false);
+    const [isUploading, setIsUploading] = useState(false);
+    const [activeReactionMessageId, setActiveReactionMessageId] = useState<string | null>(null);
+
+    // Advanced Controls State
+    const [isCreator, setIsCreator] = useState(false);
+    const [isMuted, setIsMuted] = useState(false);
+    const [showPasswordModal, setShowPasswordModal] = useState(false);
+    const [passwordInput, setPasswordInput] = useState("");
+    const [showSettingsModal, setShowSettingsModal] = useState(false);
+    const [showParticipantsModal, setShowParticipantsModal] = useState(false);
+    const [participants, setParticipants] = useState<{ socketId: string; userId: string; nickname?: string; isMuted?: boolean }[]>([]);
+    const [newLimit, setNewLimit] = useState("");
+    const [newPassword, setNewPassword] = useState("");
+
+    const searchParams = useSearchParams();
+    const router = useRouter();
+    const nickname = searchParams.get("nickname") || "Anonymous";
+    const userLimit = searchParams.get("limit") ? parseInt(searchParams.get("limit")!) : undefined;
+    const { theme } = useTheme();
+    const { localStream, remoteStreams, joinCall, leaveCall } = useWebRTC(roomId);
+
+    const myKeys = useRef<{ public: CryptoKey; private: CryptoKey } | null>(null);
+    const otherUsersKeys = useRef<Map<string, CryptoKey>>(new Map());
+    const messagesEndRef = useRef<HTMLDivElement>(null);
+    const typingTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+    const inputRef = useRef<HTMLInputElement>(null);
+    const fileInputRef = useRef<HTMLInputElement>(null);
+
+    const scrollToBottom = () => {
+        messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+    };
+
+    useEffect(() => {
+        scrollToBottom();
+    }, [messages]);
+
+    useEffect(() => {
+        const init = async () => {
+            let userId = sessionStorage.getItem("userId");
+            if (!userId) {
+                userId = crypto.randomUUID();
+                sessionStorage.setItem("userId", userId);
+            }
+
+            const keys = await generateKeyPair();
+            myKeys.current = { public: keys.publicKey, private: keys.privateKey };
+
+            socket.auth = { userId };
+            socket.connect();
+
+            const storedPassword = sessionStorage.getItem("temp_room_password");
+            const password = storedPassword || searchParams.get("password");
+            if (storedPassword) sessionStorage.removeItem("temp_room_password");
+
+            socket.emit("join-room", { roomId, nickname, userLimit, password });
+            setIsConnected(true);
+
+            socket.on("error", (err: string) => {
+                if (err === "Password required" || err === "Invalid password") {
+                    setShowPasswordModal(true);
+                    if (err === "Invalid password") alert("Invalid password");
+                } else if (err === "You are muted") {
+                    alert(err); // Just alert, don't redirect
+                } else {
+                    alert(err);
+                    router.push("/");
+                }
+            });
+
+            socket.on("room-role", (data: { role: string }) => {
+                if (data.role === "creator") setIsCreator(true);
+            });
+
+            socket.on("kicked", (msg: string) => {
+                alert(msg);
+                router.push("/");
+            });
+
+            socket.on("muted", (msg: string) => {
+                setIsMuted(true);
+                alert(msg);
+            });
+
+            socket.on("unmuted", (msg: string) => {
+                setIsMuted(false);
+                alert(msg);
+            });
+
+            socket.on("room-participants", (data: { socketId: string; userId: string; nickname?: string; isMuted: boolean }[]) => {
+                setParticipants(data);
+                const newMap = new Map(nicknames);
+                data.forEach(p => {
+                    if (p.nickname) newMap.set(p.socketId, p.nickname);
+                });
+                setNicknames(newMap);
+            });
+
+            socket.on("user-muted", ({ userId }: { userId: string }) => {
+                setParticipants(prev => prev.map(p => p.userId === userId ? { ...p, isMuted: true } : p));
+                if (userId === sessionStorage.getItem("userId")) setIsMuted(true);
+            });
+
+            socket.on("user-unmuted", ({ userId }: { userId: string }) => {
+                setParticipants(prev => prev.map(p => p.userId === userId ? { ...p, isMuted: false } : p));
+                if (userId === sessionStorage.getItem("userId")) setIsMuted(false);
+            });
+
+            socket.on("room-info", (data: { count: number }) => {
+                setParticipantCount(data.count);
+            });
+
+            socket.on("user-joined", async (data: { socketId: string; userId: string; nickname?: string }) => {
+                if (data.nickname) {
+                    setNicknames(prev => new Map(prev).set(data.socketId, data.nickname!));
+                }
+                setParticipants(prev => {
+                    if (prev.find(p => p.socketId === data.socketId)) return prev;
+                    return [...prev, { socketId: data.socketId, userId: data.userId, nickname: data.nickname }];
+                });
+
+                if (myKeys.current) {
+                    const exportedPub = await exportKey(myKeys.current.public);
+                    socket.emit("signal", {
+                        target: data.socketId,
+                        signal: { type: "offer-key", key: exportedPub },
+                    });
+                }
+            });
+
+            socket.on("user-left", (data: { socketId: string; userId: string }) => {
+                otherUsersKeys.current.delete(data.socketId);
+                setParticipants(prev => prev.filter(p => p.socketId !== data.socketId));
+            });
+
+            socket.on("signal", async (data: { sender: string; signal: any }) => {
+                const { sender, signal } = data;
+                if (signal.type === "offer-key") {
+                    const importedKey = await importKey(signal.key, ["encrypt"]);
+                    otherUsersKeys.current.set(sender, importedKey);
+                    if (myKeys.current) {
+                        const exportedPub = await exportKey(myKeys.current.public);
+                        socket.emit("signal", {
+                            target: sender,
+                            signal: { type: "answer-key", key: exportedPub },
+                        });
+                    }
+                } else if (signal.type === "answer-key") {
+                    const importedKey = await importKey(signal.key, ["encrypt"]);
+                    otherUsersKeys.current.set(sender, importedKey);
+                }
+            });
+
+            socket.on("message-status", (data: { messageId: string; status: "delivered" | "read"; originalSenderId: string }) => {
+                if (data.originalSenderId === socket.id) {
+                    setMessages((prev) =>
+                        prev.map((msg) => {
+                            if (msg.id === data.messageId) {
+                                if (msg.status === "read") return msg;
+                                if (msg.status === "delivered" && data.status === "delivered") return msg;
+                                return { ...msg, status: data.status };
+                            }
+                            return msg;
+                        })
+                    );
+                }
+            });
+
+            socket.on("receive-message", async (data: { senderId: string; payload: any; messageId: string; roomId: string; type?: string }) => {
+                const { senderId, payload, messageId, type } = data;
+
+                socket.emit("message-delivered", {
+                    roomId: data.roomId,
+                    messageId,
+                    senderId,
+                    recipientId: socket.id
+                });
+
+                try {
+                    const myEncryptedKey = payload.keys[socket.id || ""];
+                    if (!myEncryptedKey) return;
+
+                    if (!myKeys.current) return;
+                    const aesKeyRaw = await decryptMessage(myKeys.current.private, myEncryptedKey);
+                    const aesKey = await importSymKey(aesKeyRaw);
+
+                    let content = "";
+                    let fileData = undefined;
+
+                    if (type === "file") {
+                        content = "[FILE]";
+                        fileData = payload.file;
+                    } else {
+                        content = await decryptSymMessage(aesKey, payload.content);
+                    }
+
+                    setMessages((prev) => [
+                        ...prev,
+                        {
+                            id: messageId || crypto.randomUUID(),
+                            senderId,
+                            content,
+                            timestamp: Date.now(),
+                            type: (type as "text" | "file") || "text",
+                            file: fileData,
+                            encryptedKey: myEncryptedKey
+                        },
+                    ]);
+
+                    socket.emit("message-read", {
+                        roomId,
+                        messageId,
+                        senderId,
+                        recipientId: socket.id
+                    });
+                } catch (err) {
+                    console.error("Failed to decrypt message:", err);
+                }
+            });
+
+            socket.on("user-typing", ({ socketId, nickname }: { socketId: string; nickname: string }) => {
+                setTypingUsers(prev => new Set(prev).add(socketId));
+                setNicknames(prev => new Map(prev).set(socketId, nickname));
+            });
+
+            socket.on("user-stopped-typing", ({ socketId }: { socketId: string }) => {
+                setTypingUsers(prev => {
+                    const newSet = new Set(prev);
+                    newSet.delete(socketId);
+                    return newSet;
+                });
+            });
+
+            socket.on("message-reaction-update", (data: { messageId: string; reaction: string; senderId: string }) => {
+                setMessages(prev => prev.map(msg => {
+                    if (msg.id === data.messageId) {
+                        const newReactions = { ...(msg.reactions || {}) };
+
+                        // Check if user is toggling the same reaction
+                        const currentUsers = newReactions[data.reaction] || [];
+                        if (currentUsers.includes(data.senderId)) {
+                            // Remove it (Toggle off)
+                            newReactions[data.reaction] = currentUsers.filter(id => id !== data.senderId);
+                            if (newReactions[data.reaction].length === 0) delete newReactions[data.reaction];
+                        } else {
+                            // Remove user from ALL other reactions first (Single reaction limit)
+                            Object.keys(newReactions).forEach(key => {
+                                const users = newReactions[key] || [];
+                                if (users.includes(data.senderId)) {
+                                    newReactions[key] = users.filter(id => id !== data.senderId);
+                                    if (newReactions[key].length === 0) delete newReactions[key];
+                                }
+                            });
+
+                            // Add new reaction
+                            newReactions[data.reaction] = [...(newReactions[data.reaction] || []), data.senderId];
+                        }
+                        return { ...msg, reactions: newReactions };
+                    }
+                    return msg;
+                }));
+            });
+        };
+
+        init();
+
+        return () => {
+            socket.off("error");
+            socket.off("room-info");
+            socket.off("user-joined");
+            socket.off("user-left");
+            socket.off("signal");
+            socket.off("receive-message");
+            socket.off("message-status");
+            socket.off("user-typing");
+            socket.off("user-stopped-typing");
+            socket.off("room-role");
+            socket.off("kicked");
+            socket.off("muted");
+            socket.off("unmuted");
+            socket.off("room-participants");
+            socket.off("message-reaction-update");
+            socket.disconnect();
+        };
+    }, [roomId, nickname, userLimit, router, searchParams]);
+
+    const sendMessage = async () => {
+        if (!inputMessage.trim() || !myKeys.current) return;
+
+        if (typingTimeoutRef.current) {
+            clearTimeout(typingTimeoutRef.current);
+        }
+        socket.emit("typing-stop", { roomId });
+
+        try {
+            const aesKey = await generateSymKey();
+            const encryptedContent = await encryptSymMessage(aesKey, inputMessage);
+            const rawAesKey = await exportSymKey(aesKey);
+            const keysMap: Record<string, string> = {};
+
+            for (const [userId, pubKey] of otherUsersKeys.current.entries()) {
+                const encryptedAesKey = await encryptMessage(pubKey, rawAesKey);
+                keysMap[userId] = encryptedAesKey;
+            }
+
+            const messageId = crypto.randomUUID();
+
+            socket.emit("send-message", {
+                roomId,
+                payload: {
+                    content: encryptedContent,
+                    keys: keysMap,
+                },
+                senderId: socket.id,
+                messageId,
+                type: "text"
+            });
+
+            setMessages((prev) => [
+                ...prev,
+                {
+                    id: messageId,
+                    senderId: "me",
+                    content: inputMessage,
+                    timestamp: Date.now(),
+                    status: "sent",
+                    type: "text"
+                },
+            ]);
+
+            setInputMessage("");
+        } catch (err) {
+            console.error("Failed to send message:", err);
+        }
+    };
+
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setInputMessage(e.target.value);
+        socket.emit("typing-start", { roomId });
+        if (typingTimeoutRef.current) {
+            clearTimeout(typingTimeoutRef.current);
+        }
+        typingTimeoutRef.current = setTimeout(() => {
+            socket.emit("typing-stop", { roomId });
+        }, 2000);
+    };
+
+    const handleEmojiClick = (emojiData: any) => {
+        const emoji = emojiData.emoji;
+        const input = inputRef.current;
+        if (input) {
+            const start = input.selectionStart || 0;
+            const end = input.selectionEnd || 0;
+            const newValue = inputMessage.substring(0, start) + emoji + inputMessage.substring(end);
+            setInputMessage(newValue);
+            setTimeout(() => {
+                input.focus();
+                input.setSelectionRange(start + emoji.length, start + emoji.length);
+            }, 0);
+        } else {
+            setInputMessage(inputMessage + emoji);
+        }
+        setShowEmojiPicker(false);
+    };
+
+    const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
+        const file = e.target.files?.[0];
+        if (!file || !myKeys.current) return;
+        if (file.size > 10 * 1024 * 1024) {
+            alert("File size must be less than 10MB");
+            return;
+        }
+        setIsUploading(true);
+        try {
+            const fileAesKey = await generateSymKey();
+            const fileBuffer = await file.arrayBuffer();
+            const encryptedFileContent = await encryptFile(fileAesKey, fileBuffer);
+            const encryptedBlob = new Blob([encryptedFileContent], { type: "application/octet-stream" });
+            const formData = new FormData();
+            formData.append("file", encryptedBlob, file.name);
+            const response = await fetch("/api/upload", { method: "POST", body: formData });
+            if (!response.ok) throw new Error("Upload failed");
+            const fileData = await response.json();
+            const rawFileAesKey = await exportSymKey(fileAesKey);
+            const keysMap: Record<string, string> = {};
+            for (const [userId, pubKey] of otherUsersKeys.current.entries()) {
+                const encryptedKey = await encryptMessage(pubKey, rawFileAesKey);
+                keysMap[userId] = encryptedKey;
+            }
+            if (myKeys.current && socket.id) {
+                const myEncryptedKey = await encryptMessage(myKeys.current.public, rawFileAesKey);
+                keysMap[socket.id] = myEncryptedKey;
+            }
+            const messageId = crypto.randomUUID();
+            socket.emit("send-message", {
+                roomId,
+                payload: {
+                    content: "[FILE]",
+                    keys: keysMap,
+                    file: {
+                        id: fileData.fileId,
+                        name: file.name,
+                        size: file.size,
+                        mimeType: file.type,
+                    }
+                },
+                senderId: socket.id,
+                messageId,
+                type: "file"
+            });
+            setMessages((prev) => [
+                ...prev,
+                {
+                    id: messageId,
+                    senderId: "me",
+                    content: "[FILE]",
+                    timestamp: Date.now(),
+                    status: "sent",
+                    type: "file",
+                    file: {
+                        id: fileData.fileId,
+                        name: file.name,
+                        size: file.size,
+                        mimeType: file.type,
+                    },
+                    encryptedKey: socket.id ? keysMap[socket.id] : undefined
+                },
+            ]);
+            if (fileInputRef.current) fileInputRef.current.value = "";
+        } catch (error) {
+            console.error("File upload error:", error);
+            alert("Failed to upload file");
+        } finally {
+            setIsUploading(false);
+        }
+    };
+
+    const getTypingIndicator = () => {
+        if (typingUsers.size === 0) return null;
+        const typingNames = Array.from(typingUsers).map(socketId =>
+            nicknames.get(socketId) || `User ${socketId.slice(0, 4)}`
+        );
+        if (typingNames.length === 1) return `${typingNames[0]} is typing...`;
+        if (typingNames.length === 2) return `${typingNames[0]} and ${typingNames[1]} are typing...`;
+        return `${typingNames.length} people are typing...`;
+    };
+
+    const handleDownload = async (fileId: string, fileName: string, encryptedKey: string) => {
+        try {
+            const response = await fetch(`/api/files/${fileId}`);
+            if (!response.ok) throw new Error("Download failed");
+            const encryptedBlob = await response.blob();
+            const encryptedBuffer = await encryptedBlob.arrayBuffer();
+            if (!myKeys.current) return;
+            const aesKeyRaw = await decryptMessage(myKeys.current.private, encryptedKey);
+            const aesKey = await importSymKey(aesKeyRaw);
+            const decryptedBuffer = await decryptFile(aesKey, encryptedBuffer);
+            const blob = new Blob([decryptedBuffer]);
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement("a");
+            a.href = url;
+            a.download = fileName;
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+            URL.revokeObjectURL(url);
+        } catch (error) {
+            console.error("Download error:", error);
+            alert("Failed to download file");
+        }
+    };
+
+    const handleReaction = (messageId: string, emoji: string) => {
+        if (!socket.id) return;
+
+        // Optimistic update
+        setMessages(prev => prev.map(msg => {
+            if (msg.id === messageId) {
+                const newReactions = { ...(msg.reactions || {}) };
+                const users = newReactions[emoji] || [];
+
+                // Check if user is toggling the same reaction
+                if (users.includes(socket.id!)) {
+                    newReactions[emoji] = users.filter(id => id !== socket.id);
+                    if (newReactions[emoji].length === 0) delete newReactions[emoji];
+                } else {
+                    // Remove user from ALL other reactions first (Single reaction limit)
+                    Object.keys(newReactions).forEach(key => {
+                        const rUsers = newReactions[key] || [];
+                        if (rUsers.includes(socket.id!)) {
+                            newReactions[key] = rUsers.filter(id => id !== socket.id!);
+                            if (newReactions[key].length === 0) delete newReactions[key];
+                        }
+                    });
+
+                    // Add new reaction
+                    newReactions[emoji] = [...users, socket.id!];
+                }
+                return { ...msg, reactions: newReactions };
+            }
+            return msg;
+        }));
+
+        socket.emit("message-reaction", {
+            roomId,
+            messageId,
+            reaction: emoji,
+            senderId: socket.id
+        });
+        setActiveReactionMessageId(null);
+    };
+
+    const COMMON_REACTIONS = ["👍", "❤️", "😂", "😮", "😢", "😡"];
+
+    return (
+        <div className="flex flex-col h-screen max-w-5xl mx-auto p-2 md:p-4">
+            <Card className="flex-1 !py-0 !px-0 flex flex-col bg-background/50 backdrop-blur-sm border-border/50 shadow-2xl overflow-hidden">
+                <CardHeader className="border-b border-border/40 py-4 px-6 flex flex-row items-center justify-between bg-background/40 backdrop-blur-md sticky top-0 z-10">
+                    <div className="flex items-center gap-3">
+                        <div className="bg-gradient-to-br from-emerald-500 to-cyan-500 p-2.5 rounded-xl shadow-lg shadow-emerald-500/20">
+                            <Lock className="w-5 h-5 text-white" />
+                        </div>
+                        <div>
+                            <CardTitle className="text-lg flex items-center gap-2 font-bold tracking-tight">
+                                Room: <span className="font-mono text-emerald-500">{roomId}</span>
+                            </CardTitle>
+                            <p className="text-xs text-muted-foreground flex items-center gap-1">
+                                <span className={`w-1.5 h-1.5 rounded-full ${isConnected ? "bg-emerald-500 animate-pulse" : "bg-red-500"}`} />
+                                {isConnected ? "Encrypted Connection Active" : "Disconnected"}
+                            </p>
+                        </div>
+                    </div>
+                    <div className="flex items-center gap-2">
+                        <div className="flex items-center bg-muted/50 rounded-full p-1 border border-border/50">
+                            <Button variant="ghost" size="sm" onClick={() => setShowParticipantsModal(true)} className="text-muted-foreground hover:text-foreground rounded-full h-8 px-3">
+                                <Users className="w-4 h-4 mr-2" />
+                                <span>{participantCount}</span>
+                            </Button>
+                            {isCreator && (
+                                <Button variant="ghost" size="icon" onClick={() => setShowSettingsModal(true)} className="text-muted-foreground hover:text-foreground rounded-full h-8 w-8">
+                                    <Settings className="w-4 h-4" />
+                                </Button>
+                            )}
+                        </div>
+                        <div className="h-6 w-px bg-border/50 mx-1" />
+                        <Button
+                            variant="ghost"
+                            size="icon"
+                            onClick={joinCall}
+                            className="text-muted-foreground hover:text-emerald-500 hover:bg-emerald-500/10 rounded-full transition-all"
+                            title="Start Call"
+                        >
+                            <Phone className="w-5 h-5" />
+                        </Button>
+                        <ThemeToggle />
+                    </div>
+                </CardHeader>
+
+                {localStream && (
+                    <CallInterface
+                        localStream={localStream}
+                        remoteStreams={remoteStreams}
+                        onLeave={leaveCall}
+                        nicknames={nicknames}
+                    />
+                )}
+
+                <CardContent className="flex-1 overflow-hidden p-0 relative">
+                    <ScrollArea className="h-full px-4 py-2">
+                        <div className="flex flex-col gap-4">
+                            {messages.map((msg) => {
+                                const isMe = msg.senderId === "me";
+                                const senderName = isMe ? "Me" : (nicknames.get(msg.senderId) || `User ${msg.senderId.slice(0, 4)}`);
+
+                                return (
+                                    <div
+                                        key={msg.id}
+                                        className={`flex ${isMe ? "justify-end" : "justify-start"} animate-fade-in-up`}
+                                    >
+                                        {!isMe && (
+                                            <div className="flex flex-col items-start mr-2">
+                                                <div className="w-8 h-8 rounded-full bg-gradient-to-br from-purple-500 to-indigo-500 flex items-center justify-center text-white text-xs font-bold shadow-sm">
+                                                    {senderName.charAt(0).toUpperCase()}
+                                                </div>
+                                            </div>
+                                        )}
+                                        <div className="relative group max-w-[80%]">
+                                            {!isMe && (
+                                                <span className="text-[10px] text-muted-foreground ml-1 mb-1 block">
+                                                    {senderName}
+                                                </span>
+                                            )}
+                                            <div
+                                                className={`rounded-2xl px-4 py-3 relative shadow-md transition-all ${isMe
+                                                    ? "bg-gradient-to-br from-emerald-500 to-emerald-600 text-white rounded-tr-sm"
+                                                    : "bg-card border border-border/50 text-foreground rounded-tl-sm hover:border-emerald-500/30"
+                                                    }`}
+                                            >
+                                                {/* Reaction Button (Visible on Hover) */}
+                                                <button
+                                                    onClick={() => setActiveReactionMessageId(activeReactionMessageId === msg.id ? null : msg.id)}
+                                                    className={`absolute ${isMe ? "-left-8" : "-right-8"} top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-all p-1.5 hover:bg-background/20 rounded-full backdrop-blur-sm`}
+                                                >
+                                                    <Smile className="w-4 h-4 text-muted-foreground" />
+                                                </button>
+
+                                                {/* Reaction Picker Popover */}
+                                                {activeReactionMessageId === msg.id && (
+                                                    <div className={`absolute ${isMe ? "right-full mr-2" : "left-full ml-2"} top-1/2 -translate-y-1/2 bg-popover/90 backdrop-blur-md border border-border rounded-full shadow-xl p-1.5 flex gap-1 z-50 animate-fade-in`}>
+                                                        {COMMON_REACTIONS.map(emoji => (
+                                                            <button
+                                                                key={emoji}
+                                                                onClick={() => handleReaction(msg.id, emoji)}
+                                                                className="hover:bg-muted p-1.5 rounded-full text-lg transition-transform hover:scale-110"
+                                                            >
+                                                                {emoji}
+                                                            </button>
+                                                        ))}
+                                                    </div>
+                                                )}
+
+                                                {msg.type === "file" && msg.file ? (
+                                                    <div className="flex items-center gap-3">
+                                                        <div className={`p-2.5 rounded-xl ${isMe ? "bg-black/20" : "bg-muted"}`}>
+                                                            <FileIcon className="w-6 h-6" />
+                                                        </div>
+                                                        <div className="flex flex-col overflow-hidden">
+                                                            <span className="text-sm font-medium truncate max-w-[150px]">{msg.file.name}</span>
+                                                            <span className="text-xs opacity-70">{(msg.file.size / 1024).toFixed(1)} KB</span>
+                                                        </div>
+                                                        {!isMe && msg.encryptedKey && (
+                                                            <Button
+                                                                variant="ghost"
+                                                                size="icon"
+                                                                className="h-8 w-8 hover:bg-black/10 rounded-full"
+                                                                onClick={() => handleDownload(msg.file!.id, msg.file!.name, msg.encryptedKey!)}
+                                                            >
+                                                                <Download className="w-4 h-4" />
+                                                            </Button>
+                                                        )}
+                                                    </div>
+                                                ) : (
+                                                    <div className={`markdown-content text-sm leading-relaxed break-words break-all whitespace-pre-wrap ${isMe ? 'text-white' : 'text-foreground'}`}>
+                                                        <ReactMarkdown
+                                                            remarkPlugins={[remarkGfm]}
+                                                            components={{
+                                                                p: ({ node, ...props }) => <p className="mb-1 last:mb-0" {...props} />,
+                                                                a: ({ node, ...props }) => <a className="underline hover:opacity-80 transition-opacity" target="_blank" rel="noopener noreferrer" {...props} />,
+                                                                code: ({ node, className, children, ...props }: any) => {
+                                                                    const match = /language-(\w+)/.exec(className || '')
+                                                                    return !match ? (
+                                                                        <code className={`rounded px-1 py-0.5 font-mono text-xs ${isMe ? "bg-black/20" : "bg-muted"}`} {...props}>
+                                                                            {children}
+                                                                        </code>
+                                                                    ) : (
+                                                                        <code className={`block rounded p-2 font-mono text-xs overflow-x-auto my-1 ${isMe ? "bg-black/20" : "bg-muted"}`} {...props}>
+                                                                            {children}
+                                                                        </code>
+                                                                    )
+                                                                },
+                                                                ul: ({ node, ...props }) => <ul className="list-disc list-inside mb-1" {...props} />,
+                                                                ol: ({ node, ...props }) => <ol className="list-decimal list-inside mb-1" {...props} />,
+                                                                blockquote: ({ node, ...props }) => <blockquote className="border-l-2 border-current pl-2 italic my-1 opacity-80" {...props} />,
+                                                            }}
+                                                        >
+                                                            {msg.content}
+                                                        </ReactMarkdown>
+                                                    </div>
+                                                )}
+
+                                                {/* Reactions Display */}
+                                                {msg.reactions && Object.keys(msg.reactions).length > 0 && (
+                                                    <div className={`absolute -bottom-3 ${isMe ? 'right-0' : 'left-0'} flex items-center gap-0.5 bg-background/80 backdrop-blur-md border border-border/50 rounded-full px-1.5 py-0.5 shadow-sm z-10`}>
+                                                        {Object.entries(msg.reactions).map(([emoji, users]) => (
+                                                            <button
+                                                                key={emoji}
+                                                                onClick={() => handleReaction(msg.id, emoji)}
+                                                                className={`text-[10px] min-w-[20px] h-[16px] flex items-center justify-center rounded-full transition-all hover:scale-110 ${users.includes(socket.id!) ? 'bg-emerald-500/20 text-emerald-500' : 'hover:bg-muted/50'}`}
+                                                                title={users.map(u => nicknames.get(u) || u).join(", ")}
+                                                            >
+                                                                <span className="mr-0.5">{emoji}</span>
+                                                                <span className="font-medium opacity-80">{users.length}</span>
+                                                            </button>
+                                                        ))}
+                                                    </div>
+                                                )}
+                                                <span className="text-[10px] opacity-60 block mt-1 flex items-center justify-end gap-1">
+                                                    {new Date(msg.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+                                                    {isMe && (
+                                                        <span>
+                                                            {msg.status === "sending" && <Check className="w-3 h-3 opacity-70" />}
+                                                            {msg.status === "sent" && <Check className="w-3 h-3 opacity-70" />}
+                                                            {msg.status === "delivered" && <CheckCheck className="w-3 h-3 opacity-70" />}
+                                                            {msg.status === "read" && <CheckCheck className="w-3 h-3 text-blue-200" />}
+                                                        </span>
+                                                    )}
+                                                </span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                );
+                            })}
+                            <div ref={messagesEndRef} />
+                        </div>
+                    </ScrollArea>
+                </CardContent>
+
+                <div className="p-3 border-t border-border/40 bg-background/40 backdrop-blur-md">
+                    {typingUsers.size > 0 && (
+                        <div className="text-xs text-emerald-500 mb-2 italic animate-pulse flex items-center gap-1 px-2">
+                            <span className="w-1 h-1 rounded-full bg-emerald-500 animate-bounce" />
+                            <span className="w-1 h-1 rounded-full bg-emerald-500 animate-bounce delay-75" />
+                            <span className="w-1 h-1 rounded-full bg-emerald-500 animate-bounce delay-150" />
+                            {getTypingIndicator()}
+                        </div>
+                    )}
+                    <div className="relative">
+                        {showEmojiPicker && (
+                            <div className="absolute bottom-full right-0 mb-4 z-50 animate-fade-in-up">
+                                <EmojiPicker
+                                    onEmojiClick={handleEmojiClick}
+                                    theme={"dark" as any}
+                                    lazyLoadEmojis={true}
+                                    style={{ boxShadow: '0 10px 40px rgba(0,0,0,0.5)', border: '1px solid var(--border)', backgroundColor: '#0f172a' }}
+                                />
+                            </div>
+                        )}
+                        <form
+                            onSubmit={(e) => {
+                                e.preventDefault();
+                                sendMessage();
+                            }}
+                            className="relative flex items-center gap-2 bg-muted/30 rounded-3xl border border-border/50 focus-within:border-emerald-500/50 focus-within:ring-1 focus-within:ring-emerald-500/20 transition-all p-1.5"
+                        >
+                            <input
+                                type="file"
+                                ref={fileInputRef}
+                                onChange={handleFileSelect}
+                                className="hidden"
+                            />
+
+                            <Button
+                                type="button"
+                                size="icon"
+                                variant="ghost"
+                                onClick={() => fileInputRef.current?.click()}
+                                className="text-muted-foreground hover:text-emerald-500 hover:bg-emerald-500/10 rounded-full h-9 w-9 transition-colors shrink-0"
+                                disabled={isUploading}
+                            >
+                                {isUploading ? (
+                                    <div className="w-4 h-4 border-2 border-muted-foreground border-t-emerald-500 rounded-full animate-spin" />
+                                ) : (
+                                    <Paperclip className="w-5 h-5" />
+                                )}
+                            </Button>
+
+                            <Input
+                                ref={inputRef}
+                                value={inputMessage}
+                                onChange={handleInputChange}
+                                maxLength={1000}
+                                placeholder="Type a secure message..."
+                                className="flex-1 bg-transparent border-none text-foreground focus-visible:ring-0 px-2 py-3 h-auto shadow-none placeholder:text-muted-foreground/70"
+                            />
+
+                            {inputMessage.length > 0 && (
+                                <span className={`text-[10px] font-mono mr-2 ${inputMessage.length > 900 ? "text-red-500 font-bold" : "text-muted-foreground/50"}`}>
+                                    {inputMessage.length}/1000
+                                </span>
+                            )}
+
+                            <div className="flex items-center gap-1 pr-1">
+                                <Button
+                                    type="button"
+                                    size="icon"
+                                    variant="ghost"
+                                    onClick={() => setShowEmojiPicker(!showEmojiPicker)}
+                                    className={`h-9 w-9 rounded-full transition-colors ${showEmojiPicker ? 'text-emerald-500 bg-emerald-500/10' : 'text-muted-foreground hover:text-emerald-500 hover:bg-emerald-500/10'}`}
+                                >
+                                    <Smile className="w-5 h-5" />
+                                </Button>
+
+                                <Button
+                                    type="submit"
+                                    size="icon"
+                                    className="bg-emerald-600 hover:bg-emerald-700 text-white rounded-full h-9 w-9 shadow-lg shadow-emerald-500/20 transition-transform hover:scale-105 shrink-0"
+                                    disabled={!isConnected}
+                                >
+                                    <Send className="w-4 h-4 ml-0.5" />
+                                </Button>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </Card>
+
+            {/* Password Modal */}
+            {
+                showPasswordModal && (
+                    <div className="fixed inset-0 bg-black/80 backdrop-blur-sm flex items-center justify-center z-50">
+                        <Card className="w-full max-w-sm bg-slate-900 border-slate-800">
+                            <CardHeader>
+                                <CardTitle className="text-white">Password Required</CardTitle>
+                            </CardHeader>
+                            <CardContent className="space-y-4">
+                                <Input
+                                    type="password"
+                                    placeholder="Enter room password"
+                                    value={passwordInput}
+                                    onChange={(e) => setPasswordInput(e.target.value)}
+                                    className="bg-slate-950 border-slate-800 text-white"
+                                />
+                                <Button
+                                    onClick={() => {
+                                        socket.emit("join-room", { roomId, nickname, userLimit, password: passwordInput });
+                                        setShowPasswordModal(false);
+                                    }}
+                                    className="w-full bg-emerald-600 hover:bg-emerald-700"
+                                >
+                                    Join Room
+                                </Button>
+                            </CardContent>
+                        </Card>
+                    </div>
+                )
+            }
+
+            {/* Settings Modal */}
+            {
+                showSettingsModal && (
+                    <div className="fixed inset-0 bg-black/80 backdrop-blur-sm flex items-center justify-center z-50" onClick={() => setShowSettingsModal(false)}>
+                        <Card className="w-full max-w-md bg-slate-900 border-slate-800" onClick={e => e.stopPropagation()}>
+                            <CardHeader className="flex flex-row items-center justify-between">
+                                <CardTitle className="text-white">Room Settings</CardTitle>
+                                <Button variant="ghost" size="icon" onClick={() => setShowSettingsModal(false)}>
+                                    <X className="w-4 h-4 text-slate-400" />
+                                </Button>
+                            </CardHeader>
+                            <CardContent className="space-y-4">
+                                <div className="space-y-2">
+                                    <label className="text-sm text-slate-400">User Limit</label>
+                                    <Input
+                                        type="number"
+                                        placeholder="Max users"
+                                        value={newLimit}
+                                        onChange={(e) => setNewLimit(e.target.value)}
+                                        className="bg-slate-950 border-slate-800 text-white"
+                                    />
+                                </div>
+                                <div className="space-y-2">
+                                    <label className="text-sm text-slate-400">Update Password (leave empty to remove)</label>
+                                    <Input
+                                        type="password"
+                                        placeholder="New password"
+                                        value={newPassword}
+                                        onChange={(e) => setNewPassword(e.target.value)}
+                                        className="bg-slate-950 border-slate-800 text-white"
+                                    />
+                                </div>
+                                <Button
+                                    onClick={() => {
+                                        socket.emit("update-room-settings", {
+                                            roomId,
+                                            limit: newLimit ? parseInt(newLimit) : undefined,
+                                            password: newPassword
+                                        });
+                                        setShowSettingsModal(false);
+                                        setNewPassword("");
+                                        setNewLimit("");
+                                    }}
+                                    className="w-full bg-emerald-600 hover:bg-emerald-700"
+                                >
+                                    Save Changes
+                                </Button>
+                            </CardContent>
+                        </Card>
+                    </div>
+                )
+            }
+
+            {/* Participants Modal */}
+            {
+                showParticipantsModal && (
+                    <div className="fixed inset-0 bg-black/80 backdrop-blur-sm flex items-center justify-center z-50" onClick={() => setShowParticipantsModal(false)}>
+                        <Card className="w-full max-w-md bg-slate-900 border-slate-800 max-h-[80vh] flex flex-col" onClick={e => e.stopPropagation()}>
+                            <CardHeader className="flex flex-row items-center justify-between border-b border-slate-800">
+                                <CardTitle className="text-white">Participants ({participants.length})</CardTitle>
+                                <Button variant="ghost" size="icon" onClick={() => setShowParticipantsModal(false)}>
+                                    <X className="w-4 h-4 text-slate-400" />
+                                </Button>
+                            </CardHeader>
+                            <CardContent className="p-0 overflow-hidden flex-1">
+                                <ScrollArea className="h-full max-h-[60vh]">
+                                    <div className="p-4 space-y-2">
+                                        {participants.map((p) => (
+                                            <div key={p.socketId} className="flex items-center justify-between p-2 rounded bg-slate-950/50 border border-slate-800">
+                                                <div className="flex items-center gap-3">
+                                                    <div className="w-8 h-8 rounded-full bg-emerald-500/10 flex items-center justify-center">
+                                                        <User className="w-4 h-4 text-emerald-400" />
+                                                    </div>
+                                                    <div>
+                                                        <p className="text-sm font-medium text-white">
+                                                            {p.nickname || "Anonymous"}
+                                                            {p.socketId === socket.id && " (You)"}
+                                                        </p>
+                                                        <p className="text-xs text-slate-500">ID: {p.userId.slice(0, 8)}...</p>
+                                                    </div>
+                                                </div>
+                                                {isCreator && p.socketId !== socket.id && (
+                                                    <div className="flex items-center gap-1">
+                                                        {p.isMuted ? (
+                                                            <Button
+                                                                variant="ghost"
+                                                                size="icon"
+                                                                className="h-8 w-8 text-red-400 hover:text-red-300"
+                                                                onClick={() => socket.emit("unmute-user", { roomId, targetUserId: p.userId })}
+                                                                title="Unmute"
+                                                            >
+                                                                <MicOff className="w-4 h-4" />
+                                                            </Button>
+                                                        ) : (
+                                                            <Button
+                                                                variant="ghost"
+                                                                size="icon"
+                                                                className="h-8 w-8 text-slate-400 hover:text-yellow-400"
+                                                                onClick={() => socket.emit("mute-user", { roomId, targetUserId: p.userId })}
+                                                                title="Mute"
+                                                            >
+                                                                <Mic className="w-4 h-4" />
+                                                            </Button>
+                                                        )}
+                                                        <Button
+                                                            variant="ghost"
+                                                            size="icon"
+                                                            className="h-8 w-8 text-slate-400 hover:text-red-400"
+                                                            onClick={() => socket.emit("kick-user", { roomId, targetUserId: p.userId })}
+                                                            title="Kick"
+                                                        >
+                                                            <UserX className="w-4 h-4" />
+                                                        </Button>
+                                                    </div>
+                                                )}
+                                            </div>
+                                        ))}
+                                    </div>
+                                </ScrollArea>
+                            </CardContent>
+                        </Card>
+                    </div>
+                )
+            }
+        </div >
+    );
+}

components/providers.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import { SessionProvider } from "next-auth/react";
+
+export function Providers({ children }: { children: React.ReactNode }) {
+    return <SessionProvider>{children}</SessionProvider>;
+}

components/theme-provider.tsx

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

components/theme-toggle.tsx

@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import { Moon, Sun } from "lucide-react"
+import { useTheme } from "next-themes"
+
+import { Button } from "@/components/ui/button"
+
+export function ThemeToggle() {
+    const { setTheme, theme } = useTheme()
+
+    return (
+        <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => setTheme(theme === "light" ? "dark" : "light")}
+            className="rounded-full"
+        >
+            <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+            <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+            <span className="sr-only">Toggle theme</span>
+        </Button>
+    )
+}

components/ui/button.tsx

@@ -0,0 +1,60 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

components/ui/card.tsx

@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

components/ui/input.tsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

components/ui/scroll-area.tsx

@@ -0,0 +1,58 @@
+"use client"
+
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none",
+        orientation === "vertical" &&
+          "h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" &&
+          "h-2.5 flex-col border-t border-t-transparent",
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="bg-border relative flex-1 rounded-full"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  )
+}
+
+export { ScrollArea, ScrollBar }

docs/details.md

@@ -0,0 +1,1362 @@
+
+
+Project Synopsis
+
+TITLE OF THE PROJECT:
+
+End-to-End Encrypted Chat Room Web
+
+Application
+
+CONTENTS OF SYNOPSIS
+
+
+
+        Title of the Project........................................................................................................................................................... Catalog
+
+        Introduction and Objectives of the Project.........................................................................................................
+
+        2.1 Introduction...........................................................................................................................................................
+
+        2.2 Objectives...............................................................................................................................................................
+
+        Project Category...............................................................................................................................................................
+
+        Analysis................................................................................................................................................................................
+
+        4.1 User Flow Diagram (Activity Diagram)....................................................................................................
+
+        4.2 Context Level DFD (Level 0)..........................................................................................................................
+
+        4.3 Level 1 DFD............................................................................................................................................................
+
+        4.4 Level 2 DFDs.......................................................................................................................................................
+
+        4.4.1 Level 2 DFD for Process 1.0: Room Creation \& Access Control.............................................
+
+        4.4.2 Level 2 DFD for Message Exchange (Involving P3.0 and P4.0)..............................................
+
+        4.5 Entity Relationship Diagram (ERD) / Database Design (for Temporary Room Data)...
+
+        Complete System Structure.....................................................................................................................................
+
+        5.1 Number of Modules and their Description..........................................................................................
+
+        5.2 Data Structures..................................................................................................................................................
+
+        5.3 Process Logic of Each Module....................................................................................................................
+
+        5.4 Testing Process to be Used..........................................................................................................................
+
+        5.5 Reports Generation.........................................................................................................................................
+
+        Tools / Platform, Hardware and Software Requirement Specifications............................................
+
+        6.1 Software Requirements................................................................................................................................
+
+        6.2 Hardware Requirements..............................................................................................................................
+
+        Industry/Client Affiliation........................................................................................................................................
+
+        Future Scope and Further Enhancement of the Project.............................................................................
+
+        Limitations of the Project (Initial Version)......................................................................................................
+
+        Security and Validation Checks...........................................................................................................................
+
+        Bibliography (References).....................................................................................................................................
+
+
+
+1\. Title of the Project........................................................................................................................................................... Catalog
+
+
+
+End-to-End Encrypted Chat Room Web Application
+
+2\. Introduction and Objectives of the Project.........................................................................................................
+
+2.1 Introduction...........................................................................................................................................................
+
+
+
+Today’s digital communication landscape is dominated by concerns about privacy and data
+
+security. Most popular messaging platforms store our conversations on their servers, making
+
+them vulnerable to data breaches, government surveillance, and unauthorized access. This
+
+creates a real need for truly private communication tools.
+
+
+
+My project addresses this problem by developing a web-basedchat application that prioritizes
+
+user privacy through three key features:
+
+
+
+► End-to-End Encryption (E2EE): Messages are encrypted on the sender’s device and
+
+can only be decrypted by the intended recipients. Even the server hosting the
+
+application cannot read the message content - it simply actsas a relay for encrypted
+
+data..
+
+
+
+► Ephemerality (Temporary Nature): Unlike traditional chat apps that store your
+
+conversation history forever, this application is designed to be ephemeral. Messages
+
+aren’t saved anywhere - not on servers, not in databases. When you close the chat room,
+
+everything disappears.
+
+
+
+► Room-Based, Code-Driven Access: Instead of requiring user accounts or friend lists,
+
+people can create temporary chat rooms with unique access codes. Share the code with
+
+whoever you want to chat with, and they can join instantly.
+
+
+
+The technical foundation includes Next.js and Tailwind CSSfor a modern, responsive user
+
+interface, Socket.io for real-time messaging capabilities, and MongoDB for managing temporary
+
+room information (but never storing actual messages). The goal is creating a platform where
+
+people can have genuinely private conversations without worrying about their data being
+
+stored or accessed by others.
+
+2.2 Objectives...............................................................................................................................................................
+
+
+
+The principal objectives for this project are:
+
+
+
+    Develop a Secure Chat Platform: Create a web application where users can make
+
+    temporary chat rooms using unique access codes, without needing to create accounts or
+
+    provide personal information.
+
+
+
+    Implement Strong E2EE: Use proven cryptographic methods to ensure that only the
+
+    people in a conversation can read the messages. This includes secure key generation
+
+    and exchange between users.
+
+    Guarantee Message Ephemerality: To design the system so that chat messages are not
+
+    stored persistently. Message history will be volatile, existing only for the duration of an
+
+    active chat room session on the client-side.
+
+    Enable Real-Time Interaction: Use WebSocket technology through Socket.io to make
+
+    sure messages are delivered instantly between users in the same chat room.
+
+    Secure Room Access Control: To implement a system for generating unique, non-
+
+    guessable room codes and to allow controlled entry based on these codes, including
+
+    options for setting user limits per room.
+
+    Create an Intuitive User Interface: To build a user-friendly, responsive frontend that
+
+    simplifies the process of room creation, joining, and secure messaging.
+
+    Minimize Data Retention: To ensure the backend system only manages essential,
+
+    transient session data for active rooms (e.g., room IDs, participant session identifiers for
+
+    routing), without storing E2EE private keys or any decrypted message content.
+
+    Implement Effective Chat Destruction: When a chat room ends or everyone leaves,
+
+    automatically delete all related temporary data from the server and clear message
+
+    displays from users’ browsers.
+
+
+
+3\. Project Category...............................................................................................................................................................
+
+
+
+This project spans multiple areas of computer science and software development:
+
+
+
+► Networking Application: It fundamentally relies on network protocols for real-time,
+
+multi-user communication, primarily leveraging WebSockets through Socket.io.
+
+
+
+► Web Application: The user interface and core functionality will be deliveredas a web-
+
+based application, accessible via standard browsers, using Next.js for the frontend and
+
+Node.js for the backend.
+
+
+
+► Security Application: Privacy and security are central to the project, involving
+
+cryptographic techniques like end-to-end encryption and principles of data
+
+minimization and temporary storage.
+
+
+
+► Real-Time Systems: The chat functionality requires immediate message processing
+
+and delivery to create a smooth conversation experience forusers.
+
+
+
+While the project uses MongoDB as a database, it’s specifically for temporary session
+
+management rather than permanent data storage, which distinguishes it from typical RDBMS-
+
+centric or data-intensive applications.
+
+4\. Analysis................................................................................................................................................................................
+
+
+
+This section outlines the system’s operational flow, data interactions, and structural design
+
+through various diagrams.
+
+4.1 User Flow Diagram (Activity Diagram)....................................................................................................
+
+
+
+This diagram depicts the typical sequence of actions and decisions a user makes while
+
+interacting with the application, from creating/joining a room to participating in a chat and
+
+exiting.
+
+
+
+Description of User Flow Diagram: The diagram illustrates the user journey: one user
+
+(Creator) initiates a room, obtains a unique code, and shares it. Another user (Joiner) uses this
+
+code to enter. Inside the room, a secure key exchange establishes E2EE. Encrypted messages
+
+are then exchanged, relayed by the server but only readable by clients. Upon exit, local data is
+
+cleared, and the server eventually purges room metadata if all users depart, ensuring
+
+ephemerality.
+
+4.2 Context Level DFD (Level 0)..........................................................................................................................
+
+
+
+This diagram provides a high-level overview of the system asa single process, showing its
+
+inputs from and outputs to the external entity (User).
+
+
+
+Description of Context Level DFD: Users interact with the “ E2E Chat Room System” by
+
+providing inputs like room creation requests, room joiningrequests, and message content
+
+(which gets encrypted before leaving their device). The system responds with outputs
+
+including room access confirmation, encrypted messages from other users, and status
+
+notifications. The main purpose is facilitating secure, temporary communication between users.
+
+4.3 Level 1 DFD............................................................................................................................................................
+
+
+
+This diagram decomposes the system into its major functional processes, data stores, and the
+
+data flows between them.
+
+
+
+Description of Level 1 DFD:
+
+
+
+► P1.0 Room Creation \& Access Control: Manages requests to create new rooms,
+
+validates attempts to join existing rooms, and controls access based on room codes and
+
+user limits. Interacts withD1to store and retrieve room status.
+
+► P2.0 User Session Mgt. \& Signaling: Handles individual user connections to rooms,
+
+manages their session lifecycle (join/leave), and crucially, facilitates the exchange of
+
+signaling messages required for clients to perform E2EE keyestablishment.
+
+► P3.0 Client-Side E2E Encryption/Decryption: This process resides entirely on the
+
+client’s device. It encrypts outgoing messages before transmission and decrypts
+
+incoming messages after reception, using keys unknown to the server.
+
+► P4.0 Server-Side Real-time Encrypted Message Relay: The backend component that
+
+receives encrypted messages from one user and forwards themto other authenticated
+
+users in the same room. It can’t read the message content.
+
+► D1: Temporary Active Room Metadata Store: A MongoDB database that holds
+
+temporary information about active rooms (like room codes,user limits, and lists of
+
+current participants). This data gets deleted when rooms become inactive.
+
+
+
+4.4 Level 2 DFDs.......................................................................................................................................................
+
+
+
+These diagrams provide a more detailed breakdown of selected processes from the Level 1
+
+DFD.
+
+4.4.1 Level 2 DFD for Process 1.0: Room Creation \& Access Control.............................................
+
+4.4.2 Level 2 DFD for Message Exchange (Involving P3.0 and P4.0)..............................................
+
+
+
+This diagram details the flow of a message from sender to receiver, highlighting client-side
+
+encryption/decryption and server-side relay.
+
+4.5 Entity Relationship Diagram (ERD) / Database Design (for Temporary Room Data)...
+
+
+
+This ERD conceptualizes the entities and relationships forthe temporary metadata stored by
+
+the server (e.g., in MongoDB) to manage active chat room sessions. No message content is
+
+stored.
+
+
+
+Conceptual MongoDB Document Structure (for anActiveRoomscollection):
+
+
+
+This example illustrates how an active room’s metadata might be structured in a MongoDB
+
+document.
+
+
+
+{
+
+"\_id": "", // Auto-generated by MongoDB
+
+"roomCode": "A7B3C9", // Unique , application-generated room identifier
+
+"userLimit": 25 ,
+
+"participantSessions": \[ // Array of active participant session details
+
+{ "sessionId": "socket\_io\_session\_id\_1", "joinedAt": "ISODate(...)"},
+
+{ "sessionId": "socket\_io\_session\_id\_2", "joinedAt": "ISODate(...)"}
+
+],
+
+"createdAt": "ISODate(...)",
+
+"lastActivityAt": "ISODate(...)" // Updated on new message or join/leave
+
+}
+
+
+
+This structure would be queried and updated by the backend (Process 1.0 and 2.0) to manage
+
+room access and message routing.
+
+5\. Complete System Structure.....................................................................................................................................
+
+5.1 Number of Modules and their Description..........................................................................................
+
+
+
+The application’s architecture is modular to promote clarity, maintainability, and testability.
+
+Key modules include:
+
+
+
+    Frontend User Interface (UI) Module (Next.js, Tailwind CSS):
+
+        Description: This module handles everything users see and interact with.It
+
+        renders all the pages (home page, room creation forms, chat interface), manages
+
+        user interactions, displays decrypted messages, and maintains the visual state of
+
+        the application.
+
+    Client-Side End-to-End Encryption (E2EE) Module (Web Crypto API):
+
+        Description: Operating entirely within each user’s browser, this is the security
+
+        heart of the system. It generates encryption keys, handles secure key exchange
+
+        with other users in the room, encrypts outgoing messages, and decrypts
+
+        incoming messages. Importantly, all private keys stay on the user’s device and
+
+        never get sent to the server.
+
+    Client-Side Real-Time Communication Module (Socket.io Client):
+
+        Description: This module manages the persistent connection between the user’s
+
+        browser and the server. It handles sending encrypted messages to the server and
+
+        receiving relayed encrypted messages and setup signals from the server.
+
+    Backend Room Management \& Signaling Server Module (Node.js, Socket.io):
+
+        Description: The server-side component that coordinates chat room operations.
+
+        It processes room creation requests, validates room joining attempts, manages
+
+        active room lifecycles, helps facilitate encrypted key exchange between clients,
+
+        and relays encrypted messages. Crucially, it never has access to actual message
+
+        content or users’ private keys.
+
+    Temporary Room Metadata Storage Module (MongoDB Driver \& Logic):
+
+        Description: This backend module provides the connection and operationsfor
+
+        interacting with MongoDB, which stores temporary information about active
+
+        chat rooms (room codes, user limits, participant lists) butnever stores messages
+
+        or encryption keys. CRUD operations (Create, Read, Update,Delete) on
+
+        temporary room metadata, ensuring data is available for room management and
+
+        cleared upon room inactivity.
+
+
+
+5.2 Data Structures..................................................................................................................................................
+
+
+
+The application will utilize various data structures, bothclient-side and server-side, to manage
+
+state and information flow:
+
+
+
+► Client-Side Structures:
+
+
+
+    currentRoomDetails: An object holding details of the room the client is currently
+
+    in (e.g.,{ roomCode: string, userLimit: number, participantNicknames:
+
+    string\[] }).
+
+    displayedMessages: An array of message objects shown in the chat interface,
+
+    including sender name, decrypted content, and timestamp. This gets cleared
+
+    when leaving the room.
+
+    sessionEncryptionContext: Securely holds the cryptographic keys for the
+
+    current chat session. This exists only in memory and gets cleared when the
+
+    session ends.
+
+    roomParticipantsInfo: A Map or array storing temporary information about
+
+    other participants in the room, potentially including their public key fragments if
+
+    needed during the key exchange phase.
+
+
+
+► Server-Side Structures (Node.js/Socket.io - In-Memory for active sessions, often
+
+synced/backed by DB):
+
+
+
+    activeRoomsData: A JavaScript Map where keys are room codes and values
+
+    contain room details like user limits, sets of connected user IDs, and activity
+
+    timestamps.
+
+
+
+► MongoDB Document Structure (forActiveRoomscollection):
+
+
+
+    Fields includeroomCode,userLimit, an array ofparticipantSessions(each
+
+    withsessionId,joinedAt),createdAt,lastActivityAt.
+
+
+
+► Network Message Formats (Conceptual):
+
+
+
+&nbsp;   Encrypted Chat Message (Client <-> Server): A object like{ roomCode:
+
+&nbsp;   string, encryptedPayload: string (Base64 encoded ciphertext +
+
+&nbsp;   IV/nonce), senderSessionId?: string }.
+
+&nbsp;   Signaling Message (Client <-> Server, for E2EE key exchange): A object like
+
+&nbsp;   { roomCode: string, signalType: string (e.g., 'offer', 'answer',
+
+&nbsp;   'candidate'), signalPayload: object, targetSessionId?: string }. The
+
+&nbsp;   signalPayloadstructure depends on the chosen key exchange protocol.
+
+
+
+5.3 Process Logic of Each Module....................................................................................................................
+
+
+
+This section describes the core logic flow for each module.
+
+
+
+&nbsp;   Frontend UI Module:
+
+&nbsp;       Room Creation: User clicks create → UI prompts for optional user limit → sends
+
+&nbsp;       request to communication module → receives room code from server → displays
+
+&nbsp;       code and navigates to chat interface.
+
+&nbsp;       Room Joining: User inputsroomCode-> UI triggers “join room” action with code
+
+&nbsp;       to Communication Client. On success/failure from server, UInavigates to chat or
+
+&nbsp;       displays error.
+
+&nbsp;       Message Display: Receives decrypted message object (from E2EE Module) ->
+
+&nbsp;       appends to chat view with appropriate styling (sender, timestamp).
+
+&nbsp;       Sending Message: User types message -> UI captures input -> passes plaintext
+
+&nbsp;       to E2EE Module for encryption.
+
+&nbsp;       Leaving Room: User clicks “leave” or closes tab -> UI triggers “leave room”
+
+&nbsp;       action to Communication Client -> clears local message display and any session-
+
+&nbsp;       specific E2EE keys.
+
+&nbsp;   Client-Side E2EE Module:
+
+&nbsp;       Initialization (on room entry): Generates necessary cryptographic material.
+
+&nbsp;       Key Exchange: Sends public key information to other users through the server,
+
+&nbsp;       receives their public keys, computes shared secrets, derives symmetric session
+
+&nbsp;       keys.
+
+&nbsp;       Message Encryption: Takes plaintext from UI → uses session key to encrypt
+
+&nbsp;       with unique nonce/IV → returns ciphertext to communication module.
+
+&nbsp;       Message Decryption: Takes ciphertext from communication module → uses
+
+&nbsp;       session key to decrypt → returns plaintext to UI module.
+
+&nbsp;   Client-Side Real-Time Communication Module:
+
+&nbsp;       Connection Management: Establishes and maintains WebSocket connection to
+
+&nbsp;       Socket.io server upon entering a room context. Handles reconnect logic if
+
+&nbsp;       necessary.
+
+&nbsp;       Event Emission: Sends structured events to server:
+
+&nbsp;       ► create\_room\_request (with user limit)
+
+&nbsp;       ► join\_room\_request (with roomCode)
+
+&nbsp;       ► encrypted\_message\_to\_server (with roomCode, encryptedPayload)
+
+
+
+► key\_exchange\_signal\_to\_server (with roomCode, signalType,
+
+signalPayload, targetSessionId if applicable)
+
+► leave\_room\_notification
+
+
+
+&nbsp;   Event Listening: Handles events from server:
+
+&nbsp;   ► room\_created\_success (with roomCode)
+
+&nbsp;   ► join\_room\_status (success or error message)
+
+&nbsp;   ► new\_encrypted\_message\_from\_server (passes encryptedPayload to E2EE
+
+&nbsp;   Module)
+
+&nbsp;   ► key\_exchange\_signal\_from\_server (passes signalPayloadto E2E Module)
+
+&nbsp;   ► user\_joined\_room\_notification, user\_left\_room\_notification (for UI
+
+&nbsp;   updates)
+
+
+
+&nbsp;   Backend Room Management \& Signaling Server Module:
+
+
+
+&nbsp;   Oncreate\_room\_request: Generates unique room code → creates database
+
+&nbsp;   entry → adds creator to Socket.io room → confirms creation touser.
+
+&nbsp;   Onjoin\_room\_request: Validates room code and capacity → adds user to
+
+&nbsp;   Socket.io room and database → notifies user and others in room.
+
+&nbsp;   Onencrypted\_message\_to\_server: Receives encrypted message → broadcasts
+
+&nbsp;   to other users in same room without decrypting\_.\_
+
+&nbsp;   Onkey\_exchange\_signal\_to\_server Receives setup signals → forwards to
+
+&nbsp;   appropriate recipients without interpreting content.
+
+&nbsp;   On clientdisconnectorleave\_room\_notification: Removes user from room
+
+&nbsp;   → updates database → notifies remaining users → deletes roomif empty.
+
+
+
+&nbsp;   Temporary Room Metadata Storage Module:
+
+
+
+&nbsp;   createRoom(details): Inserts a new document into theActiveRoomsMongoDB
+
+&nbsp;   collection.
+
+&nbsp;   findRoomByCode(roomCode): Retrieves a room document.
+
+&nbsp;   addParticipantToRoom(roomCode, sessionId): Updates the specified room
+
+&nbsp;   document to add a participant.
+
+&nbsp;   removeParticipantFromRoom(roomCode, sessionId): Updates room document
+
+&nbsp;   to remove a participant.
+
+&nbsp;   deleteRoom(roomCode): Deletes a room document.
+
+&nbsp;   getParticipantCount(roomCode): Returns current number of participants.
+
+
+
+5.4 Testing Process to be Used..........................................................................................................................
+
+
+
+A multi-layered testing strategy will be implemented to ensure application quality, security,
+
+and reliability:
+
+
+
+&nbsp;   Unit Testing:
+
+&nbsp;       Focus on individual functions and components in isolation.
+
+&nbsp;       Client-Side: Test encryption/decryption functions with known test vectors, test
+
+&nbsp;       React components for proper rendering and state management.
+
+&nbsp;       Server-Side: Test individual Socket.io event handlers and helper functions with
+
+&nbsp;       mocked dependencies.
+
+&nbsp;   Integration Testing:
+
+&nbsp;       Verify interactions between different modules.
+
+&nbsp;       Client-Server: Test the complete flow of Socket.io events between client and
+
+&nbsp;       server for room creation, joining, message relay, and signaling.
+
+&nbsp;       Module Interactions: Test Frontend UI <-> E2EE Module, Backend Server <->
+
+&nbsp;       MongoDB Storage Module.
+
+&nbsp;   End-to-End (E2E) Testing:
+
+&nbsp;       Simulate real user scenarios from start to finish using browser automation tools
+
+&nbsp;       (e.g., Cypress, Playwright).
+
+&nbsp;       Key Scenarios: User A creates a room, User B joins; both exchange multiple
+
+&nbsp;       encrypted messages; one user leaves, then the other; attempts to join full/invalid
+
+&nbsp;       rooms. Verify message display and ephemerality.
+
+&nbsp;   Security Testing:
+
+&nbsp;       E2EE Verification: Manually inspect network traffic using browser developer
+
+&nbsp;       tools to confirm all transmitted data is properly encrypted.
+
+&nbsp;       Vulnerability Assessment: Check for common web security issues and assess
+
+&nbsp;       room code generation strength.
+
+&nbsp;       Logical Flaw Detection: Review logic for key exchange and session
+
+&nbsp;       management for potential weaknesses.
+
+&nbsp;   Usability Testing:
+
+&nbsp;       Gather qualitative feedback from a small group of test users regarding the
+
+&nbsp;       application’s ease of use, clarity of instructions, and overall user experience.
+
+
+
+Primary Testing Tools:
+
+
+
+► Jest and React Testing Library (for frontend unit/integration)
+
+► Jest or Mocha/Chai (for backend unit/integration)
+
+► Cypress or Playwright (for E2E tests)
+
+► Browser Developer Tools
+
+
+
+5.5 Reports Generation.........................................................................................................................................
+
+
+
+Given the application’s core principles of ephemerality and privacy, traditional report
+
+generation is intentionally minimal and avoids storing sensitive user data:
+
+
+
+&nbsp;   Client-Side Debugging Logs (Developer-Enabled):
+
+&nbsp;       Content: Timestamps of significant client-side events (e.g., “Roomjoined: XYZ”,
+
+&nbsp;       “Key exchange step 1 complete”, “Message encrypted”, “Error: Decryption
+
+&nbsp;       failed”). Strictly no message content or cryptographic key material will be
+
+&nbsp;       logged.
+
+&nbsp;       Purpose: For developers or advanced users to diagnose local issues related to
+
+&nbsp;       connectivity, E2EE setup, or UI errors.
+
+&nbsp;       Generation: Implemented viaconsole.logor a lightweight client-side logging
+
+&nbsp;       utility, typically enabled via a browser console command ora debug flag in
+
+&nbsp;       development builds.
+
+&nbsp;   Server-Side Operational Logs (Anonymized ):
+
+&nbsp;       Content: Event timestamps, server operations (room created, user joined,
+
+&nbsp;       message relayed), anonymized room identifiers, error codes and stack traces,
+
+&nbsp;       aggregate metrics (active connections, active rooms).
+
+&nbsp;       Purpose: For system administrators/developers to monitor server health,
+
+&nbsp;       performance, identify bottlenecks, track error rates, anddebug server-side
+
+&nbsp;       operational issues.
+
+&nbsp;       Generation: Using a robust logging library (e.g., Winston, Pino) in the Node.js
+
+&nbsp;       backend, with configurable log levels.
+
+&nbsp;   Ephemeral Session “Report” (User Interface):
+
+&nbsp;       Content: The dynamically rendered chat messages displayed within the user’s
+
+&nbsp;       active browser session.
+
+&nbsp;       Purpose: This is the primary “report” visible to the user – their live conversation.
+
+&nbsp;       Generation: This “report” is the application’s core user interface. It is ephemeral
+
+&nbsp;       by design; when the user leaves the room or closes the browsertab/window,
+
+&nbsp;       this displayed information is cleared from their client.
+
+
+
+No persistent reports containing chat message content, user identities (beyond
+
+temporary session identifiers), or detailed user activity logs will be generated or stored
+
+by the server. The system prioritizes not collecting data that doesn’t absolutely need to be
+
+collected.
+
+6\. Tools / Platform, Hardware and Software Requirement Specifications............................................
+
+6.1 Software Requirements................................................................................................................................
+
+
+
+► Frontend Development:
+
+
+
+&nbsp;   Programming Languages: JavaScript (ES6+), TypeScript
+
+&nbsp;   Core Framework/Library: Next.js (React-based framework)
+
+&nbsp;   Styling: Tailwind CSS
+
+&nbsp;   Client-Side Cryptography: Web Crypto API (built into modern browsers)
+
+&nbsp;   Real-Time Client Communication: Socket.io Client library
+
+&nbsp;   Package Management: bun (Node Package Manager)
+
+&nbsp;   Version Control System: Git
+
+
+
+► Backend Development:
+
+
+
+&nbsp;   Runtime Environment: Node.js
+
+&nbsp;   Real-Time Server Framework: Socket.io
+
+&nbsp;   Programming Languages: JavaScript (ES6+), TypeScript
+
+&nbsp;   Database: MongoDB (for temporary room metadata)
+
+&nbsp;   Package Management: bun
+
+
+
+► Development Environment:
+
+
+
+&nbsp;   Operating System: Windows 11
+
+&nbsp;   Code Editor/IDE: Visual Studio Code
+
+&nbsp;   Web Browsers (for development \& testing): Latest stable versions of Google
+
+&nbsp;   Chrome, Mozilla Firefox, Microsoft Edge, Safari.
+
+&nbsp;   Terminal/Command Line Interface: For running scripts, Gitcommands, etc.
+
+
+
+► Deployment Environment (Server-Side):
+
+
+
+&nbsp;   Operating System: Linux-based OS (e.g., Ubuntu Server) isstandard for Node.js.
+
+&nbsp;   Process Manager (for Node.js application): PM2, or systemd.
+
+&nbsp;   Database Server: MongoDB instance.
+
+&nbsp;   Cloud Platform: Vercel (ideal for Next.js).
+
+
+
+► User Environment (Client-Side):
+
+
+
+&nbsp;   Operating System: Any modern OS capable of running currentweb browsers
+
+&nbsp;   (Windows, macOS, Linux, Android, iOS).
+
+&nbsp;   Web Browser: Latest stable versions of Google Chrome, Mozilla Firefox,
+
+&nbsp;   Microsoft Edge, Safari, with full support for WebSockets and the Web Crypto API.
+
+
+
+6.2 Hardware Requirements..............................................................................................................................
+
+
+
+► Development Machine:
+
+
+
+&nbsp;   Processor: Multi-core processor AMD Ryzen 5
+
+&nbsp;   RAM: Minimum 8 GB.
+
+&nbsp;   Storage: 100 GB free disk space SSD.
+
+&nbsp;   Network: Broadband internet connection.
+
+
+
+► Server Machine (for Deployment - indicative for a small to moderate load):
+
+
+
+&nbsp;   Processor: 1-2+ vCPUs (AWS t3.small/medium equivalent).
+
+&nbsp;   RAM: 2-8 GB (depends on concurrent user load - Socket.io canbe memory-
+
+&nbsp;   intensive).
+
+&nbsp;   Storage: 20 GB - 50 GB+ SSD (for OS, application, logs, and MongoDB data if co-
+
+&nbsp;   hosted).
+
+&nbsp;   Network: Reliable connection with sufficient bandwidth for real-time WebSocket
+
+&nbsp;   traffic.
+
+
+
+► User Machine (Client-Side):
+
+
+
+&nbsp;   Standard Requirements: Any desktop, laptop, tablet, or smartphone from the last 5-
+
+&nbsp;   years
+
+&nbsp;   Processor: Any modern CPU capable of handling JavaScript execution forencryption
+
+&nbsp;   without significant delay
+
+&nbsp;   RAM: 2 GB minimum (more recommended for better browser performance)
+
+&nbsp;   Network: Stable internet connection (WiFi, Ethernet, or reliable mobile data)
+
+
+
+7\. Industry/Client Affiliation........................................................................................................................................
+
+No.
+
+
+
+This “ End-to-End Encrypted Chat Room Application” is beingdeveloped purely as an academic
+
+project. It is intended to fulfill educational requirements and explore concepts in secure web
+
+application development. It is not commissioned by, associated with, or undertaken for any
+
+specific industry, client, or commercial organization.
+
+8\. Future Scope and Further Enhancement of the Project.............................................................................
+
+
+
+While the initial version focuses on core secure chat functionality, several enhancements could
+
+be added in future iterations:
+
+
+
+&nbsp;   Advanced Room Controls:
+
+&nbsp;       Room Passwords: Add optional password protection in addition to room codes.
+
+&nbsp;       Moderation Tools: Give room creators basic moderation tools (mute or remove
+
+&nbsp;       disruptive users).
+
+&nbsp;       Customizable User Limits: Allow room creators to adjust user limits during
+
+&nbsp;       active sessions
+
+&nbsp;       .
+
+&nbsp;   Rich Media \& Interaction (E2EE):
+
+&nbsp;       Encrypted File Sharing: Allow secure file transfers within chat rooms.
+
+&nbsp;       Markdown/Rich Text Formatting: Support for basic message formatting to
+
+&nbsp;       improve readability and expression.
+
+&nbsp;       Emoji Reactions: Allow users to react to messages with emojis.
+
+&nbsp;       E2EE Voice/Video Calls: Integration of WebRTC for encrypted peer-to-peer
+
+&nbsp;       voice and video calls
+
+&nbsp;       .
+
+&nbsp;   User Experience Improvements:
+
+&nbsp;       Typing Indicators: Securely implement indicators to show when other users are
+
+&nbsp;       typing.
+
+&nbsp;       Read Receipts (Optional \& E2EE): A privacy-conscious implementation of
+
+&nbsp;       message read receipts.
+
+&nbsp;       UI Themes \& Personalization: Allow users to choose different visual themes.
+
+&nbsp;       Improved Notification System: More refined in-app notifications.
+
+&nbsp;   Advanced Security Features:
+
+&nbsp;       Key Verification Mechanisms: Allow users to verify each other’s identities
+
+&nbsp;       through safety numbers or QR code scanning.
+
+&nbsp;       Formal Security Audit: Engage professional security reviewers to assess the
+
+&nbsp;       cryptographic implementation.
+
+&nbsp;   Scalability and Performance:
+
+&nbsp;       Horizontal Scaling for Socket.io: mplement Redis adapter for Socket.io to
+
+&nbsp;       handle more concurrent users across multiple server instances.
+
+&nbsp;       Optimized Message Broadcasting: More efficient message delivery
+
+&nbsp;       mechanisms for very large rooms (if user limits are increased).
+
+
+
+These potential enhancements would progressively build upon the foundational secure and
+
+ephemeral chat system, adding value and utility.
+
+9\. Limitations of the Project (Initial Version)......................................................................................................
+
+
+
+The initial development phase will focus on delivering corefunctionality, and as such, certain
+
+limitations will exist:
+
+
+
+&nbsp;   No User Accounts: The application operates without traditional registration or login
+
+&nbsp;   systems. Users remain anonymous within each chat session.
+
+&nbsp;   No Message History: All conversations are temporary. Messages aren’t saved
+
+&nbsp;   anywhere and disappear when rooms close or users leave.
+
+&nbsp;   Text Messages Only: Initial version supports only text-based communication. File
+
+&nbsp;   sharing, voice messages, or video calls aren’t included yet.
+
+&nbsp;   Basic Key Exchange: While end-to-end encryption is implemented, advanced features
+
+&nbsp;   like Perfect Forward Secrecy or explicit key fingerprint verification aren’t included
+
+&nbsp;   initially.
+
+&nbsp;   Room Code Security: Room security relies primarily on keeping the generated codes
+
+&nbsp;   secret. While codes are designed to be hard to guess, additional security measures
+
+&nbsp;   against code compromise aren’t a primary focus initially.
+
+&nbsp;   Single Server Focus: The backend architecture is optimized for single server
+
+&nbsp;   deployment. Horizontal scaling strategies are consideredfuture enhancements.
+
+&nbsp;   No Offline Support: Users must be actively connected to send or receive messages.
+
+&nbsp;   There’s no message queuing for offline users.
+
+&nbsp;   Trust in Client Code: The effectiveness of encryption depends on the integrity of
+
+&nbsp;   JavaScript code running in users’ browsers. Users must trust that this code correctly
+
+&nbsp;   implements encryption and doesn’t compromise security.
+
+&nbsp;   Limited Room Management: Initial version doesn’t include features for room creators
+
+&nbsp;   to manage participants (like kicking or banning users).
+
+&nbsp;   Modern Browser Dependency: Requires recent browser versions with WebSocket and
+
+&nbsp;   Web Crypto API support, which may limit compatibility with very old browsers.
+
+
+
+These limitations help keep the project scope manageable while ensuring robust
+
+implementation of core security and communication features.
+
+10\. Security and Validation Checks...........................................................................................................................
+
+
+
+Security is a foundational requirement of this application. The following checks, principles, and
+
+validations will be integral to its design and implementation:
+
+
+
+&nbsp;   End-to-End Encryption (E2EE) Implementation:
+
+&nbsp;       Core: All user-to-user message content will be encrypted on the sender’s client
+
+&nbsp;       device and decrypted only on the recipient(s)’ client device(s).
+
+&nbsp;       Algorithms: ndustry-standard cryptography using AES-256-GCM for message
+
+&nbsp;       encryption and secure key exchange protocols like Diffie-Hellman.
+
+&nbsp;       Key Management: ll private keys and session keys are generated and stored
+
+&nbsp;       only on client devices - never transmitted to or stored by theserver.
+
+&nbsp;   Message and Data Ephemerality:
+
+&nbsp;       No Server-Side Message Storage: The server will not store any chat message
+
+&nbsp;       content, either in plaintext or ciphertext form, in any database or persistent logs.
+
+&nbsp;       Client-Side Data Clearing: When users leave rooms, their browsers
+
+&nbsp;       automatically clear displayed messages and encryption keys from active Java
+
+&nbsp;       memory.
+
+&nbsp;       Temporary Room Metadata Purging: Server-side metadata related to active
+
+&nbsp;       chat rooms (e.g., room ID, list of active participant sessions) will be actively
+
+&nbsp;       deleted from the temporary store (MongoDB/memory) once a room becomes
+
+&nbsp;       empty or after a defined period of inactivity.
+
+&nbsp;   Secure Room Access and Control:
+
+&nbsp;       Unique and Complex Room Codes: Chat rooms will be accessed via unique,
+
+&nbsp;       randomly generated codes of sufficient complexity to make guessing impractical.
+
+&nbsp;       Server-Side Validation: The backend server will rigorously validate room codes
+
+&nbsp;       and enforce any defined user limits before granting a user access to a chat room.
+
+&nbsp;       Rate Limiting (Consideration): Basic rate limiting on attempts to join rooms
+
+&nbsp;       may be implemented on the server-side to mitigate brute-force attacks on room
+
+&nbsp;       codes.
+
+&nbsp;   Input Validation (Client-Side and Server-Side):
+
+
+
+&nbsp;   Data Sanitization: All user input is validated and sanitized on both client and
+
+&nbsp;   server sides to prevent injection attacks.
+
+&nbsp;   Socket.io Event Payload Validation: Socket.io event payloads are validated to
+
+&nbsp;   ensure they conform to expected formats.
+
+
+
+&nbsp;   Transport Layer Security (TLS/SSL):
+
+
+
+&nbsp;   All communication between the client’s browser and the webserver (serving the
+
+&nbsp;   Next.js application) and the Socket.io server will be enforced over HTTPS and
+
+&nbsp;   WSS (Secure WebSockets) respectively. This protects the already E2E-encrypted
+
+&nbsp;   message payloads and critical signaling messages while they are in transit
+
+&nbsp;   to/from the server.
+
+
+
+&nbsp;   Protection Against Common Web Vulnerabilities:
+
+
+
+&nbsp;   Cross-Site Scripting (XSS): Although message content is E2E encrypted, any
+
+&nbsp;   user-generated input that might be displayed directly by the UI (e.g., user-chosen
+
+&nbsp;   temporary nicknames, if implemented) will be properly escaped/sanitized by the
+
+&nbsp;   frontend framework (Next.js/React) to prevent XSS.
+
+&nbsp;   Secure Headers: Implement appropriate HTTP security headers (e.g., Content
+
+&nbsp;   Security Policy, X-Content-Type-Options).
+
+
+
+&nbsp;   Secure Code Practices:
+
+
+
+&nbsp;   Dependency Management: Regularly update all third-party libraries and
+
+&nbsp;   dependencies (both frontend and backend) to patch known vulnerabilities, using
+
+&nbsp;   tools likenpm audit.
+
+&nbsp;   Principle of Least Privilege: Server-side processes will operate with the
+
+&nbsp;   minimum necessary permissions.
+
+
+
+&nbsp;   Signaling Channel Security:
+
+
+
+&nbsp;   Ensure that signaling messages (used for E2EE key exchangesetup) are relayed
+
+&nbsp;   correctly only to the intended participants within a specific room and are
+
+&nbsp;   protected in transit by WSS.
+
+
+
+Validation Approach:
+
+
+
+► Conduct regular code reviews with a focus on security implementation details.
+
+► Perform manual security testing, including attempts to bypass E2EE and inspecting
+
+network traffic.
+
+► Utilize browser developer tools for examining client-sidedata handling and storage.
+
+► Write automated tests specifically targeting the encryption/decryption logic and key
+
+exchange process.
+
+
+
+11\. Bibliography (References).....................................................................................................................................
+
+
+
+Cryptography and Security:
+
+
+
+&nbsp;   OWASP Foundation. (2021). OWASP Top Ten Web Application Security Risks. Retrieved
+
+&nbsp;   fromowasp.org/www-project-top-ten/
+
+&nbsp;   Mozilla Developer Network (MDN). Web Crypto API. Retrieved from
+
+&nbsp;   developer.mozilla.org/en-US/docs/Web/API/Web\_Crypto\_API
+
+
+
+Web Technologies and Development:
+
+
+
+&nbsp;   Next.js Official Documentation. Vercel. Retrieved fromnextjs.org/docs
+
+&nbsp;   Socket.IO Official Documentation. Retrieved fromsocket.io/docs/
+
+&nbsp;   Tailwind CSS Official Documentation. Tailwind Labs. Retrieved from
+
+&nbsp;   tailwindcss.com/docs
+
+
+
+Powered by TCPDF (www.tcpdf.org)
+
+
+
+Index of comments
+
+
+
+1.1 Implement asymmetric encryption (e.g., RSA) for secure key exchange between users.
+
+Integrate message integrity checks using digital signatures or hash verification (e.g., SHA-256).
+
+Add support for multimedia (images/files) sharing with encrypted transmission and storage.
+
+Enable user authentication with two-factor authentication (2FA) for enhanced account security.
+
+Include real-time message delivery status (sent, delivered, seen) with WebSocket-based communication.
+
+
+
+
+

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;

hooks/useWebRTC.ts

@@ -0,0 +1,158 @@
+import { useState, useEffect, useRef, useCallback } from "react";
+import { socket } from "@/lib/socket";
+
+const STUN_SERVERS = {
+    iceServers: [
+        { urls: "stun:stun.l.google.com:19302" },
+        { urls: "stun:stun1.l.google.com:19302" },
+    ],
+};
+
+export function useWebRTC(roomId: string) {
+    const [localStream, setLocalStream] = useState<MediaStream | null>(null);
+    const [remoteStreams, setRemoteStreams] = useState<Map<string, MediaStream>>(new Map());
+    const peersRef = useRef<Map<string, RTCPeerConnection>>(new Map());
+
+    const createPeer = useCallback((targetSocketId: string, initiator: boolean, stream: MediaStream) => {
+        const peer = new RTCPeerConnection(STUN_SERVERS);
+        peersRef.current.set(targetSocketId, peer);
+
+        // Add local tracks
+        stream.getTracks().forEach(track => peer.addTrack(track, stream));
+
+        // Handle ICE candidates
+        peer.onicecandidate = (event) => {
+            if (event.candidate) {
+                socket.emit("signal", {
+                    target: targetSocketId,
+                    signal: { type: "ice-candidate", candidate: event.candidate }
+                });
+            }
+        };
+
+        // Handle remote stream
+        peer.ontrack = (event) => {
+            console.log("Received remote track from:", targetSocketId);
+            setRemoteStreams(prev => {
+                const newMap = new Map(prev);
+                newMap.set(targetSocketId, event.streams[0]);
+                return newMap;
+            });
+        };
+
+        // Create Offer if initiator
+        if (initiator) {
+            peer.createOffer()
+                .then(offer => peer.setLocalDescription(offer))
+                .then(() => {
+                    socket.emit("signal", {
+                        target: targetSocketId,
+                        signal: { type: "offer", sdp: peer.localDescription }
+                    });
+                })
+                .catch(err => console.error("Error creating offer:", err));
+        }
+
+        return peer;
+    }, []);
+
+    const joinCall = useCallback(async () => {
+        try {
+            const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
+            setLocalStream(stream);
+            socket.emit("join-call", { roomId });
+            return stream;
+        } catch (err) {
+            console.error("Error accessing media devices:", err);
+            alert("Could not access camera/microphone");
+            return null;
+        }
+    }, [roomId]);
+
+    const leaveCall = useCallback(() => {
+        // Stop local stream
+        if (localStream) {
+            localStream.getTracks().forEach(track => track.stop());
+            setLocalStream(null);
+        }
+
+        // Close all peers
+        peersRef.current.forEach(peer => peer.close());
+        peersRef.current.clear();
+        setRemoteStreams(new Map());
+
+        socket.emit("leave-call", { roomId });
+    }, [localStream, roomId]);
+
+    useEffect(() => {
+        if (!localStream) return;
+
+        const handleUserConnected = ({ socketId }: { socketId: string }) => {
+            console.log("User connected to call:", socketId);
+            // Initiate connection to new user
+            createPeer(socketId, true, localStream);
+        };
+
+        const handleUserDisconnected = ({ socketId }: { socketId: string }) => {
+            console.log("User disconnected from call:", socketId);
+            if (peersRef.current.has(socketId)) {
+                peersRef.current.get(socketId)!.close();
+                peersRef.current.delete(socketId);
+            }
+            setRemoteStreams(prev => {
+                const newMap = new Map(prev);
+                newMap.delete(socketId);
+                return newMap;
+            });
+        };
+
+        const handleSignal = async (data: { sender: string; signal: any }) => {
+            const { sender, signal } = data;
+
+            // Ignore key exchange signals (offer-key, answer-key)
+            if (signal.type === "offer-key" || signal.type === "answer-key") return;
+
+            let peer = peersRef.current.get(sender);
+
+            if (!peer) {
+                // If receiving offer, create peer (not initiator)
+                if (signal.type === "offer") {
+                    peer = createPeer(sender, false, localStream);
+                } else {
+                    console.warn("Received signal for unknown peer:", sender);
+                    return;
+                }
+            }
+
+            try {
+                if (signal.type === "offer") {
+                    await peer.setRemoteDescription(new RTCSessionDescription(signal.sdp));
+                    const answer = await peer.createAnswer();
+                    await peer.setLocalDescription(answer);
+                    socket.emit("signal", {
+                        target: sender,
+                        signal: { type: "answer", sdp: peer.localDescription }
+                    });
+                } else if (signal.type === "answer") {
+                    await peer.setRemoteDescription(new RTCSessionDescription(signal.sdp));
+                } else if (signal.type === "ice-candidate") {
+                    await peer.addIceCandidate(new RTCIceCandidate(signal.candidate));
+                }
+            } catch (err) {
+                console.error("Error handling signal:", err);
+            }
+        };
+
+        socket.on("user-connected-to-call", handleUserConnected);
+        socket.on("user-disconnected-from-call", handleUserDisconnected);
+        socket.on("signal", handleSignal);
+
+        return () => {
+            socket.off("user-connected-to-call", handleUserConnected);
+            socket.off("user-disconnected-from-call", handleUserDisconnected);
+            socket.off("signal", handleSignal);
+        };
+    }, [localStream, createPeer]);
+
+    return { localStream, remoteStreams, joinCall, leaveCall };
+}

lib/crypto.test.ts

@@ -0,0 +1,57 @@
+import { describe, expect, test } from "bun:test";
+import {
+    generateKeyPair,
+    exportKey,
+    importKey,
+    encryptMessage,
+    decryptMessage,
+    generateSymKey,
+    encryptSymMessage,
+    decryptSymMessage,
+    exportSymKey,
+    importSymKey
+} from "./crypto";
+
+describe("Crypto Logic", () => {
+    test("should generate key pair", async () => {
+        const keyPair = await generateKeyPair();
+        expect(keyPair.publicKey).toBeDefined();
+        expect(keyPair.privateKey).toBeDefined();
+    });
+
+    test("should export and import keys", async () => {
+        const keyPair = await generateKeyPair();
+        const exportedPublic = await exportKey(keyPair.publicKey);
+        const importedPublic = await importKey(exportedPublic, ["encrypt"]);
+        expect(importedPublic).toBeDefined();
+    });
+
+    test("should encrypt and decrypt message", async () => {
+        const keyPair = await generateKeyPair();
+        const message = "Hello, World!";
+        const encrypted = await encryptMessage(keyPair.publicKey, message);
+        const decrypted = await decryptMessage(keyPair.privateKey, encrypted);
+        expect(decrypted).toBe(message);
+    });
+
+    test("should encrypt and decrypt symmetric message", async () => {
+        const key = await generateSymKey();
+        const message = "Secret Message";
+        const encrypted = await encryptSymMessage(key, message);
+        const decrypted = await decryptSymMessage(key, encrypted);
+        expect(decrypted).toBe(message);
+    });
+
+    test("should export and import symmetric keys", async () => {
+        const key = await generateSymKey();
+        const exported = await exportSymKey(key);
+        const imported = await importSymKey(exported);
+        expect(imported).toBeDefined();
+
+        // Verify imported key works
+        const message = "Test Key Import";
+        const encrypted = await encryptSymMessage(imported, message);
+        const decrypted = await decryptSymMessage(key, encrypted); // Decrypt with original key
+        expect(decrypted).toBe(message);
+    });
+});

lib/crypto.ts

@@ -0,0 +1,190 @@
+export async function generateKeyPair() {
+    return await crypto.subtle.generateKey(
+        {
+            name: "RSA-OAEP",
+            modulusLength: 2048,
+            publicExponent: new Uint8Array([1, 0, 1]),
+            hash: "SHA-256",
+        },
+        true,
+        ["encrypt", "decrypt"]
+    );
+}
+
+export async function exportKey(key: CryptoKey) {
+    const exported = await crypto.subtle.exportKey("jwk", key);
+    return exported;
+}
+
+export async function importKey(jwk: JsonWebKey, usage: KeyUsage[]) {
+    return await crypto.subtle.importKey(
+        "jwk",
+        jwk,
+        {
+            name: "RSA-OAEP",
+            hash: "SHA-256",
+        },
+        true,
+        usage
+    );
+}
+
+export async function encryptMessage(publicKey: CryptoKey, message: string) {
+    const encoder = new TextEncoder();
+    const data = encoder.encode(message);
+    const encrypted = await crypto.subtle.encrypt(
+        {
+            name: "RSA-OAEP",
+        },
+        publicKey,
+        data
+    );
+    return arrayBufferToBase64(encrypted);
+}
+
+export async function decryptMessage(privateKey: CryptoKey, encryptedMessage: string) {
+    const data = base64ToArrayBuffer(encryptedMessage);
+    const decrypted = await crypto.subtle.decrypt(
+        {
+            name: "RSA-OAEP",
+        },
+        privateKey,
+        data
+    );
+    const decoder = new TextDecoder();
+    return decoder.decode(decrypted);
+}
+
+function arrayBufferToBase64(buffer: ArrayBuffer) {
+    let binary = "";
+    const bytes = new Uint8Array(buffer);
+    const len = bytes.byteLength;
+    for (let i = 0; i < len; i++) {
+        binary += String.fromCharCode(bytes[i]);
+    }
+    return btoa(binary);
+}
+
+function base64ToArrayBuffer(base64: string) {
+    const binaryString = atob(base64);
+    const bytes = new Uint8Array(binaryString.length);
+    for (let i = 0; i < binaryString.length; i++) {
+        bytes[i] = binaryString.charCodeAt(i);
+    }
+    return bytes.buffer;
+}
+
+// ========== AES-GCM Functions for Hybrid Encryption ==========
+
+export async function generateSymKey() {
+    return await crypto.subtle.generateKey(
+        {
+            name: "AES-GCM",
+            length: 256,
+        },
+        true,
+        ["encrypt", "decrypt"]
+    );
+}
+
+export async function encryptSymMessage(key: CryptoKey, message: string) {
+    const encoder = new TextEncoder();
+    const data = encoder.encode(message);
+    const iv = crypto.getRandomValues(new Uint8Array(12));
+    const encrypted = await crypto.subtle.encrypt(
+        {
+            name: "AES-GCM",
+            iv: iv,
+        },
+        key,
+        data
+    );
+
+    // Combine IV and ciphertext
+    const combined = new Uint8Array(iv.length + encrypted.byteLength);
+    combined.set(iv);
+    combined.set(new Uint8Array(encrypted), iv.length);
+
+    return arrayBufferToBase64(combined.buffer);
+}
+
+export async function decryptSymMessage(key: CryptoKey, encryptedMessage: string) {
+    const combined = base64ToArrayBuffer(encryptedMessage);
+    const combinedArray = new Uint8Array(combined);
+    const iv = combinedArray.slice(0, 12);
+    const data = combinedArray.slice(12);
+
+    const decrypted = await crypto.subtle.decrypt(
+        {
+            name: "AES-GCM",
+            iv: iv,
+        },
+        key,
+        data
+    );
+
+    const decoder = new TextDecoder();
+    return decoder.decode(decrypted);
+}
+
+export async function exportSymKey(key: CryptoKey) {
+    const exported = await crypto.subtle.exportKey("raw", key);
+    return arrayBufferToBase64(exported);
+}
+
+export async function importSymKey(rawKey: string) {
+    const buffer = base64ToArrayBuffer(rawKey);
+    return await crypto.subtle.importKey(
+        "raw",
+        buffer,
+        {
+            name: "AES-GCM",
+        },
+        true,
+        ["encrypt", "decrypt"]
+    );
+}
+
+// ========== FILE ENCRYPTION FUNCTIONS ==========
+
+/**
+ * Encrypt a file (ArrayBuffer) with AES-GCM
+ */
+export async function encryptFile(aesKey: CryptoKey, fileData: ArrayBuffer): Promise<ArrayBuffer> {
+    const iv = crypto.getRandomValues(new Uint8Array(12));
+    const encrypted = await crypto.subtle.encrypt(
+        {
+            name: "AES-GCM",
+            iv,
+        },
+        aesKey,
+        fileData
+    );
+
+    // Combine IV + encrypted data
+    const combined = new Uint8Array(iv.length + encrypted.byteLength);
+    combined.set(iv, 0);
+    combined.set(new Uint8Array(encrypted), iv.length);
+
+    return combined.buffer;
+}
+
+/**
+ * Decrypt a file (ArrayBuffer) with AES-GCM
+ */
+export async function decryptFile(aesKey: CryptoKey, encryptedData: ArrayBuffer): Promise<ArrayBuffer> {
+    const combined = new Uint8Array(encryptedData);
+    const iv = combined.slice(0, 12);
+    const data = combined.slice(12);
+
+    const decrypted = await crypto.subtle.decrypt(
+        {
+            name: "AES-GCM",
+            iv: iv,
+        },
+        aesKey,
+        data
+    );
+
+    return decrypted;
+}

lib/db.ts

@@ -0,0 +1,46 @@
+import mongoose from 'mongoose';
+
+const MONGODB_URI = process.env.MONGODB_URI || 'mongodb://localhost:27017/secrate_chat';
+
+if (!MONGODB_URI) {
+    throw new Error(
+        'Please define the MONGODB_URI environment variable inside .env.local'
+    );
+}
+
+/**
+ * Global is used here to maintain a cached connection across hot reloads
+ * in development. This prevents connections growing exponentially
+ * during API Route usage.
+ */
+let cached = (global as any).mongoose;
+
+if (!cached) {
+    cached = (global as any).mongoose = { conn: null, promise: null };
+}
+
+async function dbConnect() {
+    if (cached.conn) {
+        return cached.conn;
+    }
+
+    if (!cached.promise) {
+        const opts = {
+            bufferCommands: false,
+        };
+
+        cached.promise = mongoose.connect(MONGODB_URI, opts).then((mongoose) => {
+            return mongoose;
+        });
+    }
+    try {
+        cached.conn = await cached.promise;
+    } catch (e) {
+        cached.promise = null;
+        throw e;
+    }
+
+    return cached.conn;
+}
+
+export default dbConnect;

lib/socket.ts

@@ -0,0 +1,8 @@
+import { io } from "socket.io-client";
+
+// "undefined" means the URL will be computed from the `window.location` object
+const URL = process.env.NEXT_PUBLIC_SOCKET_URL || "http://localhost:8000";
+
+export const socket = io(URL, {
+    autoConnect: false,
+});

lib/tokens.ts

@@ -0,0 +1,15 @@
+import { authenticator } from "otplib";
+import QRCode from "qrcode";
+
+export const generateTwoFactorSecret = async (email: string) => {
+    const secret = authenticator.generateSecret();
+    const otpauth = authenticator.keyuri(email, "SecureChatApp", secret);
+    const qrCodeUrl = await QRCode.toDataURL(otpauth);
+
+    return { secret, qrCodeUrl };
+};
+
+export const verifyTwoFactorToken = (token: string, secret: string) => {
+    authenticator.options = { window: 1 };
+    return authenticator.verify({ token, secret });
+};

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))
+}

models/Room.ts

@@ -0,0 +1,23 @@
+import mongoose, { Schema, Document } from 'mongoose';
+
+export interface IRoom extends Document {
+    roomId: string;
+    createdAt: Date;
+    expiresAt: Date;
+}
+
+const RoomSchema: Schema = new Schema({
+    roomId: { type: String, required: true, unique: true },
+    userLimit: { type: Number, default: 10 }, // Default limit
+    participants: [
+        {
+            userId: String,
+            nickname: String,
+            joinedAt: { type: Date, default: Date.now },
+        },
+    ],
+    createdAt: { type: Date, default: Date.now },
+    expiresAt: { type: Date, index: { expires: "1h" } }, // Auto-delete after 1 hour of inactivity (or custom logic)
+});
+
+export default mongoose.models.Room || mongoose.model<IRoom>('Room', RoomSchema);

models/User.ts

@@ -0,0 +1,21 @@
+import mongoose, { Schema, Document } from "mongoose";
+
+export interface IUser extends Document {
+    email: string;
+    password?: string;
+    image?: string;
+    twoFactorSecret?: string;
+    isTwoFactorEnabled: boolean;
+    createdAt: Date;
+}
+
+const UserSchema: Schema = new Schema({
+    email: { type: String, required: true, unique: true },
+    password: { type: String, required: false }, // Optional for OAuth, but we are using Credentials
+    image: { type: String },
+    twoFactorSecret: { type: String },
+    isTwoFactorEnabled: { type: Boolean, default: false },
+    createdAt: { type: Date, default: Date.now },
+});
+
+export default mongoose.models.User || mongoose.model<IUser>("User", UserSchema);

next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+import "./.next/types/routes.d.ts";
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;

package.json

@@ -0,0 +1,47 @@
+{
+  "name": "secrate_chat",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "bun server.ts",
+    "build": "next build",
+    "start": "NODE_ENV=production bun server.ts",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-slot": "^1.2.4",
+    "bcryptjs": "^3.0.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "emoji-picker-react": "^4.15.2",
+    "lucide-react": "^0.554.0",
+    "mongoose": "^9.0.0",
+    "next": "16.0.4",
+    "next-auth": "^5.0.0-beta.30",
+    "next-themes": "^0.4.6",
+    "otplib": "^12.0.1",
+    "qrcode": "^1.5.4",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
+    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1",
+    "socket.io": "^4.8.1",
+    "socket.io-client": "^4.8.1",
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss-animate": "^1.0.7"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/bcryptjs": "^3.0.0",
+    "@types/node": "^20",
+    "@types/qrcode": "^1.5.6",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.0.4",
+    "tailwindcss": "^4",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "^5"
+  }
+}

postcss.config.mjs

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