feat: show read receipt in message header (WPB-6284) (#16851)

* feat: show read receipt in message header (WPB-6284) * have header's read indicator reflect status of the last message
wireapp · Feb 26, 2024 · 1f803f7 · 1f803f7
1 parent 7d9fe38
commit 1f803f7
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 0 deletions.
diff --git a/src/script/components/MessagesList/Message/ContentMessage/ContentMessage.test.tsx b/src/script/components/MessagesList/Message/ContentMessage/ContentMessage.test.tsx
@@ -50,6 +50,7 @@ describe('message', () => {
       isLastDeliveredMessage: false,
       hideHeader: false,
       message,
+      lastMessageInGroup: new ContentMessage(),
       onClickAvatar: jest.fn(),
       onClickButton: jest.fn(),
       onClickCancelRequest: jest.fn(),

diff --git a/src/script/components/MessagesList/Message/ContentMessage/ContentMessage.tsx b/src/script/components/MessagesList/Message/ContentMessage/ContentMessage.tsx
@@ -27,6 +27,7 @@ import {ReadIndicator} from 'Components/MessagesList/Message/ReadIndicator';
 import {Conversation} from 'src/script/entity/Conversation';
 import {CompositeMessage} from 'src/script/entity/message/CompositeMessage';
 import {ContentMessage} from 'src/script/entity/message/ContentMessage';
+import {Message} from 'src/script/entity/message/Message';
 import {useRelativeTimestamp} from 'src/script/hooks/useRelativeTimestamp';
 import {StatusType} from 'src/script/message/StatusType';
 import {useKoSubscribableChildren} from 'Util/ComponentUtil';
@@ -58,6 +59,7 @@ export interface ContentMessageProps extends Omit<MessageActions, 'onClickResetS
   isFocused: boolean;
   isLastDeliveredMessage: boolean;
   message: ContentMessage;
+  lastMessageInGroup: Message;
   onClickButton: (message: CompositeMessage, buttonId: string) => void;
   onRetry: (message: ContentMessage) => void;
   quotedMessage?: ContentMessage;
@@ -69,6 +71,7 @@ export interface ContentMessageProps extends Omit<MessageActions, 'onClickResetS
 export const ContentMessageComponent = ({
   conversation,
   message,
+  lastMessageInGroup,
   findMessage,
   selfId,
   hideHeader,
@@ -177,6 +180,12 @@ export const ContentMessageComponent = ({
               {timeAgo}
             </MessageTime>
           </span>
+          <ReadIndicator
+            message={lastMessageInGroup}
+            is1to1Conversation={conversation.is1to1()}
+            isLastDeliveredMessage={isLastDeliveredMessage || lastMessageInGroup.status() === StatusType.DELIVERED}
+            showIconOnly
+          />
         </MessageHeader>
       )}
 

diff --git a/src/script/components/MessagesList/Message/MessageWrapper.tsx b/src/script/components/MessagesList/Message/MessageWrapper.tsx
@@ -68,6 +68,7 @@ export const MessageWrapper: React.FC<MessageParams> = ({
   isFocused,
   isSelfTemporaryGuest,
   isLastDeliveredMessage,
+  lastMessageInGroup,
   shouldShowInvitePeople,
   hideHeader,
   hasReadReceiptsTurnedOn,
@@ -184,6 +185,7 @@ export const MessageWrapper: React.FC<MessageParams> = ({
     return (
       <ContentMessageComponent
         message={message}
+        lastMessageInGroup={lastMessageInGroup}
         findMessage={findMessage}
         conversation={conversation}
         hideHeader={hideHeader}

diff --git a/src/script/components/MessagesList/Message/index.tsx b/src/script/components/MessagesList/Message/index.tsx
@@ -59,6 +59,7 @@ export interface MessageParams extends MessageActions {
   conversation: Conversation;
   hasReadReceiptsTurnedOn: boolean;
   isLastDeliveredMessage: boolean;
+  lastMessageInGroup: BaseMessage;
   isSelfTemporaryGuest: boolean;
   message: BaseMessage;
   /** whether the message should display the user avatar and user name before the actual content */

diff --git a/src/script/components/MessagesList/MessageList.tsx b/src/script/components/MessagesList/MessageList.tsx
@@ -264,6 +264,8 @@ export const MessagesList: FC<MessagesListParams> = ({
           return messages.map(message => {
             const isLastDeliveredMessage = lastDeliveredMessage?.id === message.id;
 
+            const lastMessageInGroup = group.messages[messages.length - 1];
+
             const visibleCallback = getVisibleCallback(conversation, message);
 
             const key = `${message.id || 'message'}-${message.timestamp()}`;
@@ -276,6 +278,7 @@ export const MessagesList: FC<MessagesListParams> = ({
                 key={key}
                 onVisible={visibleCallback}
                 message={message}
+                lastMessageInGroup={lastMessageInGroup}
                 hideHeader={message.timestamp() !== firstMessageTimestamp}
                 messageActions={messageActions}
                 conversation={conversation}