fix: Added avatar in thread message (RocketChat#921)

* add user avatar

* format header

* format

* add_tooltip

* add_participant

* add optional chaining

* add fallback also

* aligned

---------

Co-authored-by: Zishan Ahmad <zishan.barun@gmail.com>

Author: thepiyush-303

packages/react/src/views/ChatHeader/ChatHeader.js

@@ -102,9 +102,6 @@ const ChatHeader = ({
 
   const isThreadOpen = useMessageStore((state) => state.isThreadOpen);
   const threadMainMessage = useMessageStore((state) => state.threadMainMessage);
-  const threadTitle =
-    threadMainMessage?.msg ||
-    (threadMainMessage?.file ? threadMainMessage.file.name : '');
 
   const closeThread = useMessageStore((state) => state.closeThread);
 
@@ -432,7 +429,7 @@ const ChatHeader = ({
       </Box>
       {isThreadOpen && (
         <DynamicHeader
-          title={threadTitle}
+          title={threadMainMessage}
           handleClose={closeThread}
           iconName="arrow-back"
         />

packages/react/src/views/DynamicHeader/DynamicHeader.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { css } from '@emotion/react';
 import { Box, Icon, ActionButton, Heading } from '@embeddedchat/ui-elements';
 import useDynamicHeaderStyles from './DynamicHeader.styles';
+import { Markdown } from '../Markdown';
 
 const DynamicHeader = ({
   title,
@@ -11,6 +12,22 @@ const DynamicHeader = ({
   iconName,
   headerIconName,
 }) => {
+  const messageDescription = (msg) => {
+    if (msg.file) {
+      if (msg.attachments[0]?.description) {
+        return (
+          <Markdown
+            body={msg.attachments[0].description}
+            md={msg.attachments[0].descriptionMd}
+            isReaction={false}
+          />
+        );
+      }
+      return msg.file.name;
+    }
+    return <Markdown body={msg} md={msg.md} isReaction={false} />;
+  };
+
   const styles = useDynamicHeaderStyles();
   return (
     <Box css={styles.container}>
@@ -32,8 +49,8 @@ const DynamicHeader = ({
           <Icon name={iconName} size="1.25rem" />
         </ActionButton>
 
-        <Heading level={6} css={styles.clearSpacing}>
-          {title}
+        <Heading level={5} css={styles.clearSpacing}>
+          {messageDescription(title)}
         </Heading>
         {isHeaderIcon && <Icon name={headerIconName} size="1.25rem" />}
       </Box>

packages/react/src/views/DynamicHeader/DynamicHeader.styles.js

@@ -12,7 +12,7 @@ const useDynamicHeaderStyles = () => {
     `,
 
     clearSpacing: css`
-      margin: 0;
+      margin-bottom: 1px;
       padding: 0;
       text-overflow: ellipsis;
       white-space: nowrap;

packages/react/src/views/Message/Message.styles.js

@@ -203,7 +203,20 @@ export const MessageMetricsStyles = {
     display: flex;
     justify-content: center;
     align-items: center;
-    margin-left: ${isFirstMessage ? '0.5rem' : '0.25rem'};
+    margin-left: ${isFirstMessage ? '0.5rem' : '0.3rem'};
+    margin-top: 1.2px;
+  `,
+
+  metricsAvatarItem: css`
+    letter-spacing: 0rem;
+    font-size: 0.625rem;
+    font-weight: 700;
+    line-height: 0.75rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-left: 10px;
+    margin-top: 2px;
   `,
 
   metricsItemLabel: css`

packages/react/src/views/Message/MessageMetrics.js

@@ -1,13 +1,17 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { formatDistance } from 'date-fns';
 import {
   Box,
   Button,
   Icon,
   useComponentOverrides,
   appendClassNames,
+  Avatar,
+  Tooltip,
 } from '@embeddedchat/ui-elements';
 import { MessageMetricsStyles as styles } from './Message.styles';
+import RCContext from '../../context/RCInstance';
+
 import BubbleThreadBtn from './BubbleVariant/BubbleThreadBtn';
 
 export const MessageMetrics = ({
@@ -25,6 +29,18 @@ export const MessageMetrics = ({
     style
   );
 
+  const { RCInstance } = useContext(RCContext);
+
+  const getUserAvatarUrl = (username) => {
+    const host = RCInstance.getHost();
+    return `${host}/avatar/${username}`;
+  };
+
+  const participantsList =
+    (message?.replies?.length ?? 0) - 1 > 0
+      ? `+${message.replies.length - 1}`
+      : null;
+
   return (
     <Box
       css={variantStyles.metricsContainer || styles.metrics}
@@ -46,31 +62,50 @@ export const MessageMetrics = ({
               onClick={handleOpenThread(message)}
               css={variantStyles && variantStyles.threadReplyButton}
             >
-              Reply
+              View thread
             </Button>
-            <Box css={styles.metricsItem(true)} title="Replies">
-              <Icon size="1.25rem" name="thread" />
-              <Box css={styles.metricsItemLabel}>{message.tcount}</Box>
-            </Box>
             {!!message.tcount && (
-              <Box css={styles.metricsItem} title="Participants">
-                <Icon size="1.25rem" name="user" />
-                <Box css={styles.metricsItemLabel}>
-                  {message.replies.length}
-                </Box>
-              </Box>
+              <>
+                <Tooltip text="Followers" position="top">
+                  <Box css={styles.metricsAvatarItem}>
+                    <Avatar
+                      url={getUserAvatarUrl(message?.u.username)}
+                      alt="avatar"
+                      size="1rem"
+                    />
+                    {participantsList && (
+                      <span css={styles.metricsItemLabel}>
+                        {participantsList}
+                      </span>
+                    )}
+                  </Box>
+                </Tooltip>
+              </>
             )}
-            <Box
-              css={styles.metricsItem}
-              title={new Date(message.tlm).toLocaleString()}
+
+            <Tooltip
+              text={`Last message: ${new Date(message.tlm).toLocaleTimeString(
+                [],
+                {
+                  hour: '2-digit',
+                  minute: '2-digit',
+                  hour12: false,
+                }
+              )}`}
+              position="top"
             >
-              <Icon size="1.25rem" name="clock" />
-              <Box css={styles.metricsItemLabel}>
-                {formatDistance(new Date(message.tlm), new Date(), {
-                  addSuffix: true,
-                })}
+              <Box css={styles.metricsItem(true)}>
+                <Icon size="1.15rem" name="thread" />
+                <Box css={styles.metricsItemLabel}>
+                  {message.tcount} replies,{' '}
+                  {new Date(message.tlm).toLocaleTimeString([], {
+                    hour: '2-digit',
+                    minute: '2-digit',
+                    hour12: false,
+                  })}
+                </Box>
               </Box>
-            </Box>
+            </Tooltip>
           </>
         ))}
     </Box>