From b565fb594b9adb8f07f5f1d665373cfbec656d74 Mon Sep 17 00:00:00 2001
From: khuctrang <khuctrang1812@gmail.com>
Date: Tue, 18 Jan 2022 17:11:38 +0700
Subject: [PATCH 1/7] fix: use bottom aligned avatar for bubble chat

---
 src/components/BubbleChat/index.js | 257 ++++++++++++++++-------------
 1 file changed, 141 insertions(+), 116 deletions(-)

diff --git a/src/components/BubbleChat/index.js b/src/components/BubbleChat/index.js
index 503538c..a33dab4 100644
--- a/src/components/BubbleChat/index.js
+++ b/src/components/BubbleChat/index.js
@@ -94,7 +94,7 @@ const typeThemeClassNames = {
 
 const typeRadiusClassNames = {
   inbound: 'u-roundedExtraLarge u-roundedBottomRightNone',
-  outbound: 'u-roundedExtraLarge  u-roundedBottomLeftNone',
+  outbound: 'u-roundedExtraLarge u-roundedBottomLeftNone',
   system: 'u-roundedExtraLarge',
 };
 
@@ -105,7 +105,63 @@ const BubbleChat = React.forwardRef(({ className, isTyping, text, type, variant,
     else if (type === 'outbound') variantOri = 'light';
     else if (type === 'system') variantOri = 'primaryLight';
   }
+
   const context = useMemo(() => ({ type }), [type]);
+
+  const renderTime = () => (
+    <>
+      {type !== 'inbound' && <div />}
+      <div
+        className={classNames(
+          'BubbleChat-time',
+          'u-text100 u-textLight u-marginTopTiny',
+          (type === 'inbound' && children) && 'u-textRight'
+        )}
+        style={{
+          ...(type === 'inbound' ? { justifySelf: 'flex-end' } : {}),
+        }}
+      >
+        {time}
+      </div>
+      {type === 'inbound' && <div />}
+    </>
+  );
+
+  const renderTyping = () => (
+    <div className={classNames(
+      'u-overflowHidden',
+      type && typeRadiusClassNames[type]
+    )}
+    >
+      <div
+        className={classNames(
+          'BubbleChat-typing',
+          'u-paddingExtraSmall u-positionRelative',
+          type && typeThemeClassNames[type],
+          variantOri && variantTextClassNames[variantOri],
+          variantOri && variantClassNames[variantOri],
+        )}
+      >
+        <div className="BubbleChat-typingContext u-positionRelative u-fontSizeNone" style={{ width: 32, height: 10 }} />
+      </div>
+    </div>
+  );
+
+  const renderAvatar = (type = 'outbound') => (
+    <div className={
+      classNames(
+        type === 'outbound' ? 'u-marginRightExtraSmall' : 'u-marginLeftExtraSmall',
+        'u-alignSelfEnd',
+      )
+    }
+    >
+      {typeof (avatar) === 'function'
+        ? avatar()
+        : <Avatar name={avatar} size="small" />
+      }
+    </div>
+  );
+
   return (
     <Context.Provider value={context}>
       <div
@@ -118,139 +174,108 @@ const BubbleChat = React.forwardRef(({ className, isTyping, text, type, variant,
           className && className
         )}
       >
-        <div className={classNames(
-          'BubbleChat-container',
-          'u-flex',
-          (type === 'inbound') && 'u-justifyContentEnd u-marginLeftAuto',
-        )}
-        >
-          {(avatar && type !== 'inbound') && (
-            <div className="u-flexShrink0 u-marginRightExtraSmall u-marginTopExtraSmall">
-              {
-                typeof (avatar) === 'function' ? avatar() : <Avatar name={avatar} size="small" />
-              }
-            </div>
+        <div
+          className={classNames(
+            'BubbleChat-container',
+            (type === 'inbound') && 'u-justifyContentEnd u-marginLeftAuto',
           )}
+          style={{
+            display: 'grid',
+            gridTemplateColumns: type === 'inbound' ? '1fr auto' : 'auto 1fr',
+          }}
+        >
+          {(type !== 'inbound' && avatar) && renderAvatar('outbound')}
+          {(type !== 'inbound' && !avatar) && <div />}
 
           <div className={classNames(
             'BubbleChat-context',
             'u-flex u-flexColumn',
-            children && 'u-widthFull',
+            children && 'u-maxWidthFull',
             (type === 'inbound' && !avatar) && 'u-marginLeftMedium',
             (type === 'inbound' && !children) && 'u-alignItemsEnd'
           )}
           >
             <React.Fragment>
-              {isTyping && (
-              <div className={classNames(
-                'u-overflowHidden',
-                type && typeRadiusClassNames[type]
-              )}
-              >
-                <div
-                  className={classNames(
-                    'BubbleChat-typing',
-                    'u-paddingExtraSmall u-positionRelative',
-                    type && typeThemeClassNames[type],
-                    variantOri && variantTextClassNames[variantOri],
-                    variantOri && variantClassNames[variantOri],
-                  )}
-                >
-                  <div className="BubbleChat-typingContext u-positionRelative u-fontSizeNone" style={{ width: 32, height: 10 }} />
-                </div>
-              </div>
-              )}
+              {isTyping && renderTyping()}
               {!isTyping && (
-              <React.Fragment>
-                {children || (
-                <div className="u-positionRelative">
-                  {actionBar && (
-                    <div className={classNames(
-                      'u-positionAbsolute u-positionTop u-marginTopTiny u-marginHorizontalExtraSmall',
-                      type === 'inbound' ? 'u-positionRight-100' : 'u-positionLeft-100',
-                      actionBarClassName && actionBarClassName,
-                    )}
-                    >
-                      {actionBar}
-                    </div>
-                  )}
-                  <div className={classNames(
-                    'u-overflowHidden u-flexInline u-flexColumn',
-                    type && typeRadiusClassNames[type]
-                  )}
-                  >
-                    <div
-                      className={classNames(
-                        'BubbleChat-text',
-                        'u-paddingVerticalExtraSmall u-paddingHorizontalSmall u-textPreLine',
-                        type && typeThemeClassNames[type],
-                        ((variantOri === 'primary' || variantOri === 'dark' || variantOri === 'transparentDark') && textClassName) ? textClassName : variantTextClassNames[variantOri],
-                        variantOri && variantClassNames[variantOri],
-
+                <React.Fragment>
+                  {children || (
+                    <div className="u-positionRelative">
+                      {actionBar && (
+                        <div className={classNames(
+                          'u-positionAbsolute u-positionTop u-marginTopTiny u-marginHorizontalExtraSmall',
+                          type === 'inbound' ? 'u-positionRight-100' : 'u-positionLeft-100',
+                          actionBarClassName && actionBarClassName,
+                        )}
+                        >
+                          {actionBar}
+                        </div>
                       )}
-                      onClick={onClickText}
-                    >
-                      {text}
-                    </div>
-                    {options && (
-                    <div className="u-flex u-flexColumn u-border u-borderUltraLight u-roundedBottomExtraLarge u-text200 u-overflowHidden">
-                      {options.map((option, idx) => {
-                        let cn;
-                        let handleClick;
+                      <div className={classNames(
+                        'u-overflowHidden u-flexInline u-flexColumn',
+                        type && typeRadiusClassNames[type]
+                      )}
+                      >
+                        <div
+                          className={classNames(
+                            'BubbleChat-text',
+                            'u-paddingVerticalExtraSmall u-paddingHorizontalSmall u-textPreLine',
+                            type && typeThemeClassNames[type],
+                            ((variantOri === 'primary' || variantOri === 'dark' || variantOri === 'transparentDark') && textClassName) ? textClassName : variantTextClassNames[variantOri],
+                            variantOri && variantClassNames[variantOri],
+
+                          )}
+                          onClick={onClickText}
+                        >
+                          {text}
+                        </div>
+                        {options && (
+                          <div className="u-flex u-flexColumn u-border u-borderUltraLight u-roundedBottomExtraLarge u-text200 u-overflowHidden">
+                            {options.map((option, idx) => {
+                              let cn;
+                              let handleClick;
 
-                        if (option.id === currentOption) {
-                          cn = `u-backgroundPrimary ${textClassName || 'u-textWhite'} ${disabledOption ? 'u-cursorNotAllow' : ''}`;
-                          handleClick = null;
-                        } else if (disabledOption) {
-                          cn = 'u-backgroundLighter u-textGray u-cursorNotAllow';
-                          handleClick = null;
-                        } else {
-                          cn = 'u-backgroundWhite hover:u-backgroundLightest u-textPrimary u-cursorPointer';
-                          handleClick = () => onSelectOption(option.id);
-                        }
+                              if (option.id === currentOption) {
+                                cn = `u-backgroundPrimary ${textClassName || 'u-textWhite'} ${disabledOption ? 'u-cursorNotAllow' : ''}`;
+                                handleClick = null;
+                              } else if (disabledOption) {
+                                cn = 'u-backgroundLighter u-textGray u-cursorNotAllow';
+                                handleClick = null;
+                              } else {
+                                cn = 'u-backgroundWhite hover:u-backgroundLightest u-textPrimary u-cursorPointer';
+                                handleClick = () => onSelectOption(option.id);
+                              }
 
-                        return (
-                          <button
-                            key={option.id}
-                            type="button"
-                            disabled={disabledOption}
-                            onClick={handleClick}
-                            className={classNames(
-                              'u-paddingExtraSmall u-transitionColors u-easeInOut u-duration150 u-textCenter',
-                              (idx !== 0) ? 'u-borderTop u-borderBottomNone u-borderLeftNone u-borderRightNone u-borderUltraLight' : 'u-borderNone',
-                              cn,
-                            )}
-                          >
-                            {option.name}
-                          </button>
-                        );
-                      })}
+                              return (
+                                <button
+                                  key={option.id}
+                                  type="button"
+                                  disabled={disabledOption}
+                                  onClick={handleClick}
+                                  className={classNames(
+                                    'u-paddingExtraSmall u-transitionColors u-easeInOut u-duration150 u-textCenter',
+                                    (idx !== 0) ? 'u-borderTop u-borderBottomNone u-borderLeftNone u-borderRightNone u-borderUltraLight' : 'u-borderNone',
+                                    cn,
+                                  )}
+                                >
+                                  {option.name}
+                                </button>
+                              );
+                            })}
+                          </div>
+                        )}
+                      </div>
                     </div>
-                    )}
-                  </div>
-                </div>
-                )}
-                {time && (
-                <div className={classNames(
-                  'BubbleChat-time',
-                  'u-text100 u-textLight u-marginTopTiny',
-                  (type === 'inbound' && children) && 'u-textRight'
-                )}
-                >
-                  {time}
-                </div>
-                )}
-              </React.Fragment>
+                  )}
+                </React.Fragment>
               )}
             </React.Fragment>
           </div>
-          {(avatar && (type !== 'outbound' && type !== 'system')) && (
-            <div className="u-flexShrink0 u-marginLeftExtraSmall u-marginTopExtraSmall">
-              {
-              typeof (avatar) === 'function' ? avatar() : <Avatar name={avatar} size="small" />
-            }
-            </div>
-          )}
+
+          {((type !== 'outbound' && type !== 'system') && avatar) && renderAvatar('inbound')}
+          {((type !== 'outbound' && type !== 'system') && !avatar) && <div />}
+
+          {time && renderTime()}
         </div>
       </div>
     </Context.Provider>

From ec7c0b93f96c0789ac73c355700631066e674ef4 Mon Sep 17 00:00:00 2001
From: khuctrang <khuctrang1812@gmail.com>
Date: Tue, 18 Jan 2022 17:12:01 +0700
Subject: [PATCH 2/7] fix: make bubble chat image style more predictable

---
 src/components/BubbleChat/Image.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/BubbleChat/Image.js b/src/components/BubbleChat/Image.js
index c09381d..786421d 100644
--- a/src/components/BubbleChat/Image.js
+++ b/src/components/BubbleChat/Image.js
@@ -10,10 +10,12 @@ const BubbleChatImage = React.forwardRef(({ className, ...props }, ref) => {
       ref={ref}
       className={classNames(
         'BubbleChat-image',
-        'u-marginBottomTiny',
         (type === 'inbound') && 'u-textRight',
         className && className
       )}
+      style={{
+        lineHeight: 0,
+      }}
     >
       <img {...props} className="u-roundedMedium u-border u-maxWidthFull" alt="" />
     </div>

From ea23d0ab872f61f72fcd8ba43ad159c4d3f0df9d Mon Sep 17 00:00:00 2001
From: khuctrang <khuctrang1812@gmail.com>
Date: Tue, 18 Jan 2022 17:25:40 +0700
Subject: [PATCH 3/7] fix: add comments for hacky implementation

---
 src/components/BubbleChat/index.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/BubbleChat/index.js b/src/components/BubbleChat/index.js
index a33dab4..7f9ebe5 100644
--- a/src/components/BubbleChat/index.js
+++ b/src/components/BubbleChat/index.js
@@ -110,6 +110,7 @@ const BubbleChat = React.forwardRef(({ className, isTyping, text, type, variant,
 
   const renderTime = () => (
     <>
+      {/* Empty <div /> to occupy the bottom left corner of grid template */}
       {type !== 'inbound' && <div />}
       <div
         className={classNames(
@@ -123,6 +124,7 @@ const BubbleChat = React.forwardRef(({ className, isTyping, text, type, variant,
       >
         {time}
       </div>
+      {/* Empty <div /> to occupy the bottom right corner of grid template */}
       {type === 'inbound' && <div />}
     </>
   );
@@ -185,6 +187,7 @@ const BubbleChat = React.forwardRef(({ className, isTyping, text, type, variant,
           }}
         >
           {(type !== 'inbound' && avatar) && renderAvatar('outbound')}
+          {/* Empty <div /> to occupy the top left corner of grid template */}
           {(type !== 'inbound' && !avatar) && <div />}
 
           <div className={classNames(
@@ -273,6 +276,7 @@ const BubbleChat = React.forwardRef(({ className, isTyping, text, type, variant,
           </div>
 
           {((type !== 'outbound' && type !== 'system') && avatar) && renderAvatar('inbound')}
+          {/* Empty <div /> to occupy the top right corner of grid template */}
           {((type !== 'outbound' && type !== 'system') && !avatar) && <div />}
 
           {time && renderTime()}

From eb8aa2c9872ba439696a79ac9bf84f1feb55c5a2 Mon Sep 17 00:00:00 2001
From: khuctrang <khuctrang1812@gmail.com>
Date: Tue, 18 Jan 2022 17:26:03 +0700
Subject: [PATCH 4/7] docs: update CHANGELOG.md

---
 CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ae56773..6440a7c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,7 @@
+## Release 2.0.4 - Unreleased
+### Fixed
+* BubbleChat: Use bottom alignment for avatar
+* BubbleChat.Image: Set `lineHeight` to `0` to make image in the same baseline with avatar
 ## Release 2.0.3 - January 18, 2022
 ### Fixed
 * Code base: use absolute imports, rearrange hooks and utils

From 1720f7303f016870d6071c7ba275fd2b99fad962 Mon Sep 17 00:00:00 2001
From: khuctrang <khuctrang1812@gmail.com>
Date: Tue, 18 Jan 2022 17:57:06 +0700
Subject: [PATCH 5/7] chore: update browserslist

---
 .browserslistrc | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/.browserslistrc b/.browserslistrc
index 8289333..2e8bf2b 100644
--- a/.browserslistrc
+++ b/.browserslistrc
@@ -1,11 +1,12 @@
 > 1%
 ie >= 8
-edge >= 15
+edge >= 16
 ie_mob >= 10
-ff >= 45
-chrome >= 45
-safari >= 7
-opera >= 23
-ios >= 7
-android >= 4
+ff >= 52
+chrome >= 57
+safari >= 10.1
+opera >= 44
+ios >= 10.3
+and_uc >= 12.12
+and_chr >= 97
 bb >= 10

From a685ec732e7ee7954cda3c0fed6edd8e7a008399 Mon Sep 17 00:00:00 2001
From: khuctrang <khuctrang1812@gmail.com>
Date: Tue, 18 Jan 2022 18:02:35 +0700
Subject: [PATCH 6/7] fix: prioritize classnames over inline style

---
 src/components/BubbleChat/Image.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/BubbleChat/Image.js b/src/components/BubbleChat/Image.js
index 786421d..50bc8a2 100644
--- a/src/components/BubbleChat/Image.js
+++ b/src/components/BubbleChat/Image.js
@@ -10,12 +10,10 @@ const BubbleChatImage = React.forwardRef(({ className, ...props }, ref) => {
       ref={ref}
       className={classNames(
         'BubbleChat-image',
+        'u-lineHeightNone',
         (type === 'inbound') && 'u-textRight',
         className && className
       )}
-      style={{
-        lineHeight: 0,
-      }}
     >
       <img {...props} className="u-roundedMedium u-border u-maxWidthFull" alt="" />
     </div>

From dfc63630ba3833577aee89429e3cc2d0b0bb6f7e Mon Sep 17 00:00:00 2001
From: Eric <lenkc98@gmail.com>
Date: Wed, 19 Jan 2022 10:55:18 +0700
Subject: [PATCH 7/7] Update CHANGELOG.md

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6440a7c..38f34f7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,7 @@
 ### Fixed
 * BubbleChat: Use bottom alignment for avatar
 * BubbleChat.Image: Set `lineHeight` to `0` to make image in the same baseline with avatar
+
 ## Release 2.0.3 - January 18, 2022
 ### Fixed
 * Code base: use absolute imports, rearrange hooks and utils