feat: reactions on Messages(sqservices -1734)

package.json

@@ -18,6 +18,7 @@
     "countly-sdk-web": "23.6.0",
     "date-fns": "2.30.0",
     "dexie-batch": "0.4.3",
+    "emoji-picker-react": "^4.4.7",
     "highlight.js": "11.8.0",
     "http-status-codes": "2.2.0",
     "jimp": "0.22.10",
@@ -80,7 +81,7 @@
     "@types/node": "^20.5.0",
     "@types/open-graph": "0.2.2",
     "@types/platform": "1.3.4",
-    "@types/react": "18.2.18",
+    "@types/react": "18.2.20",
     "@types/react-dom": "18.2.7",
     "@types/react-redux": "7.1.25",
     "@types/react-transition-group": "4.4.6",

src/i18n/en-US.json

@@ -76,7 +76,7 @@
   "accessibility.conversation.goBack": "Go back to conversation info",
   "accessibility.conversation.sectionLabel": "Conversation List",
   "accessibility.conversationAssetImageAlt": "Image from {{username}} from {{messageDate}}",
-  "accessibility.conversationContextMenuOpenLabel": "Open messaging options",
+  "accessibility.conversationContextMenuOpenLabel": "Open more options",
   "accessibility.conversationDetailsActionDevicesLabel": "Show Devices",
   "accessibility.conversationDetailsActionGroupAdminLabel": "Set group admin",
   "accessibility.conversationDetailsActionNotificationsLabel": "Show notifications settings",
@@ -305,6 +305,11 @@
   "conversationContextMenuLike": "Like",
   "conversationContextMenuReply": "Reply",
   "conversationContextMenuUnlike": "Unlike",
+  "accessibility.messageActionsMenuThumbsUp": "React with thumbs up",
+  "accessibility.messageActionsMenuLike": "React with heart",
+  "accessibility.messageActionsMenuEmoji": "Select emoji",
+  "accessibility.messageActionsMenuLabel": "Message actions",
+  "accessibility.emojiPickerSearchPlaceholder": "Search for emoji",
   "conversationCreateReceiptsEnabled": "Read receipts are on",
   "conversationCreateTeam": "with [showmore]all team members[/showmore]",
   "conversationCreateTeamGuest": "with [showmore]all team members and one guest[/showmore]",
@@ -389,6 +394,7 @@
   "conversationLabelGroups": "Groups",
   "conversationLabelPeople": "People",
   "conversationLikesCaption": "{{number}} people",
+  "conversationLikesCaptionReacted": "reacted with {{emojiName}}",
   "conversationLocationLink": "Open Map",
   "conversationMemberJoined": "[bold]{{name}}[/bold] added {{users}} to the conversation",
   "conversationMemberJoinedMore": "[bold]{{name}}[/bold] added {{users}}, and [showmore]{{count}} more[/showmore] to the conversation",
@@ -695,12 +701,13 @@
   "messageCouldNotBeSentConnectivityIssues": "Message could not be sent due to connectivity issues.",
   "messageCouldNotBeSentRetry": "Retry",
   "messageDetailsEdited": "Edited: {{edited}}",
-  "messageDetailsNoLikes": "No one has liked this message yet.",
+  "messageDetailsNoReactions": "No one has reacted to this message yet.",
   "messageDetailsNoReceipts": "No one has read this message yet.",
   "messageDetailsReceiptsOff": "Read receipts were not on when this message was sent.",
   "messageDetailsSent": "Sent: {{sent}}",
   "messageDetailsTitle": "Details",
-  "messageDetailsTitleLikes": "Liked{{count}}",
+  "messageDetailsTitleReactions": "Reactions{{count}}",
+  "messageReactionDetails": "{{emojiCount}} reaction, react with {{emojiName}} emoji",
   "messageDetailsTitleReceipts": "Read{{count}}",
   "messageFailedToSendHideDetails": "Hide details",
   "messageFailedToSendParticipants": "{{count}} participants",

src/script/components/Conversation/Conversation.tsx

@@ -253,12 +253,16 @@ export const Conversation: FC<ConversationProps> = ({
     }
   };
 
-  const showMessageDetails = (message: Message, showLikes = false) => {
+  const showMessageDetails = (message: Message, showReactions = false) => {
     if (!is1to1) {
-      openRightSidebar(PanelState.MESSAGE_DETAILS, {entity: message, showLikes}, true);
+      openRightSidebar(PanelState.MESSAGE_DETAILS, {entity: message, showReactions}, true);
     }
   };
 
+  const showMessageReactions = (message: Message, showReactions = true) => {
+    openRightSidebar(PanelState.MESSAGE_DETAILS, {entity: message, showReactions});
+  };
+
   const handleEmailClick = (event: Event, messageDetails: MessageDetails) => {
     safeMailOpen(messageDetails.href!);
     event.preventDefault();
@@ -343,6 +347,7 @@ export const Conversation: FC<ConversationProps> = ({
       conversationRepository: repositories.conversation,
       currentMessageEntity: messageEntity,
       messageRepository: repositories.message,
+      selfUser,
     });
   };
 
@@ -503,6 +508,7 @@ export const Conversation: FC<ConversationProps> = ({
             cancelConnectionRequest={clickOnCancelRequest}
             showUserDetails={showUserDetails}
             showMessageDetails={showMessageDetails}
+            showMessageReactions={showMessageReactions}
             showParticipants={showParticipants}
             showImageDetails={showDetail}
             resetSession={onSessionResetClick}

src/script/components/MessagesList/Message/ContentMessage/ContentMessage.test.tsx

@@ -54,12 +54,12 @@ describe('message', () => {
       onClickCancelRequest: jest.fn(),
       onClickImage: jest.fn(),
       onClickInvitePeople: jest.fn(),
-      onClickLikes: jest.fn(),
       onClickMessage: jest.fn(),
       onClickParticipants: jest.fn(),
-      onClickReceipts: jest.fn(),
+      onClickReaction: jest.fn(),
+      onClickReactionDetails: jest.fn(),
+      onClickDetails: jest.fn(),
       onClickTimestamp: jest.fn(),
-      onLike: jest.fn(),
       onRetry: jest.fn(),
       previousMessage: undefined,
       selfId: {domain: '', id: createUuid()},

src/script/components/MessagesList/Message/ContentMessage/ContentMessage.tsx

@@ -17,31 +17,31 @@
  *
  */
 
-import React, {useMemo} from 'react';
+import React, {useMemo, useState, useEffect} from 'react';
 
 import {QualifiedId} from '@wireapp/api-client/lib/user';
 
 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';
 import {getMessageAriaLabel} from 'Util/conversationMessages';
-import {KEY} from 'Util/KeyboardUtil';
-import {t} from 'Util/LocalizerUtil';
-import {setContextMenuPosition} from 'Util/util';
+import {groupByReactionUsers} from 'Util/ReactionUtil';
 
 import {ContentAsset} from './asset';
-import {MessageFooterLike} from './MessageFooterLike';
+import {MessageActionsMenu} from './MessageActions/MessageActions';
+import {useMessageActionsState} from './MessageActions/MessageActions.state';
+import {MessageReactionsList} from './MessageActions/MessageReactions/MessageReactionsList';
 import {MessageHeader} from './MessageHeader';
-import {MessageLike} from './MessageLike';
 import {Quote} from './MessageQuote';
 import {CompleteFailureToSendWarning, PartialFailureToSendWarning} from './Warnings';
 
 import {MessageActions} from '..';
 import {EphemeralStatusType} from '../../../../message/EphemeralStatusType';
-import {ContextMenuEntry, showContextMenu} from '../../../../ui/ContextMenu';
+import {ContextMenuEntry} from '../../../../ui/ContextMenu';
 import {EphemeralTimer} from '../EphemeralTimer';
 import {MessageTime} from '../MessageTime';
 import {ReadReceiptStatus} from '../ReadReceiptStatus';
@@ -62,44 +62,44 @@ export interface ContentMessageProps extends Omit<MessageActions, 'onClickResetS
   quotedMessage?: ContentMessage;
   selfId: QualifiedId;
   isMsgElementsFocusable: boolean;
+  onClickReaction: (emoji: string) => void;
 }
 
 const ContentMessageComponent: React.FC<ContentMessageProps> = ({
   conversation,
   message,
   findMessage,
   selfId,
-  hasMarker,
+  hasMarker = false,
   isMessageFocused,
   isLastDeliveredMessage,
   contextMenu,
   previousMessage,
-  onClickReceipts,
   onClickAvatar,
   onClickImage,
   onClickTimestamp,
   onClickMessage,
-  onClickLikes,
+  onClickReactionDetails,
   onClickButton,
-  onLike,
   onRetry,
   isMsgElementsFocusable,
+  onClickReaction,
 }) => {
+  // check if current message is focused and its elements focusable
   const msgFocusState = useMemo(
     () => isMsgElementsFocusable && isMessageFocused,
     [isMsgElementsFocusable, isMessageFocused],
   );
   const messageFocusedTabIndex = useMessageFocusedTabIndex(msgFocusState);
-  const {entries: menuEntries} = useKoSubscribableChildren(contextMenu, ['entries']);
   const {
     senderName,
     timestamp,
     ephemeral_caption,
     ephemeral_status,
     assets,
-    other_likes,
     was_edited,
     failedToSend,
+    reactions,
     status,
     user,
   } = useKoSubscribableChildren(message, [
@@ -111,6 +111,7 @@ const ContentMessageComponent: React.FC<ContentMessageProps> = ({
     'other_likes',
     'was_edited',
     'failedToSend',
+    'reactions',
     'status',
     'user',
   ]);
@@ -126,27 +127,53 @@ const ContentMessageComponent: React.FC<ContentMessageProps> = ({
 
     return !previousMessage.isContent() || previousMessage.user().id !== user.id;
   };
-
-  const handleContextKeyDown = (event: React.KeyboardEvent) => {
-    if ([KEY.SPACE, KEY.ENTER].includes(event.key)) {
-      const newEvent = setContextMenuPosition(event);
-      showContextMenu(newEvent, menuEntries, 'message-options-menu');
-    }
-  };
-
+  const timeAgo = useRelativeTimestamp(message.timestamp());
   const [messageAriaLabel] = getMessageAriaLabel({
     assets,
     displayTimestampShort: message.displayTimestampShort(),
     senderName,
   });
 
+  const [isActionMenuVisible, setActionMenuVisibility] = useState(true);
+  const isMenuOpen = useMessageActionsState(state => state.isMenuOpen);
+  useEffect(() => {
+    if (isMessageFocused || msgFocusState) {
+      setActionMenuVisibility(true);
+    } else {
+      setActionMenuVisibility(false);
+    }
+  }, [msgFocusState, isMessageFocused]);
+
+  const reactionGroupedByUser = groupByReactionUsers(reactions);
+  const reactionsTotalCount = Array.from(reactionGroupedByUser).length;
+
   return (
-    <div aria-label={messageAriaLabel}>
+    <div
+      aria-label={messageAriaLabel}
+      className="content-message-wrapper"
+      onMouseEnter={event => {
+        // open another floating action menu if none already open
+        if (!isMenuOpen) {
+          setActionMenuVisibility(true);
+        }
+      }}
+      onMouseLeave={event => {
+        // close floating message actions when no active menu is open like context menu/emoji picker
+        if (!isMenuOpen) {
+          setActionMenuVisibility(false);
+        }
+      }}
+    >
       {shouldShowAvatar() && (
         <MessageHeader onClickAvatar={onClickAvatar} message={message} focusTabIndex={messageFocusedTabIndex}>
           {was_edited && (
             <span className="message-header-label-icon icon-edit" title={message.displayEditedTimestamp()}></span>
           )}
+          <span className="content-message-timestamp">
+            <MessageTime timestamp={timestamp} className="label-xs" data-timestamp-type="normal">
+              {timeAgo}
+            </MessageTime>
+          </span>
         </MessageHeader>
       )}
       {message.quote() && (
@@ -168,7 +195,6 @@ const ContentMessageComponent: React.FC<ContentMessageProps> = ({
             <EphemeralTimer message={message} />
           </div>
         )}
-
         {assets.map(asset => (
           <ContentAsset
             key={asset.type}
@@ -181,7 +207,6 @@ const ContentMessageComponent: React.FC<ContentMessageProps> = ({
             isMessageFocused={msgFocusState}
           />
         ))}
-
         {failedToSend && (
           <PartialFailureToSendWarning
             isMessageFocused={msgFocusState}
@@ -197,68 +222,37 @@ const ContentMessageComponent: React.FC<ContentMessageProps> = ({
             onRetry={() => onRetry(message)}
           />
         )}
-
-        {!other_likes.length && message.isReactable() && (
-          <div className="message-body-like">
-            <MessageLike
-              className="message-body-like-icon like-button message-show-on-hover"
-              message={message}
-              onLike={onLike}
-              isMessageFocused={msgFocusState}
-            />
-          </div>
-        )}
-
         <div className="message-body-actions">
-          {menuEntries.length > 0 && (
-            <button
-              tabIndex={messageFocusedTabIndex}
-              className="context-menu icon-more font-size-xs"
-              aria-label={t('accessibility.conversationContextMenuOpenLabel')}
-              onKeyDown={handleContextKeyDown}
-              onClick={event => showContextMenu(event, menuEntries, 'message-options-menu')}
-            ></button>
-          )}
-
-          {ephemeral_status === EphemeralStatusType.ACTIVE && (
-            <time
-              className="time"
-              data-uie-uid={message.id}
-              title={ephemeral_caption}
-              data-timestamp={timestamp}
-              data-bind="showAllTimestamps"
-            >
-              {message.displayTimestampShort()}
-            </time>
-          )}
-
-          {ephemeral_status !== EphemeralStatusType.ACTIVE && (
-            <MessageTime data-uie-uid={message.id} timestamp={timestamp}>
-              {message.displayTimestampShort()}
-            </MessageTime>
-          )}
-
           <ReadReceiptStatus
             message={message}
             is1to1Conversation={conversation.is1to1()}
             isLastDeliveredMessage={isLastDeliveredMessage}
-            onClickReceipts={onClickReceipts}
-            isMessageFocused={msgFocusState}
           />
         </div>
-      </div>
-
-      {other_likes.length > 0 && (
-        <div>
-          <MessageFooterLike
+        {isActionMenuVisible && (
+          <MessageActionsMenu
+            isMsgWithHeader={shouldShowAvatar()}
             message={message}
-            is1to1Conversation={conversation.is1to1()}
-            onLike={onLike}
-            onClickLikes={onClickLikes}
+            handleActionMenuVisibility={setActionMenuVisibility}
+            contextMenu={contextMenu}
             isMessageFocused={msgFocusState}
+            messageWithSection={hasMarker}
+            handleReactionClick={onClickReaction}
+            reactionsTotalCount={reactionsTotalCount}
+            isRemovedFromConversation={conversation.removed_from_conversation()}
           />
-        </div>
-      )}
+        )}
+      </div>
+
+      <MessageReactionsList
+        reactions={reactions}
+        userId={selfId.id}
+        handleReactionClick={onClickReaction}
+        isMessageFocused={msgFocusState}
+        onTooltipReactionCountClick={() => onClickReactionDetails(message)}
+        onLastReactionKeyEvent={() => setActionMenuVisibility(false)}
+        isRemovedFromConversation={conversation.removed_from_conversation()}
+      />
     </div>
   );
 };