feat: Support emoji category for reaction input (#1206)

# Changelog
- Added support for EmojiCategory. You can now filter emojis for
different messages when adding Reactions to a message.
- Added `filterEmojiCategoryIds` to `GroupChannelProvider` and
`ThreadProvider`.
    - How to Use
    ```
    const filterEmojiCategoryIds = (message: SendableMessage) => {
        if (message.customType === 'emoji_category_2') return [2];

        return [1];
    }

    <GroupChannel 
      filterEmojiCategoryIds={filterEmojiCategoryIds}
    />
    ```
- Note: You need to set your custom EmojiCategory using [Sendbird
Platform
API](https://sendbird.com/docs/chat/platform-api/v3/message/reactions-and-emojis/reactions-and-emojis-overview)
in advance.

# Description
## Goal
* Customer requested that they be able to show different emojis for
different EmojiCategories.
* e.g. show different EmojiCategory when a message is sent by a bot,
versus when a message is sent by non-bot users.
## Requirements & Spec
* Users can leverage a new custom property to customize the reaction
menu bar for each message. This property allows filtering specific emoji
categories based on conditions, such as the `custom_type` attribute of a
message.
* Existing reactions from previous versions will remain visible,
although they will not appear on the reaction menu bar in the updated
version to ensure a seamless transition.
## Approach
* ` filterEmojiCategoryIds: (message: SendableMessageType) =>
EmojiCategory['id'][];` has been introduced in `GroupChannelProvider`
and `ThreadProvider`, as well as the relevant UI components. This
function:
* Can be configured at the provider level and propagated via props to
individual UI components.
* Accepts a message as a parameter and returns an array of
EmojiCategory['id'], dictating which emoji categories are permissible
for display on the reaction menu bar.
* Operates internally within the reaction bar component to exclude
emojis whose categories are not listed in the return array.
## Open Questions
* Is `filterEmojiCategoryIds` the optimal approach for user-driven
customization of this component, or should we consider introducing a
`render~~~()` property for greater flexibility?
* Any other tasks to extend public interface?

Author: git-babel

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

@@ -1,6 +1,6 @@
 import type { EveryMessage, RenderCustomSeparatorProps, RenderMessageParamsType, ReplyType } from '../../../../types';
 import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
-import { EmojiContainer, User } from '@sendbird/chat';
+import { type EmojiCategory, EmojiContainer, User } from '@sendbird/chat';
 import { GroupChannel } from '@sendbird/chat/groupChannel';
 import type { FileMessage, UserMessage, UserMessageCreateParams, UserMessageUpdateParams } from '@sendbird/chat/message';
 import format from 'date-fns/format';
@@ -68,6 +68,7 @@ export interface MessageViewProps extends MessageProps {
   nicknamesMap: Map<string, string>;
 
   renderUserMentionItem?: (props: { user: User }) => React.ReactElement;
+  filterEmojiCategoryIds?: (message: SendableMessageType) => EmojiCategory['id'][];
   scrollToMessage: (createdAt: number, messageId: number) => void;
   toggleReaction: (message: SendableMessageType, emojiKey: string, isReacted: boolean) => void;
   setQuoteMessage: React.Dispatch<React.SetStateAction<SendableMessageType | null>>;
@@ -147,6 +148,7 @@ const MessageView = (props: MessageViewProps) => {
     renderEditInput,
     renderFileViewer,
     renderRemoveMessageModal,
+    filterEmojiCategoryIds,
   } = deleteNullish(props);
 
   const { dateLocale, stringSet } = useLocalization();
@@ -285,6 +287,7 @@ const MessageView = (props: MessageViewProps) => {
           onQuoteMessageClick: onQuoteMessageClick,
           onMessageHeightChange: handleScroll,
           onBeforeDownloadFileMessage,
+          filterEmojiCategoryIds,
         })}
         { /* Suggested Replies */ }
         {

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

@@ -25,6 +25,7 @@ export const Message = (props: MessageProps): React.ReactElement => {
     nicknamesMap,
     setQuoteMessage,
     renderUserMentionItem,
+    filterEmojiCategoryIds,
     onQuoteMessageClick,
     onReplyInThreadClick,
     onMessageAnimated,
@@ -66,6 +67,7 @@ export const Message = (props: MessageProps): React.ReactElement => {
       threadReplySelectType={threadReplySelectType ?? ThreadReplySelectType.PARENT}
       nicknamesMap={nicknamesMap}
       renderUserMentionItem={renderUserMentionItem}
+      filterEmojiCategoryIds={filterEmojiCategoryIds}
       scrollToMessage={scrollToMessage}
       toggleReaction={toggleReaction}
       setQuoteMessage={setQuoteMessage}

src/modules/GroupChannel/context/GroupChannelProvider.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
-import type { SendbirdError, User } from '@sendbird/chat';
+import type { EmojiCategory, SendbirdError, User } from '@sendbird/chat';
 import {
   type FileMessage,
   FileMessageCreateParams,
@@ -58,6 +58,7 @@ interface ContextBaseType extends
 
   // Custom
   messageListQueryParams?: MessageListQueryParamsType;
+  filterEmojiCategoryIds?: (message: SendableMessageType) => EmojiCategory['id'][];
 
   // Handlers
   onBeforeSendUserMessage?: OnBeforeHandler<UserMessageCreateParams>;
@@ -136,6 +137,7 @@ export const GroupChannelProvider = (props: GroupChannelProviderProps) => {
     onSearchClick,
     onQuoteMessageClick,
     renderUserMentionItem,
+    filterEmojiCategoryIds,
   } = props;
 
   // Global context
@@ -358,6 +360,7 @@ export const GroupChannelProvider = (props: GroupChannelProviderProps) => {
         onQuoteMessageClick,
         // ## Custom render
         renderUserMentionItem,
+        filterEmojiCategoryIds,
 
         // Internal Interface
         currentChannel,

src/modules/Thread/components/ParentMessageInfo/ParentMessageInfoItem.tsx

@@ -63,6 +63,7 @@ export default function ParentMessageInfoItem({
     emojiContainer,
     nicknamesMap,
     toggleReaction,
+    filterEmojiCategoryIds,
   } = useThreadContext();
   const { isMobile } = useMediaQueryContext();
 
@@ -343,6 +344,7 @@ export default function ParentMessageInfoItem({
             memberNicknamesMap={nicknamesMap}
             toggleReaction={toggleReaction}
             onPressUserProfile={onPressUserProfileHandler}
+            filterEmojiCategoryIds={filterEmojiCategoryIds}
           />
         </div>
       )}

src/modules/Thread/components/ParentMessageInfo/index.tsx

@@ -61,6 +61,7 @@ export default function ParentMessageInfo({
     isMuted,
     isChannelFrozen,
     onBeforeDownloadFileMessage,
+    filterEmojiCategoryIds,
   } = useThreadContext();
   const { isMobile } = useMediaQueryContext();
 
@@ -336,6 +337,7 @@ export default function ParentMessageInfo({
               userId: userId,
               emojiContainer: emojiContainer,
               toggleReaction: toggleReaction,
+              filterEmojiCategoryIds,
             })
           )}
         </div>

src/modules/Thread/components/ThreadList/ThreadListItemContent.tsx

@@ -109,7 +109,7 @@ export default function ThreadListItemContent(props: ThreadListItemContentProps)
       document.getElementById(EMOJI_MENU_ROOT_ID),
     ],
   );
-  const { deleteMessage, onBeforeDownloadFileMessage } = useThreadContext();
+  const { deleteMessage, onBeforeDownloadFileMessage, filterEmojiCategoryIds } = useThreadContext();
 
   const isByMe = (userId === (message as SendableMessageType)?.sender?.userId)
     || ((message as SendableMessageType)?.sendingStatus === 'pending')
@@ -185,6 +185,7 @@ export default function ThreadListItemContent(props: ThreadListItemContentProps)
                   userId: userId,
                   emojiContainer: emojiContainer,
                   toggleReaction: toggleReaction,
+                  filterEmojiCategoryIds,
                 })}
               </>
             )}
@@ -260,6 +261,7 @@ export default function ThreadListItemContent(props: ThreadListItemContentProps)
                   memberNicknamesMap: nicknamesMap,
                   toggleReaction,
                   onPressUserProfile: onPressUserProfileHandler,
+                  filterEmojiCategoryIds,
                 })
               }
             </div>
@@ -287,6 +289,7 @@ export default function ThreadListItemContent(props: ThreadListItemContentProps)
                 userId: userId,
                 emojiContainer: emojiContainer,
                 toggleReaction: toggleReaction,
+                filterEmojiCategoryIds,
               })
             )}
             {renderMessageMenu({

src/modules/Thread/context/ThreadProvider.tsx

@@ -1,4 +1,5 @@
 import React, { useReducer, useMemo, useEffect } from 'react';
+import { type EmojiCategory } from '@sendbird/chat';
 import { GroupChannel } from '@sendbird/chat/groupChannel';
 import type {
   BaseMessage, FileMessage,
@@ -48,6 +49,7 @@ export interface ThreadProviderProps extends
   onBeforeSendMultipleFilesMessage?: (files: Array<File>, quotedMessage?: SendableMessageType) => MultipleFilesMessageCreateParams;
   onBeforeDownloadFileMessage?: OnBeforeDownloadFileMessageType;
   isMultipleFilesMessageEnabled?: boolean;
+  filterEmojiCategoryIds?: (message: SendableMessageType) => EmojiCategory['id'][];
 }
 export interface ThreadProviderInterface extends ThreadProviderProps, ThreadContextInitialState {
   // hooks for fetching threads
@@ -77,6 +79,7 @@ export const ThreadProvider = (props: ThreadProviderProps) => {
     onBeforeSendMultipleFilesMessage,
     onBeforeDownloadFileMessage,
     isMultipleFilesMessageEnabled,
+    filterEmojiCategoryIds,
   } = props;
   const propsMessage = props?.message;
   const propsParentMessage = getParentMessageFrom(propsMessage);
@@ -265,6 +268,7 @@ export const ThreadProvider = (props: ThreadProviderProps) => {
         isChannelFrozen,
         currentUserId,
         typingMembers,
+        filterEmojiCategoryIds,
       }}
     >
       {/* UserProfileProvider */}

src/ui/ContextMenu/index.scss

@@ -71,6 +71,10 @@
       margin: 4px;
     }
   }
+
+  .sendbird-dropdown__reaction-bar__emptyLabel {
+    width: fit-content;
+  }
 }
 
 .sendbird-dropdown__menu-backdrop {

src/ui/EmojiReactions/ReactionItem.tsx

@@ -18,6 +18,9 @@ import useLongPress from '../../hooks/useLongPress';
 import { LocalizationContext } from '../../lib/LocalizationContext';
 import useSendbirdStateContext from '../../hooks/useSendbirdStateContext';
 import { useMessageContext } from '../../modules/Message/context/MessageProvider';
+import { ModalFooter } from '../Modal';
+import { ButtonTypes } from '../Button';
+import { useGlobalModalContext } from '../../hooks/useModal';
 
 type Props = {
   reaction: Reaction;
@@ -27,6 +30,7 @@ type Props = {
   emojisMap: Map<string, Emoji>;
   channel: Nullable<GroupChannel | OpenChannel>;
   message?: SendableMessageType;
+  isFiltered?: boolean;
 };
 
 export default function ReactionItem({
@@ -37,7 +41,9 @@ export default function ReactionItem({
   emojisMap,
   channel,
   message,
+  isFiltered,
 }: Props) {
+  const { openModal } = useGlobalModalContext();
   const store = useSendbirdStateContext();
   const { isMobile } = useMediaQueryContext();
   const messageStore = useMessageContext();
@@ -49,6 +55,27 @@ export default function ReactionItem({
     && (channel?.isGroupChannel() && !channel.isSuper);
 
   const handleOnClick = () => {
+    if (isFiltered && !reactedByMe) {
+      openModal({
+        modalProps: {
+          titleText: 'Add reaction failed',
+          hideFooter: true,
+          isCloseOnClickOutside: true,
+        },
+        childElement: ({ closeModal }) => (
+          <ModalFooter
+            type={ButtonTypes.PRIMARY}
+            submitText={stringSet.BUTTON__OK}
+            hideCancelButton
+            onCancel={closeModal}
+            onSubmit={closeModal}
+          />
+        ),
+      });
+
+      return;
+    }
+
     setEmojiKey('');
     toggleReaction?.((message ?? messageStore?.message as UserMessage), reaction.key, reactedByMe);
   };

src/ui/EmojiReactions/index.tsx

@@ -1,6 +1,6 @@
 import './index.scss';
-import React, { ReactElement, useRef, useState } from 'react';
-import type { Emoji, EmojiContainer, User } from '@sendbird/chat';
+import React, { ReactElement, useMemo, useRef, useState } from 'react';
+import type { Emoji, EmojiCategory, EmojiContainer, User } from '@sendbird/chat';
 import type { Reaction } from '@sendbird/chat/message';
 import type { GroupChannel } from '@sendbird/chat/groupChannel';
 
@@ -11,7 +11,12 @@ import Icon, { IconTypes, IconColors } from '../Icon';
 import ContextMenu, { EmojiListItems } from '../ContextMenu';
 import { Nullable, SpaceFromTriggerType } from '../../types';
 
-import { getClassName, getEmojiListAll, getEmojiMapAll, SendableMessageType } from '../../utils';
+import {
+  getClassName,
+  getEmojiListByCategoryIds,
+  getEmojiMapAll,
+  SendableMessageType,
+} from '../../utils';
 import { ReactedMembersBottomSheet } from '../MobileMenu/ReactedMembersBottomSheet';
 import ReactionItem from './ReactionItem';
 import { useMediaQueryContext } from '../../lib/MediaQueryContext';
@@ -31,6 +36,7 @@ export interface EmojiReactionsProps {
   isByMe?: boolean;
   toggleReaction?: (message: SendableMessageType, key: string, byMe: boolean) => void;
   onPressUserProfile?: (member: User) => void;
+  filterEmojiCategoryIds?: (message: SendableMessageType) => EmojiCategory['id'][];
 }
 
 const EmojiReactions = ({
@@ -44,6 +50,7 @@ const EmojiReactions = ({
   isByMe = false,
   toggleReaction,
   onPressUserProfile,
+  filterEmojiCategoryIds,
 }: EmojiReactionsProps): ReactElement => {
   let showTheReactedMembers = false;
   try {
@@ -62,6 +69,9 @@ const EmojiReactions = ({
   const [selectedEmojiKey, setSelectedEmojiKey] = useState('');
 
   const emojisMap = getEmojiMapAll(emojiContainer);
+  const filteredEmojis = useMemo(() => {
+    return getEmojiListByCategoryIds(emojiContainer, filterEmojiCategoryIds?.(message));
+  }, [emojiContainer, filterEmojiCategoryIds]);
   const showAddReactionBadge = (message.reactions?.length ?? 0) < emojisMap.size;
 
   return (
@@ -81,6 +91,10 @@ const EmojiReactions = ({
               emojisMap={emojisMap}
               channel={channel}
               message={message}
+              isFiltered={
+                getEmojiListByCategoryIds(emojiContainer, filterEmojiCategoryIds?.(message))
+                  .every(elem => elem.key !== reaction?.key)
+              }
             />
           );
         })
@@ -106,50 +120,54 @@ const EmojiReactions = ({
               />
             </ReactionBadge>
           )}
-          menuItems={(closeDropdown: () => void): ReactElement => (
-            <EmojiListItems
-              parentRef={addReactionRef}
-              parentContainRef={addReactionRef}
-              closeDropdown={closeDropdown}
-              spaceFromTrigger={spaceFromTrigger}
-            >
-              {getEmojiListAll(emojiContainer).map((emoji: Emoji): ReactElement => {
-                const isReacted: boolean = (message?.reactions
-                  ?.find((reaction: Reaction): boolean => reaction.key === emoji.key)?.userIds
-                  ?.some((reactorId: string): boolean => reactorId === userId)) || false;
-                return (
-                  <ReactionButton
-                    key={emoji.key}
-                    width="36px"
-                    height="36px"
-                    selected={isReacted}
-                    onClick={(e): void => {
-                      closeDropdown();
-                      toggleReaction?.(message, emoji.key, isReacted);
-                      e?.stopPropagation();
-                    }}
-                    testID={`ui_emoji_reactions_menu_${emoji.key}`}
-                  >
-                    <ImageRenderer
-                      url={emoji?.url || ''}
-                      width="28px"
-                      height="28px"
-                      placeHolder={({ style }): ReactElement => (
-                        <div style={style}>
-                          <Icon
-                            type={IconTypes.QUESTION}
-                            fillColor={IconColors.ON_BACKGROUND_3}
-                            width="28px"
-                            height="28px"
-                          />
-                        </div>
-                      )}
-                    />
-                  </ReactionButton>
-                );
-              })}
-            </EmojiListItems>
-          )}
+          menuItems={(closeDropdown: () => void): ReactElement => {
+            if (filteredEmojis.length === 0) return null;
+
+            return (
+              <EmojiListItems
+                parentRef={addReactionRef}
+                parentContainRef={addReactionRef}
+                closeDropdown={closeDropdown}
+                spaceFromTrigger={spaceFromTrigger}
+              >
+                {getEmojiListByCategoryIds(emojiContainer, filterEmojiCategoryIds?.(message)).map((emoji: Emoji): ReactElement => {
+                  const isReacted: boolean = (message?.reactions
+                    ?.find((reaction: Reaction): boolean => reaction.key === emoji.key)?.userIds
+                    ?.some((reactorId: string): boolean => reactorId === userId)) || false;
+                  return (
+                    <ReactionButton
+                      key={emoji.key}
+                      width="36px"
+                      height="36px"
+                      selected={isReacted}
+                      onClick={(e): void => {
+                        closeDropdown();
+                        toggleReaction?.(message, emoji.key, isReacted);
+                        e?.stopPropagation();
+                      }}
+                      testID={`ui_emoji_reactions_menu_${emoji.key}`}
+                    >
+                      <ImageRenderer
+                        url={emoji?.url || ''}
+                        width="28px"
+                        height="28px"
+                        placeHolder={({ style }): ReactElement => (
+                          <div style={style}>
+                            <Icon
+                              type={IconTypes.QUESTION}
+                              fillColor={IconColors.ON_BACKGROUND_3}
+                              width="28px"
+                              height="28px"
+                            />
+                          </div>
+                        )}
+                      />
+                    </ReactionButton>
+                  );
+                })}
+              </EmojiListItems>
+            );
+          }}
         />
       )}
       {(isMobile && showAddReactionBadge) && (