openclaw - 💡(How to fix) Fix [Feature]: i18n / locale switcher for Control UI [1 comments, 2 participants]

TL;DR

Implementing a locale switcher with support for Simplified Chinese can be achieved by integrating an i18n library and storing user preferences.

Guidance

• Integrate a standard i18n library such as react-intl or i18next to handle translations in the Control UI.
• Add a language dropdown in the UI, allowing users to switch between en and zh-CN.
• Store the user's language preference in localStorage or openclaw.json to persist the setting across sessions.
• Consider starting with a limited set of translations for Simplified Chinese and expand as needed.

Example

// Example using react-intl
import { IntlProvider, FormattedMessage } from 'react-intl';

const languages = {
  'en': 'English',
  'zh-CN': 'Simplified Chinese',
};

const App = () => {
  const [locale, setLocale] = useState('en');

  return (
    <IntlProvider locale={locale}>
      <select value={locale} onChange={(e) => setLocale(e.target.value)}>
        {Object.keys(languages).map((lang) => (
          <option key={lang} value={lang}>{languages[lang]}</option>
        ))}
      </select>
      <FormattedMessage id="hello" defaultMessage="Hello" />
    </IntlProvider>
  );
};

Notes

The proposed solution assumes that the Control UI is built using a JavaScript framework that supports i18n libraries. The example provided uses react-intl, but the actual implementation may vary depending on the framework and library chosen.

Recommendation

Apply workaround by integrating an i18n library and implementing a locale switcher, as this will provide the necessary support for non-English speakers without requiring a full version upgrade.