[Feature] Add emoji reactions for all message types

[JmillsExpensify]

Original P/S and project checklist

## Proposal Add Emoji Reactions for All Message Types

Problem
Text chat is very informational, but sometimes you want to participate in a way that is more emotional than informational -- to show support, comfort, disagreement, etc. In this case, a full-text message feels overkill, meaning oftentimes there is a desire to casually and emotionally participate that doesn’t clear the bar for a full-text message, and thus results in deciding not to participate at all.
Also, joining chats comes with an opportunity cost. You may get many notifications that distract you or you may get roped into conversations that you aren’t as passionate about. If you comment and someone replies, there’s a heightened expectation that you should reply back to them in a reasonable timeframe.

Solution
Let’s implement reactions into NewDot so users can react with emojis to any message type. Reactions became a standard in chatting apps as they offer a quick way to respond to messages and bring an additional layer of communication. They are also less distracting, as we don’t send notifications for reactions.

Design Doc https://docs.google.com/document/d/14VKy0ozcY_YVEmw0wV2ri_OBi7XNGUFVHhK3ei1MNWY/edit#heading=h.ns12dr1f35rx

Tasks

• Post Proposal (full Problem/Solution statement) in #expensify-open-source (example)
• Wait at least one full business day, and until the post has a majority (2/3) of positive reactions (👍)
• Paste Proposal in the space above with a link to the Slack thread
• Email strategy@expensify.com and paste in the Proposal
• Fill out the High-level overview of the problem, Timeline, and Terminology sections of the Design Doc
• Email strategy@expensify.com (continue the same email chain as before) with the link to your Design Doc
• Host a pre-design meeting (example) in #expensify-open-source to discuss any necessary details in public before filling out the High-level of proposed solution section.
• Fill out the High-level of proposed solution section
• Email stategy@expensify.com again with links to the doc and pre-design conversation in Slack
• Add the DesignDocReview label to get the High-level of proposed solution section reviewed
• Respond to any questions or concerns and bring up blockers in Slack to get a consensus if necessary
• Confirm that the doc has the minimum necessary number of reviews before proceeding
• Host another pre-design meeting in #expensify-open-source to ask for engineering feedback on the technical solution.
• Fill out the Detailed implementation of the solution and related sections.
• Re-add the DesignDocReview label to this issue
• Respond to any questions or concerns and bring up blockers in Slack to get consensus if necessary
• Confirm that the doc has the minimum necessary number of reviews before proceeding
• Email strategy@expensify.com one last time to let them know the Design Doc is moving into the implementation phase
• Implement the changes
• Send out a follow up email to strategy@expensify.com once everything has been implemented and do a Project Wrap-Up retrospective that provides:
  • Summary of what we accomplished with this project
  • What went well?
  • What could we have done better?
  • What did we learn?

GH Tracking:

• [$1000] Update Emojis.js to make the default skin tone an int #15054 - @stitesExpensify
• Return accountID with personalDetails from Auth #15056 - @stitesExpensify
• Return accountID with personalDetails from PHP #15061 - @stitesExpensify
• Create new Auth Commands AddEmojiReaction and RemoveEmojiReaction #15063 - @stitesExpensify
• Add new API endpoints for AddEmojiReaction and RemoveEmojiReaction #15062 - @stitesExpensify
• [HOLD for payment 2023-03-17] Add new AddEmojiReaction and RemoveEmojiReaction #15125 - @hannojg
• [HOLD for payment 2023-03-16] Make the tooltip component accept any arbitrarily content #15126 - @hannojg
• [HOLD for payment 2023-03-23] Create list of users who reacted in the tooltip on emoji reaction hover #15127 - @hannojg
• [$1000] [HOLD for payment 2023-05-16] Create a detailed list of reaction senders when long-/right-pressing a reaction #15128 - @hannojg

Cleanup Issues:

• Unexpected label "smileysAndEmotions" instead of emoji when reacting #15786 - @stitesExpensify
• [HOLD for payment 2023-03-20] Emoji reactions while hovering use the wrong copy and icon #15787 - @stitesExpensify
• [Close the contract] IOU messages cannot be reacted to #16549 - @stitesExpensify
• Reaction emoji disappears/reappears after quickly adding/removing reactions #16506 - @stitesExpensify

[JmillsExpensify]

Copying over the pre-design notes from our in-person meeting in San Franciso.

Emoji Reactions Pre-design

• Emoji is added via the comment action menu
  • Hover - option to add an emoji via the picker
  • Right-click on web - potentially showing the most-used emojis at the top above options
  • Long-press on mobile - Same as right click on web
• Emoji reactions appear immediately below the message.
• If emoji reactions already exist, add an emoji button inline.
• Emojis are shown in the order that they are added.
• Clicking on an emoji reaction adds it. Clicking on one you added removes it
• We’ll use Pattern A for reactions on comments
• If you react to certain emojis, those will appear blue/border
• To see who reacted to an emoji…
  • Long-press - who selected the emoji is visible in the drawer, grouped by person sorted by time
  • Right click - Tooltip for that emoji, with the list of usernames that selected that emoji (fallback to phone/email)
  • Hover - Tooltip for that emoji, with the list of usernames that selected that emoji (fallback to phone/email)
• We always list the person’s name that selected the emoji
• For mobile, the height of the bottom-dock will be dynamic based on it’s comment
• For mobile, the drawer will support swiping

Items that came up in discussion

• What about emoji reaction limits? We won’t worry about this for now.
• Should we notify on reactions? No (though we could change this in the future)
• Can you react on every type of reportAction? Yes
• Can you react to the welcome message? No
• Should the chat become unread if you receive a reaction? No
• Is a reaction a message (like WhatsApp or iMessage)? No

[JmillsExpensify]

Went ahead and added myself as the BZ helping push this forward.

[puneetlath]

@Szymon20000 could you comment on this issue so that we can assign you? Thanks!

[Szymon20000]

Sure!

[hannojg]

@puneetlath Szymon and I are sharing the work on this one. Is it possible to assign me as well? Thanks 😊

[stitesExpensify]

@Szymon20000 @hannojg FYI I just updated the OP to match our new Design Doc GH Issue template. It provides an outline of our internal process, and should help avoid any confusion that may be caused by the design doc itself. If you have any questions, obviously feel free to reach out to me or in #expensify-margelo!

[hannojg]

Following the official procedure I posted a problem solution statement here

[hannojg]

Can we please update the issue with the P/S Statement: https://expensify.slack.com/archives/C01GTK53T8Q/p1674214838372159?thread_ts=1674070038.007679&cid=C01GTK53T8Q

Thanks! 😊

[stitesExpensify]

Done!

[hannojg]

It also seems like I am unable to mail strategy@expensify.com? Can we whitelist the @margelo.io emails, or do you guys want to send out the emails?

@stitesExpensify edit: seems like it did go through now? 😅 are you able to confirm whether you guys got it?

// Double edit (sorry): its stuck in the outbox, so I think we're blocked

[stitesExpensify]

@hannojg I just confirmed that it is an internal only list. For now so that we can keep this moving I'll send it out for you while we get that changed.

If you want to post the contents of your email here, I will take care of it ASAP 😄

(edit: I'll CC Margelo@ as well)

[hannojg]

Yes, that would be great, thx!

Title: [Feature proposal] Add Emoji Reactions for All Message Types

Problem
Text chat is very informational, but sometimes you want to participate in a way that is more emotional than informational -- to show support, comfort, disagreement, etc. In this case, a full-text message feels overkill, meaning oftentimes there is a desire to casually and emotionally participate that doesn’t clear the bar for a full-text message, and thus results in deciding not to participate at all.
Also, joining chats comes with an opportunity cost. You may get many notifications that distract you or you may get roped into conversations that you aren’t as passionate about. If you comment and someone replies, there’s a heightened expectation that you should reply back to them in a reasonable timeframe.

Solution
Let’s implement reactions into NewDot so users can react with emojis to any message type. Reactions became a standard in chatting apps as they offer a quick way to respond to messages and bring an additional layer of communication. They are also less distracting, as we don’t send notifications for reactions.

Slack thread: https://expensify.slack.com/archives/C01GTK53T8Q/p1674214838372159?thread_ts=1674070038.007679&cid=C01GTK53T8Q

[stitesExpensify]

Strategy@ email was sent out today! We should be ready for the high level review on Monday

[Gonals]

I have read and reviewed this Design Doc!

[stitesExpensify]

High level design is ready for review!

[JmillsExpensify]

Looks like we are getting close to that last issue still. See the linked PRs for more.

[stitesExpensify]

I'm still working on the final issue. The merge conflicts are off the charts on the original PR that @tgolen made. With all of the refactors etc I've decided to start a new PR and pull the changes over manually since so much has changed. Top priority next week.

[stitesExpensify]

I fixed all of the conflicts, but we found another breaking issue with regards to how we save skintones. I created a new issue and have a PR up for the fix, but it does mean we need to wait for another couple of deploys before we can move forward with the /app PR again.

[stitesExpensify]

We're almost done, waiting for one last review

[stitesExpensify]

Reactions are no longer disappearing when adding/removing quickly! We are finishing up some cleanup and then is finally finished!

[JmillsExpensify]

Woo! Great work all around.

[stitesExpensify]

Still cleaning up

[stitesExpensify]

Still cleaning up

[stitesExpensify]

I think that we can close this. We are still cleaning up, but the feature is now complete and fully functional! I will continue to clean up the code as I have time, but this project is done. I'll send out an email soon!

[JmillsExpensify]

I'm with you. Let's close it out!