Rationale

This MIP addresses next step of implementing a Chat. It aims to provide advanced features to facilitate interactions on the messages and facilitate the UX.

1. Functional Requirements

Top User Stories

Quick reaction
As a platform/user on a desktop, hovering over a message, I display a quick reaction option on a balloon:

Emoji reaction

• I have a default batch of emoji I can select to react to a message. I have in addition a "+" button to open the emoji library to select a different emoji
• The emoji is stuck to the message after being sent.
• I can send several emojis by message so if I select a new one my emoji is changed. The emoji I chose is highlighted in blue.
• Another user can click on the emoji stuck to add this reaction.

Reply

• I have a "Reply" option to answer to this specific message
• The message is displayed above the redaction area to let me know I'm reacting to it. I display 3 lines max of the message and an ellipsis if longer
• Once sent, a copy of the answered message is stuck above my message with a specific layout. It's displayed with 3 lines max and an ellipsis if longer
• If I click on the answered message, I automatically scroll to it

Edit

• For my message only, I have a "Edit" option to update the text
• Once I click I can edit the text, validate the modification or cancel the modification
• Once edited, I have a label "Edited" displayed on the message to let the other user a modification was done. On hovering over it I have a tooltip "Edited Month Day, Year at HH:MM"

More action

• I have a "3 dots" option to access the full action menu

Full action menu
Desktop

• When I click on the 3 dots option of the quick reaction balloon I display the full action menu composed of:
  • emoji reaction as described in the quick reaction menu
  • reply option
  • edit option (only for my message)
  • delete option (only for my message)

Mobile
When I do a long press on a message, then I display the full action menu in a bottom drawer with the same options of the desktop

Delete

• When I click on the delete option, then I display a validation pop-up to confirm or cancel the deletion
• Once validated I display a success snack bar to let me know my message has been deleted and the message is deleted for all users

Emoji bank
As a platform/user I can send emojis in the chat message.

When I click on the emoji button
Then the emoji bank (same as on the feed) opens and I can select an emoji. It's added to text.

Impacts

Nothing

Gamification

Nothing

Notifications

No notifications will be added

Analytics

No analytics were requested

Unified Search

This does not provide data for unified search

2. Technical Requirements

Expected Volume & Performance

Security

Extensibility

The added UI components should be configurable and reusable in all Meeds applications

Configurability

Upgradability

Existing Features

Feature Flags

Property Name	Default Value	Target Audience	Functional Behaviour

Other Non Functional Requirements

3. Impacts

Documentation

Training

4. Software Architecture

Security

Access

• GUI
• API

Vue components & event handling

The requirements that were expressed above needs to add two components to the UI framework :

• Emoji picker component : There is no native Vue component in Meeds project (we use an Emoji CKEditor plugin for Activity/Task/Comments).

  • We will need to implement a new Vue JS component to use as the Emoji picker. This component should be common and used by other applications. This component will be added separately from the Social common components

• There is no support in VueJs/Vuetify for long press yet. We may need to change the functional requirement and use click instead of a long press. Otherwise, we can simulate the long press using standard mouse interactions

External API usage

The following Matrix API endpoints will be used for :

• Edit message : https://spec.matrix.org/v1.14/client-server-api/#event-replacements & https://spec.matrix.org/v1.8/client-server-api/#edits-of-replies
• Reply to message : https://spec.matrix.org/v1.8/client-server-api/#rich-replies
• Add reaction : https://spec.matrix.org/v1.8/client-server-api/#event-annotations-and-reactions
• Delete message : https://spec.matrix.org/v1.14/client-server-api/#put_matrixclientv3roomsroomidredacteventidtxnid

Services & processing

• Ex: Scheduled Jobs

Data and persistence

• Macro data model
• Persistence layer
• Use of caches

Clustering

Multitenancy

Integrations

Migration strategy

5. Annexes

• Reasoning that explain the technical choices
• Impacts
• References