feat: display a floating date indicator in the chat body when scrolling.

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

@@ -6,6 +6,7 @@ import React, {
   useState,
   useRef,
 } from 'react';
+import { format } from 'date-fns';
 import PropTypes from 'prop-types';
 import { css } from '@emotion/react';
 import {
@@ -206,6 +207,9 @@ const ChatBody = ({
     setPopupVisible(false);
   };
 
+  const [floatingDate, setFloatingDate] = useState(null);
+  const floatingDateTimerRef = useRef(null);
+
   const handleScroll = useCallback(async () => {
     if (messageListRef && messageListRef.current) {
       setScrollPosition(messageListRef.current.scrollTop);
@@ -214,6 +218,37 @@ const ChatBody = ({
           messageListRef.current.scrollHeight
       );
 
+      // floating date logic
+      const list = messageListRef.current;
+      const listRect = list.getBoundingClientRect();
+      const x = listRect.left + listRect.width / 2;
+      // sampling point: slightly down from the top padding to catch the first visible message
+      const y = listRect.top + 10;
+
+      const topElement = document.elementFromPoint(x, y);
+
+      // attempt to find closest message container if we hit a child element
+      const messageElement = topElement?.closest('.ec-message');
+
+      if (messageElement) {
+        const bodyElement = messageElement.querySelector('.ec-message-body');
+        if (bodyElement && bodyElement.id) {
+          const id = bodyElement.id.replace('ec-message-body-', '');
+          const msg = messages.find((m) => m._id === id);
+          if (msg) {
+            const dateStr = format(new Date(msg.ts), 'MMMM d, yyyy');
+            setFloatingDate(dateStr);
+
+            if (floatingDateTimerRef.current) {
+              clearTimeout(floatingDateTimerRef.current);
+            }
+            floatingDateTimerRef.current = setTimeout(() => {
+              setFloatingDate(null);
+            }, 1000);
+          }
+        }
+      }
+
       if (
         messageListRef.current.scrollTop === 0 &&
         !loadingOlderMessages &&
@@ -287,6 +322,7 @@ const ChatBody = ({
     setPopupVisible,
     setOtherUserMessage,
     firstUnreadMessageId,
+    messages,
   ]);
 
   const showNewMessagesPopup = () => {
@@ -393,6 +429,11 @@ const ChatBody = ({
           </Modal.Footer>
         </Modal>
       )}
+      {floatingDate && (
+        <Box css={styles.dateIndicatorStyles} className="ec-date-indicator">
+          {floatingDate}
+        </Box>
+      )}
       <Box
         ref={messageListRef}
         css={styles.chatbodyContainer}

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

@@ -32,6 +32,24 @@ export const getChatbodyStyles = (theme, mode) => {
       text-overflow: ellipsis;
       white-space: nowrap;
     `,
+
+    dateIndicatorStyles: css`
+      position: absolute;
+      top: 30px;
+      left: 50%;
+      transform: translateX(-50%);
+      z-index: 1050;
+      padding: 1px 8px;
+      border-radius: 2px;
+      font-size: 0.75rem;
+      font-weight: 600;
+      background-color: ${theme.colors.secondary};
+      color: ${theme.colors.primary};
+      box-shadow: ${theme.shadows[1]};
+      opacity: 0.9;
+      pointer-events: none;
+      transition: opacity 0.3s ease-in-out;
+    `,
   };
 
   return styles;