[NEW] Reply/quote multiple messages (#12171)

* Allowing quote multiple messages. Need to fix: removing messages from array when cancelling/after send message

* Using messages array from the html data attribute instead creating a reactive variable

* Avoiding to have the same message to be quoted multiple times

* Removing debug code

* fix style reply messages

packages/rocketchat-lib/client/MessageAction.js

@@ -23,6 +23,15 @@ const success = function success(fn) {
 	};
 };
 
+const addMessageToList = (messagesList, message) => {
+	// checks if the message is not already on the list
+	if (!messagesList.find(({ _id }) => _id === message._id)) {
+		messagesList.push(message);
+	}
+
+	return messagesList;
+};
+
 RocketChat.MessageAction = new class {
 	/*
   	config expects the following keys (only id is mandatory):
@@ -133,10 +142,14 @@ Meteor.startup(function() {
 		action() {
 			const message = this._arguments[1];
 			const { input } = chatMessages[message.rid];
+			const $input = $(input);
+
+			const messages = addMessageToList($input.data('reply') || [], message, input);
+
 			$(input)
 				.focus()
 				.data('mention-user', true)
-				.data('reply', message)
+				.data('reply', messages)
 				.trigger('dataChange');
 		},
 		condition(message) {
@@ -294,10 +307,16 @@ Meteor.startup(function() {
 		action() {
 			const message = this._arguments[1];
 			const { input } = chatMessages[message.rid];
-			$(input)
+			const $input = $(input);
+
+			let messages = $input.data('reply') || [];
+
+			messages = addMessageToList(messages, message, input);
+
+			$input
 				.focus()
 				.data('mention-user', false)
-				.data('reply', message)
+				.data('reply', messages)
 				.trigger('dataChange');
 		},
 		condition(message) {

packages/rocketchat-theme/client/imports/general/base_old.css

@@ -2673,6 +2673,11 @@ rc-old select,
 	line-height: unset;
 }
 
+.rc-old .rc-message-box .reply-preview__wrap {
+	position: relative;
+	bottom: 10px;
+}
+
 .rc-old .rc-message-box .reply-preview {
 
 	position: relative;
@@ -2697,17 +2702,35 @@ rc-old select,
 	}
 }
 
+.rc-old .rc-message-box .reply-preview:not(:last-child)::before {
+
+	position: absolute;
+	right: 15px;
+
+	bottom: 0;
+	left: 15px;
+
+	height: 2px;
+
+	content: "";
+
+	background: rgba(31, 35, 41, 0.08);
+}
+
 .rc-old .rc-message-box .reply-preview-with-popup {
 	border-top-left-radius: 0;
 	border-top-right-radius: 0;
 	border-bottom-left-radius: 5px;
-	box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2), 0 1px 1px rgba(0, 0, 0, 0.16);
 }
 
 .rc-old .reply-preview .cancel-reply {
 	padding: 10px;
 }
 
+.rc-message-box__icon.cancel-reply .rc-input__icon-svg--cross {
+	font-size: 1em;
+}
+
 .rc-old .reply-preview .mention-link.mention-link-all {
 	color: #ffffff;
 }

packages/rocketchat-ui-message/client/messageBox.html

@@ -24,16 +24,18 @@
 				{{> messagePopupSlashCommandPreview getPopupConfig}}
 
 				{{#if dataReply}}
-					{{#with dataReply}}
-							<div class="reply-preview message-popup">
-								<div class="message">
-									{{> messageAttachment text=msg author_name=u.username}}
-								</div>
-								<div class="rc-message-box__icon cancel-reply">
-									{{> icon block="rc-input__icon-svg" icon="cross"}}
-								</div>
+					<div class="reply-preview__wrap message-popup">
+					{{#each dataReply}}
+						<div class="reply-preview">
+							<div class="message">
+								{{> messageAttachment text=msg author_name=u.username }}
 							</div>
-					{{/with}}
+							<div class="rc-message-box__icon cancel-reply">
+								{{> icon block="rc-input__icon-svg" icon="cross"}}
+							</div>
+						</div>
+					{{/each}}
+					</div>
 				{{/if}}
 				<label class="rc-message-box__container">
 					<div class="rc-message-box__icon emoji-picker-icon {{#unless isEmojiEnable}}emoji-picker-icon--disabled{{/unless}}">

packages/rocketchat-ui-message/client/messageBox.js

@@ -384,10 +384,13 @@ Template.messageBox.events({
 		});
 	},
 	'click .cancel-reply'(event, instance) {
+
 		const input = instance.find('.js-input-message');
+		const messages = $(input).data('reply');
+		const filtered = messages.filter((msg) => msg._id !== this._id);
+
 		$(input)
-			.focus()
-			.removeData('reply')
+			.data('reply', filtered)
 			.trigger('dataChange');
 	},
 	'keyup .js-input-message'(event, instance) {

packages/rocketchat-ui/client/lib/chatMessages.js

@@ -13,16 +13,33 @@ Meteor.startup(() => {
 	});
 });
 
+export const getPermaLinks = async(replies) => {
+	const promises = replies.map(async(reply) =>
+		RocketChat.MessageAction.getPermaLink(reply._id)
+	);
+
+	const links = Promise.all(promises);
+
+	return links;
+};
+
 export const mountReply = async(msg, input) => {
-	const reply = $(input).data('reply');
+	const replies = $(input).data('reply');
 	const mentionUser = $(input).data('mention-user') || false;
 
-	if (reply !== undefined) {
-		msg = `[ ](${ await RocketChat.MessageAction.getPermaLink(reply._id) }) `;
-		const roomInfo = RocketChat.models.Rooms.findOne(reply.rid, { fields: { t: 1 } });
-		if (roomInfo.t !== 'd' && reply.u.username !== Meteor.user().username && mentionUser) {
-			msg += `@${ reply.u.username } `;
-		}
+	if (replies && replies.length) {
+		const permalinks = await getPermaLinks(replies);
+
+		replies.forEach(async(reply, replyIndex) => {
+			if (reply !== undefined) {
+				msg += `[ ](${ permalinks[replyIndex] }) `;
+
+				const roomInfo = RocketChat.models.Rooms.findOne(reply.rid, { fields: { t: 1 } });
+				if (roomInfo.t !== 'd' && reply.u.username !== Meteor.user().username && mentionUser) {
+					msg += `@${ reply.u.username } `;
+				}
+			}
+		});
 	}
 
 	return msg;