From b59949a176da1c7a73194a2a429678178075b2aa Mon Sep 17 00:00:00 2001
From: HoonBaek <hoon@sendbird.com>
Date: Tue, 26 Oct 2021 14:38:07 +0900
Subject: [PATCH 1/2] Turn on the reply and the image compression feature on
 the user2 Turn off the image compression feature on the user3

---
 .../App/stories/index.stories.js              | 100 +++++++++---------
 1 file changed, 50 insertions(+), 50 deletions(-)

diff --git a/src/smart-components/App/stories/index.stories.js b/src/smart-components/App/stories/index.stories.js
index a9406ee5a..8f7f090c0 100644
--- a/src/smart-components/App/stories/index.stories.js
+++ b/src/smart-components/App/stories/index.stories.js
@@ -24,17 +24,17 @@ export const versionInfo = () => {
     <>
       <div>UIKit: {pkg.version}</div>
       <div>Sendbird SDK: {pkg.dependencies.sendbird.version}</div>
-      <button onClick={() => { setshowAll(!showAll)}}>Show all</button>
+      <button onClick={() => { setshowAll(!showAll) }}>Show all</button>
       {
         showAll && (
-        <div>
-          {
-            Object.keys(pkg.dependencies)
-              .map((p) => (
-                <div key={p}>{p}: {pkg.dependencies[p].version}</div>
-              ))
-          }
-        </div>
+          <div>
+            {
+              Object.keys(pkg.dependencies)
+                .map((p) => (
+                  <div key={p}>{p}: {pkg.dependencies[p].version}</div>
+                ))
+            }
+          </div>
         )
       }
     </>
@@ -47,7 +47,7 @@ export const basicSDK = () => fitPageSize(
     userId={userId}
     nickname={userId}
     showSearchIcon
-    /*config={{ logLevel: 'all' }}*/
+  /*config={{ logLevel: 'all' }}*/
   />
 );
 
@@ -111,8 +111,8 @@ export const login = () => {
           type="button"
           value={
             messageSearch
-            ? 'Use MessageSearch'
-            : 'Not use MessageSearch'
+              ? 'Use MessageSearch'
+              : 'Not use MessageSearch'
           }
           onClick={() => setMessageSearch(!messageSearch)}
         />
@@ -121,8 +121,8 @@ export const login = () => {
           type="button"
           value={
             profileEdit
-            ? 'Use ProfileEdit'
-            : 'Not use ProfileEdit'
+              ? 'Use ProfileEdit'
+              : 'Not use ProfileEdit'
           }
           onClick={() => setProfileEdit(!profileEdit)}
         />
@@ -207,7 +207,12 @@ export const user2 = () => fitPageSize(
     showSearchIcon
     allowProfileEdit
     profileUrl={addProfile}
-  // config={{ logLevel: 'all' }}
+    replyType="QUOTE_REPLY"
+    imageCompression={{
+      compressionRate: 0.5,
+      resizingWidth: 100,
+      resizingHeight: '100px',
+    }}
   />
 );
 export const user3 = () => fitPageSize(
@@ -219,11 +224,6 @@ export const user3 = () => fitPageSize(
     showSearchIcon
     allowProfileEdit
     profileUrl={addProfile}
-    imageCompression={{
-      compressionRate: 0.5,
-      resizingWidth: 100,
-      resizingHeight: '100px',
-    }}
     replyType="QUOTE_REPLY"
   />
 );
@@ -264,41 +264,41 @@ const CustomApp = () => {
       imageCompression={{ compressionRate: 0.5, resizingWidth: 100, resizingHeight: '100px' }}
     >
       <div style={{ height: '100%', width: '100%', display: 'flex', flexDirection: 'row' }}>
-          <SBChannelList setChannelUrl={setChannelUrl} />
-          <div style={{ height: '100%', width: '100%', display: 'inline-flex', flexDirection: 'row' }}>
+        <SBChannelList setChannelUrl={setChannelUrl} />
+        <div style={{ height: '100%', width: '100%', display: 'inline-flex', flexDirection: 'row' }}>
+          <div style={{ width: '100%' }}>
+            <Conversation
+              channelUrl={channelUrl}
+              onChatHeaderActionClick={() => {
+                setChannelSearch(false);
+                setChannelSettings(true);
+              }}
+              showSearchIcon
+              onSearchClick={() => {
+                setChannelSettings(false);
+                setChannelSearch(true);
+              }}
+            />
+          </div>
+          {channelSearch && (
             <div style={{ width: '100%' }}>
-              <Conversation
+              <MessageSearch
                 channelUrl={channelUrl}
-                onChatHeaderActionClick={() => {
-                  setChannelSearch(false);
-                  setChannelSettings(true);
-                }}
-                showSearchIcon
-                onSearchClick={() => {
-                  setChannelSettings(false);
-                  setChannelSearch(true);
-                }}
+                searchString="hello"
+                onResultClick={() => { }}
               />
             </div>
-            {channelSearch && (
-              <div style={{ width: '100%' }}>
-                <MessageSearch
-                  channelUrl={channelUrl}
-                  searchString="hello"
-                  onResultClick={() => {}}
-                />
-              </div>
-            )}
-            {channelSettings && (
-              <div style={{ display: 'inline-flex'}}>
-                <ChannelSettings
-                  channelUrl={channelUrl}
-                  onCloseClick={() => setChannelSettings(false)}
-                />
-              </div>
-            )}
-          </div>
+          )}
+          {channelSettings && (
+            <div style={{ display: 'inline-flex' }}>
+              <ChannelSettings
+                channelUrl={channelUrl}
+                onCloseClick={() => setChannelSettings(false)}
+              />
+            </div>
+          )}
         </div>
+      </div>
     </Sendbird>
   );
 };

From b68181018f72f7dbc02bf0a69090c38ac9007da8 Mon Sep 17 00:00:00 2001
From: HoonBaek <hoon@sendbird.com>
Date: Tue, 26 Oct 2021 15:03:37 +0900
Subject: [PATCH 2/2] Apply scrollToMessage into QuoteMessage component

---
 src/ui/MessageContent/index.tsx | 12 ++++++++++--
 src/ui/QuoteMessage/index.tsx   |  8 +++++++-
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/ui/MessageContent/index.tsx b/src/ui/MessageContent/index.tsx
index 7f0245d1a..3d2302218 100644
--- a/src/ui/MessageContent/index.tsx
+++ b/src/ui/MessageContent/index.tsx
@@ -64,7 +64,7 @@ export default function MessageContent({
   chainBottom = false,
   useReaction = false,
   replyType,
-  // scrollToMessage,
+  scrollToMessage,
   nicknamesMap,
   emojiContainer,
   showEdit,
@@ -185,7 +185,15 @@ export default function MessageContent({
         {/* quote message */}
         {(useReplying) ? (
           <div className={getClassName(['sendbird-message-content__middle__quote-message', isByMe ? 'outgoing' : 'incoming'])}>
-          <QuoteMessage message={message} isByMe={isByMe} />
+          <QuoteMessage
+            message={message}
+            isByMe={isByMe}
+            onClick={() => {
+              if (message?.parentMessage?.createdAt && message?.parentMessageId) {
+                scrollToMessage(message.parentMessage.createdAt, message.parentMessageId);
+              }
+            }}
+          />
           </div>
         ): null}
         {/* message item body components */}
diff --git a/src/ui/QuoteMessage/index.tsx b/src/ui/QuoteMessage/index.tsx
index e36fd4491..24c423386 100644
--- a/src/ui/QuoteMessage/index.tsx
+++ b/src/ui/QuoteMessage/index.tsx
@@ -23,12 +23,14 @@ interface Props {
   message?: UserMessage | FileMessage;
   isByMe?: boolean;
   className?: string | Array<string>;
+  onClick?: () => void;
 }
 
 export default function QuoteMessage({
   message,
   isByMe = false,
   className,
+  onClick = () => {},
 }: Props): ReactElement {
   const { parentMessage } = message;
   const parentMessageSender = parentMessage?.sender;
@@ -43,7 +45,11 @@ export default function QuoteMessage({
   const splitUrl = parentMessageUrl.split('/');
 
   return (
-    <div className={getClassName([className, 'sendbird-quote-message', isByMe ? 'outgoing' : 'incoming'])}>
+    <div
+      className={getClassName([className, 'sendbird-quote-message', isByMe ? 'outgoing' : 'incoming'])}
+      key={parentMessage?.messageId}
+      onClick={onClick}
+    >
       <div className="sendbird-quote-message__replied-to">
         <Icon
           className="sendbird-quote-message__replied-to__icon"