[CLNP-6715]Added markAsUnread

src/lib/Sendbird/context/SendbirdProvider.tsx

@@ -210,6 +210,7 @@ const SendbirdContextManager = ({
       suggestedRepliesDirection: configs.groupChannel.channel.suggestedRepliesDirection,
       enableMarkdownForUserMessage: configs.groupChannel.channel.enableMarkdownForUserMessage,
       enableFormTypeMessage: configs.groupChannel.channel.enableFormTypeMessage,
+      enableMarkAsUnread: configs.groupChannel.channel.enableMarkAsUnread,
       enableReactionsSupergroup: sdkInitialized && configsWithAppAttr(sdk).groupChannel.channel.enableReactionsSupergroup as never,
     },
     groupChannelList: {

src/lib/Sendbird/context/initialState.ts

@@ -69,6 +69,7 @@ const config: SendbirdStateConfig = {
     suggestedRepliesDirection: 'vertical',
     enableMarkdownForUserMessage: false,
     enableFormTypeMessage: false,
+    enableMarkAsUnread: false,
     enableReactionsSupergroup: undefined as never, // @deprecated
   },
   groupChannelList: {

src/lib/Sendbird/types.ts

@@ -280,6 +280,7 @@ export interface SendbirdStateConfig {
     suggestedRepliesDirection: SBUConfig['groupChannel']['channel']['suggestedRepliesDirection'];
     enableMarkdownForUserMessage: SBUConfig['groupChannel']['channel']['enableMarkdownForUserMessage'];
     enableFormTypeMessage: SBUConfig['groupChannel']['channel']['enableFormTypeMessage'];
+    enableMarkAsUnread: SBUConfig['groupChannel']['channel']['enableMarkAsUnread'];
     /**
      * @deprecated Currently, this feature is turned off by default. If you wish to use this feature, contact us: {@link https://dashboard.sendbird.com/settings/contact_us?category=feedback_and_feature_requests&product=UIKit}
      */

src/modules/Channel/components/NewMessageCountFloatingButton/index.tsx

@@ -0,0 +1,3 @@
+import NewMessageCount from '../../../GroupChannel/components/NewMessageCountFloatingButton';
+
+export default NewMessageCount;

src/modules/Channel/components/UnreadCountFloatingButton/index.tsx

@@ -0,0 +1,3 @@
+import UnreadCountFloatingButton from '../../../GroupChannel/components/UnreadCountFloatingButton';
+
+export default UnreadCountFloatingButton;

src/modules/Channel/context/ChannelProvider.tsx

@@ -5,6 +5,7 @@ import React, {
   useRef,
   useMemo,
 } from 'react';
+import { UIKitConfigProvider, useUIKitConfig } from '@sendbird/uikit-tools';
 
 import type { GroupChannel, Member } from '@sendbird/chat/groupChannel';
 import type {
@@ -52,6 +53,7 @@ import { PublishingModuleType } from '../../internalInterfaces';
 import { ChannelActionTypes } from './dux/actionTypes';
 import useSendbird from '../../../lib/Sendbird/context/hooks/useSendbird';
 import { useLocalization } from '../../../lib/LocalizationContext';
+import { uikitConfigStorage } from '../../../lib/utils/uikitConfigStorage';
 
 export { ThreadReplySelectType } from './const'; // export for external usage
 
@@ -215,6 +217,7 @@ const ChannelProvider = (props: ChannelContextProps) => {
   const sdk = globalStore?.stores?.sdkStore?.sdk;
   const sdkInit = globalStore?.stores?.sdkStore?.initialized;
   const globalConfigs = globalStore?.config;
+  const { configs: uikitConfig } = useUIKitConfig();
 
   const [initialTimeStamp, setInitialTimeStamp] = useState(startingPoint);
   useEffect(() => {
@@ -441,6 +444,19 @@ const ChannelProvider = (props: ChannelContextProps) => {
   });
 
   return (
+    <UIKitConfigProvider
+      storage={uikitConfigStorage}
+      localConfigs={{
+        ...uikitConfig,
+        groupChannel: {
+          ...uikitConfig.groupChannel,
+          channel: {
+            ...uikitConfig.groupChannel.channel,
+            enableMarkAsUnread: false,
+          },
+        },
+      }
+    }>
     <ChannelContext.Provider value={{
       // props
       channelUrl,
@@ -519,6 +535,7 @@ const ChannelProvider = (props: ChannelContextProps) => {
         {children}
       </UserProfileProvider>
     </ChannelContext.Provider>
+    </UIKitConfigProvider>
   );
 };
 

src/modules/Channel/context/dux/actionTypes.ts

@@ -27,6 +27,7 @@ export const ON_MESSAGE_DELETED_BY_REQ_ID = 'ON_MESSAGE_DELETED_BY_REQ_ID';
 export const SET_CURRENT_CHANNEL = 'SET_CURRENT_CHANNEL';
 export const SET_CHANNEL_INVALID = 'SET_CHANNEL_INVALID';
 export const MARK_AS_READ = 'MARK_AS_READ';
+export const MARK_AS_UNREAD = 'MARK_AS_UNREAD';
 export const ON_REACTION_UPDATED = 'ON_REACTION_UPDATED';
 export const SET_EMOJI_CONTAINER = 'SET_EMOJI_CONTAINER';
 export const MESSAGE_LIST_PARAMS_CHANGED = 'MESSAGE_LIST_PARAMS_CHANGED';
@@ -77,6 +78,11 @@ type CHANNEL_PAYLOAD_TYPES = {
   [RESEND_MESSAGE_START]: SendableMessageType;
   [MARK_AS_READ]: {
     channel: null | GroupChannel;
+    userIds?: null |string[];
+  };
+  [MARK_AS_UNREAD]: {
+    channel: null | GroupChannel;
+    userIds?: null |string[];
   };
   [ON_MESSAGE_DELETED]: MessageId;
   [ON_MESSAGE_DELETED_BY_REQ_ID]: RequestId;

src/modules/Channel/context/hooks/useHandleChannelEvents.ts

@@ -107,6 +107,31 @@ function useHandleChannelEvents({
             });
           }
         },
+        onUserMarkedRead: (channel, userIds) => {
+          logger.info('Channel | useHandleChannelEvents: onUserMarkedAsRead', channel, userIds);
+          if (compareIds(channel?.url, channelUrl)) {
+            messagesDispatcher({
+              type: messageActions.MARK_AS_READ,
+              payload: {
+                channel,
+                userIds,
+              },
+            });
+          }
+        },
+        onUserMarkedUnread: (channel, userIds) => {
+          logger.info('Channel | useHandleChannelEvents: onUserMarkedUnread', channel, userIds);
+          // TODO:: MADOKA 이 부분에 대해서 명확하게 확인해야 함.
+          if (compareIds(channel?.url, channelUrl)) {
+            messagesDispatcher({
+              type: messageActions.MARK_AS_UNREAD,
+              payload: {
+                channel,
+                userIds,
+              },
+            });
+          }
+        },
         // before(onDeliveryReceiptUpdated)
         onUndeliveredMemberStatusUpdated: (channel) => {
           if (compareIds(channel?.url, channelUrl)) {

src/modules/GroupChannel/components/Message/MessageView.tsx

@@ -22,10 +22,12 @@ import SuggestedMentionListView from '../SuggestedMentionList/SuggestedMentionLi
 import type { OnBeforeDownloadFileMessageType } from '../../context/types';
 import { classnames, deleteNullish } from '../../../../utils/utils';
 import useSendbird from '../../../../lib/Sendbird/context/hooks/useSendbird';
+import NewMessageIndicator from '../../../../ui/NewMessageSeparator';
 
 export interface MessageProps {
   message: EveryMessage;
   hasSeparator?: boolean;
+  hasNewMessageSeparator?: boolean;
   chainTop?: boolean;
   chainBottom?: boolean;
   handleScroll?: (isBottomMessageAffected?: boolean) => void;
@@ -49,6 +51,10 @@ export interface MessageProps {
    * A function that customizes the rendering of the edit input portion of the message component.
    * */
   renderEditInput?: () => React.ReactElement;
+  /**
+   * A function that is called when the new message separator visibility changes.
+   */
+  onNewMessageSeparatorVisibilityChange?: (isVisible: boolean) => void;
   /**
    * @deprecated Please use `children` instead
    * @description Customizes all child components of the message.
@@ -79,6 +85,7 @@ export interface MessageViewProps extends MessageProps {
   updateUserMessage: (messageId: number, params: UserMessageUpdateParams) => void;
   resendMessage: (failedMessage: SendableMessageType) => void;
   deleteMessage: (message: CoreMessageType) => Promise<void>;
+  markAsUnread?: (message: SendableMessageType) => void;
 
   renderFileViewer: (props: { message: FileMessage; onCancel: () => void }) => React.ReactElement;
   renderRemoveMessageModal?: (props: { message: EveryMessage; onCancel: () => void }) => React.ReactElement;
@@ -107,9 +114,11 @@ const MessageView = (props: MessageViewProps) => {
     message,
     children,
     hasSeparator,
+    hasNewMessageSeparator,
     chainTop,
     chainBottom,
     handleScroll,
+    onNewMessageSeparatorVisibilityChange,
 
     // MessageViewProps
     channel,
@@ -132,6 +141,7 @@ const MessageView = (props: MessageViewProps) => {
     updateUserMessage,
     resendMessage,
     deleteMessage,
+    markAsUnread,
 
     setAnimatedMessageId,
     animatedMessageId,
@@ -288,6 +298,7 @@ const MessageView = (props: MessageViewProps) => {
           onMessageHeightChange: handleScroll,
           onBeforeDownloadFileMessage,
           filterEmojiCategoryIds,
+          markAsUnread,
         })}
         { /* Suggested Replies */ }
         {
@@ -415,6 +426,15 @@ const MessageView = (props: MessageViewProps) => {
             </Label>
           </DateSeparator>
         ))}
+      {/* new message indicator */}
+      {hasNewMessageSeparator
+        && (
+          <NewMessageIndicator onVisibilityChange={onNewMessageSeparatorVisibilityChange}>
+            <Label type={LabelTypography.CAPTION_2} color={LabelColors.PRIMARY}>
+              New Message
+            </Label>
+          </NewMessageIndicator>
+        )}
       {renderChildren()}
     </div>
   );

src/modules/GroupChannel/components/Message/index.tsx

@@ -29,6 +29,7 @@ export const Message = (props: MessageProps): React.ReactElement => {
       onMessageAnimated,
       onBeforeDownloadFileMessage,
       messages,
+      markAsUnread,
     },
     actions: {
       toggleReaction,
@@ -85,6 +86,7 @@ export const Message = (props: MessageProps): React.ReactElement => {
       updateUserMessage={updateUserMessage}
       resendMessage={resendMessage}
       deleteMessage={deleteMessage as any}
+      markAsUnread={markAsUnread}
       animatedMessageId={animatedMessageId}
       setAnimatedMessageId={setAnimatedMessageId}
       onMessageAnimated={onMessageAnimated}

src/modules/GroupChannel/components/MessageInputWrapper/MessageInputWrapperView.tsx

@@ -183,7 +183,9 @@ export const MessageInputWrapperView = React.forwardRef((
       )}
       {quoteMessage && (
         <div className="sendbird-message-input-wrapper__quote-message-input">
-          <QuoteMessageInput replyingMessage={quoteMessage} onClose={() => setQuoteMessage(null)} />
+          <QuoteMessageInput replyingMessage={quoteMessage} onClose={() => {
+            setQuoteMessage(null);
+          }} />
         </div>
       )}
       {showVoiceMessageInput ? (

src/modules/GroupChannel/components/MessageList/getMessagePartsInfo.ts

@@ -14,12 +14,16 @@ export interface GetMessagePartsInfoProps {
   currentMessage: CoreMessageType;
   currentChannel?: GroupChannel | null;
   replyType?: string;
+  hasPrevious?: boolean;
+  firstUnreadMessageId?: number | string | undefined;
+  isCurrentDeviceMessage?: boolean;
 }
 
 interface OutPuts {
   chainTop: boolean,
   chainBottom: boolean,
   hasSeparator: boolean,
+  hasNewMessageSeparator: boolean,
 }
 
 /**
@@ -33,6 +37,8 @@ export const getMessagePartsInfo = ({
   currentMessage,
   currentChannel = null,
   replyType = '',
+  firstUnreadMessageId,
+  isCurrentDeviceMessage,
 }: GetMessagePartsInfoProps): OutPuts => {
   const previousMessage = allMessages[currentIndex - 1];
   const nextMessage = allMessages[currentIndex + 1];
@@ -47,9 +53,13 @@ export const getMessagePartsInfo = ({
 
   // https://stackoverflow.com/a/41855608
   const hasSeparator = isLocalMessage ? false : !(previousMessageCreatedAt && (isSameDay(currentCreatedAt, previousMessageCreatedAt)));
+
+  const hasNewMessageSeparator = !isCurrentDeviceMessage && firstUnreadMessageId === currentMessage.messageId;
+
   return {
     chainTop,
     chainBottom,
     hasSeparator,
+    hasNewMessageSeparator,
   };
 };