feat: add MarkAsUnread feature to GroupChannel

Author: OnestarLee

docs-validation/package.json

@@ -15,7 +15,7 @@
     "@react-native-firebase/messaging": "^14.7.0",
     "@react-navigation/native": "^6.1.17",
     "@react-navigation/native-stack": "^6.10.0",
-    "@sendbird/chat": "^4.16.0",
+    "@sendbird/chat": "^4.19.2",
     "date-fns": "^4.1.0",
     "react": "18.2.0",
     "react-native": "0.74.3",

package.json

@@ -98,7 +98,7 @@
     ]
   },
   "resolutions": {
-    "@sendbird/chat": "4.16.5",
+    "@sendbird/chat": "4.19.2",
     "@types/react": "^18"
   }
 }

packages/uikit-chat-hooks/package.json

@@ -55,7 +55,7 @@
     "typescript": "5.2.2"
   },
   "peerDependencies": {
-    "@sendbird/chat": "^4.16.0",
+    "@sendbird/chat": "^4.19.2",
     "react": ">=16.13.1"
   },
   "react-native-builder-bob": {

packages/uikit-react-native-foundation/src/assets/icon/icon-mark-as-unread.png

@@ -35,6 +35,7 @@ const IconAssets = {
   'gif': require('./icon-gif.png'),
   'info': require('./icon-info.png'),
   'leave': require('./icon-leave.png'),
+  'mark-as-unread': require('./icon-mark-as-unread.png'),
   'members': require('./icon-members.png'),
   'message': require('./icon-message.png'),
   'moderation': require('./icon-moderation.png'),

packages/uikit-react-native-foundation/src/assets/icon/[email protected]

@@ -62,7 +62,7 @@
     "@openspacelabs/react-native-zoomable-view": "^2.1.5",
     "@sendbird/uikit-chat-hooks": "3.9.5",
     "@sendbird/uikit-react-native-foundation": "3.9.5",
-    "@sendbird/uikit-tools": "0.0.7",
+    "@sendbird/uikit-tools": "0.0.10",
     "@sendbird/uikit-utils": "3.9.5"
   },
   "devDependencies": {
@@ -111,7 +111,8 @@
     "@react-native-community/netinfo": ">=9.3.0",
     "@react-native-documents/picker": ">=10.0.0",
     "@react-native-firebase/messaging": ">=14.4.0",
-    "@sendbird/chat": "^4.16.0",
+    "@sendbird/chat": "^4.19.2",
+    "@sendbird/uikit-tools": ">=0.0.10",
     "@sendbird/react-native-scrollview-enhancer": "*",
     "date-fns": ">=2.28.0",
     "expo-av": ">=12.0.4",

packages/uikit-react-native-foundation/src/assets/icon/[email protected]

@@ -40,6 +40,7 @@ import {
 import SBUUtils from '../../libs/SBUUtils';
 import ChatFlatList from '../ChatFlatList';
 import { ReactionAddons } from '../ReactionAddons';
+import { UnreadMessagesFloatingProps } from '../UnreadMessagesFloating';
 
 type PressActions = { onPress?: () => void; onLongPress?: () => void; bottomSheetItem?: BottomSheetItem };
 type HandleableMessage = SendbirdUserMessage | SendbirdFileMessage;
@@ -50,6 +51,7 @@ export type ChannelMessageListProps<T extends SendbirdGroupChannel | SendbirdOpe
   channel: T;
   messages: SendbirdMessage[];
   newMessages: SendbirdMessage[];
+  unreadFirstMessage?: SendbirdMessage;
   searchItem?: { startingPoint: number };
 
   scrolledAwayFromBottom: boolean;
@@ -68,6 +70,7 @@ export type ChannelMessageListProps<T extends SendbirdGroupChannel | SendbirdOpe
   onResendFailedMessage: (failedMessage: HandleableMessage) => Promise<HandleableMessage | void>;
   onPressParentMessage?: (parentMessage: SendbirdMessage, childMessage: HandleableMessage) => void;
   onPressMediaMessage?: (message: SendbirdFileMessage, deleteMessage: () => Promise<void>, uri: string) => void;
+  onPressMarkAsUnreadMessage?: (message: HandleableMessage) => void;
 
   renderMessage: (props: {
     focused: boolean;
@@ -84,14 +87,18 @@ export type ChannelMessageListProps<T extends SendbirdGroupChannel | SendbirdOpe
     enableMessageGrouping: ChannelMessageListProps<T>['enableMessageGrouping'];
     bottomSheetItem?: BottomSheetItem;
     isFirstItem: boolean;
+    isFirstUnreadMessage?: boolean;
     hideParentMessage?: boolean;
   }) => React.ReactElement | null;
   renderNewMessagesButton:
     | null
     | ((props: { visible: boolean; onPress: () => void; newMessages: SendbirdMessage[] }) => React.ReactElement | null);
   renderScrollToBottomButton: null | ((props: { visible: boolean; onPress: () => void }) => React.ReactElement | null);
+  renderUnreadMessagesFloating?: null | ((props: UnreadMessagesFloatingProps) => React.ReactElement | null);
+  unreadMessagesFloatingProps?: UnreadMessagesFloatingProps;
   flatListComponent?: React.ComponentType<FlatListProps<SendbirdMessage>>;
   flatListProps?: Omit<FlatListProps<SendbirdMessage>, 'data' | 'renderItem'>;
+  onViewableItemsChanged?: FlatListProps<SendbirdMessage>['onViewableItemsChanged'];
 } & {
   ref?: Ref<FlatList<SendbirdMessage>> | undefined;
 };
@@ -108,21 +115,26 @@ const ChannelMessageList = <T extends SendbirdGroupChannel | SendbirdOpenChannel
     onResendFailedMessage,
     onPressMediaMessage,
     onPressParentMessage,
+    onPressMarkAsUnreadMessage,
     currentUserId,
+    renderUnreadMessagesFloating,
     renderNewMessagesButton,
     renderScrollToBottomButton,
     renderMessage,
     messages,
     newMessages,
+    unreadFirstMessage,
     enableMessageGrouping,
     onScrolledAwayFromBottom,
     scrolledAwayFromBottom,
     onBottomReached,
     onTopReached,
     flatListComponent,
     flatListProps,
+    onViewableItemsChanged,
     onPressNewMessagesButton,
     onPressScrollToBottomButton,
+    unreadMessagesFloatingProps,
   }: ChannelMessageListProps<T>,
   ref: React.ForwardedRef<FlatList<SendbirdMessage>>,
 ) => {
@@ -139,6 +151,7 @@ const ChannelMessageList = <T extends SendbirdGroupChannel | SendbirdOpenChannel
     onDeleteMessage,
     onResendFailedMessage,
     onPressMediaMessage,
+    onPressMarkAsUnreadMessage,
   });
 
   const renderItem: ListRenderItem<SendbirdMessage> = useFreshCallback(({ item, index }) => {
@@ -147,6 +160,7 @@ const ChannelMessageList = <T extends SendbirdGroupChannel | SendbirdOpenChannel
       message: item,
       prevMessage: messages[index + 1],
       nextMessage: messages[index - 1],
+      isFirstUnreadMessage: unreadFirstMessage?.messageId === item.messageId,
       onPress,
       onLongPress,
       onPressParentMessage,
@@ -166,9 +180,21 @@ const ChannelMessageList = <T extends SendbirdGroupChannel | SendbirdOpenChannel
       {channel.isFrozen && (
         <ChannelFrozenBanner style={styles.frozenBanner} text={STRINGS.LABELS.CHANNEL_MESSAGE_LIST_FROZEN} />
       )}
+      {renderUnreadMessagesFloating && (
+        <View
+          style={[channel.isFrozen ? styles.unreadMsgFloatingWhenFrozen : styles.unreadMsgFloating, safeAreaLayout]}
+        >
+          {renderUnreadMessagesFloating({
+            visible: unreadMessagesFloatingProps?.visible ?? false,
+            onPressClose: () => unreadMessagesFloatingProps?.onPressClose(),
+            unreadMessageCount: unreadMessagesFloatingProps?.unreadMessageCount ?? 0,
+          })}
+        </View>
+      )}
       <ChatFlatList
         flatListComponent={flatListComponent}
         {...flatListProps}
+        onViewableItemsChanged={onViewableItemsChanged}
         onTopReached={onTopReached}
         onBottomReached={onBottomReached}
         onScrolledAwayFromBottom={onScrolledAwayFromBottom}
@@ -212,6 +238,7 @@ const useCreateMessagePressActions = <T extends SendbirdGroupChannel | SendbirdO
   onReplyInThreadMessage,
   onDeleteMessage,
   onPressMediaMessage,
+  onPressMarkAsUnreadMessage,
 }: Pick<
   ChannelMessageListProps<T>,
   | 'channel'
@@ -222,6 +249,7 @@ const useCreateMessagePressActions = <T extends SendbirdGroupChannel | SendbirdO
   | 'onDeleteMessage'
   | 'onResendFailedMessage'
   | 'onPressMediaMessage'
+  | 'onPressMarkAsUnreadMessage'
 >): CreateMessagePressActions => {
   const handlers = useSBUHandlers();
   const { colors } = useUIKitTheme();
@@ -281,6 +309,10 @@ const useCreateMessagePressActions = <T extends SendbirdGroupChannel | SendbirdO
     }
   };
 
+  const onMarkAsUnread = (message: HandleableMessage) => {
+    onPressMarkAsUnreadMessage?.(message);
+  };
+
   const openSheetForFailedMessage = (message: HandleableMessage) => {
     openSheet({
       sheetItems: [
@@ -323,6 +355,11 @@ const useCreateMessagePressActions = <T extends SendbirdGroupChannel | SendbirdO
         title: STRINGS.LABELS.CHANNEL_MESSAGE_COPY,
         onPress: () => onCopyText(message),
       }),
+      markAsUnread: (message: HandleableMessage) => ({
+        icon: 'mark-as-unread' as const,
+        title: STRINGS.LABELS.CHANNEL_MESSAGE_MARK_AS_UNREAD,
+        onPress: () => onMarkAsUnread(message),
+      }),
       edit: (message: HandleableMessage) => ({
         icon: 'edit' as const,
         title: STRINGS.LABELS.CHANNEL_MESSAGE_EDIT,
@@ -356,6 +393,9 @@ const useCreateMessagePressActions = <T extends SendbirdGroupChannel | SendbirdO
     if (message.isUserMessage()) {
       sheetItems.push(menu.copy(message));
       if (!channel.isEphemeral) {
+        if (channel.isGroupChannel() && sbOptions.uikit.groupChannel.channel.enableMarkAsUnread) {
+          sheetItems.push(menu.markAsUnread(message));
+        }
         if (isMyMessage(message, currentUserId) && message.sendingStatus === 'succeeded') {
           sheetItems.push(menu.edit(message));
           sheetItems.push(menu.delete(message));
@@ -384,6 +424,9 @@ const useCreateMessagePressActions = <T extends SendbirdGroupChannel | SendbirdO
           } else if (sbOptions.uikit.groupChannel.channel.replyType === 'quote_reply') {
             sheetItems.push(menu.reply(message));
           }
+          if (sbOptions.uikit.groupChannel.channel.enableMarkAsUnread) {
+            sheetItems.push(menu.markAsUnread(message));
+          }
         }
       }
     }
@@ -446,6 +489,18 @@ const styles = createStyleSheet({
   frozenListPadding: {
     paddingBottom: 32,
   },
+  unreadMsgFloating: {
+    position: 'absolute',
+    zIndex: 999,
+    top: 12,
+    alignSelf: 'center',
+  },
+  unreadMsgFloatingWhenFrozen: {
+    position: 'absolute',
+    zIndex: 999,
+    top: 40,
+    alignSelf: 'center',
+  },
   newMsgButton: {
     position: 'absolute',
     zIndex: 999,

packages/uikit-react-native-foundation/src/assets/icon/index.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { Box, Text, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+
+import { useLocalization } from '../../hooks/useContext';
+
+type Props = {
+  shouldRenderNewLine?: boolean;
+};
+
+const GroupChannelMessageNewLine = ({ shouldRenderNewLine }: Props) => {
+  if (!shouldRenderNewLine) return null;
+
+  const { select, palette } = useUIKitTheme();
+  const { STRINGS } = useLocalization();
+
+  return (
+    <View style={styles.container}>
+      <Box backgroundColor={select({ light: palette.primary300, dark: palette.primary200 })} style={styles.line} />
+      <Text caption3 color={select({ light: palette.primary300, dark: palette.primary200 })} style={styles.label}>
+        {STRINGS.GROUP_CHANNEL.LIST_NEW_LINE}
+      </Text>
+      <Box backgroundColor={select({ light: palette.primary300, dark: palette.primary200 })} style={styles.line} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    height: 12,
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 16,
+  },
+  line: {
+    flex: 1,
+    height: 1,
+  },
+  label: {
+    marginHorizontal: 4,
+  },
+});
+
+export default React.memo(GroupChannelMessageNewLine);