From b8dc80bb9c6302cb8ecaa86dca930708a694dcb3 Mon Sep 17 00:00:00 2001
From: AyushKumar123456789 <ayushjitendra28@gmail.com>
Date: Thu, 2 Jan 2025 16:58:47 +0000
Subject: [PATCH 1/4] feat : added tooltip to avatar, username,timeStamp

---
 packages/react/src/views/Message/MessageAvatarContainer.js | 2 ++
 packages/react/src/views/Message/MessageHeader.js          | 7 ++++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/views/Message/MessageAvatarContainer.js b/packages/react/src/views/Message/MessageAvatarContainer.js
index 7e7a8116ab..9401537d8d 100644
--- a/packages/react/src/views/Message/MessageAvatarContainer.js
+++ b/packages/react/src/views/Message/MessageAvatarContainer.js
@@ -40,12 +40,14 @@ const MessageAvatarContainer = ({
   return (
     <Box css={styles.container}>
       {!sequential ? (
+        <Tooltip text={message.u?.name } position="top">
         <Avatar
           url={getUserAvatarUrl(message.u.username)}
           alt="avatar"
           size={message.t ? '1.2em' : '2.25em'}
           onClick={handleAvatarClick}
         />
+        </Tooltip>
       ) : null}
       {isStarred && sequential ? (
         <Tooltip text="Starred" position="top">
diff --git a/packages/react/src/views/Message/MessageHeader.js b/packages/react/src/views/Message/MessageHeader.js
index 2d712556ee..97ba24d3b0 100644
--- a/packages/react/src/views/Message/MessageHeader.js
+++ b/packages/react/src/views/Message/MessageHeader.js
@@ -80,6 +80,8 @@ const MessageHeader = ({
       style={styleOverrides}
     >
       {showDisplayName && showName && (
+        // add a tooltip to the username to show @username at top
+        <Tooltip text={`@${message.u?.username || message.u?.name}`} position="top">
         <Box
           is="span"
           css={styles.name}
@@ -92,6 +94,7 @@ const MessageHeader = ({
         >
           {message.u?.name}
         </Box>
+        </Tooltip>
       )}
       {showDisplayName && showUsername && (
         <Box
@@ -143,13 +146,15 @@ const MessageHeader = ({
       )}
 
       {isTimeStamped && (
+        <Tooltip text={format(new Date(message.ts), 'MMM dd, yyyy h:mm a')} position={'top'}>
         <Box
           is="span"
           css={styles.timestamp}
           className={appendClassNames('ec-message-header-timestamp')}
-        >
+          >
           {format(new Date(message.ts), 'h:mm a')}
         </Box>
+          </Tooltip>
       )}
 
       {!message.t && (

From 0476339ee567cb2de013a992c671dabd90024e27 Mon Sep 17 00:00:00 2001
From: AyushKumar123456789 <ayushjitendra28@gmail.com>
Date: Sun, 5 Jan 2025 17:25:20 +0000
Subject: [PATCH 2/4] fix linting

---
 .../views/Message/MessageAvatarContainer.js   | 14 +++---
 .../react/src/views/Message/MessageHeader.js  | 46 +++++++++++--------
 2 files changed, 33 insertions(+), 27 deletions(-)

diff --git a/packages/react/src/views/Message/MessageAvatarContainer.js b/packages/react/src/views/Message/MessageAvatarContainer.js
index 9401537d8d..ab36503f68 100644
--- a/packages/react/src/views/Message/MessageAvatarContainer.js
+++ b/packages/react/src/views/Message/MessageAvatarContainer.js
@@ -40,13 +40,13 @@ const MessageAvatarContainer = ({
   return (
     <Box css={styles.container}>
       {!sequential ? (
-        <Tooltip text={message.u?.name } position="top">
-        <Avatar
-          url={getUserAvatarUrl(message.u.username)}
-          alt="avatar"
-          size={message.t ? '1.2em' : '2.25em'}
-          onClick={handleAvatarClick}
-        />
+        <Tooltip text={message.u?.name} position="top">
+          <Avatar
+            url={getUserAvatarUrl(message.u.username)}
+            alt="avatar"
+            size={message.t ? '1.2em' : '2.25em'}
+            onClick={handleAvatarClick}
+          />
         </Tooltip>
       ) : null}
       {isStarred && sequential ? (
diff --git a/packages/react/src/views/Message/MessageHeader.js b/packages/react/src/views/Message/MessageHeader.js
index 6f2509fea9..dbd5026617 100644
--- a/packages/react/src/views/Message/MessageHeader.js
+++ b/packages/react/src/views/Message/MessageHeader.js
@@ -93,19 +93,22 @@ const MessageHeader = ({
     >
       {showDisplayName && showName && (
         // add a tooltip to the username to show @username at top
-        <Tooltip text={`@${message.u?.username || message.u?.name}`} position="top">
-        <Box
-          is="span"
-          css={styles.name}
-          className={appendClassNames('ec-message-header-name')}
-          style={
-            displayNameVariant === 'colorize'
-              ? { color: getDisplayNameColor(message.u.username) }
-              : null
-          }
+        <Tooltip
+          text={`@${message.u?.username || message.u?.name}`}
+          position="top"
         >
-          {message.u?.name}
-        </Box>
+          <Box
+            is="span"
+            css={styles.name}
+            className={appendClassNames('ec-message-header-name')}
+            style={
+              displayNameVariant === 'colorize'
+                ? { color: getDisplayNameColor(message.u.username) }
+                : null
+            }
+          >
+            {message.u?.name}
+          </Box>
         </Tooltip>
       )}
       {showDisplayName && showUsername && (
@@ -158,15 +161,18 @@ const MessageHeader = ({
       )}
 
       {isTimeStamped && (
-        <Tooltip text={format(new Date(message.ts), 'MMM dd, yyyy h:mm a')} position={'top'}>
-        <Box
-          is="span"
-          css={styles.timestamp}
-          className={appendClassNames('ec-message-header-timestamp')}
+        <Tooltip
+          text={format(new Date(message.ts), 'MMM dd, yyyy h:mm a')}
+          position="top"
+        >
+          <Box
+            is="span"
+            css={styles.timestamp}
+            className={appendClassNames('ec-message-header-timestamp')}
           >
-          {format(new Date(message.ts), 'h:mm a')}
-        </Box>
-          </Tooltip>
+            {format(new Date(message.ts), 'h:mm a')}
+          </Box>
+        </Tooltip>
       )}
 
       {!message.t && (

From 348bba5e5ab73e991587affa84d5a65d4f036e13 Mon Sep 17 00:00:00 2001
From: AYUSHKUMAR_21JE0209
 <103947228+AyushKumar123456789@users.noreply.github.com>
Date: Tue, 28 Jan 2025 01:19:02 +0530
Subject: [PATCH 3/4] Update MessageHeader.js

---
 packages/react/src/views/Message/MessageHeader.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/react/src/views/Message/MessageHeader.js b/packages/react/src/views/Message/MessageHeader.js
index dbd5026617..1e3f3fd5b0 100644
--- a/packages/react/src/views/Message/MessageHeader.js
+++ b/packages/react/src/views/Message/MessageHeader.js
@@ -92,7 +92,6 @@ const MessageHeader = ({
       style={styleOverrides}
     >
       {showDisplayName && showName && (
-        // add a tooltip to the username to show @username at top
         <Tooltip
           text={`@${message.u?.username || message.u?.name}`}
           position="top"

From 7c7caa8935adc2cdb432724ea57839661f746fd7 Mon Sep 17 00:00:00 2001
From: AyushKumar123456789 <ayushjitendra28@gmail.com>
Date: Mon, 27 Jan 2025 19:57:30 +0000
Subject: [PATCH 4/4] fixed linting

---
 .../views/Message/MessageAvatarContainer.js   | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/packages/react/src/views/Message/MessageAvatarContainer.js b/packages/react/src/views/Message/MessageAvatarContainer.js
index 068b854cfb..8a572f127a 100644
--- a/packages/react/src/views/Message/MessageAvatarContainer.js
+++ b/packages/react/src/views/Message/MessageAvatarContainer.js
@@ -41,20 +41,20 @@ const MessageAvatarContainer = ({
     <Box css={styles.container}>
       {!sequential ? (
         <Tooltip text={message.u?.name} position="top">
-         <Avatar
-          url={getUserAvatarUrl(message.u.username)}
-          alt="avatar"
-          size={
-            window.matchMedia('(max-width: 768px)').matches
-              ? message.t
-                ? '1.2em'
-                : '1.5em'
-              : message.t
-              ? '1.5em'
-              : '2.25em'
-          }
-          onClick={handleAvatarClick}
-        />
+          <Avatar
+            url={getUserAvatarUrl(message.u.username)}
+            alt="avatar"
+            size={
+              window.matchMedia('(max-width: 768px)').matches
+                ? message.t
+                  ? '1.2em'
+                  : '1.5em'
+                : message.t
+                ? '1.5em'
+                : '2.25em'
+            }
+            onClick={handleAvatarClick}
+          />
         </Tooltip>
       ) : null}
       {isStarred && sequential ? (