Merge pull request #173 from Jiya3177/feat/frontend-i18n-166

frontend/package-lock.json

@@ -11,6 +11,8 @@
         "@base-ui/react": "^1.4.1",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "i18next": "^26.3.0",
+        "i18next-browser-languagedetector": "^8.2.1",
         "lucide-react": "^1.8.0",
         "next": "16.2.4",
         "next-themes": "^0.4.6",
@@ -18,6 +20,7 @@
         "react": "19.2.4",
         "react-dom": "19.2.4",
         "react-dropzone": "^15.0.0",
+        "react-i18next": "^17.0.8",
         "react-markdown": "^10.1.0",
         "react-pdf": "^10.4.1",
         "rehype-highlight": "^7.0.2",
@@ -80,6 +83,7 @@
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.0.tgz",
       "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.29.0",
         "@babel/generator": "^7.29.0",
@@ -673,6 +677,7 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
       "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -2107,6 +2112,7 @@
       "resolved": "https://registry.npmjs.org/@noble/ciphers/-/ciphers-1.3.0.tgz",
       "integrity": "sha512-2I0gnIVPtfnMw9ee9h1dJG7tp81+8Ob3OJb3Mv37rx5L40/b0i7djjCVvGOVqc9AEIQyvyu1i6ypKdFw8R8gQw==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": "^14.21.3 || >=16"
       },
@@ -2214,6 +2220,7 @@
       "integrity": "sha512-O71yZIbAh/PxDMNGns37GHBIfrVkEVyn+AXyIa5dOTfb4/xNvRWV+Vv/NMbNCtODB/pO7vLlF2OTmMVLhmr7Ag==",
       "devOptional": true,
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "playwright": "1.60.0"
       },
@@ -2682,6 +2689,7 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.39.tgz",
       "integrity": "sha512-orrrD74MBUyK8jOAD/r0+lfa1I2MO6I+vAkmAWzMYbCcgrN4lCrmK52gRFQq/JRxfYPfonkr4b0jcY7Olqdqbw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "undici-types": "~6.21.0"
       }
@@ -2691,6 +2699,7 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
       "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -2777,6 +2786,7 @@
       "integrity": "sha512-TI1XGwKbDpo9tRW8UDIXCOeLk55qe9ZFGs8MTKU6/M08HWTw52DD/IYhfQtOEhEdPhLMT26Ka/x7p70nd3dzDg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.59.0",
         "@typescript-eslint/types": "8.59.0",
@@ -3321,6 +3331,7 @@
       "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -3775,6 +3786,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.10.12",
         "caniuse-lite": "^1.0.30001782",
@@ -4826,6 +4838,7 @@
       "integrity": "sha512-XoMjdBOwe/esVgEvLmNsD3IRHkm7fbKIUGvrleloJXUZgDHig2IPWNniv+GwjyJXzuNqVjlr5+4yVUZjycJwfQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -5011,6 +5024,7 @@
       "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
@@ -5310,6 +5324,7 @@
       "resolved": "https://registry.npmjs.org/express/-/express-5.2.1.tgz",
       "integrity": "sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "accepts": "^2.0.0",
         "body-parser": "^2.2.1",
@@ -5669,6 +5684,7 @@
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
       "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "optional": true,
@@ -6133,10 +6149,20 @@
       "resolved": "https://registry.npmjs.org/hono/-/hono-4.12.14.tgz",
       "integrity": "sha512-am5zfg3yu6sqn5yjKBNqhnTX7Cv+m00ox+7jbaKkrLMRJ4rAdldd1xPd/JzbBWspqaQv6RSTrgFN95EsfhC+7w==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=16.9.0"
       }
     },
+    "node_modules/html-parse-stringify": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
+      "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
+      "license": "MIT",
+      "dependencies": {
+        "void-elements": "3.1.0"
+      }
+    },
     "node_modules/html-url-attributes": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/html-url-attributes/-/html-url-attributes-3.0.1.tgz",
@@ -6189,6 +6215,44 @@
         "node": ">=18.18.0"
       }
     },
+    "node_modules/i18next": {
+      "version": "26.3.0",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-26.3.0.tgz",
+      "integrity": "sha512-gHSgGpUXVmuqE2El1W61DmxeyeTlFfZgdJRWMo9jScAn5pu7TuTuiccb1zh3E2J9hEBVGJ23+96x0ieBhfuIHA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://www.locize.com/i18next"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.locize.com"
+        }
+      ],
+      "license": "MIT",
+      "peer": true,
+      "peerDependencies": {
+        "typescript": "^5 || ^6"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/i18next-browser-languagedetector": {
+      "version": "8.2.1",
+      "resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-8.2.1.tgz",
+      "integrity": "sha512-bZg8+4bdmaOiApD7N7BPT9W8MLZG+nPTOFlLiJiT8uzKXFjhxw4v2ierCXOwB5sFDMtuA5G4kgYZ0AznZxQ/cw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2"
+      }
+    },
     "node_modules/iconv-lite": {
       "version": "0.7.2",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.7.2.tgz",
@@ -9527,6 +9591,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz",
       "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -9536,6 +9601,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz",
       "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -9560,6 +9626,33 @@
         "react": ">= 16.8 || 18.0.0"
       }
     },
+    "node_modules/react-i18next": {
+      "version": "17.0.8",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-17.0.8.tgz",
+      "integrity": "sha512-0ooKbGLU8JXhe1zwpQUWIeXSgLPOfwJmgheWRIUpcoA0CpyabpGhayjdG+/eA5esC1AQ8h2jWpXjJfzQzeDOCw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.29.2",
+        "html-parse-stringify": "^3.0.1",
+        "use-sync-external-store": "^1.6.0"
+      },
+      "peerDependencies": {
+        "i18next": ">= 26.2.0",
+        "react": ">= 16.8.0",
+        "typescript": "^5 || ^6"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -10833,6 +10926,7 @@
       "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -11101,6 +11195,7 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "devOptional": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -11434,6 +11529,15 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/void-elements": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
+      "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/warning": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
@@ -11774,6 +11878,7 @@
       "resolved": "https://registry.npmjs.org/zod/-/zod-4.3.6.tgz",
       "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==",
       "license": "MIT",
+      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }

frontend/package.json

@@ -14,6 +14,8 @@
     "@base-ui/react": "^1.4.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "i18next": "^26.3.0",
+    "i18next-browser-languagedetector": "^8.2.1",
     "lucide-react": "^1.8.0",
     "next": "16.2.4",
     "next-themes": "^0.4.6",
@@ -21,6 +23,7 @@
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "react-dropzone": "^15.0.0",
+    "react-i18next": "^17.0.8",
     "react-markdown": "^10.1.0",
     "react-pdf": "^10.4.1",
     "rehype-highlight": "^7.0.2",

frontend/src/app/layout.tsx

@@ -3,6 +3,7 @@ import { Inter } from "next/font/google";
 import "./globals.css";
 import { AuthProvider } from "@/lib/auth";
 import { TooltipProvider } from "@/components/ui/tooltip";
+import I18nProvider from "@/components/providers/I18nProvider";
 import { ThemeProvider } from "@/components/layout/ThemeProvider";
 
 const inter = Inter({
@@ -33,12 +34,12 @@ export default function RootLayout({
           disableTransitionOnChange
         >
           <AuthProvider>
-            <TooltipProvider>
-              {children}
-            </TooltipProvider>
+            <I18nProvider>
+              <TooltipProvider>{children}</TooltipProvider>
+            </I18nProvider>
           </AuthProvider>
         </ThemeProvider>
       </body>
     </html>
   );
-}
+}

frontend/src/app/login/page.tsx

@@ -3,6 +3,7 @@
 import { useCallback, useState } from "react";
 import { useRouter } from "next/navigation";
 import { useAuth } from "@/lib/auth";
+import { useTranslation } from "react-i18next";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
@@ -12,6 +13,7 @@ import GoogleSignInButton from "@/components/auth/GoogleSignInButton";
 
 export default function LoginPage() {
   const { login } = useAuth();
+  const { t } = useTranslation();
   const router = useRouter();
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
@@ -32,7 +34,7 @@ export default function LoginPage() {
       await login(email, password);
       router.replace("/dashboard");
     } catch (err: unknown) {
-      const message = err instanceof Error ? err.message : "Login failed";
+      const message = err instanceof Error ? err.message : t("login.fallbackError");
       setError(message);
     } finally {
       setLoading(false);
@@ -51,8 +53,8 @@ export default function LoginPage() {
               <Brain className="w-6 h-6 text-primary" />
             </div>
           </div>
-          <CardTitle className="text-2xl font-bold">Welcome back</CardTitle>
-          <CardDescription>Sign in to your Document AI Analyst account</CardDescription>
+          <CardTitle className="text-2xl font-bold">{t("login.title")}</CardTitle>
+          <CardDescription>{t("login.description")}</CardDescription>
         </CardHeader>
 
         <CardContent>
@@ -71,7 +73,7 @@ export default function LoginPage() {
             )}
 
             <div className="space-y-2">
-              <label className="text-sm font-medium">Email</label>
+              <label className="text-sm font-medium">{t("common.email")}</label>
               <Input
                 id="login-email"
                 type="email"
@@ -84,7 +86,7 @@ export default function LoginPage() {
             </div>
 
             <div className="space-y-2">
-              <label className="text-sm font-medium">Password</label>
+              <label className="text-sm font-medium">{t("common.password")}</label>
               <div className="relative">
                 <Input
                   id="login-password"
@@ -109,18 +111,18 @@ export default function LoginPage() {
               {loading ? (
                 <span className="flex items-center gap-2">
                   <span className="w-4 h-4 border-2 border-primary-foreground/30 border-t-primary-foreground rounded-full animate-spin" />
-                  Signing in...
+                  {t("login.submitting")}
                 </span>
               ) : (
-                "Sign In"
+                t("login.submit")
               )}
             </Button>
           </form>
 
           <p className="text-center text-sm text-muted-foreground mt-6">
-            Don&apos;t have an account?{" "}
+            {t("login.noAccount")}{" "}
             <Link href="/register" className="text-primary hover:underline font-medium">
-              Create one
+              {t("login.createOne")}
             </Link>
           </p>
         </CardContent>

frontend/src/app/register/page.tsx

@@ -3,6 +3,7 @@
 import { useCallback, useState } from "react";
 import { useRouter } from "next/navigation";
 import { useAuth } from "@/lib/auth";
+import { useTranslation } from "react-i18next";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
@@ -12,6 +13,7 @@ import GoogleSignInButton from "@/components/auth/GoogleSignInButton";
 
 export default function RegisterPage() {
   const { register } = useAuth();
+  const { t } = useTranslation();
   const router = useRouter();
   const [username, setUsername] = useState("");
   const [email, setEmail] = useState("");
@@ -33,7 +35,7 @@ export default function RegisterPage() {
       await register(username, email, password);
       router.replace("/dashboard");
     } catch (err: unknown) {
-      const message = err instanceof Error ? err.message : "Registration failed";
+      const message = err instanceof Error ? err.message : t("register.fallbackError");
       setError(message);
     } finally {
       setLoading(false);
@@ -51,8 +53,8 @@ export default function RegisterPage() {
               <Brain className="w-6 h-6 text-primary" />
             </div>
           </div>
-          <CardTitle className="text-2xl font-bold">Create Account</CardTitle>
-          <CardDescription>Start analyzing documents with AI</CardDescription>
+          <CardTitle className="text-2xl font-bold">{t("register.title")}</CardTitle>
+          <CardDescription>{t("register.description")}</CardDescription>
         </CardHeader>
 
         <CardContent>
@@ -71,7 +73,7 @@ export default function RegisterPage() {
             )}
 
             <div className="space-y-2">
-              <label className="text-sm font-medium">Username</label>
+              <label className="text-sm font-medium">{t("common.username")}</label>
               <Input
                 id="reg-username"
                 type="text"
@@ -85,7 +87,7 @@ export default function RegisterPage() {
             </div>
 
             <div className="space-y-2">
-              <label className="text-sm font-medium">Email</label>
+              <label className="text-sm font-medium">{t("common.email")}</label>
               <Input
                 id="reg-email"
                 type="email"
@@ -98,12 +100,12 @@ export default function RegisterPage() {
             </div>
 
             <div className="space-y-2">
-              <label className="text-sm font-medium">Password</label>
+              <label className="text-sm font-medium">{t("common.password")}</label>
               <div className="relative">
                 <Input
                   id="reg-password"
                   type={showPw ? "text" : "password"}
-                  placeholder="Minimum 6 characters"
+                  placeholder={t("register.passwordPlaceholder")}
                   value={password}
                   onChange={(e) => setPassword(e.target.value)}
                   required
@@ -124,18 +126,18 @@ export default function RegisterPage() {
               {loading ? (
                 <span className="flex items-center gap-2">
                   <span className="w-4 h-4 border-2 border-primary-foreground/30 border-t-primary-foreground rounded-full animate-spin" />
-                  Creating account...
+                  {t("register.submitting")}
                 </span>
               ) : (
-                "Create Account"
+                t("register.submit")
               )}
             </Button>
           </form>
 
           <p className="text-center text-sm text-muted-foreground mt-6">
-            Already have an account?{" "}
+            {t("register.hasAccount")}{" "}
             <Link href="/login" className="text-primary hover:underline font-medium">
-              Sign in
+              {t("register.signIn")}
             </Link>
           </p>
         </CardContent>

frontend/src/components/chat/ChatPanel.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState, useRef, useEffect } from "react";
+import { useTranslation } from "react-i18next";
 import type { DocInfo } from "@/app/dashboard/page";
 import { api, API_BASE } from "@/lib/api";
 import { useChatStore, type ChatMsg, type SourceChunk } from "@/store/chat-store";
@@ -16,6 +17,7 @@ interface Props {
 }
 
 export default function ChatPanel({ activeDoc, onCitationClick }: Props) {
+  const { t } = useTranslation();
   const messages = useChatStore((state) => state.messages);
   const input = useChatStore((state) => state.input);
   const streaming = useChatStore((state) => state.streaming);
@@ -185,7 +187,9 @@ export default function ChatPanel({ activeDoc, onCitationClick }: Props) {
           m.id === assistantId
             ? {
                 ...m,
-                content: `Failed to get response: ${err instanceof Error ? err.message : "Unknown error"}`,
+                content: t("chat.fallbackError", {
+                  message: err instanceof Error ? err.message : "Unknown error",
+                }),
                 isStreaming: false,
               }
             : m
@@ -198,7 +202,7 @@ export default function ChatPanel({ activeDoc, onCitationClick }: Props) {
   };
 
   const handleClear = async () => {
-    if (!activeDoc || !confirm("Clear all chat history for this document?")) return;
+    if (!activeDoc || !confirm(t("chat.clearConfirm"))) return;
     try {
       await api.delete(`/api/v1/chat/history/${activeDoc.id}`);
       setMessages([]);
@@ -250,12 +254,12 @@ export default function ChatPanel({ activeDoc, onCitationClick }: Props) {
               <MessageSquare className="w-8 h-8 text-primary/60" />
             </div>
             <h3 className="text-lg font-semibold mb-1">
-              {activeDoc ? "Ask about your document" : "Select a document"}
+              {activeDoc ? t("chat.askAboutDocument") : t("chat.selectDocument")}
             </h3>
             <p className="text-sm text-muted-foreground text-center max-w-sm">
               {activeDoc
-                ? `"${activeDoc.original_name}" is ready. Ask any question and get cited answers.`
-                : "Upload and select a document from the sidebar to start chatting."}
+                ? t("chat.readyPrompt", { name: activeDoc.original_name })
+                : t("chat.uploadPrompt")}
             </p>
           </div>
         ) : (
@@ -293,8 +297,8 @@ export default function ChatPanel({ activeDoc, onCitationClick }: Props) {
             onKeyDown={handleKeyDown}
             placeholder={
               activeDoc
-                ? `Ask about "${activeDoc.original_name}"...`
-                : "Select a document first..."
+                ? t("chat.askPlaceholder", { name: activeDoc.original_name })
+                : t("chat.selectPlaceholder")
             }
             disabled={streaming}
             className="min-h-[44px] max-h-32 resize-none bg-background/50 border-border/50"
@@ -324,7 +328,7 @@ export default function ChatPanel({ activeDoc, onCitationClick }: Props) {
                     size="icon"
                     onClick={() => setShowExportMenu((v) => !v)}
                     className="h-[44px] w-[44px] text-muted-foreground hover:text-primary"
-                    title="Export chat history"
+                    title={t("chat.exportTitle")}
                   >
                     <Download className="w-4 h-4" />
                   </Button>
@@ -336,7 +340,7 @@ export default function ChatPanel({ activeDoc, onCitationClick }: Props) {
                         className="w-full flex items-center gap-2 rounded-md px-3 py-2 text-sm hover:bg-accent transition-colors text-left"
                       >
                         <span className="text-base">📝</span>
-                        Markdown (.md)
+                        {t("chat.markdown")}
                       </button>
                       <button
                         id="export-txt-btn"
@@ -344,7 +348,7 @@ export default function ChatPanel({ activeDoc, onCitationClick }: Props) {
                         className="w-full flex items-center gap-2 rounded-md px-3 py-2 text-sm hover:bg-accent transition-colors text-left"
                       >
                         <span className="text-base">📄</span>
-                        Plain Text (.txt)
+                        {t("chat.plainText")}
                       </button>
                       <button
                         id="export-pdf-btn"
@@ -352,7 +356,7 @@ export default function ChatPanel({ activeDoc, onCitationClick }: Props) {
                         className="w-full flex items-center gap-2 rounded-md px-3 py-2 text-sm hover:bg-accent transition-colors text-left"
                       >
                         <span className="text-base">📕</span>
-                        PDF (.pdf)
+                        {t("chat.pdf")}
                       </button>
                     </div>
                   )}

frontend/src/components/document/DocumentSidebar.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState, useCallback } from "react";
+import { useTranslation } from "react-i18next";
 import type { DocInfo } from "@/app/dashboard/page";
 import { api } from "@/lib/api";
 import { ScrollArea } from "@/components/ui/scroll-area";
@@ -20,6 +21,7 @@ interface Props {
 }
 
 export default function DocumentSidebar({ documents = [], activeDoc, onSelectDoc, onDocumentsChange }: Props) {
+  const { t } = useTranslation();
   const [uploading, setUploading] = useState(false);
   const [uploadProgress, setUploadProgress] = useState(0);
   const [uploadError, setUploadError] = useState("");
@@ -43,7 +45,7 @@ export default function DocumentSidebar({ documents = [], activeDoc, onSelectDoc
           }
           onDocumentsChange();
         } catch (err) {
-          const message = err instanceof Error ? err.message : "Upload failed";
+          const message = err instanceof Error ? err.message : t("documents.uploadFailed");
           setUploadError(message);
         } finally {
           setUploading(false);
@@ -51,7 +53,7 @@ export default function DocumentSidebar({ documents = [], activeDoc, onSelectDoc
         }
       })();
     },
-    [onDocumentsChange]
+    [onDocumentsChange, t]
   );
 
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
@@ -67,7 +69,7 @@ export default function DocumentSidebar({ documents = [], activeDoc, onSelectDoc
 
   const handleDelete = async (docId: string, e: React.MouseEvent) => {
     e.stopPropagation();
-    if (!confirm("Delete this document and all its data?")) return;
+    if (!confirm(t("documents.deleteConfirm"))) return;
     setDeleting(docId);
     try {
       await api.delete(`/api/v1/documents/${docId}`);
@@ -119,17 +121,17 @@ export default function DocumentSidebar({ documents = [], activeDoc, onSelectDoc
           {uploading ? (
             <div className="space-y-2">
               <Loader2 className="w-5 h-5 mx-auto animate-spin text-primary" />
-              <p className="text-xs text-muted-foreground">Uploading...</p>
+              <p className="text-xs text-muted-foreground">{t("documents.uploading")}</p>
               <Progress value={uploadProgress} className="h-1" />
             </div>
           ) : (
             <>
               <Upload className="w-5 h-5 mx-auto text-muted-foreground mb-2" />
               <p className="text-xs text-muted-foreground">
-                {isDragActive ? "Drop files here" : "Drop files or click to upload"}
+                {isDragActive ? t("documents.dropHere") : t("documents.dropOrClick")}
               </p>
               <p className="text-[10px] text-muted-foreground/60 mt-1">
-                PDF, DOCX, TXT, MD (max 50MB)
+                {t("documents.uploadFormats")}
               </p>
             </>
           )}
@@ -139,7 +141,7 @@ export default function DocumentSidebar({ documents = [], activeDoc, onSelectDoc
       {/* ── Documents List ──────────────────────────── */}
       <div className="px-3 pt-3 pb-1">
         <h3 className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground mb-2">
-          Documents ({documents.length})
+          {t("documents.documentsTitle", { count: documents.length })}
         </h3>
       </div>
 
@@ -147,8 +149,8 @@ export default function DocumentSidebar({ documents = [], activeDoc, onSelectDoc
         {documents.length === 0 ? (
           <div className="text-center py-12">
             <FolderOpen className="w-8 h-8 mx-auto text-muted-foreground/40 mb-3" />
-            <p className="text-sm text-muted-foreground">No documents yet</p>
-            <p className="text-xs text-muted-foreground/60 mt-1">Upload a file to get started</p>
+            <p className="text-sm text-muted-foreground">{t("documents.noDocuments")}</p>
+            <p className="text-xs text-muted-foreground/60 mt-1">{t("documents.getStarted")}</p>
           </div>
         ) : (
           <div className="space-y-1 pb-3">
@@ -179,22 +181,22 @@ export default function DocumentSidebar({ documents = [], activeDoc, onSelectDoc
                         <>
                           <span className="text-[10px] text-muted-foreground">•</span>
                           <span className="text-[10px] text-muted-foreground">
-                            {doc.page_count} pg
+                            {t("documents.pagesShort", { count: doc.page_count })}
                           </span>
                           <span className="text-[10px] text-muted-foreground">•</span>
                           <span className="text-[10px] text-muted-foreground">
-                            {doc.chunk_count} chunks
+                            {t("documents.chunks", { count: doc.chunk_count })}
                           </span>
                         </>
                       )}
                       {doc.status === "processing" && (
                         <Badge variant="secondary" className="text-[9px] h-4 px-1.5">
-                          Processing
+                          {t("documents.processing")}
                         </Badge>
                       )}
                       {doc.status === "failed" && (
                         <Badge variant="destructive" className="text-[9px] h-4 px-1.5">
-                          Failed
+                          {t("documents.failed")}
                         </Badge>
                       )}
                     </div>

frontend/src/components/layout/Header.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useAuth } from "@/lib/auth";
+import { useTranslation } from "react-i18next";
 import { useRouter } from "next/navigation";
 import { Button } from "@/components/ui/button";
 import { Avatar, AvatarFallback } from "@/components/ui/avatar";
@@ -39,6 +40,7 @@ const getServerSnapshot = () => false;
 
 export default function Header({ sidebarOpen, onToggleSidebar, viewerOpen, onToggleViewer }: HeaderProps) {
   const { user, logout } = useAuth();
+  const { t, i18n } = useTranslation();
   const router = useRouter();
   const { theme, setTheme } = useTheme();
   const mounted = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot); // ← replaces useState + useEffect
@@ -51,11 +53,24 @@ export default function Header({ sidebarOpen, onToggleSidebar, viewerOpen, onTog
     router.replace("/login");
   };
 
+  const languageLabel = (language: string) => {
+    switch (language) {
+      case "hi":
+        return t("common.hindi");
+      case "es":
+        return t("common.spanish");
+      case "fr":
+        return t("common.french");
+      default:
+        return t("common.english");
+    }
+  };
+
   return (
     <header className="h-14 flex items-center justify-between px-4 border-b border-border/50 bg-card/50 backdrop-blur-md flex-shrink-0 z-50">
       {/* Left */}
       <div className="flex items-center gap-3">
-        <Button variant="ghost" size="icon" className="h-8 w-8" onClick={onToggleSidebar} title={sidebarOpen ? "Close sidebar" : "Open sidebar"}>
+        <Button variant="ghost" size="icon" className="h-8 w-8" onClick={onToggleSidebar} title={sidebarOpen ? t("header.closeSidebar") : t("header.openSidebar")}>
           {sidebarOpen ? <PanelLeftClose className="w-4 h-4" /> : <PanelLeftOpen className="w-4 h-4" />}
         </Button>
 
@@ -63,22 +78,34 @@ export default function Header({ sidebarOpen, onToggleSidebar, viewerOpen, onTog
           <div className="w-7 h-7 rounded-lg bg-primary/15 flex items-center justify-center">
             <Brain className="w-4 h-4 text-primary" />
           </div>
-          <span className="font-semibold text-sm hidden sm:inline">Document AI Analyst</span>
+          <span className="font-semibold text-sm hidden sm:inline">{t("common.appName")}</span>
         </div>
       </div>
 
       {/* Right */}
       <div className="flex items-center gap-2">
-        <Button variant="ghost" size="icon" className="h-8 w-8" onClick={onToggleViewer} title={viewerOpen ? "Close viewer" : "Open viewer"}>
+        <Button variant="ghost" size="icon" className="h-8 w-8" onClick={onToggleViewer} title={viewerOpen ? t("header.closeViewer") : t("header.openViewer")}>
           {viewerOpen ? <PanelRightClose className="w-4 h-4" /> : <PanelRightOpen className="w-4 h-4" />}
         </Button>
 
         {mounted && (
-          <Button variant="ghost" size="icon" className="h-8 w-8" onClick={toggleTheme} title={isDark ? "Light mode" : "Dark mode"}>
+          <Button variant="ghost" size="icon" className="h-8 w-8" onClick={toggleTheme} title={isDark ? t("header.lightMode") : t("header.darkMode")}>
             {isDark ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
           </Button>
         )}
 
+        <select
+          aria-label={t("common.language")}
+          value={i18n.resolvedLanguage || "en"}
+          onChange={(e) => void i18n.changeLanguage(e.target.value)}
+          className="h-8 rounded-md border border-border bg-background px-2 text-xs text-foreground"
+        >
+          <option value="en">{languageLabel("en")}</option>
+          <option value="hi">{languageLabel("hi")}</option>
+          <option value="es">{languageLabel("es")}</option>
+          <option value="fr">{languageLabel("fr")}</option>
+        </select>
+
         <DropdownMenu>
           <DropdownMenuTrigger
             render={
@@ -103,7 +130,7 @@ export default function Header({ sidebarOpen, onToggleSidebar, viewerOpen, onTog
             <DropdownMenuSeparator />
             <DropdownMenuItem className="text-destructive cursor-pointer" onClick={handleLogout}>
               <LogOut className="w-4 h-4 mr-2" />
-              Sign out
+              {t("header.signOut")}
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>

frontend/src/components/providers/I18nProvider.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { useEffect } from "react";
+import { I18nextProvider } from "react-i18next";
+import i18n from "@/lib/i18n";
+
+export default function I18nProvider({ children }: { children: React.ReactNode }) {
+  useEffect(() => {
+    document.documentElement.lang = i18n.resolvedLanguage || "en";
+
+    const handleLanguageChanged = (language: string) => {
+      document.documentElement.lang = language;
+    };
+
+    i18n.on("languageChanged", handleLanguageChanged);
+    return () => {
+      i18n.off("languageChanged", handleLanguageChanged);
+    };
+  }, []);
+
+  return <I18nextProvider i18n={i18n}>{children}</I18nextProvider>;
+}

frontend/src/lib/i18n.ts

@@ -0,0 +1,320 @@
+"use client";
+
+import i18n from "i18next";
+import LanguageDetector from "i18next-browser-languagedetector";
+import { initReactI18next } from "react-i18next";
+
+const resources = {
+  en: {
+    translation: {
+      common: {
+        appName: "Document AI Analyst",
+        language: "Language",
+        english: "English",
+        hindi: "Hindi",
+        spanish: "Spanish",
+        french: "French",
+        email: "Email",
+        password: "Password",
+        username: "Username",
+      },
+      header: {
+        closeSidebar: "Close sidebar",
+        openSidebar: "Open sidebar",
+        closeViewer: "Close viewer",
+        openViewer: "Open viewer",
+        lightMode: "Light mode",
+        darkMode: "Dark mode",
+        signOut: "Sign out",
+      },
+      login: {
+        title: "Welcome back",
+        description: "Sign in to your Document AI Analyst account",
+        fallbackError: "Login failed",
+        submit: "Sign In",
+        submitting: "Signing in...",
+        noAccount: "Don't have an account?",
+        createOne: "Create one",
+      },
+      register: {
+        title: "Create Account",
+        description: "Start analyzing documents with AI",
+        fallbackError: "Registration failed",
+        passwordPlaceholder: "Minimum 6 characters",
+        submit: "Create Account",
+        submitting: "Creating account...",
+        hasAccount: "Already have an account?",
+        signIn: "Sign in",
+      },
+      chat: {
+        askAboutDocument: "Ask about your document",
+        selectDocument: "Select a document",
+        readyPrompt: "\"{{name}}\" is ready. Ask any question and get cited answers.",
+        uploadPrompt: "Upload and select a document from the sidebar to start chatting.",
+        fallbackError: "Failed to get response: {{message}}",
+        clearConfirm: "Clear all chat history for this document?",
+        askPlaceholder: "Ask about \"{{name}}\"...",
+        selectPlaceholder: "Select a document first...",
+        exportTitle: "Export chat history",
+        markdown: "Markdown (.md)",
+        plainText: "Plain Text (.txt)",
+        pdf: "PDF (.pdf)",
+      },
+      documents: {
+        uploadFailed: "Upload failed",
+        deleteConfirm: "Delete this document and all its data?",
+        uploading: "Uploading...",
+        dropHere: "Drop files here",
+        dropOrClick: "Drop files or click to upload",
+        uploadFormats: "PDF, DOCX, TXT, MD (max 50MB)",
+        documentsTitle: "Documents ({{count}})",
+        noDocuments: "No documents yet",
+        getStarted: "Upload a file to get started",
+        pagesShort: "{{count}} pg",
+        chunks: "{{count}} chunks",
+        processing: "Processing",
+        failed: "Failed",
+      },
+    },
+  },
+  hi: {
+    translation: {
+      common: {
+        appName: "डॉक्यूमेंट एआई एनालिस्ट",
+        language: "भाषा",
+        english: "अंग्रेज़ी",
+        hindi: "हिंदी",
+        spanish: "स्पेनिश",
+        french: "फ़्रेंच",
+        email: "ईमेल",
+        password: "पासवर्ड",
+        username: "उपयोगकर्ता नाम",
+      },
+      header: {
+        closeSidebar: "साइडबार बंद करें",
+        openSidebar: "साइडबार खोलें",
+        closeViewer: "व्यूअर बंद करें",
+        openViewer: "व्यूअर खोलें",
+        lightMode: "लाइट मोड",
+        darkMode: "डार्क मोड",
+        signOut: "साइन आउट",
+      },
+      login: {
+        title: "वापसी पर स्वागत है",
+        description: "अपने डॉक्यूमेंट एआई एनालिस्ट खाते में साइन इन करें",
+        fallbackError: "लॉगिन विफल",
+        submit: "साइन इन करें",
+        submitting: "साइन इन हो रहा है...",
+        noAccount: "क्या आपका खाता नहीं है?",
+        createOne: "एक बनाएं",
+      },
+      register: {
+        title: "खाता बनाएं",
+        description: "एआई के साथ दस्तावेज़ों का विश्लेषण शुरू करें",
+        fallbackError: "पंजीकरण विफल",
+        passwordPlaceholder: "कम से कम 6 अक्षर",
+        submit: "खाता बनाएं",
+        submitting: "खाता बनाया जा रहा है...",
+        hasAccount: "क्या पहले से खाता है?",
+        signIn: "साइन इन करें",
+      },
+      chat: {
+        askAboutDocument: "अपने दस्तावेज़ के बारे में पूछें",
+        selectDocument: "एक दस्तावेज़ चुनें",
+        readyPrompt: "\"{{name}}\" तैयार है। कोई भी प्रश्न पूछें और स्रोत सहित उत्तर पाएं।",
+        uploadPrompt: "चैट शुरू करने के लिए साइडबार से फ़ाइल अपलोड और चुनें।",
+        fallbackError: "जवाब प्राप्त नहीं हुआ: {{message}}",
+        clearConfirm: "क्या इस दस्तावेज़ का पूरा चैट इतिहास साफ़ करें?",
+        askPlaceholder: "\"{{name}}\" के बारे में पूछें...",
+        selectPlaceholder: "पहले एक दस्तावेज़ चुनें...",
+        exportTitle: "चैट इतिहास निर्यात करें",
+        markdown: "मार्कडाउन (.md)",
+        plainText: "सादा पाठ (.txt)",
+        pdf: "पीडीएफ (.pdf)",
+      },
+      documents: {
+        uploadFailed: "अपलोड विफल",
+        deleteConfirm: "क्या इस दस्तावेज़ और उसके सभी डेटा को हटाएं?",
+        uploading: "अपलोड हो रहा है...",
+        dropHere: "फ़ाइलें यहाँ छोड़ें",
+        dropOrClick: "फ़ाइलें छोड़ें या अपलोड के लिए क्लिक करें",
+        uploadFormats: "PDF, DOCX, TXT, MD (अधिकतम 50MB)",
+        documentsTitle: "दस्तावेज़ ({{count}})",
+        noDocuments: "अभी तक कोई दस्तावेज़ नहीं",
+        getStarted: "शुरू करने के लिए फ़ाइल अपलोड करें",
+        pagesShort: "{{count}} पेज",
+        chunks: "{{count}} खंड",
+        processing: "प्रोसेस हो रहा है",
+        failed: "विफल",
+      },
+    },
+  },
+  es: {
+    translation: {
+      common: {
+        appName: "Analista IA de Documentos",
+        language: "Idioma",
+        english: "Inglés",
+        hindi: "Hindi",
+        spanish: "Español",
+        french: "Francés",
+        email: "Correo electrónico",
+        password: "Contraseña",
+        username: "Nombre de usuario",
+      },
+      header: {
+        closeSidebar: "Cerrar barra lateral",
+        openSidebar: "Abrir barra lateral",
+        closeViewer: "Cerrar visor",
+        openViewer: "Abrir visor",
+        lightMode: "Modo claro",
+        darkMode: "Modo oscuro",
+        signOut: "Cerrar sesión",
+      },
+      login: {
+        title: "Bienvenido de nuevo",
+        description: "Inicia sesión en tu cuenta de Analista IA de Documentos",
+        fallbackError: "Error al iniciar sesión",
+        submit: "Iniciar sesión",
+        submitting: "Iniciando sesión...",
+        noAccount: "¿No tienes una cuenta?",
+        createOne: "Crear una",
+      },
+      register: {
+        title: "Crear cuenta",
+        description: "Empieza a analizar documentos con IA",
+        fallbackError: "Error de registro",
+        passwordPlaceholder: "Mínimo 6 caracteres",
+        submit: "Crear cuenta",
+        submitting: "Creando cuenta...",
+        hasAccount: "¿Ya tienes una cuenta?",
+        signIn: "Inicia sesión",
+      },
+      chat: {
+        askAboutDocument: "Pregunta sobre tu documento",
+        selectDocument: "Selecciona un documento",
+        readyPrompt: "\"{{name}}\" está listo. Haz cualquier pregunta y obtén respuestas con citas.",
+        uploadPrompt: "Sube y selecciona un documento de la barra lateral para comenzar a chatear.",
+        fallbackError: "No se pudo obtener respuesta: {{message}}",
+        clearConfirm: "¿Borrar todo el historial de chat de este documento?",
+        askPlaceholder: "Pregunta sobre \"{{name}}\"...",
+        selectPlaceholder: "Primero selecciona un documento...",
+        exportTitle: "Exportar historial del chat",
+        markdown: "Markdown (.md)",
+        plainText: "Texto plano (.txt)",
+        pdf: "PDF (.pdf)",
+      },
+      documents: {
+        uploadFailed: "Error de carga",
+        deleteConfirm: "¿Eliminar este documento y todos sus datos?",
+        uploading: "Subiendo...",
+        dropHere: "Suelta archivos aquí",
+        dropOrClick: "Suelta archivos o haz clic para subir",
+        uploadFormats: "PDF, DOCX, TXT, MD (máx. 50MB)",
+        documentsTitle: "Documentos ({{count}})",
+        noDocuments: "Aún no hay documentos",
+        getStarted: "Sube un archivo para comenzar",
+        pagesShort: "{{count}} pág",
+        chunks: "{{count}} fragmentos",
+        processing: "Procesando",
+        failed: "Falló",
+      },
+    },
+  },
+  fr: {
+    translation: {
+      common: {
+        appName: "Analyste IA de Documents",
+        language: "Langue",
+        english: "Anglais",
+        hindi: "Hindi",
+        spanish: "Espagnol",
+        french: "Français",
+        email: "E-mail",
+        password: "Mot de passe",
+        username: "Nom d'utilisateur",
+      },
+      header: {
+        closeSidebar: "Fermer la barre latérale",
+        openSidebar: "Ouvrir la barre latérale",
+        closeViewer: "Fermer le lecteur",
+        openViewer: "Ouvrir le lecteur",
+        lightMode: "Mode clair",
+        darkMode: "Mode sombre",
+        signOut: "Se déconnecter",
+      },
+      login: {
+        title: "Bon retour",
+        description: "Connectez-vous à votre compte Analyste IA de Documents",
+        fallbackError: "Échec de la connexion",
+        submit: "Se connecter",
+        submitting: "Connexion en cours...",
+        noAccount: "Vous n'avez pas de compte ?",
+        createOne: "En créer un",
+      },
+      register: {
+        title: "Créer un compte",
+        description: "Commencez à analyser des documents avec l'IA",
+        fallbackError: "Échec de l'inscription",
+        passwordPlaceholder: "6 caractères minimum",
+        submit: "Créer un compte",
+        submitting: "Création du compte...",
+        hasAccount: "Vous avez déjà un compte ?",
+        signIn: "Se connecter",
+      },
+      chat: {
+        askAboutDocument: "Posez une question sur votre document",
+        selectDocument: "Sélectionnez un document",
+        readyPrompt: "\"{{name}}\" est prêt. Posez n'importe quelle question et obtenez des réponses sourcées.",
+        uploadPrompt: "Importez puis sélectionnez un document dans la barre latérale pour commencer à discuter.",
+        fallbackError: "Impossible d'obtenir une réponse : {{message}}",
+        clearConfirm: "Effacer tout l'historique de discussion de ce document ?",
+        askPlaceholder: "Posez une question sur \"{{name}}\"...",
+        selectPlaceholder: "Sélectionnez d'abord un document...",
+        exportTitle: "Exporter l'historique du chat",
+        markdown: "Markdown (.md)",
+        plainText: "Texte brut (.txt)",
+        pdf: "PDF (.pdf)",
+      },
+      documents: {
+        uploadFailed: "Échec de l'envoi",
+        deleteConfirm: "Supprimer ce document et toutes ses données ?",
+        uploading: "Envoi en cours...",
+        dropHere: "Déposez les fichiers ici",
+        dropOrClick: "Déposez les fichiers ou cliquez pour téléverser",
+        uploadFormats: "PDF, DOCX, TXT, MD (max 50 Mo)",
+        documentsTitle: "Documents ({{count}})",
+        noDocuments: "Aucun document pour le moment",
+        getStarted: "Importez un fichier pour commencer",
+        pagesShort: "{{count}} p",
+        chunks: "{{count}} segments",
+        processing: "Traitement",
+        failed: "Échec",
+      },
+    },
+  },
+} as const;
+
+if (!i18n.isInitialized) {
+  void i18n
+    .use(LanguageDetector)
+    .use(initReactI18next)
+    .init({
+      resources,
+      fallbackLng: "en",
+      supportedLngs: ["en", "hi", "es", "fr"],
+      interpolation: {
+        escapeValue: false,
+      },
+      detection: {
+        order: ["localStorage", "navigator"],
+        caches: ["localStorage"],
+        lookupLocalStorage: "i18nextLng",
+      },
+      react: {
+        useSuspense: false,
+      },
+    });
+}
+
+export default i18n;