From d0297230ec70788c357dd21dc3eb194cf6dc27e6 Mon Sep 17 00:00:00 2001
From: Utkarsh Barsaiyan <ubarsaiyan@gmail.com>
Date: Sat, 10 Mar 2018 01:23:17 +0530
Subject: [PATCH 1/7] [NEW] Reply Preview

---
 .../rocketchat-lib/client/MessageAction.js    |  4 +++-
 .../client/messageBox.html                    |  7 +++++++
 .../client/messageBox.js                      | 20 +++++++++++++++++++
 3 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/packages/rocketchat-lib/client/MessageAction.js b/packages/rocketchat-lib/client/MessageAction.js
index c473d2de4383..3ad655c1b517 100644
--- a/packages/rocketchat-lib/client/MessageAction.js
+++ b/packages/rocketchat-lib/client/MessageAction.js
@@ -107,7 +107,9 @@ Meteor.startup(function() {
 			const roomInfo = RocketChat.models.Rooms.findOne(message.rid, { fields: { t: 1 } });
 			let text = `[ ](${ url }) `;
 			let inputValue = '';
-
+			$('.rc-message-box__textarea')
+				.data('reply', message)
+				.trigger('dataChange');
 			if (roomInfo.t !== 'd' && message.u.username !== Meteor.user().username) {
 				text += `@${ message.u.username } `;
 			}
diff --git a/packages/rocketchat-ui-message/client/messageBox.html b/packages/rocketchat-ui-message/client/messageBox.html
index 4f4a0039c063..7f16fa9c4f8c 100644
--- a/packages/rocketchat-ui-message/client/messageBox.html
+++ b/packages/rocketchat-ui-message/client/messageBox.html
@@ -21,6 +21,13 @@
 			{{/with}}
 			{{#if allowedToSend}}
 				{{> messagePopupConfig getPopupConfig}}
+				{{#if dataReply}}
+					{{#with dataReply}}
+						<div style="border-top: solid 1px lightgray;">
+							{{> messageAttachment text=msg author_name=u.username}}
+						</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"}}
diff --git a/packages/rocketchat-ui-message/client/messageBox.js b/packages/rocketchat-ui-message/client/messageBox.js
index 27dad816708c..baabea4c8ca1 100644
--- a/packages/rocketchat-ui-message/client/messageBox.js
+++ b/packages/rocketchat-ui-message/client/messageBox.js
@@ -269,6 +269,12 @@ Template.messageBox.helpers({
 	},
 	isEmojiEnable() {
 		return RocketChat.getUserPreference(Meteor.user(), 'useEmojis');
+	},
+	isMessageFieldEmpty() {
+		return Template.instance().isMessageFieldEmpty.get();
+	},
+	dataReply() {
+		return Template.instance().dataReply.get();
 	}
 });
 
@@ -469,6 +475,19 @@ Template.messageBox.events({
 });
 
 Template.messageBox.onRendered(function() {
+	const input = $('.rc-message-box__textarea'); //mssg box
+	const self = this;
+	input.on('dataChange', () => {
+		const reply = input.data('reply');
+		self.dataReply.set(reply);
+	});
+
+	this.autorun(() => {
+		if (self.isMessageFieldEmpty.get()) {
+			self.dataReply.set(undefined);
+		}
+	});
+
 	chatMessages[RocketChat.openedRoom] = chatMessages[RocketChat.openedRoom] || new ChatMessages;
 	chatMessages[RocketChat.openedRoom].input = this.$('.js-input-message').autogrow({
 		animate: true,
@@ -481,6 +500,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);
 });

From 29c05a6814a7477d834daaed8f5ffc7876974f85 Mon Sep 17 00:00:00 2001
From: Utkarsh Barsaiyan <ubarsaiyan@gmail.com>
Date: Sat, 10 Mar 2018 18:08:00 +0530
Subject: [PATCH 2/7] Improved the ui of the message preview by using @ mention
 template's css

---
 .../rocketchat-theme/client/imports/general/base_old.css    | 6 ++++++
 packages/rocketchat-ui-message/client/messageBox.html       | 6 +++---
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/rocketchat-theme/client/imports/general/base_old.css b/packages/rocketchat-theme/client/imports/general/base_old.css
index 50df7449b4c6..18eeb43c23d5 100644
--- a/packages/rocketchat-theme/client/imports/general/base_old.css
+++ b/packages/rocketchat-theme/client/imports/general/base_old.css
@@ -2608,6 +2608,12 @@
 	position: relative;
 }
 
+.rc-old .rc-message-box .reply-preview {
+	position: relative;
+	background-color:#fff;
+	padding-left: 15px;
+}
+
 .rc-old .message-popup {
 	position: absolute;
 	z-index: 101;
diff --git a/packages/rocketchat-ui-message/client/messageBox.html b/packages/rocketchat-ui-message/client/messageBox.html
index 7f16fa9c4f8c..bb99a1afdaff 100644
--- a/packages/rocketchat-ui-message/client/messageBox.html
+++ b/packages/rocketchat-ui-message/client/messageBox.html
@@ -23,9 +23,9 @@
 				{{> messagePopupConfig getPopupConfig}}
 				{{#if dataReply}}
 					{{#with dataReply}}
-						<div style="border-top: solid 1px lightgray;">
-							{{> messageAttachment text=msg author_name=u.username}}
-						</div>
+							<div class="reply-preview message-popup">
+								{{> messageAttachment text=msg author_name=u.username}}
+							</div>
 					{{/with}}
 				{{/if}}
 				<label class="rc-message-box__container">

From 08f0a639f7ce1bd8290661118a6bbd338f209a67 Mon Sep 17 00:00:00 2001
From: Utkarsh Barsaiyan <ubarsaiyan@gmail.com>
Date: Sun, 11 Mar 2018 02:51:29 +0530
Subject: [PATCH 3/7] Implemented a cancel reply option and removed the url
 from the input box while replying

---
 .../rocketchat-lib/client/MessageAction.js    | 20 ++-----------------
 .../client/imports/general/base_old.css       |  9 +++++++++
 .../client/messageBox.html                    |  3 +++
 .../client/messageBox.js                      | 17 +++++++---------
 .../rocketchat-ui/client/lib/chatMessages.js  | 16 ++++++++++++++-
 5 files changed, 36 insertions(+), 29 deletions(-)

diff --git a/packages/rocketchat-lib/client/MessageAction.js b/packages/rocketchat-lib/client/MessageAction.js
index 3ad655c1b517..56fef6f4da9f 100644
--- a/packages/rocketchat-lib/client/MessageAction.js
+++ b/packages/rocketchat-lib/client/MessageAction.js
@@ -103,27 +103,11 @@ 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 = '';
-			$('.rc-message-box__textarea')
+			$(input)
 				.data('reply', message)
 				.trigger('dataChange');
-			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');
+				.focus();
 		},
 		condition(message) {
 			if (RocketChat.models.Subscriptions.findOne({rid: message.rid}) == null) {
diff --git a/packages/rocketchat-theme/client/imports/general/base_old.css b/packages/rocketchat-theme/client/imports/general/base_old.css
index 18eeb43c23d5..91d7b45b32d2 100644
--- a/packages/rocketchat-theme/client/imports/general/base_old.css
+++ b/packages/rocketchat-theme/client/imports/general/base_old.css
@@ -2609,9 +2609,18 @@
 }
 
 .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 .reply-preview .cancel-reply {
+	padding: 10px;
 }
 
 .rc-old .message-popup {
diff --git a/packages/rocketchat-ui-message/client/messageBox.html b/packages/rocketchat-ui-message/client/messageBox.html
index bb99a1afdaff..c6885fe8ede0 100644
--- a/packages/rocketchat-ui-message/client/messageBox.html
+++ b/packages/rocketchat-ui-message/client/messageBox.html
@@ -25,6 +25,9 @@
 					{{#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}}
diff --git a/packages/rocketchat-ui-message/client/messageBox.js b/packages/rocketchat-ui-message/client/messageBox.js
index baabea4c8ca1..29213f225427 100644
--- a/packages/rocketchat-ui-message/client/messageBox.js
+++ b/packages/rocketchat-ui-message/client/messageBox.js
@@ -270,9 +270,6 @@ Template.messageBox.helpers({
 	isEmojiEnable() {
 		return RocketChat.getUserPreference(Meteor.user(), 'useEmojis');
 	},
-	isMessageFieldEmpty() {
-		return Template.instance().isMessageFieldEmpty.get();
-	},
 	dataReply() {
 		return Template.instance().dataReply.get();
 	}
@@ -377,6 +374,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());
@@ -481,13 +485,6 @@ Template.messageBox.onRendered(function() {
 		const reply = input.data('reply');
 		self.dataReply.set(reply);
 	});
-
-	this.autorun(() => {
-		if (self.isMessageFieldEmpty.get()) {
-			self.dataReply.set(undefined);
-		}
-	});
-
 	chatMessages[RocketChat.openedRoom] = chatMessages[RocketChat.openedRoom] || new ChatMessages;
 	chatMessages[RocketChat.openedRoom].input = this.$('.js-input-message').autogrow({
 		animate: true,
diff --git a/packages/rocketchat-ui/client/lib/chatMessages.js b/packages/rocketchat-ui/client/lib/chatMessages.js
index c9bbdecb2355..a153a2e31c50 100644
--- a/packages/rocketchat-ui/client/lib/chatMessages.js
+++ b/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) === '+:') {

From 373b0a25f908d25d77705dfe7265511f447c9267 Mon Sep 17 00:00:00 2001
From: Utkarsh Barsaiyan <ubarsaiyan@gmail.com>
Date: Sun, 11 Mar 2018 03:04:19 +0530
Subject: [PATCH 4/7] Small changes

---
 packages/rocketchat-lib/client/MessageAction.js     | 3 +--
 packages/rocketchat-ui-message/client/messageBox.js | 6 +++---
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/rocketchat-lib/client/MessageAction.js b/packages/rocketchat-lib/client/MessageAction.js
index 56fef6f4da9f..79747da1631d 100644
--- a/packages/rocketchat-lib/client/MessageAction.js
+++ b/packages/rocketchat-lib/client/MessageAction.js
@@ -104,10 +104,9 @@ Meteor.startup(function() {
 			const message = this._arguments[1];
 			const {input} = chatMessages[message.rid];
 			$(input)
+				.focus()
 				.data('reply', message)
 				.trigger('dataChange');
-			$(input)
-				.focus();
 		},
 		condition(message) {
 			if (RocketChat.models.Subscriptions.findOne({rid: message.rid}) == null) {
diff --git a/packages/rocketchat-ui-message/client/messageBox.js b/packages/rocketchat-ui-message/client/messageBox.js
index 29213f225427..72db6db68c2e 100644
--- a/packages/rocketchat-ui-message/client/messageBox.js
+++ b/packages/rocketchat-ui-message/client/messageBox.js
@@ -479,10 +479,10 @@ Template.messageBox.events({
 });
 
 Template.messageBox.onRendered(function() {
-	const input = $('.rc-message-box__textarea'); //mssg box
+	const input = this.find('.js-input-message'); //mssg box
 	const self = this;
-	input.on('dataChange', () => {
-		const reply = input.data('reply');
+	$(input).on('dataChange', () => {
+		const reply = $(input).data('reply');
 		self.dataReply.set(reply);
 	});
 	chatMessages[RocketChat.openedRoom] = chatMessages[RocketChat.openedRoom] || new ChatMessages;

From cc36d54cfd53bc0992a6578a0d215f90d176af58 Mon Sep 17 00:00:00 2001
From: Utkarsh Barsaiyan <ubarsaiyan@gmail.com>
Date: Wed, 14 Mar 2018 03:35:34 +0530
Subject: [PATCH 5/7] Changes to ui when displaying reply preview with @
 mention popup

---
 .../client/imports/general/base_old.css       | 23 +++++++++++++++++++
 .../client/popup/messagePopup.html            |  2 +-
 .../client/popup/messagePopup.js              | 16 +++++++++++++
 3 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/packages/rocketchat-theme/client/imports/general/base_old.css b/packages/rocketchat-theme/client/imports/general/base_old.css
index 91d7b45b32d2..6ec7acebce0b 100644
--- a/packages/rocketchat-theme/client/imports/general/base_old.css
+++ b/packages/rocketchat-theme/client/imports/general/base_old.css
@@ -2619,10 +2619,33 @@
     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;
diff --git a/packages/rocketchat-ui-message/client/popup/messagePopup.html b/packages/rocketchat-ui-message/client/popup/messagePopup.html
index c250924a697a..daaf06982451 100644
--- a/packages/rocketchat-ui-message/client/popup/messagePopup.html
+++ b/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}}
diff --git a/packages/rocketchat-ui-message/client/popup/messagePopup.js b/packages/rocketchat-ui-message/client/popup/messagePopup.js
index 2fd46a327a4a..31a6467455db 100644
--- a/packages/rocketchat-ui-message/client/popup/messagePopup.js
+++ b/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));

From 9832e406f05205ef4000b62d85f488138d1e005b Mon Sep 17 00:00:00 2001
From: Utkarsh Barsaiyan <ubarsaiyan@gmail.com>
Date: Fri, 16 Mar 2018 01:18:35 +0530
Subject: [PATCH 6/7] Indentation fix

---
 packages/rocketchat-ui-message/client/messageBox.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/rocketchat-ui-message/client/messageBox.js b/packages/rocketchat-ui-message/client/messageBox.js
index ded349712606..855e743c9f94 100644
--- a/packages/rocketchat-ui-message/client/messageBox.js
+++ b/packages/rocketchat-ui-message/client/messageBox.js
@@ -275,8 +275,8 @@ Template.messageBox.helpers({
 	},
 	dataReply() {
 		return Template.instance().dataReply.get();
-  },
-  isAudioMessageAllowed() {
+  	},
+  	isAudioMessageAllowed() {
 		return RocketChat.settings.get('FileUpload_Enabled') && RocketChat.settings.get('Message_AudioRecorderEnabled') && (!RocketChat.settings.get('FileUpload_MediaTypeWhiteList'));
 	}
 });

From 25b125ec385d22ee6c74a92bdcea0a8350e1bbfa Mon Sep 17 00:00:00 2001
From: Utkarsh Barsaiyan <ubarsaiyan@gmail.com>
Date: Fri, 16 Mar 2018 01:40:43 +0530
Subject: [PATCH 7/7] Indentation fix

---
 packages/rocketchat-ui-message/client/messageBox.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/rocketchat-ui-message/client/messageBox.js b/packages/rocketchat-ui-message/client/messageBox.js
index 855e743c9f94..176ca033a624 100644
--- a/packages/rocketchat-ui-message/client/messageBox.js
+++ b/packages/rocketchat-ui-message/client/messageBox.js
@@ -275,8 +275,8 @@ Template.messageBox.helpers({
 	},
 	dataReply() {
 		return Template.instance().dataReply.get();
-  	},
-  	isAudioMessageAllowed() {
+	},
+	isAudioMessageAllowed() {
 		return RocketChat.settings.get('FileUpload_Enabled') && RocketChat.settings.get('Message_AudioRecorderEnabled') && (!RocketChat.settings.get('FileUpload_MediaTypeWhiteList'));
 	}
 });