[feat] [frontend] add i18n support

README.cn.md

@@ -47,7 +47,7 @@ Coze Loop 通过提供全生命周期的管理能力，帮助开发者更高效
 * [Prompt 开发与调试](https://loop.coze.cn/open/docs/cozeloop/create-prompt)：Coze Loop 提供了完整的提示词开发流程。
 * [评测](https://loop.coze.cn/open/docs/cozeloop/evaluation-quick-start)：Coze Loop 的评测功能提供标准评测数据管理、自动化评估引擎和综合的实验结果统计。
 * [Trace 上报与查询](https://loop.coze.cn/open/docs/cozeloop/trace_integrate)：Coze Loop 支持对平台上创建的 Prompt 调试的 Trace 自动上报，实时追踪每一条 Trace 数据。
-* [开源版使用Coze Loop  SDK](https://github.com/coze-dev/cozeloop/wiki/8.-%E5%BC%80%E6%BA%90%E7%89%88%E4%BD%BF%E7%94%A8-CozeLoop-SDK)：Coze Loop 三个语言的 [SDK](https://loop.coze.cn/open/docs/CozeLoop/sdk) 均适用于商业版和开源版。对于开源版，开发者只需要初始化时修改部分参数配置。
+* [开源版使用Coze Loop SDK](https://github.com/coze-dev/cozeloop/wiki/8.-%E5%BC%80%E6%BA%90%E7%89%88%E4%BD%BF%E7%94%A8-CozeLoop-SDK)：Coze Loop 三个语言的 [SDK](https://loop.coze.cn/open/docs/cozeloop/sdk) 均适用于商业版和开源版。对于开源版，开发者只需要初始化时修改部分参数配置。
 
 ## 开发指南
 

README.md

@@ -20,7 +20,7 @@ English | [中文](README.cn.md)
 
 [Coze Loop](https://www.coze.cn/loop) is a developer-oriented, platform-level solution focused on the development and operation of AI agents. It addresses various challenges faced during the AI agent development process, providing full lifecycle management capabilities from development, debugging, evaluation, to monitoring.
 
-Based on the commercial version, Coze Loop introduces a community edition that offers developers free access to core foundational feature modules. By sharing its core technology framework in an open-source model, developers can customize and extend according to business needs, facilitating community co-construction, sharing, and exchange, helping developers participate in AI agent exploration and practice with zero barriers.
+Based on the commercial version, Coze Loop introduces an open-source edition that offers developers free access to core foundational feature modules. By sharing its core technology framework in an open-source model, developers can customize and extend according to business needs, facilitating community co-construction, sharing, and exchange, helping developers participate in AI agent exploration and practice with zero barriers.
 
 ## What can Coze Loop do?
 Coze Loop helps developers efficiently develop and operate AI agents by providing full-lifecycle management capabilities. Whether it's prompt engineering, AI agent evaluation, or monitoring and optimization after deployment, Coze Loop offers powerful tools and intelligent support, significantly simplifying the AI agent development process and improving the performance and stability of AI agents.
@@ -42,19 +42,19 @@ Coze Loop helps developers efficiently develop and operate AI agents by providin
 ## Quickstart
 Refer to the [Quickstart](https://github.com/coze-dev/CozeLoop/wiki/2.-Quickstart) to learn how to install and deploy the latest version of Coze Loop.
 
-## Using CozeLoop Community Edition
+## Using Coze Loop Open-source Edition
 
 * [Prompt development and debugging](https://loop.coze.cn/open/docs/cozeloop/create-prompt): Coze Loop provides a complete prompt development workflow.
 * [Evaluation](https://loop.coze.cn/open/docs/cozeloop/evaluation-quick-start): Coze Loop's evaluation functionality offers standardized evaluation data management, automated assessment engines, and comprehensive experimental result statistics.
 * [Trace reporting and querying](https://loop.coze.cn/open/docs/cozeloop/trace_integrate): Coze Loop supports automatic Trace reporting for prompt debugging conducted on the platform, enabling real-time tracking of each Trace data.
-* [Community Edition usage of the Coze Loop SDK](https://github.com/coze-dev/cozeLoop/wiki/8.-Open-source-edition-uses-CozeLoop-SDK): The Coze Loop SDK in three languages is suitable for both commercial and community editions. For the Community Edition, developers only need to modify some parameter configurations during initialization.
+* [Open-source Edition usage of the Coze Loop SDK](https://github.com/coze-dev/cozeLoop/wiki/8.-Open-source-edition-uses-CozeLoop-SDK): The Coze Loop SDK in three languages is suitable for both commercial and open-source editions. For the Open-source Edition, developers only need to modify some parameter configurations during initialization.
 
 ## Developer guide
 
-* [System architecture](https://github.com/coze-dev/CozeLoop/wiki/3.-Architecture): Learn about the technical architecture and core components of Coze Loop Community Edition.
-* [Startup mode](https://github.com/coze-dev/CozeLoop/wiki/4.-Service-startup-modes): When installing and deploying Coze Loop Community Edition, the default development mode allows backend file modifications without requiring service redeployment.
-* [Model configuration](https://github.com/coze-dev/CozeLoop/wiki/5.-Model-configuration): Coze Loop Community Edition supports various LLM models through the Eino framework. Refer to this document to view the supported model list and learn how to configure models.
-* [Code development and testing](https://github.com/coze-dev/CozeLoop/wiki/6.-Code-development-and-testing): Learn how to perform secondary development and testing based on Coze Loop Community Edition.
+* [System architecture](https://github.com/coze-dev/CozeLoop/wiki/3.-Architecture): Learn about the technical architecture and core components of Coze Loop Open-source Edition.
+* [Startup mode](https://github.com/coze-dev/CozeLoop/wiki/4.-Service-startup-modes): When installing and deploying Coze Loop Open-source Edition, the default development mode allows backend file modifications without requiring service redeployment.
+* [Model configuration](https://github.com/coze-dev/CozeLoop/wiki/5.-Model-configuration): Coze Loop Open-source Edition supports various LLM models through the Eino framework. Refer to this document to view the supported model list and learn how to configure models.
+* [Code development and testing](https://github.com/coze-dev/CozeLoop/wiki/6.-Code-development-and-testing): Learn how to perform secondary development and testing based on Coze Loop Open-source Edition.
 * [Fault troubleshooting](https://github.com/coze-dev/CozeLoop/wiki/7.-Troubleshooting): Learn how to check container status and system logs.
 
 ## License

conf/default/app/runtime/model_config.yaml

@@ -9,53 +9,23 @@ models:
     param_config:
       param_schemas:
         - name: "temperature"
-          label: "Generation Randomness"
+          label: "temperature"
           desc: "Increasing temperature makes model output more diverse and creative, while decreasing it makes output more focused on instructions but less diverse. It's recommended not to adjust this simultaneously with 'Top p'."
           type: "float"
           min: "0"
           max: "1.0"
           default_val: "0.7"
         - name: "max_tokens"
-          label: "Maximum Response Length"
+          label: "max_tokens"
           desc: "Controls the maximum number of tokens in model output. Typically, 100 tokens equals about 150 Chinese characters."
           type: "int"
           min: "1"
           max: "4096"
           default_val: "2048"
         - name: "top_p"
-          label: "Nucleus Sampling Probability"
+          label: "top_p"
           desc: "Selects the minimum token set with cumulative probability reaching top_p during generation, excluding tokens outside the set, balancing diversity and reasonableness."
           type: "float"
           min: "0.001"
           max: "1.0"
           default_val: "0.7"
-  - id: 2
-    name: "openapi"
-    frame: "eino"
-    protocol: "openai"
-    protocol_config:
-      api_key: "***"
-      model: "***"
-    param_config:
-      param_schemas:
-        - name: "temperature"
-          label: "Generation Randomness"
-          desc: "Increasing temperature makes model output more diverse and creative, while decreasing it makes output more focused on instructions but less diverse. It's recommended not to adjust this simultaneously with 'Top p'."
-          type: "float"
-          min: "0"
-          max: "1.0"
-          default_val: "0.7"
-        - name: "max_tokens"
-          label: "Maximum Response Length"
-          desc: "Controls the maximum number of tokens in model output. Typically, 100 tokens equals about 150 Chinese characters."
-          type: "int"
-          min: "1"
-          max: "4096"
-          default_val: "2048"
-        - name: "top_p"
-          label: "Nucleus Sampling Probability"
-          desc: "Selects the minimum token set with cumulative probability reaching top_p during generation, excluding tokens outside the set, balancing diversity and reasonableness."
-          type: "float"
-          min: "0.001"
-          max: "1.0"
-          default_val: "0.7"

frontend/apps/cozeloop/rsbuild.config.ts

@@ -17,7 +17,7 @@ export default createRsbuildConfig({
     },
   },
   html: {
-    title: '扣子罗盘',
+    title: 'Coze Loop',
     template: './src/assets/template.html',
     favicon: './src/assets/images/coze.svg',
     crossorigin: 'anonymous',

frontend/apps/cozeloop/src/app.tsx

@@ -3,23 +3,24 @@
 import { RouterProvider, createBrowserRouter } from 'react-router-dom';
 import { Suspense } from 'react';
 
-import { I18n } from '@cozeloop/i18n-adapter';
 import { PageLoading } from '@cozeloop/components';
-import { zh_CN } from '@coze-arch/coze-design/locales';
-import { CDLocaleProvider } from '@coze-arch/coze-design';
 
 import { routeConfig } from './routes';
+import { useSetupI18n } from './hooks';
+import { LocaleProvider } from './components';
 
 import './index.css';
 
 const router = createBrowserRouter(routeConfig);
 
 export function App() {
+  useSetupI18n();
+
   return (
     <Suspense fallback={<PageLoading />}>
-      <CDLocaleProvider locale={zh_CN} i18n={I18n}>
+      <LocaleProvider>
         <RouterProvider router={router} />
-      </CDLocaleProvider>
+      </LocaleProvider>
     </Suspense>
   );
 }

frontend/apps/cozeloop/src/components/basic-layout/index.tsx

@@ -4,6 +4,7 @@ import { Outlet, useLocation, useNavigate } from 'react-router-dom';
 import { ErrorBoundary } from 'react-error-boundary';
 import { Suspense } from 'react';
 
+import { I18n } from '@cozeloop/i18n-adapter';
 import { PageError, PageLoading, PageNotFound } from '@cozeloop/components';
 import { useSpaceStore } from '@cozeloop/account';
 import { Button } from '@coze-arch/coze-design';
@@ -22,7 +23,7 @@ export function BasicLayout() {
   switch (status) {
     case SetupSpaceStatus.NOT_FOUND:
       return (
-        <PageNotFound description="空间不存在">
+        <PageNotFound description={I18n.t('space_not_exists')}>
           <Button
             type="primary"
             block={true}
@@ -31,21 +32,21 @@ export function BasicLayout() {
               navigate(CONSOLE_PATH);
             }}
           >
-            {'返回'}
+            {I18n.t('back')}
           </Button>
         </PageNotFound>
       );
     case SetupSpaceStatus.FETCH_ERROR:
       return (
-        <PageError description="网络错误">
+        <PageError description={I18n.t('network_error')}>
           <Button
             type="primary"
             block={true}
             onClick={() => {
               window.location.reload();
             }}
           >
-            {'点击重试'}
+            {I18n.t('click_retry')}
           </Button>
         </PageError>
       );

frontend/apps/cozeloop/src/components/breadcrumb/index.tsx

@@ -5,6 +5,7 @@ import { useEffect, useState } from 'react';
 import { useShallow } from 'zustand/react/shallow';
 import { useUIStore, type BreadcrumbItemConfig } from '@cozeloop/stores';
 import { useApp, useNavigateModule } from '@cozeloop/biz-hooks-adapter';
+import { SwitchLang } from '@cozeloop/auth-pages';
 import { Breadcrumb } from '@coze-arch/coze-design';
 
 import { useMenuConfig } from '../navbar/menu-config';
@@ -51,7 +52,7 @@ export function MainBreadcrumb() {
   }, [breadcrumbConfig]);
 
   return (
-    <div className="h-[56px] flex items-center px-6 border-0 border-b border-solid coz-stroke-primary">
+    <div className="h-[56px] flex items-center justify-between px-6 border-0 border-b border-solid coz-stroke-primary">
       <Breadcrumb
         separator={<div className="rotate-[22deg] coz-fg-dim">/</div>}
       >
@@ -72,6 +73,7 @@ export function MainBreadcrumb() {
           </Breadcrumb.Item>
         ))}
       </Breadcrumb>
+      <SwitchLang />
     </div>
   );
 }

frontend/apps/cozeloop/src/components/index.ts

@@ -1,3 +1,4 @@
 // Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
 // SPDX-License-Identifier: Apache-2.0
 export { BasicLayout } from './basic-layout';
+export { LocaleProvider } from './locale-provider';

frontend/apps/cozeloop/src/components/locale-provider.tsx

@@ -0,0 +1,42 @@
+// Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+// SPDX-License-Identifier: Apache-2.0
+import { type PropsWithChildren } from 'react';
+
+import { useI18nStore } from '@cozeloop/stores';
+import { I18n } from '@cozeloop/i18n-adapter';
+import { en_US, zh_CN } from '@coze-arch/coze-design/locales';
+import {
+  CDLocaleProvider,
+  ConfigProvider,
+  enUS,
+  zhCN,
+} from '@coze-arch/coze-design';
+
+function langToLocale(lang: string) {
+  if (!lang) {
+    return { locale: zhCN, cdLocale: zh_CN };
+  }
+  switch (lang) {
+    case 'zh':
+    case 'zh-CN':
+      return { locale: zhCN, cdLocale: zh_CN };
+    default:
+      return { locale: enUS, cdLocale: en_US };
+  }
+}
+
+export function LocaleProvider({ children }: PropsWithChildren) {
+  const lang = useI18nStore(s => s.lng);
+  const { locale, cdLocale } = langToLocale(lang);
+
+  return (
+    <ConfigProvider locale={locale}>
+      <CDLocaleProvider
+        locale={cdLocale}
+        i18n={{ t: (key: string) => I18n.unsafeT(key) }}
+      >
+        {children}
+      </CDLocaleProvider>
+    </ConfigProvider>
+  );
+}