feat: add translation building capability to Streami18n

Author: MartinCupela

src/components/MessageInput/MessageInputFlat.tsx

@@ -77,7 +77,7 @@ export const MessageInputFlat = () => {
 
   /**
    * This bit here is needed to make sure that we can get rid of the default behaviour
-   * if need be. Essentially this allows us to pass StopAIGenerationButton={null} and
+   * if need be. Essentially, this allows us to pass StopAIGenerationButton={null} and
    * completely circumvent the default logic if it's not what we want. We need it as a
    * prop because there is no other trivial way to override the SendMessage button otherwise.
    */

src/components/MessageList/MessageListNotifications.tsx

@@ -4,11 +4,29 @@ import { ConnectionStatus } from './ConnectionStatus';
 import { CustomNotification } from './CustomNotification';
 
 import { useTranslationContext } from '../../context/TranslationContext';
-
+import { useNotifications } from '../Notifications/hooks/useNotifications';
 import type { MessageNotificationProps } from './MessageNotification';
-
 import type { ChannelNotifications } from '../../context/ChannelStateContext';
 
+const ClientNotifications = () => {
+  const clientNotifications = useNotifications();
+  const { t } = useTranslationContext();
+
+  return (
+    <>
+      {clientNotifications.map((notification) => (
+        <CustomNotification
+          active={true}
+          key={notification.id}
+          type={notification.severity}
+        >
+          {t<string>('translationBuilderTopic/notification', { notification })}
+        </CustomNotification>
+      ))}
+    </>
+  );
+};
+
 export type MessageListNotificationsProps = {
   hasNewMessages: boolean;
   isMessageListScrolledToBottom: boolean;
@@ -41,6 +59,7 @@ export const MessageListNotifications = (props: MessageListNotificationsProps) =
           {notification.text}
         </CustomNotification>
       ))}
+      <ClientNotifications />
       <ConnectionStatus />
       <MessageNotification
         isMessageListScrolledToBottom={isMessageListScrolledToBottom}

src/components/Notifications/hooks/index.ts

@@ -0,0 +1 @@
+export * from './useNotifications';

src/components/Notifications/hooks/useNotifications.ts

@@ -0,0 +1,13 @@
+import { useChatContext } from '../../../context';
+import { useStateStore } from '../../../store';
+import type { Notification, NotificationManagerState } from 'stream-chat';
+
+const selector = (state: NotificationManagerState) => ({
+  notifications: state.notifications,
+});
+
+export const useNotifications = (): Notification[] => {
+  const { client } = useChatContext();
+  const result = useStateStore(client.notifications.store, selector);
+  return result.notifications;
+};

src/components/Notifications/index.ts

@@ -0,0 +1 @@
+export * from './hooks';

src/components/index.ts

@@ -22,6 +22,7 @@ export * from './MessageInput';
 export * from './MessageList';
 export * from './MML';
 export * from './Modal';
+export * from './Notifications';
 export * from './Poll';
 export * from './Reactions';
 export * from './SafeAnchor';

src/i18n/Streami18n.ts

@@ -7,11 +7,14 @@ import localeData from 'dayjs/plugin/localeData';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
+import { NotificationTranslationTopic, TranslationBuilder } from './TranslationBuilder';
 import { defaultTranslatorFunction, predefinedFormatters } from './utils';
+
 import type { TFunction } from 'i18next';
 import type momentTimezone from 'moment-timezone';
 import type { TranslationLanguages } from 'stream-chat';
 
+import type { TranslationTopicConstructor } from './TranslationBuilder';
 import type { UnknownType } from '../types/types';
 import type { CustomFormatters, PredefinedFormatters, TDateTimeParser } from './types';
 
@@ -90,7 +93,7 @@ Dayjs.updateLocale('fr', {
     lastWeek: 'dddd [dernier à] LT',
     nextDay: '[Demain à] LT',
     nextWeek: 'dddd [à] LT',
-    sameDay: '[Aujourd’hui à] LT',
+    sameDay: "[Aujourd'hui à] LT",
     sameElse: 'L',
   },
 });
@@ -258,15 +261,16 @@ export type Streami18nOptions = {
   formatters?: Partial<PredefinedFormatters> & CustomFormatters;
   language?: TranslationLanguages;
   logger?: (message?: string) => void;
+  translationBuilderTopics?: Record<string, TranslationTopicConstructor>;
   parseMissingKeyHandler?: (key: string, defaultValue?: string) => string;
   timezone?: string;
   translationsForLanguage?: Partial<typeof enTranslations>;
 };
 
 /**
- * Wrapper around [i18next](https://www.i18next.com/) class for Stream related translations.
- * Instance of this class should be provided to Chat component to handle translations.
- * Stream provides following list of in-built translations:
+ * Wrapper around [i18next](https://www.i18next.com/) class for Stream related i18n.
+ * Instance of this class should be provided to Chat component to handle i18n.
+ * Stream provides following list of in-built i18n:
  * 1. English (en)
  * 2. Dutch (nl)
  * 3. Russian (ru)
@@ -330,7 +334,7 @@ export type Streami18nOptions = {
  * </Chat>
  * ```
  *
- * ## Datetime translations
+ * ## Datetime i18n
  *
  * Stream react chat components uses [dayjs](https://day.js.org/en/) internally by default to format datetime stamp.
  * e.g., in ChannelPreview, MessageContent components.
@@ -422,10 +426,24 @@ const defaultStreami18nOptions = {
   disableDateTimeTranslations: false,
   language: 'en' as TranslationLanguages,
   logger: (message?: string) => console.warn(message),
+  /**
+   * Key in the translationBuilderTopics has to match postProcessorName in the translation value.
+   *
+   * {
+   *   "key": "{{value, postProcessorName}}"
+   * }
+   *
+   * At least the default topics will be supported.
+   */
+  translationBuilderTopics: {
+    notification: NotificationTranslationTopic,
+  },
 };
 
 export class Streami18n {
   i18nInstance = i18n.createInstance();
+  translationBuilder: TranslationBuilder;
+  private translationBuilderTopics: Record<string, TranslationTopicConstructor> = {};
   Dayjs = null;
   setLanguageCallback: (t: TFunction) => void = () => null;
   initialized = false;
@@ -477,6 +495,7 @@ export class Streami18n {
     lng: string;
     nsSeparator: false;
     parseMissingKeyHandler?: (key: string, defaultValue?: string) => string;
+    postProcess?: string[];
   };
   /**
    * A valid TZ identifier string (https://en.wikipedia.org/wiki/List_of_tz_database_time_zones)
@@ -519,6 +538,11 @@ export class Streami18n {
     this.DateTimeParser = finalOptions.DateTimeParser;
     this.timezone = finalOptions.timezone;
     this.formatters = { ...predefinedFormatters, ...options?.formatters };
+    this.translationBuilder = new TranslationBuilder(this.i18nInstance);
+    this.translationBuilderTopics = {
+      ...defaultStreami18nOptions.translationBuilderTopics,
+      ...options.translationBuilderTopics,
+    };
 
     try {
       if (this.DateTimeParser && isDayJs(this.DateTimeParser)) {
@@ -565,6 +589,12 @@ export class Streami18n {
       nsSeparator: false,
     };
 
+    const postProcess = Object.keys(this.translationBuilderTopics);
+
+    if (postProcess.length > 0) {
+      this.i18nextConfig.postProcess = postProcess;
+    }
+
     if (finalOptions.parseMissingKeyHandler) {
       this.i18nextConfig.parseMissingKeyHandler = finalOptions.parseMissingKeyHandler;
     }
@@ -624,6 +654,12 @@ export class Streami18n {
           this.i18nInstance.services.formatter?.add(name, formatterFactory(this));
         });
       }
+      // Register post-processors after initialization
+      Object.entries(this.translationBuilderTopics).forEach(
+        ([topic, TranslationTopic]) => {
+          this.translationBuilder.registerTopic(topic, TranslationTopic);
+        },
+      );
     } catch (error) {
       this.logger(`Something went wrong with init: ${JSON.stringify(error)}`);
     }

src/i18n/TranslationBuilder/TranslationBuilder.ts

@@ -0,0 +1,93 @@
+import type { i18n, TFunction } from 'i18next';
+
+export type Translator<O extends Record<string, unknown> = Record<string, unknown>> =
+  (params: { key: string; value: string; t: TFunction; options: O }) => string | null;
+
+export type TranslationTopicOptions<
+  O extends Record<string, unknown> = Record<string, unknown>,
+> = {
+  i18next: i18n;
+  translators?: Record<string, Translator<O>>;
+};
+
+export abstract class TranslationTopic<
+  O extends Record<string, unknown> = Record<string, unknown>,
+> {
+  protected translators: Map<string, Translator<O>> = new Map();
+  protected i18next: i18n;
+
+  constructor(protected options: TranslationTopicOptions<O>) {
+    this.i18next = options.i18next;
+    if (options.translators) {
+      Object.entries(options.translators).forEach(([name, translator]) => {
+        this.setTranslator(name, translator);
+      });
+    }
+  }
+
+  abstract translate(value: string, key: string, options: O): string;
+
+  setTranslator = (name: string, translator: Translator<O>) => {
+    this.translators.set(name, translator);
+  };
+
+  removeTranslator = (name: string) => {
+    this.translators.delete(name);
+  };
+}
+
+const forwardTranslation: Translator = ({ value }) => value;
+
+export type TranslationTopicConstructor = new (
+  options: TranslationTopicOptions,
+) => TranslationTopic;
+
+export class TranslationBuilder {
+  private topics = new Map<string, TranslationTopic>();
+
+  constructor(private i18next: i18n) {}
+
+  registerTopic = (name: string, Topic: TranslationTopicConstructor) => {
+    const topic = new Topic({ i18next: this.i18next });
+    this.topics.set(name, topic);
+    this.i18next.use({
+      name,
+      process: (value: string, key: string, options: Record<string, unknown>) => {
+        const topic = this.topics.get(name);
+        if (!topic) return value;
+        return topic.translate(value, key, options);
+      },
+      type: 'postProcessor' as const,
+    });
+    return topic;
+  };
+
+  disableTopic = (topicName: string) => {
+    const topic = this.topics.get(topicName);
+    if (!topic) return;
+    this.i18next.use({
+      name: topicName,
+      process: forwardTranslation,
+      type: 'postProcessor',
+    });
+    this.topics.delete(topicName);
+  };
+
+  getTopic = (topicName: string) => this.topics.get(topicName);
+
+  registerTranslators(topicName: string, translators: Record<string, Translator>) {
+    const topic = this.getTopic(topicName);
+    if (!topic) return;
+    Object.entries(translators).forEach(([name, translator]) => {
+      topic.setTranslator(name, translator);
+    });
+  }
+
+  removeTranslators(topicName: string, translators: string[]) {
+    const topic = this.getTopic(topicName);
+    if (!topic) return;
+    translators.forEach((name) => {
+      topic.removeTranslator(name);
+    });
+  }
+}

src/i18n/TranslationBuilder/index.ts

@@ -0,0 +1,2 @@
+export * from './TranslationBuilder';
+export * from './notifications';

src/i18n/TranslationBuilder/notifications/NotificationTranslationTopic.ts

@@ -0,0 +1,35 @@
+import {
+  attachmentUploadBlockedNotificationTranslator,
+  attachmentUploadFailedNotificationTranslator,
+} from './attachmentUpload';
+import { TranslationTopic } from '../../index';
+import type { Notification } from 'stream-chat';
+import type { NotificationTranslatorOptions } from './types';
+import type { TranslationTopicOptions, Translator } from '../../index';
+
+export const defaultNotificationTranslators: Record<
+  string,
+  Translator<NotificationTranslatorOptions>
+> = {
+  'attachment.upload.blocked': attachmentUploadBlockedNotificationTranslator,
+  'attachment.upload.failed': attachmentUploadFailedNotificationTranslator,
+};
+
+export class NotificationTranslationTopic extends TranslationTopic<NotificationTranslatorOptions> {
+  constructor({ i18next, translators }: TranslationTopicOptions) {
+    super({ i18next, translators: defaultNotificationTranslators });
+    if (translators) {
+      Object.entries(translators).forEach(([name, translator]) => {
+        this.setTranslator(name, translator);
+      });
+    }
+  }
+
+  translate = (value: string, key: string, options: { notification?: Notification }) => {
+    const { notification } = options;
+    if (!notification) return value;
+    const translator = notification.code && this.translators.get(notification.code);
+    if (!translator) return value;
+    return translator({ key, options, t: this.i18next.t, value }) || value;
+  };
+}