feat: add unread messages divider with theme-aware styling (#1047)

Author: srijnabhargav

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

@@ -40,6 +40,7 @@ const ChatBody = ({
   showRoles,
   messageListRef,
   scrollToBottom,
+  clearUnreadDividerRef,
 }) => {
   const { classNames, styleOverrides } = useComponentOverrides('ChatBody');
   const { theme, mode } = useTheme();
@@ -49,6 +50,8 @@ const ChatBody = ({
   const [, setIsUserScrolledUp] = useState(false);
   const [otherUserMessage, setOtherUserMessage] = useState(false);
   const [isOverflowing, setIsOverflowing] = useState(false);
+  const [firstUnreadMessageId, setFirstUnreadMessageId] = useState(null);
+  const pendingFirstUnreadRef = useRef(null);
   const { RCInstance, ECOptions } = useContext(RCContext);
   const showAnnouncement = ECOptions?.showAnnouncement;
   const messages = useMessageStore((state) => state.messages);
@@ -124,6 +127,10 @@ const ChatBody = ({
         const isScrolledUp = messageListRef?.current?.scrollTop !== 0;
         if (isScrolledUp && !('pinned' in message) && !('starred' in message)) {
           setOtherUserMessage(true);
+          // Track the first unread message (only set if not already tracking)
+          if (!pendingFirstUnreadRef.current) {
+            pendingFirstUnreadRef.current = message._id;
+          }
         }
       }
       upsertMessage(message, ECOptions?.enableThreads);
@@ -177,7 +184,22 @@ const ChatBody = ({
     });
   }, []);
 
+  // Expose clearUnreadDivider function via ref for ChatInput to call
+  useEffect(() => {
+    if (clearUnreadDividerRef) {
+      clearUnreadDividerRef.current = () => {
+        setFirstUnreadMessageId(null);
+        pendingFirstUnreadRef.current = null;
+      };
+    }
+  }, [clearUnreadDividerRef]);
+
   const handlePopupClick = () => {
+    // Set the unread divider to show above the first unread message
+    if (pendingFirstUnreadRef.current) {
+      setFirstUnreadMessageId(pendingFirstUnreadRef.current);
+      pendingFirstUnreadRef.current = null;
+    }
     scrollToBottom();
     setIsUserScrolledUp(false);
     setOtherUserMessage(false);
@@ -242,6 +264,12 @@ const ChatBody = ({
       setPopupVisible(false);
       setIsUserScrolledUp(false);
       setOtherUserMessage(false);
+      // Clear unread divider when scrolled to bottom
+      if (firstUnreadMessageId) {
+        setFirstUnreadMessageId(null);
+      }
+      // Also clear pending unread ref
+      pendingFirstUnreadRef.current = null;
     }
   }, [
     messageListRef,
@@ -258,6 +286,7 @@ const ChatBody = ({
     setIsUserScrolledUp,
     setPopupVisible,
     setOtherUserMessage,
+    firstUnreadMessageId,
   ]);
 
   const showNewMessagesPopup = () => {
@@ -392,6 +421,7 @@ const ChatBody = ({
             loadingOlderMessages={loadingOlderMessages}
             isUserAuthenticated={isUserAuthenticated}
             hasMoreMessages={hasMoreMessages}
+            firstUnreadMessageId={firstUnreadMessageId}
           />
         )}
 

packages/react/src/views/ChatInput/ChatInput.js

@@ -35,7 +35,7 @@ import useSearchMentionUser from '../../hooks/useSearchMentionUser';
 import formatSelection from '../../lib/formatSelection';
 import { parseEmoji } from '../../lib/emoji';
 
-const ChatInput = ({ scrollToBottom }) => {
+const ChatInput = ({ scrollToBottom, clearUnreadDividerRef }) => {
   const { styleOverrides, classNames } = useComponentOverrides('ChatInput');
   const { RCInstance, ECOptions } = useRCContext();
   const { theme } = useTheme();
@@ -398,6 +398,10 @@ const ChatInput = ({ scrollToBottom }) => {
 
     handleSendNewMessage(message);
     scrollToBottom();
+    // Clear unread divider when user sends a message
+    if (clearUnreadDividerRef?.current) {
+      clearUnreadDividerRef.current();
+    }
   };
 
   const sendAttachment = (event) => {

packages/react/src/views/ChatLayout/ChatLayout.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useCallback, useState } from 'react';
+import React, { useEffect, useRef, useCallback } from 'react';
 import { Box, useComponentOverrides } from '@embeddedchat/ui-elements';
 import styles from './ChatLayout.styles';
 import {
@@ -35,6 +35,7 @@ import useUiKitStore from '../../store/uiKitStore';
 
 const ChatLayout = () => {
   const messageListRef = useRef(null);
+  const clearUnreadDividerRef = useRef(null);
   const { classNames, styleOverrides } = useComponentOverrides('ChatBody');
   const { RCInstance, ECOptions } = useRCContext();
   const anonymousMode = ECOptions?.anonymousMode;
@@ -113,8 +114,12 @@ const ChatLayout = () => {
           showRoles={showRoles}
           messageListRef={messageListRef}
           scrollToBottom={scrollToBottom}
+          clearUnreadDividerRef={clearUnreadDividerRef}
+        />
+        <ChatInput
+          scrollToBottom={scrollToBottom}
+          clearUnreadDividerRef={clearUnreadDividerRef}
         />
-        <ChatInput scrollToBottom={scrollToBottom} />
         <div id="emoji-popup" />
       </Box>
 

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

@@ -108,6 +108,58 @@ export const getMessageDividerStyles = (theme) => {
   return styles;
 };
 
+export const getUnreadMessageDividerStyles = (theme, mode) => {
+  // Use destructive (red) for light themes, warningForeground (orange) for dark themes
+  const dividerColor =
+    mode === 'light'
+      ? theme.colors.destructive
+      : theme.colors.warningForeground;
+
+  const styles = {
+    divider: css`
+      letter-spacing: 0rem;
+      font-size: 0.75rem;
+      font-weight: 700;
+      line-height: 1rem;
+      position: relative;
+      display: flex;
+      z-index: 1000;
+      align-items: center;
+      margin-top: 0.5rem;
+      margin-bottom: 0.75rem;
+      padding-left: 1.25rem;
+      padding-right: 1.25rem;
+      @media (max-width: 780px) {
+        z-index: 1;
+      }
+    `,
+
+    dividerContent: css`
+      margin-top: 0.5rem;
+      margin-bottom: 0.5rem;
+      padding-left: 0.5rem;
+      padding-right: 0.5rem;
+      background-color: ${theme.colors.background};
+      color: ${dividerColor};
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      border-radius: ${theme.radius};
+    `,
+
+    bar: css`
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      flex-grow: 1;
+      height: 1px;
+      background-color: ${dividerColor};
+    `,
+  };
+
+  return styles;
+};
+
 export const getMessageHeaderStyles = (theme) => {
   const styles = {
     header: css`

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

@@ -6,11 +6,15 @@ import {
   useTheme,
 } from '@embeddedchat/ui-elements';
 
-import { getMessageDividerStyles } from './Message.styles';
+import {
+  getMessageDividerStyles,
+  getUnreadMessageDividerStyles,
+} from './Message.styles';
 
 export const MessageDivider = ({
   children,
   unreadLabel,
+  unread = false,
   className = '',
   style = {},
   ...props
@@ -20,8 +24,10 @@ export const MessageDivider = ({
     className,
     style
   );
-  const { theme } = useTheme();
-  const styles = getMessageDividerStyles(theme);
+  const { theme, mode } = useTheme();
+  const styles = unread
+    ? getUnreadMessageDividerStyles(theme, mode)
+    : getMessageDividerStyles(theme);
   return (
     <Box
       role="separator"

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

@@ -9,12 +9,14 @@ import isMessageSequential from '../../lib/isMessageSequential';
 import { Message } from '../Message';
 import isMessageLastSequential from '../../lib/isMessageLastSequential';
 import { MessageBody } from '../Message/MessageBody';
+import { MessageDivider } from '../Message/MessageDivider';
 
 const MessageList = ({
   messages,
   loadingOlderMessages,
   isUserAuthenticated,
   hasMoreMessages,
+  firstUnreadMessageId,
 }) => {
   const showReportMessage = useMessageStore((state) => state.showReportMessage);
   const messageToReport = useMessageStore((state) => state.messageToReport);
@@ -86,17 +88,23 @@ const MessageList = ({
               const sequential = isMessageSequential(msg, prev, 300);
               const lastSequential =
                 sequential && isMessageLastSequential(msg, next);
+              const showUnreadDivider =
+                firstUnreadMessageId && msg._id === firstUnreadMessageId;
 
               return (
-                <Message
-                  key={msg._id}
-                  message={msg}
-                  newDay={newDay}
-                  sequential={sequential}
-                  lastSequential={lastSequential}
-                  type="default"
-                  showAvatar
-                />
+                <React.Fragment key={msg._id}>
+                  {showUnreadDivider && (
+                    <MessageDivider unread>Unread Messages</MessageDivider>
+                  )}
+                  <Message
+                    message={msg}
+                    newDay={newDay}
+                    sequential={sequential}
+                    lastSequential={lastSequential}
+                    type="default"
+                    showAvatar
+                  />
+                </React.Fragment>
               );
             })}
           {showReportMessage && (