Feature: Add support for XEP-0444 Message Reactions

[marcellintacite]

Feature: Add support for XEP-0444 Message Reactions

Description

This PR implements XEP-0444: Message Reactions, allowing users to react to messages with emojis. It introduces a new plugin (reactions) that handles the UI for picking reactions, displaying them on messages, and managing the underlying XMPP stanza logic.

Key Changes

1. New Plugin: reactions

• Created a standalone plugin structure in src/plugins/reactions/.
• Implemented logic to parse incoming <reaction> elements from message stanzas.
• Implemented logic to send reaction stanzas with the correct XML namespace (urn:xmpp:reactions:0).
• Added optimistic UI updates (reactions appear immediately before server confirmation).

2. UI Components

• Reaction Picker (converse-reaction-picker):
  • Added a "Quick Actions" bar showing popular emojis (👍, ❤️, 😂, 😮).
  • Integrated a full emoji picker dropdown (lazy-loaded for performance).
  • Styled with glassmorphism effects to blend with the chat interface.
  • Uses CSS Anchor Positioning (with fallbacks) for robust dropdown placement.
• Message Bubbles:
  • Updated message templates to render reaction "pills" below messages.
  • Styled to resemble modern chat apps (Slack-like): rounded pills, hover effects, and active states.
  • Reactions are aggregated (e.g., "👍 3").
  • Clicking an existing reaction toggles it (edit your vote).

3. Technical Details

• Standard Compliance: Fully compliant with XEP-0444: Message Reactions.
• Styling: Reused existing emoji picker styles (src/shared/chat/styles/emoji.scss) to ensure consistency between the chat input and the reaction picker.

Screenshots / Video

emoji_converse.mp4

This still a Draft

• Add a changelog entry for your change in CHANGES.md
• When adding a configuration variable, please make sure to
  document it in docs/source/configuration.rst
• Please add a test for your change. Tests can be run in the commandline
  with make check or you can run them in the browser by running make serve

[JohnXLivingston]

@marcellintacite , did you see that it is possible to add «custom emojis» in the ConverseJS emoji picker? (see bellow for an explanation). I think those emojis should not be selectable as a message reaction.

With this feature, you can link a code name (for example :foo:) to an image. This is not a standard, and this will only work for people using ConverseJS on the same server as you.
You can test it here for example, with the code :pen:: demo.
If you open the emoji picker, you will see these custom emoji at the top of the list, in a section called "stickers" ("autocollants" in french).

[JohnXLivingston]

I thinks there are 2 other missing things in your implementation:

Discovering support

ConverseJS must declare to other client that it handles message reactions, by adding the feature urn:xmpp:reactions:0 to the discovery response. See https://xmpp.org/extensions/xep-0444.html#disco-base

The XEP says it MUST be implemented.

Also, if you are chatting with a user (in a 1 to 1 conversation) that does not support this feature, maybe we should not display the action in the chatbox.
For MUC, maybe we could just display the feature in all cases.

Restricted reactions

The XEP allow some clients or MUC to limit the set of supported emojis. See https://xmpp.org/extensions/xep-0444.html#disco-restricted
The XEP says it SHOULD be implemented.

So, you should check if there is such limitation (for a user in 1 to 1 conversations, and for the MUC in rooms), and filter the emoji picker.

[Neustradamus]

@marcellintacite: Have you seen @JohnXLivingston comments?

[marcellintacite]

@marcellintacite: Have you seen @JohnXLivingston comments?

Yes, i am working on it

[Neustradamus]

@marcellintacite: Good :)
When it is like this, do not hesitate to comment to confirm that you work on it ^^

[marcellintacite]

@marcellintacite: Good :) When it is like this, do not hesitate to comment to confirm that you work on it ^^

Alright , thanks. I am sorry i didn't remember. I'll do

[marcellintacite]

@marcellintacite , did you see that it is possible to add «custom emojis» in the ConverseJS emoji picker? (see bellow for an explanation). I think those emojis should not be selectable as a message reaction.

With this feature, you can link a code name (for example :foo:) to an image. This is not a standard, and this will only work for people using ConverseJS on the same server as you. You can test it here for example, with the code :pen:: demo. If you open the emoji picker, you will see these custom emoji at the top of the list, in a section called "stickers" ("autocollants" in french).

I added a support for them

[marcellintacite]

I thinks there are 2 other missing things in your implementation:

Discovering support

ConverseJS must declare to other client that it handles message reactions, by adding the feature urn:xmpp:reactions:0 to the discovery response. See https://xmpp.org/extensions/xep-0444.html#disco-base

The XEP says it MUST be implemented.

Also, if you are chatting with a user (in a 1 to 1 conversation) that does not support this feature, maybe we should not display the action in the chatbox. For MUC, maybe we could just display the feature in all cases.

Restricted reactions

The XEP allow some clients or MUC to limit the set of supported emojis. See https://xmpp.org/extensions/xep-0444.html#disco-restricted The XEP says it SHOULD be implemented.

So, you should check if there is such limitation (for a user in 1 to 1 conversations, and for the MUC in rooms), and filter the emoji picker.

can you check my implementation please

[JohnXLivingston]

@marcellintacite , did you see that it is possible to add «custom emojis» in the ConverseJS emoji picker? (see bellow for an explanation). I think those emojis should not be selectable as a message reaction.
With this feature, you can link a code name (for example :foo:) to an image. This is not a standard, and this will only work for people using ConverseJS on the same server as you. You can test it here for example, with the code :pen:: demo. If you open the emoji picker, you will see these custom emoji at the top of the list, in a section called "stickers" ("autocollants" in french).

I added a support for them

What do you mean by "added a support for them"? I can't find the related code.
I'm not sure we understand each other. IMHO, custom emoji must be removed from the picker for message reaction. As there are not real emoji.
I think the shouldBeHidden method should just remove all "emojis" that don't have any associated unicode character. (you can add an option to the picker, like you did with allowed_emojis, to say that we only want unicode emojis).

[JohnXLivingston]

can you check my implementation please

Yeah, the XEP compliance seems OK now :)

[marcellintacite]

@marcellintacite , did you see that it is possible to add «custom emojis» in the ConverseJS emoji picker? (see bellow for an explanation). I think those emojis should not be selectable as a message reaction.
With this feature, you can link a code name (for example :foo:) to an image. This is not a standard, and this will only work for people using ConverseJS on the same server as you. You can test it here for example, with the code :pen:: demo. If you open the emoji picker, you will see these custom emoji at the top of the list, in a section called "stickers" ("autocollants" in french).

I added a support for them

What do you mean by "added a support for them"? I can't find the related code. I'm not sure we understand each other. IMHO, custom emoji must be removed from the picker for message reaction. As there are not real emoji. I think the shouldBeHidden method should just remove all "emojis" that don't have any associated unicode character. (you can add an option to the picker, like you did with allowed_emojis, to say that we only want unicode emojis).

Thanks ,
I've updated the PR to address your feedback. Users can now react to their own messages, as I've removed the is_own_message check, and I've ensured custom stickers are properly filtered out of the reaction picker by enforcing a unicode codepoint check. Additionally, i have updated the code comments to accurately reflect the filtering logic.