From 32f93643fcca0a97ff2e8d3b3fe841e817d45ce2 Mon Sep 17 00:00:00 2001
From: Anjy Gupta <92802904+anjy7@users.noreply.github.com>
Date: Thu, 9 Nov 2023 15:31:07 +0530
Subject: [PATCH] fix: added star icon to message header  (#300)

* fix: added star icon to message header

* fix: made changes

* removed unused imports
---
 .../react/src/components/Message/Message.js   | 23 ++++++++++++++++++-
 .../src/components/Message/MessageHeader.js   |  9 ++++++++
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/components/Message/Message.js b/packages/react/src/components/Message/Message.js
index 237e33a23..9fe9f403a 100644
--- a/packages/react/src/components/Message/Message.js
+++ b/packages/react/src/components/Message/Message.js
@@ -179,13 +179,34 @@ const Message = ({
               width: '100%',
             }}
           >
-            {showAvatar && (
+            {!sequential && showAvatar ? (
               <Box style={{ margin: '3px' }}>
                 <Avatar
                   url={getUserAvatarUrl(message.u.username)}
                   alt="avatar"
                 />
               </Box>
+            ) : message.starred &&
+              message.starred.find((u) => u._id === authenticatedUserId) ? (
+              <Box
+                style={{
+                  margin: '3px',
+                  marginTop: '15px',
+                  marginLeft: '20px',
+                }}
+              >
+                <Icon
+                  style={{ opacity: 0.5 }}
+                  name="star-filled"
+                  size="1.2em"
+                />
+              </Box>
+            ) : (
+              <Box
+                style={{
+                  marginLeft: '42px',
+                }}
+              ></Box>
             )}
             <Box
               style={{
diff --git a/packages/react/src/components/Message/MessageHeader.js b/packages/react/src/components/Message/MessageHeader.js
index 906a58ae5..57427eca2 100644
--- a/packages/react/src/components/Message/MessageHeader.js
+++ b/packages/react/src/components/Message/MessageHeader.js
@@ -57,6 +57,8 @@ const MessageHeaderTimestapCss = css`
   color: #9ea2a8;
 `;
 
+const authenticatedUserId = useUserStore(state => state.userId);
+
 const MessageHeader = ({ message }) => {
   const { styleOverrides, classNames } = useComponentOverrides('MessageHeader');
   const roles = useUserStore((state) => state.roles);
@@ -126,6 +128,13 @@ const MessageHeader = ({ message }) => {
             size="1em"
           />
         )}
+        {message.starred && message.starred.find((u) => u._id === authenticatedUserId) && (
+          <Icon
+            style={{ marginInlineEnd: '0.4rem', opacity: 0.5 }}
+            name="star"
+            size="1em"
+          />
+        )}
       </Box>
     );
   }