feat: reactions on Messages(sqservices -1734) (#14771)

* feat: create floating menu for message actions(SQSERVICES-1910)

* feat: manage message actions menu focus, hover, active states(SQSERVICES-1910)

- toggle message actions menu active state
- refactor message actions component and group reaction butons togehter
- add dark/light theme support
- css for action menu

* test: message action menu tests

* feat: emoji picker integration(SQSERVICES-1734)

* better positioning of emoji picker

* feat: handle outside area clicked for reaction/action menu items
overlay css
test case updated
code cleanup
context menu overlay and reset states(SQSERVICES-1734)

* feat: configure feature flag to enable/disable reaction

* feat: add ability to react on messages(SQSERVICES-1734) (#14839)

* feat: add ability to react on messages

* feat: create util for transformReactionObj
replace thums up and heart emoji with image
image css
create list reactions component

* feat: Add emoji title utils (#14827)

* feat: convert emoji to unicode

* feat: integrate react functioanlity with reactions button
make reactions button
reactions buttons css
create reaction emoji image component

* test: unit test message reactions

* refactor: move message reactions related components under message reactions directory

* refactor: improve transformReactionObj function

call transformReactionObj from reactions list

* refactor: update test cases

* refactor: remove test case

* refactor: remove unused code
fix: review comment

* chore: update yarn lock

* chore: update yarn lock

* feat: Add ability to see messsage reactions (SQSERVICES-1876) (#14825)

* feat: Add ability to see messsage reactions (SQSERVICES-1876)

* getEmojiTitleFromEmojiUnicode

* feat: create util for transformReactionObj
replace thums up and heart emoji with image
image css
create list reactions component

* feat: Add emoji title utils (#14827)

* feat: convert emoji to unicode

* styles

* use first name

* use reduce

* use map

* use map for emoji dictionary

* remove extra ?

* remove duplicated code

* Update src/script/util/EmojiUtil.ts

Co-authored-by: Przemysław Jóźwik <[email protected]>

* Update src/script/util/EmojiUtil.ts

Co-authored-by: Przemysław Jóźwik <[email protected]>

* correct rendering

* yarn lock changes

* migrate styles

* dark mode handle

* change styles file name

---------

Co-authored-by: arjita-mitra <[email protected]>
Co-authored-by: Przemysław Jóźwik <[email protected]>

* fix: new and older client should be in sync when a user reacts on a message

* test: add unit testing for reaction add/remove from a message

* Update src/script/components/MessagesList/Message/MessageWrapper.tsx

Co-authored-by: Thomas Belin <[email protected]>

---------

Co-authored-by: Amir Ghezelbash <[email protected]>
Co-authored-by: Przemysław Jóźwik <[email protected]>
Co-authored-by: Thomas Belin <[email protected]>

* feat: Add tooltip to reaction buttons (#14933)

* feat: Add tooltip to reaction buttons

* use isEnterKey

* onTooltipReactionCountClick

* onShowReactionDetails

* onClickReactionDetails

* remove MessageFooterLike

* feat: add new design for message timestamp, read receipt and integrate floating action menu inside image details modal (#14917)

* feat: refactor updateUserReactions method

* test:  updateUserReactions method tests

* feat: read receipt and timestamp new design

reaction buttons style changes

* feat: customise dark and light theme colour of emoji picker
update placeholder
remove feature flag

* fix: simplify code

* adjust position of message action menu to ensure responsivness

* feat: integrate message actions menu with detailsviewmodal

* implement new design of read receipts

* adjust style of 1 on 1 read receipts

* refactor reaction list padding to button margin to prevent extra line padding

* remove onClickReceive and replace by onClickDetails for contect menu action

* remove read status from ping message

* fix: hover, focus background colour of emoji picker

* fix: use css specificity to avoid important rule

* feat: integrate message floating action menu inside image details view modal

* test: update test cases

* fix: all typescript error fix and remove unused code

* feat: trap focus inside image modal

* feat: don't focus on reaction list buttons unless the message is focused

* feat: close emoji picker on emoji selection

* fix: message timestamp should appear after all the icons, ex: guest

* fix: place comma inline

* fix: move comment into correct place

* fix: rename method, make image detail modal id const

* fix: code review comments, update aria label

---------

Co-authored-by: V-Gira <[email protected]>

* runfix: Reaction views menu on 1 to 1

* runfix: Adjust margin of reaction tooltip

* chore: remove img cdn

* chore: merge commit with dev

* fix: test errors

* fix: lock file update

* fix: add skiplibcheck temporarily

* test: add withTheme

* fix: test cases

* feat: message reactions design review feedback changes(SQSERVICES-2057, SQSERVICES-2058) (#15200)

* fix: reaction improvements
increase reaction badge font size, reaction count colour update based on active/inactive, no system message background highlight

* feat: self deleting msg reactions(SQSERVICES-2057)

* Update src/script/components/MessagesList/Message/ContentMessage/MessageActions/MessageReactions/MessageReactions.styles.ts

Co-authored-by: Przemysław Jóźwik <[email protected]>

* fix: code review changes

* fix: use HTMLButtonElement to reduce props passed

* fix: add missing onKeyPress attribute

---------

Co-authored-by: Przemysław Jóźwik <[email protected]>

* fix: improve focus and hover behaviour of reactions menu (#15227)

* fix: reaction improvements
increase reaction badge font size, reaction count colour update based on active/inactive, no system message background highlight

* feat: self deleting msg reactions(SQSERVICES-2057)

* Update src/script/components/MessagesList/Message/ContentMessage/MessageActions/MessageReactions/MessageReactions.styles.ts

Co-authored-by: Przemysław Jóźwik <[email protected]>

* fix: code review changes

* fix: use HTMLButtonElement to reduce props passed

* fix: add missing onKeyPress attribute

* feat: improve keyboard accessibility

remove unused code
close message action menu on tab of last interactive element of a message
prevent emoji picker up/down arrow key to naviage between messages in background
 after emoji selection/esc key then retain the focus on the emoji button

* fix: improve comments

* fix: remove array.from

---------

Co-authored-by: Przemysław Jóźwik <[email protected]>

* fix: use emoji image inside reaction details right panel, some style updates, add reaction count (#15228)

* fix: reaction improvements
increase reaction badge font size, reaction count colour update based on active/inactive, no system message background highlight

* feat: self deleting msg reactions(SQSERVICES-2057)

* Update src/script/components/MessagesList/Message/ContentMessage/MessageActions/MessageReactions/MessageReactions.styles.ts

Co-authored-by: Przemysław Jóźwik <[email protected]>

* fix: code review changes

* fix: use HTMLButtonElement to reduce props passed

* fix: add missing onKeyPress attribute

* feat: improve keyboard accessibility

remove unused code
close message action menu on tab of last interactive element of a message
prevent emoji picker up/down arrow key to naviage between messages in background
 after emoji selection/esc key then retain the focus on the emoji button

* fix: improve comments

* fix: remove array.from

* fix: replace span with emoji image for message reaction details panel

add reaction count
style change

* fix: update style name

---------

Co-authored-by: Przemysław Jóźwik <[email protected]>

* fix: reaction QA feedback(WPB-1199) (#15321)

* fix: reaction QA feedback(WPB-1199)

- fix reaction action menu hover/focus state issues
- line break for reactions to avoid overflow

* fix: adjust action menu position on  font size change
wrap emoji pills to multi line
horizontal scroll shouldn't appear for long messages either

* fix: remove focus from reaction tooltip

* fix: add test id

* fix: [Web] Reactions: Message actions still accessible when I got removed from the conversation

* fix: context menu escape key press, multiple tooltip displayed together, stop propogating reaction action menu events

* fix: refactor code

* fix: remove unused event

* fix: remove extra div, move event handlers up to make tootlip links clickable

* chore: bump ui-kit

* fix: reset active menu button when no menu is open and clicked on wrapper (#15346)

* chore: cleanup packages

* fix: remove reply message option from context menu (#15478)

* fix: Capitalise the first letter of the first word in the emoji name displayed on the right-side panel in the message details. (#15479)

* fix: remove reply message option from context menu

* fix: Capitalise the first letter of the first word in the emoji name displayed on the right-side panel in the message details.

* fix: reuse exisitng methods

* feat: emoji pills should become active/inactive when user selects/unselect an emoji[WPB-3291] (#15503)

* fix: remove reply message option from context menu

* fix: Capitalise the first letter of the first word in the emoji name displayed on the right-side panel in the message details.

* fix: reuse exisitng methods

* fix: set emoji pill active/inactive when user select/unselect a reaction

* fix: code review suggestions

* fix: make all emoji pills active that user ever reacted to[WPB-3291] (#15509)

* fix: remove reply message option from context menu

* fix: Capitalise the first letter of the first word in the emoji name displayed on the right-side panel in the message details.

* fix: reuse exisitng methods

* fix: set emoji pill active/inactive when user select/unselect a reaction

* fix: code review suggestions

* fix: make all emoji pills active that user ever reacted

* fix: spread the prop

* feat: emoji pills should be sorted by number of reactions in desc order (#15530)

* fix: remove reply message option from context menu

* fix: Capitalise the first letter of the first word in the emoji name displayed on the right-side panel in the message details.

* fix: reuse exisitng methods

* fix: set emoji pill active/inactive when user select/unselect a reaction

* fix: code review suggestions

* fix: make all emoji pills active that user ever reacted

* fix: spread the prop

* feat: sort emoji pills by reaction user count(WPB-3292)

* fix: add function description

* feat: retain user selected skin colour after user reacts with the selected skin colour (#15531)

* fix: remove reply message option from context menu

* fix: Capitalise the first letter of the first word in the emoji name displayed on the right-side panel in the message details.

* fix: reuse exisitng methods

* fix: set emoji pill active/inactive when user select/unselect a reaction

* fix: code review suggestions

* fix: make all emoji pills active that user ever reacted

* fix: spread the prop

* feat: sort emoji pills by reaction user count(WPB-3292)

* fix: add function description

* fix: retain user selected skin colour(WPB-3564)

* fix: add new line

---------

Co-authored-by: Amir Ghezelbash <[email protected]>
Co-authored-by: Przemysław Jóźwik <[email protected]>
Co-authored-by: Thomas Belin <[email protected]>
Co-authored-by: V-Gira <[email protected]>
Co-authored-by: Timothy Le Bon <[email protected]>

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.1",
     "@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/backup/BackupRepository.ts

@@ -396,9 +396,8 @@ export class BackupRepository {
     let importedEntities: Conversation[] = [];
 
     const importConversationChunk = async (conversationChunk: ConversationRecord[]) => {
-      const importedConversationEntities = await this.conversationRepository.updateConversationStates(
-        conversationChunk,
-      );
+      const importedConversationEntities =
+        await this.conversationRepository.updateConversationStates(conversationChunk);
       importedEntities = importedEntities.concat(importedConversationEntities);
       progressCallback(conversationChunk.length);
       return importedEntities.length;

src/script/calling/mlsConference.ts

@@ -100,9 +100,8 @@ export const subscribeToEpochUpdates = async (
     keyLength: number;
   }) => void,
 ): Promise<() => void> => {
-  const {epoch: initialEpoch, groupId: subconversationGroupId} = await mlsService.joinConferenceSubconversation(
-    conversationId,
-  );
+  const {epoch: initialEpoch, groupId: subconversationGroupId} =
+    await mlsService.joinConferenceSubconversation(conversationId);
 
   const forwardNewEpoch = async ({groupId, epoch}: {groupId: string; epoch: number}) => {
     if (groupId !== subconversationGroupId) {

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()},