[CLNP-6715]Added markAsUnread (#1347)

[feat]: Added markAsUnread.

// PR description (Optional)
ChatSDK에 markAsUnread 기능이 추가 됨에 따라, Uikit에서도 해당 기능이 사용할 수 있게 반영 되었습니다.
[UX
Figma](https://www.figma.com/design/SVbXU00FhjztekD8AiVukK/WIP_UIKit_React?node-id=3054-2&p=f&t=P874pCcveyOShiUJ-0)
[Uikit
Spec](https://sendbird.atlassian.net/wiki/spaces/SDK/pages/3191373873/MarkAsUnread)

Fixes [CLNP-6715](https://sendbird.atlassian.net/browse/CLNP-6715)

// Changelogs (Recommended)

### Changelogs

### Checklist

Put an `x` in the boxes that apply. You can also fill these out after
creating the PR. If unsure, ask the members.
This is a reminder of what we look for before merging your code.

- [x] **All tests pass locally with my changes**
- [ ] **I have added tests that prove my fix is effective or that my
feature works**
- [ ] **Public components / utils / props are appropriately exported**
- [ ] I have added necessary documentation (if appropriate)


## External Contributions

This project is not yet set up to accept pull requests from external
contributors.

If you have a pull request that you believe should be accepted, please
contact
the Developer Relations team <developer-advocates@sendbird.com> with
details
and we'll evaluate if we can set up a
[CLA](https://en.wikipedia.org/wiki/Contributor_License_Agreement) to
allow for the contribution.


[CLNP-6715]:
https://sendbird.atlassian.net/browse/CLNP-6715?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

Author: danney-chun

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/lib/utils/__tests__/uikitConfigMapper.spec.ts

@@ -38,6 +38,7 @@ describe('uikitConfigMapper', () => {
     expect(result).toHaveProperty('groupChannel.enableTypingIndicator');
     expect(result).toHaveProperty('groupChannel.threadReplySelectType');
     expect(result).toHaveProperty('groupChannel.input.enableDocument');
+    expect(result).toHaveProperty('groupChannel.enableMarkAsUnread');
 
     expect(result).toHaveProperty('openChannel.enableOgtag');
     expect(result).toHaveProperty('openChannel.input.enableDocument');
@@ -50,6 +51,7 @@ describe('uikitConfigMapper', () => {
     const uikitOptions = {
       groupChannel: {
         enableMention: false,
+        enableMarkAsUnread: true,
       },
       groupChannelSettings: {
         enableMessageSearch: false,
@@ -58,6 +60,7 @@ describe('uikitConfigMapper', () => {
     const result = uikitConfigMapper({ legacyConfig, uikitOptions });
 
     expect(result.groupChannel?.enableMention).toBe(false);
+    expect(result.groupChannel?.enableMarkAsUnread).toBe(true);
     expect(result.groupChannelSettings?.enableMessageSearch).toBe(false);
   });
   it('should return true <-> false flipped result for disableUserProfile when its converted into enableUsingDefaultUserProfile', () => {
@@ -74,4 +77,14 @@ describe('uikitConfigMapper', () => {
         .common?.enableUsingDefaultUserProfile,
     ).toBe(false);
   });
+  it('should correctly handle enableMarkAsUnread from uikitOptions', () => {
+    const uikitOptions = {
+      groupChannel: {
+        enableMarkAsUnread: true,
+      },
+    } as UIKitOptions;
+    const result = uikitConfigMapper({ legacyConfig: mockLegacyConfig, uikitOptions });
+
+    expect(result.groupChannel?.enableMarkAsUnread).toBe(true);
+  });
 });

src/lib/utils/uikitConfigMapper.ts

@@ -41,6 +41,7 @@ export function uikitConfigMapper({
       suggestedRepliesDirection: uikitOptions.groupChannel?.suggestedRepliesDirection,
       enableMarkdownForUserMessage: uikitOptions.groupChannel?.enableMarkdownForUserMessage,
       enableFormTypeMessage: uikitOptions.groupChannel?.enableFormTypeMessage,
+      enableMarkAsUnread: uikitOptions.groupChannel?.enableMarkAsUnread,
     },
     groupChannelList: {
       enableTypingIndicator: uikitOptions.groupChannelList?.enableTypingIndicator ?? isTypingIndicatorEnabledOnChannelList,

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)) {