feat: i18n (All-Hands-AI#723)

* feat: i18n

* fix: ci lint error

* fix: pnpm run pre script not trigger

---------

Co-authored-by: Jim Su <[email protected]>

Makefile

@@ -25,7 +25,7 @@ build:
 		rm -rf node_modules; \
 	fi
 	@which corepack > /dev/null || (echo "Installing corepack..." && npm install -g corepack)
-	@cd frontend && corepack enable && pnpm install
+	@cd frontend && corepack enable && pnpm install && pnpm run make-i18n
 
 # Start backend
 start-backend:

frontend/.gitignore

@@ -0,0 +1,3 @@
+# i18n translation files make by script using `make build`
+public/locales/**/*
+src/i18n/declaration.ts

frontend/.npmrc

@@ -1 +1,2 @@
 public-hoist-pattern[]=*@nextui-org/*
+enable-pre-post-scripts=true

frontend/package.json

@@ -23,8 +23,12 @@
     "@xterm/xterm": "^5.4.0",
     "eslint-config-airbnb-typescript": "^18.0.0",
     "framer-motion": "^11.0.24",
+    "i18next": "^23.10.1",
+    "i18next-browser-languagedetector": "^7.2.1",
+    "i18next-http-backend": "^2.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-i18next": "^14.1.0",
     "react-redux": "^9.1.0",
     "react-syntax-highlighter": "^15.5.0",
     "tailwind-merge": "^2.2.2",
@@ -39,6 +43,8 @@
     "build": "tsc && vite build",
     "test": "jest",
     "preview": "vite preview",
+    "make-i18n": "node scripts/make-i18n-translations.cjs",
+    "prelint": "pnpm run make-i18n",
     "lint": "eslint src/**/*.ts* && prettier --check src/**/*.ts*",
     "prepare": "cd .. && husky install frontend/.husky"
   },

frontend/scripts/make-i18n-translations.cjs

@@ -0,0 +1,42 @@
+const fs = require("fs");
+const path = require("path");
+const i18n = require("../src/i18n/translation.json");
+
+// { [lang]: { [key]: content } }
+const translationMap = {};
+
+Object.entries(i18n).forEach(([key, transMap]) => {
+  Object.entries(transMap).forEach(([lang, content]) => {
+    if (!translationMap[lang]) {
+      translationMap[lang] = {};
+    }
+    translationMap[lang][key] = content;
+  })
+});
+
+// remove old locales directory
+const localesPath = path.join(__dirname, "../public/locales");
+if (fs.existsSync(localesPath)) {
+  fs.rmSync(localesPath, { recursive: true });
+} 
+
+// write translation files
+Object.entries(translationMap).forEach(([lang, transMap]) => {
+  const filePath = path.join(__dirname, `../public/locales/${lang}/translation.json`);
+  if (!fs.existsSync(filePath)) {
+    fs.mkdirSync(path.dirname(filePath), { recursive: true });
+  }
+  fs.writeFileSync(filePath, JSON.stringify(transMap, null, 2));
+});
+
+// write translation key enum
+const transKeys = Object.keys(translationMap.en);
+const transKeyDeclareFilePath = path.join(__dirname, "../src/i18n/declaration.ts");
+if (!fs.existsSync(transKeyDeclareFilePath)) {
+  fs.mkdirSync(path.dirname(transKeyDeclareFilePath), { recursive: true });
+}
+fs.writeFileSync(transKeyDeclareFilePath, `
+// this file generate by script, don't modify it manually!!!
+export enum I18nKey {
+${transKeys.map(key => `  ${key} = "${key}",`).join('\n')}
+}`.trim() + '\n');

frontend/src/components/ChatInterface.tsx

@@ -1,6 +1,7 @@
 import { Card, CardBody } from "@nextui-org/react";
 import React, { useEffect, useRef } from "react";
 import { useSelector } from "react-redux";
+import { useTranslation } from "react-i18next";
 import assistantAvatar from "../assets/assistant-avatar.png";
 import CogTooth from "../assets/cog-tooth";
 import userAvatar from "../assets/user-avatar.png";
@@ -14,6 +15,7 @@ import {
 import { RootState } from "../store";
 import { Message } from "../state/chatSlice";
 import Input from "./Input";
+import { I18nKey } from "../i18n/declaration";
 
 interface IChatBubbleProps {
   msg: Message;
@@ -169,14 +171,16 @@ function MessageList(): JSX.Element {
 }
 
 function InitializingStatus(): JSX.Element {
+  const { t } = useTranslation();
+
   return (
     <div className="flex items-center m-auto h-full">
       <img
         src={assistantAvatar}
         alt="assistant avatar"
         className="w-[40px] h-[40px] mx-2.5"
       />
-      <div>Initializing agent (may take up to 10 seconds)...</div>
+      <div>{t(I18nKey.CHAT_INTERFACE$INITIALZING_AGENT_LOADING_MESSAGE)}</div>
     </div>
   );
 }

frontend/src/components/Input.tsx

@@ -2,11 +2,14 @@ import React, { ChangeEvent, useState, KeyboardEvent } from "react";
 import { useSelector } from "react-redux";
 import { Textarea } from "@nextui-org/react";
 import { twMerge } from "tailwind-merge";
+import { useTranslation } from "react-i18next";
 import { RootState } from "../store";
 import useInputComposition from "../hooks/useInputComposition";
 import { sendChatMessage } from "../services/chatService";
+import { I18nKey } from "../i18n/declaration";
 
 function Input() {
+  const { t } = useTranslation();
   const { initialized } = useSelector((state: RootState) => state.task);
   const [inputMessage, setInputMessage] = useState("");
 
@@ -54,7 +57,7 @@ function Input() {
         onKeyDown={handleSendMessageOnEnter}
         onCompositionStart={onCompositionStart}
         onCompositionEnd={onCompositionEnd}
-        placeholder="Send a message (won't interrupt the Assistant)"
+        placeholder={t(I18nKey.CHAT_INTERFACE$INPUT_PLACEHOLDER)}
       />
       <button
         type="button"
@@ -65,7 +68,7 @@ function Input() {
         onClick={handleSendMessage}
         disabled={!initialized}
       >
-        Send
+        {t(I18nKey.CHAT_INTERFACE$INPUT_SEND_MESSAGE_BUTTON_CONTENT)}
       </button>
     </div>
   );