@sendbird/uikit-react-native 3.9.6 → 3.10.1

package/src/domain/groupChannel/component/GroupChannelMessageList.tsx

@@ -1,16 +1,19 @@
-import React, { useContext, useEffect } from 'react';
+import type { ViewToken } from '@react-native/virtualized-lists';
+import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
 
 import { useToast } from '@sendbird/uikit-react-native-foundation';
 import { useGroupChannelHandler } from '@sendbird/uikit-tools';
 import {
   SendbirdMessage,
   SendbirdSendableMessage,
+  confirmAndMarkAsRead,
   isDifferentChannel,
   useFreshCallback,
   useIsFirstMount,
 } from '@sendbird/uikit-utils';
 
 import ChannelMessageList from '../../../components/ChannelMessageList';
+import { UnreadMessagesFloatingProps } from '../../../components/UnreadMessagesFloating';
 import { MESSAGE_FOCUS_ANIMATION_DELAY, MESSAGE_SEARCH_SAFE_SCROLL_DELAY } from '../../../constants';
 import { GroupChannelFragmentOptionsPubSubContextPayload } from '../../../contexts/SendbirdChatCtx';
 import { useLocalization, useSendbirdChat } from '../../../hooks/useContext';
@@ -22,13 +25,42 @@ const GroupChannelMessageList = (props: GroupChannelProps['MessageList']) => {
   const { STRINGS } = useLocalization();
   const { sdk, sbOptions, groupChannelFragmentOptions } = useSendbirdChat();
   const { setMessageToEdit, setMessageToReply } = useContext(GroupChannelContexts.Fragment);
-  const { subscribe } = useContext(GroupChannelContexts.PubSub);
+  const groupChannelPubSub = useContext(GroupChannelContexts.PubSub);
   const { flatListRef, lazyScrollToBottom, lazyScrollToIndex, onPressReplyMessageInThread } = useContext(
     GroupChannelContexts.MessageList,
   );
 
   const isFirstMount = useIsFirstMount();
 
+  const hasSeenNewLineRef = useRef(false);
+  const isNewLineInViewportRef = useRef(false);
+  const isNewLineExistInChannelRef = useRef(false);
+  const scrolledAwayFromBottomRef = useRef(false);
+  const [isVisibleUnreadMessageFloating, setIsVisibleUnreadMessageFloating] = useState(false);
+  const viewableMessages = useRef<SendbirdMessage[]>();
+  const hasUserMarkedAsUnreadRef = useRef(false);
+  const [unreadFirstMessage, setUnreadFirstMessage] = useState<SendbirdMessage | undefined>(undefined);
+
+  const updateHasSeenNewLine = useCallback(
+    (hasSeenNewLine: boolean) => {
+      if (hasSeenNewLineRef.current !== hasSeenNewLine) {
+        hasSeenNewLineRef.current = hasSeenNewLine;
+        props.onNewLineSeenChange?.(hasSeenNewLine);
+      }
+    },
+    [props.onNewLineSeenChange],
+  );
+
+  const updateHasUserMarkedAsUnread = useCallback(
+    (hasUserMarkedAsUnread: boolean) => {
+      if (hasUserMarkedAsUnreadRef.current !== hasUserMarkedAsUnread) {
+        hasUserMarkedAsUnreadRef.current = hasUserMarkedAsUnread;
+        props.onUserMarkedAsUnreadChange?.(hasUserMarkedAsUnread);
+      }
+    },
+    [props.onUserMarkedAsUnreadChange],
+  );
+
   const scrollToMessageWithCreatedAt = useFreshCallback(
     (createdAt: number, focusAnimated: boolean, timeout: number): boolean => {
       const foundMessageIndex = props.messages.findIndex((it) => it.createdAt === createdAt);
@@ -53,19 +85,164 @@ const GroupChannelMessageList = (props: GroupChannelProps['MessageList']) => {
     },
   );
 
+  const onScrolledAwayFromBottom = useFreshCallback((value: boolean) => {
+    scrolledAwayFromBottomRef.current = value;
+    props.onScrolledAwayFromBottom(value);
+  });
+
   const scrollToBottom = useFreshCallback(async (animated = false) => {
     if (props.hasNext()) {
       props.onUpdateSearchItem(undefined);
-      props.onScrolledAwayFromBottom(false);
+      onScrolledAwayFromBottom(false);
 
       await props.onResetMessageList().catch((_) => {});
-      props.onScrolledAwayFromBottom(false);
+      onScrolledAwayFromBottom(false);
       lazyScrollToBottom({ animated });
     } else {
       lazyScrollToBottom({ animated });
     }
   });
 
+  const onPressUnreadMessagesFloatingCloseButton = useCallback(() => {
+    updateHasSeenNewLine(true);
+    updateHasUserMarkedAsUnread(false);
+    props.resetNewMessages?.();
+    confirmAndMarkAsRead([props.channel]);
+  }, [updateHasSeenNewLine, updateHasUserMarkedAsUnread, props.channel.url, props.resetNewMessages]);
+
+  const getPrevNonSilentMessage = useCallback(
+    (messages: SendbirdMessage[], prevMessageIndex: number): SendbirdMessage | null => {
+      if (messages.length <= prevMessageIndex) {
+        return null;
+      }
+
+      const prevMessage = messages[prevMessageIndex];
+      if (prevMessage) {
+        if (prevMessage.silent) {
+          return getPrevNonSilentMessage(messages, prevMessageIndex + 1);
+        } else {
+          return prevMessage;
+        }
+      }
+      return null;
+    },
+    [],
+  );
+
+  const findFirstUnreadMessage = useFreshCallback((isNewLineExistInChannel: boolean) => {
+    if (!sbOptions.uikit.groupChannel.channel.enableMarkAsUnread || !isNewLineExistInChannel) {
+      return;
+    }
+
+    return props.messages.find((msg, index) => {
+      if (msg.silent) {
+        return false;
+      }
+
+      const isMarkedAsUnreadMessage = props.channel.myLastRead === msg.createdAt - 1;
+      if (isMarkedAsUnreadMessage) {
+        return true;
+      }
+
+      const prevNonSilentMessage = getPrevNonSilentMessage(props.messages, index + 1);
+      const hasNoPreviousAndNoPrevMessage = !props.hasPrevious?.() && prevNonSilentMessage == null;
+      const prevMessageIsRead =
+        prevNonSilentMessage != null && prevNonSilentMessage.createdAt <= props.channel.myLastRead;
+      const isMessageUnread = props.channel.myLastRead < msg.createdAt;
+      return (hasNoPreviousAndNoPrevMessage || prevMessageIsRead) && isMessageUnread;
+    });
+  });
+
+  useEffect(() => {
+    if (!unreadFirstMessage) {
+      const foundUnreadFirstMessage = findFirstUnreadMessage(props.isNewLineExistInChannel ?? false);
+      if (foundUnreadFirstMessage) {
+        processNewLineVisibility(foundUnreadFirstMessage);
+        setUnreadFirstMessage(foundUnreadFirstMessage);
+      }
+    }
+  }, [props.messages, props.channel.myLastRead, sbOptions.uikit.groupChannel.channel.enableMarkAsUnread]);
+
+  const processNewLineVisibility = useFreshCallback((unreadFirstMsg: SendbirdMessage | undefined) => {
+    const isNewLineInViewport = !!viewableMessages.current?.some(
+      (message) => message.messageId === unreadFirstMsg?.messageId,
+    );
+
+    if (isNewLineInViewportRef.current !== isNewLineInViewport) {
+      isNewLineInViewportRef.current = isNewLineInViewport;
+      updateUnreadMessagesFloatingProps();
+      if (!isNewLineInViewport || hasSeenNewLineRef.current) {
+        return;
+      }
+
+      updateHasSeenNewLine(true);
+      if (hasUserMarkedAsUnreadRef.current) {
+        return;
+      }
+
+      if (0 < props.newMessages.length) {
+        props.channel.markAsUnread(props.newMessages[0]);
+      } else {
+        props.channel.markAsRead();
+      }
+    }
+  });
+
+  const onViewableItemsChanged = useFreshCallback(
+    async (info: { viewableItems: Array<ViewToken<SendbirdMessage>>; changed: Array<ViewToken<SendbirdMessage>> }) => {
+      if (!sbOptions.uikit.groupChannel.channel.enableMarkAsUnread) {
+        return;
+      }
+
+      viewableMessages.current = info.viewableItems.filter((token) => token.item).map((token) => token.item);
+      processNewLineVisibility(unreadFirstMessage);
+    },
+  );
+
+  const onPressMarkAsUnreadMessage = useCallback(
+    async (message: SendbirdMessage) => {
+      if (sbOptions.uikit.groupChannel.channel.enableMarkAsUnread && message) {
+        await props.channel.markAsUnread(message);
+        updateHasUserMarkedAsUnread(true);
+      }
+    },
+    [sbOptions.uikit.groupChannel.channel.enableMarkAsUnread, updateHasUserMarkedAsUnread],
+  );
+
+  useEffect(() => {
+    isNewLineExistInChannelRef.current = !!props.isNewLineExistInChannel && !!viewableMessages.current;
+  }, [props.isNewLineExistInChannel, viewableMessages.current]);
+
+  const unreadMessagesFloatingPropsRef = useRef<UnreadMessagesFloatingProps>();
+  const updateUnreadMessagesFloatingProps = useFreshCallback(() => {
+    const canAutoMarkAsRead =
+      !scrolledAwayFromBottomRef.current &&
+      !hasUserMarkedAsUnreadRef.current &&
+      (hasSeenNewLineRef.current || !isNewLineExistInChannelRef.current);
+
+    unreadMessagesFloatingPropsRef.current = {
+      visible:
+        sbOptions.uikit.groupChannel.channel.enableMarkAsUnread &&
+        !canAutoMarkAsRead &&
+        isNewLineExistInChannelRef.current &&
+        0 < props.channel.unreadMessageCount &&
+        !isNewLineInViewportRef.current,
+      onPressClose: onPressUnreadMessagesFloatingCloseButton,
+      unreadMessageCount: props.channel.unreadMessageCount,
+    };
+    if (isVisibleUnreadMessageFloating !== unreadMessagesFloatingPropsRef.current.visible) {
+      setIsVisibleUnreadMessageFloating(unreadMessagesFloatingPropsRef.current.visible);
+    }
+  });
+
+  useEffect(() => {
+    updateUnreadMessagesFloatingProps();
+  }, [
+    isNewLineExistInChannelRef.current,
+    props.channel.unreadMessageCount,
+    sbOptions.uikit.groupChannel.channel.enableMarkAsUnread,
+  ]);
+
   useGroupChannelHandler(sdk, {
     onReactionUpdated(channel, event) {
       if (isDifferentChannel(channel, props.channel)) return;
@@ -76,10 +253,13 @@ const GroupChannelMessageList = (props: GroupChannelProps['MessageList']) => {
         lazyScrollToBottom({ animated: true, timeout: 250 });
       }
     },
+    onChannelChanged(channel) {
+      if (isDifferentChannel(channel, props.channel)) return;
+    },
   });
 
   useEffect(() => {
-    return subscribe(({ type, data }) => {
+    return groupChannelPubSub.subscribe(({ type, data }) => {
       switch (type) {
         case 'TYPING_BUBBLE_RENDERED':
         case 'MESSAGES_RECEIVED': {
@@ -109,6 +289,20 @@ const GroupChannelMessageList = (props: GroupChannelProps['MessageList']) => {
           scrollToBottom(false);
           break;
         }
+        case 'ON_MARKED_AS_READ_BY_CURRENT_USER': {
+          updateUnreadMessagesFloatingProps();
+          break;
+        }
+        case 'ON_MARKED_AS_UNREAD_BY_CURRENT_USER': {
+          isNewLineExistInChannelRef.current = true;
+          const foundFirstUnreadMessage = findFirstUnreadMessage(true);
+          processNewLineVisibility(foundFirstUnreadMessage);
+          setUnreadFirstMessage(foundFirstUnreadMessage);
+          if (!props.scrolledAwayFromBottom) {
+            scrollToBottom(true);
+          }
+          break;
+        }
       }
     });
   }, [props.scrolledAwayFromBottom]);
@@ -156,12 +350,17 @@ const GroupChannelMessageList = (props: GroupChannelProps['MessageList']) => {
     <ChannelMessageList
       {...props}
       ref={flatListRef}
+      onScrolledAwayFromBottom={onScrolledAwayFromBottom}
       onReplyMessage={setMessageToReply}
       onReplyInThreadMessage={setMessageToReply}
       onEditMessage={setMessageToEdit}
+      onViewableItemsChanged={onViewableItemsChanged}
       onPressParentMessage={onPressParentMessage}
       onPressNewMessagesButton={scrollToBottom}
       onPressScrollToBottomButton={scrollToBottom}
+      onPressMarkAsUnreadMessage={onPressMarkAsUnreadMessage}
+      unreadFirstMessage={unreadFirstMessage}
+      unreadMessagesFloatingProps={unreadMessagesFloatingPropsRef.current}
     />
   );
 };

package/src/domain/groupChannel/types.ts

@@ -41,6 +41,7 @@ export interface GroupChannelProps {
     renderMessage?: GroupChannelProps['MessageList']['renderMessage'];
     renderNewMessagesButton?: GroupChannelProps['MessageList']['renderNewMessagesButton'];
     renderScrollToBottomButton?: GroupChannelProps['MessageList']['renderScrollToBottomButton'];
+    renderUnreadMessagesFloating?: GroupChannelProps['MessageList']['renderUnreadMessagesFloating'];
 
     enableTypingIndicator?: GroupChannelProps['Provider']['enableTypingIndicator'];
     enableMessageGrouping?: GroupChannelProps['MessageList']['enableMessageGrouping'];
@@ -85,6 +86,7 @@ export interface GroupChannelProps {
     | 'renderMessage'
     | 'renderNewMessagesButton'
     | 'renderScrollToBottomButton'
+    | 'renderUnreadMessagesFloating'
     | 'flatListComponent'
     | 'flatListProps'
     | 'hasNext'
@@ -95,6 +97,11 @@ export interface GroupChannelProps {
 
     // Changing the search item will trigger the focus animation on messages.
     onUpdateSearchItem: (searchItem?: GroupChannelProps['MessageList']['searchItem']) => void;
+    hasPrevious?: () => boolean;
+    resetNewMessages?: () => void;
+    isNewLineExistInChannel?: boolean;
+    onNewLineSeenChange?: (hasSeenNewLine: boolean) => void;
+    onUserMarkedAsUnreadChange?: (hasUserMarkedAsUnread: boolean) => void;
   };
   Input: PickPartial<
     ChannelInputProps,
@@ -208,4 +215,12 @@ export type GroupChannelPubSubContextPayload =
   | {
       type: 'TYPING_BUBBLE_RENDERED';
       data?: undefined;
+    }
+  | {
+      type: 'ON_MARKED_AS_READ_BY_CURRENT_USER';
+      data?: undefined;
+    }
+  | {
+      type: 'ON_MARKED_AS_UNREAD_BY_CURRENT_USER';
+      data?: undefined;
     };

package/src/fragments/createGroupChannelFragment.tsx

@@ -1,6 +1,11 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
-import { MessageCollection, MessageFilter } from '@sendbird/chat/groupChannel';
+import {
+  type GroupChannel,
+  GroupChannelEventSource,
+  MessageCollection,
+  MessageFilter,
+} from '@sendbird/chat/groupChannel';
 import { ReplyType } from '@sendbird/chat/message';
 import { Box, useToast } from '@sendbird/uikit-react-native-foundation';
 import { useGroupChannelMessages } from '@sendbird/uikit-tools';
@@ -27,6 +32,7 @@ import GroupChannelMessageRenderer, {
 import NewMessagesButton from '../components/NewMessagesButton';
 import ScrollToBottomButton from '../components/ScrollToBottomButton';
 import StatusComposition from '../components/StatusComposition';
+import UnreadMessagesFloating from '../components/UnreadMessagesFloating';
 import createGroupChannelModule from '../domain/groupChannel/module/createGroupChannelModule';
 import type {
   GroupChannelFragment,
@@ -43,6 +49,7 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
 
   return ({
     searchItem,
+    renderUnreadMessagesFloating = (props) => <UnreadMessagesFloating {...props} />,
     renderNewMessagesButton = (props) => <NewMessagesButton {...props} />,
     renderScrollToBottomButton = (props) => <ScrollToBottomButton {...props} />,
     renderMessage,
@@ -85,6 +92,36 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
       }
     });
 
+    const [isNewLineExistInChannel, setIsNewLineExistInChannel] = useState(false);
+    const hasSeenNewLineRef = useRef(false);
+    const hasUserMarkedAsUnreadRef = useRef(false);
+
+    useEffect(() => {
+      setIsNewLineExistInChannel(channel.myLastRead < (channel.lastMessage?.createdAt ?? Number.MIN_SAFE_INTEGER));
+    }, [channel.url]);
+
+    const onNewLineSeenChange = useFreshCallback((hasSeenNewLine: boolean) => {
+      hasSeenNewLineRef.current = hasSeenNewLine;
+    });
+
+    const onUserMarkedAsUnreadChange = useFreshCallback((hasUserMarkedAsUnread: boolean) => {
+      hasUserMarkedAsUnreadRef.current = hasUserMarkedAsUnread;
+    });
+
+    const markAsRead = useFreshCallback((channels: GroupChannel[]) => {
+      if (sbOptions.uikit.groupChannel.channel.enableMarkAsUnread) {
+        if (
+          !scrolledAwayFromBottom &&
+          !hasUserMarkedAsUnreadRef.current &&
+          (hasSeenNewLineRef.current || !isNewLineExistInChannel)
+        ) {
+          confirmAndMarkAsRead(channels, true);
+        }
+      } else {
+        confirmAndMarkAsRead(channels);
+      }
+    });
+
     const {
       loading,
       messages,
@@ -93,6 +130,7 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
       loadNext,
       loadPrevious,
       hasNext,
+      hasPrevious,
       sendFileMessage,
       sendUserMessage,
       updateFileMessage,
@@ -108,11 +146,23 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
       onMessagesUpdated(messages) {
         groupChannelPubSub.publish({ type: 'MESSAGES_UPDATED', data: { messages } });
       },
+      onChannelUpdated(_, ctx) {
+        if (ctx?.source === GroupChannelEventSource.EVENT_CHANNEL_READ) {
+          if (ctx.userIds.includes(currentUser?.userId ?? '')) {
+            groupChannelPubSub.publish({ type: 'ON_MARKED_AS_READ_BY_CURRENT_USER' });
+          }
+        } else if (ctx?.source === GroupChannelEventSource.EVENT_CHANNEL_UNREAD) {
+          if (ctx.userIds.includes(currentUser?.userId ?? '')) {
+            setIsNewLineExistInChannel(true);
+            groupChannelPubSub.publish({ type: 'ON_MARKED_AS_UNREAD_BY_CURRENT_USER' });
+          }
+        }
+      },
       onChannelDeleted,
       onCurrentUserBanned: onChannelDeleted,
       collectionCreator: getCollectionCreator(channel, messageListQueryParams, collectionCreator),
       sortComparator,
-      markAsRead: confirmAndMarkAsRead,
+      markAsRead: markAsRead,
       replyType,
       startingPoint: internalSearchItem?.startingPoint,
     });
@@ -227,7 +277,14 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
       },
     );
     const onScrolledAwayFromBottom = useFreshCallback((value: boolean) => {
-      if (!value) resetNewMessages();
+      if (!value) {
+        resetNewMessages();
+        if (sbOptions.uikit.groupChannel.channel.enableMarkAsUnread) {
+          if (!hasUserMarkedAsUnreadRef.current && (hasSeenNewLineRef.current || !isNewLineExistInChannel)) {
+            confirmAndMarkAsRead([channel]);
+          }
+        }
+      }
       setScrolledAwayFromBottom(value);
     });
 
@@ -261,15 +318,21 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
             onTopReached={loadPrevious}
             onBottomReached={loadNext}
             hasNext={hasNext}
+            hasPrevious={hasPrevious}
+            resetNewMessages={resetNewMessages}
             scrolledAwayFromBottom={scrolledAwayFromBottom}
             onScrolledAwayFromBottom={onScrolledAwayFromBottom}
             renderNewMessagesButton={renderNewMessagesButton}
             renderScrollToBottomButton={renderScrollToBottomButton}
+            renderUnreadMessagesFloating={renderUnreadMessagesFloating}
             onResendFailedMessage={resendMessage}
             onDeleteMessage={deleteMessage}
             onPressMediaMessage={_onPressMediaMessage}
             flatListComponent={flatListComponent}
             flatListProps={memoizedFlatListProps}
+            isNewLineExistInChannel={isNewLineExistInChannel}
+            onNewLineSeenChange={onNewLineSeenChange}
+            onUserMarkedAsUnreadChange={onUserMarkedAsUnreadChange}
           />
           <GroupChannelModule.Input
             SuggestedMentionList={GroupChannelModule.SuggestedMentionList}

package/src/localization/StringSet.type.ts

@@ -117,6 +117,8 @@ export interface StringSet {
     /** GroupChannel > List */
     LIST_DATE_SEPARATOR: (date: Date, locale?: Locale) => string;
     LIST_BUTTON_NEW_MSG: (newMessages: SendbirdMessage[]) => string;
+    LIST_FLOATING_UNREAD_MSG: (unreadMessageCount: number) => string;
+    LIST_NEW_LINE: string;
 
     /** GroupChannel > Message bubble */
     MESSAGE_BUBBLE_TIME: (message: SendbirdMessage, locale?: Locale) => string;
@@ -312,6 +314,7 @@ export interface StringSet {
     CHANNEL_MESSAGE_DELETE: string;
     CHANNEL_MESSAGE_REPLY: string;
     CHANNEL_MESSAGE_THREAD: string;
+    CHANNEL_MESSAGE_MARK_AS_UNREAD: string;
     /** Channel > Message > Delete confirm **/
     CHANNEL_MESSAGE_DELETE_CONFIRM_TITLE: string;
     CHANNEL_MESSAGE_DELETE_CONFIRM_OK: string;

package/src/localization/createBaseStringSet.ts

@@ -117,8 +117,16 @@ export const createBaseStringSet = ({ dateLocale, overrides }: StringSetCreateOp
     GROUP_CHANNEL: {
       HEADER_TITLE: (uid, channel) => getGroupChannelTitle(uid, channel, USER_NO_NAME, CHANNEL_NO_MEMBERS),
       LIST_DATE_SEPARATOR: (date, locale) => getDateSeparatorFormat(date, locale ?? dateLocale),
-      LIST_BUTTON_NEW_MSG: (newMessages) => `${newMessages.length} new messages`,
-
+      LIST_BUTTON_NEW_MSG: (newMessages) => {
+        const count = newMessages.length;
+        const displayCount = count >= 100 ? '99+' : count;
+        return count === 1 ? `${displayCount} new message` : `${displayCount} new messages`;
+      },
+      LIST_FLOATING_UNREAD_MSG: (unreadMessageCount) => {
+        const displayCount = unreadMessageCount >= 100 ? '99+' : unreadMessageCount;
+        return unreadMessageCount === 1 ? `${displayCount} unread message` : `${displayCount} unread messages`;
+      },
+      LIST_NEW_LINE: 'New messages',
       MESSAGE_BUBBLE_TIME: (message, locale) => getMessageTimeFormat(new Date(message.createdAt), locale ?? dateLocale),
       MESSAGE_BUBBLE_FILE_TITLE: (message) => message.name,
       MESSAGE_BUBBLE_EDITED_POSTFIX: ' (edited)',
@@ -132,8 +140,11 @@ export const createBaseStringSet = ({ dateLocale, overrides }: StringSetCreateOp
       HEADER_TITLE: 'Thread',
       HEADER_SUBTITLE: (uid, channel) => getGroupChannelTitle(uid, channel, USER_NO_NAME, CHANNEL_NO_MEMBERS),
       LIST_DATE_SEPARATOR: (date, locale) => getDateSeparatorFormat(date, locale ?? dateLocale),
-      LIST_BUTTON_NEW_MSG: (newMessages) => `${newMessages.length} new messages`,
-
+      LIST_BUTTON_NEW_MSG: (newMessages) => {
+        const count = newMessages.length;
+        const displayCount = count >= 100 ? '99+' : count;
+        return count === 1 ? `${displayCount} new message` : `${displayCount} new messages`;
+      },
       MESSAGE_BUBBLE_TIME: (message, locale) => getMessageTimeFormat(new Date(message.createdAt), locale ?? dateLocale),
       MESSAGE_BUBBLE_FILE_TITLE: (message) => message.name,
       MESSAGE_BUBBLE_EDITED_POSTFIX: ' (edited)',
@@ -303,6 +314,7 @@ export const createBaseStringSet = ({ dateLocale, overrides }: StringSetCreateOp
       CHANNEL_MESSAGE_DELETE: 'Delete',
       CHANNEL_MESSAGE_REPLY: 'Reply',
       CHANNEL_MESSAGE_THREAD: 'Reply in thread',
+      CHANNEL_MESSAGE_MARK_AS_UNREAD: 'Mark as unread',
       CHANNEL_MESSAGE_DELETE_CONFIRM_TITLE: 'Delete message?',
       CHANNEL_MESSAGE_DELETE_CONFIRM_OK: 'Delete',
       CHANNEL_MESSAGE_DELETE_CONFIRM_CANCEL: 'Cancel',

package/src/version.ts

@@ -1,2 +1,2 @@
-const VERSION = '3.9.6';
+const VERSION = '3.10.1';
 export default VERSION;