From 36cbd27823f99d7ef4dbd5b0211d0aef996b5ca0 Mon Sep 17 00:00:00 2001 From: dhairyashil Date: Wed, 1 Jan 2025 21:04:38 +0530 Subject: [PATCH 1/3] Implement unread message divider functionality --- packages/react/src/views/ChatBody/ChatBody.js | 13 ++++- packages/react/src/views/Message/Message.js | 4 ++ .../react/src/views/Message/Message.styles.js | 32 +++++++++++ .../react/src/views/Message/MessageDivider.js | 53 +++++++++++++------ .../src/views/MessageList/MessageList.js | 3 +- 5 files changed, 88 insertions(+), 17 deletions(-) diff --git a/packages/react/src/views/ChatBody/ChatBody.js b/packages/react/src/views/ChatBody/ChatBody.js index 721c2d2dc1..5ba5ca82b1 100644 --- a/packages/react/src/views/ChatBody/ChatBody.js +++ b/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} /> ) : ( - + )} diff --git a/packages/react/src/views/Message/Message.js b/packages/react/src/views/Message/Message.js index 2a56b20b76..385222d9e5 100644 --- a/packages/react/src/views/Message/Message.js +++ b/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')} )} + {message._id === firstUnreadMessageId ? ( + + ) : null} ); }; diff --git a/packages/react/src/views/Message/Message.styles.js b/packages/react/src/views/Message/Message.styles.js index 9f9358fd92..09ce37b8cf 100644 --- a/packages/react/src/views/Message/Message.styles.js +++ b/packages/react/src/views/Message/Message.styles.js @@ -107,6 +107,38 @@ 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: #d40c26; + 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: red; + `, }; return styles; diff --git a/packages/react/src/views/Message/MessageDivider.js b/packages/react/src/views/Message/MessageDivider.js index 617b7615cf..113b516e37 100644 --- a/packages/react/src/views/Message/MessageDivider.js +++ b/packages/react/src/views/Message/MessageDivider.js @@ -22,25 +22,48 @@ export const MessageDivider = ({ ); const { theme } = useTheme(); const styles = getMessageDividerStyles(theme); + + const isUnread = unreadLabel !== undefined; + return ( - - {children && ( - <> - + <> + {isUnread ? ( + + - {children} - {' '} - + {unreadLabel} + + + ) : ( + + {children && ( + <> + + + {children} + + + )} + )} - + ); }; diff --git a/packages/react/src/views/MessageList/MessageList.js b/packages/react/src/views/MessageList/MessageList.js index 14521affd0..2b4823c069 100644 --- a/packages/react/src/views/MessageList/MessageList.js +++ b/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 ( Date: Thu, 2 Jan 2025 21:15:11 +0530 Subject: [PATCH 2/3] Added theme based color for message divider --- packages/react/src/views/Message/Message.styles.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react/src/views/Message/Message.styles.js b/packages/react/src/views/Message/Message.styles.js index 09ce37b8cf..b16c9d0fb8 100644 --- a/packages/react/src/views/Message/Message.styles.js +++ b/packages/react/src/views/Message/Message.styles.js @@ -125,7 +125,7 @@ export const getMessageDividerStyles = (theme) => { `, unreadDividerContent: css` - color: #d40c26; + color: ${theme.colors.foreground}; font-size: 0.875rem; font-weight: 750; margin-left: 10px; @@ -137,7 +137,7 @@ export const getMessageDividerStyles = (theme) => { align-items: center; flex-grow: 1; height: 0.7px; - background-color: red; + background-color: ${theme.colors.foreground}; `, }; From 104ce26c7218395833afc4f3553a5ff63acb5455 Mon Sep 17 00:00:00 2001 From: dhairyashil Date: Sun, 5 Jan 2025 17:36:08 +0530 Subject: [PATCH 3/3] light theme destructive color, dark theme warningForeground color --- packages/react/src/views/Message/Message.styles.js | 10 +++++++--- packages/react/src/views/Message/MessageDivider.js | 3 ++- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/packages/react/src/views/Message/Message.styles.js b/packages/react/src/views/Message/Message.styles.js index b16c9d0fb8..c18040bf46 100644 --- a/packages/react/src/views/Message/Message.styles.js +++ b/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; @@ -125,7 +125,9 @@ export const getMessageDividerStyles = (theme) => { `, unreadDividerContent: css` - color: ${theme.colors.foreground}; + color: ${mode === 'light' + ? theme.colors.destructive + : theme.colors.warningForeground}; font-size: 0.875rem; font-weight: 750; margin-left: 10px; @@ -137,7 +139,9 @@ export const getMessageDividerStyles = (theme) => { align-items: center; flex-grow: 1; height: 0.7px; - background-color: ${theme.colors.foreground}; + background-color: ${mode === 'light' + ? theme.colors.destructive + : theme.colors.warningForeground}; `, }; diff --git a/packages/react/src/views/Message/MessageDivider.js b/packages/react/src/views/Message/MessageDivider.js index 113b516e37..88efe7acc0 100644 --- a/packages/react/src/views/Message/MessageDivider.js +++ b/packages/react/src/views/Message/MessageDivider.js @@ -21,7 +21,8 @@ export const MessageDivider = ({ style ); const { theme } = useTheme(); - const styles = getMessageDividerStyles(theme); + const { mode } = useTheme(); + const styles = getMessageDividerStyles(theme, mode); const isUnread = unreadLabel !== undefined;