From 1ee2bffa747c276ef560fe5325cce7b7f3cfc384 Mon Sep 17 00:00:00 2001
From: Sravan S <sravan.sukumarakurup@sendbird.com>
Date: Tue, 16 May 2023 10:23:20 +0900
Subject: [PATCH 1/4] feat: Mobile optimization - storybook login page (#539)

Fixes: https://sendbird.atlassian.net/browse/UIKIT-3857
---
 src/modules/App/stories/integrated-app.scss   | 38 +++++++++++++++++--
 src/modules/App/stories/integrated.stories.js | 33 +++++++++++-----
 2 files changed, 58 insertions(+), 13 deletions(-)

diff --git a/src/modules/App/stories/integrated-app.scss b/src/modules/App/stories/integrated-app.scss
index 3fea44195..47fc83639 100644
--- a/src/modules/App/stories/integrated-app.scss
+++ b/src/modules/App/stories/integrated-app.scss
@@ -20,6 +20,9 @@
   height: 120px;
   justify-content: center;
   align-items: center;
+  @include mobile() {
+    height: 80px;
+  }
 }
 
 .sendbird-integrated-sample-app__moderations {
@@ -27,8 +30,7 @@
   padding: 18px;
   display: flex;
   flex-direction: column;
-  margin-left: calc((100% - 520px) / 2);
-  margin-right: calc((100% - 520px) / 2);
+  align-items: center;
   @include themed() {
     background-color: t(bg-1);
   }
@@ -48,19 +50,49 @@
   @include themed() {
     border-bottom: 1px solid t(on-bg-1);
   }
+  @include mobile() {
+    flex-direction: column;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+}
+.sendbird-integrated-sample-app__moderations__option--toggle {
+  @include mobile() {
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 100%;
+    justify-content: space-between
+  }
+  .sendbird-integrated-sample-app__moderations__option__name,
+  .sendbird-integrated-sample-app__moderations__option__input {
+    @include mobile() {
+      width: auto;
+    }
+  }
+  .sendbird-integrated-sample-app-toggle-button {
+    text-align: right;
+  }
 }
 .sendbird-integrated-sample-app__moderations__option__name {
   width: 140px;
+  @include mobile() {
+    width: 100%;
+  }
 }
 .sendbird-integrated-sample-app__moderations__option__input {
   margin-left: 20px;
+  @include mobile() {
+    width: 100%;
+    margin-left: 0px;
+  }
 }
 
 .sendbird-integrated-app-submit-area {
   display: flex;
   width: 100%;
   justify-content: center;
-  gap: 10px
+  gap: 10px;
+  margin: 16px 0px;
 }
 
 // text input
diff --git a/src/modules/App/stories/integrated.stories.js b/src/modules/App/stories/integrated.stories.js
index e8e3e1643..efa1c3774 100644
--- a/src/modules/App/stories/integrated.stories.js
+++ b/src/modules/App/stories/integrated.stories.js
@@ -8,6 +8,7 @@ import Streamnig from '../../OpenChannelApp/Streaming';
 import Label, { LabelTypography, LabelColors } from '../../../ui/Label';
 import Icon, { IconTypes, IconColors } from '../../../ui/Icon';
 import Button, { ButtonSizes, ButtonTypes } from '../../../ui/Button';
+import { MediaQueryProvider } from '../../../lib/MediaQueryContext';
 
 const STORAGE_KEY = 'sendbird-integrated-app-v1-groupchannel';
 
@@ -45,12 +46,22 @@ const ChannelType = {
   LIVE: 'LIVE',
 };
 
+const TYPES = {
+  TOGGLE: 'TOGGLE',
+};
+
 const ModerationOptionItem = ({
   subTitle,
   children,
+  type,
 }) => {
   return (
-    <div className='sendbird-integrated-sample-app__moderations__option'>
+    <div
+      className={`
+        sendbird-integrated-sample-app__moderations__option
+        ${type === TYPES.TOGGLE ? 'sendbird-integrated-sample-app__moderations__option--toggle' : '' }
+      `}
+    >
       <div className='sendbird-integrated-sample-app__moderations__option__name'>
         <Label
           type={LabelTypography.SUBTITLE_1}
@@ -280,6 +291,8 @@ export const GroupChannel = () => {
         backgroundColor: sampleOptions.theme === 'light' ? 'white' : 'black'
       }}
     >
+      {/* We need it for helping QA team on mobile */}
+      <MediaQueryProvider />
       <div className='sendbird-integrated-sample-app__title'>
         <Label
           type={LabelTypography.H_1}
@@ -348,7 +361,7 @@ export const GroupChannel = () => {
               }}
             />
           </ModerationOptionItem>
-          <ModerationOptionItem subTitle="Message Search">
+          <ModerationOptionItem subTitle="Message Search" type={TYPES.TOGGLE}>
             <ToggleButton
               isEnabled={sampleOptions.messageSearch}
               onClick={() => {
@@ -359,7 +372,7 @@ export const GroupChannel = () => {
               }}
             />
           </ModerationOptionItem>
-          <ModerationOptionItem subTitle="Edit User Profile">
+          <ModerationOptionItem subTitle="Edit User Profile" type={TYPES.TOGGLE}>
             <ToggleButton
               isEnabled={sampleOptions.editUserProfile}
               onClick={() => {
@@ -370,7 +383,7 @@ export const GroupChannel = () => {
               }}
             />
           </ModerationOptionItem>
-          <ModerationOptionItem subTitle="Message Grouping">
+          <ModerationOptionItem subTitle="Message Grouping" type={TYPES.TOGGLE}>
             <ToggleButton
               isEnabled={sampleOptions.messageGrouping}
               onClick={() => {
@@ -381,7 +394,7 @@ export const GroupChannel = () => {
               }}
             />
           </ModerationOptionItem>
-          <ModerationOptionItem subTitle="Emoji Reaction">
+          <ModerationOptionItem subTitle="Emoji Reaction" type={TYPES.TOGGLE}>
             <ToggleButton
               isEnabled={sampleOptions.emojiReaction}
               onClick={() => {
@@ -392,7 +405,7 @@ export const GroupChannel = () => {
               }}
             />
           </ModerationOptionItem>
-          <ModerationOptionItem subTitle="Voice Message">
+          <ModerationOptionItem subTitle="Voice Message" type={TYPES.TOGGLE}>
             <ToggleButton
               isEnabled={sampleOptions.isVoiceMessageEnabled}
               onClick={() => {
@@ -403,7 +416,7 @@ export const GroupChannel = () => {
               }}
             />
           </ModerationOptionItem>
-          <ModerationOptionItem subTitle="Mention">
+          <ModerationOptionItem subTitle="Mention" type={TYPES.TOGGLE}>
             <ToggleButton
               isEnabled={sampleOptions.mention}
               onClick={() => {
@@ -414,7 +427,7 @@ export const GroupChannel = () => {
               }}
             />
           </ModerationOptionItem>
-          <ModerationOptionItem subTitle="Typing Indicator">
+          <ModerationOptionItem subTitle="Typing Indicator" type={TYPES.TOGGLE}>
             <ToggleButton
               isEnabled={sampleOptions.typingIndicator}
               onClick={() => {
@@ -425,7 +438,7 @@ export const GroupChannel = () => {
               }}
             />
           </ModerationOptionItem>
-          <ModerationOptionItem subTitle="Message Status">
+          <ModerationOptionItem subTitle="Message Status" type={TYPES.TOGGLE}>
             <ToggleButton
               isEnabled={sampleOptions.messageStatus}
               onClick={() => {
@@ -436,7 +449,7 @@ export const GroupChannel = () => {
               }}
             />
           </ModerationOptionItem>
-          <ModerationOptionItem subTitle="Image Compression">
+          <ModerationOptionItem subTitle="Image Compression" type={TYPES.TOGGLE}>
             <ToggleButton
               isEnabled={sampleOptions.imageCompression}
               onClick={() => {

From 7a3702cec3a25b21c0f7003f785932dfd60d273b Mon Sep 17 00:00:00 2001
From: HoonBaek <hoon@sendbird.com>
Date: Fri, 19 May 2023 14:23:24 +0900
Subject: [PATCH 2/4] feature: Thread for mobile screen (#530)

### Description Of Changes

* Apply MobileMenu/BottomSheet to the components: ParentMessageInfo and
ThreadListItem
* Apply the Thread module to the MobileLayout component
* Add new Icon Thread

[UIKIT-3476](https://sendbird.atlassian.net/browse/UIKIT-3476)
---
 src/lib/MediaQueryContext.tsx                 | 12 +--
 src/modules/App/AppLayout.tsx                 |  8 +-
 src/modules/App/DesktopLayout.tsx             | 18 ++---
 src/modules/App/MobileLayout.tsx              | 56 ++++++++++++--
 src/modules/App/mobile.scss                   | 11 +++
 src/modules/App/types.ts                      | 26 +++----
 .../Channel/context/ChannelProvider.tsx       |  6 +-
 src/modules/MessageSearch/index.tsx           |  2 +-
 .../components/ParentMessageInfo/index.tsx    | 73 +++++++++++++++----
 .../ThreadList/ThreadListItemContent.tsx      | 44 ++++++++++-
 src/modules/Thread/context/ThreadProvider.tsx |  2 +-
 src/modules/Thread/context/utils.ts           |  7 +-
 src/svgs/icon-thread.svg                      |  4 +
 src/ui/Icon/index.jsx                         |  2 +
 src/ui/Icon/type.ts                           |  1 +
 src/ui/Icon/utils.ts                          |  1 +
 src/ui/Label/index.scss                       |  5 ++
 src/ui/MessageContent/index.tsx               |  7 ++
 src/ui/MobileMenu/MobileBottomSheet.tsx       | 29 +++++++-
 src/ui/MobileMenu/index.tsx                   |  5 ++
 src/ui/MobileMenu/types.ts                    |  2 +
 src/utils/index.ts                            |  4 +-
 22 files changed, 260 insertions(+), 65 deletions(-)
 create mode 100644 src/svgs/icon-thread.svg

diff --git a/src/lib/MediaQueryContext.tsx b/src/lib/MediaQueryContext.tsx
index af7987727..e8c4af7ad 100644
--- a/src/lib/MediaQueryContext.tsx
+++ b/src/lib/MediaQueryContext.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import type { Logger } from './SendbirdState';
 
-const DEFAULT_MOBILE = '0px';
+const DEFAULT_MOBILE = '768px';
 const MOBILE_CLASSNAME = 'sendbird--mobile-mode';
 
 const MediaQueryContext = React.createContext({
@@ -11,14 +11,14 @@ const MediaQueryContext = React.createContext({
 
 export interface MediaQueryProviderProps {
   children: React.ReactElement;
-  mediaQueryBreakPoint?: string | boolean;
+  mediaQueryBreakPoint?: string;
   logger?: Logger;
 }
 
 const addClassNameToBody = () => {
   try {
     const body = document.querySelector('body');
-    body.classList.add(MOBILE_CLASSNAME);
+    body?.classList.add(MOBILE_CLASSNAME);
   } catch {
     // noop
   }
@@ -27,7 +27,7 @@ const addClassNameToBody = () => {
 const removeClassNameFromBody = () => {
   try {
     const body = document.querySelector('body');
-    body.classList.remove(MOBILE_CLASSNAME);
+    body?.classList.remove(MOBILE_CLASSNAME);
   } catch {
     // noop
   }
@@ -67,10 +67,10 @@ const MediaQueryProvider = (props: MediaQueryProviderProps): React.ReactElement
     };
     updateSize();
     window.addEventListener('resize', updateSize);
-    logger?.info?.('MediaQueryProvider: addEventListener', updateSize);
+    logger?.info?.('MediaQueryProvider: addEventListener', { updateSize });
     return () => {
       window.removeEventListener('resize', updateSize);
-      logger?.info?.('MediaQueryProvider: removeEventListener', updateSize);
+      logger?.info?.('MediaQueryProvider: removeEventListener', { updateSize });
     };
   }, [mediaQueryBreakPoint]);
   return (
diff --git a/src/modules/App/AppLayout.tsx b/src/modules/App/AppLayout.tsx
index 64fc09877..99424f1d2 100644
--- a/src/modules/App/AppLayout.tsx
+++ b/src/modules/App/AppLayout.tsx
@@ -22,11 +22,11 @@ export const AppLayout: React.FC<AppLayoutProps> = (
     setCurrentChannel,
   } = props;
   const [showThread, setShowThread] = useState(false);
-  const [threadTargetMessage, setThreadTargetMessage] = useState<UserMessage | FileMessage>(null);
+  const [threadTargetMessage, setThreadTargetMessage] = useState<UserMessage | FileMessage | null>(null);
   const [showSettings, setShowSettings] = useState(false);
   const [showSearch, setShowSearch] = useState(false);
-  const [highlightedMessage, setHighlightedMessage] = useState<number>(null);
-  const [startingPoint, setStartingPoint] = useState<number>(null);
+  const [highlightedMessage, setHighlightedMessage] = useState<number | null>(null);
+  const [startingPoint, setStartingPoint] = useState<number | null>(null);
   const { isMobile } = useMediaQueryContext();
   return (
     <>
@@ -46,6 +46,8 @@ export const AppLayout: React.FC<AppLayoutProps> = (
               setHighlightedMessage={setHighlightedMessage}
               startingPoint={startingPoint}
               setStartingPoint={setStartingPoint}
+              threadTargetMessage={threadTargetMessage}
+              setThreadTargetMessage={setThreadTargetMessage}
             />
           )
           : (
diff --git a/src/modules/App/DesktopLayout.tsx b/src/modules/App/DesktopLayout.tsx
index d17042e3f..d4f909cbe 100644
--- a/src/modules/App/DesktopLayout.tsx
+++ b/src/modules/App/DesktopLayout.tsx
@@ -34,7 +34,7 @@ export const DesktopLayout: React.FC<DesktopLayoutProps> = (
     threadTargetMessage,
     setThreadTargetMessage,
   } = props;
-  const [animatedMessageId, setAnimatedMessageId] = useState(null);
+  const [animatedMessageId, setAnimatedMessageId] = useState<number | null>(null);
   return (
     <div className="sendbird-app__wrap">
       <div className="sendbird-app__channellist-wrap">
@@ -44,8 +44,8 @@ export const DesktopLayout: React.FC<DesktopLayoutProps> = (
           onProfileEditSuccess={onProfileEditSuccess}
           disableAutoSelect={disableAutoSelect}
           onChannelSelect={(channel) => {
-            setStartingPoint(null);
-            setHighlightedMessage(null);
+            setStartingPoint?.(null);
+            setHighlightedMessage?.(null);
             if (channel) {
               setCurrentChannel(channel);
             } else {
@@ -93,7 +93,7 @@ export const DesktopLayout: React.FC<DesktopLayoutProps> = (
             setAnimatedMessageId(null);
           }}
           onMessageHighlighted={() => {
-            setHighlightedMessage(null);
+            setHighlightedMessage?.(null);
           }}
           showSearchIcon={showSearchIcon}
           startingPoint={startingPoint}
@@ -121,13 +121,13 @@ export const DesktopLayout: React.FC<DesktopLayoutProps> = (
             channelUrl={currentChannel?.url || ''}
             onResultClick={(message) => {
               if (message.messageId === highlightedMessage) {
-                setHighlightedMessage(null);
+                setHighlightedMessage?.(null);
                 setTimeout(() => {
-                  setHighlightedMessage(message.messageId);
+                  setHighlightedMessage?.(message.messageId);
                 });
               } else {
-                setStartingPoint(message.createdAt);
-                setHighlightedMessage(message.messageId);
+                setStartingPoint?.(message.createdAt);
+                setHighlightedMessage?.(message.messageId);
               }
             }}
             onCloseClick={() => {
@@ -149,7 +149,7 @@ export const DesktopLayout: React.FC<DesktopLayoutProps> = (
               setCurrentChannel(channel);
             }
             if (message?.messageId !== animatedMessageId) {
-              setStartingPoint(message?.createdAt);
+              setStartingPoint?.(message?.createdAt);
             }
             setTimeout(() => {
               setAnimatedMessageId(message?.messageId);
diff --git a/src/modules/App/MobileLayout.tsx b/src/modules/App/MobileLayout.tsx
index b91f06042..8531c2f3f 100644
--- a/src/modules/App/MobileLayout.tsx
+++ b/src/modules/App/MobileLayout.tsx
@@ -11,6 +11,7 @@ import ChannelList from '../ChannelList';
 import Channel from '../Channel';
 import ChannelSettings from '../ChannelSettings';
 import MessageSearch from '../MessageSearch';
+import Thread from '../Thread';
 import useSendbirdStateContext from '../../hooks/useSendbirdStateContext';
 import uuidv4 from '../../utils/uuid';
 
@@ -19,6 +20,7 @@ enum PANELS {
   CHANNEL = 'CHANNEL',
   CHANNEL_SETTINGS = 'CHANNEL_SETTINGS',
   MESSAGE_SEARCH = 'MESSAGE_SEARCH',
+  THREAD = 'THREAD',
 }
 
 export const MobileLayout: React.FC<MobileLayoutProps> = (
@@ -37,18 +39,21 @@ export const MobileLayout: React.FC<MobileLayoutProps> = (
     setHighlightedMessage,
     startingPoint,
     setStartingPoint,
+    threadTargetMessage,
+    setThreadTargetMessage,
   } = props;
   const [panel, setPanel] = useState(PANELS?.CHANNEL_LIST);
+  const [animatedMessageId, setAnimatedMessageId] = useState<number | null>(null);
 
   const store = useSendbirdStateContext();
   const sdk = store?.stores?.sdkStore?.sdk as SendbirdGroupChat;
   const userId = store?.config?.userId;
 
-  const goToMessage = (message?: BaseMessage | null) => {
-    setStartingPoint(message?.createdAt);
+  const goToMessage = (message?: BaseMessage | null, timeoutCb?: (msgId: number | null) => void) => {
+    setStartingPoint?.(message?.createdAt || null);
     setTimeout(() => {
-      setHighlightedMessage(message?.messageId);
-    });
+      timeoutCb?.(message?.messageId || null);
+    }, 500);
   };
 
   useEffect(() => {
@@ -118,10 +123,23 @@ export const MobileLayout: React.FC<MobileLayoutProps> = (
               showSearchIcon={showSearchIcon}
               isMessageGroupingEnabled={isMessageGroupingEnabled}
               startingPoint={startingPoint}
+              animatedMessage={animatedMessageId}
               highlightedMessage={highlightedMessage}
               onChatHeaderActionClick={() => {
                 setPanel(PANELS.CHANNEL_SETTINGS);
               }}
+              onReplyInThread={({ message }) => {
+                if (replyType === 'THREAD') {
+                  setPanel(PANELS.THREAD);
+                  setThreadTargetMessage(message);
+                }
+              }}
+              onQuoteMessageClick={({ message }) => { // thread message
+                if (replyType === 'THREAD') {
+                  setThreadTargetMessage(message);
+                  setPanel(PANELS.THREAD);
+                }
+              }}
             />
           </div>
         )
@@ -151,7 +169,35 @@ export const MobileLayout: React.FC<MobileLayoutProps> = (
               }}
               onResultClick={(message) => {
                 setPanel(PANELS.CHANNEL);
-                goToMessage(message);
+                goToMessage(message, (messageId) => {
+                  setHighlightedMessage?.(messageId);
+                });
+              }}
+            />
+          </div>
+        )
+      }
+      {
+        panel === PANELS?.THREAD && (
+          <div className='sb_mobile__panelwrap'>
+            <Thread
+              channelUrl={currentChannel?.url || ''}
+              message={threadTargetMessage}
+              onHeaderActionClick={() => {
+                setPanel(PANELS.CHANNEL);
+              }}
+              onMoveToParentMessage={({ message, channel }) => {
+                if (channel?.url !== currentChannel?.url) {
+                  setPanel(PANELS.CHANNEL);
+                }
+                if (message?.messageId !== animatedMessageId) {
+                  goToMessage(message, (messageId) => {
+                    setAnimatedMessageId(messageId);
+                  });
+                }
+                setTimeout(() => {
+                  setAnimatedMessageId(message?.messageId);
+                }, 500);
               }}
             />
           </div>
diff --git a/src/modules/App/mobile.scss b/src/modules/App/mobile.scss
index 99bbbc2df..e46553b57 100644
--- a/src/modules/App/mobile.scss
+++ b/src/modules/App/mobile.scss
@@ -6,3 +6,14 @@
 .sb-show-main {
   padding: 0 !important;
 }
+
+.sb_mobile__panelwrap .sendbird-thread {
+  width: 100%;
+  height: 100%;
+  & .sendbird-thread-ui {
+    max-width: 100%;
+    & .sendbird-thread-ui__header {
+      width: 100%;
+    }
+  }
+}
diff --git a/src/modules/App/types.ts b/src/modules/App/types.ts
index e8f07a033..be53199fe 100644
--- a/src/modules/App/types.ts
+++ b/src/modules/App/types.ts
@@ -20,29 +20,29 @@ export interface AppLayoutProps {
   onProfileEditSuccess?(user: User): void;
   disableAutoSelect?: boolean;
   currentChannel?: GroupChannel;
-  setCurrentChannel: React.Dispatch<GroupChannel>;
+  setCurrentChannel: React.Dispatch<GroupChannel | null>;
 }
 
-export interface MobileLayoutProps extends AppLayoutProps {
-  highlightedMessage?: number;
-  setHighlightedMessage?: React.Dispatch<number>;
-  startingPoint?: number;
-  setStartingPoint?: React.Dispatch<number>;
+interface SubLayoutCommonProps {
+  highlightedMessage?: number | null;
+  setHighlightedMessage?: React.Dispatch<number | null>;
+  startingPoint?: number | null;
+  setStartingPoint?: React.Dispatch<number | null>;
+  threadTargetMessage: UserMessage | FileMessage | null;
+  setThreadTargetMessage: React.Dispatch<UserMessage | FileMessage>;
 }
 
-export interface DesktopLayoutProps extends AppLayoutProps {
+export interface MobileLayoutProps extends AppLayoutProps, SubLayoutCommonProps { }
+
+export interface DesktopLayoutProps extends AppLayoutProps, SubLayoutCommonProps {
+  // modertion pannel
   showSettings: boolean;
   setShowSettings: React.Dispatch<boolean>;
   showSearch: boolean;
   setShowSearch: React.Dispatch<boolean>;
-  highlightedMessage?: number;
-  setHighlightedMessage?: React.Dispatch<number>;
-  startingPoint?: number;
-  setStartingPoint?: React.Dispatch<number>;
+  // thread
   showThread: boolean;
   setShowThread: React.Dispatch<boolean>;
-  threadTargetMessage: UserMessage | FileMessage;
-  setThreadTargetMessage: React.Dispatch<UserMessage | FileMessage>;
 }
 
 export default interface AppProps {
diff --git a/src/modules/Channel/context/ChannelProvider.tsx b/src/modules/Channel/context/ChannelProvider.tsx
index f8533dab6..88c37a709 100644
--- a/src/modules/Channel/context/ChannelProvider.tsx
+++ b/src/modules/Channel/context/ChannelProvider.tsx
@@ -76,9 +76,9 @@ export type ChannelContextProps = {
   isReactionEnabled?: boolean;
   isMessageGroupingEnabled?: boolean;
   showSearchIcon?: boolean;
-  animatedMessage?: number;
-  highlightedMessage?: number;
-  startingPoint?: number;
+  animatedMessage?: number | null;
+  highlightedMessage?: number | null;
+  startingPoint?: number | null;
   onBeforeSendUserMessage?(text: string, quotedMessage?: UserMessage | FileMessage): UserMessageCreateParams;
   onBeforeSendFileMessage?(file: File, quotedMessage?: UserMessage | FileMessage): FileMessageCreateParams;
   onBeforeUpdateUserMessage?(text: string): UserMessageUpdateParams;
diff --git a/src/modules/MessageSearch/index.tsx b/src/modules/MessageSearch/index.tsx
index 1586c9192..7b6787462 100644
--- a/src/modules/MessageSearch/index.tsx
+++ b/src/modules/MessageSearch/index.tsx
@@ -35,7 +35,7 @@ function MessageSearchPannel(props: MessageSearchPannelProps): JSX.Element {
   const [loading, setLoading] = useState(false);
   const { stringSet } = useContext(LocalizationContext);
 
-  let timeout = null;
+  let timeout: any = null;
   useEffect(() => {
     if (timeout) {
       clearTimeout(timeout);
diff --git a/src/modules/Thread/components/ParentMessageInfo/index.tsx b/src/modules/Thread/components/ParentMessageInfo/index.tsx
index e474a9008..0daabd848 100644
--- a/src/modules/Thread/components/ParentMessageInfo/index.tsx
+++ b/src/modules/Thread/components/ParentMessageInfo/index.tsx
@@ -26,6 +26,9 @@ import { UserProfileContextInterface } from '../../../../ui/MessageContent';
 import MessageInput from '../../../../ui/MessageInput';
 import { MessageInputKeys } from '../../../../ui/MessageInput/const';
 import { Role } from '../../../../lib/types';
+import { useMediaQueryContext } from '../../../../lib/MediaQueryContext';
+import useLongPress from '../../../../hooks/useLongPress';
+import MobileMenu from '../../../../ui/MobileMenu';
 
 export interface ParentMessageInfoProps {
   className?: string;
@@ -57,11 +60,24 @@ export default function ParentMessageInfo({
     isMuted,
     isChannelFrozen,
   } = useThreadContext();
+  const { isMobile } = useMediaQueryContext();
 
   const [showRemove, setShowRemove] = useState(false);
   const [supposedHover, setSupposedHover] = useState(false);
   const [showFileViewer, setShowFileViewer] = useState(false);
   const usingReaction = isReactionEnabled && !currentChannel?.isSuper && !currentChannel?.isBroadcast;
+  const isByMe = userId === parentMessage.sender.userId;
+
+  // Mobile
+  const mobileMenuRef = useRef(null);
+  const [showMobileMenu, setShowMobileMenu] = useState(false);
+  const longPress = useLongPress({
+    onLongPress: () => {
+      if (isMobile) {
+        setShowMobileMenu(true);
+      }
+    },
+  });
 
   // Edit message
   const [showEditInput, setShowEditInput] = useState(false);
@@ -192,7 +208,11 @@ export default function ParentMessageInfo({
   }
 
   return (
-    <div className={`sendbird-parent-message-info ${className}`}>
+    <div
+      className={`sendbird-parent-message-info ${className}`}
+      {...(isMobile) ? { ...longPress } : {}}
+      ref={mobileMenuRef}
+    >
       <ContextMenu
         menuTrigger={(toggleDropdown) => (
           <Avatar
@@ -258,21 +278,23 @@ export default function ParentMessageInfo({
         />
       </div>
       {/* context menu */}
-      <MessageItemMenu
-        className={`sendbird-parent-message-info__context-menu ${usingReaction ? 'use-reaction' : ''} ${supposedHover ? 'sendbird-mouse-hover' : ''}`}
-        channel={currentChannel}
-        message={parentMessage}
-        isByMe={userId === parentMessage?.sender?.userId}
-        disableDeleteMessage={allThreadMessages.length > 0}
-        replyType={replyType}
-        showEdit={setShowEditInput}
-        showRemove={setShowRemove}
-        setSupposedHover={setSupposedHover}
-        onMoveToParentMessage={() => {
-          onMoveToParentMessage({ message: parentMessage, channel: currentChannel });
-        }}
-      />
-      {usingReaction && (
+      {!isMobile && (
+        <MessageItemMenu
+          className={`sendbird-parent-message-info__context-menu ${usingReaction ? 'use-reaction' : ''} ${supposedHover ? 'sendbird-mouse-hover' : ''}`}
+          channel={currentChannel}
+          message={parentMessage}
+          isByMe={userId === parentMessage?.sender?.userId}
+          disableDeleteMessage={allThreadMessages.length > 0}
+          replyType={replyType}
+          showEdit={setShowEditInput}
+          showRemove={setShowRemove}
+          setSupposedHover={setSupposedHover}
+          onMoveToParentMessage={() => {
+            onMoveToParentMessage({ message: parentMessage, channel: currentChannel });
+          }}
+        />
+      )}
+      {(usingReaction && !isMobile) && (
         <MessageItemReactionMenu
           className={`sendbird-parent-message-info__reaction-menu ${supposedHover ? 'sendbird-mouse-hover' : ''}`}
           message={parentMessage}
@@ -303,6 +325,25 @@ export default function ParentMessageInfo({
           }}
         />
       )}
+      {showMobileMenu && (
+        <MobileMenu
+          parentRef={mobileMenuRef}
+          channel={currentChannel}
+          message={parentMessage}
+          userId={userId}
+          replyType={replyType}
+          hideMenu={() => {
+            setShowMobileMenu(false);
+          }}
+          isReactionEnabled={isReactionEnabled}
+          isByMe={isByMe}
+          emojiContainer={emojiContainer}
+          showEdit={setShowEditInput}
+          showRemove={setShowRemove}
+          toggleReaction={toggleReaction}
+          isOpenedFromThread
+        />
+      )}
     </div>
   );
 }
diff --git a/src/modules/Thread/components/ThreadList/ThreadListItemContent.tsx b/src/modules/Thread/components/ThreadList/ThreadListItemContent.tsx
index 748c194a6..ed842c0ca 100644
--- a/src/modules/Thread/components/ThreadList/ThreadListItemContent.tsx
+++ b/src/modules/Thread/components/ThreadList/ThreadListItemContent.tsx
@@ -25,6 +25,9 @@ import FileMessageItemBody from '../../../../ui/FileMessageItemBody';
 import ThumbnailMessageItemBody from '../../../../ui/ThumbnailMessageItemBody';
 import UnknownMessageItemBody from '../../../../ui/UnknownMessageItemBody';
 import VoiceMessageItemBody from '../../../../ui/VoiceMessageItemBody';
+import { useMediaQueryContext } from '../../../../lib/MediaQueryContext';
+import useLongPress from '../../../../hooks/useLongPress';
+import MobileMenu from '../../../../ui/MobileMenu';
 
 export interface ThreadListItemContentProps {
   className?: string;
@@ -70,6 +73,7 @@ export default function ThreadListItemContent({
   onReplyInThread,
 }: ThreadListItemContentProps): React.ReactElement {
   const messageTypes = getUIKitMessageTypes();
+  const { isMobile } = useMediaQueryContext();
   const { dateLocale } = useLocalization();
   const [supposedHover, setSupposedHover] = useState(false);
   const {
@@ -88,8 +92,23 @@ export default function ThreadListItemContent({
   const supposedHoverClassName = supposedHover ? 'sendbird-mouse-hover' : '';
   const isReactionEnabledInChannel = isReactionEnabled && !channel?.isEphemeral;
 
+  // Mobile
+  const mobileMenuRef = useRef(null);
+  const [showMobileMenu, setShowMobileMenu] = useState(false);
+  const longPress = useLongPress({
+    onLongPress: () => {
+      if (isMobile) {
+        setShowMobileMenu(true);
+      }
+    },
+  });
+
   return (
-    <div className={`sendbird-thread-list-item-content ${className} ${isByMe ? 'outgoing' : 'incoming'}`}>
+    <div
+      className={`sendbird-thread-list-item-content ${className} ${isByMe ? 'outgoing' : 'incoming'}`}
+      {...(isMobile) ? { ...longPress } : {}}
+      ref={mobileMenuRef}
+    >
       <div className={`sendbird-thread-list-item-content__left ${isReactionEnabledInChannel ? 'use-reaction' : ''} ${isByMe ? 'outgoing' : 'incoming'}`}>
         {(!isByMe && !chainBottom) && (
           <ContextMenu
@@ -122,7 +141,7 @@ export default function ThreadListItemContent({
             )}
           />
         )}
-        {isByMe && (
+        {(isByMe && !isMobile) && (
           <div
             className={`sendbird-thread-list-item-content-menu ${isReactionEnabledInChannel ? 'use-reaction' : ''
             } ${isByMe ? 'outgoing' : 'incoming'
@@ -272,7 +291,7 @@ export default function ThreadListItemContent({
         className={`sendbird-thread-list-item-content__right ${chainTop ? 'chain-top' : ''
         } ${isByMe ? 'outgoing' : 'incoming'}`}
       >
-        {!isByMe && (
+        {(!isByMe && !isMobile) && (
           <div className={`sendbird-thread-list-item-content-menu ${supposedHoverClassName}`}>
             {isReactionEnabledInChannel && (
               <MessageItemReactionMenu
@@ -300,6 +319,25 @@ export default function ThreadListItemContent({
           </div>
         )}
       </div>
+      {showMobileMenu && (
+        <MobileMenu
+          parentRef={mobileMenuRef}
+          channel={channel}
+          message={message}
+          userId={userId}
+          replyType={replyType}
+          hideMenu={() => {
+            setShowMobileMenu(false);
+          }}
+          isReactionEnabled={isReactionEnabled}
+          isByMe={isByMe}
+          emojiContainer={emojiContainer}
+          showEdit={showEdit}
+          showRemove={showRemove}
+          toggleReaction={toggleReaction}
+          isOpenedFromThread
+        />
+      )}
     </div>
   );
 }
diff --git a/src/modules/Thread/context/ThreadProvider.tsx b/src/modules/Thread/context/ThreadProvider.tsx
index eb960aae5..167392f39 100644
--- a/src/modules/Thread/context/ThreadProvider.tsx
+++ b/src/modules/Thread/context/ThreadProvider.tsx
@@ -31,7 +31,7 @@ import useSendVoiceMessageCallback from './hooks/useSendVoiceMessageCallback';
 export type ThreadProviderProps = {
   children?: React.ReactElement;
   channelUrl: string;
-  message: UserMessage | FileMessage;
+  message: UserMessage | FileMessage | null;
   onHeaderActionClick?: () => void;
   onMoveToParentMessage?: (props: { message: UserMessage | FileMessage, channel: GroupChannel }) => void;
   onBeforeSendVoiceMessage?: (file: File, quotedMessage?: UserMessage | FileMessage) => FileMessageCreateParams;
diff --git a/src/modules/Thread/context/utils.ts b/src/modules/Thread/context/utils.ts
index 9fa81d3bd..2d95b473b 100644
--- a/src/modules/Thread/context/utils.ts
+++ b/src/modules/Thread/context/utils.ts
@@ -12,12 +12,15 @@ export const getNicknamesMapFromMembers = (members = []): Map<string, string> =>
   return nicknamesMap;
 };
 
-export const getParentMessageFrom = (message: UserMessage | FileMessage): UserMessage | FileMessage | BaseMessage => {
+export const getParentMessageFrom = (message: UserMessage | FileMessage | null): UserMessage | FileMessage | BaseMessage | null => {
+  if (!message) {
+    return null;
+  }
   if (isParentMessage(message)) {
     return message;
   }
   if (isThreadMessage(message)) {
-    return message?.parentMessage;
+    return message?.parentMessage || null;
   }
   return null;
 };
diff --git a/src/svgs/icon-thread.svg b/src/svgs/icon-thread.svg
new file mode 100644
index 000000000..3d1b6e9c0
--- /dev/null
+++ b/src/svgs/icon-thread.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path class="fill" fill-rule="evenodd" clip-rule="evenodd" d="M38.8243 25.8953C39.952 24.7314 41.814 24.6979 42.9831 25.8206L57.1007 39.3779C57.675 39.9293 57.9996 40.6894 58 41.4838C58.0004 42.2781 57.6767 43.0386 57.103 43.5906L42.9854 57.1772C41.8175 58.3011 39.9555 58.2697 38.8265 57.107C37.6975 55.9443 37.7291 54.0905 38.897 52.9666L50.8247 41.4876L38.8993 30.0356C37.7302 28.9129 37.6966 27.0592 38.8243 25.8953Z"/>
+  <path class="fill" fill-rule="evenodd" clip-rule="evenodd" d="M8.86585 6C10.4486 6 11.7317 7.21594 11.7317 8.71588V25.5C11.7317 33.1721 18.5779 39.5682 27.2073 39.5682H50.1341C51.7169 39.5682 53 40.7842 53 42.2841C53 43.7841 51.7169 45 50.1341 45H27.2073C15.6038 45 6 36.3502 6 25.5V8.71588C6 7.21594 7.28309 6 8.86585 6Z"/>
+</svg>
diff --git a/src/ui/Icon/index.jsx b/src/ui/Icon/index.jsx
index ad10a75d2..03c51e91e 100644
--- a/src/ui/Icon/index.jsx
+++ b/src/ui/Icon/index.jsx
@@ -61,6 +61,7 @@ import IconSend from '../../svgs/icon-send.svg';
 import IconSettingsFilled from '../../svgs/icon-settings-filled.svg';
 import IconSpinner from '../../svgs/icon-spinner.svg';
 import IconSupergroup from '../../svgs/icon-supergroup.svg';
+import IconThread from '../../svgs/icon-thread.svg';
 import IconThumbnailNone from '../../svgs/icon-thumbnail-none.svg';
 import IconToggleOff from '../../svgs/icon-toggleoff.svg';
 import IconToggleOn from '../../svgs/icon-toggleon.svg';
@@ -120,6 +121,7 @@ function changeTypeToIconComponent(type) {
     case Types.SETTINGS_FILLED: return <IconSettingsFilled />;
     case Types.SPINNER: return <IconSpinner />;
     case Types.SUPERGROUP: return <IconSupergroup />;
+    case Types.THREAD: return <IconThread />;
     case Types.THUMBNAIL_NONE: return <IconThumbnailNone />;
     case Types.TOGGLE_OFF: return <IconToggleOff />;
     case Types.TOGGLE_ON: return <IconToggleOn />;
diff --git a/src/ui/Icon/type.ts b/src/ui/Icon/type.ts
index 63713eafa..5f6cae1d1 100644
--- a/src/ui/Icon/type.ts
+++ b/src/ui/Icon/type.ts
@@ -52,6 +52,7 @@ export const Types = {
   SETTINGS_FILLED: 'SETTINGS_FILLED',
   SPINNER: 'SPINNER',
   SUPERGROUP: 'SUPERGROUP',
+  THREAD: 'THREAD',
   THUMBNAIL_NONE: 'THUMBNAIL_NONE',
   TOGGLE_OFF: 'TOGGLE_OFF',
   TOGGLE_ON: 'TOGGLE_ON',
diff --git a/src/ui/Icon/utils.ts b/src/ui/Icon/utils.ts
index 0c90cad87..aae56a3dd 100644
--- a/src/ui/Icon/utils.ts
+++ b/src/ui/Icon/utils.ts
@@ -76,6 +76,7 @@ export function changeTypeToIconClassName(type: Types): string {
     case Types.SETTINGS_FILLED: return 'sendbird-icon-settings-filled';
     case Types.SPINNER: return 'sendbird-icon-spinner';
     case Types.SUPERGROUP: return 'sendbird-icon-supergroup';
+    case Types.THREAD: return 'sendbird-icon-thread';
     case Types.THUMBNAIL_NONE: return 'sendbird-icon-thumbnail-none';
     case Types.TOGGLE_OFF: return 'sendbird-icon-toggle-off';
     case Types.TOGGLE_ON: return 'sendbird-icon-toggle-on';
diff --git a/src/ui/Label/index.scss b/src/ui/Label/index.scss
index c9fe492a3..5c2fc6857 100644
--- a/src/ui/Label/index.scss
+++ b/src/ui/Label/index.scss
@@ -1,5 +1,10 @@
 @import '../../styles/variables';
 
+.sendbird-label {
+  -webkit-user-select: none;
+  -webkit-touch-callout: none;
+}
+
 [class*=sendbird-label] {
   font-family: var(--sendbird-font-family-default);
 }
diff --git a/src/ui/MessageContent/index.tsx b/src/ui/MessageContent/index.tsx
index e4312e557..1d5a9daf8 100644
--- a/src/ui/MessageContent/index.tsx
+++ b/src/ui/MessageContent/index.tsx
@@ -450,6 +450,13 @@ export default function MessageContent({
             setQuoteMessage={setQuoteMessage}
             toggleReaction={toggleReaction}
             showEdit={showEdit}
+            onReplyInThread={({ message }) => {
+              if (threadReplySelectType === ThreadReplySelectType.THREAD) {
+                onReplyInThread?.({ message });
+              } else if (threadReplySelectType === ThreadReplySelectType.PARENT) {
+                scrollToMessage?.(message?.parentMessage?.createdAt || 0, message?.parentMessageId || 0);
+              }
+            }}
           />
         )
       }
diff --git a/src/ui/MobileMenu/MobileBottomSheet.tsx b/src/ui/MobileMenu/MobileBottomSheet.tsx
index 02df0b203..1ebd1478c 100644
--- a/src/ui/MobileMenu/MobileBottomSheet.tsx
+++ b/src/ui/MobileMenu/MobileBottomSheet.tsx
@@ -1,6 +1,6 @@
 import type { Emoji } from '@sendbird/chat';
 import { FileMessage, Reaction, UserMessage } from '@sendbird/chat/message';
-import React, { useState } from 'react';
+import React, { ReactElement, useState } from 'react';
 
 import type { MobileBottomSheetProps } from './types';
 import type { GroupChannel } from '@sendbird/chat/groupChannel';
@@ -13,6 +13,7 @@ import {
   isUserMessage,
   copyToClipboard,
   isFileMessage,
+  isParentMessage,
 } from '../../utils';
 import BottomSheet from '../BottomSheet';
 import ImageRenderer from '../ImageRenderer';
@@ -37,6 +38,8 @@ const MobileBottomSheet: React.FunctionComponent<MobileBottomSheetProps> = (prop
     showEdit,
     showRemove,
     setQuoteMessage,
+    onReplyInThread,
+    isOpenedFromThread = false,
   } = props;
   const isByMe = message?.sender?.userId === userId;
   const { stringSet } = useLocalization();
@@ -50,6 +53,10 @@ const MobileBottomSheet: React.FunctionComponent<MobileBottomSheetProps> = (prop
     && !isFailedMessage(message)
     && !isPendingMessage(message)
     && (channel?.isGroupChannel() && !(channel as GroupChannel)?.isBroadcast);
+  const showMenuItemThread: boolean = (replyType === 'THREAD') && !isOpenedFromThread
+    && !isFailedMessage(message)
+    && !isPendingMessage(message)
+    && (channel?.isGroupChannel() && !(channel as GroupChannel)?.isBroadcast);
   const disableReaction = message?.parentMessageId > 0;
 
   const fileMessage = message as FileMessage;
@@ -209,7 +216,6 @@ const MobileBottomSheet: React.FunctionComponent<MobileBottomSheetProps> = (prop
               }
               {
                 showMenuItemReply && (
-
                   <div
                     className={`sendbird-message__bottomsheet--action
                       ${disableReaction ? 'sendbird-message__bottomsheet--action-disabled' : ''}
@@ -241,6 +247,25 @@ const MobileBottomSheet: React.FunctionComponent<MobileBottomSheetProps> = (prop
                   </div>
                 )
               }
+              {showMenuItemThread && (
+                <div
+                  className='sendbird-message__bottomsheet--action'
+                  onClick={() => {
+                    hideMenu();
+                    onReplyInThread?.({ message });
+                  }}
+                >
+                  <Icon
+                    type={IconTypes.THREAD}
+                    fillColor={IconColors.PRIMARY}
+                    width="24px"
+                    height="24px"
+                  />
+                  <Label type={LabelTypography.SUBTITLE_1}>
+                    {isParentMessage(message) ? stringSet.THREAD__INPUT__REPLY_IN_THREAD : stringSet.MESSAGE_INPUT__QUOTE_REPLY__PLACE_HOLDER}
+                  </Label>
+                </div>
+              )}
               {
                 showMenuItemDelete && (
                   <div
diff --git a/src/ui/MobileMenu/index.tsx b/src/ui/MobileMenu/index.tsx
index af38a9f72..e81353d00 100644
--- a/src/ui/MobileMenu/index.tsx
+++ b/src/ui/MobileMenu/index.tsx
@@ -22,6 +22,8 @@ const MobileMenu: React.FC<MobileBottomSheetProps> = (props: MobileBottomSheetPr
     emojiContainer,
     toggleReaction,
     parentRef,
+    onReplyInThread,
+    isOpenedFromThread,
   } = props;
   return (
     <>
@@ -43,6 +45,8 @@ const MobileMenu: React.FC<MobileBottomSheetProps> = (props: MobileBottomSheetPr
               emojiContainer={emojiContainer}
               toggleReaction={toggleReaction}
               isReactionEnabled={isReactionEnabled}
+              onReplyInThread={onReplyInThread}
+              isOpenedFromThread={isOpenedFromThread}
             />
           ) : (
             <MobileContextMenu
@@ -58,6 +62,7 @@ const MobileMenu: React.FC<MobileBottomSheetProps> = (props: MobileBottomSheetPr
               resendMessage={resendMessage}
               setQuoteMessage={setQuoteMessage}
               parentRef={parentRef}
+              onReplyInThread={onReplyInThread}
             />
           )
       }
diff --git a/src/ui/MobileMenu/types.ts b/src/ui/MobileMenu/types.ts
index 16b64b5f1..dff395825 100644
--- a/src/ui/MobileMenu/types.ts
+++ b/src/ui/MobileMenu/types.ts
@@ -22,6 +22,8 @@ export interface BaseMenuProps {
   setQuoteMessage?: (message: UserMessage | FileMessage) => void;
   isReactionEnabled?: boolean;
   parentRef?: React.RefObject<HTMLElement>;
+  onReplyInThread?: (props: { message: UserMessage | FileMessage }) => void;
+  isOpenedFromThread?: boolean;
 }
 
 export interface MobileBottomSheetProps extends BaseMenuProps {
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 4e7eb4995..390028a33 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -136,7 +136,9 @@ export const isUserMessage = (message: AdminMessage | UserMessage | FileMessage)
 export const isFileMessage = (message: AdminMessage | UserMessage | FileMessage): boolean => (
   message && (message?.isFileMessage?.() || (message?.messageType === 'file'))
 );
-
+export const isParentMessage = (message: AdminMessage | UserMessage | FileMessage): boolean => (
+  !message.parentMessageId && !message.parentMessage && message.threadInfo !== null
+);
 export const isOGMessage = (message: UserMessage | FileMessage): boolean => !!(
   message && isUserMessage(message) && message?.ogMetaData && (
     message.ogMetaData?.url

From 407d1c221ffd0713c7e97360e653d88eda1e394b Mon Sep 17 00:00:00 2001
From: HoonBaek <hoon@sendbird.com>
Date: Tue, 23 May 2023 15:07:24 +0900
Subject: [PATCH 3/4] fix: Critical issues for mobile compatibility (#546)

### Description Of Changes

* Create components
  * ReactedMembersBottomSheet
  * MobileEmojisReactions
* Add util function: getEmojiUrl
* you can get the emoji URL from the emojiContainer with this util function
* Add some menu options to the MobileContextMenu
  * Reply in Thread
  * Reply to Thread
* Add a new props `avatarSize` to the UserListItem comp
* Set the type of `breakpoint` to string and boolean
* Apply browserSupportMimeType to record voice messages in several browsers

[UIKIT-3882](https://sendbird.atlassian.net/browse/UIKIT-3882)
Co-authored-by: Sravan S <sravan-s@protonmail.com>
---
 scripts/index_d_ts                            |   2 +
 src/hooks/VoiceRecorder/index.tsx             |   9 +-
 src/hooks/useLongPress.tsx                    |   7 +-
 src/lib/MediaQueryContext.tsx                 |   2 +-
 .../ParentMessageInfoItem.tsx                 |   1 +
 .../components/ParentMessageInfo/index.tsx    |   2 +
 .../ThreadList/ThreadListItemContent.tsx      |   3 +
 src/types.d.ts                                |   8 ++
 src/ui/ContextMenu/EmojiListItems.tsx         |  66 ++++++-----
 src/ui/ContextMenu/MenuItems.tsx              |   2 +-
 .../EmojiReactions/AddReactionBadgeItem.tsx   |  42 +++++++
 src/ui/EmojiReactions/ReactionItem.tsx        |  89 +++++++++++++++
 src/ui/EmojiReactions/index.tsx               | 106 ++++++++++--------
 src/ui/MessageContent/index.tsx               |   2 +
 src/ui/MessageItemReactionMenu/index.tsx      |   5 +-
 src/ui/MobileMenu/MobileContextMenu.tsx       |  28 ++++-
 src/ui/MobileMenu/MobileEmojisBottomSheet.tsx |  69 ++++++++++++
 .../MobileMenu/ReactedMembersBottomSheet.tsx  |  95 ++++++++++++++++
 src/ui/MobileMenu/index.tsx                   |   1 +
 .../mobile-menu-reacted-members.scss          |  37 ++++++
 src/ui/UserListItem/index.tsx                 |   6 +-
 src/utils/consts.ts                           |   2 +-
 src/utils/index.ts                            |   8 ++
 23 files changed, 507 insertions(+), 85 deletions(-)
 create mode 100644 src/ui/EmojiReactions/AddReactionBadgeItem.tsx
 create mode 100644 src/ui/EmojiReactions/ReactionItem.tsx
 create mode 100644 src/ui/MobileMenu/MobileEmojisBottomSheet.tsx
 create mode 100644 src/ui/MobileMenu/ReactedMembersBottomSheet.tsx
 create mode 100644 src/ui/MobileMenu/mobile-menu-reacted-members.scss

diff --git a/scripts/index_d_ts b/scripts/index_d_ts
index 13fe969c4..1fa6c536d 100644
--- a/scripts/index_d_ts
+++ b/scripts/index_d_ts
@@ -1864,6 +1864,7 @@ declare module '@sendbird/uikit-react/ui/Dropdown' {
 declare module '@sendbird/uikit-react/ui/EmojiReactions' {
   import type { EmojiCategory } from '@sendbird/chat';
   import type { FileMessage, UserMessage } from '@sendbird/chat/message';
+  import type { GroupChannel } from '@sendbird/chat/groupChannel';
 
   interface EmojiContainer {
     emojiCategories: Array<EmojiCategory>;
@@ -1873,6 +1874,7 @@ declare module '@sendbird/uikit-react/ui/EmojiReactions' {
     className?: string | Array<string>;
     userId: string;
     message: UserMessage | FileMessage;
+    channel: GroupChannel;
     emojiContainer: EmojiContainer;
     memberNicknamesMap: Map<string, string>;
     spaceFromTrigger?: Record<string, unknown>;
diff --git a/src/hooks/VoiceRecorder/index.tsx b/src/hooks/VoiceRecorder/index.tsx
index f3c646c8b..437396f32 100644
--- a/src/hooks/VoiceRecorder/index.tsx
+++ b/src/hooks/VoiceRecorder/index.tsx
@@ -1,9 +1,9 @@
 import React, { createContext, useCallback, useContext, useEffect, useState } from 'react';
 import {
+  BROWSER_SUPPORT_MIME_TYPE_LIST,
   VOICE_MESSAGE_FILE_NAME,
   VOICE_MESSAGE_MIME_TYPE,
   VOICE_RECORDER_AUDIO_BITS,
-  VOICE_RECORDER_MIME_TYPE,
 } from '../../utils/consts';
 import useSendbirdStateContext from '../useSendbirdStateContext';
 
@@ -37,6 +37,11 @@ export const VoiceRecorderProvider = (props: VoiceRecorderProps): React.ReactEle
   const [mediaRecorder, setMediaRecorder] = useState<MediaRecorder>(null);
   const [isRecordable, setIsRecordable] = useState<boolean>(false);
 
+  const browserSupportMimeType = BROWSER_SUPPORT_MIME_TYPE_LIST.find((mimeType) => MediaRecorder.isTypeSupported(mimeType)) ?? '';
+  if (!browserSupportMimeType) {
+    logger.error('VoiceRecorder: Browser does not support mimeType', { mimmeTypes: BROWSER_SUPPORT_MIME_TYPE_LIST });
+  }
+
   const [webAudioUtils, setWebAudioUtils] = useState(null);
   useEffect(() => {
     if (isVoiceMessageEnabled && !webAudioUtils) {
@@ -62,7 +67,7 @@ export const VoiceRecorderProvider = (props: VoiceRecorderProps): React.ReactEle
         logger.info('VoiceRecorder: Succeeded getting media stream.', stream);
         setIsRecordable(true);
         const mediaRecorder = new MediaRecorder(stream, {
-          mimeType: VOICE_RECORDER_MIME_TYPE,
+          mimeType: browserSupportMimeType,
           audioBitsPerSecond: VOICE_RECORDER_AUDIO_BITS,
         });
         mediaRecorder.ondataavailable = (e) => { // when recording stops
diff --git a/src/hooks/useLongPress.tsx b/src/hooks/useLongPress.tsx
index 9e0664173..66fda22b5 100644
--- a/src/hooks/useLongPress.tsx
+++ b/src/hooks/useLongPress.tsx
@@ -50,6 +50,7 @@ interface PressHandlers<T> {
 interface Options {
   delay?: number;
   shouldPreventDefault?: boolean;
+  shouldStopPropagation?: boolean;
 }
 
 interface UseLongPressType<T> {
@@ -67,6 +68,7 @@ export default function useLongPress<T>({
 }: PressHandlers<T>, {
   delay = DEFAULT_DURATION,
   shouldPreventDefault = true,
+  shouldStopPropagation = false,
 }: Options = {}): UseLongPressType<T> {
   const { isMobile } = useMediaQueryContext();
   const [longPressTriggered, setLongPressTriggered] = useState(false);
@@ -81,6 +83,9 @@ export default function useLongPress<T>({
       ...e,
     };
     setDragTriggered(false);
+    if (shouldStopPropagation) {
+      e.stopPropagation();
+    }
     if (shouldPreventDefault && e.target) {
       e.target.addEventListener(
         'touchend',
@@ -96,7 +101,7 @@ export default function useLongPress<T>({
       onLongPress(clonedEvent);
       setLongPressTriggered(true);
     }, delay);
-  }, [onLongPress, delay, shouldPreventDefault, isMobile]);
+  }, [onLongPress, delay, shouldPreventDefault, shouldStopPropagation, isMobile]);
 
   const clear = useCallback((
     e: React.MouseEvent<T> | React.TouchEvent<T>,
diff --git a/src/lib/MediaQueryContext.tsx b/src/lib/MediaQueryContext.tsx
index e8c4af7ad..e8884e068 100644
--- a/src/lib/MediaQueryContext.tsx
+++ b/src/lib/MediaQueryContext.tsx
@@ -11,7 +11,7 @@ const MediaQueryContext = React.createContext({
 
 export interface MediaQueryProviderProps {
   children: React.ReactElement;
-  mediaQueryBreakPoint?: string;
+  mediaQueryBreakPoint?: string | boolean;
   logger?: Logger;
 }
 
diff --git a/src/modules/Thread/components/ParentMessageInfo/ParentMessageInfoItem.tsx b/src/modules/Thread/components/ParentMessageInfo/ParentMessageInfoItem.tsx
index b9289a919..dc5fa8398 100644
--- a/src/modules/Thread/components/ParentMessageInfo/ParentMessageInfoItem.tsx
+++ b/src/modules/Thread/components/ParentMessageInfo/ParentMessageInfoItem.tsx
@@ -283,6 +283,7 @@ export default function ParentMessageInfoItem({
           <EmojiReactions
             userId={currentUserId}
             message={message}
+            channel={currentChannel}
             isByMe={false}
             emojiContainer={emojiContainer}
             memberNicknamesMap={nicknamesMap}
diff --git a/src/modules/Thread/components/ParentMessageInfo/index.tsx b/src/modules/Thread/components/ParentMessageInfo/index.tsx
index 0daabd848..77b363a9a 100644
--- a/src/modules/Thread/components/ParentMessageInfo/index.tsx
+++ b/src/modules/Thread/components/ParentMessageInfo/index.tsx
@@ -77,6 +77,8 @@ export default function ParentMessageInfo({
         setShowMobileMenu(true);
       }
     },
+  }, {
+    shouldPreventDefault: false,
   });
 
   // Edit message
diff --git a/src/modules/Thread/components/ThreadList/ThreadListItemContent.tsx b/src/modules/Thread/components/ThreadList/ThreadListItemContent.tsx
index ed842c0ca..fb158a4b0 100644
--- a/src/modules/Thread/components/ThreadList/ThreadListItemContent.tsx
+++ b/src/modules/Thread/components/ThreadList/ThreadListItemContent.tsx
@@ -101,6 +101,8 @@ export default function ThreadListItemContent({
         setShowMobileMenu(true);
       }
     },
+  }, {
+    shouldPreventDefault: false,
   });
 
   return (
@@ -267,6 +269,7 @@ export default function ThreadListItemContent({
               <EmojiReactions
                 userId={userId}
                 message={message as UserMessage | FileMessage}
+                channel={channel}
                 isByMe={isByMe}
                 emojiContainer={emojiContainer}
                 memberNicknamesMap={nicknamesMap}
diff --git a/src/types.d.ts b/src/types.d.ts
index 819521d8d..21e16fc6f 100644
--- a/src/types.d.ts
+++ b/src/types.d.ts
@@ -9,6 +9,14 @@ import type {
 export type ReplyType = 'NONE' | 'QUOTE_REPLY' | 'THREAD';
 export type Nullable<T> = T | null;
 
+export type SpaceFromTriggerType = {
+  x: number,
+  y: number,
+  top?: number,
+  left?: number,
+  height?: number,
+};
+
 export interface UserListQuery {
   hasNext?: boolean;
   next(): Promise<Array<User>>;
diff --git a/src/ui/ContextMenu/EmojiListItems.tsx b/src/ui/ContextMenu/EmojiListItems.tsx
index abfd97910..eb8d3cceb 100644
--- a/src/ui/ContextMenu/EmojiListItems.tsx
+++ b/src/ui/ContextMenu/EmojiListItems.tsx
@@ -2,7 +2,9 @@ import React, { ReactElement, ReactNode, RefObject, useEffect, useRef, useState
 import { createPortal } from 'react-dom';
 
 import SortByRow from '../SortByRow';
+import { Nullable } from '../../types';
 
+const defaultParentRect = { x: 0, y: 0, left: 0, top: 0, height: 0 };
 type SpaceFromTrigger = { x: number, y: number };
 type ReactionStyle = { left: number, top: number };
 export interface EmojiListItemsProps {
@@ -13,15 +15,15 @@ export interface EmojiListItemsProps {
   spaceFromTrigger?: SpaceFromTrigger;
 }
 
-const EmojiListItems = ({
+export const EmojiListItems = ({
   children,
   parentRef,
   parentContainRef,
   spaceFromTrigger = { x: 0, y: 0 },
   closeDropdown,
-}: EmojiListItemsProps): ReactElement => {
+}: EmojiListItemsProps): Nullable<ReactElement> => {
   const [reactionStyle, setReactionStyle] = useState<ReactionStyle>({ left: 0, top: 0 });
-  const reactionRef = useRef(null);
+  const reactionRef: RefObject<HTMLUListElement> = useRef(null);
 
   /* showParent & hideParent */
   useEffect(() => {
@@ -52,7 +54,7 @@ const EmojiListItems = ({
   useEffect(() => {
     const spaceFromTriggerX = spaceFromTrigger?.x || 0;
     const spaceFromTriggerY = spaceFromTrigger?.y || 0;
-    const parentRect = parentRef?.current?.getBoundingClientRect();
+    const parentRect = parentRef?.current?.getBoundingClientRect() ?? defaultParentRect;
     const x = parentRect.x || parentRect.left;
     const y = parentRect.y || parentRect.top;
     const reactionStyle = {
@@ -84,33 +86,37 @@ const EmojiListItems = ({
     }
   }, []);
 
-  return (
-    createPortal(
-      <>
-        <div className="sendbird-dropdown__menu-backdrop" />
-        <ul
-          className="sendbird-dropdown__reaction-bar"
-          ref={reactionRef}
-          style={{
-            display: 'inline-block',
-            position: 'fixed',
-            left: `${Math.round(reactionStyle.left)}px`,
-            top: `${Math.round(reactionStyle.top)}px`,
-          }}
-        >
-          <SortByRow
-            className="sendbird-dropdown__reaction-bar__row"
-            maxItemCount={8}
-            itemWidth={44}
-            itemHeight={40}
+  const rootElement = document.getElementById('sendbird-emoji-list-portal');
+  if (rootElement) {
+    return (
+      createPortal(
+        <>
+          <div className="sendbird-dropdown__menu-backdrop" />
+          <ul
+            className="sendbird-dropdown__reaction-bar"
+            ref={reactionRef}
+            style={{
+              display: 'inline-block',
+              position: 'fixed',
+              left: `${Math.round(reactionStyle.left)}px`,
+              top: `${Math.round(reactionStyle.top)}px`,
+            }}
           >
-            {children}
-          </SortByRow>
-        </ul>
-      </>,
-      document.getElementById('sendbird-emoji-list-portal'),
-    )
-  );
+            <SortByRow
+              className="sendbird-dropdown__reaction-bar__row"
+              maxItemCount={8}
+              itemWidth={44}
+              itemHeight={40}
+            >
+              {children}
+            </SortByRow>
+          </ul>
+        </>,
+        rootElement,
+      )
+    );
+  }
+  return null;
 };
 
 export default EmojiListItems;
diff --git a/src/ui/ContextMenu/MenuItems.tsx b/src/ui/ContextMenu/MenuItems.tsx
index 471773665..cdccfa612 100644
--- a/src/ui/ContextMenu/MenuItems.tsx
+++ b/src/ui/ContextMenu/MenuItems.tsx
@@ -5,7 +5,7 @@ interface MenuItemsProps {
   className?: string;
   style?: Record<string, string>;
   openLeft?: boolean;
-  children: React.ReactElement | Array<React.ReactElement>;
+  children: React.ReactElement | Array<React.ReactElement> | React.ReactNode;
   parentRef: React.RefObject<HTMLElement>;
   parentContainRef: React.RefObject<HTMLElement>;
   closeDropdown: () => void;
diff --git a/src/ui/EmojiReactions/AddReactionBadgeItem.tsx b/src/ui/EmojiReactions/AddReactionBadgeItem.tsx
new file mode 100644
index 000000000..2136b0bd1
--- /dev/null
+++ b/src/ui/EmojiReactions/AddReactionBadgeItem.tsx
@@ -0,0 +1,42 @@
+import React, {
+  KeyboardEvent,
+  MouseEvent,
+  TouchEvent,
+} from 'react';
+import ReactionBadge from '../ReactionBadge';
+import Icon, { IconColors, IconTypes } from '../Icon';
+import useLongPress from '../../hooks/useLongPress';
+
+export interface AddReactionBadgeItemProps {
+  onClick: (e: MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement> | TouchEvent<HTMLDivElement>) => void;
+}
+
+export const AddReactionBadgeItem = ({
+  onClick,
+}: AddReactionBadgeItemProps): React.ReactElement => {
+  const onlyClick = useLongPress({
+    onLongPress: () => { /* noop */ },
+    onClick,
+  }, {
+    shouldPreventDefault: true,
+    shouldStopPropagation: true,
+  });
+
+  return (
+    <div
+      className="sendbird-emoji-reactions__add-reaction-badge"
+      {...onlyClick}
+    >
+      <ReactionBadge
+        isAdd
+      >
+        <Icon
+          type={IconTypes.EMOJI_MORE}
+          fillColor={IconColors.ON_BACKGROUND_3}
+          width="20px"
+          height="20px"
+        />
+      </ReactionBadge>
+    </div>
+  );
+};
diff --git a/src/ui/EmojiReactions/ReactionItem.tsx b/src/ui/EmojiReactions/ReactionItem.tsx
new file mode 100644
index 000000000..4301818d2
--- /dev/null
+++ b/src/ui/EmojiReactions/ReactionItem.tsx
@@ -0,0 +1,89 @@
+import React, { useContext } from 'react';
+
+import { FileMessage, Reaction, UserMessage } from '@sendbird/chat/message';
+
+import Tooltip from '../Tooltip';
+import TooltipWrapper from '../TooltipWrapper';
+import ReactionBadge from '../ReactionBadge';
+import ImageRenderer from '../ImageRenderer';
+import Icon, { IconTypes } from '../Icon';
+import { useMediaQueryContext } from '../../lib/MediaQueryContext';
+import useLongPress from '../../hooks/useLongPress';
+import { LocalizationContext } from '../../lib/LocalizationContext';
+import useSendbirdStateContext from '../../hooks/useSendbirdStateContext';
+import { getEmojiTooltipString, isReactedBy } from '../../utils';
+import { useMessageContext } from '../../modules/Message/context/MessageProvider';
+import { Emoji } from '@sendbird/chat';
+
+type Props = {
+  reaction: Reaction;
+  memberNicknamesMap: Map<string, string>;
+  setEmojiKey: React.Dispatch<React.SetStateAction<string>>;
+  toggleReaction?: (message: UserMessage | FileMessage, key: string, byMe: boolean) => void;
+  emojisMap: Map<string, Emoji>;
+};
+
+export default function ReactionItem({
+  reaction,
+  memberNicknamesMap,
+  setEmojiKey,
+  toggleReaction,
+  emojisMap,
+}: Props) {
+  const store = useSendbirdStateContext();
+  const { isMobile } = useMediaQueryContext();
+  const messageStore = useMessageContext();
+  const message = messageStore?.message as UserMessage;
+  const { stringSet } = useContext(LocalizationContext);
+
+  const userId = store.config.userId;
+  const reactedByMe = isReactedBy(userId, reaction);
+
+  const handleOnClick = () => {
+    setEmojiKey('');
+    toggleReaction?.((message), reaction.key, reactedByMe);
+  };
+  const longPress = useLongPress({
+    onLongPress: () => {
+      setEmojiKey(reaction.key);
+    },
+    onClick: handleOnClick,
+  }, {
+    shouldPreventDefault: true,
+    shouldStopPropagation: true,
+  });
+
+  return (
+    <TooltipWrapper
+      className="sendbird-emoji-reactions__reaction-badge"
+      hoverTooltip={(reaction.userIds.length > 0) ? (
+        <Tooltip>
+          {getEmojiTooltipString(reaction, userId, memberNicknamesMap, stringSet)}
+        </Tooltip>
+      ) : <></>}
+    >
+      <div
+        {...(
+          isMobile
+            ? longPress
+            : { onClick: handleOnClick }
+        )}
+      >
+        <ReactionBadge
+          count={reaction.userIds.length}
+          selected={reactedByMe}
+        >
+          <ImageRenderer
+            circle
+            url={emojisMap.get(reaction?.key)?.url || ''}
+            width="20px"
+            height="20px"
+            defaultComponent={(
+              <Icon width="20px" height="20px" type={IconTypes.QUESTION} />
+            )}
+          />
+        </ReactionBadge>
+      </div>
+    </TooltipWrapper>
+  );
+}
diff --git a/src/ui/EmojiReactions/index.tsx b/src/ui/EmojiReactions/index.tsx
index 8663b996f..ebdd5d144 100644
--- a/src/ui/EmojiReactions/index.tsx
+++ b/src/ui/EmojiReactions/index.tsx
@@ -1,85 +1,74 @@
 import './index.scss';
-import React, { ReactElement, useContext, useRef } from 'react';
-import type { FileMessage, Reaction, UserMessage } from '@sendbird/chat/message';
+import React, { ReactElement, useRef, useState } from 'react';
 import type { Emoji, EmojiContainer } from '@sendbird/chat';
+import type { FileMessage, Reaction, UserMessage } from '@sendbird/chat/message';
+import type { GroupChannel } from '@sendbird/chat/groupChannel';
 
-import Tooltip from '../Tooltip';
-import TooltipWrapper from '../TooltipWrapper';
 import ReactionBadge from '../ReactionBadge';
 import ReactionButton from '../ReactionButton';
 import ImageRenderer from '../ImageRenderer';
 import Icon, { IconTypes, IconColors } from '../Icon';
 import ContextMenu, { EmojiListItems } from '../ContextMenu';
+import { Nullable, SpaceFromTriggerType } from '../../types';
 
-import { getClassName, getEmojiListAll, getEmojiMapAll, getEmojiTooltipString, isReactedBy } from '../../utils';
-import { LocalizationContext } from '../../lib/LocalizationContext';
+import { getClassName, getEmojiListAll, getEmojiMapAll } from '../../utils';
+import { ReactedMembersBottomSheet } from '../MobileMenu/ReactedMembersBottomSheet';
+import ReactionItem from './ReactionItem';
+import { useMediaQueryContext } from '../../lib/MediaQueryContext';
+import { AddReactionBadgeItem } from './AddReactionBadgeItem';
+import { MobileEmojisBottomSheet } from '../MobileMenu/MobileEmojisBottomSheet';
 
 interface Props {
   className?: string | Array<string>;
   userId: string;
   message: UserMessage | FileMessage;
+  channel: Nullable<GroupChannel>;
   emojiContainer: EmojiContainer;
   memberNicknamesMap: Map<string, string>;
-  spaceFromTrigger?: { x: number, y: number };
+  spaceFromTrigger?: SpaceFromTriggerType;
   isByMe?: boolean;
   toggleReaction?: (message: UserMessage | FileMessage, key: string, byMe: boolean) => void;
 }
 
 const EmojiReactions = ({
-  className,
+  className = '',
   userId,
   message,
+  channel,
   emojiContainer,
   memberNicknamesMap,
   spaceFromTrigger = { x: 0, y: 0 },
   isByMe = false,
   toggleReaction,
 }: Props): ReactElement => {
-  const { stringSet } = useContext(LocalizationContext);
-  const emojisMap = getEmojiMapAll(emojiContainer);
+  const { isMobile } = useMediaQueryContext();
   const addReactionRef = useRef(null);
+  const [showEmojiList, setShowEmojiList] = useState(false);
+  const [selectedEmojiKey, setSelectedEmojiKey] = useState('');
+
+  const emojisMap = getEmojiMapAll(emojiContainer);
+  const showAddReactionBadge = (message.reactions?.length ?? 0) < emojisMap.size;
 
   return (
     <div className={getClassName([
       className, 'sendbird-emoji-reactions',
       isByMe ? 'outgoing' : 'incoming',
     ])}>
-      {(message?.reactions?.length > 0) && (
-        message.reactions.map((reaction: Reaction): ReactElement => {
-          const reactedByMe = isReactedBy(userId, reaction);
+      {((message.reactions?.length ?? 0) > 0) && (
+        message.reactions?.map((reaction: Reaction): ReactElement => {
           return (
-            <TooltipWrapper
-              className="sendbird-emoji-reactions__reaction-badge"
+            <ReactionItem
               key={reaction?.key}
-              hoverTooltip={(reaction?.userIds?.length > 0) && (
-                <Tooltip>
-                  {getEmojiTooltipString(reaction, userId, memberNicknamesMap, stringSet)}
-                </Tooltip>
-              )}
-            >
-              <ReactionBadge
-                count={reaction.userIds.length}
-                selected={reactedByMe}
-                onClick={(e) => {
-                  toggleReaction(message, reaction.key, reactedByMe);
-                  e?.stopPropagation?.();
-                }}
-              >
-                <ImageRenderer
-                  circle
-                  url={emojisMap.get(reaction?.key)?.url || ''}
-                  width="20px"
-                  height="20px"
-                  defaultComponent={(
-                    <Icon width="20px" height="20px" type={IconTypes.QUESTION} />
-                  )}
-                />
-              </ReactionBadge>
-            </TooltipWrapper>
+              reaction={reaction}
+              memberNicknamesMap={memberNicknamesMap}
+              setEmojiKey={setSelectedEmojiKey}
+              toggleReaction={toggleReaction}
+              emojisMap={emojisMap}
+            />
           );
         })
       )}
-      {(message?.reactions?.length < emojisMap.size) && (
+      {(!isMobile && showAddReactionBadge) && (
         <ContextMenu
           menuTrigger={(toggleDropdown: () => void): ReactElement => (
             <ReactionBadge
@@ -104,12 +93,12 @@ const EmojiReactions = ({
               parentRef={addReactionRef}
               parentContainRef={addReactionRef}
               closeDropdown={closeDropdown}
-              spacefromTrigger={spaceFromTrigger}
+              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));
+                  ?.some((reactorId: string): boolean => reactorId === userId)) || false;
                 return (
                   <ReactionButton
                     key={emoji.key}
@@ -118,7 +107,7 @@ const EmojiReactions = ({
                     selected={isReacted}
                     onClick={(e): void => {
                       closeDropdown();
-                      toggleReaction(message, emoji.key, isReacted);
+                      toggleReaction?.(message, emoji.key, isReacted);
                       e?.stopPropagation();
                     }}
                   >
@@ -144,6 +133,35 @@ const EmojiReactions = ({
           )}
         />
       )}
+      {(isMobile && showAddReactionBadge) && (
+        <AddReactionBadgeItem
+          onClick={() => {
+            setShowEmojiList(true);
+          }}
+        />
+      )}
+      {(isMobile && showEmojiList) && (
+        <MobileEmojisBottomSheet
+          userId={userId}
+          message={message}
+          emojiContainer={emojiContainer}
+          hideMenu={() => {
+            setShowEmojiList(false);
+          }}
+          toggleReaction={toggleReaction}
+        />
+      )}
+      {(isMobile && selectedEmojiKey && channel !== null) && (
+        <ReactedMembersBottomSheet
+          message={message}
+          channel={channel}
+          emojiKey={selectedEmojiKey}
+          hideMenu={() => {
+            setSelectedEmojiKey('');
+          }}
+          emojiContainer={emojiContainer}
+        />
+      )}
     </div>
   );
 };
diff --git a/src/ui/MessageContent/index.tsx b/src/ui/MessageContent/index.tsx
index 1d5a9daf8..812898ed4 100644
--- a/src/ui/MessageContent/index.tsx
+++ b/src/ui/MessageContent/index.tsx
@@ -154,6 +154,7 @@ export default function MessageContent({
     },
   }, {
     delay: 300,
+    shouldPreventDefault: false,
   });
 
   if (message?.isAdminMessage?.() || message?.messageType === 'admin') {
@@ -364,6 +365,7 @@ export default function MessageContent({
               <EmojiReactions
                 userId={userId}
                 message={message as UserMessage | FileMessage}
+                channel={channel}
                 isByMe={isByMe}
                 emojiContainer={emojiContainer}
                 memberNicknamesMap={nicknamesMap}
diff --git a/src/ui/MessageItemReactionMenu/index.tsx b/src/ui/MessageItemReactionMenu/index.tsx
index e294c0c53..b4536891d 100644
--- a/src/ui/MessageItemReactionMenu/index.tsx
+++ b/src/ui/MessageItemReactionMenu/index.tsx
@@ -9,12 +9,13 @@ import IconButton from '../IconButton';
 import ImageRenderer from '../ImageRenderer';
 import ReactionButton from '../ReactionButton';
 import { getClassName, getEmojiListAll, isPendingMessage, isFailedMessage } from '../../utils';
+import { SpaceFromTriggerType } from '../../types';
 
 interface Props {
   className?: string | Array<string>;
   message: UserMessage | FileMessage;
   userId: string;
-  spaceFromTrigger?: Record<string, unknown>;
+  spaceFromTrigger?: SpaceFromTriggerType;
   emojiContainer?: EmojiContainer;
   toggleReaction?: (message: UserMessage | FileMessage, reactionKey: string, isReacted: boolean) => void;
   setSupposedHover?: (bool: boolean) => void;
@@ -24,7 +25,7 @@ export default function MessageItemReactionMenu({
   className,
   message,
   userId,
-  spaceFromTrigger = {},
+  spaceFromTrigger = { x: 0, y: 0 },
   emojiContainer,
   toggleReaction,
   setSupposedHover,
diff --git a/src/ui/MobileMenu/MobileContextMenu.tsx b/src/ui/MobileMenu/MobileContextMenu.tsx
index e2a7cf479..db8601212 100644
--- a/src/ui/MobileMenu/MobileContextMenu.tsx
+++ b/src/ui/MobileMenu/MobileContextMenu.tsx
@@ -12,12 +12,13 @@ import {
   isUserMessage,
   copyToClipboard,
   isFileMessage,
+  isParentMessage,
 } from '../../utils';
 import { useLocalization } from '../../lib/LocalizationContext';
 import Icon, { IconTypes, IconColors } from '../Icon';
 import Label, { LabelTypography } from '../Label';
 
-const MobileContextMenu: React.FunctionComponent<BaseMenuProps> = (props: BaseMenuProps) => {
+const MobileContextMenu: React.FunctionComponent<BaseMenuProps> = (props: BaseMenuProps): React.ReactElement => {
   const {
     hideMenu,
     channel,
@@ -29,6 +30,8 @@ const MobileContextMenu: React.FunctionComponent<BaseMenuProps> = (props: BaseMe
     showRemove,
     setQuoteMessage,
     parentRef,
+    onReplyInThread,
+    isOpenedFromThread = false,
   } = props;
   const isByMe = message?.sender?.userId === userId;
   const { stringSet } = useLocalization();
@@ -41,6 +44,10 @@ const MobileContextMenu: React.FunctionComponent<BaseMenuProps> = (props: BaseMe
     && !isFailedMessage(message)
     && !isPendingMessage(message)
     && (channel?.isGroupChannel() && !(channel as GroupChannel)?.isBroadcast);
+  const showMenuItemThread: boolean = (replyType === 'THREAD') && !isOpenedFromThread
+    && !isFailedMessage(message)
+    && !isPendingMessage(message)
+    && channel?.isGroupChannel();
 
   const fileMessage = message as FileMessage;
   return (
@@ -92,6 +99,25 @@ const MobileContextMenu: React.FunctionComponent<BaseMenuProps> = (props: BaseMe
               />
             </MenuItem>
           )}
+          {showMenuItemThread && (
+            <MenuItem
+              className="sendbird-message__mobile-context-menu-item menu-item-reply"
+              onClick={() => {
+                hideMenu();
+                onReplyInThread?.({ message });
+              }}
+            >
+              <Label type={LabelTypography.SUBTITLE_1}>
+                {isParentMessage(message) ? stringSet.THREAD__INPUT__REPLY_IN_THREAD : stringSet.MESSAGE_INPUT__QUOTE_REPLY__PLACE_HOLDER}
+              </Label>
+              <Icon
+                type={IconTypes.THREAD}
+                fillColor={IconColors.PRIMARY}
+                width="24px"
+                height="24px"
+              />
+            </MenuItem>
+          )}
           {showMenuItemEdit && (
             <MenuItem
               className="sendbird-message__mobile-context-menu-item menu-item-edit"
diff --git a/src/ui/MobileMenu/MobileEmojisBottomSheet.tsx b/src/ui/MobileMenu/MobileEmojisBottomSheet.tsx
new file mode 100644
index 000000000..078ee3c1e
--- /dev/null
+++ b/src/ui/MobileMenu/MobileEmojisBottomSheet.tsx
@@ -0,0 +1,69 @@
+import React, { ReactElement, useMemo } from 'react';
+import { EmojiContainer } from '@sendbird/chat';
+import { FileMessage, Reaction, UserMessage } from '@sendbird/chat/message';
+
+import BottomSheet from '../BottomSheet';
+import { getEmojiListAll } from '../../utils';
+import ReactionButton from '../ReactionButton';
+import ImageRenderer from '../ImageRenderer';
+import Icon, { IconColors, IconTypes } from '../Icon';
+
+export interface MobileEmojisBottomSheetProps {
+  userId: string;
+  message: UserMessage | FileMessage;
+  emojiContainer: EmojiContainer;
+  hideMenu: () => void;
+  toggleReaction?: (message: UserMessage | FileMessage, key: string, byMe: boolean) => void;
+}
+
+export const MobileEmojisBottomSheet = ({
+  userId,
+  message,
+  emojiContainer,
+  hideMenu,
+  toggleReaction,
+}: MobileEmojisBottomSheetProps): ReactElement => {
+  const emojiAllList = useMemo(() => {
+    return getEmojiListAll(emojiContainer);
+  }, [emojiContainer]);
+  return (
+    <BottomSheet onBackdropClick={hideMenu}>
+      <div className="sendbird-message__bottomsheet sendbird-message__emojis-bottomsheet">
+        {emojiAllList.map((emoji) => {
+          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="44px"
+              height="44px"
+              selected={isReacted}
+              onClick={(e) => {
+                e?.stopPropagation();
+                toggleReaction?.(message, emoji.key, isReacted);
+                hideMenu();
+              }}
+            >
+              <ImageRenderer
+                url={emoji.url}
+                width="38px"
+                height="38px"
+                placeHolder={(style: Record<string, unknown>): ReactElement => (
+                  <div style={style}>
+                    <Icon
+                      type={IconTypes.QUESTION}
+                      fillColor={IconColors.ON_BACKGROUND_3}
+                      width="28px"
+                      height="28px"
+                    />
+                  </div>
+                )}
+              />
+            </ReactionButton>
+          );
+        })}
+      </div>
+    </BottomSheet>
+  );
+};
diff --git a/src/ui/MobileMenu/ReactedMembersBottomSheet.tsx b/src/ui/MobileMenu/ReactedMembersBottomSheet.tsx
new file mode 100644
index 000000000..6b6fd3378
--- /dev/null
+++ b/src/ui/MobileMenu/ReactedMembersBottomSheet.tsx
@@ -0,0 +1,95 @@
+import React, { ReactElement, useState } from 'react';
+import { EmojiContainer } from '@sendbird/chat';
+import { GroupChannel, Member } from '@sendbird/chat/groupChannel';
+import { FileMessage, Reaction, UserMessage } from '@sendbird/chat/message';
+
+import './mobile-menu-reacted-members.scss';
+
+import BottomSheet from '../BottomSheet';
+import { getEmojiUrl } from '../../utils';
+import ImageRenderer from '../ImageRenderer';
+import Icon, { IconColors, IconTypes } from '../Icon';
+import Label, { LabelColors, LabelTypography } from '../Label';
+import UserListItem from '../UserListItem';
+
+export interface ReactedMembersBottomSheetProps {
+  message: UserMessage | FileMessage;
+  channel: GroupChannel;
+  emojiKey: string;
+  hideMenu: () => void;
+  emojiContainer?: EmojiContainer;
+}
+
+export const ReactedMembersBottomSheet = ({
+  message,
+  channel,
+  emojiKey = '',
+  hideMenu,
+  emojiContainer,
+}: ReactedMembersBottomSheetProps): ReactElement => {
+  const { members = [] } = channel;
+  const [selectedEmoji, setSelectedEmoji] = useState(emojiKey);
+
+  return (
+    <BottomSheet onBackdropClick={hideMenu}>
+      <div className="sendbird-message__bottomsheet">
+        <div className="sendbird-message__bottomsheet__reacted-members">
+          {message.reactions?.map((reaction: Reaction): ReactElement => {
+            const emojiUrl = getEmojiUrl(emojiContainer, reaction.key);
+            return (
+              <div
+                key={reaction.key}
+                className={`
+                  sendbird-message__bottomsheet__reacted-members__item
+                  ${selectedEmoji === reaction.key ? 'sendbird-message__bottomsheet__reacted-members__item__selected' : ''}
+                `}
+                onClick={() => {
+                  setSelectedEmoji(reaction.key);
+                }}
+              >
+                <ImageRenderer
+                  url={emojiUrl}
+                  width="28px"
+                  height="28px"
+                  placeHolder={(style) => (
+                    <div style={style}>
+                      <Icon
+                        type={IconTypes.QUESTION}
+                        fillColor={IconColors.ON_BACKGROUND_3}
+                        width="28px"
+                        height="28px"
+                      />
+                    </div>
+                  )}
+                />
+                <Label
+                  type={LabelTypography.BUTTON_2}
+                  color={selectedEmoji === reaction.key ? LabelColors.PRIMARY : LabelColors.ONBACKGROUND_3}
+                >
+                  {reaction.userIds.length}
+                </Label>
+              </div>
+            );
+          })}
+        </div>
+        <div className="sendbird-message__bottomsheet__reactor-list">
+          { // making a member list who reacted to the message with the `selectedEmoji`
+            (
+              message.reactions?.find(reaction => reaction.key === selectedEmoji)
+                ?.userIds.map((userId) => members.find((member) => member.userId === userId))
+                .filter((member) => member !== undefined) as Array<Member>
+            )
+              .map((member) => (
+                <UserListItem
+                  key={member.userId}
+                  className="sendbird-message__bottomsheet__reactor-list__item"
+                  user={member}
+                  avatarSize="36px"
+                />
+              ))
+          }
+        </div>
+      </div>
+    </BottomSheet>
+  );
+};
diff --git a/src/ui/MobileMenu/index.tsx b/src/ui/MobileMenu/index.tsx
index e81353d00..922c9bb6f 100644
--- a/src/ui/MobileMenu/index.tsx
+++ b/src/ui/MobileMenu/index.tsx
@@ -63,6 +63,7 @@ const MobileMenu: React.FC<MobileBottomSheetProps> = (props: MobileBottomSheetPr
               setQuoteMessage={setQuoteMessage}
               parentRef={parentRef}
               onReplyInThread={onReplyInThread}
+              isOpenedFromThread={isOpenedFromThread}
             />
           )
       }
diff --git a/src/ui/MobileMenu/mobile-menu-reacted-members.scss b/src/ui/MobileMenu/mobile-menu-reacted-members.scss
new file mode 100644
index 000000000..606bfc9ee
--- /dev/null
+++ b/src/ui/MobileMenu/mobile-menu-reacted-members.scss
@@ -0,0 +1,37 @@
+.sendbird-message__bottomsheet__reacted-members {
+  position: relative;
+  padding: 0px 16px;
+  box-sizing: border-box;
+  width: 100%;
+  height: 46px;
+  overflow-x: scroll;
+
+  display: inline-flex;
+  flex-direction: row;
+  justify-content: center;
+  gap: 16px;
+}
+.sendbird-message__bottomsheet__reacted-members__item {
+  position: relative;
+  height: 100%;
+
+  display: inline-flex;
+  gap: 4px;
+  flex-direction: row;
+  align-items: center;;
+}
+
+.sendbird-message__bottomsheet__reactor-list {
+  position: relative;
+  padding: 0px 16px;
+  width: 100%;
+  height: 216px;
+  box-sizing: border-box;
+
+  display: inline-flex;
+  flex-direction: column;
+  overflow-y: scroll;
+}
+.sendbird-message__bottomsheet__reactor-list__item.sendbird-user-list-item {
+  border-bottom: 0px;
+}
diff --git a/src/ui/UserListItem/index.tsx b/src/ui/UserListItem/index.tsx
index 000a2dc14..1d677def2 100644
--- a/src/ui/UserListItem/index.tsx
+++ b/src/ui/UserListItem/index.tsx
@@ -26,6 +26,7 @@ export interface UserListItemProps {
     parentRef?: MutableRefObject<any>,
   }): ReactElement;
   onChange?(e: ChangeEvent<HTMLInputElement>): void;
+  avatarSize?: string;
 }
 
 export default function UserListItem({
@@ -39,6 +40,7 @@ export default function UserListItem({
   currentUser,
   action,
   onChange,
+  avatarSize = '40px',
 }: UserListItemProps): ReactElement {
   const uniqueKey = user.userId;
   const actionRef = React.useRef(null);
@@ -68,8 +70,8 @@ export default function UserListItem({
             className="sendbird-user-list-item__avatar"
             ref={avatarRef}
             src={user.profileUrl}
-            width="40px"
-            height="40px"
+            width={avatarSize}
+            height={avatarSize}
             onClick={() => {
               if (!disableUserProfile) {
                 toggleDropdown();
diff --git a/src/utils/consts.ts b/src/utils/consts.ts
index bf7c5fd88..200a8e1e3 100644
--- a/src/utils/consts.ts
+++ b/src/utils/consts.ts
@@ -4,8 +4,8 @@ export const SCROLL_BUFFER = 10;
 export const VOICE_RECORDER_CLICK_BUFFER_TIME = 250;
 export const VOICE_RECORDER_DEFAULT_MIN = 1000; // 1 seconds
 export const VOICE_RECORDER_DEFAULT_MAX = 600000; // 10 minutes
-export const VOICE_RECORDER_MIME_TYPE = 'audio/webm';
 export const VOICE_RECORDER_AUDIO_BITS = 128000;
+export const BROWSER_SUPPORT_MIME_TYPE_LIST = ['audio/webm', 'audio/mp4', 'audio/mpeg', 'audio/ogg'];
 
 // voice message play
 export const VOICE_PLAYER_PLAYBACK_BUFFER = 0.01;
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 390028a33..07f504b48 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -320,6 +320,14 @@ export const getEmojiMapAll = (emojiContainer: EmojiContainer): Map<string, Emoj
   });
   return emojiMap;
 };
+const findEmojiUrl = (targetKey: string) => ({ key }) => key === targetKey;
+export const getEmojiUrl = (emojiContainer?: EmojiContainer, emojiKey?: string): string => {
+  const isFindingKey = findEmojiUrl(emojiKey ?? '');
+  return emojiContainer?.emojiCategories
+    .find((category) => category.emojis.some(isFindingKey))?.emojis
+    .find(isFindingKey)
+    ?.url || '';
+};
 
 export const getUserName = (user: User): string => (user?.friendName || user?.nickname || user?.userId);
 export const getSenderName = (message: UserMessage | FileMessage): string => (message?.sender && getUserName(message?.sender));

From f3486482af02ebb0972afbcbde3991ea0f69b005 Mon Sep 17 00:00:00 2001
From: HoonBaek <hoon@sendbird.com>
Date: Tue, 23 May 2023 15:30:18 +0900
Subject: [PATCH 4/4] Disable mobile mode

---
 src/lib/MediaQueryContext.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/lib/MediaQueryContext.tsx b/src/lib/MediaQueryContext.tsx
index e8884e068..98c1506f6 100644
--- a/src/lib/MediaQueryContext.tsx
+++ b/src/lib/MediaQueryContext.tsx
@@ -1,7 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import type { Logger } from './SendbirdState';
 
-const DEFAULT_MOBILE = '768px';
+const DEFAULT_MOBILE = false;
+// const DEFAULT_MOBILE = '768px';
 const MOBILE_CLASSNAME = 'sendbird--mobile-mode';
 
 const MediaQueryContext = React.createContext({