跳至主要内容

內建 UI 多語系

SDK 自帶的介面文字——延伸思考區塊、工具呼叫分組、Task Check List、子代理面板、API Key 畫面、 File Explorer 等——透過單一個 locale prop 切換。

內建 UI 多語系

SDK 自帶的介面文字——思考區塊、工具呼叫分組、Task Check List、子代理面板、API Key 畫面等——透過單一個 locale prop 切換。目前內建 zh-TW、en-US、ja-JP 三種；找不到的 key 會退回 en-US，再退回 key 本身。

切換語系
import type { Locale } from '@asgard-js/react';

// 'zh-TW' | 'en-US' | 'ja-JP'
<Chatbot
  locale="ja-JP"
  config={{ botProviderEndpoint: '...' }}
  customChannelId="my-channel"
/>

// 獨立擺放的面板也吃同一組目錄
<TaskList tasks={tasks} locale="ja-JP" />
<SubagentList subagents={subagents} locale="ja-JP" />

locale 只管 SDK 自己的介面文字，不會翻譯 bot 回覆的內容——那是 bot provider 的責任。切換語系會重新掛載 Chatbot。

聊天機器人載入中…

支援的語系​

type Locale = "en-US" | "ja-JP" | "zh-TW";
<Chatbot
  locale="ja-JP"
  config={{ botProviderEndpoint: "..." }}
  customChannelId="my-channel"
/>

找不到的 key 會先退回 en-US，再退回 key 本身——所以就算某個字串還沒翻譯，畫面也不會壞掉 或出現空白。

locale 管的是什麼、不管什麼​

管不管
SDK 自己畫的介面文字（按鈕、狀態、標籤、空狀態）bot 回覆的內容
工具呼叫、任務、子代理面板的可讀標籤你自己傳進 initMessages 的文字
API Key 登入畫面你用 renderFooter / renderHeader 自己畫的東西

翻譯 bot 回覆是 bot provider 的責任，不是 SDK 的。

獨立擺放的面板​

自行停靠的面板吃的是同一組目錄，各自收 locale：

<TaskList tasks={tasks} locale="ja-JP" />
<SubagentList subagents={subagents} locale="ja-JP" />

直接取用目錄​

需要在自己的 UI 裡沿用同一批字串時：

import { t } from "@asgard-js/react";

t("ja-JP", "task.completed");
t("zh-TW", "tool.read", { file: "src/index.ts" }); // 支援 {var} 插值

搭配站台語系​

Docusaurus、Next.js 之類的站台通常已經有自己的 locale，對應過去即可：

const sdkLocale = siteLocale === "en" ? "en-US" : "zh-TW";

<Chatbot locale={sdkLocale} {...rest} />

也看看​