fix: Add missing props renderMessageContent (#921)

### Issue
The `renderMessage` and the `renderMessageContent` props are diffrent.
Customers can easily customize the `renderMessageContent` after we
provide several sub-components of the `MessageContent` component.

### Change Log
* Add missing props `renderMessageContent` in Channel

### Fix
* Add missing props `renderMessageContent` in Channel
* Create a util function, `omitObjectProperties`

#### How to customize MessageContent in Channel?
1. Customize with `renderMessage`
```tsx
<Channel
  renderMessage={(props) => (
    <Message
      {...props}
      renderMessageContent={(props) => (
        <MessageContent {...props} />
      )}
    />
  )}
/>
```

2. **[More Simple Way]** Customize with `renderMessageContent`
```tsx
<Channel
  renderMessageContent={(props) => (
    <MessageContent {...props} />
  )}
/>
```

Author: HoonBaek

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

@@ -1,24 +1,26 @@
 import './channel-ui.scss';
 
 import React from 'react';
-import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
 
+import type { MessageContentProps } from '../../../../ui/MessageContent';
+import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
 import { useChannelContext } from '../../context/ChannelProvider';
 import PlaceHolder, { PlaceHolderTypes } from '../../../../ui/PlaceHolder';
 import ConnectionStatus from '../../../../ui/ConnectionStatus';
 import ChannelHeader from '../ChannelHeader';
 import MessageList from '../MessageList';
 import TypingIndicator from '../TypingIndicator';
 import MessageInputWrapper from '../MessageInput';
-import { RenderCustomSeparatorProps, RenderMessageProps, TypingIndicatorType } from '../../../../types';
+import { RenderCustomSeparatorProps, RenderMessageParamsType, TypingIndicatorType } from '../../../../types';
 
 export interface ChannelUIProps {
   isLoading?: boolean;
   renderPlaceholderLoader?: () => React.ReactElement;
   renderPlaceholderInvalid?: () => React.ReactElement;
   renderPlaceholderEmpty?: () => React.ReactElement;
   renderChannelHeader?: () => React.ReactElement;
-  renderMessage?: (props: RenderMessageProps) => React.ReactElement;
+  renderMessage?: (props: RenderMessageParamsType) => React.ReactElement;
+  renderMessageContent?: (props: MessageContentProps) => React.ReactElement;
   renderMessageInput?: () => React.ReactElement;
   renderFileUploadIcon?: () => React.ReactElement;
   renderVoiceMessageIcon?: () => React.ReactElement;
@@ -35,6 +37,7 @@ const ChannelUI: React.FC<ChannelUIProps> = ({
   renderPlaceholderEmpty,
   renderChannelHeader,
   renderMessage,
+  renderMessageContent,
   renderMessageInput,
   renderTypingIndicator,
   renderCustomSeparator,
@@ -108,6 +111,7 @@ const ChannelUI: React.FC<ChannelUIProps> = ({
       <MessageList
         className="sendbird-conversation__message-list"
         renderMessage={renderMessage}
+        renderMessageContent={renderMessageContent}
         renderPlaceholderEmpty={renderPlaceholderEmpty}
         renderCustomSeparator={renderCustomSeparator}
         renderPlaceholderLoader={renderPlaceholderLoader}

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

@@ -22,40 +22,42 @@ import { MAX_USER_MENTION_COUNT, MAX_USER_SUGGESTION_COUNT } from '../../context
 import DateSeparator from '../../../../ui/DateSeparator';
 import Label, { LabelTypography, LabelColors } from '../../../../ui/Label';
 import MessageInput from '../../../../ui/MessageInput';
-import MessageContent from '../../../../ui/MessageContent';
+import MessageContent, { type MessageContentProps } from '../../../../ui/MessageContent';
 import FileViewer from '../FileViewer';
 import RemoveMessageModal from '../RemoveMessageModal';
 import { MessageInputKeys } from '../../../../ui/MessageInput/const';
-import { EveryMessage, RenderCustomSeparatorProps, RenderMessageProps } from '../../../../types';
+import { EveryMessage, RenderCustomSeparatorProps, RenderMessageParamsType } from '../../../../types';
 import { useLocalization } from '../../../../lib/LocalizationContext';
 import { useDirtyGetMentions } from '../../../Message/hooks/useDirtyGetMentions';
 import SuggestedReplies from '../SuggestedReplies';
+import { omitObjectProperties } from '../../../../utils/omitObjectProperty';
 
-type MessageUIProps = {
+export interface MessageUIProps {
   message: EveryMessage;
   hasSeparator?: boolean;
   chainTop?: boolean;
   chainBottom?: boolean;
   handleScroll?: (isBottomMessageAffected?: boolean) => void;
   // for extending
-  renderMessage?: (props: RenderMessageProps) => React.ReactElement;
+  renderMessage?: (props: RenderMessageParamsType) => React.ReactElement;
+  renderMessageContent?: (props: MessageContentProps) => React.ReactElement;
   renderCustomSeparator?: (props: RenderCustomSeparatorProps) => React.ReactElement;
   renderEditInput?: () => React.ReactElement;
-  renderMessageContent?: () => React.ReactElement;
-};
+}
 
 // todo: Refactor this component, is too complex now
-const Message = ({
-  message,
-  hasSeparator,
-  chainTop,
-  chainBottom,
-  handleScroll,
-  renderCustomSeparator,
-  renderEditInput,
-  renderMessage,
-  renderMessageContent,
-}: MessageUIProps): React.ReactElement => {
+const Message = (props: MessageUIProps): React.ReactElement => {
+  const {
+    message,
+    hasSeparator,
+    chainTop,
+    chainBottom,
+    handleScroll,
+    renderCustomSeparator,
+    renderEditInput,
+    renderMessage,
+    renderMessageContent = (props) => (<MessageContent {...props} />),
+  } = props;
   const { dateLocale, stringSet } = useLocalization();
   const globalStore = useSendbirdStateContext();
 
@@ -69,6 +71,7 @@ const Message = ({
   const maxUserMentionCount = userMention?.maxMentionCount || MAX_USER_MENTION_COUNT;
   const maxUserSuggestionCount = userMention?.maxSuggestionCount || MAX_USER_SUGGESTION_COUNT;
 
+  const context = useChannelContext();
   const {
     initialized,
     currentGroupChannel,
@@ -94,7 +97,7 @@ const Message = ({
     onMessageHighlighted,
     sendMessage,
     localMessages,
-  } = useChannelContext();
+  } = context;
   const [showEdit, setShowEdit] = useState(false);
   const [showRemove, setShowRemove] = useState(false);
   const [showFileViewer, setShowFileViewer] = useState(false);
@@ -191,20 +194,10 @@ const Message = ({
       clearTimeout(messageAnimatedTimeout);
     };
   }, [animatedMessageId, messageScrollRef.current, message.messageId, onMessageAnimated]);
-  const renderedMessage = useMemo(() => {
-    return renderMessage?.({
-      message,
-      chainTop,
-      chainBottom,
-    });
-  }, [message, renderMessage]);
-  const renderedCustomSeparator = useMemo(() => {
-    if (renderCustomSeparator) {
-      return renderCustomSeparator?.({ message: message });
-    }
-    return null;
-  }, [message, renderCustomSeparator]);
 
+  // Operate `renderMessage` props
+  const renderedCustomSeparator = useMemo(() => renderCustomSeparator?.({ message: message }) ?? null, [message, renderCustomSeparator]);
+  const renderedMessage = useMemo(() => renderMessage?.(omitObjectProperties(props, ['renderMessage'])), [message, renderMessage]);
   if (renderedMessage) {
     return (
       <div
@@ -346,35 +339,31 @@ const Message = ({
         ))
       }
       {/* Message */}
-      {
-        renderMessageContent?.() || (
-          <MessageContent
-            className="sendbird-message-hoc__message-content"
-            userId={userId}
-            scrollToMessage={scrollToMessage}
-            channel={currentGroupChannel}
-            message={message}
-            disabled={!isOnline}
-            chainTop={chainTop}
-            chainBottom={chainBottom}
-            isReactionEnabled={isReactionEnabled}
-            replyType={replyType}
-            threadReplySelectType={threadReplySelectType}
-            nicknamesMap={nicknamesMap}
-            emojiContainer={emojiContainer}
-            showEdit={setShowEdit}
-            showRemove={setShowRemove}
-            showFileViewer={setShowFileViewer}
-            resendMessage={resendMessage}
-            deleteMessage={deleteMessage}
-            toggleReaction={toggleReaction}
-            setQuoteMessage={setQuoteMessage}
-            onReplyInThread={onReplyInThread}
-            onQuoteMessageClick={onQuoteMessageClick}
-            onMessageHeightChange={handleScroll}
-          />
-        )
-      }
+      {renderMessageContent({
+        className: 'sendbird-message-hoc__message-content',
+        userId,
+        scrollToMessage,
+        channel: currentGroupChannel,
+        message,
+        disabled: !isOnline,
+        chainTop,
+        chainBottom,
+        isReactionEnabled,
+        replyType,
+        threadReplySelectType,
+        nicknamesMap,
+        emojiContainer,
+        showEdit: setShowEdit,
+        showRemove: setShowRemove,
+        showFileViewer: setShowFileViewer,
+        resendMessage,
+        deleteMessage,
+        toggleReaction,
+        setQuoteMessage,
+        onReplyInThread,
+        onQuoteMessageClick: onQuoteMessageClick,
+        onMessageHeightChange: handleScroll,
+      })}
       {/** Suggested Replies */}
       {message.messageId === currentGroupChannel?.lastMessage?.messageId
         // the options should appear only when there's no failed or pending messages

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

@@ -1,19 +1,20 @@
 import './message-list.scss';
 
 import React, { useState } from 'react';
+import type { UserMessage } from '@sendbird/chat/message';
 
+import type { MessageContentProps } from '../../../../ui/MessageContent';
 import { useChannelContext } from '../../context/ChannelProvider';
 import PlaceHolder, { PlaceHolderTypes } from '../../../../ui/PlaceHolder';
 import Icon, { IconColors, IconTypes } from '../../../../ui/Icon';
 import Message from '../Message';
-import { EveryMessage, RenderCustomSeparatorProps, RenderMessageProps, TypingIndicatorType } from '../../../../types';
+import { EveryMessage, RenderCustomSeparatorProps, RenderMessageParamsType, TypingIndicatorType } from '../../../../types';
 import { isAboutSame } from '../../context/utils';
 import { getMessagePartsInfo } from './getMessagePartsInfo';
 import UnreadCount from '../UnreadCount';
 import FrozenNotification from '../FrozenNotification';
 import { SCROLL_BUFFER } from '../../../../utils/consts';
 import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
-import { UserMessage } from '@sendbird/chat/message';
 import { MessageProvider } from '../../../Message/context/MessageProvider';
 import { useHandleOnScrollCallback } from '../../../../hooks/useHandleOnScrollCallback';
 import { useSetScrollToBottom } from './hooks/useSetScrollToBottom';
@@ -25,7 +26,8 @@ const SCROLL_BOTTOM_PADDING = 50;
 
 export interface MessageListProps {
   className?: string;
-  renderMessage?: (props: RenderMessageProps) => React.ReactElement;
+  renderMessage?: (props: RenderMessageParamsType) => React.ReactElement;
+  renderMessageContent?: (props: MessageContentProps) => React.ReactElement;
   renderPlaceholderEmpty?: () => React.ReactElement;
   renderCustomSeparator?: (props: RenderCustomSeparatorProps) => React.ReactElement;
   renderPlaceholderLoader?: () => React.ReactElement;
@@ -35,6 +37,7 @@ export interface MessageListProps {
 const MessageList: React.FC<MessageListProps> = ({
   className = '',
   renderMessage,
+  renderMessageContent,
   renderPlaceholderEmpty,
   renderCustomSeparator,
   renderPlaceholderLoader,
@@ -217,6 +220,7 @@ const MessageList: React.FC<MessageListProps> = ({
                     <Message
                       handleScroll={moveScroll}
                       renderMessage={renderMessage}
+                      renderMessageContent={renderMessageContent}
                       message={m as EveryMessage}
                       hasSeparator={hasSeparator}
                       chainTop={chainTop}
@@ -246,6 +250,7 @@ const MessageList: React.FC<MessageListProps> = ({
                     <Message
                       handleScroll={moveScroll}
                       renderMessage={renderMessage}
+                      renderMessageContent={renderMessageContent}
                       message={m as EveryMessage}
                       chainTop={chainTop}
                       chainBottom={chainBottom}

src/modules/Channel/index.tsx

@@ -49,6 +49,7 @@ const Channel: React.FC<ChannelProps> = (props: ChannelProps) => {
         renderPlaceholderEmpty={props?.renderPlaceholderEmpty}
         renderChannelHeader={props?.renderChannelHeader}
         renderMessage={props?.renderMessage}
+        renderMessageContent={props?.renderMessageContent}
         renderMessageInput={props?.renderMessageInput}
         renderTypingIndicator={props?.renderTypingIndicator}
         renderCustomSeparator={props?.renderCustomSeparator}

src/types.ts

@@ -8,6 +8,7 @@ import type {
   UserMessage,
 } from '@sendbird/chat/message';
 import { CoreMessageType } from './utils';
+import { MessageUIProps } from './modules/Channel/components/Message';
 
 export type ReplyType = 'NONE' | 'QUOTE_REPLY' | 'THREAD';
 export type Nullable<T> = T | null;
@@ -54,11 +55,14 @@ export interface ClientMessage {
   _sender: User;
 }
 
+// This is used for OpenChannel.renderMessage
 export interface RenderMessageProps {
   message: CoreMessageType;
   chainTop: boolean;
   chainBottom: boolean;
 }
+// This is used for GroupChannel.renderMessage
+export type RenderMessageParamsType = Omit<MessageUIProps, 'renderMessage'>;
 
 export interface RenderCustomSeparatorProps {
   message: CoreMessageType;

src/utils/__tests__/omitObjectProperties.spec.ts

@@ -0,0 +1,38 @@
+import { omitObjectProperties } from '../omitObjectProperty';
+
+const mockObject = {
+  a: 'a',
+  b: 'b',
+  c: 'c',
+  one: 1,
+  two: 2,
+  null: null,
+  undefined: undefined,
+};
+
+describe('Global-utils/omitObjectProperties', () => {
+  it('should omit the existing properties from object', () => {
+    expect(omitObjectProperties(mockObject, ['a', 'two', 'null', 'undefined']))
+      .toEqual({
+        b: 'b',
+        c: 'c',
+        one: 1,
+      });
+  });
+
+  it('should not omit not-existing properties', () => {
+    expect(omitObjectProperties(mockObject, ['d', 'three', 'NaN']))
+      .toEqual(mockObject);
+  });
+
+  it('should not affect to the original object', () => {
+    const clone = { ...mockObject };
+    expect(omitObjectProperties(mockObject, ['a', 'two', 'null', 'undefined']))
+      .toEqual({
+        b: 'b',
+        c: 'c',
+        one: 1,
+      });
+    expect(mockObject).toEqual(clone);
+  });
+});

src/utils/omitObjectProperty.ts

@@ -0,0 +1,6 @@
+export function omitObjectProperties<O extends Record<string, any>>(obj: O, properties: string[]) {
+  properties.forEach((propertyName) => {
+    if (Object.hasOwn(obj, propertyName)) delete obj[propertyName];
+  });
+  return obj;
+}