@nodebb/nodebb-plugin-reactions 2.0.1 → 2.1.0

package/README.md

@@ -4,9 +4,7 @@ Reactions plugin for NodeBB
 # Screenshots
 
 ## Reactions:
-![CleanShot 2023-05-11 at 08 53 48@2x](https://github.com/ShlomoCode/nodebb-plugin-reactions/assets/78599753/613cb49e-994a-4869-a721-c1eeb00959ff)
-
+![demo](./assets/demo.png)
 
 ## ACP:
-![CleanShot 2023-05-11 at 04 09 11@2x](https://github.com/ShlomoCode/nodebb-plugin-reactions/assets/78599753/f4a4e5cb-f060-4415-a337-222a157a6e59)
-
+![acp](./assets/acp.png)

package/languages/en-GB/reactions.json

@@ -8,6 +8,9 @@
   "settings.max-reactions-per-post": "Maximum unique reactions per post (0 for unlimited, default: 4)",
   "settings.max-reactions-per-user-per-post": "Maximum reactions per user per post (0 for unlimited)",
   "settings.max-reactions-per-user-per-post-help": "The limit is enforced only when adding a new reaction and not when joining an existing reaction.",
+  "settings.max-reactions-per-message": "Maximum unique reactions per message (0 for unlimited, default: 4)",
+  "settings.max-reactions-per-user-per-message": "Maximum reactions per user per message (0 for unlimited)",
+  "settings.max-reactions-per-user-per-message-help": "The limit is enforced only when adding a new reaction and not when joining an existing reaction.",
   "settings.reaction-reputations": "Reaction Reputations (Optional)",
   "settings.reaction-reputations-help": "You can assign a reputation to individual reactions. When a reaction is applied to a post, the owner of that post will get this reputation.",
   "settings.reaction-reputations.add": "Add Rule",

package/library.js

@@ -4,6 +4,7 @@ const _ = require.main.require('lodash');
 const meta = require.main.require('./src/meta');
 const user = require.main.require('./src/user');
 const posts = require.main.require('./src/posts');
+const messaging = require.main.require('./src/messaging');
 const db = require.main.require('./src/database');
 const routesHelpers = require.main.require('./src/routes/helpers');
 const websockets = require.main.require('./src/socket.io/index');
@@ -19,13 +20,14 @@ function parse(name) {
 	return emojiParser.buildEmoji(emojiTable[name] || emojiTable[emojiAliases[name]], '');
 }
 
-const ReactionsPlugin = {};
+const ReactionsPlugin = module.exports;
 
 ReactionsPlugin.init = async function (params) {
-	function renderAdmin(_, res) {
-		res.render('admin/plugins/reactions', {});
-	}
-	routesHelpers.setupAdminPageRoute(params.router, '/admin/plugins/reactions', params.middleware, [], renderAdmin);
+	routesHelpers.setupAdminPageRoute(params.router, '/admin/plugins/reactions', (req, res) => {
+		res.render('admin/plugins/reactions', {
+			title: '[[reactions:reactions]]',
+		});
+	});
 };
 
 ReactionsPlugin.addAdminNavigation = async function (header) {
@@ -41,13 +43,15 @@ ReactionsPlugin.getPluginConfig = async function (config) {
 	try {
 		const settings = await meta.settings.get('reactions');
 		config.maximumReactions = settings.maximumReactions ? parseInt(settings.maximumReactions, 10) : DEFAULT_MAX_EMOTES;
+		config.maximumReactionsPerMessage = settings.maximumReactionsPerMessage ?
+			parseInt(settings.maximumReactionsPerMessage, 10) : DEFAULT_MAX_EMOTES;
 	} catch (e) {
 		console.error(e);
 	}
 	return config;
 };
 
-ReactionsPlugin.getReactions = async function (data) {
+ReactionsPlugin.getPostReactions = async function (data) {
 	if (data.uid === 0) {
 		return data;
 	}
@@ -126,6 +130,81 @@ ReactionsPlugin.getReactions = async function (data) {
 	return data;
 };
 
+ReactionsPlugin.getMessageReactions = async function (data) {
+	if (data.uid === 0) {
+		return data;
+	}
+
+	try {
+		const settings = await meta.settings.get('reactions');
+		const maximumReactionsPerMessage = settings.maximumReactionsPerMessage || DEFAULT_MAX_EMOTES;
+
+		const mids = data.messages.map(message => message && parseInt(message.mid, 10));
+		const allReactionsForMids = await db.getSetsMembers(mids.map(pid => `mid:${pid}:reactions`));
+
+		const midToIsMaxReactionsReachedMap = new Map(); // mid -> IsMaxReactionsReached (boolean)
+		const midToReactionsMap = new Map(); // mid -> reactions (string[])
+		let reactionSets = [];
+
+		for (let i = 0, len = mids.length; i < len; i++) {
+			const mid = mids[i];
+			const reactionsList = allReactionsForMids[i];
+			const reactionsCount = reactionsList.length;
+
+			if (reactionsList && reactionsList.length > 0) {
+				midToReactionsMap.set(mid, reactionsList);
+				midToIsMaxReactionsReachedMap.set(mid, reactionsCount > maximumReactionsPerMessage);
+				reactionSets = reactionSets.concat(reactionsList.map(reaction => `mid:${mid}:reaction:${reaction}`));
+			}
+		}
+
+		const reactionSetToUsersMap = new Map(); // reactionSet -> { uid, username }
+		if (reactionSets.length > 0) {
+			const uidsForReactions = await db.getSetsMembers(reactionSets);
+			const allUids = _.union(...uidsForReactions).filter(Boolean);
+			const usersData = await user.getUsersFields(allUids, ['uid', 'username']);
+			const uidToUserdataMap = _.keyBy(usersData, 'uid');
+
+			for (let i = 0, len = reactionSets.length; i < len; i++) {
+				const uidsForReaction = uidsForReactions[i];
+				if (uidsForReaction && uidsForReaction.length > 0) {
+					const usersData = uidsForReaction.map(uid => uidToUserdataMap[uid]).filter(Boolean);
+					reactionSetToUsersMap.set(reactionSets[i], usersData);
+				}
+			}
+		}
+
+		for (const msg of data.messages) {
+			msg.maxReactionsReached = midToIsMaxReactionsReachedMap.get(msg.mid);
+			msg.reactions = [];
+
+			if (midToReactionsMap.has(msg.mid)) {
+				for (const reaction of midToReactionsMap.get(msg.mid)) {
+					const reactionSet = `mid:${msg.mid}:reaction:${reaction}`;
+					if (reactionSetToUsersMap.has(reactionSet)) {
+						const usersData = reactionSetToUsersMap.get(reactionSet);
+						const reactionCount = usersData.length;
+						const reactedUsernames = usersData.map(userData => userData.username).join(', ');
+						const reactedUids = usersData.map(userData => userData.uid);
+
+						msg.reactions.push({
+							mid: msg.mid,
+							reacted: reactedUids.includes(data.uid),
+							reaction,
+							usernames: reactedUsernames,
+							reactionImage: parse(reaction),
+							reactionCount,
+						});
+					}
+				}
+			}
+		}
+	} catch (e) {
+		console.error(e);
+	}
+	return data;
+};
+
 ReactionsPlugin.onReply = async function (data) {
 	if (data.uid !== 0) {
 		data.reactions = [];
@@ -148,7 +227,7 @@ ReactionsPlugin.deleteReactions = async function (hookData) {
 	await db.deleteAll(keys);
 };
 
-async function sendEvent(data, eventName) {
+async function sendPostEvent(data, eventName) {
 	try {
 		const [reactionCount, totalReactions, uids] = await Promise.all([
 			db.setCount(`pid:${data.pid}:reaction:${data.reaction}`),
@@ -177,6 +256,35 @@ async function sendEvent(data, eventName) {
 	}
 }
 
+async function sendMessageEvent(data, eventName) {
+	try {
+		const [reactionCount, totalReactions, uids] = await Promise.all([
+			db.setCount(`mid:${data.mid}:reaction:${data.reaction}`),
+			db.setCount(`mid:${data.mid}:reactions`),
+			db.getSetMembers(`mid:${data.mid}:reaction:${data.reaction}`),
+		]);
+
+		const userdata = await user.getUsersFields(uids, ['uid', 'username']);
+		const usernames = userdata.map(user => user.username).join(', ');
+
+		if (parseInt(reactionCount, 10) === 0) {
+			await db.setRemove(`mid:${data.mid}:reactions`, data.reaction);
+		}
+
+		await websockets.in(`chat_room_${data.roomId}`).emit(eventName, {
+			mid: data.mid,
+			uid: data.uid,
+			reaction: data.reaction,
+			reactionCount,
+			totalReactions,
+			usernames,
+			reactionImage: parse(data.reaction),
+		});
+	} catch (e) {
+		console.error(e);
+	}
+}
+
 async function getReactionReputation(reaction) {
 	const settings = await meta.settings.get('reactions');
 	const reactionsReps = settings['reaction-reputations'] || [];
@@ -201,23 +309,27 @@ SocketPlugins.reactions = {
 			throw new Error('[[reactions:error.invalid-reaction]]');
 		}
 
-		data.uid = socket.uid;
-
 		const settings = await meta.settings.get('reactions');
 		const maximumReactions = settings.maximumReactions || DEFAULT_MAX_EMOTES;
-		const [totalReactions, emojiIsAlreadyExist, alreadyReacted, reactionReputation] = await Promise.all([
+		const [tid, totalReactions, emojiIsAlreadyExist, alreadyReacted, reactionReputation] = await Promise.all([
+			posts.getPostField(data.pid, 'tid'),
 			db.setCount(`pid:${data.pid}:reactions`),
 			db.isSetMember(`pid:${data.pid}:reactions`, data.reaction),
 			db.isSetMember(`pid:${data.pid}:reaction:${data.reaction}`, socket.uid),
 			getReactionReputation(data.reaction),
 		]);
-
+		if (!tid) {
+			throw new Error('[[error:no-post]]');
+		}
+		data.uid = socket.uid;
+		data.tid = tid;
 		if (!emojiIsAlreadyExist) {
 			if (totalReactions > maximumReactions) {
 				throw new Error(`[[reactions:error.maximum-reached]] (${maximumReactions})`);
 			}
-			
-			const maximumReactionsPerUserPerPost = settings.maximumReactionsPerUserPerPost ? parseInt(settings.maximumReactionsPerUserPerPost, 10) : 0;
+
+			const maximumReactionsPerUserPerPost = settings.maximumReactionsPerUserPerPost ?
+				parseInt(settings.maximumReactionsPerUserPerPost, 10) : 0;
 			if (maximumReactionsPerUserPerPost > 0) {
 				const emojiesInPost = await db.getSetMembers(`pid:${data.pid}:reactions`);
 				const userPostReactions = await db.isMemberOfSets(emojiesInPost.map(emojiName => `pid:${data.pid}:reaction:${emojiName}`), socket.uid);
@@ -227,7 +339,6 @@ SocketPlugins.reactions = {
 				}
 			}
 		}
-		
 
 		await Promise.all([
 			db.setAdd(`pid:${data.pid}:reactions`, data.reaction),
@@ -238,7 +349,7 @@ SocketPlugins.reactions = {
 			await giveOwnerReactionReputation(reactionReputation, data.pid);
 		}
 
-		await sendEvent(data, 'event:reactions.addPostReaction');
+		await sendPostEvent(data, 'event:reactions.addPostReaction');
 	},
 	removePostReaction: async function (socket, data) {
 		if (!socket.uid) {
@@ -249,30 +360,107 @@ SocketPlugins.reactions = {
 			throw new Error('[[reactions:error.invalid-reaction]]');
 		}
 
+		const [tid, hasReacted, reactionReputation] = await Promise.all([
+			posts.getPostField(data.pid, 'tid'),
+			db.isSetMember(`pid:${data.pid}:reaction:${data.reaction}`, socket.uid),
+			getReactionReputation(data.reaction),
+		]);
+		if (!tid) {
+			throw new Error('[[error:no-post]]');
+		}
 		data.uid = socket.uid;
+		data.tid = tid;
 
-		try {
-			const [hasReacted, reactionReputation] = await Promise.all([
-				db.isSetMember(`pid:${data.pid}:reaction:${data.reaction}`, socket.uid),
-				getReactionReputation(data.reaction),
-			]);
-			if (hasReacted) {
-				await db.setRemove(`pid:${data.pid}:reaction:${data.reaction}`, socket.uid);
-			}
+		if (hasReacted) {
+			await db.setRemove(`pid:${data.pid}:reaction:${data.reaction}`, socket.uid);
+		}
+
+		const reactionCount = await db.setCount(`pid:${data.pid}:reaction:${data.reaction}`);
+		if (reactionCount === 0) {
+			await db.setRemove(`pid:${data.pid}:reactions`, data.reaction);
+		}
+		if (hasReacted && reactionReputation > 0) {
+			await giveOwnerReactionReputation(-reactionReputation, data.pid);
+		}
 
-			const reactionCount = await db.setCount(`pid:${data.pid}:reaction:${data.reaction}`);
-			if (reactionCount === 0) {
-				await db.setRemove(`pid:${data.pid}:reactions`, data.reaction);
+		await sendPostEvent(data, 'event:reactions.removePostReaction');
+	},
+	addMessageReaction: async function (socket, data) {
+		if (!socket.uid) {
+			throw new Error('[[error:not-logged-in]]');
+		}
+
+		if (!emojiTable[data.reaction]) {
+			throw new Error('[[reactions:error.invalid-reaction]]');
+		}
+
+		const settings = await meta.settings.get('reactions');
+		const maximumReactionsPerMessage = settings.maximumReactionsPerMessage || DEFAULT_MAX_EMOTES;
+		const [roomId, totalReactions, emojiIsAlreadyExist] = await Promise.all([
+			messaging.getMessageField(data.mid, 'roomId'),
+			db.setCount(`mid:${data.mid}:reactions`),
+			db.isSetMember(`mid:${data.mid}:reactions`, data.reaction),
+		]);
+
+		if (!roomId) {
+			throw new Error('[[error:no-message]]');
+		}
+
+		data.uid = socket.uid;
+		data.roomId = roomId;
+
+		if (!emojiIsAlreadyExist) {
+			if (totalReactions > maximumReactionsPerMessage) {
+				throw new Error(`[[reactions:error.maximum-reached]] (${maximumReactionsPerMessage})`);
 			}
-			if (hasReacted && reactionReputation > 0) {
-				await giveOwnerReactionReputation(-reactionReputation, data.pid);
+
+			const maximumReactionsPerUserPerMessage = settings.maximumReactionsPerUserPerMessage ?
+				parseInt(settings.maximumReactionsPerUserPerMessage, 10) : 0;
+			if (maximumReactionsPerUserPerMessage > 0) {
+				const emojiesInMessage = await db.getSetMembers(`mid:${data.mid}:reactions`);
+				const userPostReactions = await db.isMemberOfSets(emojiesInMessage.map(emojiName => `mid:${data.mid}:reaction:${emojiName}`), socket.uid);
+				const userPostReactionCount = userPostReactions.filter(Boolean).length;
+				if (userPostReactionCount > maximumReactionsPerUserPerMessage) {
+					throw new Error(`[[reactions:error.maximum-per-user-per-post-reached]] (${maximumReactionsPerUserPerMessage})`);
+				}
 			}
-			await sendEvent(data, 'event:reactions.removePostReaction');
-		} catch (e) {
-			console.error(e);
 		}
+
+		await Promise.all([
+			db.setAdd(`mid:${data.mid}:reactions`, data.reaction),
+			db.setAdd(`mid:${data.mid}:reaction:${data.reaction}`, socket.uid),
+		]);
+
+		await sendMessageEvent(data, 'event:reactions.addMessageReaction');
 	},
-};
+	removeMessageReaction: async function (socket, data) {
+		if (!socket.uid) {
+			throw new Error('[[error:not-logged-in]]');
+		}
+
+		if (!emojiTable[data.reaction]) {
+			throw new Error('[[reactions:error.invalid-reaction]]');
+		}
+
+		const [roomId, hasReacted] = await Promise.all([
+			messaging.getMessageField(data.mid, 'roomId'),
+			db.isSetMember(`mid:${data.mid}:reaction:${data.reaction}`, socket.uid),
+		]);
+		if (!roomId) {
+			throw new Error('[[error:no-message]]');
+		}
+		data.uid = socket.uid;
+		data.roomId = roomId;
+		if (hasReacted) {
+			await db.setRemove(`mid:${data.mid}:reaction:${data.reaction}`, socket.uid);
+		}
 
+		const reactionCount = await db.setCount(`mid:${data.mid}:reaction:${data.reaction}`);
+		if (reactionCount === 0) {
+			await db.setRemove(`mid:${data.mid}:reactions`, data.reaction);
+		}
+
+		await sendMessageEvent(data, 'event:reactions.removeMessageReaction');
+	},
+};
 
-module.exports = ReactionsPlugin;

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@nodebb/nodebb-plugin-reactions",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "nbbpm": {
-    "compatibility": "^3.0.0"
+    "compatibility": "^3.3.0"
   },
   "description": "Reactions plugin for NodeBB",
   "main": "library.js",

package/plugin.json

@@ -26,7 +26,10 @@
             "hook": "filter:config.get", "method": "getPluginConfig"
         },
         {
-            "hook": "filter:post.getPosts", "method": "getReactions"
+            "hook": "filter:post.getPosts", "method": "getPostReactions"
+        },
+        {
+            "hook": "filter:messaging.getMessages", "method": "getMessageReactions"
         },
         {
             "hook": "filter:post.get", "method": "onReply"

package/public/client.js

@@ -1,55 +1,17 @@
 'use strict';
 
 $(document).ready(function () {
-	setupPostReactions();
-
-	function setupPostReactions() {
-		require(['hooks', 'alerts'], function (hooks, alerts) {
+	setupReactions();
+	let alerts;
+	function setupReactions() {
+		createReactionTooltips();
+		require(['hooks', 'alerts'], function (hooks, _alerts) {
+			alerts = _alerts;
 			hooks.on('action:ajaxify.end', function () {
 				if (ajaxify.data.template.topic) {
-					setupReactionSockets();
-					createReactionTooltips();
-					$('[component="topic"]').on('click', '[component="post/reaction"]', function () {
-						var tid = $('[component="topic"]').attr('data-tid');
-						var reactionElement = $(this);
-						var pid = reactionElement.attr('data-pid');
-						var reaction = reactionElement.attr('data-reaction');
-						var reacted = reactionElement.hasClass('reacted');
-						var event = 'plugins.reactions.' + (reacted ? 'removePostReaction' : 'addPostReaction');
-						socket.emit(event, {
-							tid: tid,
-							pid: pid,
-							reaction: reaction,
-						}, function (err) {
-							if (err) {
-								alerts.error(err.message);
-							}
-						});
-					});
-
-					$('[component="topic"]').on('click', '[component="post/reaction/add"]', function () {
-						var reactionAddEl = $(this);
-						var tid = $('[component="topic"]').attr('data-tid');
-						var pid = reactionAddEl.attr('data-pid');
-						require(['emoji-dialog'], function (emojiDialog) {
-							emojiDialog.toggle(reactionAddEl[0], function (_, name, dialog) {
-								emojiDialog.dialogActions.close(dialog);
-
-								socket.emit('plugins.reactions.addPostReaction', {
-									tid: tid,
-									pid: pid,
-									reaction: name,
-								}, function (err) {
-									if (err) {
-										alerts.error(err.message);
-										throw err;
-									}
-
-									$('[component="post/reaction"][data-pid="' + pid + '"][data-reaction="' + name + '"]').addClass('reacted');
-								});
-							});
-						});
-					});
+					setupPostReactions();
+				} else if (ajaxify.data.template.chats && ajaxify.data.roomId) {
+					setupMessageReactions();
 				}
 			});
 		});
@@ -61,19 +23,122 @@ $(document).ready(function () {
 		socket.on('event:post_restored', function (data) {
 			$('[component="post/reactions"][data-pid="' + data.pid + '"]').removeClass('hidden');
 		});
+
+		socket.on('event:chats.delete', function (mid) {
+			$('[component="message/reactions"][data-mid="' + mid + '"]').addClass('hidden');
+		});
+
+		socket.on('event:chats.restore', function (msg) {
+			$('[component="message/reactions"][data-mid="' + msg.mid + '"]').removeClass('hidden');
+		});
+	}
+
+	function setupPostReactions() {
+		setupPostReactionSockets();
+
+		$('[component="topic"]').on('click', '[component="post/reaction"]', function () {
+			var reactionElement = $(this);
+			var pid = reactionElement.attr('data-pid');
+			var reaction = reactionElement.attr('data-reaction');
+			var reacted = reactionElement.hasClass('reacted');
+			var event = 'plugins.reactions.' + (reacted ? 'removePostReaction' : 'addPostReaction');
+			socket.emit(event, {
+				pid: pid,
+				reaction: reaction,
+			}, function (err) {
+				if (err) {
+					alerts.error(err.message);
+				}
+			});
+		});
+
+		$('[component="topic"]').on('click', '[component="post/reaction/add"]', function () {
+			var reactionAddEl = $(this);
+			var pid = reactionAddEl.attr('data-pid');
+			require(['emoji-dialog'], function (emojiDialog) {
+				emojiDialog.toggle(reactionAddEl[0], function (_, name, dialog) {
+					emojiDialog.dialogActions.close(dialog);
+
+					socket.emit('plugins.reactions.addPostReaction', {
+						pid: pid,
+						reaction: name,
+					}, function (err) {
+						if (err) {
+							alerts.error(err.message);
+							throw err;
+						}
+
+						$('[component="post/reaction"][data-pid="' + pid + '"][data-reaction="' + name + '"]').addClass('reacted');
+					});
+				});
+			});
+		});
+	}
+
+	function setupMessageReactions() {
+		setupMessageReactionSockets();
+
+		const messageContent = $('[component="chat/message/content"]');
+		messageContent.on('click', '[component="message/reaction"]', function () {
+			var reactionElement = $(this);
+			var mid = reactionElement.attr('data-mid');
+			var reaction = reactionElement.attr('data-reaction');
+			var reacted = reactionElement.hasClass('reacted');
+			var event = 'plugins.reactions.' + (reacted ? 'removeMessageReaction' : 'addMessageReaction');
+			socket.emit(event, {
+				mid: mid,
+				reaction: reaction,
+			}, function (err) {
+				if (err) {
+					alerts.error(err.message);
+				}
+			});
+		});
+
+		messageContent.on('click', '[component="message/reaction/add"]', function () {
+			const reactionAddEl = $(this);
+			const mid = reactionAddEl.attr('data-mid');
+
+			require(['emoji-dialog'], function (emojiDialog) {
+				emojiDialog.toggle(reactionAddEl[0], function (_, name, dialog) {
+					emojiDialog.dialogActions.close(dialog);
+
+					socket.emit('plugins.reactions.addMessageReaction', {
+						mid: mid,
+						reaction: name,
+					}, function (err) {
+						if (err) {
+							return alerts.error(err.message);
+						}
+
+						$('[component="message/reaction"][data-mid="' + mid + '"][data-reaction="' + name + '"]').addClass('reacted');
+					});
+				});
+			});
+		});
 	}
 
-	function setupReactionSockets() {
+	function setupPostReactionSockets() {
 		socket.off('event:reactions.addPostReaction').on('event:reactions.addPostReaction', function (data) {
-			updateReactionCount(data);
+			updatePostReactionCount(data, 'add');
 		});
 
 		socket.off('event:reactions.removePostReaction').on('event:reactions.removePostReaction', function (data) {
-			updateReactionCount(data);
+			updatePostReactionCount(data, 'remove');
 		});
 	}
 
-	function updateReactionCount(data) {
+	function setupMessageReactionSockets() {
+		socket.off('event:reactions.addMessageReaction').on('event:reactions.addMessageReaction', function (data) {
+			updateMessageReactionCount(data, 'add');
+		});
+
+		socket.off('event:reactions.removeMessageReaction').on('event:reactions.removeMessageReaction', function (data) {
+			updateMessageReactionCount(data, 'remove');
+		});
+	}
+
+	function updatePostReactionCount(data, type) {
 		var maxReactionsReached = parseInt(data.totalReactions, 10) > config.maximumReactions;
 		$('[component="post/reaction/add"][data-pid="' + data.pid + '"]').toggleClass('max-reactions', maxReactionsReached);
 
@@ -83,14 +148,14 @@ $(document).ready(function () {
 			reactionEl.tooltip('dispose');
 			reactionEl.remove();
 		}
-
+		const isSelf = parseInt(data.uid, 10) === app.user.uid;
 		if (reactionEl.length === 0) {
 			app.parseAndTranslate('partials/topic/reaction', {
 				pid: data.pid,
 				reaction: data.reaction,
 				reactionCount: data.reactionCount,
 				usernames: data.usernames,
-				reacted: (parseInt(data.uid, 10) === app.user.uid),
+				reacted: isSelf && type === 'add',
 				reactionImage: data.reactionImage,
 			}, function (html) {
 				$('[component="post/reactions"][data-pid="' + data.pid + '"]').append(html);
@@ -99,20 +164,52 @@ $(document).ready(function () {
 			reactionEl.find('.reaction-emoji-count').attr('data-count', data.reactionCount);
 			reactionEl.attr('data-bs-original-title', data.usernames);
 			reactionEl.attr('aria-label', data.usernames);
-			reactionEl.toggleClass('reacted', !(parseInt(data.uid, 10) === app.user.uid));
+			if (isSelf) {
+				reactionEl.toggleClass('reacted', type === 'add');
+			}
 		}
-		createReactionTooltips();
 	}
 
-	function createReactionTooltips() {
-		$('.reaction, .reaction-add').each(function () {
-			if (!utils.isTouchDevice()) {
-				$(this).tooltip('dispose');
-				$(this).tooltip({
-					placement: 'top',
-					title: $(this).attr('title') || $(this).attr('data-bs-original-title'),
-				});
+	function updateMessageReactionCount(data, type) {
+		var maxReactionsReached = parseInt(data.totalReactions, 10) > config.maximumReactionsPerMessage;
+		$('[component="message/reaction/add"][data-mid="' + data.mid + '"]').toggleClass('max-reactions', maxReactionsReached);
+
+		var reactionEl = $(`[component="message/reaction"][data-mid="${data.mid}"][data-reaction="${data.reaction}"]`);
+
+		if (parseInt(data.reactionCount, 10) === 0) {
+			reactionEl.tooltip('dispose');
+			reactionEl.remove();
+		}
+		const isSelf = (parseInt(data.uid, 10) === app.user.uid);
+		if (reactionEl.length === 0) {
+			app.parseAndTranslate('partials/chats/reaction', {
+				mid: data.mid,
+				reaction: data.reaction,
+				reactionCount: data.reactionCount,
+				usernames: data.usernames,
+				reacted: isSelf && type === 'add',
+				reactionImage: data.reactionImage,
+			}, function (html) {
+				$('[component="message/reactions"][data-mid="' + data.mid + '"]').append(html);
+			});
+		} else {
+			reactionEl.find('.reaction-emoji-count').attr('data-count', data.reactionCount);
+			reactionEl.attr('data-bs-original-title', data.usernames);
+			reactionEl.attr('aria-label', data.usernames);
+			if (isSelf) {
+				reactionEl.toggleClass('reacted', type === 'add');
 			}
-		});
+		}
+	}
+
+	function createReactionTooltips() {
+		if (!utils.isTouchDevice()) {
+			$('#content').tooltip({
+				selector: '.reaction',
+				placement: 'top',
+				container: '#content',
+				animation: false,
+			});
+		}
 	}
 });

package/scss/reactions.scss

@@ -1,6 +1,6 @@
 .reactions {
 	.reaction {
-		border: 1px solid #9ddefe;
+		border: 1px solid var(--bs-primary-bg-subtle);
 		display: inline-block;
 		border-radius: 4px;
 		padding: 2px 4px;
@@ -10,7 +10,7 @@
 			height: 18px;
 		}
 		&.reacted {
-			border: 1px solid #039BE5;
+			border: 1px solid var(--bs-primary);
 		}
 		.reaction-emoji-count {
 			margin-left: 5px;

package/templates/admin/plugins/reactions.tpl

@@ -1,33 +1,52 @@
-<form role="form" class="reactions-settings">
-	<div class="row">
-		<div class="col-sm-2 col-xs-12 settings-header">[[reactions:settings.title]]</div>
-		<div class="col-sm-10 col-xs-12">
-			<div class="form-group">
-				<label>[[reactions:settings.max-reactions-per-post]]</label>
-				<input type="number" min="0" class="form-control" id="maximumReactions" name="maximumReactions">
 
-				<label>[[reactions:settings.max-reactions-per-user-per-post]]</label>
-				<input type="number" min="0" class="form-control" id="maximumReactionsPerUserPerPost" name="maximumReactionsPerUserPerPost">
-				<p class="help-text">
-					[[reactions:settings.max-reactions-per-user-per-post-help]]
-				</p>
-			</div>
-		</div>
-	</div>
+<div class="acp-page-container">
+	<!-- IMPORT admin/partials/settings/header.tpl -->
 
-	<div class="row mt-3">
-		<div class="col-sm-2 col-xs-12 settings-header">[[reactions:settings.reaction-reputations]]</div>
-		<div class="col-sm-10 col-xs-12">
-			<p class="help-text">
-				[[reactions:settings.reaction-reputations-help]]
-			</p>
-			<div class="form-group" data-type="sorted-list" data-sorted-list="reaction-reputations" data-item-template="admin/plugins/reactions/partials/sorted-list/emoji-item" data-form-template="admin/plugins/reactions/partials/sorted-list/emoji-form">
-				<ul data-type="list" class="list-group"></ul>
-				<button type="button" data-type="add" class="btn btn-info mt-2">[[reactions:settings.reaction-reputations.add]]</button>
-			</div>
-		</div>
-	</div>
-</form>
+	<div class="row m-0">
+		<div id="spy-container" class="col-12 col-md-8 px-0 mb-4" tabindex="0">
+			<form role="form" class="reactions-settings">
+				<div class="mb-3">
+					<h5 class="fw-bold tracking-tight settings-header">[[reactions:settings.title]]</h5>
+					<div class="mb-3">
+						<label class="form-label">[[reactions:settings.max-reactions-per-post]]</label>
+						<input type="number" min="0" class="form-control" id="maximumReactions" name="maximumReactions">
+
+					</div>
+					<div class="mb-3">
+						<label class="form-label">[[reactions:settings.max-reactions-per-user-per-post]]</label>
+						<input type="number" min="0" class="form-control" id="maximumReactionsPerUserPerPost" name="maximumReactionsPerUserPerPost">
+						<p class="form-text">
+							[[reactions:settings.max-reactions-per-user-per-post-help]]
+						</p>
+					</div>
+					<div class="mb-3">
+						<label class="form-label">[[reactions:settings.max-reactions-per-message]]</label>
+						<input type="number" min="0" class="form-control" id="maximumReactionsPerMessage" name="maximumReactionsPerMessage">
 
+					</div>
+					<div class="">
+						<label class="form-label">[[reactions:settings.max-reactions-per-user-per-message]]</label>
+						<input type="number" min="0" class="form-control" id="maximumReactionsPerUserPerMessage" name="maximumReactionsPerUserPerMessage">
+						<p class="form-text">
+							[[reactions:settings.max-reactions-per-user-per-message-help]]
+						</p>
+					</div>
+				</div>
 
-<!-- IMPORT admin/partials/save_button.tpl -->
+				<div class="mb-3">
+					<h5 class="fw-bold tracking-tight settings-header">[[reactions:settings.reaction-reputations]]</h5>
+
+					<p class="form-text">
+						[[reactions:settings.reaction-reputations-help]]
+					</p>
+					<div class="form-group" data-type="sorted-list" data-sorted-list="reaction-reputations" data-item-template="admin/plugins/reactions/partials/sorted-list/emoji-item" data-form-template="admin/plugins/reactions/partials/sorted-list/emoji-form">
+						<ul data-type="list" class="list-group"></ul>
+						<button type="button" data-type="add" class="btn btn-info mt-2">[[reactions:settings.reaction-reputations.add]]</button>
+					</div>
+				</div>
+			</form>
+		</div>
+
+		<!-- IMPORT admin/partials/settings/toc.tpl -->
+	</div>
+</div>

package/templates/partials/chats/add-reaction.tpl

@@ -0,0 +1,4 @@
+<button class="reaction-add btn btn-sm btn-link {{{ if ./maxReactionsReached }}}max-reactions{{{ end }}}" component="message/reaction/add" data-mid="{./mid}" title="[[reactions:add-reaction]]">
+    <i class="fa fa-face-smile"></i>
+</button>
+

package/templates/partials/chats/reaction.tpl

@@ -0,0 +1,4 @@
+<span class="reaction mb-2 {{{ if ./reacted }}}reacted{{{ end }}}" component="message/reaction" data-mid="{./mid}" data-reaction="{./reaction}" title="{./usernames}" data-bs-toggle="tooltip">
+	{./reactionImage}
+	<small class="reaction-emoji-count" data-count="{./reactionCount}"></small>
+</span>

package/templates/partials/chats/reactions.tpl

@@ -0,0 +1,5 @@
+<div class="reactions {{{ if ./deleted}}}hidden{{{ end }}}" component="message/reactions" data-mid="{./mid}">
+	{{{ each ./reactions }}}
+	<!-- IMPORT partials/chats/reaction.tpl -->
+	{{{ end }}}
+</div>

package/templates/partials/topic/reactions.tpl

@@ -1,6 +1,6 @@
 <span class="reactions" component="post/reactions" data-pid="{./pid}">
   <span class="reaction-add d-inline-block px-2 mx-1 btn-ghost-sm {{{ if ./maxReactionsReached }}}max-reactions{{{ end }}}" component="post/reaction/add" data-pid="{./pid}" title="[[reactions:add-reaction]]">
-    <i class="fa fa-plus-square-o"></i>
+    <i class="fa fa-face-smile text-primary"></i>
   </span>
   {{{ each ./reactions }}}
     <!-- IMPORT partials/topic/reaction.tpl -->