@sendbird/uikit-react-native 3.9.6 → 3.10.0

package/lib/typescript/src/domain/openChannel/component/OpenChannelHeader.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 declare const _default: React.MemoExoticComponent<({ onPressHeaderLeft, onPressHeaderRight, rightIconName }: {
-    rightIconName: "search" | "stop" | "photo" | "recording" | "delete" | "message" | "done" | "user" | "add" | "chat-hide" | "chat-show" | "archive" | "arrow-left" | "audio-off-filled" | "audio-off" | "audio-on-filled" | "audio-on" | "ban" | "broadcast" | "camera" | "channels" | "chat-filled" | "chat" | "checkbox-off" | "checkbox-on" | "chevron-down" | "chevron-right" | "close" | "copy" | "create" | "document" | "done-all" | "download" | "edit" | "emoji-more" | "error" | "file-audio" | "file-document" | "freeze" | "gif" | "info" | "leave" | "members" | "moderation" | "more" | "mute" | "notifications-filled" | "notifications-off-filled" | "notifications" | "operator" | "pause" | "play" | "plus" | "question" | "radio-off" | "radio-on" | "refresh" | "remove" | "reply-filled" | "reply" | "send" | "settings-filled" | "spinner" | "streaming" | "supergroup" | "theme" | "thread" | "thumbnail-none" | "unarchive";
+    rightIconName: "search" | "stop" | "photo" | "recording" | "delete" | "message" | "done" | "user" | "add" | "chat-hide" | "chat-show" | "archive" | "arrow-left" | "audio-off-filled" | "audio-off" | "audio-on-filled" | "audio-on" | "ban" | "broadcast" | "camera" | "channels" | "chat-filled" | "chat" | "checkbox-off" | "checkbox-on" | "chevron-down" | "chevron-right" | "close" | "copy" | "create" | "document" | "done-all" | "download" | "edit" | "emoji-more" | "error" | "file-audio" | "file-document" | "freeze" | "gif" | "info" | "leave" | "mark-as-unread" | "members" | "moderation" | "more" | "mute" | "notifications-filled" | "notifications-off-filled" | "notifications" | "operator" | "pause" | "play" | "plus" | "question" | "radio-off" | "radio-on" | "refresh" | "remove" | "reply-filled" | "reply" | "send" | "settings-filled" | "spinner" | "streaming" | "supergroup" | "theme" | "thread" | "thumbnail-none" | "unarchive";
     onPressHeaderLeft: () => void;
     onPressHeaderRight: () => void;
 }) => React.JSX.Element>;

package/lib/typescript/src/hooks/useChannelInputItems.d.ts

@@ -1,7 +1,7 @@
 import { SendbirdChannel } from '@sendbird/uikit-utils';
 import { FileType } from '../platform/types';
 export declare const useChannelInputItems: (channel: SendbirdChannel, sendFileMessage: (file: FileType) => void) => {
-    icon?: "search" | "stop" | "photo" | "recording" | "delete" | "message" | "done" | "user" | "add" | "chat-hide" | "chat-show" | "archive" | "arrow-left" | "audio-off-filled" | "audio-off" | "audio-on-filled" | "audio-on" | "ban" | "broadcast" | "camera" | "channels" | "chat-filled" | "chat" | "checkbox-off" | "checkbox-on" | "chevron-down" | "chevron-right" | "close" | "copy" | "create" | "document" | "done-all" | "download" | "edit" | "emoji-more" | "error" | "file-audio" | "file-document" | "freeze" | "gif" | "info" | "leave" | "members" | "moderation" | "more" | "mute" | "notifications-filled" | "notifications-off-filled" | "notifications" | "operator" | "pause" | "play" | "plus" | "question" | "radio-off" | "radio-on" | "refresh" | "remove" | "reply-filled" | "reply" | "send" | "settings-filled" | "spinner" | "streaming" | "supergroup" | "theme" | "thread" | "thumbnail-none" | "unarchive" | undefined;
+    icon?: "search" | "stop" | "photo" | "recording" | "delete" | "message" | "done" | "user" | "add" | "chat-hide" | "chat-show" | "archive" | "arrow-left" | "audio-off-filled" | "audio-off" | "audio-on-filled" | "audio-on" | "ban" | "broadcast" | "camera" | "channels" | "chat-filled" | "chat" | "checkbox-off" | "checkbox-on" | "chevron-down" | "chevron-right" | "close" | "copy" | "create" | "document" | "done-all" | "download" | "edit" | "emoji-more" | "error" | "file-audio" | "file-document" | "freeze" | "gif" | "info" | "leave" | "mark-as-unread" | "members" | "moderation" | "more" | "mute" | "notifications-filled" | "notifications-off-filled" | "notifications" | "operator" | "pause" | "play" | "plus" | "question" | "radio-off" | "radio-on" | "refresh" | "remove" | "reply-filled" | "reply" | "send" | "settings-filled" | "spinner" | "streaming" | "supergroup" | "theme" | "thread" | "thumbnail-none" | "unarchive" | undefined;
     iconColor?: string | undefined;
     title: string;
     titleColor?: string | undefined;

package/lib/typescript/src/localization/StringSet.type.d.ts

@@ -96,6 +96,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;
         MESSAGE_BUBBLE_FILE_TITLE: (message: SendbirdFileMessage) => string;
@@ -272,6 +274,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/lib/typescript/src/version.d.ts

@@ -1,2 +1,2 @@
-declare const VERSION = "3.9.6";
+declare const VERSION = "3.10.0";
 export default VERSION;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendbird/uikit-react-native",
-  "version": "3.9.6",
+  "version": "3.10.0",
   "description": "Sendbird UIKit for React Native: A feature-rich and customizable chat UI kit with messaging, channel management, and user authentication.",
   "keywords": [
     "sendbird",
@@ -60,10 +60,10 @@
   },
   "dependencies": {
     "@openspacelabs/react-native-zoomable-view": "^2.1.5",
-    "@sendbird/uikit-chat-hooks": "3.9.6",
-    "@sendbird/uikit-react-native-foundation": "3.9.6",
-    "@sendbird/uikit-tools": "0.0.7",
-    "@sendbird/uikit-utils": "3.9.6"
+    "@sendbird/uikit-chat-hooks": "3.10.0",
+    "@sendbird/uikit-react-native-foundation": "3.10.0",
+    "@sendbird/uikit-tools": "0.0.10",
+    "@sendbird/uikit-utils": "3.10.0"
   },
   "devDependencies": {
     "@bam.tech/react-native-image-resizer": "^3.0.4",
@@ -111,8 +111,9 @@
     "@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/react-native-scrollview-enhancer": "*",
+    "@sendbird/uikit-tools": ">=0.0.10",
     "date-fns": ">=2.28.0",
     "expo-av": ">=12.0.4",
     "expo-clipboard": ">=2.1.1",
@@ -217,5 +218,5 @@
       ]
     ]
   },
-  "gitHead": "639b760dc4a6d804be16ed06aec680aefa9a8875"
+  "gitHead": "01b356019dead8053d3469bf5a40c69d66c5b980"
 }

package/src/components/ChannelMessageList/index.tsx

@@ -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,12 +115,15 @@ const ChannelMessageList = <T extends SendbirdGroupChannel | SendbirdOpenChannel
     onResendFailedMessage,
     onPressMediaMessage,
     onPressParentMessage,
+    onPressMarkAsUnreadMessage,
     currentUserId,
+    renderUnreadMessagesFloating,
     renderNewMessagesButton,
     renderScrollToBottomButton,
     renderMessage,
     messages,
     newMessages,
+    unreadFirstMessage,
     enableMessageGrouping,
     onScrolledAwayFromBottom,
     scrolledAwayFromBottom,
@@ -121,8 +131,10 @@ const ChannelMessageList = <T extends SendbirdGroupChannel | SendbirdOpenChannel
     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,9 +393,19 @@ const useCreateMessagePressActions = <T extends SendbirdGroupChannel | SendbirdO
     if (message.isUserMessage()) {
       sheetItems.push(menu.copy(message));
       if (!channel.isEphemeral) {
-        if (isMyMessage(message, currentUserId) && message.sendingStatus === 'succeeded') {
-          sheetItems.push(menu.edit(message));
-          sheetItems.push(menu.delete(message));
+        if (message.sendingStatus === 'succeeded') {
+          const isMyMsg = isMyMessage(message, currentUserId);
+          if (isMyMsg) {
+            sheetItems.push(menu.edit(message));
+          }
+
+          if (channel.isGroupChannel() && sbOptions.uikit.groupChannel.channel.enableMarkAsUnread) {
+            sheetItems.push(menu.markAsUnread(message));
+          }
+
+          if (isMyMsg) {
+            sheetItems.push(menu.delete(message));
+          }
         }
         if (channel.isGroupChannel()) {
           if (sbOptions.uikit.groupChannel.channel.replyType === 'thread' && onReplyInThreadMessage !== undefined) {
@@ -375,9 +422,16 @@ const useCreateMessagePressActions = <T extends SendbirdGroupChannel | SendbirdO
         sheetItems.push(menu.download(message));
       }
       if (!channel.isEphemeral) {
-        if (isMyMessage(message, currentUserId) && message.sendingStatus === 'succeeded') {
-          sheetItems.push(menu.delete(message));
+        if (message.sendingStatus === 'succeeded') {
+          if (channel.isGroupChannel() && sbOptions.uikit.groupChannel.channel.enableMarkAsUnread) {
+            sheetItems.push(menu.markAsUnread(message));
+          }
+
+          if (isMyMessage(message, currentUserId)) {
+            sheetItems.push(menu.delete(message));
+          }
         }
+
         if (channel.isGroupChannel()) {
           if (sbOptions.uikit.groupChannel.channel.replyType === 'thread' && onReplyInThreadMessage !== undefined) {
             sheetItems.push(menu.replyInThread(message));
@@ -446,6 +500,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,

package/src/components/GroupChannelMessageRenderer/GroupChannelMessageNewLine.tsx

@@ -0,0 +1,45 @@
+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 { STRINGS } = useLocalization();
+  const { colors } = useUIKitTheme();
+
+  return (
+    <View style={styles.container}>
+      <Box backgroundColor={colors.primary} style={styles.line} />
+      <Text caption3 numberOfLines={1} color={colors.primary} style={styles.label}>
+        {STRINGS.GROUP_CHANNEL.LIST_NEW_LINE}
+      </Text>
+      <Box backgroundColor={colors.primary} style={styles.line} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 16,
+  },
+  line: {
+    flex: 1,
+    height: 1,
+  },
+  label: {
+    marginHorizontal: 4,
+  },
+});
+
+export default React.memo(GroupChannelMessageNewLine);

package/src/components/GroupChannelMessageRenderer/index.tsx

@@ -30,6 +30,7 @@ import { TypingIndicatorType } from '../../types';
 import { ReactionAddons } from '../ReactionAddons';
 import GroupChannelMessageDateSeparator from './GroupChannelMessageDateSeparator';
 import GroupChannelMessageFocusAnimation from './GroupChannelMessageFocusAnimation';
+import GroupChannelMessageNewLine from './GroupChannelMessageNewLine';
 import GroupChannelMessageOutgoingStatus from './GroupChannelMessageOutgoingStatus';
 import GroupChannelMessageParentMessage from './GroupChannelMessageParentMessage';
 import GroupChannelMessageReplyInfo from './GroupChannelMessageReplyInfo';
@@ -46,6 +47,7 @@ const GroupChannelMessageRenderer: GroupChannelProps['Fragment']['renderMessage'
   focused,
   prevMessage,
   nextMessage,
+  isFirstUnreadMessage,
   hideParentMessage,
 }) => {
   const handlers = useSBUHandlers();
@@ -310,9 +312,12 @@ const GroupChannelMessageRenderer: GroupChannelProps['Fragment']['renderMessage'
     }
   });
 
+  const shouldRenderNewLine = sbOptions.uikit.groupChannel.channel.enableMarkAsUnread && isFirstUnreadMessage;
+
   return (
     <Box paddingHorizontal={16} marginBottom={messageGap}>
       <GroupChannelMessageDateSeparator message={message} prevMessage={prevMessage} />
+      <GroupChannelMessageNewLine shouldRenderNewLine={shouldRenderNewLine} />
       <GroupChannelMessageFocusAnimation focused={focused}>{renderMessage()}</GroupChannelMessageFocusAnimation>
     </Box>
   );

package/src/components/UnreadMessagesFloating.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Platform, TouchableOpacity, View } from 'react-native';
+
+import { Icon, Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+
+import { useLocalization } from '../hooks/useContext';
+
+export type UnreadMessagesFloatingProps = {
+  unreadMessageCount: number;
+  visible: boolean;
+  onPressClose: () => void;
+};
+const UnreadMessagesFloating = ({ unreadMessageCount, visible, onPressClose }: UnreadMessagesFloatingProps) => {
+  const { STRINGS } = useLocalization();
+  const { select, palette, colors } = useUIKitTheme();
+  if (unreadMessageCount <= 0 || !visible) return null;
+  return (
+    <View
+      style={[
+        styles.container,
+        { backgroundColor: select({ dark: palette.background400, light: palette.background50 }) },
+      ]}
+    >
+      <Text body2 color={colors.onBackground02}>
+        {STRINGS.GROUP_CHANNEL.LIST_FLOATING_UNREAD_MSG(unreadMessageCount)}
+      </Text>
+      <TouchableOpacity
+        onPress={onPressClose}
+        style={{ marginLeft: 4 }}
+        hitSlop={{ top: 12, bottom: 12, left: 14, right: 38 }}
+      >
+        <Icon icon={'close'} size={14} />
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = createStyleSheet({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderRadius: 20,
+    ...Platform.select({
+      android: {
+        elevation: 3,
+      },
+      ios: {
+        shadowColor: 'black',
+        shadowRadius: 3,
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.08,
+      },
+    }),
+  },
+});
+
+export default React.memo(UnreadMessagesFloating);