feat: add EN/ZH bilingual language toggle

Author: Spectual

src/App.tsx

@@ -6,6 +6,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import Index from "./pages/Index";
 import NotFound from "./pages/NotFound";
+import { LanguageProvider } from "./i18n/LanguageContext";
 
 const Resume = lazy(() => import("./pages/Resume"));
 const Projects = lazy(() => import("./pages/Projects"));
@@ -55,22 +56,24 @@ const queryClient = new QueryClient();
 
 const App = () => (
   <ErrorBoundary>
-    <QueryClientProvider client={queryClient}>
-      <TooltipProvider>
-        <Toaster />
-        <Sonner />
-        <BrowserRouter>
-          <Suspense fallback={null}>
-            <Routes>
-              <Route path="/" element={<Index />} />
-              <Route path="/resume" element={<Resume />} />
-              <Route path="/projects" element={<Projects />} />
-              <Route path="*" element={<NotFound />} />
-            </Routes>
-          </Suspense>
-        </BrowserRouter>
-      </TooltipProvider>
-    </QueryClientProvider>
+    <LanguageProvider>
+      <QueryClientProvider client={queryClient}>
+        <TooltipProvider>
+          <Toaster />
+          <Sonner />
+          <BrowserRouter>
+            <Suspense fallback={null}>
+              <Routes>
+                <Route path="/" element={<Index />} />
+                <Route path="/resume" element={<Resume />} />
+                <Route path="/projects" element={<Projects />} />
+                <Route path="*" element={<NotFound />} />
+              </Routes>
+            </Suspense>
+          </BrowserRouter>
+        </TooltipProvider>
+      </QueryClientProvider>
+    </LanguageProvider>
   </ErrorBoundary>
 );
 

src/components/ChatSection.tsx

@@ -4,15 +4,7 @@ import MessageBubble from "./MessageBubble";
 import { sendMessageStream, checkHealth } from "@/utils/api";
 import { toast } from "sonner";
 import type { Message } from "@/types/chat";
-
-const PREDEFINED_QUESTIONS = [
-  "What is your background?",
-  "Tell me about your projects",
-  "What are your technical skills?",
-  "Where did you study?",
-  "What's your work experience?",
-  "Any patents or publications?",
-];
+import { useLang } from "@/i18n/LanguageContext";
 
 // ── Neural network thinking indicator ─────────────────────────────────────
 const NN_FRAMES = [
@@ -53,11 +45,14 @@ const ThinkingIndicator = () => {
 };
 
 // ── ChatSection ────────────────────────────────────────────────────────────
+const INITIAL_MSG_ID = "1";
+
 const ChatSection = () => {
+  const { t, lang } = useLang();
   const [messages, setMessages] = useState<Message[]>([
     {
-      id: "1",
-      text: "Hi! I'm representing Yifei. Ask me anything about my background, skills, projects, or experience!",
+      id: INITIAL_MSG_ID,
+      text: t.chat.greeting,
       isUser: false,
       timestamp: new Date(),
     },
@@ -74,6 +69,16 @@ const ChatSection = () => {
   const historyIndexRef = useRef(-1);
   const pendingInputRef = useRef("");
 
+  // Update greeting when language changes (if no user messages yet)
+  useEffect(() => {
+    setMessages((prev) => {
+      const hasUserMsg = prev.some((m) => m.isUser);
+      if (hasUserMsg) return prev;
+      return [{ id: INITIAL_MSG_ID, text: t.chat.greeting, isUser: false, timestamp: prev[0].timestamp }];
+    });
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [lang]);
+
   const isNearBottom = (): boolean => {
     const el = scrollContainerRef.current;
     if (!el) return true;
@@ -99,26 +104,27 @@ const ChatSection = () => {
       const isOnline = await checkHealth();
       setIsServerOnline(isOnline);
       if (!isOnline) {
-        toast.error("AI server is currently offline. Please try again later.");
+        toast.error(t.chat.offlineToast);
       }
     };
     checkServerStatus();
     const interval = setInterval(checkServerStatus, 30000);
     return () => clearInterval(interval);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const handleExport = () => {
     if (messages.length <= 1) {
-      toast.info("Nothing to export yet — start a conversation first!");
+      toast.info(t.chat.exportNothing);
       return;
     }
     const lines = messages.map((m) => {
       const time = m.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
       return m.isUser
-        ? `**[${time}] You:** ${m.text}`
-        : `**[${time}] AI:** ${m.text}`;
+        ? `**[${time}] ${t.chat.youLabel}:** ${m.text}`
+        : `**[${time}] ${t.chat.aiLabel}:** ${m.text}`;
     });
-    const content = `# Chat Export\n\n_Exported on ${new Date().toLocaleString()}_\n\n---\n\n${lines.join("\n\n---\n\n")}`;
+    const content = `${t.chat.exportHeader}\n\n_${t.chat.exportedOn} ${new Date().toLocaleString()}_\n\n---\n\n${lines.join("\n\n---\n\n")}`;
     const blob = new Blob([content], { type: "text/markdown" });
     const url = URL.createObjectURL(blob);
     const a = document.createElement("a");
@@ -131,7 +137,7 @@ const ChatSection = () => {
   const handleSendMessage = async (messageText: string) => {
     if (!messageText.trim()) return;
     if (!isServerOnline) {
-      toast.error("AI server is currently offline. Please try again later.");
+      toast.error(t.chat.offlineToast);
       return;
     }
 
@@ -183,15 +189,15 @@ const ChatSection = () => {
         console.error("Stream error:", error);
         setIsLoading(false);
         setStreamingMessageId(null);
-        toast.error("Failed to get response. Please try again later.");
+        toast.error(t.chat.streamError);
         setMessages((prev) => {
           const hasAiMessage = prev.some((m) => m.id === aiId);
-          if (hasAiMessage) return prev; // partial response already shown, keep it
+          if (hasAiMessage) return prev;
           return [
             ...prev,
             {
               id: aiId,
-              text: "Sorry, I'm having trouble connecting right now. Please try again later.",
+              text: t.chat.fallbackError,
               isUser: false,
               timestamp: new Date(),
             },
@@ -233,7 +239,7 @@ const ChatSection = () => {
     <section className="px-4 pb-6" style={{ position: "relative", zIndex: 1 }}>
       <div className="max-w-4xl mx-auto">
         <div style={{ border: "1px solid var(--term-border)", backgroundColor: "var(--term-bg)" }}>
-          {/* Terminal title bar — enhanced AI style */}
+          {/* Terminal title bar */}
           <div
             style={{
               borderBottom: "1px solid var(--term-border)",
@@ -248,16 +254,16 @@ const ChatSection = () => {
           >
             <span style={{ color: "var(--term-dim)", fontSize: "12px" }}>
               🧠{" "}
-              <span style={{ color: "var(--term-text)" }}>AI Assistant v2.0</span>
+              <span style={{ color: "var(--term-text)" }}>{t.chat.titleBar}</span>
               <span style={{ color: "var(--term-dim)" }}>
-                {" "}| model:{" "}
+                {" "}| {t.chat.modelLabel}:{" "}
               </span>
               <span style={{ color: "var(--term-cyan)" }}>rag-powered</span>
               <span style={{ color: "var(--term-dim)" }}>
-                {" "}| status:{" "}
+                {" "}| {t.chat.statusLabel}:{" "}
               </span>
               <span style={{ color: isServerOnline ? "var(--term-green)" : "var(--term-red)" }}>
-                {isServerOnline ? "online" : "offline"}
+                {isServerOnline ? t.chat.statusOnline : t.chat.statusOffline}
               </span>
             </span>
             <div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
@@ -281,12 +287,12 @@ const ChatSection = () => {
                     animation: isServerOnline ? "neuralPulse 2s ease-in-out infinite" : "none",
                   }}
                 />
-                {isServerOnline ? "server:online" : "server:offline"}
+                {isServerOnline ? t.chat.serverOnline : t.chat.serverOffline}
               </span>
               {/* Export button */}
               <button
                 onClick={handleExport}
-                title="Export chat as Markdown"
+                title={t.chat.exportTooltip}
                 style={{
                   background: "transparent",
                   border: "1px solid var(--term-border)",
@@ -303,7 +309,7 @@ const ChatSection = () => {
                 className="chat-quick-btn"
               >
                 <Download size={11} />
-                export
+                {t.chat.exportBtn}
               </button>
             </div>
           </div>
@@ -336,7 +342,7 @@ const ChatSection = () => {
               }}
             >
               <AlertCircle size={13} />
-              error: AI server is offline. Responses unavailable.
+              {t.chat.offlineError}
             </div>
           )}
 
@@ -377,10 +383,10 @@ const ChatSection = () => {
             {/* Predefined questions */}
             <div style={{ marginBottom: "10px" }}>
               <div style={{ fontSize: "11px", color: "var(--term-dim)", marginBottom: "6px" }}>
-                # quick commands:
+                {t.chat.quickCommands}
               </div>
               <div className="grid grid-cols-2 sm:flex sm:flex-wrap gap-1.5">
-                {PREDEFINED_QUESTIONS.map((question, index) => (
+                {t.chat.questions.map((question, index) => (
                   <button
                     key={index}
                     onClick={() => handleSendMessage(question)}
@@ -422,7 +428,7 @@ const ChatSection = () => {
                 value={inputValue}
                 onChange={(e) => setInputValue(e.target.value)}
                 onKeyDown={handleKeyPress}
-                placeholder="type your question..."
+                placeholder={t.chat.placeholder}
                 disabled={isLoading || !isServerOnline}
                 style={{
                   flex: 1,
@@ -455,7 +461,7 @@ const ChatSection = () => {
                   flexShrink: 0,
                 }}
               >
-                [enter]
+                {t.chat.enterBtn}
               </button>
             </div>
           </div>

src/components/GetInTouchSection.tsx

@@ -1,26 +1,28 @@
 import { useState } from "react";
 import { toast } from "@/components/ui/use-toast";
 import { personalInfo } from "@/data/personalInfo";
+import { useLang } from "@/i18n/LanguageContext";
 
 const GetInTouchSection = () => {
+  const { t } = useLang();
   const [form, setForm] = useState({ name: "", company: "", email: "", message: "" });
   const [submitting, setSubmitting] = useState(false);
 
   const validate = () => {
     if (!form.name.trim()) {
-      toast({ title: "error: name is required" });
+      toast({ title: t.contact.errName });
       return false;
     }
     if (!form.email.trim()) {
-      toast({ title: "error: email is required" });
+      toast({ title: t.contact.errEmail });
       return false;
     }
     if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) {
-      toast({ title: "error: invalid email format" });
+      toast({ title: t.contact.errEmailFmt });
       return false;
     }
     if (!form.message.trim()) {
-      toast({ title: "error: message is required" });
+      toast({ title: t.contact.errMessage });
       return false;
     }
     return true;
@@ -82,7 +84,7 @@ const GetInTouchSection = () => {
               color: "var(--term-dim)",
             }}
           >
-            bash — ~/contact
+            {t.contact.titleBar}
           </div>
 
           <div style={{ padding: "20px 24px" }}>
@@ -97,7 +99,7 @@ const GetInTouchSection = () => {
                   contact --send-message
                 </span>
               </div>
-              <div style={{ color: "var(--term-dim)", fontSize: "11px", marginTop: "6px", marginLeft: "0" }}>
+              <div style={{ color: "var(--term-dim)", fontSize: "11px", marginTop: "6px" }}>
                 # opens default email client with form pre-filled
               </div>
             </div>
@@ -112,11 +114,11 @@ const GetInTouchSection = () => {
                 <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 mb-3">
                   <div>
                     <label htmlFor="contact-name" style={labelStyle}>
-                      name <span style={{ color: "var(--term-red)" }}>*</span>
+                      {t.contact.nameLabel} <span style={{ color: "var(--term-red)" }}>*</span>
                     </label>
                     <input
                       id="contact-name"
-                      placeholder="your name"
+                      placeholder={t.contact.namePlaceholder}
                       value={form.name}
                       onChange={(e) => setForm({ ...form, name: e.target.value })}
                       style={inputStyle}
@@ -126,12 +128,12 @@ const GetInTouchSection = () => {
                   </div>
                   <div>
                     <label htmlFor="contact-company" style={labelStyle}>
-                      company{" "}
-                      <span style={{ color: "var(--term-dim)", fontSize: "10px" }}>(optional)</span>
+                      {t.contact.companyLabel}{" "}
+                      <span style={{ color: "var(--term-dim)", fontSize: "10px" }}>{t.contact.optional}</span>
                     </label>
                     <input
                       id="contact-company"
-                      placeholder="company name"
+                      placeholder={t.contact.companyPlaceholder}
                       value={form.company}
                       onChange={(e) => setForm({ ...form, company: e.target.value })}
                       style={inputStyle}
@@ -143,12 +145,12 @@ const GetInTouchSection = () => {
 
                 <div style={{ marginBottom: "12px" }}>
                   <label htmlFor="contact-email" style={labelStyle}>
-                    email <span style={{ color: "var(--term-red)" }}>*</span>
+                    {t.contact.emailLabel} <span style={{ color: "var(--term-red)" }}>*</span>
                   </label>
                   <input
                     id="contact-email"
                     type="email"
-                    placeholder="you@example.com"
+                    placeholder={t.contact.emailPlaceholder}
                     value={form.email}
                     onChange={(e) => setForm({ ...form, email: e.target.value })}
                     style={inputStyle}
@@ -159,11 +161,11 @@ const GetInTouchSection = () => {
 
                 <div style={{ marginBottom: "16px" }}>
                   <label htmlFor="contact-message" style={labelStyle}>
-                    message <span style={{ color: "var(--term-red)" }}>*</span>
+                    {t.contact.messageLabel} <span style={{ color: "var(--term-red)" }}>*</span>
                   </label>
                   <textarea
                     id="contact-message"
-                    placeholder="your message..."
+                    placeholder={t.contact.messagePlaceholder}
                     rows={5}
                     value={form.message}
                     onChange={(e) => setForm({ ...form, message: e.target.value })}
@@ -198,18 +200,18 @@ const GetInTouchSection = () => {
                     e.currentTarget.style.color = "var(--term-green)";
                   }}
                 >
-                  {submitting ? "opening email client..." : "[send-message]"}
+                  {submitting ? t.contact.sending : t.contact.sendBtn}
                 </button>
               </form>
 
               {/* Contact info */}
               <div>
                 <div style={{ marginBottom: "16px" }}>
                   <div style={{ color: "var(--term-green)", fontWeight: 600, marginBottom: "4px", fontSize: "14px" }}>
-                    let's connect
+                    {t.contact.connectTitle}
                   </div>
                   <div style={{ color: "var(--term-dim)", fontSize: "12px", lineHeight: "1.6" }}>
-                    Happy to connect about opportunities, collaboration, or any interesting ideas.
+                    {t.contact.connectDesc}
                   </div>
                 </div>