Feature: Add support for XEP-0444 Message Reactions #3906

marcellintacite · 2025-11-23T07:50:44Z

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

src/plugins/reactions/index.js

JohnXLivingston · 2025-11-24T10:15:34Z

@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).

src/plugins/reactions/index.js

JohnXLivingston · 2025-11-24T10:29:16Z

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 · 2025-11-29T05:58:49Z

@marcellintacite: Have you seen @JohnXLivingston comments?

marcellintacite · 2025-11-29T06:24:33Z

@marcellintacite: Have you seen @JohnXLivingston comments?

Yes, i am working on it

Neustradamus · 2025-11-29T06:34:57Z

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

marcellintacite · 2025-11-29T06:39:26Z

@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 · 2025-12-01T19:35:49Z

@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 · 2025-12-01T19:36:21Z

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 · 2025-12-03T11:11:34Z

src/plugins/reactions/index.js

+         */
+        api.listen.on('getMessageActionButtons', (el, buttons) => {
+            const is_own_message = el.model.get('sender') === 'me';
+            if (!is_own_message) {


Why removing the buttons on our messages? Nothing says we can't react to our own messages :)

@marcellintacite I tend to agree that you should be able to react to your own messages. At least in Slack you can do so.

I will be working on it

JohnXLivingston · 2025-12-03T11:17:30Z

src/shared/chat/emoji-picker-content.js

     */
    shouldBeHidden (shortname) {
        // Helper method for the template which decides whether an
        // emoji should be hidden, based on which skin tone is


This comment should be updated. It is no more only based on the skin tone.

@marcellintacite Looks like you marked some comments from @JohnXLivingston as resolved without addressing them?

I would add that the (updated) comment should go above the function into the docstring.

JohnXLivingston · 2025-12-03T11:20:47Z

@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 · 2025-12-03T11:21:17Z

can you check my implementation please

Yeah, the XEP compliance seems OK now :)

marcellintacite · 2025-12-08T22:19:55Z

@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.

marcellintacite · 2025-12-22T00:17:00Z

Hi @JohnXLivingston , could you please take a look at the MR? I need to finalize it for review now that it's in draft form.

JohnXLivingston · 2025-12-31T10:54:14Z

Hi @JohnXLivingston , could you please take a look at the MR? I need to finalize it for review now that it's in draft form.

I took a quick look. Seems good now. I think you can mark it as ready for a review.

jcbrand · 2026-01-05T11:58:46Z

@marcellintacite there are 10 failing tests.

Looks like a bunch of them are because the CAPS version string is different, since you're now advertising support for a new additional XMPP feature.

You'll have to update the tests to check for the new version string.

See here for example:

Stanzas don't match:
	Actual:
	<presence xmlns="jabber:client" id="8ff86976-eed3-4dd8-ba12-82979e5efb50" from="[email protected]/orchard" to="[email protected]/JC"><x xmlns="http://jabber.org/protocol/muc"><history maxstanzas="0"/><password>secret</password></x><c xmlns="http://jabber.org/protocol/caps" hash="sha-1" node="https://conversejs.org/" ver="IVrSARVJ+weVvRNIXt5E3K0e1NE="/></presence>
	Expected:
	<presence xmlns="jabber:client" from="[email protected]/orchard" id="8ff86976-eed3-4dd8-ba12-82979e5efb50" to="[email protected]/JC"><x xmlns="http://jabber.org/protocol/muc"><history maxstanzas="0"/><password>secret</password></x><c xmlns="http://jabber.org/protocol/caps" hash="sha-1" node="https://conversejs.org/" ver="qgxN8hmrdSa2/4/7PUoM9bPFN2s="/></presence>
	    at <Jasmine>
	    at src/plugins/bookmark-views/tests/bookmarks.js:268:29
	    at async UserContext.<anonymous> (src/headless/tests/mock.js:648:13)

The old version string is qgxN8hmrdSa2/4/7PUoM9bPFN2s= and it needs to be replaced with the new one which is IVrSARVJ+weVvRNIXt5E3K0e1NE=

marcellintacite · 2026-01-07T07:27:26Z

@marcellintacite there are 10 failing tests.

Looks like a bunch of them are because the CAPS version string is different, since you're now advertising support for a new additional XMPP feature.

You'll have to update the tests to check for the new version string.

See here for example:
Stanzas don't match:
	Actual:
	<presence xmlns="jabber:client" id="8ff86976-eed3-4dd8-ba12-82979e5efb50" from="[email protected]/orchard" to="[email protected]/JC"><x xmlns="http://jabber.org/protocol/muc"><history maxstanzas="0"/><password>secret</password></x><c xmlns="http://jabber.org/protocol/caps" hash="sha-1" node="https://conversejs.org/" ver="IVrSARVJ+weVvRNIXt5E3K0e1NE="/></presence>
	Expected:
	<presence xmlns="jabber:client" from="[email protected]/orchard" id="8ff86976-eed3-4dd8-ba12-82979e5efb50" to="[email protected]/JC"><x xmlns="http://jabber.org/protocol/muc"><history maxstanzas="0"/><password>secret</password></x><c xmlns="http://jabber.org/protocol/caps" hash="sha-1" node="https://conversejs.org/" ver="qgxN8hmrdSa2/4/7PUoM9bPFN2s="/></presence>
	    at <Jasmine>
	    at src/plugins/bookmark-views/tests/bookmarks.js:268:29
	    at async UserContext.<anonymous> (src/headless/tests/mock.js:648:13)
The old version string is qgxN8hmrdSa2/4/7PUoM9bPFN2s= and it needs to be replaced with the new one which is IVrSARVJ+weVvRNIXt5E3K0e1NE=

Thanks, i am working on it

marcellintacite · 2026-01-12T20:10:27Z

Hello @jcbrand ,

I've updated all the test files to use the new CAPS version string and rebased with the latest changes.

I also added the dependencies array to the reactions plugin to ensure converse-disco is loaded first

jcbrand · 2026-01-13T11:20:52Z

Thanks @marcellintacite, can you please do a rebase onto the master branch?

Currently there are a bunch of unrelated commits in this PR.

…estricted reactions

marcellintacite · 2026-01-13T16:32:48Z

Thanks @marcellintacite, can you please do a rebase onto the master branch?

Currently there are a bunch of unrelated commits in this PR.

Done

jcbrand

Thanks @marcellintacite. I did a first review from my side and left some review comments.

jcbrand · 2026-01-16T08:47:13Z

src/shared/chat/emoji-picker.js

    registerEvents() {
        this.onKeyDown = (ev) => this.#onKeyDown(ev);
-        this.dropdown.addEventListener("hide.bs.dropdown", () => this.onDropdownHide());
+        this.dropdown?.addEventListener("hide.bs.dropdown", () => this.onDropdownHide());


Why would this.dropdown sometimes be undefined?

This seems like a code smell (red flag) that masks a potential underlying problem.

src/shared/chat/emoji-picker.js

src/shared/constants.js

jcbrand · 2026-01-16T08:58:18Z

src/shared/chat/emoji-picker-content.js

     */
    shouldBeHidden (shortname) {
        // Helper method for the template which decides whether an
        // emoji should be hidden, based on which skin tone is


@marcellintacite Looks like you marked some comments from @JohnXLivingston as resolved without addressing them?

I would add that the (updated) comment should go above the function into the docstring.

jcbrand · 2026-01-16T09:00:28Z

src/plugins/reactions/index.js

+         */
+        api.listen.on('getMessageActionButtons', (el, buttons) => {
+            const is_own_message = el.model.get('sender') === 'me';
+            if (!is_own_message) {


@marcellintacite I tend to agree that you should be able to react to your own messages. At least in Slack you can do so.

src/plugins/reactions/index.js

jcbrand · 2026-01-16T09:14:54Z

src/plugins/reactions/index.js

+        }
+
+        // Create reaction picker component
+        const pickerEl = document.createElement('converse-reaction-picker');


We are trying to avoid imperative statements like document.createElement and container.appendChild to update the DOM and instead do everything declaratively via the html tagged template literal from lit-html.

So ideally there should be a <converse-reaction-picker></converse-reaction-picker> component rendered inside a template somewhere.

I understand that the template might be outside of this plugin, which is OK, then that other plugin needs to declare a dependency on this plugin.

If this plugin is not loaded, then the <converse-reaction-picker> element will just not render.

So I have to render the component directly inside the chatview/templates/chat.js
file?

The chatview plugin concerns itself with one-on-one chats, so that's not the best place.

Perhaps it can go into src/shared/chat/templates/message.js ? I think that template is used by both MUCs and 1:1 chats, but you should please double-check.

The picker should render only conditionally, based on a state value, similar to how the OGP metadata is rendered only when ogp_metadata is set.

See here:

converse.js/src/shared/chat/templates/message.js

Line 113 in 0348e18

${el.model.get('ogp_metadata')?.map((m) => {

src/plugins/reactions/index.js

marcellintacite marked this pull request as draft November 23, 2025 07:51

marcellintacite force-pushed the support-xep-0444 branch from e2289f4 to cac7f22 Compare November 23, 2025 07:57

JohnXLivingston reviewed Nov 24, 2025

View reviewed changes

src/plugins/reactions/index.js Outdated Show resolved Hide resolved

JohnXLivingston reviewed Nov 24, 2025

View reviewed changes

src/plugins/reactions/index.js Outdated Show resolved Hide resolved

JohnXLivingston reviewed Nov 24, 2025

View reviewed changes

src/plugins/reactions/index.js Outdated Show resolved Hide resolved

marclaporte mentioned this pull request Nov 24, 2025

XEP-0444: Message reactions #2398

Open

JohnXLivingston reviewed Dec 3, 2025

View reviewed changes

marcellintacite marked this pull request as ready for review January 2, 2026 16:57

marcellintacite added 4 commits January 13, 2026 15:34

Feat: Working on XEP-0444

17df901

Clean code duplication and adding support for Discovering support & R…

84a2776

…estricted reactions

Clean code duplication and adding support for Discovering support & R…

7b3e74e

…estricted reactions

fix: update CAPS version strings in tests for reactions feature

34ace89

marcellintacite force-pushed the support-xep-0444 branch from c72d580 to 34ace89 Compare January 13, 2026 15:24

marcellintacite and others added 3 commits January 13, 2026 17:33

docs: add changelog entry for XEP-0444 Message Reactions

ea50fdd

Merge branch 'master' into support-xep-0444

ef1d341

≈docs: add changelog entry for XEP-0444 Message Reactions

1546ba1

jcbrand reviewed Jan 16, 2026

View reviewed changes

github-advanced-security bot found potential problems Jan 20, 2026

View reviewed changes

src/plugins/reactions/index.js Fixed Show fixed Hide fixed

Fixing issues related to naming,dom query, etc

d033b98

marcellintacite force-pushed the support-xep-0444 branch from cfa8235 to d033b98 Compare January 20, 2026 02:17

Uh oh!

Feature: Add support for XEP-0444 Message Reactions #3906

Are you sure you want to change the base?

Feature: Add support for XEP-0444 Message Reactions #3906

Uh oh!

Conversation

marcellintacite commented Nov 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Feature: Add support for XEP-0444 Message Reactions

Description

Key Changes

1. New Plugin: reactions

2. UI Components

3. Technical Details

Screenshots / Video

Uh oh!

Uh oh!

Uh oh!

JohnXLivingston commented Nov 24, 2025

Uh oh!

Uh oh!

JohnXLivingston commented Nov 24, 2025

Discovering support

Restricted reactions

Uh oh!

Neustradamus commented Nov 29, 2025

Uh oh!

marcellintacite commented Nov 29, 2025

Uh oh!

Neustradamus commented Nov 29, 2025

Uh oh!

marcellintacite commented Nov 29, 2025

Uh oh!

marcellintacite commented Dec 1, 2025

Uh oh!

marcellintacite commented Dec 1, 2025

Discovering support

Restricted reactions

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

JohnXLivingston commented Dec 3, 2025

Uh oh!

JohnXLivingston commented Dec 3, 2025

Uh oh!

marcellintacite commented Dec 8, 2025

Uh oh!

marcellintacite commented Dec 22, 2025

Uh oh!

JohnXLivingston commented Dec 31, 2025

Uh oh!

jcbrand commented Jan 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

marcellintacite commented Jan 7, 2026

Uh oh!

marcellintacite commented Jan 12, 2026

Uh oh!

jcbrand commented Jan 13, 2026

Uh oh!

marcellintacite commented Jan 13, 2026

Uh oh!

jcbrand left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

marcellintacite commented Nov 23, 2025 •

edited

Loading

1. New Plugin: `reactions`

jcbrand commented Jan 5, 2026 •

edited

Loading

jcbrand Jan 20, 2026 •

edited

Loading