Skip to main content

Internationalisation (i18n)

Chativa uses i18next. The widget ships with English (en) and Turkish (tr). Anything else you add at runtime.

Set the active language​

import { i18next } from "@chativa/ui";   // re-exported from @chativa/core
i18next.changeLanguage("tr");

Or declaratively, before mount:

window.chativaSettings = { locale: "tr" };

All LitElement components that extend I18nMixin (every Chativa component does) re-render automatically when the language changes.

Add a new language​

import { i18next } from "@chativa/ui";

i18next.addResourceBundle("de", "translation", {
  header:    { title: "Chat", subtitle: "Wir sind hier" },
  input:     { placeholder: "Nachricht schreiben..." },
  commands:  { clear: { description: "Verlauf löschen" } },
});

i18next.changeLanguage("de");

Override built-in strings​

You can override any key in any language. Two formats are supported via chativaSettings.i18n:

Per-language​

window.chativaSettings = {
  i18n: {
    all: { header: { title: "Customer Care" } },     // applied to every language
    tr:  { header: { subtitle: "7/24 buradayız" } }, // tr-only override
  },
};

Flat (applies to every registered language)​

window.chativaSettings = {
  i18n: { header: { title: "Customer Care" } },
};

applyGlobalSettings() re-applies your overrides on languageChanged, so they survive runtime locale switches.

In your own components​

Extend I18nMixin and use the reactive t() method:

import { LitElement, html } from "lit";
import { I18nMixin } from "@chativa/core";

class HelpButton extends I18nMixin(LitElement) {
  render() {
    return html`<button>${this.t("commands.help.label")}</button>`;
  }
}

Or in slash commands / GenUI components — pass the lazy form so translations are read at execute time, not registration time:

registerCommand({
  name: "help",
  description: () => t("commands.help.description"),  // function → resolved later
  usage:       () => t("commands.help.usage"),
  execute({ args }) { /* ... */ },
});

See domain/ports/ISlashCommand.ts → resolveText().