@nodebb/nodebb-plugin-reactions 2.0.1 → 2.1.1

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

@@ -5,9 +5,14 @@
   "error.maximum-reached": "Maximum reactions reached",
   "error.maximum-per-user-per-post-reached": "Maximum reactions per user per post reached",
   "settings.title": "Reactions plugin settings",
+  "settings.enable-post-reactions": "Enable post reactions",
   "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.enable-message-reactions": "Enable message reactions",
+  "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

@@ -1,9 +1,10 @@
 'use strict';
 
-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 privileges = require.main.require('./src/privileges');
 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,30 @@ 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;
+		config.enablePostReactions = settings.enablePostReactions === 'on';
+		config.enableMessageReactions = settings.enableMessageReactions === 'on';
 	} catch (e) {
 		console.error(e);
 	}
 	return config;
 };
 
-ReactionsPlugin.getReactions = async function (data) {
+ReactionsPlugin.filterSettingsGet = async function (hookData) {
+	if (hookData.plugin === 'reactions') {
+		const { values } = hookData;
+		if (!values.hasOwnProperty('enablePostReactions')) {
+			values.enablePostReactions = 'on';
+		}
+		if (!values.hasOwnProperty('enableMessageReactions')) {
+			values.enableMessageReactions = 'on';
+		}
+	}
+	return hookData;
+};
+
+ReactionsPlugin.getPostReactions = async function (data) {
 	if (data.uid === 0) {
 		return data;
 	}
@@ -79,42 +98,80 @@ ReactionsPlugin.getReactions = async function (data) {
 			}
 		}
 
-		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);
-				}
-			}
-		}
+		const reactionSetToUsersMap = await getReactionSetsUidsMap(reactionSets);
 
 		for (const post of data.posts) {
 			post.maxReactionsReached = pidToIsMaxReactionsReachedMap.get(post.pid);
 			post.reactions = [];
 
-			if (pidToReactionsMap.has(post.pid)) {
-				for (const reaction of pidToReactionsMap.get(post.pid)) {
+			const reactions = pidToReactionsMap.get(post.pid);
+			if (reactions) {
+				for (const reaction of reactions) {
 					const reactionSet = `pid:${post.pid}: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);
-
+					const uids = reactionSetToUsersMap.get(reactionSet);
+					if (Array.isArray(uids)) {
 						post.reactions.push({
 							pid: post.pid,
-							reacted: reactedUids.includes(data.uid),
+							reacted: uids.includes(String(data.uid)),
+							reaction,
+							reactionImage: parse(reaction),
+							reactionCount: uids.length,
+						});
+					}
+				}
+			}
+		}
+	} catch (e) {
+		console.error(e);
+	}
+	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 = await getReactionSetsUidsMap(reactionSets);
+
+		for (const msg of data.messages) {
+			msg.maxReactionsReached = midToIsMaxReactionsReachedMap.get(msg.mid);
+			msg.reactions = [];
+			const reactions = midToReactionsMap.get(msg.mid);
+			if (reactions) {
+				for (const reaction of reactions) {
+					const reactionSet = `mid:${msg.mid}:reaction:${reaction}`;
+					const uids = reactionSetToUsersMap.get(reactionSet);
+					if (Array.isArray(uids)) {
+						msg.reactions.push({
+							mid: msg.mid,
+							reacted: uids.includes(String(data.uid)),
 							reaction,
-							usernames: reactedUsernames,
 							reactionImage: parse(reaction),
-							reactionCount,
+							reactionCount: uids.length,
 						});
 					}
 				}
@@ -126,6 +183,22 @@ ReactionsPlugin.getReactions = async function (data) {
 	return data;
 };
 
+
+async function getReactionSetsUidsMap(reactionSets) {
+	const reactionSetToUsersMap = new Map(); // reactionSet -> uids
+	if (reactionSets.length > 0) {
+		const uidsForReactions = await db.getSetsMembers(reactionSets);
+
+		for (let i = 0, len = reactionSets.length; i < len; i++) {
+			const uidsForReaction = uidsForReactions[i];
+			if (uidsForReaction && uidsForReaction.length > 0) {
+				reactionSetToUsersMap.set(reactionSets[i], uidsForReaction);
+			}
+		}
+	}
+	return reactionSetToUsersMap;
+}
+
 ReactionsPlugin.onReply = async function (data) {
 	if (data.uid !== 0) {
 		data.reactions = [];
@@ -148,17 +221,13 @@ 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([
+		const [reactionCount, totalReactions] = await Promise.all([
 			db.setCount(`pid:${data.pid}:reaction:${data.reaction}`),
 			db.setCount(`pid:${data.pid}:reactions`),
-			db.getSetMembers(`pid:${data.pid}: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(`pid:${data.pid}:reactions`, data.reaction);
 		}
@@ -169,7 +238,30 @@ async function sendEvent(data, eventName) {
 			reaction: data.reaction,
 			reactionCount,
 			totalReactions,
-			usernames,
+			reactionImage: parse(data.reaction),
+		});
+	} catch (e) {
+		console.error(e);
+	}
+}
+
+async function sendMessageEvent(data, eventName) {
+	try {
+		const [reactionCount, totalReactions] = await Promise.all([
+			db.setCount(`mid:${data.mid}:reaction:${data.reaction}`),
+			db.setCount(`mid:${data.mid}:reactions`),
+		]);
+
+		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,
 			reactionImage: parse(data.reaction),
 		});
 	} catch (e) {
@@ -201,23 +293,30 @@ SocketPlugins.reactions = {
 			throw new Error('[[reactions:error.invalid-reaction]]');
 		}
 
-		data.uid = socket.uid;
-
 		const settings = await meta.settings.get('reactions');
+		if (settings.enablePostReactions === 'off') {
+			throw new Error('[[error:post-reactions-disabled]]');
+		}
 		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 +326,6 @@ SocketPlugins.reactions = {
 				}
 			}
 		}
-		
 
 		await Promise.all([
 			db.setAdd(`pid:${data.pid}:reactions`, data.reaction),
@@ -238,7 +336,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 +347,156 @@ SocketPlugins.reactions = {
 			throw new Error('[[reactions:error.invalid-reaction]]');
 		}
 
+		const [settings, tid, hasReacted, reactionReputation] = await Promise.all([
+			meta.settings.get('reactions'),
+			posts.getPostField(data.pid, 'tid'),
+			db.isSetMember(`pid:${data.pid}:reaction:${data.reaction}`, socket.uid),
+			getReactionReputation(data.reaction),
+		]);
+		if (settings.enablePostReactions === 'off') {
+			throw new Error('[[error:post-reactions-disabled]]');
+		}
+		if (!tid) {
+			throw new Error('[[error:no-post]]');
+		}
 		data.uid = socket.uid;
+		data.tid = tid;
+
+		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);
+		}
 
-		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);
+		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');
+		if (settings.enableMessageReactions === 'off') {
+			throw new Error('[[error:post-reactions-disabled]]');
+		}
+		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})`);
 			}
 
-			const reactionCount = await db.setCount(`pid:${data.pid}:reaction:${data.reaction}`);
-			if (reactionCount === 0) {
-				await db.setRemove(`pid:${data.pid}:reactions`, data.reaction);
+			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})`);
+				}
 			}
-			if (hasReacted && reactionReputation > 0) {
-				await giveOwnerReactionReputation(-reactionReputation, data.pid);
+		}
+
+		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 [settings, roomId, hasReacted] = await Promise.all([
+			meta.settings.get('reactions'),
+			messaging.getMessageField(data.mid, 'roomId'),
+			db.isSetMember(`mid:${data.mid}:reaction:${data.reaction}`, socket.uid),
+		]);
+		if (settings.enableMessageReactions === 'off') {
+			throw new Error('[[error:post-reactions-disabled]]');
+		}
+		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');
+	},
+	getReactionUsernames: 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]]');
+		}
+		let set = '';
+		if (data.type === 'post') {
+			if (!await privileges.posts.can('topics:read', data.pid, socket.uid)) {
+				throw new Error('[[error:not-allowed]]');
 			}
-			await sendEvent(data, 'event:reactions.removePostReaction');
-		} catch (e) {
-			console.error(e);
+			set = `pid:${data.pid}:reaction:${data.reaction}`;
+		} else if (data.type === 'message') {
+			const roomId = await messaging.getMessageField(data.mid, 'roomId');
+			if (!await messaging.canViewMessage(data.mid, roomId, socket.uid)) {
+				throw new Error('[[error:not-allowed]]');
+			}
+			set = `mid:${data.mid}:reaction:${data.reaction}`;
+		} else {
+			throw new Error('[[error:invalid-data]]');
+		}
+		let uids = await db.getSetMembers(set);
+		const cutoff = 6;
+
+		let otherCount = 0;
+		if (uids.length > cutoff) {
+			otherCount = uids.length - (cutoff - 1);
+			uids = uids.slice(0, cutoff - 1);
 		}
+
+		const usernames = await user.getUsernamesByUids(uids);
+		return {
+			cutoff: cutoff,
+			otherCount,
+			usernames,
+		};
 	},
 };
 
-
-module.exports = ReactionsPlugin;

package/package.json

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

package/plugin.json

@@ -26,7 +26,13 @@
             "hook": "filter:config.get", "method": "getPluginConfig"
         },
         {
-            "hook": "filter:post.getPosts", "method": "getReactions"
+            "hook": "filter:settings.get", "method": "filterSettingsGet"
+        },
+        {
+            "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,23 @@
 'use strict';
 
 $(document).ready(function () {
-	setupPostReactions();
-
-	function setupPostReactions() {
-		require(['hooks', 'alerts'], function (hooks, alerts) {
+	setupReactions();
+	let alerts;
+	let mouseOverReactionEl;
+	let tooltipTimeoutId = 0;
+	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();
+				}
+			});
+			// switchChat uses action:chat.loaded and not action:ajaxify.end
+			hooks.on('action:chat.loaded', function () {
+				if (ajaxify.data.template.chats && ajaxify.data.roomId) {
+					setupMessageReactions();
 				}
 			});
 		});
@@ -61,19 +29,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 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 updateReactionCount(data) {
+	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 +154,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,18 +170,109 @@ $(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');
+			}
+		}
+	}
+
+	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,
+				reacted: isSelf && type === 'add',
+				reactionImage: data.reactionImage,
+			}, function (html) {
+				require(['forum/chats/messages'], function (messages) {
+					const reactionEl = $('[component="message/reactions"][data-mid="' + data.mid + '"]');
+					const chatContentEl = reactionEl.parents('[component="chat/message/content"]');
+					const isAtBottom = messages.isAtBottom(chatContentEl);
+					reactionEl.append(html);
+					if (isAtBottom || isSelf) {
+						messages.scrollToBottom(chatContentEl);
+					}
+				});
+			});
+		} 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');
+			}
 		}
-		createReactionTooltips();
 	}
 
 	function createReactionTooltips() {
-		$('.reaction, .reaction-add').each(function () {
-			if (!utils.isTouchDevice()) {
-				$(this).tooltip('dispose');
-				$(this).tooltip({
+		require(['bootstrap', 'translator'], function (bootstrap, translator) {
+			async function createTooltip(data) {
+				if (!mouseOverReactionEl || !mouseOverReactionEl.length) {
+					return;
+				}
+				const el = mouseOverReactionEl;
+				let usernames = data.usernames.filter(name => name !== '[[global:former_user]]');
+				if (!usernames.length) {
+					return;
+				}
+				if (usernames.length + data.otherCount > data.cutoff) {
+					usernames = usernames.join(', ').replace(/,/g, '|');
+					usernames = await translator.translate('[[topic:users_and_others, ' + usernames + ', ' + data.otherCount + ']]');
+					usernames = usernames.replace(/\|/g, ',');
+				} else {
+					usernames = usernames.join(', ');
+				}
+
+				el.attr('title', usernames);
+				(new bootstrap.Tooltip(el, {
+					container: '#content',
+					html: true,
 					placement: 'top',
-					title: $(this).attr('title') || $(this).attr('data-bs-original-title'),
+					animation: false,
+				})).show();
+			}
+
+			if (!utils.isTouchDevice()) {
+				$('#content').on('mouseenter', '.reaction', function () {
+					const $this = $(this);
+					mouseOverReactionEl = $this;
+					const mid = $this.attr('data-mid');
+					const pid = $this.attr('data-pid');
+					tooltipTimeoutId = setTimeout(async () => {
+						if (mouseOverReactionEl && mouseOverReactionEl.length) {
+							const d = await socket.emit('plugins.reactions.getReactionUsernames', {
+								type: pid ? 'post' : 'message',
+								mid: mid,
+								pid: pid,
+								reaction: $this.attr('data-reaction'),
+							});
+							createTooltip(d);
+						}
+					}, 200);
+				});
+				$('#content').on('mouseleave', '.reaction', function () {
+					if (tooltipTimeoutId) {
+						clearTimeout(tooltipTimeoutId);
+						tooltipTimeoutId = 0;
+					}
+					mouseOverReactionEl = null;
+					const $this = $(this);
+					const tooltip = bootstrap.Tooltip.getInstance(this);
+					if (tooltip) {
+						tooltip.dispose();
+						$this.attr('title', '');
+					}
 				});
 			}
 		});

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,60 @@
-<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="form-check form-switch mb-3">
+						<input id="enablePostReactions" name="enablePostReactions" type="checkbox" class="form-check-input">
+						<label for="enablePostReactions" class="form-check-label">[[reactions:settings.enable-post-reactions]]</label>
+					</div>
+					<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>
+					<hr/>
+					<div class="form-check form-switch mb-3">
+						<input id="enableMessageReactions" name="enableMessageReactions" type="checkbox" class="form-check-input">
+						<label for="enableMessageReactions" class="form-check-label">[[reactions:settings.enable-message-reactions]]</label>
+					</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,6 @@
+{{{ if config.enableMessageReactions }}}
+<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>
+{{{ end }}}
+

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}">
+	{./reactionImage}
+	<small class="reaction-emoji-count" data-count="{./reactionCount}"></small>
+</span>

package/templates/partials/chats/reactions.tpl

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

package/templates/partials/topic/reaction.tpl

@@ -1,4 +1,4 @@
-<span class="reaction {{{ if ./reacted }}}reacted{{{ end }}}" component="post/reaction" data-pid="{./pid}" data-reaction="{./reaction}" title="{./usernames}">
+<span class="reaction {{{ if ./reacted }}}reacted{{{ end }}}" component="post/reaction" data-pid="{./pid}" data-reaction="{./reaction}">
 	{./reactionImage}
 	<small class="reaction-emoji-count" data-count="{./reactionCount}"></small>
 </span>

package/templates/partials/topic/reactions.tpl

@@ -1,8 +1,10 @@
+{{{ if config.enablePostReactions }}}
 <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 -->
   {{{ end }}}
-</span>
+</span>
+{{{ end }}}