Translations#

Experimental: The Chat extension and its component APIs may change in the future. Please give us feedback on your experience with them.

The Chat extension keeps its strings in its own locale files, separate from the base component translations. It uses the shared Eufemia Provider for locale selection and overrides, like Forms.

Norwegian Bokmål (nb-NO) and British English (en-GB) are included with the extension. Norwegian is the default. English variants fall back to British English; other locales fall back to Norwegian unless you supply translations.

Select a locale#

import { Provider } from '@dnb/eufemia/shared'
import { PromptInput } from '@dnb/eufemia/extensions/chat'

function ChatInput() {
  return (
    <Provider locale="en-GB">
      <PromptInput />
    </Provider>
  )
}

Load an additional locale#

Swedish, Danish and US English are available as explicit imports. Load the Chat locale alongside the corresponding base component locale, so buttons, input elements and number/date formatting use the same language.

import { Provider } from '@dnb/eufemia/shared'
import { PromptInput } from '@dnb/eufemia/extensions/chat'
import svSE from '@dnb/eufemia/shared/locales/sv-SE'
import chatSvSE from '@dnb/eufemia/extensions/chat/constants/locales/sv-SE'

const translations = {
  'sv-SE': { ...svSE['sv-SE'], ...chatSvSE['sv-SE'] },
}

function ChatInput() {
  return (
    <Provider locale="sv-SE" translations={translations}>
      <PromptInput />
    </Provider>
  )
}

Use the same pattern with da-DK or en-US. US English inherits the extension's British English strings and supplies American spelling where it differs. Provider's translationsLoader can also load these files asynchronously.

Override labels#

Use Chat for new overrides. Existing Ai overrides and locale imports remain supported for compatibility. Both nested and flat legacy keys work. If both namespaces define the same key, Chat takes precedence; missing keys still fall back to Ai and then the extension defaults.

Keep overrides under Chat. Partial overrides preserve the other extension defaults. Both nested keys and flat keys such as 'Chat.promptPlaceholder' work.

import { Provider } from '@dnb/eufemia/shared'
import {
  MessageIndicator,
  PromptInput,
} from '@dnb/eufemia/extensions/chat'

const translations = {
  'en-GB': {
    Chat: {
      promptPlaceholder: 'Ask about your accounts',
      loading: 'Preparing your answer …',
    },
  },
}

function ChatInput() {
  return (
    <Provider locale="en-GB" translations={translations}>
      <MessageIndicator />
      <PromptInput />
    </Provider>
  )
}

When overriding an explicitly imported locale, merge its Chat object before your custom keys, so the remaining labels keep that language. For example: Chat: { ...chatSvSE['sv-SE'].Chat, loading: 'Förbereder ditt svar …' }.

The locale files cover component labels, task statuses, source counts and accessibility text. Your application owns the language of messages, task titles, results and other content passed as props or children. Changing the Provider locale does not translate generated answers or application data.