[NEW] reply with a file (#12095)

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

@@ -8,7 +8,11 @@
 				{{> messagePopupSlashCommandPreview popupConfig}}
 
 				{{#if replyMessageData}}
-					{{> messageBoxReplyPreview input=input replyMessageData=replyMessageData}}
+					<div class="reply-preview__wrap message-popup">
+					{{#each replyMessageData}}
+						{{> messageBoxReplyPreview input=input replyMessageData=.}}
+					{{/each}}
+					</div>
 				{{/if}}
 
 				<label class="rc-message-box__container">

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

@@ -293,16 +293,30 @@ Template.messageBox.events({
 			input.selectionEnd = caretPos + emojiValue.length;
 		});
 	},
-	'focus .js-input-message'() {
+	'focus .js-input-message'(event, instance) {
 		KonchatNotification.removeRoomNotification(this._id);
+		if (chatMessages[this._id]) {
+			chatMessages[this._id].input = instance.find('.js-input-message');
+		}
+	},
+	'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)
+			.data('reply', filtered)
+			.trigger('dataChange');
 	},
 	'keyup .js-input-message'(event, instance) {
 		chatMessages[this._id].keyup(this._id, event, instance);
 		instance.isMessageFieldEmpty.set(chatMessages[this._id].isEmpty());
 	},
 	'paste .js-input-message'(event, instance) {
+		const { $input } = chatMessages[RoomManager.openedRoom];
+		const [input] = $input;
 		setTimeout(() => {
-			const { input } = chatMessages[RoomManager.openedRoom];
 			typeof input.updateAutogrow === 'function' && input.updateAutogrow();
 		}, 50);
 
@@ -320,7 +334,7 @@ Template.messageBox.events({
 
 		if (files.length) {
 			event.preventDefault();
-			fileUpload(files);
+			fileUpload(files, input);
 			return;
 		}
 

packages/rocketchat-ui-message/client/startup/messageBoxActions.js

@@ -49,7 +49,7 @@ messageBox.actions.add('Add_files_from', 'Computer', {
 				};
 			});
 
-			fileUpload(filesToUpload);
+			fileUpload(filesToUpload, $('.rc-message-box__textarea.js-input-message'));
 			$input.remove();
 		});
 

packages/rocketchat-ui-utils/client/lib/MessageAction.js

@@ -32,6 +32,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;
+};
+
 export const MessageAction = new class {
 	/*
   	config expects the following keys (only id is mandatory):
@@ -147,10 +156,14 @@ Meteor.startup(async 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) {
@@ -300,10 +313,16 @@ Meteor.startup(async 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-ui/client/lib/chatMessages.js

@@ -29,6 +29,36 @@ Meteor.startup(() => {
 	});
 });
 
+export const getPermaLinks = async(replies) => {
+	const promises = replies.map(async(reply) =>
+		MessageAction.getPermaLink(reply._id)
+	);
+
+	return Promise.all(promises);
+};
+
+export const mountReply = async(msg, input) => {
+	const replies = $(input).data('reply');
+	const mentionUser = $(input).data('mention-user') || false;
+
+	if (replies && replies.length) {
+		const permalinks = await getPermaLinks(replies);
+
+		replies.forEach(async(reply, replyIndex) => {
+			if (reply !== undefined) {
+				msg += `[ ](${ permalinks[replyIndex] }) `;
+
+				const roomInfo = Rooms.findOne(reply.rid, { fields: { t: 1 } });
+				if (roomInfo.t !== 'd' && reply.u.username !== Meteor.user().username && mentionUser) {
+					msg += `@${ reply.u.username } `;
+				}
+			}
+		});
+	}
+
+	return msg;
+};
+
 export const ChatMessages = class ChatMessages {
 	constructor() {
 
@@ -214,16 +244,9 @@ export const ChatMessages = class ChatMessages {
 			$('.message.first-unread').removeClass('first-unread');
 
 			let msg = '';
-			const reply = $(input).data('reply');
-			const mentionUser = $(input).data('mention-user') || false;
 
-			if (reply !== undefined) {
-				msg = `[ ](${ await MessageAction.getPermaLink(reply._id) }) `;
-				const roomInfo = Rooms.findOne(reply.rid, { fields: { t: 1 } });
-				if (roomInfo.t !== 'd' && reply.u.username !== Meteor.user().username && mentionUser) {
-					msg += `@${ reply.u.username } `;
-				}
-			}
+			msg += await mountReply(msg, input);
+
 			msg += input.value;
 			$(input)
 				.removeData('reply')

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

@@ -2,11 +2,14 @@ import { Meteor } from 'meteor/meteor';
 import { Tracker } from 'meteor/tracker';
 import { Session } from 'meteor/session';
 import s from 'underscore.string';
+
+import { mountReply } from './chatMessages';
 import { fileUploadHandler } from 'meteor/rocketchat:file-upload';
 import { Handlebars } from 'meteor/ui';
 import { t, fileUploadIsValidContentType } from 'meteor/rocketchat:utils';
 import { modal } from 'meteor/rocketchat:ui-utils';
 
+
 const readAsDataURL = (file, callback) => {
 	const reader = new FileReader();
 	reader.onload = (e) => callback(e.target.result, file);
@@ -136,11 +139,15 @@ const getUploadPreview = async(file, preview) => {
 	return getGenericUploadPreview(file, preview);
 };
 
-export const fileUpload = async(files) => {
+export const fileUpload = async(files, input) => {
 	files = [].concat(files);
 
 	const roomId = Session.get('openedRoom');
 
+	let msg = '';
+
+	msg += await mountReply(msg, input);
+
 	const uploadNextFile = () => {
 		const file = files.pop();
 		if (!file) {
@@ -226,7 +233,11 @@ export const fileUpload = async(files) => {
 					return;
 				}
 
-				Meteor.call('sendFileMessage', roomId, storage, file, () => {
+				Meteor.call('sendFileMessage', roomId, storage, file, { msg }, () => {
+					$(input)
+						.removeData('reply')
+						.trigger('dataChange');
+
 					Meteor.setTimeout(() => {
 						const uploads = Session.get('uploading') || [];
 						Session.set('uploading', uploads.filter((u) => u.id !== upload.id));

packages/rocketchat-ui/client/views/app/room.js

@@ -8,6 +8,7 @@ import { Session } from 'meteor/session';
 import { Template } from 'meteor/templating';
 import { t, roomTypes, getUserPreference, handleError } from 'meteor/rocketchat:utils';
 import { WebRTC } from 'meteor/rocketchat:webrtc';
+
 import { ChatSubscription, ChatMessage, RoomRoles, Users, Subscriptions, Rooms } from 'meteor/rocketchat:models';
 import {
 	fireGlobalEvent,
@@ -781,7 +782,9 @@ Template.room.events({
 			});
 		}
 
-		fileUpload(filesToUpload);
+		const { input } = chatMessages[RoomManager.openedRoom];
+
+		fileUpload(filesToUpload, input);
 	},
 
 	'load img'(e, template) {

packages/rocketchat_theme/client/imports/general/base_old.css

@@ -2311,6 +2311,10 @@ rc-old select,
 	line-height: unset;
 }
 
+.rc-old .rc-message-box .reply-preview__wrap {
+	position: relative;
+}
+
 .rc-old .rc-message-box .reply-preview {
 
 	position: relative;
@@ -2335,17 +2339,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;
 }