feat: add i18n support and add Chinese (#372)

* feat: add i18n support and add Chinese

* fix: resolve conflicts

* Update en.json with cancle settings

* Update zh.json with settngs cancle

---------

Co-authored-by: johnny0120 <15564476+johnny0120@users.noreply.github.com>
Co-authored-by: Willem Jiang <willem.jiang@gmail.com>
Co-authored-by: Willem Jiang <143703838+willem-bd@users.noreply.github.com>

web/src/app/chat/components/research-activities-block.tsx

@@ -5,6 +5,7 @@ import { PythonOutlined } from "@ant-design/icons";
 import { motion } from "framer-motion";
 import { LRUCache } from "lru-cache";
 import { BookOpenText, FileText, PencilRuler, Search } from "lucide-react";
+import { useTranslations } from "next-intl";
 import { useTheme } from "next-themes";
 import { useMemo } from "react";
 import SyntaxHighlighter from "react-syntax-highlighter";
@@ -122,6 +123,7 @@ type SearchResult =
     };
 
 function WebSearchToolCall({ toolCall }: { toolCall: ToolCallRuntime }) {
+  const t = useTranslations("chat.research");
   const searching = useMemo(() => {
     return toolCall.result === undefined;
   }, [toolCall.result]);
@@ -159,7 +161,7 @@ function WebSearchToolCall({ toolCall }: { toolCall: ToolCallRuntime }) {
           animated={searchResults === undefined}
         >
           <Search size={16} className={"mr-2"} />
-          <span>Searching for&nbsp;</span>
+          <span>{t("searchingFor")}&nbsp;</span>
           <span className="max-w-[500px] overflow-hidden text-ellipsis whitespace-nowrap">
             {(toolCall.args as { query: string }).query}
           </span>
@@ -238,6 +240,7 @@ function WebSearchToolCall({ toolCall }: { toolCall: ToolCallRuntime }) {
 }
 
 function CrawlToolCall({ toolCall }: { toolCall: ToolCallRuntime }) {
+  const t = useTranslations("chat.research");
   const url = useMemo(
     () => (toolCall.args as { url: string }).url,
     [toolCall.args],
@@ -251,7 +254,7 @@ function CrawlToolCall({ toolCall }: { toolCall: ToolCallRuntime }) {
           animated={toolCall.result === undefined}
         >
           <BookOpenText size={16} className={"mr-2"} />
-          <span>Reading</span>
+          <span>{t("reading")}</span>
         </RainbowText>
       </div>
       <ul className="mt-2 flex flex-wrap gap-4">
@@ -279,6 +282,7 @@ function CrawlToolCall({ toolCall }: { toolCall: ToolCallRuntime }) {
 }
 
 function RetrieverToolCall({ toolCall }: { toolCall: ToolCallRuntime }) {
+  const t = useTranslations("chat.research");
   const searching = useMemo(() => {
     return toolCall.result === undefined;
   }, [toolCall.result]);
@@ -292,7 +296,7 @@ function RetrieverToolCall({ toolCall }: { toolCall: ToolCallRuntime }) {
       <div className="font-medium italic">
         <RainbowText className="flex items-center" animated={searching}>
           <Search size={16} className={"mr-2"} />
-          <span>Retrieving documents from RAG&nbsp;</span>
+          <span>{t("retrievingDocuments")}&nbsp;</span>
           <span className="max-w-[500px] overflow-hidden text-ellipsis whitespace-nowrap">
             {(toolCall.args as { keywords: string }).keywords}
           </span>
@@ -337,6 +341,7 @@ function RetrieverToolCall({ toolCall }: { toolCall: ToolCallRuntime }) {
 }
 
 function PythonToolCall({ toolCall }: { toolCall: ToolCallRuntime }) {
+  const t = useTranslations("chat.research");
   const code = useMemo<string | undefined>(() => {
     return (toolCall.args as { code?: string }).code;
   }, [toolCall.args]);
@@ -349,7 +354,7 @@ function PythonToolCall({ toolCall }: { toolCall: ToolCallRuntime }) {
           className="text-base font-medium italic"
           animated={toolCall.result === undefined}
         >
-          Running Python code
+          {t("runningPythonCode")}
         </RainbowText>
       </div>
       <div>
@@ -373,6 +378,7 @@ function PythonToolCall({ toolCall }: { toolCall: ToolCallRuntime }) {
 }
 
 function PythonToolCallResult({ result }: { result: string }) {
+  const t = useTranslations("chat.research");
   const { resolvedTheme } = useTheme();
   const hasError = useMemo(
     () => result.includes("Error executing code:\n"),
@@ -399,7 +405,7 @@ function PythonToolCallResult({ result }: { result: string }) {
   return (
     <>
       <div className="mt-4 font-medium italic">
-        {hasError ? "Error when executing the above code" : "Execution output"}
+        {hasError ? t("errorExecutingCode") : t("executionOutput")}
       </div>
       <div className="bg-accent mt-2 max-h-[400px] max-w-[calc(100%-120px)] overflow-y-auto rounded-md p-2 text-sm">
         <SyntaxHighlighter