stream-chat-react-native-core 5.32.0-beta.2 → 5.32.0

package/src/components/Message/MessageSimple/MessageTimestamp.tsx

@@ -1,27 +1,14 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { StyleSheet, Text } from 'react-native';
 
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import {
-  TDateTimeParserInput,
   TranslationContextValue,
   useTranslationContext,
 } from '../../../contexts/translationContext/TranslationContext';
-import { getDateString } from '../../../utils/getDateString';
+import { getDateString } from '../../../utils/i18n/getDateString';
 
 export type MessageTimestampProps = Partial<Pick<TranslationContextValue, 'tDateTimeParser'>> & {
-  /**
-   * Whether to show the time in Calendar time format. Calendar time displays time relative to a today's date.
-   */
-  calendar?: boolean;
-  /**
-   * The format in which the date should be displayed.
-   */
-  format?: string;
-  /**
-   * A function to format the date.
-   */
-  formatDate?: (date: TDateTimeParserInput) => string;
   /**
    * Already Formatted date
    */
@@ -30,17 +17,21 @@ export type MessageTimestampProps = Partial<Pick<TranslationContextValue, 'tDate
    * The timestamp of the message.
    */
   timestamp?: string | Date;
+  /*
+   * Lookup key in the language corresponding translations sheet to perform date formatting
+   */
+  timestampTranslationKey?: string;
 };
 
 export const MessageTimestamp = (props: MessageTimestampProps) => {
   const {
-    calendar,
-    format,
-    formatDate,
     formattedDate,
     tDateTimeParser: propsTDateTimeParser,
     timestamp,
+    timestampTranslationKey = 'timestamp/MessageTimestamp',
   } = props;
+  const { t, tDateTimeParser: contextTDateTimeParser } = useTranslationContext();
+  const tDateTimeParser = propsTDateTimeParser || contextTDateTimeParser;
 
   const {
     theme: {
@@ -50,7 +41,17 @@ export const MessageTimestamp = (props: MessageTimestampProps) => {
       },
     },
   } = useTheme();
-  const { tDateTimeParser: contextTDateTimeParser } = useTranslationContext();
+
+  const dateString = useMemo(
+    () =>
+      getDateString({
+        date: timestamp,
+        t,
+        tDateTimeParser,
+        timestampTranslationKey,
+      }),
+    [timestamp, t, tDateTimeParser, timestampTranslationKey],
+  );
 
   if (formattedDate) {
     return (
@@ -58,16 +59,6 @@ export const MessageTimestamp = (props: MessageTimestampProps) => {
     );
   }
 
-  if (!timestamp) return null;
-
-  const dateString = getDateString({
-    calendar,
-    date: timestamp,
-    format,
-    formatDate,
-    tDateTimeParser: propsTDateTimeParser || contextTDateTimeParser,
-  });
-
   if (!dateString) return null;
 
   return <Text style={[styles.text, { color: grey }, timestampText]}>{dateString.toString()}</Text>;

package/src/components/Message/MessageSimple/__tests__/MessageStatus.test.js

@@ -5,7 +5,7 @@ import { cleanup, render, waitFor } from '@testing-library/react-native';
 import { generateMessage } from '../../../../mock-builders/generator/message';
 import { generateStaticUser, generateUser } from '../../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../../mock-builders/mock';
-import { Streami18n } from '../../../../utils/Streami18n';
+import { Streami18n } from '../../../../utils/i18n/Streami18n';
 import { Chat } from '../../../Chat/Chat';
 import { MessageStatus } from '../MessageStatus';
 

package/src/components/MessageList/DateHeader.tsx

@@ -21,7 +21,7 @@ const styles = StyleSheet.create({
 });
 
 export type DateHeaderProps = {
-  dateString: string | number;
+  dateString?: string | number;
 };
 
 export const DateHeader = ({ dateString }: DateHeaderProps) => {

package/src/components/MessageList/InlineDateSeparator.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
-import { getDateString } from '../../utils/getDateString';
+import { getDateString } from '../../utils/i18n/getDateString';
 
 const styles = StyleSheet.create({
   container: {
@@ -22,7 +22,13 @@ const styles = StyleSheet.create({
   },
 });
 
+/**
+ * Props for the `InlineDateSeparator` component.
+ */
 export type InlineDateSeparatorProps = {
+  /**
+   * Date to be displayed.
+   */
   date?: Date;
 };
 
@@ -33,19 +39,18 @@ export const InlineDateSeparator = ({ date }: InlineDateSeparatorProps) => {
       inlineDateSeparator: { container, text },
     },
   } = useTheme();
-  const { tDateTimeParser } = useTranslationContext();
-
-  if (!date) {
-    return null;
-  }
-
-  const dateFormat = date.getFullYear() === new Date().getFullYear() ? 'MMM D' : 'MMM D, YYYY';
-
-  const dateString = getDateString({
-    date,
-    format: dateFormat,
-    tDateTimeParser,
-  });
+  const { t, tDateTimeParser } = useTranslationContext();
+
+  const dateString = useMemo(
+    () =>
+      getDateString({
+        date,
+        t,
+        tDateTimeParser,
+        timestampTranslationKey: 'timestamp/InlineDateSeparator',
+      }),
+    [date, t, tDateTimeParser],
+  );
 
   return (
     <View

package/src/components/MessageList/MessageList.tsx

@@ -51,13 +51,8 @@ import {
 } from '../../contexts/paginatedMessageListContext/PaginatedMessageListContext';
 import { mergeThemes, ThemeProvider, useTheme } from '../../contexts/themeContext/ThemeContext';
 import { ThreadContextValue, useThreadContext } from '../../contexts/threadContext/ThreadContext';
-import {
-  TranslationContextValue,
-  useTranslationContext,
-} from '../../contexts/translationContext/TranslationContext';
 
 import type { DefaultStreamChatGenerics } from '../../types/types';
-import { getDateString } from '../../utils/getDateString';
 
 const WAIT_FOR_SCROLL_TO_OFFSET_TIMEOUT = 150;
 const MAX_RETRIES_AFTER_SCROLL_FAILURE = 10;
@@ -156,8 +151,7 @@ type MessageListPropsWithContext<
     | 'TypingIndicator'
     | 'TypingIndicatorContainer'
   > &
-  Pick<ThreadContextValue<StreamChatGenerics>, 'loadMoreThread' | 'thread'> &
-  Pick<TranslationContextValue, 't' | 'tDateTimeParser'> & {
+  Pick<ThreadContextValue<StreamChatGenerics>, 'loadMoreThread' | 'thread'> & {
     /**
      * Besides existing (default) UX behavior of underlying FlatList of MessageList component, if you want
      * to attach some additional props to underlying FlatList, you can add it to following prop.
@@ -278,7 +272,6 @@ const MessageListWithContext = <
     setTargetedMessage,
     StickyHeader,
     targetedMessage,
-    tDateTimeParser,
     thread,
     threadList = false,
     TypingIndicator,
@@ -1025,18 +1018,6 @@ const MessageListWithContext = <
     threadList,
   ]);
 
-  const stickyHeaderDateFormat =
-    stickyHeaderDate?.getFullYear() === new Date().getFullYear() ? 'MMM D' : 'MMM D, YYYY';
-
-  const stickyHeaderDateString = useMemo(() => {
-    if (!stickyHeaderDate) return null;
-    return getDateString({
-      date: stickyHeaderDate,
-      format: stickyHeaderDateFormat,
-      tDateTimeParser,
-    });
-  }, [stickyHeaderDate, stickyHeaderDateFormat]);
-
   const dismissImagePicker = () => {
     if (!hasMoved && selectedPicker) {
       setSelectedPicker(undefined);
@@ -1092,13 +1073,6 @@ const MessageListWithContext = <
     [shouldApplyAndroidWorkaround, HeaderComponent],
   );
 
-  const StickyHeaderComponent = () => {
-    if (!stickyHeaderDateString) return null;
-    if (StickyHeader) return <StickyHeader dateString={stickyHeaderDateString} />;
-    if (messageListLengthAfterUpdate) return <DateHeader dateString={stickyHeaderDateString} />;
-    return null;
-  };
-
   // We need to omit the style related props from the additionalFlatListProps and add them directly instead of spreading
   let additionalFlatListPropsExcludingStyle:
     | Omit<NonNullable<typeof additionalFlatListProps>, 'style' | 'contentContainerStyle'>
@@ -1183,7 +1157,9 @@ const MessageListWithContext = <
       {!loading && (
         <>
           <View style={styles.stickyHeader}>
-            <StickyHeaderComponent />
+            {messageListLengthAfterUpdate && StickyHeader && (
+              <StickyHeader date={stickyHeaderDate} DateHeader={DateHeader} />
+            )}
           </View>
           {!disableTypingIndicator && TypingIndicator && (
             <TypingIndicatorContainer>
@@ -1253,7 +1229,6 @@ export const MessageList = <
     usePaginatedMessageListContext<StreamChatGenerics>();
   const { overlay } = useOverlayContext();
   const { loadMoreThread, thread } = useThreadContext<StreamChatGenerics>();
-  const { t, tDateTimeParser } = useTranslationContext();
 
   return (
     <MessageListWithContext
@@ -1295,9 +1270,7 @@ export const MessageList = <
         setSelectedPicker,
         setTargetedMessage,
         StickyHeader,
-        t,
         targetedMessage,
-        tDateTimeParser,
         thread,
         threadList,
         TypingIndicator,

package/src/components/MessageList/MessageSystem.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native';
 
 import type { MessageType } from './hooks/useMessageList';
@@ -7,14 +7,20 @@ import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 
 import type { DefaultStreamChatGenerics } from '../../types/types';
-import { getDateString } from '../../utils/getDateString';
+import { getDateString } from '../../utils/i18n/getDateString';
 
 export type MessageSystemProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   /** Current [message object](https://getstream.io/chat/docs/#message_format) */
   message: MessageType<StreamChatGenerics>;
+  /**
+   * Additional styles for the system message container.
+   */
   style?: StyleProp<ViewStyle>;
+  /*
+   * Lookup key in the language corresponding translations sheet to perform date formatting
+   */
 };
 
 /**
@@ -37,14 +43,20 @@ export const MessageSystem = <
       },
     },
   } = useTheme();
-  const { tDateTimeParser } = useTranslationContext();
+  const { t, tDateTimeParser } = useTranslationContext();
 
   const createdAt = message.created_at;
-  const formattedDate = getDateString({
-    calendar: true,
-    date: createdAt,
-    tDateTimeParser,
-  });
+
+  const formattedDate = useMemo(
+    () =>
+      getDateString({
+        date: createdAt,
+        t,
+        tDateTimeParser,
+        timestampTranslationKey: 'timestamp/MessageSystem',
+      }),
+    [createdAt, t, tDateTimeParser],
+  );
 
   return (
     <View style={[styles.container, style, container]} testID='message-system'>

package/src/components/MessageList/StickyHeader.tsx

@@ -0,0 +1,42 @@
+import React, { useMemo } from 'react';
+
+import { MessagesContextValue } from '../../contexts/messagesContext/MessagesContext';
+import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
+
+import { DefaultStreamChatGenerics } from '../../types/types';
+import { getDateString } from '../../utils/i18n/getDateString';
+
+/**
+ * Props for the StickyHeader component.
+ */
+export type StickyHeaderProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<MessagesContextValue<StreamChatGenerics>, 'DateHeader'> & {
+  /**
+   * Date to be displayed in the sticky header.
+   */
+  date?: Date;
+  /**
+   * The formatted date string to be displayed in the sticky header.
+   */
+  dateString?: string | number;
+};
+
+export const StickyHeader = ({ date, DateHeader, dateString }: StickyHeaderProps) => {
+  const { t, tDateTimeParser } = useTranslationContext();
+
+  const stickyHeaderDateString = useMemo(() => {
+    if (dateString) return dateString;
+
+    return getDateString({
+      date,
+      t,
+      tDateTimeParser,
+      timestampTranslationKey: 'timestamp/StickyHeader',
+    });
+  }, [date]);
+
+  if (!date) return null;
+
+  return <DateHeader dateString={stickyHeaderDateString} />;
+};

package/src/components/MessageList/__tests__/MessageSystem.test.js

@@ -8,14 +8,20 @@ import { TranslationProvider } from '../../../contexts/translationContext/Transl
 
 import { generateMessage, generateStaticMessage } from '../../../mock-builders/generator/message';
 import { generateStaticUser } from '../../../mock-builders/generator/user';
-import { Streami18n } from '../../../utils/Streami18n';
+import { Streami18n } from '../../../utils/i18n/Streami18n';
 import { MessageSystem } from '../MessageSystem';
 
 afterEach(cleanup);
 
+let i18nInstance;
+
 describe('MessageSystem', () => {
+  beforeAll(() => {
+    i18nInstance = new Streami18n();
+  });
+  afterEach(cleanup);
+
   it('should render the message system', async () => {
-    const i18nInstance = new Streami18n();
     const translators = await i18nInstance.getTranslators();
     const message = generateMessage();
     const { queryByTestId } = render(
@@ -32,7 +38,6 @@ describe('MessageSystem', () => {
   });
 
   it('should match the snapshot for message system', async () => {
-    const i18nInstance = new Streami18n();
     const translators = await i18nInstance.getTranslators();
     const user = generateStaticUser(0);
     const message = generateStaticMessage('Hello World', { user });

package/src/components/MessageList/__tests__/ScrollToBottomButton.test.js

@@ -4,7 +4,7 @@ import { cleanup, fireEvent, render, waitFor } from '@testing-library/react-nati
 
 import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
 import { TranslationProvider } from '../../../contexts/translationContext/TranslationContext';
-import { Streami18n } from '../../../utils/Streami18n';
+import { Streami18n } from '../../../utils/i18n/Streami18n';
 import { ScrollToBottomButton } from '../ScrollToBottomButton';
 
 afterEach(cleanup);

package/src/components/MessageList/__tests__/TypingIndicator.test.js

@@ -7,7 +7,7 @@ import { TypingProvider } from '../../../contexts/typingContext/TypingContext';
 
 import { generateStaticUser, generateUser } from '../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../mock-builders/mock';
-import { Streami18n } from '../../../utils/Streami18n';
+import { Streami18n } from '../../../utils/i18n/Streami18n';
 import { Chat } from '../../Chat/Chat';
 import { TypingIndicator } from '../TypingIndicator';
 

package/src/components/Thread/__tests__/Thread.test.js

@@ -15,7 +15,7 @@ import { generateMember } from '../../../mock-builders/generator/member';
 import { generateMessage, generateStaticMessage } from '../../../mock-builders/generator/message';
 import { generateStaticUser } from '../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../mock-builders/mock';
-import { Streami18n } from '../../../utils/Streami18n';
+import { Streami18n } from '../../../utils/i18n/Streami18n';
 import { Channel } from '../../Channel/Channel';
 import { Chat } from '../../Chat/Chat';
 import { Thread } from '../Thread';

package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap

@@ -1197,7 +1197,7 @@ exports[`Thread should match thread snapshot 1`] = `
                   ]
                 }
               >
-                May 5, 2020
+                05/05/2020
               </Text>
             </View>
           </View>

package/src/components/index.ts

@@ -108,6 +108,7 @@ export * from './Message/MessageSimple/MessageRepliesAvatars';
 export * from './Message/MessageSimple/MessageSimple';
 export * from './Message/MessageSimple/MessageStatus';
 export * from './Message/MessageSimple/MessageTextContainer';
+export * from './Message/MessageSimple/MessageTimestamp';
 export * from './Message/MessageSimple/ReactionList';
 export * from './Message/MessageSimple/utils/renderText';
 export * from './Message/utils/messageActions';

package/src/contexts/channelContext/ChannelContext.tsx

@@ -4,6 +4,7 @@ import type { Channel, ChannelState } from 'stream-chat';
 
 import type { EmptyStateProps } from '../../components/Indicators/EmptyStateIndicator';
 import type { LoadingProps } from '../../components/Indicators/LoadingIndicator';
+import { StickyHeaderProps } from '../../components/MessageList/StickyHeader';
 import type { DefaultStreamChatGenerics, UnknownType } from '../../types/types';
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 
@@ -180,7 +181,7 @@ export type ChannelContextValue<
    *
    * **Default** [DateHeader](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageList/DateHeader.tsx)
    */
-  StickyHeader?: React.ComponentType<{ dateString: string | number }>;
+  StickyHeader?: React.ComponentType<StickyHeaderProps>;
   /**
    * Id of message, around which Channel/MessageList gets loaded when opened.
    * You will see a highlighted background for targetted message, when opened.

package/src/contexts/messagesContext/MessagesContext.tsx

@@ -33,6 +33,7 @@ import type { MessageRepliesAvatarsProps } from '../../components/Message/Messag
 import type { MessageSimpleProps } from '../../components/Message/MessageSimple/MessageSimple';
 import type { MessageStatusProps } from '../../components/Message/MessageSimple/MessageStatus';
 import type { MessageTextProps } from '../../components/Message/MessageSimple/MessageTextContainer';
+import { MessageTimestampProps } from '../../components/Message/MessageSimple/MessageTimestamp';
 import type { ReactionListProps } from '../../components/Message/MessageSimple/ReactionList';
 import type { MarkdownRules } from '../../components/Message/MessageSimple/utils/renderText';
 import type { MessageActionsParams } from '../../components/Message/utils/messageActions';
@@ -217,6 +218,11 @@ export type MessagesContextValue<
    * Defaults to: [MessageSystem](https://getstream.io/chat/docs/sdk/reactnative/ui-components/message-system/)
    */
   MessageSystem: React.ComponentType<MessageSystemProps<StreamChatGenerics>>;
+  /**
+   * UI component for MessageTimestamp
+   * Defaults to: [MessageTimestamp](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/Message/MessageSimple/MessageTimestamp.tsx)
+   */
+  MessageTimestamp: React.ComponentType<MessageTimestampProps>;
   /**
    * UI component for OverlayReactionList
    */

package/src/contexts/overlayContext/OverlayContext.tsx

@@ -8,7 +8,7 @@ import type { ImageGalleryCustomComponents } from '../../components/ImageGallery
 
 import type { MessageType } from '../../components/MessageList/hooks/useMessageList';
 import type { DefaultStreamChatGenerics } from '../../types/types';
-import type { Streami18n } from '../../utils/Streami18n';
+import type { Streami18n } from '../../utils/i18n/Streami18n';
 import type { AttachmentPickerContextValue } from '../attachmentPickerContext/AttachmentPickerContext';
 import type { MessageOverlayContextValue } from '../messageOverlayContext/MessageOverlayContext';
 import type { DeepPartial } from '../themeContext/ThemeContext';

package/src/hooks/useStreami18n.ts

@@ -5,7 +5,7 @@ import Dayjs from 'dayjs';
 import { useIsMountedRef } from './useIsMountedRef';
 
 import type { TranslatorFunctions } from '../contexts/translationContext/TranslationContext';
-import { Streami18n } from '../utils/Streami18n';
+import { Streami18n } from '../utils/i18n/Streami18n';
 
 export const useStreami18n = (i18nInstance?: Streami18n) => {
   const [translators, setTranslators] = useState<TranslatorFunctions>({

package/src/i18n/en.json

@@ -74,6 +74,13 @@
   "Video": "Video",
   "You": "You",
   "You can't send messages in this channel": "You can't send messages in this channel",
+  "timestamp/ChannelPreviewStatus": "{{ timestamp | timestampFormatter(calendar: true; calendarFormats: {\"lastDay\":\"[Yesterday]\", \"lastWeek\":\"dddd\", \"nextDay\":\"[Tomorrow]\", \"nextWeek\":\"dddd [at] LT\", \"sameDay\":\"LT\", \"sameElse\":\"L\"}) }}",
+  "timestamp/ImageGalleryHeader": "{{ timestamp | timestampFormatter(calendar: true) }}",
+  "timestamp/InlineDateSeparator": "{{ timestamp |  timestampFormatter(calendar: true) }}",
+  "timestamp/MessageEditedTimestamp": "{{ timestamp |  timestampFormatter(calendar: true) }}",
+  "timestamp/MessageSystem": "{{ timestamp | timestampFormatter(calendar: true) }}",
+  "timestamp/MessageTimestamp": "{{ timestamp | timestampFormatter(format: LT) }}",
+  "timestamp/StickyHeader": "{{ timestamp | timestampFormatter(calendar: true) }}",
   "{{ firstUser }} and {{ nonSelfUserLength }} more are typing": "{{ firstUser }} and {{ nonSelfUserLength }} more are typing",
   "{{ index }} of {{ photoLength }}": "{{ index }} of {{ photoLength }}",
   "{{ replyCount }} Replies": "{{ replyCount }} Replies",

package/src/i18n/es.json

@@ -74,6 +74,13 @@
   "Video": "Video",
   "You": "Tú",
   "You can't send messages in this channel": "No puedes enviar mensajes en este canal",
+  "timestamp/ChannelPreviewStatus": "{{ timestamp | timestampFormatter(calendar: true; calendarFormats: {\"lastDay\":\"[Ayer]\", \"lastWeek\":\"dddd\", \"nextDay\":\"[Mañana]\", \"nextWeek\":\"dddd [a las] LT\", \"sameDay\":\"LT\", \"sameElse\":\"L\"}) }}",
+  "timestamp/ImageGalleryHeader": "{{ timestamp | timestampFormatter(calendar: true) }}",
+  "timestamp/InlineDateSeparator": "{{ timestamp | timestampFormatter(calendar: true) }}",
+  "timestamp/MessageEditedTimestamp": "{{ timestamp | timestampFormatter(calendar: true) }}",
+  "timestamp/MessageSystem": "{{ timestamp | timestampFormatter(calendar: true) }}",
+  "timestamp/MessageTimestamp": "{{ timestamp | timestampFormatter(format: LT) }}",
+  "timestamp/StickyHeader": "{{ timestamp | timestampFormatter(calendar: true) }}",
   "{{ firstUser }} and {{ nonSelfUserLength }} more are typing": "{{ firstUser }} y {{ nonSelfUserLength }} más están escribiendo",
   "{{ index }} of {{ photoLength }}": "{{ index }} de {{ photoLength }}",
   "{{ replyCount }} Replies": "{{ replyCount }} Respuestas",

package/src/i18n/fr.json

@@ -74,6 +74,13 @@
   "Video": "Vidéo",
   "You": "Toi",
   "You can't send messages in this channel": "You can't send messages in this channel",
+  "timestamp/ChannelPreviewStatus": "{{ timestamp | timestampFormatter(calendar: true; calendarFormats: {\"lastDay\":\"[Hier]\", \"lastWeek\":\"dddd\", \"nextDay\":\"[Demain]\", \"nextWeek\":\"dddd [à] LT\", \"sameDay\":\"LT\", \"sameElse\":\"L\"}) }}",
+  "timestamp/ImageGalleryHeader": "{{ timestamp | timestampFormatter(calendar: true) }}",
+  "timestamp/InlineDateSeparator": "{{ timestamp | timestampFormatter(calendar: true) }}",
+  "timestamp/MessageEditedTimestamp": "{{ timestamp | timestampFormatter(calendar: true) }}",
+  "timestamp/MessageSystem": "{{ timestamp | timestampFormatter(calendar: true) }}",
+  "timestamp/MessageTimestamp": "{{ timestamp | timestampFormatter(format: LT) }}",
+  "timestamp/StickyHeader": "{{ timestamp | timestampFormatter(calendar: true) }}",
   "{{ firstUser }} and {{ nonSelfUserLength }} more are typing": "{{ firstUser }} et {{ nonSelfUserLength }} autres sont en train d'écrire",
   "{{ index }} of {{ photoLength }}": "{{ index }} sur {{ photoLength }}",
   "{{ replyCount }} Replies": "{{ replyCount }} Réponses",

package/src/i18n/he.json

@@ -74,6 +74,13 @@
   "Video": "וִידֵאוֹ",
   "You": "את/ה",
   "You can't send messages in this channel": "את/ב לא יכול/ה לשלוח הודעות בשיחה זו",
+  "timestamp/ChannelPreviewStatus": "{{ timestamp | timestampFormatter(calendar: true; calendarFormats: {\"lastDay\":\"[אתמול]\",\"lastWeek\":\"dddd\",\"nextDay\":\"[מחר]\",\"nextWeek\":\"dddd [בשעה] LT\",\"sameDay\":\"LT\",\"sameElse\":\"L\"}) }}",
+  "timestamp/ImageGalleryHeader": "{{ timestamp | timestampFormatter(calendar: true) }}",
+  "timestamp/InlineDateSeparator": "{{ timestamp | timestampFormatter(calendar: true) }}",
+  "timestamp/MessageEditedTimestamp": "{{ timestamp | timestampFormatter(calendar: true) }}",
+  "timestamp/MessageSystem": "{{ timestamp | timestampFormatter(calendar: true) }}",
+  "timestamp/MessageTimestamp": "{{ timestamp | timestampFormatter(format: LT) }}",
+  "timestamp/StickyHeader": "{{ timestamp | timestampFormatter(calendar: true) }}",
   "{{ firstUser }} and {{ nonSelfUserLength }} more are typing": "{{ firstUser }} ו-{{ nonSelfUserLength }} משתמש/ים אחר/ים מקלידים",
   "{{ index }} of {{ photoLength }}": "{{ index }} מתוך {{ photoLength }}",
   "{{ replyCount }} Replies": "{{ replyCount }} תגובות",

package/src/i18n/hi.json

@@ -74,6 +74,13 @@
   "Video": "वीडियो",
   "You": "आप",
   "You can't send messages in this channel": "आप इस चैनल में संदेश नहीं भेज सकते",
+  "timestamp/ChannelPreviewStatus": "{{ timestamp | timestampFormatter(calendar: true; calendarFormats: {\"lastDay\":\"[कल]\",\"lastWeek\":\"dddd\",\"nextDay\":\"[कल]\",\"nextWeek\":\"dddd [को] LT\",\"sameDay\":\"LT\",\"sameElse\":\"L\"}) }}",
+  "timestamp/ImageGalleryHeader": "{{ timestamp | timestampFormatter(calendar: true) }}",
+  "timestamp/InlineDateSeparator": "{{ timestamp | timestampFormatter(calendar: true) }}",
+  "timestamp/MessageEditedTimestamp": "{{ timestamp | timestampFormatter(calendar: true) }}",
+  "timestamp/MessageSystem": "{{ timestamp | timestampFormatter(calendar: true) }}",
+  "timestamp/MessageTimestamp": "{{ timestamp | timestampFormatter(format: LT) }}",
+  "timestamp/StickyHeader": "{{ timestamp | timestampFormatter(calendar: true) }}",
   "{{ firstUser }} and {{ nonSelfUserLength }} more are typing": "{{ firstUser }} और {{ nonSelfUserLength }} अधिक टाइप कर रहे हैं",
   "{{ index }} of {{ photoLength }}": "{{ index }} / {{ photoLength }}",
   "{{ replyCount }} Replies": "{{ replyCount }} रिप्लाई",

package/src/i18n/it.json

@@ -74,6 +74,13 @@
   "Video": "Video",
   "You": "Tu",
   "You can't send messages in this channel": "Non puoi inviare messaggi in questo canale",
+  "timestamp/ChannelPreviewStatus": "{{ timestamp | timestampFormatter(calendar: true; calendarFormats: {\"lastDay\":\"[Ieri]\",\"lastWeek\":\"dddd\",\"nextDay\":\"[Domani]\",\"nextWeek\":\"dddd [alle] LT\",\"sameDay\":\"LT\",\"sameElse\":\"L\"}) }}",
+  "timestamp/ImageGalleryHeader": "{{ timestamp | timestampFormatter(calendar: true) }}",
+  "timestamp/InlineDateSeparator": "{{ timestamp | timestampFormatter(calendar: true) }}",
+  "timestamp/MessageEditedTimestamp": "{{ timestamp | timestampFormatter(calendar: true) }}",
+  "timestamp/MessageSystem": "{{ timestamp | timestampFormatter(calendar: true) }}",
+  "timestamp/MessageTimestamp": "{{ timestamp | timestampFormatter(format: LT) }}",
+  "timestamp/StickyHeader": "{{ timestamp | timestampFormatter(calendar: true) }}",
   "{{ firstUser }} and {{ nonSelfUserLength }} more are typing": "{{ firstUser }} e altri {{ nonSelfUserLength }} stanno scrivendo",
   "{{ index }} of {{ photoLength }}": "{{ index }} di {{ photoLength }}",
   "{{ replyCount }} Replies": "{{ replyCount }} Risposte",

package/src/i18n/ja.json

@@ -74,6 +74,13 @@
   "Video": "ビデオ",
   "You": "あなた",
   "You can't send messages in this channel": "このチャンネルではメッセージを送信できません",
+  "timestamp/ChannelPreviewStatus": "{{ timestamp | timestampFormatter(calendar: true; calendarFormats: {\"lastDay\":\"[昨日]\",\"lastWeek\":\"dddd\",\"nextDay\":\"[明日]\",\"nextWeek\":\"dddd [の] LT\",\"sameDay\":\"LT\",\"sameElse\":\"L\"}) }}",
+  "timestamp/ImageGalleryHeader": "{{ timestamp | timestampFormatter(calendar: true) }}",
+  "timestamp/InlineDateSeparator": "{{ timestamp | timestampFormatter(calendar: true) }}",
+  "timestamp/MessageEditedTimestamp": "{{ timestamp | timestampFormatter(calendar: true) }}",
+  "timestamp/MessageSystem": "{{ timestamp | timestampFormatter(calendar: true) }}",
+  "timestamp/MessageTimestamp": "{{ timestamp | timestampFormatter(format: LT) }}",
+  "timestamp/StickyHeader": "{{ timestamp | timestampFormatter(calendar: true) }}",
   "{{ firstUser }} and {{ nonSelfUserLength }} more are typing": "{{ firstUser }}と{{ nonSelfUserLength }}人がタイピングしています",
   "{{ index }} of {{ photoLength }}": "{{ index }} / {{ photoLength }}",
   "{{ replyCount }} Replies": "{{ replyCount }}件の返信",

package/src/i18n/ko.json

@@ -74,6 +74,13 @@
   "Video": "동영상",
   "You": "당신",
   "You can't send messages in this channel": "이 채널에서는 메세지를 전송할 수 없습니다",
+  "timestamp/ChannelPreviewStatus": "{{ timestamp | timestampFormatter(calendar: true; calendarFormats: {\"lastDay\":\"[어제]\",\"lastWeek\":\"dddd\",\"nextDay\":\"[내일]\",\"nextWeek\":\"dddd [LT에]\",\"sameDay\":\"LT\",\"sameElse\":\"L\"}) }}",
+  "timestamp/ImageGalleryHeader": "{{ timestamp | timestampFormatter(calendar: true) }}",
+  "timestamp/InlineDateSeparator": "{{ timestamp | timestampFormatter(calendar: true) }}",
+  "timestamp/MessageEditedTimestamp": "{{ timestamp | timestampFormatter(calendar: true) }}",
+  "timestamp/MessageSystem": "{{ timestamp | timestampFormatter(calendar: true) }}",
+  "timestamp/MessageTimestamp": "{{ timestamp | timestampFormatter(format: LT) }}",
+  "timestamp/StickyHeader": "{{ timestamp | timestampFormatter(calendar: true) }}",
   "{{ firstUser }} and {{ nonSelfUserLength }} more are typing": "{{ firstUser }} 외 {{ nonSelfUserLength }}명이 입력 중입니다",
   "{{ index }} of {{ photoLength }}": "{{ index }} / {{ photoLength }}",
   "{{ replyCount }} Replies": "{{ replyCount }} 답글",

package/src/i18n/nl.json

@@ -74,6 +74,13 @@
   "Video": "Video",
   "You": "U",
   "You can't send messages in this channel": "Je kan geen berichten sturen in dit kanaal",
+  "timestamp/ChannelPreviewStatus": "{{ timestamp | timestampFormatter(calendar: true; calendarFormats: {\"lastDay\":\"[Gisteren]\",\"lastWeek\":\"dddd\",\"nextDay\":\"[Morgen]\",\"nextWeek\":\"dddd [om] LT\",\"sameDay\":\"LT\",\"sameElse\":\"L\"}) }}",
+  "timestamp/ImageGalleryHeader": "{{ timestamp | timestampFormatter(calendar: true) }}",
+  "timestamp/InlineDateSeparator": "{{ timestamp | timestampFormatter(calendar: true) }}",
+  "timestamp/MessageEditedTimestamp": "{{ timestamp | timestampFormatter(calendar: true) }}",
+  "timestamp/MessageSystem": "{{ timestamp | timestampFormatter(calendar: true) }}",
+  "timestamp/MessageTimestamp": "{{ timestamp | timestampFormatter(format: LT) }}",
+  "timestamp/StickyHeader": "{{ timestamp | timestampFormatter(calendar: true) }}",
   "{{ firstUser }} and {{ nonSelfUserLength }} more are typing": "{{ firstUser }} en {{ nonSelfUserLength }} anderen zijn aan het typen",
   "{{ index }} of {{ photoLength }}": "{{ index }} van {{ photoLength }}",
   "{{ replyCount }} Replies": "{{ replyCount }} Antwoorden",