feat: add translation building capability to Streami18n and useNotifications hook

package.json

@@ -110,7 +110,7 @@
     "emoji-regex": "^9.2.0",
     "fix-webm-duration": "^1.0.5",
     "hast-util-find-and-replace": "^5.0.1",
-    "i18next": "^21.6.14",
+    "i18next": "^25.2.1",
     "linkifyjs": "^4.1.0",
     "lodash.debounce": "^4.0.8",
     "lodash.defaultsdeep": "^4.6.1",
@@ -228,7 +228,7 @@
     "eslint-plugin-sort-destructure-keys": "^2.0.0",
     "globals": "^15.13.0",
     "husky": "^8.0.3",
-    "i18next-parser": "^6.0.0",
+    "i18next-parser": "^9.3.0",
     "jest": "^29.7.0",
     "jest-axe": "^8.0.0",
     "jest-environment-jsdom": "^29.7.0",

src/components/Attachment/AttachmentActions.tsx

@@ -38,7 +38,7 @@ const UnMemoizedAttachmentActions = (props: AttachmentActionsProps) => {
             key={`${id}-${action.value}`}
             onClick={(event) => handleActionClick(event, action.name, action.value)}
           >
-            {action.text ? t<string>(action.text) : null}
+            {action.text ? t(action.text) : null}
           </button>
         ))}
       </div>

src/components/Attachment/Card.tsx

@@ -34,7 +34,7 @@ const UnableToRenderCard = ({ type }: { type?: CardProps['type'] }) => {
     >
       <div className='str-chat__message-attachment-card--content'>
         <div className='str-chat__message-attachment-card--text'>
-          {t<string>('this content could not be displayed')}
+          {t('this content could not be displayed')}
         </div>
       </div>
     </div>

src/components/Attachment/UnsupportedAttachment.tsx

@@ -21,7 +21,7 @@ export const UnsupportedAttachment = ({ attachment }: UnsupportedAttachmentProps
           className='str-chat__message-attachment-unsupported__title'
           data-testid='unsupported-attachment-title'
         >
-          {attachment.title || t<string>('Unsupported attachment')}
+          {attachment.title || t('Unsupported attachment')}
         </div>
       </div>
     </div>

src/components/Attachment/VoiceRecording.tsx

@@ -28,7 +28,7 @@ export const VoiceRecordingPlayer = ({
     asset_url,
     duration = 0,
     mime_type,
-    title = t<string>('Voice message'),
+    title = t('Voice message'),
     waveform_data,
   } = attachment;
 
@@ -100,7 +100,7 @@ export type QuotedVoiceRecordingProps = Pick<VoiceRecordingProps, 'attachment'>;
 
 export const QuotedVoiceRecording = ({ attachment }: QuotedVoiceRecordingProps) => {
   const { t } = useTranslationContext();
-  const title = attachment.title || t<string>('Voice message');
+  const title = attachment.title || t('Voice message');
   return (
     <div className={rootClassName} data-testid='quoted-voice-recording-widget'>
       <div className='str-chat__message-attachment__voice-recording-widget__metadata'>

src/components/Attachment/hooks/useAudioController.ts

@@ -125,7 +125,7 @@ export const useAudioController = ({
     audioElement.addEventListener('ended', handleEnded);
 
     const handleError = () => {
-      addNotification(t<string>('Error reproducing the recording'), 'error');
+      addNotification(t('Error reproducing the recording'), 'error');
       setIsPlaying(false);
     };
     audioElement.addEventListener('error', handleError);

src/components/Channel/Channel.tsx

@@ -393,7 +393,7 @@ const ChannelInner = (
               document.title = originalTitle.current;
             }
           } catch (e) {
-            console.error(t<string>('Failed to mark channel as read'));
+            console.error(t('Failed to mark channel as read'));
           }
         },
         500,
@@ -1328,7 +1328,7 @@ const ChannelInner = (
   if (!channel.watch) {
     return (
       <ChannelContainer>
-        <div>{t<string>('Channel Missing')}</div>
+        <div>{t('Channel Missing')}</div>
       </ChannelContainer>
     );
   }

src/components/ChannelHeader/ChannelHeader.tsx

@@ -63,9 +63,7 @@ export const ChannelHeader = (props: ChannelHeaderProps) => {
         <p className='str-chat__channel-header-title'>
           {displayTitle}{' '}
           {live && (
-            <span className='str-chat__header-livestream-livelabel'>
-              {t<string>('live')}
-            </span>
+            <span className='str-chat__header-livestream-livelabel'>{t('live')}</span>
           )}
         </p>
         {subtitle && <p className='str-chat__channel-header-subtitle'>{subtitle}</p>}
@@ -78,7 +76,7 @@ export const ChannelHeader = (props: ChannelHeaderProps) => {
               ,{' '}
             </>
           )}
-          {t<string>('{{ watcherCount }} online', { watcherCount: watcher_count })}
+          {t('{{ watcherCount }} online', { watcherCount: watcher_count })}
         </p>
       </div>
     </div>

src/components/ChannelHeader/icons.tsx

@@ -7,7 +7,7 @@ export const MenuIcon = ({ title }: { title?: string }) => {
 
   return (
     <svg data-testid='menu-icon' viewBox='0 0 448 512' xmlns='http://www.w3.org/2000/svg'>
-      <title>{title ?? t<string>('Menu')}</title>
+      <title>{title ?? t('Menu')}</title>
       <path
         d='M0 88C0 74.75 10.75 64 24 64H424C437.3 64 448 74.75 448 88C448 101.3 437.3 112 424 112H24C10.75 112 0 101.3 0 88zM0 248C0 234.7 10.75 224 24 224H424C437.3 224 448 234.7 448 248C448 261.3 437.3 272 424 272H24C10.75 272 0 261.3 0 248zM424 432H24C10.75 432 0 421.3 0 408C0 394.7 10.75 384 24 384H424C437.3 384 448 394.7 448 408C448 421.3 437.3 432 424 432z'
         fill='currentColor'

src/components/ChannelPreview/utils.tsx

@@ -38,20 +38,20 @@ export const getLatestMessagePreview = (
   const poll = latestMessage?.poll;
 
   if (!latestMessage) {
-    return t<string>('Nothing yet...');
+    return t('Nothing yet...');
   }
 
   if (latestMessage.deleted_at) {
-    return t<string>('Message deleted');
+    return t('Message deleted');
   }
 
   if (poll) {
     if (!poll.vote_count) {
       const createdBy =
         poll.created_by?.id === channel.getClient().userID
-          ? t<string>('You')
-          : (poll.created_by?.name ?? t<string>('Poll'));
-      return t<string>('📊 {{createdBy}} created: {{ pollName}}', {
+          ? t('You')
+          : (poll.created_by?.name ?? t('Poll'));
+      return t('📊 {{createdBy}} created: {{ pollName}}', {
         createdBy,
         pollName: poll.name,
       });
@@ -63,12 +63,12 @@ export const getLatestMessagePreview = (
         latestVote && poll.options.find((opt) => opt.id === latestVote.option_id);
 
       if (option && latestVote) {
-        return t<string>('📊 {{votedBy}} voted: {{pollOptionText}}', {
+        return t('📊 {{votedBy}} voted: {{pollOptionText}}', {
           pollOptionText: option.text,
           votedBy:
             latestVote?.user?.id === channel.getClient().userID
-              ? t<string>('You')
-              : (latestVote.user?.name ?? t<string>('Poll')),
+              ? t('You')
+              : (latestVote.user?.name ?? t('Poll')),
         });
       }
     }
@@ -85,10 +85,10 @@ export const getLatestMessagePreview = (
   }
 
   if (latestMessage.attachments?.length) {
-    return t<string>('🏙 Attachment...');
+    return t('🏙 Attachment...');
   }
 
-  return t<string>('Empty message...');
+  return t('Empty message...');
 };
 
 export type GroupChannelDisplayInfo = { image?: string; name?: string }[];

src/components/ChannelSearch/SearchResults.tsx

@@ -15,7 +15,7 @@ const DefaultSearchEmpty = () => {
   return (
     <div aria-live='polite' className='str-chat__channel-search-container-empty'>
       <SearchIcon />
-      {t<string>('No results found')}
+      {t('No results found')}
     </div>
   );
 };
@@ -29,7 +29,7 @@ const DefaultSearchResultsHeader = ({ results }: SearchResultsHeaderProps) => {
       className='str-chat__channel-search-results-header'
       data-testid='channel-search-results-header'
     >
-      {t<string>('searchResultsCount', {
+      {t('searchResultsCount', {
         count: results.length,
       })}
     </div>
@@ -212,7 +212,7 @@ export const SearchResults = (props: SearchResultsProps) => {
             className='str-chat__channel-search-container-searching'
             data-testid='search-in-progress-indicator'
           >
-            {t<string>('Searching...')}
+            {t('Searching...')}
           </div>
         )}
       </ResultsContainer>

src/components/Chat/hooks/useChat.ts

@@ -2,7 +2,12 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 
 import type { TranslationContextValue } from '../../../context/TranslationContext';
 import type { SupportedTranslations } from '../../../i18n';
-import { defaultDateTimeParser, isLanguageSupported, Streami18n } from '../../../i18n';
+import {
+  defaultDateTimeParser,
+  defaultTranslatorFunction,
+  isLanguageSupported,
+  Streami18n,
+} from '../../../i18n';
 
 import type {
   AppSettingsAPIResponse,
@@ -27,7 +32,7 @@ export const useChat = ({
   initialNavOpen,
 }: UseChatParams) => {
   const [translators, setTranslators] = useState<TranslationContextValue>({
-    t: (key: string) => key,
+    t: defaultTranslatorFunction,
     tDateTimeParser: defaultDateTimeParser,
     userLanguage: 'en',
   });

src/components/Dialog/FormDialog.tsx

@@ -140,7 +140,7 @@ export const FormDialog = <
               className='str-chat__dialog__controls-button str-chat__dialog__controls-button--cancel'
               onClick={close}
             >
-              {t<string>('Cancel')}
+              {t('Cancel')}
             </button>
             <button
               className='str-chat__dialog__controls-button str-chat__dialog__controls-button--submit'
@@ -149,7 +149,7 @@ export const FormDialog = <
               }
               type='submit'
             >
-              {t<string>('Send')}
+              {t('Send')}
             </button>
           </div>
         </form>

src/components/EmptyStateIndicator/EmptyStateIndicator.tsx

@@ -16,7 +16,7 @@ const UnMemoizedEmptyStateIndicator = (props: EmptyStateIndicatorProps) => {
   if (listType === 'thread') return null;
 
   if (listType === 'channel') {
-    const text = t<string>('You have no channels currently');
+    const text = t('You have no channels currently');
     return (
       <>
         <div className='str-chat__channel-list-empty'>
@@ -28,7 +28,7 @@ const UnMemoizedEmptyStateIndicator = (props: EmptyStateIndicatorProps) => {
   }
 
   if (listType === 'message') {
-    const text = t<string>('No chats here yet…');
+    const text = t('No chats here yet…');
     return (
       <div className='str-chat__empty-channel'>
         <ChatBubble />

src/components/Gallery/Gallery.tsx

@@ -69,7 +69,7 @@ const UnMemoizedGallery = (props: GalleryProps) => {
         })}
       >
         <p>
-          {t<string>('{{ imageCount }} more', {
+          {t('{{ imageCount }} more', {
             imageCount: images.length - countImagesDisplayedInPreview,
           })}
         </p>

src/components/LoadMore/LoadMoreButton.tsx

@@ -24,7 +24,7 @@ const UnMemoizedLoadMoreButton = ({
 }: PropsWithChildren<LoadMoreButtonProps>) => {
   const { t } = useTranslationContext('UnMemoizedLoadMoreButton');
 
-  const childrenOrDefaultString = children ?? t<string>('Load more');
+  const childrenOrDefaultString = children ?? t('Load more');
   const loading = typeof isLoading !== 'undefined' ? isLoading : refreshing;
 
   useEffect(() => {

src/components/Loading/LoadingErrorIndicator.tsx

@@ -15,9 +15,7 @@ const UnMemoizedLoadingErrorIndicator = ({ error }: LoadingErrorIndicatorProps)
 
   if (!error) return null;
 
-  return (
-    <div>{t<string>('Error: {{ errorMessage }}', { errorMessage: error.message })}</div>
-  );
+  return <div>{t('Error: {{ errorMessage }}', { errorMessage: error.message })}</div>;
 };
 
 export const LoadingErrorIndicator = React.memo(

src/components/MediaRecorder/RecordingPermissionDeniedNotification.tsx

@@ -37,7 +37,7 @@ export const RecordingPermissionDeniedNotification = ({
           className='str-chat__recording-permission-denied-notification__dismiss-button'
           onClick={onClose}
         >
-          {t<string>('Ok')}
+          {t('Ok')}
         </button>
       </div>
     </div>

src/components/Message/MessageBlocked.tsx

@@ -27,7 +27,7 @@ export const MessageBlocked = () => {
       key={message.id}
     >
       <div className='str-chat__message--blocked-inner'>
-        {t<string>('Message was blocked by moderation policies')}
+        {t('Message was blocked by moderation policies')}
       </div>
     </div>
   );

src/components/Message/MessageDeleted.tsx

@@ -27,7 +27,7 @@ export const MessageDeleted = (props: MessageDeletedProps) => {
       key={message.id}
     >
       <div className='str-chat__message--deleted-inner'>
-        {t<string>('This message was deleted...')}
+        {t('This message was deleted...')}
       </div>
     </div>
   );

src/components/Message/MessageEditedTimestamp.tsx

@@ -39,7 +39,7 @@ export function MessageEditedTimestamp({
       )}
       data-testid='message-edited-timestamp'
     >
-      {t<string>('Edited')}{' '}
+      {t('Edited')}{' '}
       <Timestamp timestamp={message.message_text_updated_at} {...timestampProps} />
     </div>
   );

src/components/Message/MessageErrorText.tsx

@@ -18,7 +18,7 @@ export function MessageErrorText({ message, theme }: MessageErrorTextProps) {
       <div
         className={`str-chat__${theme}-message--error-message str-chat__message--error-message`}
       >
-        {t<string>('Error · Unsent')}
+        {t('Error · Unsent')}
       </div>
     );
   }
@@ -29,8 +29,8 @@ export function MessageErrorText({ message, theme }: MessageErrorTextProps) {
         className={`str-chat__${theme}-message--error-message str-chat__message--error-message`}
       >
         {message.error?.status !== 403
-          ? t<string>('Message Failed · Click to try again')
-          : t<string>('Message Failed · Unauthorized')}
+          ? t('Message Failed · Click to try again')
+          : t('Message Failed · Unauthorized')}
       </div>
     );
   }

src/components/Message/MessageSimple.tsx

@@ -215,9 +215,7 @@ const MessageSimpleWithContext = (props: MessageSimpleWithContextProps) => {
               )}
               <MessageTimestamp customClass='str-chat__message-simple-timestamp' />
               {isEdited && (
-                <span className='str-chat__mesage-simple-edited'>
-                  {t<string>('Edited')}
-                </span>
+                <span className='str-chat__mesage-simple-edited'>{t('Edited')}</span>
               )}
               {isEdited && (
                 <MessageEditedTimestamp calendar open={isEditedTimestampOpen} />

src/components/Message/MessageStatus.tsx

@@ -90,7 +90,7 @@ const UnMemoizedMessageStatus = (props: MessageStatusProps) => {
               referenceElement={referenceElement}
               visible={tooltipVisible}
             >
-              {t<string>('Sending...')}
+              {t('Sending...')}
             </PopperTooltip>
             <LoadingIndicator />
           </>
@@ -107,7 +107,7 @@ const UnMemoizedMessageStatus = (props: MessageStatusProps) => {
               referenceElement={referenceElement}
               visible={tooltipVisible}
             >
-              {t<string>('Delivered')}
+              {t('Delivered')}
             </PopperTooltip>
             <MessageDeliveredIcon />
           </>

src/components/Message/icons.tsx

@@ -67,8 +67,8 @@ export const PinIndicator = ({ message, t }: PinIndicatorProps) => {
         }}
       >
         {message.pinned_by
-          ? `${t<string>('Pinned by')} ${message.pinned_by?.name || message.pinned_by?.id}`
-          : t<string>('Message pinned')}
+          ? `${t('Pinned by')} ${message.pinned_by?.name || message.pinned_by?.id}`
+          : t('Message pinned')}
       </div>
     </div>
   );