Implemented a cancel reply option and removed the url from the input box while replying

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) {

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 {

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}}

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,

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) === '+:') {