Notifications text

Use this page to change the text of a notification: a built-in one, or one your app publishes. The text is translated with the rest of the UI, so it follows the user's language.

Translating notifications

The Notification component translates each notification as it renders it, through the notification translation topic:

1. A translator registered for the notification's type decides the text.
2. Otherwise the SDK's own translators do. There is one for every type stream-chat publishes, and a few for types the React components publish. They render keys in the notification.* namespace.
3. Otherwise the list renders notification.message as it is.

The React components mostly translate their notifications before publishing them: "Message pinned" is t('common.messagePinned.label'). So there are three ways to change the text:

• A notification from a React component: override the translation key it was published with. When a message action fails with an error message of its own, the notification shows that message. An audio playback error always shows notification.audioPlaybackError.
• A notification from stream-chat: override its notification.* key.
• Text that depends on the notification: register a translator for its type.

import { asDynamicKey, Streami18n } from "stream-chat-react";
import type {
  NotificationTranslatorOptions,
  Translator,
} from "stream-chat-react";

const i18nInstance = new Streami18n({
  translationsForLanguage: {
    // Published by stream-chat: an upload that failed.
    "notification.attachmentUploadFailed": "That file could not be uploaded",
    // Published by the pin action, translated at the call site.
    "common.messagePinned.label": "Pinned",
  },
});

// Names the author of the pinned message.
const pinTranslators: Record<
  string,
  Translator<NotificationTranslatorOptions>
> = {
  "api:message:pin:success": ({ options: { notification }, t }) => {
    const message = notification?.origin.context?.message as
      { user?: { name?: string } } | undefined;
    return t(asDynamicKey("myApp.notification.messagePinned"), {
      author: message?.user?.name ?? "someone",
      defaultValue: "Pinned a message from {{ author }}",
    });
  },
};

i18nInstance.translationBuilder.registerTranslators(
  "notification",
  pinTranslators,
);

Pass i18nInstance to Chat. A translator receives the notification as options.notification, and returns a string, or null to show notification.message as it is. Keys of your own go through asDynamicKey: see Localization for the translation builder and dictionaries.

Text the React components don't translate

The React components publish notifications of their own, such as when a message action succeeds or a channel can't be opened. Notifications lists every type, with its emitter and when it's published.

Most messages are translated with t() before they're published. Two kinds aren't:

• A failed message action whose error carries a message shows that message.
• A failed reminder or save for later, without such a message, shows English text.

The search results and the reply view publish without a panel tag, so their notifications show in the channel panel.

Uploads, sending, jumps in the message paginator and poll votes are published by stream-chat: see Notifications.

Used in: Notifications UI and Connection status.

Used in

• Notifications UI
• Localization