Feat: Display 'Unread Message' Divider Functionality Similar to RC

packages/react/src/views/ChatBody/ChatBody.js

@@ -48,6 +48,7 @@ const ChatBody = ({
   const [, setIsUserScrolledUp] = useState(false);
   const [otherUserMessage, setOtherUserMessage] = useState(false);
   const [isOverflowing, setIsOverflowing] = useState(false);
+  const firstUnreadMessageIdRef = useRef('');
   const { RCInstance, ECOptions } = useContext(RCContext);
   const showAnnouncement = ECOptions?.showAnnouncement;
   const messages = useMessageStore((state) => state.messages);
@@ -117,7 +118,13 @@ const ChatBody = ({
         const isScrolledUp = messageListRef?.current?.scrollTop !== 0;
         if (isScrolledUp && !('pinned' in message) && !('starred' in message)) {
           setOtherUserMessage(true);
+
+          if (firstUnreadMessageIdRef.current === '') {
+            firstUnreadMessageIdRef.current = message._id;
+          }
         }
+      } else {
+        firstUnreadMessageIdRef.current = '';
       }
       upsertMessage(message, ECOptions?.enableThreads);
     },
@@ -180,6 +187,7 @@ const ChatBody = ({
       setPopupVisible(false);
       setIsUserScrolledUp(false);
       setOtherUserMessage(false);
+      firstUnreadMessageIdRef.current = '';
     }
   }, [
     messageListRef,
@@ -292,7 +300,10 @@ const ChatBody = ({
             threadMessages={threadMessages}
           />
         ) : (
-          <MessageList messages={messages} />
+          <MessageList
+            messages={messages}
+            firstUnreadMessageId={firstUnreadMessageIdRef.current}
+          />
         )}
 
         <TotpModal handleLogin={handleLogin} />

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

@@ -28,6 +28,7 @@ import useFetchChatData from '../../hooks/useFetchChatData';
 
 const Message = ({
   message,
+  firstUnreadMessageId,
   type = 'default',
   sequential = false,
   lastSequential = false,
@@ -338,6 +339,9 @@ const Message = ({
           {format(new Date(message.ts), 'MMMM d, yyyy')}
         </MessageDivider>
       )}
+      {message._id === firstUnreadMessageId ? (
+        <MessageDivider unreadLabel="unread messages" />
+      ) : null}
     </>
   );
 };

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

@@ -66,7 +66,7 @@ export const MessageBodyStyles = {
   `,
 };
 
-export const getMessageDividerStyles = (theme) => {
+export const getMessageDividerStyles = (theme, mode) => {
   const styles = {
     divider: css`
       letter-spacing: 0rem;
@@ -107,6 +107,42 @@ export const getMessageDividerStyles = (theme) => {
       height: 1px;
       background-color: ${theme.colors.secondary};
     `,
+
+    unreadDivider: css`
+      letter-spacing: 0rem;
+      font-size: 0.75rem;
+      font-weight: 700;
+      line-height: 1rem;
+      position: relative;
+      display: flex;
+      z-index: 1000;
+      align-items: center;
+      padding-left: 1.25rem;
+      padding-right: 1.25rem;
+      @media (max-width: 780px) {
+        z-index: 1;
+      }
+    `,
+
+    unreadDividerContent: css`
+      color: ${mode === 'light'
+        ? theme.colors.destructive
+        : theme.colors.warningForeground};
+      font-size: 0.875rem;
+      font-weight: 750;
+      margin-left: 10px;
+    `,
+
+    unreadBar: css`
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      flex-grow: 1;
+      height: 0.7px;
+      background-color: ${mode === 'light'
+        ? theme.colors.destructive
+        : theme.colors.warningForeground};
+    `,
   };
 
   return styles;

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

@@ -21,26 +21,50 @@ export const MessageDivider = ({
     style
   );
   const { theme } = useTheme();
-  const styles = getMessageDividerStyles(theme);
+  const { mode } = useTheme();
+  const styles = getMessageDividerStyles(theme, mode);
+
+  const isUnread = unreadLabel !== undefined;
+
   return (
-    <Box
-      role="separator"
-      css={styles.divider}
-      className={appendClassNames('ec-message-divider', classNames)}
-      style={styleOverrides}
-      {...props}
-    >
-      {children && (
-        <>
-          <Box css={styles.bar} className="ec-message-divider-bar" />
+    <>
+      {isUnread ? (
+        <Box
+          role="separator"
+          css={styles.unreadDivider}
+          className={appendClassNames('ec-message-divider', classNames)}
+          style={styleOverrides}
+          {...props}
+        >
+          <Box css={styles.unreadBar} className="ec-message-divider-bar" />
           <Box
-            css={styles.dividerContent}
+            css={styles.unreadDividerContent}
             className="ec-message-divider-content"
           >
-            {children}
-          </Box>{' '}
-        </>
+            {unreadLabel}
+          </Box>
+        </Box>
+      ) : (
+        <Box
+          role="separator"
+          css={styles.divider}
+          className={appendClassNames('ec-message-divider', classNames)}
+          style={styleOverrides}
+          {...props}
+        >
+          {children && (
+            <>
+              <Box css={styles.bar} className="ec-message-divider-bar" />
+              <Box
+                css={styles.dividerContent}
+                className="ec-message-divider-content"
+              >
+                {children}
+              </Box>
+            </>
+          )}
+        </Box>
       )}
-    </Box>
+    </>
   );
 };

packages/react/src/views/MessageList/MessageList.js

@@ -9,7 +9,7 @@ import isMessageSequential from '../../lib/isMessageSequential';
 import { Message } from '../Message';
 import isMessageLastSequential from '../../lib/isMessageLastSequential';
 
-const MessageList = ({ messages }) => {
+const MessageList = ({ messages, firstUnreadMessageId }) => {
   const showReportMessage = useMessageStore((state) => state.showReportMessage);
   const messageToReport = useMessageStore((state) => state.messageToReport);
   const isMessageLoaded = useMessageStore((state) => state.isMessageLoaded);
@@ -48,6 +48,7 @@ const MessageList = ({ messages }) => {
             return (
               <Message
                 key={msg._id}
+                firstUnreadMessageId={firstUnreadMessageId}
                 message={msg}
                 newDay={newDay}
                 sequential={sequential}