From 85237ea62af40837bb5835f161155f79eda1382e Mon Sep 17 00:00:00 2001
From: HoonBaek <hoon@sendbird.com>
Date: Mon, 6 Dec 2021 10:37:38 +0900
Subject: [PATCH 1/5] Move message status and created-at components into the
 body of message content component

---
 .../App/stories/index.stories.js              |  3 +
 .../__tests__/MessageContent.spec.js          | 14 +---
 .../__snapshots__/MessageContent.spec.js.snap | 10 +--
 src/ui/MessageContent/index.scss              | 79 ++++++++++++-------
 src/ui/MessageContent/index.tsx               | 39 ++++-----
 5 files changed, 82 insertions(+), 63 deletions(-)

diff --git a/src/smart-components/App/stories/index.stories.js b/src/smart-components/App/stories/index.stories.js
index 483dcce6d..0af0e787a 100644
--- a/src/smart-components/App/stories/index.stories.js
+++ b/src/smart-components/App/stories/index.stories.js
@@ -220,6 +220,7 @@ export const user2 = () => fitPageSize(
     showSearchIcon
     allowProfileEdit
     profileUrl={addProfile}
+    config={{ logLevel: 'all' }}
     replyType="QUOTE_REPLY"
     useMessageGrouping={false}
     imageCompression={{
@@ -238,6 +239,7 @@ export const user3 = () => fitPageSize(
     showSearchIcon
     allowProfileEdit
     profileUrl={addProfile}
+    config={{ logLevel: 'all' }}
     replyType="QUOTE_REPLY"
   />
 );
@@ -251,6 +253,7 @@ export const user4 = () => fitPageSize(
     allowProfileEdit
     useMessageGrouping={false}
     profileUrl={addProfile}
+    config={{ logLevel: 'all' }}
     replyType="QUOTE_REPLY"
   />
 );
diff --git a/src/ui/MessageContent/__tests__/MessageContent.spec.js b/src/ui/MessageContent/__tests__/MessageContent.spec.js
index 4b0e8ef30..273c6e12b 100644
--- a/src/ui/MessageContent/__tests__/MessageContent.spec.js
+++ b/src/ui/MessageContent/__tests__/MessageContent.spec.js
@@ -72,7 +72,7 @@ describe('MessageContent', () => {
       component.find('.sendbird-message-content__left__avatar').hostNodes().exists()
     ).toBe(true);
     expect(
-      component.find('.sendbird-message-content__left__created-at').hostNodes().exists()
+      component.find('.sendbird-message-content__middle__body-container__created-at.left').hostNodes().exists()
     ).toBe(false);
     expect(
       component.find('.sendbird-message-content-menu.outgoing').hostNodes().exists()
@@ -87,7 +87,7 @@ describe('MessageContent', () => {
       component.find('.sendbird-message-content__right.chain-top').hostNodes().exists()
     ).toBe(false);
     expect(
-      component.find('.sendbird-message-content__right__created-at').hostNodes().exists()
+      component.find('.sendbird-message-content__middle__body-container__created-at.right').hostNodes().exists()
     ).toBe(true);
     expect(
       component.find('.sendbird-message-content-menu.incoming').hostNodes().exists()
@@ -198,10 +198,7 @@ describe('MessageContent', () => {
       outgoingMessage.find('.sendbird-message-content__left__avatar').hostNodes().exists()
     ).toBe(false);
     expect(
-      outgoingMessage.find('.sendbird-message-content__left__created-at').hostNodes().exists()
-    ).toBe(false);
-    expect(
-      outgoingMessage.find('.sendbird-message-content__right__created-at').hostNodes().exists()
+      outgoingMessage.find('.sendbird-message-content__middle__body-container__created-at').hostNodes().exists()
     ).toBe(false);
     const incomingMessage = mount(
       <MessageContent
@@ -216,10 +213,7 @@ describe('MessageContent', () => {
       incomingMessage.find('.sendbird-message-content__left__avatar').hostNodes().exists()
     ).toBe(false);
     expect(
-      incomingMessage.find('.sendbird-message-content__left__created-at').hostNodes().exists()
-    ).toBe(false);
-    expect(
-      incomingMessage.find('.sendbird-message-content__right__created-at').hostNodes().exists()
+      incomingMessage.find('.sendbird-message-content__middle__body-container__created-at').hostNodes().exists()
     ).toBe(false);
   });
 
diff --git a/src/ui/MessageContent/__tests__/__snapshots__/MessageContent.spec.js.snap b/src/ui/MessageContent/__tests__/__snapshots__/MessageContent.spec.js.snap
index 8af93db64..0e39c2f39 100644
--- a/src/ui/MessageContent/__tests__/__snapshots__/MessageContent.spec.js.snap
+++ b/src/ui/MessageContent/__tests__/__snapshots__/MessageContent.spec.js.snap
@@ -89,16 +89,16 @@ exports[`MessageContent should do a snapshot test of the MessageContent DOM 1`]
           First second third
         </span>
       </div>
+      <span
+        className="sendbird-message-content__middle__body-container__created-at right  sendbird-label sendbird-label--caption-3 sendbird-label--color-onbackground-2"
+      >
+        mock-date
+      </span>
     </div>
   </div>
   <div
     className="sendbird-message-content__right   "
   >
-    <span
-      className="sendbird-message-content__right__created-at  sendbird-label sendbird-label--caption-3 sendbird-label--color-onbackground-2"
-    >
-      mock-date
-    </span>
     <div
       className="sendbird-message-content-menu   incoming"
     >
diff --git a/src/ui/MessageContent/index.scss b/src/ui/MessageContent/index.scss
index d43af7890..e15befbe6 100644
--- a/src/ui/MessageContent/index.scss
+++ b/src/ui/MessageContent/index.scss
@@ -36,11 +36,28 @@
     flex-direction: column;
     max-width: 400px;
     align-items: flex-start;
+
+    .sendbird-message-content__middle__body-container {
+      .sendbird-message-content__middle__body-container__created-at {
+        position: absolute;
+        bottom: 6px;
+        right: -84px;
+        white-space: nowrap;
+        display: flex;
+        flex-direction: row;
+        min-width: 80px;
+        &.supposed-hover {
+          display: none;
+        }
+      }
+    }
+
     .sendbird-message-content__middle__sender-name {
       position: relative;
       margin-left: 12px;
       margin-bottom: 4px;
     }
+
     .sendbird-message-content__middle__quote-message {
       position: relative;
       width: 100%;
@@ -64,16 +81,6 @@
       }
     }
 
-    .sendbird-message-content__right__created-at {
-      position: absolute;
-      bottom: 2px;
-      white-space: nowrap;
-      display: inline-flex;
-      &.supposed-hover {
-        display: none;
-      }
-    }
-
     .sendbird-message-content-menu {
       position: relative;
       flex-direction: row;
@@ -87,9 +94,6 @@
 
   &:hover {
     .sendbird-message-content__right {
-      .sendbird-message-content__right__created-at {
-        display: none;
-      }
       .sendbird-message-content-menu {
         display: inline-flex;
       }
@@ -112,20 +116,6 @@
       }
     }
 
-    .sendbird-message-content__left__created-at {
-      position: absolute;
-      bottom: 2px;
-      right: 4px;
-      white-space: nowrap;
-      display: flex;
-      box-sizing: content-box;
-      min-width: 16px;
-      min-height: 16px;
-      &.supposed-hover {
-        display: none;
-      }
-    }
-
     .sendbird-message-content-menu {
       position: absolute;
       top: 2px;
@@ -144,6 +134,7 @@
     flex-direction: column;
     max-width: 400px;
     align-items: flex-end;
+
     .sendbird-message-content__middle__quote-message {
       position: relative;
       width: 100%;
@@ -153,7 +144,27 @@
     }
 
     .sendbird-message-content__middle__body-container {
+      position: relative;
       width: fit-content;
+
+      .sendbird-message-content__middle__body-container__created-at {
+        position: absolute;
+        bottom: 2px;
+        left: -84px;
+        white-space: nowrap;
+        display: flex;
+        justify-content: flex-end;
+        box-sizing: content-box;
+        min-width: 80px;
+        min-height: 16px;
+        &.supposed-hover {
+          display: none;
+        }
+        .sendbird-message-content__middle__body-container__created-at__component-container {
+          position: relative;
+          display: inline-flex;
+        }
+      }
     }
   }
 
@@ -163,19 +174,27 @@
 
   &:hover {
     .sendbird-message-content__left {
-      .sendbird-message-content__left__created-at {
-        display: none;
-      }
       .sendbird-message-content-menu {
         display: inline-flex;
       }
     }
+    .sendbird-message-content__middle {
+      .sendbird-message-content__middle__body-container {
+        .sendbird-message-content__middle__body-container__created-at,
+        .sendbird-message-content__middle__body-container__right-created-at {
+          display: none;
+        }
+      }
+    }
   }
 }
 
 .sendbird-message-content__middle__body-container {
   position: relative;
   width: fit-content;
+  display: flex;
+  flex-direction: row;
+
   .sendbird-message-content__middle__message-item-body {
     width: 100%;
     box-sizing: border-box;
diff --git a/src/ui/MessageContent/index.tsx b/src/ui/MessageContent/index.tsx
index 5b81168cd..8bea1f590 100644
--- a/src/ui/MessageContent/index.tsx
+++ b/src/ui/MessageContent/index.tsx
@@ -132,15 +132,6 @@ export default function MessageContent({
             )}
           />
         )}
-        {(isByMe && !chainBottom) && (
-          <div className={getClassName(['sendbird-message-content__left__created-at', supposedHoverClassName])}>
-            <MessageStatus
-              message={message}
-              channel={channel}
-              status={getOutgoingMessageState(channel, message)}
-            />
-          </div>
-        )}
         {/* outgoing menu */}
         {isByMe && (
           <div className={getClassName(['sendbird-message-content-menu', useReactionClassName, supposedHoverClassName, isByMeClassName])}>
@@ -200,6 +191,18 @@ export default function MessageContent({
         ) : null}
         {/* container: message item body + emoji reactions */}
         <div className={getClassName(['sendbird-message-content__middle__body-container'])} >
+          {/* message status component */}
+          {(isByMe && !chainBottom) && (
+            <div className={getClassName(['sendbird-message-content__middle__body-container__created-at', 'left', supposedHoverClassName])}>
+              <div className="sendbird-message-content__middle__body-container__created-at__component-container">
+                <MessageStatus
+                  message={message}
+                  channel={channel}
+                  status={getOutgoingMessageState(channel, message)}
+                />
+              </div>
+            </div>
+          )}
           {/* message item body components */}
           {isTextMessage(message as UserMessage) && (
             <TextMessageItemBody
@@ -259,19 +262,19 @@ export default function MessageContent({
               />
             </div>
           )}
+          {(!isByMe && !chainBottom) && (
+            <Label
+              className={getClassName(['sendbird-message-content__middle__body-container__created-at', 'right', supposedHoverClassName])}
+              type={LabelTypography.CAPTION_3}
+              color={LabelColors.ONBACKGROUND_2}
+            >
+              {getMessageCreatedAt(message)}
+            </Label>
+          )}
         </div>
       </div>
       {/* right */}
       <div className={getClassName(['sendbird-message-content__right', chainTopClassName, useReactionClassName, useReplyingClassName])}>
-        {(!isByMe && !chainBottom) && (
-          <Label
-            className={getClassName(['sendbird-message-content__right__created-at', supposedHoverClassName])}
-            type={LabelTypography.CAPTION_3}
-            color={LabelColors.ONBACKGROUND_2}
-          >
-            {getMessageCreatedAt(message)}
-          </Label>
-        )}
         {/* incoming menu */}
         {!isByMe && (
           <div className={getClassName(['sendbird-message-content-menu', chainTopClassName, supposedHoverClassName, isByMeClassName])}>

From d8f5e6da475296f6b754ebeac73b3c77416a7ac9 Mon Sep 17 00:00:00 2001
From: HoonBaek <hoon@sendbird.com>
Date: Mon, 6 Dec 2021 21:25:45 +0900
Subject: [PATCH 2/5] Contain message text with paragraph tag and set their
 word-break properties to the break-word

---
 .../__snapshots__/MessageContent.spec.js.snap | 12 +--
 src/ui/MessageInput/index.jsx                 |  7 +-
 .../OGMessageItemBody.spec.js.snap            | 10 ++-
 src/ui/OGMessageItemBody/index.scss           |  6 +-
 src/ui/OGMessageItemBody/index.tsx            | 75 +++++++++----------
 .../__tests__/TextMessageItemBody.spec.js     |  6 --
 .../TextMessageItemBody.spec.js.snap          | 22 +++---
 src/ui/TextMessageItemBody/index.scss         | 11 ++-
 src/ui/TextMessageItemBody/index.tsx          | 60 +++++++--------
 9 files changed, 102 insertions(+), 107 deletions(-)

diff --git a/src/ui/MessageContent/__tests__/__snapshots__/MessageContent.spec.js.snap b/src/ui/MessageContent/__tests__/__snapshots__/MessageContent.spec.js.snap
index 0e39c2f39..220db1a05 100644
--- a/src/ui/MessageContent/__tests__/__snapshots__/MessageContent.spec.js.snap
+++ b/src/ui/MessageContent/__tests__/__snapshots__/MessageContent.spec.js.snap
@@ -80,15 +80,15 @@ exports[`MessageContent should do a snapshot test of the MessageContent DOM 1`]
     <div
       className="sendbird-message-content__middle__body-container"
     >
-      <div
-        className="sendbird-message-content__middle__message-item-body sendbird-text-message-item-body incoming  "
+      <span
+        className="sendbird-label sendbird-label--body-1 sendbird-label--color-onbackground-1"
       >
-        <span
-          className="sendbird-text-message-item-body__message sendbird-label sendbird-label--body-1 sendbird-label--color-onbackground-1"
+        <p
+          className="sendbird-message-content__middle__message-item-body sendbird-text-message-item-body incoming  "
         >
           First second third
-        </span>
-      </div>
+        </p>
+      </span>
       <span
         className="sendbird-message-content__middle__body-container__created-at right  sendbird-label sendbird-label--caption-3 sendbird-label--color-onbackground-2"
       >
diff --git a/src/ui/MessageInput/index.jsx b/src/ui/MessageInput/index.jsx
index a6dc6ecf5..2a7ac9c92 100644
--- a/src/ui/MessageInput/index.jsx
+++ b/src/ui/MessageInput/index.jsx
@@ -79,7 +79,9 @@ const MessageInput = React.forwardRef((props, ref) => {
   }, [inputValue]);
   // clear input value when channel changes
   useEffect(() => {
-    setInputValue('');
+    if (!isEdit) {
+      setInputValue('');
+    }
   }, [channelUrl]);
 
   const sendMessage = () => {
@@ -137,7 +139,8 @@ const MessageInput = React.forwardRef((props, ref) => {
               setIsShiftPressed(false);
             }
           }}
-        />
+        >
+        </textarea>
         {/* placeholder */}
         {!inputValue && (
           <Label
diff --git a/src/ui/OGMessageItemBody/__tests__/__snapshots__/OGMessageItemBody.spec.js.snap b/src/ui/OGMessageItemBody/__tests__/__snapshots__/OGMessageItemBody.spec.js.snap
index dad1b13a1..1f1dc3c7b 100644
--- a/src/ui/OGMessageItemBody/__tests__/__snapshots__/OGMessageItemBody.spec.js.snap
+++ b/src/ui/OGMessageItemBody/__tests__/__snapshots__/OGMessageItemBody.spec.js.snap
@@ -4,9 +4,13 @@ exports[`OGMessageItemBody should do a snapshot test of the OGMessageItemBody DO
 <div
   className=" sendbird-og-message-item-body incoming  "
 >
-  <div
-    className="sendbird-og-message-item-body__text-bubble"
-  />
+  <span
+    className="sendbird-label sendbird-label--body-1 sendbird-label--color-onbackground-1"
+  >
+    <p
+      className="sendbird-og-message-item-body__text-bubble"
+    />
+  </span>
   <div
     className="sendbird-og-message-item-body__og-thumbnail"
     onClick={[Function]}
diff --git a/src/ui/OGMessageItemBody/index.scss b/src/ui/OGMessageItemBody/index.scss
index 72a38d61b..40b838c16 100644
--- a/src/ui/OGMessageItemBody/index.scss
+++ b/src/ui/OGMessageItemBody/index.scss
@@ -13,7 +13,7 @@
     padding: 8px 12px;
     box-sizing: border-box;
     border-radius: 16px 16px 0px 0px;
-    word-break: break-all;
+    word-break: break-word;
 
     .sendbird-og-message-item-body__text-bubble__message {
       display: inline;
@@ -107,3 +107,7 @@
     border-radius: 16px 16px 0px 0px;
   }
 }
+
+p.sendbird-og-message-item-body__text-bubble {
+  margin: 0px;
+}
diff --git a/src/ui/OGMessageItemBody/index.tsx b/src/ui/OGMessageItemBody/index.tsx
index 33ce97a3f..98395afdb 100644
--- a/src/ui/OGMessageItemBody/index.tsx
+++ b/src/ui/OGMessageItemBody/index.tsx
@@ -40,45 +40,42 @@ export default function OGMessageItemBody({
       mouseHover ? 'mouse-hover' : '',
       message?.reactions?.length > 0 ? 'reactions' : '',
     ])}>
-      <div className="sendbird-og-message-item-body__text-bubble">
-        {
-          message?.message.split(' ').map((word: string) => (
-            isUrl(word)
-              ? (
-                <LinkLabel
-                  className="sendbird-og-message-item-body__text-bubble__message"
-                  key={uuidv4()}
-                  src={word}
-                  type={LabelTypography.BODY_1}
-                  color={isByMe ? LabelColors.ONCONTENT_1 : LabelColors.ONBACKGROUND_1}
-                >
-                  {word}
-                </LinkLabel>
-              )
-              : (
-                <Label
-                  className="sendbird-og-message-item-body__text-bubble__message"
-                  key={uuidv4()}
-                  type={LabelTypography.BODY_1}
-                  color={isByMe ? LabelColors.ONCONTENT_1 : LabelColors.ONBACKGROUND_1}
-                >
-                  {word}
-                </Label>
-              )
-          ))
-        }
-        {
-          isEditedMessage(message) && (
-            <Label
-              className="sendbird-og-message-item-body__text-bubble__message"
-              type={LabelTypography.BODY_1}
-              color={isByMe ? LabelColors.ONCONTENT_2 : LabelColors.ONBACKGROUND_2}
-            >
-              {` ${stringSet.MESSAGE_EDITED} `}
-            </Label>
-          )
-        }
-      </div>
+      <Label
+        key={uuidv4()}
+        type={LabelTypography.BODY_1}
+        color={isByMe ? LabelColors.ONCONTENT_1 : LabelColors.ONBACKGROUND_1}
+      >
+        <p className="sendbird-og-message-item-body__text-bubble">
+          {
+            message?.message.split(' ').map((word: string) => (
+              isUrl(word)
+                ? (
+                  <LinkLabel
+                    className="sendbird-og-message-item-body__text-bubble__message"
+                    key={uuidv4()}
+                    src={word}
+                    type={LabelTypography.BODY_1}
+                    color={isByMe ? LabelColors.ONCONTENT_1 : LabelColors.ONBACKGROUND_1}
+                  >
+                    {word}
+                  </LinkLabel>
+                )
+                : (`${word} `)
+            ))
+          }
+          {
+            isEditedMessage(message) && (
+              <Label
+                className="sendbird-og-message-item-body__text-bubble__message"
+                type={LabelTypography.BODY_1}
+                color={isByMe ? LabelColors.ONCONTENT_2 : LabelColors.ONBACKGROUND_2}
+              >
+                {` ${stringSet.MESSAGE_EDITED} `}
+              </Label>
+            )
+          }
+        </p>
+      </Label>
       <div
         className="sendbird-og-message-item-body__og-thumbnail"
         onClick={openOGUrl}
diff --git a/src/ui/TextMessageItemBody/__tests__/TextMessageItemBody.spec.js b/src/ui/TextMessageItemBody/__tests__/TextMessageItemBody.spec.js
index fa7106f13..a1627c10d 100644
--- a/src/ui/TextMessageItemBody/__tests__/TextMessageItemBody.spec.js
+++ b/src/ui/TextMessageItemBody/__tests__/TextMessageItemBody.spec.js
@@ -116,9 +116,6 @@ describe('TextMessageItemBody', () => {
         }))}
       />
     );
-    expect(
-      component.find('.sendbird-text-message-item-body__message').hostNodes().length
-    ).toBe(messageText.split(/\r/).length);
     expect(
       component.find('.sendbird-text-message-item-body__message.edited').hostNodes().exists()
     ).toBe(false);
@@ -131,9 +128,6 @@ describe('TextMessageItemBody', () => {
         }))}
       />
     );
-    expect(
-      editedMessage.find('.sendbird-text-message-item-body__message').hostNodes().length
-    ).toBe(messageText.split(/\r/).length + 1);
     expect(
       editedMessage.find('.sendbird-text-message-item-body__message.edited').hostNodes().exists()
     ).toBe(true);
diff --git a/src/ui/TextMessageItemBody/__tests__/__snapshots__/TextMessageItemBody.spec.js.snap b/src/ui/TextMessageItemBody/__tests__/__snapshots__/TextMessageItemBody.spec.js.snap
index 83fb800db..3d8519e6e 100644
--- a/src/ui/TextMessageItemBody/__tests__/__snapshots__/TextMessageItemBody.spec.js.snap
+++ b/src/ui/TextMessageItemBody/__tests__/__snapshots__/TextMessageItemBody.spec.js.snap
@@ -1,18 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`TextMessageItemBody should do a snapshot test of the TextMessageItemBody DOM 1`] = `
-<div
-  className="class-name-for-snapshot sendbird-text-message-item-body outgoing mouse-hover reactions"
+<span
+  className="sendbird-label sendbird-label--body-1 sendbird-label--color-oncontent-1"
 >
-  <span
-    className="sendbird-text-message-item-body__message sendbird-label sendbird-label--body-1 sendbird-label--color-oncontent-1"
+  <p
+    className="class-name-for-snapshot sendbird-text-message-item-body outgoing mouse-hover reactions"
   >
     First second third fourth fifth
-  </span>
-  <span
-    className="sendbird-text-message-item-body__message edited sendbird-label sendbird-label--body-1 sendbird-label--color-oncontent-2"
-  >
-     (edited) 
-  </span>
-</div>
+    <span
+      className="sendbird-text-message-item-body__message edited sendbird-label sendbird-label--body-1 sendbird-label--color-oncontent-2"
+    >
+       (edited) 
+    </span>
+  </p>
+</span>
 `;
diff --git a/src/ui/TextMessageItemBody/index.scss b/src/ui/TextMessageItemBody/index.scss
index 16d22c621..68a1b8312 100644
--- a/src/ui/TextMessageItemBody/index.scss
+++ b/src/ui/TextMessageItemBody/index.scss
@@ -6,6 +6,10 @@
   box-sizing: content-box;
   padding: 8px 12px;
   border-radius: 16px;
+
+  white-space: pre-line;
+  word-break: break-word;
+
   &.reactions {
     border-radius: 16px 16px 0px 0px;
   }
@@ -24,9 +28,8 @@
       @include themed() { background-color: t(primary-4) }
     }
   }
+}
 
-  .sendbird-text-message-item-body__message {
-    white-space: pre-wrap;
-    word-break: break-all;
-  }
+p.sendbird-text-message-item-body {
+  margin: 0px;
 }
diff --git a/src/ui/TextMessageItemBody/index.tsx b/src/ui/TextMessageItemBody/index.tsx
index 7aed648bb..ebdddced1 100644
--- a/src/ui/TextMessageItemBody/index.tsx
+++ b/src/ui/TextMessageItemBody/index.tsx
@@ -24,40 +24,30 @@ export default function TextMessageItemBody({
 }: Props): ReactElement {
   const { stringSet } = useContext(LocalizationContext);
   return (
-    <div className={getClassName([
-      className,
-      'sendbird-text-message-item-body',
-      isByMe ? 'outgoing' : 'incoming',
-      mouseHover ? 'mouse-hover' : '',
-      message?.reactions?.length > 0 ? 'reactions' : '',
-    ])}>
-      {
-        message?.message.split(/\r/).map((word) => (
-          (word === '')
-            ? <br key={word} />
-            : (
-              <Label
-                key={word}
-                className="sendbird-text-message-item-body__message"
-                type={LabelTypography.BODY_1}
-                color={isByMe ? LabelColors.ONCONTENT_1 : LabelColors.ONBACKGROUND_1}
-              >
-                {word}
-              </Label>
-            )
-        ))
-      }
-      {
-        isEditedMessage(message) && (
-          <Label
-            className="sendbird-text-message-item-body__message edited"
-            type={LabelTypography.BODY_1}
-            color={isByMe ? LabelColors.ONCONTENT_2 : LabelColors.ONBACKGROUND_2}
-          >
-            {` ${stringSet.MESSAGE_EDITED} `}
-          </Label>
-        )
-      }
-    </div>
+    <Label
+      type={LabelTypography.BODY_1}
+      color={isByMe ? LabelColors.ONCONTENT_1 : LabelColors.ONBACKGROUND_1}
+    >
+      <p className={getClassName([
+        className,
+        'sendbird-text-message-item-body',
+        isByMe ? 'outgoing' : 'incoming',
+        mouseHover ? 'mouse-hover' : '',
+        message?.reactions?.length > 0 ? 'reactions' : '',
+      ])}>
+        {message?.message}
+        {
+          isEditedMessage(message) && (
+            <Label
+              className="sendbird-text-message-item-body__message edited"
+              type={LabelTypography.BODY_1}
+              color={isByMe ? LabelColors.ONCONTENT_2 : LabelColors.ONBACKGROUND_2}
+            >
+              {` ${stringSet.MESSAGE_EDITED} `}
+            </Label>
+          )
+        }
+      </p>
+    </Label>
   );
 }

From bba2477b364ca9afd51090c70765835489ca8e36 Mon Sep 17 00:00:00 2001
From: HoonBaek <hoon@sendbird.com>
Date: Mon, 6 Dec 2021 21:33:03 +0900
Subject: [PATCH 3/5] Add type definition of replyType to the App and Channel
 components props

---
 src/index.d.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/index.d.ts b/src/index.d.ts
index 03634bfc9..43c2027c8 100644
--- a/src/index.d.ts
+++ b/src/index.d.ts
@@ -387,6 +387,7 @@ interface ChannelProps {
   renderChatHeader?: (props: RenderChatHeaderProps) => React.ReactNode;
   renderUserProfile?: (props: RenderUserProfileProps) => React.ReactNode;
   queries?: ChannelQueries;
+  replyType?: ReplyType;
 }
 interface sendBirdSelectorsInterface {
   getSdk: (store: SendBirdState) => SendBirdSelectors.GetSdk;
@@ -448,6 +449,7 @@ interface AppProps {
     resizingWidth?: number | string,
     resizingHeight?: number | string,
   };
+  replyType?: ReplyType;
 }
 
 interface ClientMessage {

From cbd2dff6d2ff73035dd7ea86f960a97a55c4195b Mon Sep 17 00:00:00 2001
From: HoonBaek <hoon@sendbird.com>
Date: Tue, 7 Dec 2021 10:08:51 +0900
Subject: [PATCH 4/5] Fix flex-direccdtion property of body-container to the
 column

---
 src/ui/MessageContent/index.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ui/MessageContent/index.scss b/src/ui/MessageContent/index.scss
index e15befbe6..26eaa3e19 100644
--- a/src/ui/MessageContent/index.scss
+++ b/src/ui/MessageContent/index.scss
@@ -193,7 +193,7 @@
   position: relative;
   width: fit-content;
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
 
   .sendbird-message-content__middle__message-item-body {
     width: 100%;

From cc7cb08cd570b6c6230092a2de98ceeb07278464 Mon Sep 17 00:00:00 2001
From: HoonBaek <hoon@sendbird.com>
Date: Tue, 7 Dec 2021 10:25:41 +0900
Subject: [PATCH 5/5] Fix lint error and apply undisplaying timestamp in
 incoming message

---
 src/ui/MessageContent/index.scss | 10 ++++++++--
 src/ui/MessageInput/index.jsx    |  3 +--
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/ui/MessageContent/index.scss b/src/ui/MessageContent/index.scss
index 26eaa3e19..7a243f143 100644
--- a/src/ui/MessageContent/index.scss
+++ b/src/ui/MessageContent/index.scss
@@ -98,6 +98,13 @@
         display: inline-flex;
       }
     }
+    .sendbird-message-content__middle {
+      .sendbird-message-content__middle__body-container {
+        .sendbird-message-content__middle__body-container__created-at {
+          display: none;
+        }
+      }
+    }
   }
 }
 
@@ -180,8 +187,7 @@
     }
     .sendbird-message-content__middle {
       .sendbird-message-content__middle__body-container {
-        .sendbird-message-content__middle__body-container__created-at,
-        .sendbird-message-content__middle__body-container__right-created-at {
+        .sendbird-message-content__middle__body-container__created-at {
           display: none;
         }
       }
diff --git a/src/ui/MessageInput/index.jsx b/src/ui/MessageInput/index.jsx
index 2a7ac9c92..72c590a62 100644
--- a/src/ui/MessageInput/index.jsx
+++ b/src/ui/MessageInput/index.jsx
@@ -139,8 +139,7 @@ const MessageInput = React.forwardRef((props, ref) => {
               setIsShiftPressed(false);
             }
           }}
-        >
-        </textarea>
+        />
         {/* placeholder */}
         {!inputValue && (
           <Label