feat(studio): add i18n infrastructure with zh-CN language pack

python/packages/autogen-studio/frontend/gatsby-browser.js

@@ -1,5 +1,6 @@
 import "antd/dist/reset.css";
 import "./src/styles/global.css";
+import "./src/i18n";
 
 import AuthProvider from "./src/hooks/provider";
 

python/packages/autogen-studio/frontend/package.json

@@ -44,6 +44,8 @@
     "postcss": "^8.4.49",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-i18next": "^14.1.0",
+    "i18next": "^23.11.0",
     "react-markdown": "^9.0.1",
     "remark-gfm": "^4.0.1",
     "tailwindcss": "^3.4.14",

python/packages/autogen-studio/frontend/src/components/LanguageSwitcher.tsx

@@ -0,0 +1,24 @@
+import { useTranslation } from "react-i18next";
+import { Select } from "antd";
+
+const languages = [
+  { value: "en-US", label: "English" },
+  { value: "zh-CN", label: "简体中文" },
+];
+
+export const LanguageSwitcher = () => {
+  const { i18n } = useTranslation();
+  return (
+    <Select
+      value={i18n.language}
+      options={languages}
+      onChange={(lang: string) => {
+        i18n.changeLanguage(lang);
+        localStorage.setItem("autogen-lang", lang);
+      }}
+      size="small"
+      bordered={false}
+      style={{ width: 110 }}
+    />
+  );
+};

python/packages/autogen-studio/frontend/src/components/contentheader.tsx

@@ -11,6 +11,8 @@ import { appContext } from "../hooks/provider";
 import { useConfigStore } from "../hooks/store";
 import { Link } from "gatsby";
 import { sanitizeUrl } from "./utils/security-utils";
+import { useTranslation } from "react-i18next";
+import { LanguageSwitcher } from "./LanguageSwitcher";
 
 type ContentHeaderProps = {
   onMobileMenuToggle: () => void;
@@ -29,6 +31,7 @@ const ContentHeader = ({
   const { sidebar, setSidebarState, header } = useConfigStore();
   const { isExpanded } = sidebar;
   const { title, breadcrumbs } = header;
+  const { t } = useTranslation();
 
   return (
     <div className="sticky top-0 z-40 bg-primary border-b border-secondary">
@@ -134,6 +137,9 @@ const ContentHeader = ({
               )}
             </button>
 
+            {/* Language Switcher */}
+            <LanguageSwitcher />
+
             {/* Notifications */}
             <button className="text-secondary hidden hover:text-primary">
               <BellIcon className="h-6 w-6" />
@@ -174,7 +180,7 @@ const ContentHeader = ({
                           active ? "bg-secondary" : ""
                         } block px-4 py-2 text-sm text-primary`}
                       >
-                        Sign out
+                        {t("nav.signOut")}
                       </a>
                     )}
                   </MenuItem>

python/packages/autogen-studio/frontend/src/components/layout.tsx

@@ -10,6 +10,9 @@ import ContentHeader from "./contentheader";
 import { ConfigProvider, theme } from "antd";
 import { useAuth } from "../auth/context";
 import ProtectedRoute from "../auth/protected";
+import { useTranslation } from "react-i18next";
+import antdEnUS from "antd/locale/en_US";
+import antdZhCN from "antd/locale/zh_CN";
 
 const classNames = (...classes: (string | undefined | boolean)[]) => {
   return classes.filter(Boolean).join(" ");
@@ -37,6 +40,8 @@ const Layout = ({
   const { isExpanded } = sidebar;
   const [isMobileMenuOpen, setIsMobileMenuOpen] = React.useState(false);
   const { authType } = useAuth();
+  const { i18n } = useTranslation();
+  const antdLocale = i18n.language === "zh-CN" ? antdZhCN : antdEnUS;
 
   // Close mobile menu on route change
   React.useEffect(() => {
@@ -101,6 +106,7 @@ const Layout = ({
         )}
 
         <ConfigProvider
+          locale={antdLocale}
           theme={{
             token: {
               borderRadius: 4,
@@ -148,6 +154,8 @@ export const LiteLayout = ({
   const { darkMode } = React.useContext(appContext);
   const { authType } = useAuth();
   const { setHeader } = useConfigStore();
+  const { i18n } = useTranslation();
+  const antdLocale = i18n.language === "zh-CN" ? antdZhCN : antdEnUS;
 
   React.useEffect(() => {
     document.getElementsByTagName("html")[0].className = `${
@@ -184,6 +192,7 @@ export const LiteLayout = ({
       )}
 
       <ConfigProvider
+        locale={antdLocale}
         theme={{
           token: {
             borderRadius: 4,

python/packages/autogen-studio/frontend/src/components/sidebar.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { Link } from "gatsby";
 import { useConfigStore } from "../hooks/store";
 import { Tooltip } from "antd";
+import { useTranslation } from "react-i18next";
 import {
   Settings,
   MessagesSquare,
@@ -29,46 +30,44 @@ interface INavItem {
   }>;
 }
 
-const navigation: INavItem[] = [
-  {
-    name: "Team Builder",
-    href: "/build",
-    icon: Bot,
-    breadcrumbs: [{ name: "Team Builder", href: "/build", current: true }],
-  },
-  {
-    name: "Playground",
-    href: "/",
-    icon: MessagesSquare,
-    breadcrumbs: [{ name: "Playground", href: "/", current: true }],
-  },
-  {
-    name: "MCP (Experimental)",
-    href: "/mcp",
-    icon: ({ className }: { className?: string }) => (
-      <Icon size={6} icon="mcp" className={className} />
-    ),
-    breadcrumbs: [{ name: "MCP (Experimental)", href: "/mcp", current: true }],
-  },
-  {
-    name: "Gallery",
-    href: "/gallery",
-    icon: GalleryHorizontalEnd,
-    breadcrumbs: [{ name: "Gallery", href: "/gallery", current: true }],
-  },
-  // {
-  //   name: "Labs",
-  //   href: "/labs",
-  //   icon: FlaskConical,
-  //   breadcrumbs: [{ name: "Labs", href: "/labs", current: true }],
-  // },
-  {
-    name: "Deploy",
-    href: "/deploy",
-    icon: Rocket,
-    breadcrumbs: [{ name: "Deploy", href: "/deploy", current: true }],
-  },
-];
+const useNavigation = () => {
+  const { t } = useTranslation();
+  const navigation: INavItem[] = [
+    {
+      name: t("nav.teamBuilder"),
+      href: "/build",
+      icon: Bot,
+      breadcrumbs: [{ name: t("nav.teamBuilder"), href: "/build", current: true }],
+    },
+    {
+      name: t("nav.playground"),
+      href: "/",
+      icon: MessagesSquare,
+      breadcrumbs: [{ name: t("nav.playground"), href: "/", current: true }],
+    },
+    {
+      name: t("nav.mcp"),
+      href: "/mcp",
+      icon: ({ className }: { className?: string }) => (
+        <Icon size={6} icon="mcp" className={className} />
+      ),
+      breadcrumbs: [{ name: t("nav.mcp"), href: "/mcp", current: true }],
+    },
+    {
+      name: t("nav.gallery"),
+      href: "/gallery",
+      icon: GalleryHorizontalEnd,
+      breadcrumbs: [{ name: t("nav.gallery"), href: "/gallery", current: true }],
+    },
+    {
+      name: t("nav.deploy"),
+      href: "/deploy",
+      icon: Rocket,
+      breadcrumbs: [{ name: t("nav.deploy"), href: "/deploy", current: true }],
+    },
+  ];
+  return navigation;
+};
 
 const classNames = (...classes: (string | undefined | boolean)[]) => {
   return classes.filter(Boolean).join(" ");
@@ -86,6 +85,8 @@ type SidebarProps = {
 const Sidebar = ({ link, meta, isMobile }: SidebarProps) => {
   const { sidebar, setHeader, setSidebarState } = useConfigStore();
   const { isExpanded } = sidebar;
+  const { t } = useTranslation();
+  const navigation = useNavigation();
 
   // Set initial header state based on current route
   React.useEffect(() => {
@@ -114,8 +115,8 @@ const Sidebar = ({ link, meta, isMobile }: SidebarProps) => {
       });
     } else if (path === "/settings") {
       setHeader({
-        title: "Settings",
-        breadcrumbs: [{ name: "Settings", href: "/settings", current: true }],
+        title: t("nav.settings"),
+        breadcrumbs: [{ name: t("nav.settings"), href: "/settings", current: true }],
       });
     }
   };
@@ -223,15 +224,15 @@ const Sidebar = ({ link, meta, isMobile }: SidebarProps) => {
           >
             {!showFull && !isMobile ? (
               <>
-                <Tooltip title="Settings" placement="right">
+                <Tooltip title={t("nav.settings")} placement="right">
                   <Link
                     to="/settings"
                     onClick={() =>
                       setHeader({
-                        title: "Settings",
+                        title: t("nav.settings"),
                         breadcrumbs: [
                           {
-                            name: "Settings",
+                            name: t("nav.settings"),
                             href: "/settings",
                             current: true,
                           },
@@ -245,7 +246,7 @@ const Sidebar = ({ link, meta, isMobile }: SidebarProps) => {
                 </Tooltip>
                 <div className="hidden md:block">
                   <Tooltip
-                    title={isExpanded ? "Close Sidebar" : "Open Sidebar"}
+                    title={isExpanded ? t("nav.closeSidebar") : t("nav.openSidebar")}
                     placement="right"
                   >
                     <button
@@ -272,10 +273,10 @@ const Sidebar = ({ link, meta, isMobile }: SidebarProps) => {
                       to="/settings"
                       onClick={() =>
                         setHeader({
-                          title: "Settings",
+                          title: t("nav.settings"),
                           breadcrumbs: [
                             {
-                              name: "Settings",
+                              name: t("nav.settings"),
                               href: "/settings",
                               current: true,
                             },
@@ -285,13 +286,13 @@ const Sidebar = ({ link, meta, isMobile }: SidebarProps) => {
                       className="group flex flex-1 gap-x-3 rounded-md p-2 text-sm font-medium text-primary hover:text-accent hover:bg-secondary"
                     >
                       <Settings className="h-6 w-6 shrink-0 text-secondary group-hover:text-accent" />
-                      {showFull && "Settings"}
+                      {showFull && t("nav.settings")}
                     </Link>
                   </div>
                 </div>
                 <div className="hidden md:block">
                   <Tooltip
-                    title={`${isExpanded ? "Close Sidebar" : "Open Sidebar"}`}
+                    title={`${isExpanded ? t("nav.closeSidebar") : t("nav.openSidebar")}`}
                     placement="right"
                   >
                     <button

python/packages/autogen-studio/frontend/src/i18n/index.ts

@@ -0,0 +1,23 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+import enUS from "./locales/en-US/translation.json";
+import zhCN from "./locales/zh-CN/translation.json";
+
+const savedLang =
+  typeof window !== "undefined"
+    ? localStorage.getItem("autogen-lang") || "en-US"
+    : "en-US";
+
+i18n.use(initReactI18next).init({
+  resources: {
+    "en-US": { translation: enUS },
+    "zh-CN": { translation: zhCN },
+  },
+  lng: savedLang,
+  fallbackLng: "en-US",
+  interpolation: {
+    escapeValue: false,
+  },
+});
+
+export default i18n;