i18n
コンポーネントが自前で描画する文言（閉じるボタンのラベル、必須バッジ、読み込み中の読み上げなど）は文言辞書から引かれます。辞書を差し替えれば、アプリのコードを変えずに言語や語彙を切り替えられます。
既定は日本語
設定は不要です。UIProviderを置くだけで日本語の辞書が使われ、Providerを置いていない場合も同じ日本語にフォールバックします。
英語に切り替える
@k8ordo/ui/i18nからenを読み込み、messagesに渡します。jaも同じ場所から読み込めます。
一部だけ差し替える
messagesはPartial<Messages> です。渡したキーだけが上書きされ、残りは日本語の既定辞書で埋まります。英語をベースに一部だけ変えたいときはenを展開してから重ねます。
優先順位
同じ文言を決める経路は3つあり、prop > 辞書 > 既定 の順に強くなります。個別のprops（Spinnerのlabelなど）は常に辞書より優先されるので、1箇所だけ違う文言にしたいときはそちらを使ってください。
独自の辞書を作る
Messages型を注釈すれば、キーの過不足はコンパイル時に検出されます。ライブラリにキーが増えたときも型エラーで気付けます。
キー一覧
Messagesが持つキーの全てです。値はライブラリの辞書そのものを読み込んで表示しています。
close- 使うコンポーネント: Alert / Dialog / Drawer
- ja（既定）: 閉じる
- en: Close
required- 使うコンポーネント: FormControl
- ja（既定）: 必須
- en: Required
loading- 使うコンポーネント: Spinner
- ja（既定）: 読み込み中
- en: Loading
avatar使うコンポーネント: Avatarja（既定）: アバターen: Avatarcolor使うコンポーネント: Codeja（既定）: 色en: ColoralertSuccess使うコンポーネント: Alertja（既定）: 成功en: SuccessalertInfo使うコンポーネント: Alertja（既定）: 情報en: InformationalertWarning使うコンポーネント: Alertja（既定）: 警告en: WarningalertError使うコンポーネント: Alertja（既定）: エラーen: ErrortoastRegion使うコンポーネント: Toastja（既定）: 通知en: NotificationsautocompletePlaceholder使うコンポーネント: Autocompleteja（既定）: 入力して絞り込めますen: Type to filterautocompleteRemoveTag使うコンポーネント: Autocompleteja（既定）: タグを削除en: Remove tagautocompleteClear使うコンポーネント: Autocompleteja（既定）: すべて削除en: Clear allautocompleteEmpty使うコンポーネント: Autocompleteja（既定）: 該当なしen: No resultsfileFieldRemove使うコンポーネント: FileFieldja（既定）: ファイルを削除en: Remove filefileFieldTrigger使うコンポーネント: FileField（生成 UI）ja（既定）: ファイルを選択en: Select filesnumberFieldIncrement使うコンポーネント: NumberFieldja（既定）: 増やすen: IncreasenumberFieldDecrement使うコンポーネント: NumberFieldja（既定）: 減らすen: DecreasepasswordShow使うコンポーネント: PasswordInputja（既定）: パスワードを表示en: Show passwordpasswordHide使うコンポーネント: PasswordInputja（既定）: パスワードを非表示en: Hide passwordlistBoxPlaceholder使うコンポーネント: ListBoxja（既定）: 選択してくださいen: Select an optionbreadcrumb使うコンポーネント: Breadcrumbja（既定）: パンくずリストen: BreadcrumbtabList使うコンポーネント: Tabs（生成 UI）ja（既定）: タブen: TabspaginationLabel使うコンポーネント: Paginationja（既定）: ページネーションen: PaginationpaginationPrevious使うコンポーネント: Paginationja（既定）: 前へen: PreviouspaginationNext使うコンポーネント: Paginationja（既定）: 次へen: Nextchat使うコンポーネント: Conversation.Messagesja（既定）: チャットen: ChatscrollToLatest使うコンポーネント: Conversation.ScrollButtonja（既定）: 最新のメッセージへ移動en: Scroll to latest messagereasoning使うコンポーネント: Reasoningja（既定）: 思考の過程en: ReasoningreasoningStreaming使うコンポーネント: Reasoningja（既定）: 思考中…en: Thinking…suggestions使うコンポーネント: Suggestion.Listja（既定）: 候補en: Suggestionssend使うコンポーネント: PromptInputja（既定）: 送信en: Sendstop使うコンポーネント: PromptInputja（既定）: 停止en: StoptoolInput使うコンポーネント: ToolInvocationja（既定）: 入力en: InputtoolOutput使うコンポーネント: ToolInvocationja（既定）: 出力en: OutputtoolError使うコンポーネント: ToolInvocationja（既定）: ツールの実行でエラーが発生しました。en: The tool failed to run.toolDenied使うコンポーネント: ToolInvocationja（既定）: ツールの実行は許可されませんでした。en: The tool run was not approved.responseCopied使うコンポーネント: Responseja（既定）: コピーしましたen: CopiedresponseCopyCode使うコンポーネント: Responseja（既定）: コードをコピーen: Copy coderesponseCopyLink使うコンポーネント: Responseja（既定）: リンクをコピーen: Copy linkresponseCopyTable使うコンポーネント: Responseja（既定）: 表をコピーen: Copy tableresponseCopyTableAsCsv使うコンポーネント: Responseja（既定）: 表を CSV でコピーen: Copy table as CSVresponseCopyTableAsMarkdown使うコンポーネント: Responseja（既定）: 表を Markdown でコピーen: Copy table as MarkdownresponseCopyTableAsTsv使うコンポーネント: Responseja（既定）: 表を TSV でコピーen: Copy table as TSVresponseDownloadDiagram使うコンポーネント: Responseja（既定）: 図をダウンロードen: Download diagramresponseDownloadDiagramAsMmd使うコンポーネント: Responseja（既定）: 図を MMD でダウンロードen: Download diagram as MMDresponseDownloadDiagramAsPng使うコンポーネント: Responseja（既定）: 図を PNG でダウンロードen: Download diagram as PNGresponseDownloadDiagramAsSvg使うコンポーネント: Responseja（既定）: 図を SVG でダウンロードen: Download diagram as SVGresponseDownloadFile使うコンポーネント: Responseja（既定）: ファイルをダウンロードen: Download fileresponseDownloadImage使うコンポーネント: Responseja（既定）: 画像をダウンロードen: Download imageresponseDownloadTable使うコンポーネント: Responseja（既定）: 表をダウンロードen: Download tableresponseDownloadTableAsCsv使うコンポーネント: Responseja（既定）: 表を CSV でダウンロードen: Download table as CSVresponseDownloadTableAsMarkdown使うコンポーネント: Responseja（既定）: 表を Markdown でダウンロードen: Download table as MarkdownresponseExitFullscreen使うコンポーネント: Responseja（既定）: 全画面表示を終了en: Exit fullscreenresponseViewFullscreen使うコンポーネント: Responseja（既定）: 全画面表示en: View fullscreenresponseImageNotAvailable使うコンポーネント: Responseja（既定）: 画像を表示できませんen: Image not availableresponseOpenExternalLink使うコンポーネント: Responseja（既定）: 外部リンクを開きますか？en: Open external link?responseExternalLinkWarning使うコンポーネント: Responseja（既定）: 外部サイトに移動しようとしています。en: You're about to visit an external website.responseOpenLink使うコンポーネント: Responseja（既定）: リンクを開くen: Open link| キー | 使うコンポーネント | ja（既定） | en |
|---|
close | Alert / Dialog / Drawer | 閉じる | Close |
required | FormControl | 必須 | Required |
loading | Spinner | 読み込み中 | Loading |
avatar | Avatar | アバター | Avatar |
color | Code | 色 | Color |
alertSuccess | Alert | 成功 | Success |
alertInfo | Alert | 情報 | Information |
alertWarning | Alert | 警告 | Warning |
alertError | Alert | エラー | Error |
toastRegion | Toast | 通知 | Notifications |
|
autocompleteRemoveTag | Autocomplete | タグを削除 | Remove tag |
autocompleteClear | Autocomplete | すべて削除 | Clear all |
autocompleteEmpty | Autocomplete | 該当なし | No results |
fileFieldRemove | FileField | ファイルを削除 | Remove file |
fileFieldTrigger | FileField（生成 UI） | ファイルを選択 | Select files |
numberFieldIncrement | NumberField | 増やす | Increase |
numberFieldDecrement | NumberField | 減らす | Decrease |
passwordShow | PasswordInput | パスワードを表示 | Show password |
passwordHide | PasswordInput | パスワードを非表示 | Hide password |
listBoxPlaceholder | ListBox | 選択してください | Select an option |
breadcrumb | Breadcrumb | パンくずリスト | Breadcrumb |
paginationLabel | Pagination | ページネーション | Pagination |
paginationPrevious | Pagination | 前へ | Previous |
paginationNext | Pagination | 次へ | Next |
chat | Conversation.Messages | チャット | Chat |
scrollToLatest | Conversation.ScrollButton | 最新のメッセージへ移動 | Scroll to latest message |
reasoning | Reasoning | 思考の過程 | Reasoning |
reasoningStreaming | Reasoning | 思考中… | Thinking… |
suggestions | Suggestion.List | 候補 | Suggestions |
toolInput | ToolInvocation | 入力 | Input |
toolOutput | ToolInvocation | 出力 | Output |
toolError | ToolInvocation | ツールの実行でエラーが発生しました。 | The tool failed to run. |
toolDenied | ToolInvocation | ツールの実行は許可されませんでした。 | The tool run was not approved. |
responseCopied | Response | コピーしました | Copied |
responseCopyCode | Response | コードをコピー | Copy code |
responseCopyLink | Response | リンクをコピー | Copy link |
responseCopyTable | Response | 表をコピー | Copy table |
responseCopyTableAsCsv | Response | 表を CSV でコピー | Copy table as CSV |
responseCopyTableAsMarkdown | Response | 表を Markdown でコピー | Copy table as Markdown |
responseCopyTableAsTsv | Response | 表を TSV でコピー | Copy table as TSV |
responseDownloadDiagram | Response | 図をダウンロード | Download diagram |
responseDownloadDiagramAsMmd | Response | 図を MMD でダウンロード | Download diagram as MMD |
responseDownloadDiagramAsPng | Response | 図を PNG でダウンロード | Download diagram as PNG |
responseDownloadDiagramAsSvg | Response | 図を SVG でダウンロード | Download diagram as SVG |
responseDownloadFile | Response | ファイルをダウンロード | Download file |
responseDownloadImage | Response | 画像をダウンロード | Download image |
responseDownloadTable | Response | 表をダウンロード | Download table |
responseDownloadTableAsCsv | Response | 表を CSV でダウンロード | Download table as CSV |
responseDownloadTableAsMarkdown | Response | 表を Markdown でダウンロード | Download table as Markdown |
responseExitFullscreen | Response | 全画面表示を終了 | Exit fullscreen |
responseViewFullscreen | Response | 全画面表示 | View fullscreen |
responseImageNotAvailable | Response | 画像を表示できません | Image not available |
responseOpenExternalLink | Response | 外部リンクを開きますか？ | Open external link? |
responseExternalLinkWarning | Response | 外部サイトに移動しようとしています。 | You're about to visit an external website. |
responseOpenLink | Response | リンクを開く | Open link |
import { UIProvider } from '@k8ordo/ui';
function App({ children }) {
return <UIProvider>{children}</UIProvider>;
}
import { UIProvider } from '@k8ordo/ui';
import { en } from '@k8ordo/ui/i18n';
function App({ children }) {
return (
<UIProvider messages={en}>
{children}
</UIProvider>
);
}
import { en } from '@k8ordo/ui/i18n';
<UIProvider messages={{ close: '閉じる (Esc)' }}>
{children}
</UIProvider>
<UIProvider messages={{ ...en, autocompleteEmpty: 'No matches' }}>
{children}
</UIProvider>
// 1. prop
<Spinner label="送信中" />
// -> 送信中
// 2. messages
<UIProvider messages={en}>
<Spinner />
</UIProvider>
// -> Loading
// 3. default
<Spinner />
// -> 読み込み中
import type { Messages } from '@k8ordo/ui/i18n';
const fr: Messages = {
close: 'Fermer',
required: 'Requis',
loading: 'Chargement',
avatar: 'Avatar',
color: 'Couleur',
// ...
};
<UIProvider messages={fr}>{children}</UIProvider>