diff --git a/src/modules/Channel/components/ChannelUI/index.tsx b/src/modules/Channel/components/ChannelUI/index.tsx
index c69530bfe..16338919e 100644
--- a/src/modules/Channel/components/ChannelUI/index.tsx
+++ b/src/modules/Channel/components/ChannelUI/index.tsx
@@ -9,6 +9,10 @@ import MessageInputWrapper from '../MessageInputWrapper';
 
 export interface ChannelUIProps extends GroupChannelUIBasicProps {
   isLoading?: boolean;
+  /**
+   * Customizes all child components of the message component.
+   * */
+  renderMessage?: GroupChannelUIBasicProps['renderMessage'];
 }
 
 const ChannelUI = (props: ChannelUIProps) => {
diff --git a/src/modules/Channel/components/MessageInputWrapper/index.tsx b/src/modules/Channel/components/MessageInputWrapper/index.tsx
index 024a93357..cae43fe01 100644
--- a/src/modules/Channel/components/MessageInputWrapper/index.tsx
+++ b/src/modules/Channel/components/MessageInputWrapper/index.tsx
@@ -4,14 +4,15 @@ import { getSuggestedReplies } from '../../../../utils';
 import MessageInputWrapperView from '../../../GroupChannel/components/MessageInputWrapper/MessageInputWrapperView';
 import { useChannelContext } from '../../context/ChannelProvider';
 import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
+import { GroupChannelUIBasicProps } from '../../../GroupChannel/components/GroupChannelUI/GroupChannelUIView';
 
 export interface MessageInputWrapperProps {
   value?: string;
   disabled?: boolean;
-  renderFileUploadIcon?: () => React.ReactElement;
-  renderVoiceMessageIcon?: () => React.ReactElement;
-  renderSendMessageIcon?: () => React.ReactElement;
   acceptableMimeTypes?: string[];
+  renderFileUploadIcon?: GroupChannelUIBasicProps['renderFileUploadIcon'];
+  renderVoiceMessageIcon?: GroupChannelUIBasicProps['renderVoiceMessageIcon'];
+  renderSendMessageIcon?: GroupChannelUIBasicProps['renderSendMessageIcon'];
 }
 
 export const MessageInputWrapper = (props: MessageInputWrapperProps) => {
diff --git a/src/modules/Channel/components/MessageList/index.tsx b/src/modules/Channel/components/MessageList/index.tsx
index f27cd6fc1..2c85341ea 100644
--- a/src/modules/Channel/components/MessageList/index.tsx
+++ b/src/modules/Channel/components/MessageList/index.tsx
@@ -23,18 +23,24 @@ import { useOnScrollPositionChangeDetector } from '../../../../hooks/useOnScroll
 
 import { getMessagePartsInfo } from '../../../GroupChannel/components/MessageList/getMessagePartsInfo';
 import { GroupChannelMessageListProps } from '../../../GroupChannel/components/MessageList';
+import { GroupChannelUIBasicProps } from '../../../GroupChannel/components/GroupChannelUI/GroupChannelUIView';
 
 const SCROLL_BOTTOM_PADDING = 50;
 
-export type MessageListProps = GroupChannelMessageListProps;
+export interface MessageListProps extends GroupChannelMessageListProps {
+  /**
+   * Customizes all child components of the message component.
+   * */
+  renderMessage?: GroupChannelUIBasicProps['renderMessage'];
+}
 export const MessageList = ({
   className = '',
   renderMessage,
   renderMessageContent,
-  renderPlaceholderEmpty,
   renderCustomSeparator,
-  renderPlaceholderLoader,
-  renderFrozenNotification,
+  renderPlaceholderLoader = () => <PlaceHolder type={PlaceHolderTypes.LOADING} />,
+  renderPlaceholderEmpty = () => <PlaceHolder className="sendbird-conversation__no-messages" type={PlaceHolderTypes.NO_MESSAGES} />,
+  renderFrozenNotification = () => <FrozenNotification className="sendbird-conversation__messages__notification" />,
 }: MessageListProps) => {
   const {
     allMessages,
@@ -62,9 +68,7 @@ export const MessageList = ({
   } = useChannelContext();
 
   const store = useSendbirdStateContext();
-  const allMessagesFiltered = (typeof filterMessageList === 'function')
-    ? allMessages.filter((filterMessageList as (message: EveryMessage) => boolean))
-    : allMessages;
+  const allMessagesFiltered = typeof filterMessageList === 'function' ? allMessages.filter(filterMessageList as (message: EveryMessage) => boolean) : allMessages;
   const markAsReadScheduler = store.config.markAsReadScheduler;
 
   const [isScrollBottom, setIsScrollBottom] = useState(false);
@@ -80,11 +84,7 @@ export const MessageList = ({
       return;
     }
 
-    const {
-      scrollTop,
-      clientHeight,
-      scrollHeight,
-    } = element;
+    const { scrollTop, clientHeight, scrollHeight } = element;
 
     if (hasMorePrev && isAboutSame(scrollTop, 0, SCROLL_BUFFER)) {
       onScrollCallback(callback);
@@ -94,10 +94,7 @@ export const MessageList = ({
       onScrollDownCallback(callback);
     }
 
-    if (!disableMarkAsRead
-      && isAboutSame(clientHeight + scrollTop, scrollHeight, SCROLL_BUFFER)
-      && !!currentGroupChannel
-    ) {
+    if (!disableMarkAsRead && isAboutSame(clientHeight + scrollTop, scrollHeight, SCROLL_BUFFER) && !!currentGroupChannel) {
       messagesDispatcher({
         type: messageActionTypes.MARK_AS_READ,
         payload: { channel: currentGroupChannel },
@@ -124,8 +121,7 @@ export const MessageList = ({
     const current = scrollRef?.current;
     if (current) {
       const bottom = current.scrollHeight - current.scrollTop - current.offsetHeight;
-      if (scrollBottom < bottom
-        && (!isBottomMessageAffected || scrollBottom < SCROLL_BUFFER)) {
+      if (scrollBottom < bottom && (!isBottomMessageAffected || scrollBottom < SCROLL_BUFFER)) {
         // Move the scroll as much as the height of the message has changed
         current.scrollTop += bottom - scrollBottom;
       }
@@ -165,22 +161,16 @@ export const MessageList = ({
   const { scrollToBottomHandler, scrollBottom } = useSetScrollToBottom({ loading });
 
   if (loading) {
-    return (typeof renderPlaceholderLoader === 'function')
-      ? renderPlaceholderLoader()
-      : <PlaceHolder type={PlaceHolderTypes.LOADING} />;
+    return renderPlaceholderLoader();
   }
+
   if (allMessagesFiltered.length < 1) {
-    if (renderPlaceholderEmpty && typeof renderPlaceholderEmpty === 'function') {
-      return renderPlaceholderEmpty();
-    }
-    return <PlaceHolder className="sendbird-conversation__no-messages" type={PlaceHolderTypes.NO_MESSAGES} />;
+    return renderPlaceholderEmpty();
   }
 
   return (
     <>
-      {
-        !isScrolled && <PlaceHolder type={PlaceHolderTypes.LOADING} />
-      }
+      {!isScrolled && <PlaceHolder type={PlaceHolderTypes.LOADING} />}
       <div className={`sendbird-conversation__messages ${className}`}>
         <div className="sendbird-conversation__scroll-container">
           <div className="sendbird-conversation__padding" />
@@ -193,86 +183,67 @@ export const MessageList = ({
               onScrollReachedEndDetector(e);
             }}
           >
-            {
-              allMessagesFiltered.map((m, idx) => {
-                const {
-                  chainTop,
-                  chainBottom,
-                  hasSeparator,
-                } = getMessagePartsInfo({
-                  allMessages: allMessagesFiltered,
-                  replyType,
-                  isMessageGroupingEnabled,
-                  currentIndex: idx,
-                  currentMessage: m,
-                  currentChannel: currentGroupChannel,
-                });
-                const isByMe = (m as UserMessage)?.sender?.userId === store?.config?.userId;
-                return (
-                  <MessageProvider message={m} key={m?.messageId} isByMe={isByMe}>
-                    <Message
-                      handleScroll={moveScroll}
-                      renderMessage={renderMessage}
-                      renderMessageContent={renderMessageContent}
-                      message={m as EveryMessage}
-                      hasSeparator={hasSeparator}
-                      chainTop={chainTop}
-                      chainBottom={chainBottom}
-                      renderCustomSeparator={renderCustomSeparator}
-                    />
-                  </MessageProvider>
-                );
-              })
-            }
-            {
-              localMessages.map((m, idx) => {
-                const {
-                  chainTop,
-                  chainBottom,
-                } = getMessagePartsInfo({
-                  allMessages: allMessagesFiltered,
-                  replyType,
-                  isMessageGroupingEnabled,
-                  currentIndex: idx,
-                  currentMessage: m,
-                  currentChannel: currentGroupChannel,
-                });
-                const isByMe = (m as UserMessage)?.sender?.userId === store?.config?.userId;
-                return (
-                  <MessageProvider message={m} key={m?.messageId} isByMe={isByMe}>
-                    <Message
-                      handleScroll={moveScroll}
-                      renderMessage={renderMessage}
-                      renderMessageContent={renderMessageContent}
-                      message={m as EveryMessage}
-                      chainTop={chainTop}
-                      chainBottom={chainBottom}
-                      renderCustomSeparator={renderCustomSeparator}
-                    />
-                  </MessageProvider>
-                );
-              })
-            }
-            {
-              !hasMoreNext
+            {allMessagesFiltered.map((m, idx) => {
+              const { chainTop, chainBottom, hasSeparator } = getMessagePartsInfo({
+                allMessages: allMessagesFiltered,
+                replyType,
+                isMessageGroupingEnabled,
+                currentIndex: idx,
+                currentMessage: m,
+                currentChannel: currentGroupChannel,
+              });
+              const isByMe = (m as UserMessage)?.sender?.userId === store?.config?.userId;
+              return (
+                <MessageProvider message={m} key={m?.messageId} isByMe={isByMe}>
+                  <Message
+                    handleScroll={moveScroll}
+                    message={m as EveryMessage}
+                    hasSeparator={hasSeparator}
+                    chainTop={chainTop}
+                    chainBottom={chainBottom}
+                    renderMessageContent={renderMessageContent}
+                    renderCustomSeparator={renderCustomSeparator}
+                    // backward compatibility
+                    renderMessage={renderMessage}
+                  />
+                </MessageProvider>
+              );
+            })}
+            {localMessages.map((m, idx) => {
+              const { chainTop, chainBottom } = getMessagePartsInfo({
+                allMessages: allMessagesFiltered,
+                replyType,
+                isMessageGroupingEnabled,
+                currentIndex: idx,
+                currentMessage: m,
+                currentChannel: currentGroupChannel,
+              });
+              const isByMe = (m as UserMessage)?.sender?.userId === store?.config?.userId;
+              return (
+                <MessageProvider message={m} key={m?.messageId} isByMe={isByMe}>
+                  <Message
+                    handleScroll={moveScroll}
+                    message={m as EveryMessage}
+                    chainTop={chainTop}
+                    chainBottom={chainBottom}
+                    renderMessageContent={renderMessageContent}
+                    renderCustomSeparator={renderCustomSeparator}
+                    // backward compatibility
+                    renderMessage={renderMessage}
+                  />
+                </MessageProvider>
+              );
+            })}
+            {!hasMoreNext
               && store?.config?.groupChannel?.enableTypingIndicator
-              && store?.config?.groupChannel?.typingIndicatorTypes?.has(TypingIndicatorType.Bubble)
-              && <TypingIndicatorBubble
-                typingMembers={typingMembers}
-                handleScroll={moveScroll}
-              />
-            }
+              && store?.config?.groupChannel?.typingIndicatorTypes?.has(TypingIndicatorType.Bubble) && (
+                <TypingIndicatorBubble typingMembers={typingMembers} handleScroll={moveScroll} />
+            )}
             {/* show frozen notifications, */}
             {/* show new message notifications, */}
           </div>
         </div>
-        {
-          currentGroupChannel?.isFrozen && (
-            renderFrozenNotification
-              ? renderFrozenNotification()
-              : <FrozenNotification className="sendbird-conversation__messages__notification" />
-          )
-        }
+        {currentGroupChannel?.isFrozen && renderFrozenNotification()}
         {
           /**
            * Show unread count IFF scroll is not bottom or is bottom but hasNext is true.
@@ -309,12 +280,7 @@ export const MessageList = ({
               tabIndex={0}
               role="button"
             >
-              <Icon
-                width="24px"
-                height="24px"
-                type={IconTypes.CHEVRON_DOWN}
-                fillColor={IconColors.PRIMARY}
-              />
+              <Icon width="24px" height="24px" type={IconTypes.CHEVRON_DOWN} fillColor={IconColors.PRIMARY} />
             </div>
           )
         }
diff --git a/src/modules/GroupChannel/components/GroupChannelUI/GroupChannelUIView.tsx b/src/modules/GroupChannel/components/GroupChannelUI/GroupChannelUIView.tsx
index e5bb4ab51..721e4c377 100644
--- a/src/modules/GroupChannel/components/GroupChannelUI/GroupChannelUIView.tsx
+++ b/src/modules/GroupChannel/components/GroupChannelUI/GroupChannelUIView.tsx
@@ -15,24 +15,66 @@ import type { MessageContentProps } from '../../../../ui/MessageContent';
 
 export interface GroupChannelUIBasicProps {
   // Components
+  /**
+   * A function that customizes the rendering of a loading placeholder component.
+   */
   renderPlaceholderLoader?: () => React.ReactElement;
+  /**
+   * A function that customizes the rendering of a invalid placeholder component.
+   */
   renderPlaceholderInvalid?: () => React.ReactElement;
+  /**
+   * A function that customizes the rendering of an empty placeholder component when there are no messages in the channel.
+   */
   renderPlaceholderEmpty?: () => React.ReactElement;
+  /**
+   * A function that customizes the rendering of a header component.
+   */
   renderChannelHeader?: (props: GroupChannelHeaderProps) => React.ReactElement;
+  /**
+   * A function that customizes the rendering of a message list component.
+   */
   renderMessageList?: (props: GroupChannelMessageListProps) => React.ReactElement;
+  /**
+   * A function that customizes the rendering of a message input component.
+   */
   renderMessageInput?: () => React.ReactElement;
 
   // Sub components
   //  MessageList
+  /**
+   * A function that customizes the rendering of each message component in the message list component.
+   */
   renderMessage?: (props: RenderMessageParamsType) => React.ReactElement;
+  /**
+   * A function that customizes the rendering of the content portion of each message component.
+   */
   renderMessageContent?: (props: MessageContentProps) => React.ReactElement;
+  /**
+   * A function that customizes the rendering of a separator component between messages.
+   */
   renderCustomSeparator?: (props: RenderCustomSeparatorProps) => React.ReactElement;
+  /**
+   * A function that customizes the rendering of a frozen notification component when the channel is frozen.
+   */
   renderFrozenNotification?: () => React.ReactElement;
 
-  //  MessageInput
+  // MessageInput
+  /**
+   * A function that customizes the rendering of the file upload icon in the message input component.
+   */
   renderFileUploadIcon?: () => React.ReactElement;
+  /**
+   * A function that customizes the rendering of the voice message icon in the message input component.
+   */
   renderVoiceMessageIcon?: () => React.ReactElement;
+  /**
+   * A function that customizes the rendering of the send message icon in the message input component.
+   */
   renderSendMessageIcon?: () => React.ReactElement;
+  /**
+   * A function that customizes the rendering of the typing indicator component.
+   */
   renderTypingIndicator?: () => React.ReactElement;
 }
 
diff --git a/src/modules/GroupChannel/components/Message/MessageView.tsx b/src/modules/GroupChannel/components/Message/MessageView.tsx
index 8f798aff1..7fc012ce7 100644
--- a/src/modules/GroupChannel/components/Message/MessageView.tsx
+++ b/src/modules/GroupChannel/components/Message/MessageView.tsx
@@ -28,11 +28,27 @@ export interface MessageProps {
   chainBottom?: boolean;
   handleScroll?: (isBottomMessageAffected?: boolean) => void;
 
-  // for extending
-  renderMessage?: (props: RenderMessageParamsType) => React.ReactElement;
+  /**
+   * Customizes all child components of the message.
+   * */
+  children?: React.ReactNode;
+  /**
+   * A function that customizes the rendering of the content portion of message component.
+   */
   renderMessageContent?: (props: MessageContentProps) => React.ReactElement;
+  /**
+   * A function that customizes the rendering of a separator between messages.
+   */
   renderCustomSeparator?: (props: RenderCustomSeparatorProps) => React.ReactElement;
+  /**
+   * A function that customizes the rendering of the edit input portion of the message component.
+   * */
   renderEditInput?: () => React.ReactElement;
+  /**
+   * @deprecated Please use `children` instead
+   * @description Customizes all child components of the message.
+   * */
+  renderMessage?: (props: RenderMessageParamsType) => React.ReactElement;
 }
 
 export interface MessageViewProps extends MessageProps {
@@ -78,6 +94,7 @@ const MessageView = (props: MessageViewProps) => {
     // MessageProps
     message,
     renderMessage,
+    children,
     renderMessageContent = (props) => <MessageContent {...props} />,
     renderCustomSeparator,
     renderEditInput,
@@ -227,40 +244,55 @@ const MessageView = (props: MessageViewProps) => {
   }, [animatedMessageId, messageScrollRef.current, message.messageId]);
 
   const renderedCustomSeparator = useMemo(() => renderCustomSeparator?.({ message }) ?? null, [message, renderCustomSeparator]);
-  const renderedMessage = useMemo(() => renderMessage?.(props), [message, renderMessage]);
 
-  if (renderedMessage) {
+  const renderChildren = () => {
+    if (children) {
+      return children;
+    }
+
+    if (renderMessage) {
+      const messageProps = { ...props, renderMessage: undefined };
+      return renderMessage(messageProps);
+    }
+
     return (
-      <div
-        // do not delete this data attribute, used for scroll to given message
-        // and also for testing
-        data-sb-message-id={message.messageId}
-        data-sb-created-at={message.createdAt}
-        ref={messageScrollRef}
-        className={getClassName([
-          'sendbird-msg-hoc sendbird-msg--scroll-ref',
-          isAnimated ? 'sendbird-msg-hoc__animated' : '',
-          isHighlighted ? 'sendbird-msg-hoc__highlighted' : '',
-        ])}
-      >
-        {/* date-separator */}
+      <>
+        {/* Message */}
+        {renderMessageContent({
+          className: 'sendbird-message-hoc__message-content',
+          userId,
+          scrollToMessage,
+          channel,
+          message,
+          disabled: !isOnline,
+          chainTop,
+          chainBottom,
+          isReactionEnabled,
+          replyType,
+          threadReplySelectType,
+          nicknamesMap,
+          emojiContainer,
+          showEdit: setShowEdit,
+          showRemove: setShowRemove,
+          showFileViewer: setShowFileViewer,
+          resendMessage,
+          deleteMessage,
+          toggleReaction,
+          setQuoteMessage,
+          onReplyInThread: onReplyInThreadClick,
+          onQuoteMessageClick: onQuoteMessageClick,
+          onMessageHeightChange: handleScroll,
+        })}
         {
-          // TODO: Add message instance as a function parameter
-          hasSeparator
-            && (renderedCustomSeparator || (
-              <DateSeparator>
-                <Label type={LabelTypography.CAPTION_2} color={LabelColors.ONBACKGROUND_2}>
-                  {format(message.createdAt, stringSet.DATE_FORMAT__MESSAGE_LIST__DATE_SEPARATOR, {
-                    locale: dateLocale,
-                  })}
-                </Label>
-              </DateSeparator>
-            ))
+          /** Suggested Replies */
+          shouldRenderSuggestedReplies && <SuggestedReplies replyOptions={getSuggestedReplies(message)} onSendMessage={sendUserMessage} />
         }
-        {renderedMessage}
-      </div>
+        {/* Modal */}
+        {showRemove && renderRemoveMessageModal({ message, onCancel: () => setShowRemove(false) })}
+        {showFileViewer && renderFileViewer({ message: message as FileMessage, onCancel: () => setShowFileViewer(false) })}
+      </>
     );
-  }
+  };
 
   if (showEdit && message?.isUserMessage?.()) {
     return (
@@ -357,7 +389,7 @@ const MessageView = (props: MessageViewProps) => {
         isAnimated ? 'sendbird-msg-hoc__animated' : '',
         isHighlighted ? 'sendbird-msg-hoc__highlighted' : '',
       ])}
-      style={{ marginBottom: '2px' }}
+      style={children || renderMessage ? undefined : { marginBottom: '2px' }}
       data-sb-message-id={message.messageId}
       data-sb-created-at={message.createdAt}
       ref={messageScrollRef}
@@ -373,39 +405,7 @@ const MessageView = (props: MessageViewProps) => {
             </Label>
           </DateSeparator>
         ))}
-      {/* Message */}
-      {renderMessageContent({
-        className: 'sendbird-message-hoc__message-content',
-        userId,
-        scrollToMessage,
-        channel,
-        message,
-        disabled: !isOnline,
-        chainTop,
-        chainBottom,
-        isReactionEnabled,
-        replyType,
-        threadReplySelectType,
-        nicknamesMap,
-        emojiContainer,
-        showEdit: setShowEdit,
-        showRemove: setShowRemove,
-        showFileViewer: setShowFileViewer,
-        resendMessage,
-        deleteMessage,
-        toggleReaction,
-        setQuoteMessage,
-        onReplyInThread: onReplyInThreadClick,
-        onQuoteMessageClick: onQuoteMessageClick,
-        onMessageHeightChange: handleScroll,
-      })}
-      {
-        /** Suggested Replies */
-        shouldRenderSuggestedReplies && <SuggestedReplies replyOptions={getSuggestedReplies(message)} onSendMessage={sendUserMessage} />
-      }
-      {/* Modal */}
-      {showRemove && renderRemoveMessageModal({ message, onCancel: () => setShowRemove(false) })}
-      {showFileViewer && renderFileViewer({ message: message as FileMessage, onCancel: () => setShowFileViewer(false) })}
+      {renderChildren()}
     </div>
   );
 };
diff --git a/src/modules/GroupChannel/components/MessageInputWrapper/index.tsx b/src/modules/GroupChannel/components/MessageInputWrapper/index.tsx
index f773fa48e..5e0fc7861 100644
--- a/src/modules/GroupChannel/components/MessageInputWrapper/index.tsx
+++ b/src/modules/GroupChannel/components/MessageInputWrapper/index.tsx
@@ -4,13 +4,15 @@ import { useGroupChannelContext } from '../../context/GroupChannelProvider';
 import { useIIFE } from '@sendbird/uikit-tools';
 import { getSuggestedReplies, isSendableMessage } from '../../../../utils';
 import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
+import { GroupChannelUIBasicProps } from '../GroupChannelUI/GroupChannelUIView';
 
 export interface MessageInputWrapperProps {
   value?: string;
   disabled?: boolean;
-  renderFileUploadIcon?: () => React.ReactElement;
-  renderVoiceMessageIcon?: () => React.ReactElement;
-  renderSendMessageIcon?: () => React.ReactElement;
+  acceptableMimeTypes?: string[];
+  renderFileUploadIcon?: GroupChannelUIBasicProps['renderFileUploadIcon'];
+  renderVoiceMessageIcon?: GroupChannelUIBasicProps['renderVoiceMessageIcon'];
+  renderSendMessageIcon?: GroupChannelUIBasicProps['renderSendMessageIcon'];
 }
 
 export const MessageInputWrapper = (props: MessageInputWrapperProps) => {
diff --git a/src/modules/GroupChannel/components/MessageList/index.tsx b/src/modules/GroupChannel/components/MessageList/index.tsx
index 776e3431f..26ce8d568 100644
--- a/src/modules/GroupChannel/components/MessageList/index.tsx
+++ b/src/modules/GroupChannel/components/MessageList/index.tsx
@@ -3,8 +3,8 @@ import React, { useEffect, useState } from 'react';
 import type { Member } from '@sendbird/chat/groupChannel';
 import { useGroupChannelHandler } from '@sendbird/uikit-tools';
 
-import type { CoreMessageType } from '../../../../utils';
-import { EveryMessage, RenderCustomSeparatorProps, RenderMessageParamsType, TypingIndicatorType } from '../../../../types';
+import { CoreMessageType, isSendableMessage } from '../../../../utils';
+import { EveryMessage, TypingIndicatorType } from '../../../../types';
 
 import PlaceHolder, { PlaceHolderTypes } from '../../../../ui/PlaceHolder';
 import Icon, { IconColors, IconTypes } from '../../../../ui/Icon';
@@ -19,25 +19,44 @@ import { useScrollBehavior } from './hooks/useScrollBehavior';
 import TypingIndicatorBubble from '../../../../ui/TypingIndicatorBubble';
 import { useGroupChannelContext } from '../../context/GroupChannelProvider';
 import { getComponentKeyFromMessage } from '../../context/utils';
-import type { MessageContentProps } from '../../../../ui/MessageContent';
+import { GroupChannelUIBasicProps } from '../GroupChannelUI/GroupChannelUIView';
 
 export interface GroupChannelMessageListProps {
   className?: string;
-  renderMessage?: (props: RenderMessageParamsType) => React.ReactElement;
-  renderMessageContent?: (props: MessageContentProps) => React.ReactElement;
-  renderPlaceholderEmpty?: () => React.ReactElement;
-  renderCustomSeparator?: (props: RenderCustomSeparatorProps) => React.ReactElement;
-  renderPlaceholderLoader?: () => React.ReactElement;
-  renderFrozenNotification?: () => React.ReactElement;
+  /**
+   * A function that customizes the rendering of each message component in the message list component.
+   */
+  renderMessage?: GroupChannelUIBasicProps['renderMessage'];
+  /**
+   * A function that customizes the rendering of the content portion of each message component.
+   */
+  renderMessageContent?: GroupChannelUIBasicProps['renderMessageContent'];
+  /**
+   * A function that customizes the rendering of a separator component between messages.
+   */
+  renderCustomSeparator?: GroupChannelUIBasicProps['renderCustomSeparator'];
+  /**
+   * A function that customizes the rendering of a loading placeholder component.
+   */
+  renderPlaceholderLoader?: GroupChannelUIBasicProps['renderPlaceholderLoader'];
+  /**
+   * A function that customizes the rendering of an empty placeholder component when there are no messages in the channel.
+   */
+  renderPlaceholderEmpty?: GroupChannelUIBasicProps['renderPlaceholderEmpty'];
+  /**
+   * A function that customizes the rendering of a frozen notification component when the channel is frozen.
+   */
+  renderFrozenNotification?: GroupChannelUIBasicProps['renderFrozenNotification'];
 }
 
 export const MessageList = ({
   className = '',
-  renderMessage,
-  renderPlaceholderEmpty,
+  renderMessage = (props) => <Message {...props} />,
+  renderMessageContent,
   renderCustomSeparator,
-  renderPlaceholderLoader,
-  renderFrozenNotification,
+  renderPlaceholderLoader = () => <PlaceHolder type={PlaceHolderTypes.LOADING} />,
+  renderPlaceholderEmpty = () => <PlaceHolder className="sendbird-conversation__no-messages" type={PlaceHolderTypes.NO_MESSAGES} />,
+  renderFrozenNotification = () => <FrozenNotification className="sendbird-conversation__messages__notification" />,
 }: GroupChannelMessageListProps) => {
   const {
     channelUrl,
@@ -88,9 +107,7 @@ export const MessageList = ({
   const renderer = {
     frozenNotification() {
       if (!currentChannel || !currentChannel.isFrozen) return null;
-
-      if (renderFrozenNotification) return renderFrozenNotification();
-      return <FrozenNotification className="sendbird-conversation__messages__notification" />;
+      return renderFrozenNotification();
     },
     unreadMessagesNotification() {
       if (isScrollBottomReached || !unreadSinceDate) return null;
@@ -121,13 +138,11 @@ export const MessageList = ({
   };
 
   if (loading) {
-    if (renderPlaceholderLoader) return renderPlaceholderLoader();
-    return <PlaceHolder type={PlaceHolderTypes.LOADING} />;
+    return renderPlaceholderLoader();
   }
 
   if (messages.length === 0) {
-    if (renderPlaceholderEmpty) return renderPlaceholderEmpty();
-    return <PlaceHolder className="sendbird-conversation__no-messages" type={PlaceHolderTypes.NO_MESSAGES} />;
+    return renderPlaceholderEmpty();
   }
 
   return (
@@ -145,18 +160,18 @@ export const MessageList = ({
                 currentMessage: message as CoreMessageType,
                 currentChannel,
               });
-              const isOutgoingMessage = message.isUserMessage() && message.sender.userId === store.config.userId;
+              const isOutgoingMessage = isSendableMessage(message) && message.sender.userId === store.config.userId;
               return (
                 <MessageProvider message={message} key={getComponentKeyFromMessage(message)} isByMe={isOutgoingMessage}>
-                  <Message
-                    handleScroll={onMessageContentSizeChanged}
-                    renderMessage={renderMessage}
-                    message={message as EveryMessage}
-                    hasSeparator={hasSeparator}
-                    chainTop={chainTop}
-                    chainBottom={chainBottom}
-                    renderCustomSeparator={renderCustomSeparator}
-                  />
+                  {renderMessage({
+                    handleScroll: onMessageContentSizeChanged,
+                    message: message as EveryMessage,
+                    hasSeparator,
+                    chainTop,
+                    chainBottom,
+                    renderMessageContent,
+                    renderCustomSeparator,
+                  })}
                 </MessageProvider>
               );
             })}