[NEW] Reply preview

packages/rocketchat-lib/client/MessageAction.js

@@ -103,25 +103,10 @@ Meteor.startup(function() {
 		action() {
 			const message = this._arguments[1];
 			const {input} = chatMessages[message.rid];
-			const url = RocketChat.MessageAction.getPermaLink(message._id);
-			const roomInfo = RocketChat.models.Rooms.findOne(message.rid, { fields: { t: 1 } });
-			let text = `[ ](${ url }) `;
-			let inputValue = '';
-
-			if (roomInfo.t !== 'd' && message.u.username !== Meteor.user().username) {
-				text += `@${ message.u.username } `;
-			}
-
-			if (input.value && !input.value.endsWith(' ')) {
-				inputValue += ' ';
-			}
-			inputValue += text;
-
 			$(input)
 				.focus()
-				.val(inputValue)
-				.trigger('change')
-				.trigger('input');
+				.data('reply', message)
+				.trigger('dataChange');
 		},
 		condition(message) {
 			if (RocketChat.models.Subscriptions.findOne({rid: message.rid}) == null) {

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

@@ -2608,6 +2608,44 @@
 	position: relative;
 }
 
+.rc-old .rc-message-box .reply-preview {
+	display: flex;
+	position: relative;
+	background-color:#fff;
+	padding-left: 15px;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.rc-old .rc-message-box .reply-preview-with-popup {
+	border-top-left-radius: 0;
+	border-top-right-radius: 0;
+	border-bottom-left-radius: 5px;
+	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-old .reply-preview .mention-link.mention-link-all {
+    color: #fff;
+}
+
+.rc-old .reply-preview .mention-link.mention-link-me {
+    color: #fff;
+}
+
+.rc-old .message-popup.popup-with-reply-preview {
+	border-top-left-radius: 5px;
+	border-top-right-radius: 5px;
+	border-bottom-left-radius: 0;
+	border-bottom-right-radius: 0;
+}
+
 .rc-old .message-popup {
 	position: absolute;
 	z-index: 101;

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

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

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

@@ -273,6 +273,9 @@ Template.messageBox.helpers({
 	isEmojiEnable() {
 		return RocketChat.getUserPreference(Meteor.user(), 'useEmojis');
 	},
+	dataReply() {
+		return Template.instance().dataReply.get();
+	},
 	isAudioMessageAllowed() {
 		return RocketChat.settings.get('FileUpload_Enabled') && RocketChat.settings.get('Message_AudioRecorderEnabled') && (!RocketChat.settings.get('FileUpload_MediaTypeWhiteList'));
 	}
@@ -377,6 +380,13 @@ Template.messageBox.events({
 			return input.focus();
 		});
 	},
+	'click .cancel-reply'(event, instance) {
+		const input = instance.find('.js-input-message');
+		$(input)
+			.focus()
+			.removeData('reply')
+			.trigger('dataChange');
+	},
 	'keyup .js-input-message'(event, instance) {
 		chatMessages[this._id].keyup(this._id, event, instance);
 		return instance.isMessageFieldEmpty.set(chatMessages[this._id].isEmpty());
@@ -631,6 +641,12 @@ Template.messageBox.events({
 });
 
 Template.messageBox.onRendered(function() {
+	const input = this.find('.js-input-message'); //mssg box
+	const self = this;
+	$(input).on('dataChange', () => {
+		const reply = $(input).data('reply');
+		self.dataReply.set(reply);
+	});
 	chatMessages[RocketChat.openedRoom] = chatMessages[RocketChat.openedRoom] || new ChatMessages;
 	chatMessages[RocketChat.openedRoom].input = this.$('.js-input-message').autogrow({
 		animate: true,
@@ -643,6 +659,7 @@ Template.messageBox.onRendered(function() {
 });
 
 Template.messageBox.onCreated(function() {
+	this.dataReply = new ReactiveVar(''); //if user is replying to a mssg, this will contain data of the mssg being replied to
 	this.isMessageFieldEmpty = new ReactiveVar(true);
 	this.sendIcon = new ReactiveVar(false);
 });

packages/rocketchat-ui-message/client/popup/messagePopup.html

@@ -8,7 +8,7 @@
 			</ul>
 		{{else}}
 			<div class="message-popup-position">
-				<div class="message-popup content-background-color {{cls}}">
+				<div class="message-popup content-background-color {{cls}}" id="popup">
 					{{#if title}}
 						<div class="message-popup-title secondary-background-color border-component-color">
 							{{title}}

packages/rocketchat-ui-message/client/popup/messagePopup.js

@@ -238,6 +238,22 @@ Template.messagePopup.onRendered(function() {
 	if (this.input == null) {
 		console.error('Input not found for popup');
 	}
+	const self = this;
+	self.autorun(() => {
+		const open = self.open.get();
+		if ($('.reply-preview').length) {
+			if (open === true) {
+				$('.reply-preview').addClass('reply-preview-with-popup');
+				setTimeout(() => {
+					$('#popup').addClass('popup-with-reply-preview');
+				}, 50);
+			}
+		}
+		if (open === false) {
+			$('.reply-preview').removeClass('reply-preview-with-popup');
+			$('#popup').removeClass('popup-with-reply-preview');
+		}
+	});
 	$(this.input).on('keyup', this.onInputKeyup.bind(this));
 	$(this.input).on('keydown', this.onInputKeydown.bind(this));
 	$(this.input).on('focus', this.onFocus.bind(this));

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

@@ -182,7 +182,21 @@ this.ChatMessages = class ChatMessages {
 			readMessage.readNow();
 			$('.message.first-unread').removeClass('first-unread');
 
-			const msg = input.value;
+			let msg = '';
+			const reply = $(input).data('reply');
+			if (reply!==undefined) {
+				const url = RocketChat.MessageAction.getPermaLink(reply._id);
+				msg = `[ ](${ url }) `;
+				const roomInfo = RocketChat.models.Rooms.findOne(reply.rid, { fields: { t: 1 } });
+				if (roomInfo.t !== 'd' && reply.u.username !== Meteor.user().username) {
+					msg += `@${ reply.u.username } `;
+				}
+			}
+			msg += input.value;
+			$(input)
+				.removeData('reply')
+				.trigger('dataChange');
+
 			const msgObject = { _id: Random.id(), rid, msg};
 
 			if (msg.slice(0, 2) === '+:') {