Merge pull request #5250 from RocketChat/livechat-improvements

Livechat improvements

packages/rocketchat-i18n/i18n/pt.i18n.json

@@ -1202,9 +1202,9 @@
   "User_joined_channel": "Entrou no canal.",
   "User_joined_channel_female": "Entrou no canal.",
   "User_joined_channel_male": "Entrou no canal.",
-  "User_left": "Usuário <em>__user_left__</em> deixou a conversa.",
-  "User_left_female": "Usuário <em>__user_left__</em> deixou a conversa.",
-  "User_left_male": "Usuário <em>__user_left__</em> deixou a conversa.",
+  "User_left": "Saiu da conversa.",
+  "User_left_female": "Saiu da conversa.",
+  "User_left_male": "Saiu da conversa.",
   "User_logged_out": "Usuário não logado",
   "User_management": "Gerenciamento de usuários",
   "User_muted_by": "Usuário <em>__user_muted__</em> silenciado por <em>__user_by__</em>.",

packages/rocketchat-lib/server/functions/Notifications.coffee

@@ -33,7 +33,11 @@ RocketChat.Notifications = new class
 			roomId = eventName.split('/')[0]
 
 			user = Meteor.users.findOne @userId, {fields: {username: 1}}
-			return RocketChat.models.Rooms.findOneByIdContainigUsername(roomId, user.username, {fields: {_id: 1}})?
+			room = RocketChat.models.Rooms.findOneById(roomId)
+			if room.t is 'l' and room.v._id is user._id
+				return true
+
+			return room.usernames.indexOf(user.username) > -1
 
 		@streamRoomUsers.allowRead('none');
 

packages/rocketchat-lib/server/functions/sendMessage.coffee

@@ -13,7 +13,11 @@ RocketChat.sendMessage = (user, message, room, upsert = false) ->
 	message.rid = room._id
 
 	if not room.usernames? || room.usernames.length is 0
-		room = RocketChat.models.Rooms.findOneById(room._id)
+		updated_room = RocketChat.models.Rooms.findOneById(room._id)
+		if updated_room?
+			room = updated_room
+		else
+			room.usernames = []
 
 	if message.parseUrls isnt false
 		if urls = message.msg.match /([A-Za-z]{3,9}):\/\/([-;:&=\+\$,\w]+@{1})?([-A-Za-z0-9\.]+)+:?(\d+)?((\/[-\+=!:~%\/\.@\,\w]*)?\??([-\+=&!:;%@\/\.\,\w]+)?(?:#([^\s\)]+))?)?/g

packages/rocketchat-livechat/app/client/lib/msgTyping.coffee

@@ -28,7 +28,7 @@
 						dep.changed()
 
 	Tracker.autorun ->
-		if visitor.getRoom()
+		if visitor.getRoom() and Meteor.userId()
 			addStream visitor.getRoom()
 
 	start = (room) ->

packages/rocketchat-livechat/app/client/stylesheets/main.less

@@ -142,8 +142,8 @@ input:focus {
 		cursor: pointer;
 		h1 {
 			margin: 0;
-			padding: 0 5px;
-			font-size: 9pt;
+			padding: 0 10px;
+			font-size: 10pt;
 			display: inline-block;
 		}
 
@@ -151,13 +151,14 @@ input:focus {
 			display: inline-block;
 			float: right;
 			padding-right: 5px;
+			padding-top: 3px;
+			height: 30px;
 
 			svg {
 				cursor: pointer;
 				fill: currentColor;
 				width: 14px;
 				margin: 0 2px;
-				vertical-align: middle;
 			}
 		}
 	}
@@ -191,10 +192,10 @@ input:focus {
 
 			.message {
 				font-size: 12px;
-				padding-left: 40px;
+				padding: 3px 10px 3px 50px;
 				position: relative;
 				line-height: 18px;
-				margin: 12px 10px 0;
+				margin: 3px 0 3px 0;
 				min-height: 36px;
 				&:nth-child(1) {
 					margin-top: 0;
@@ -236,6 +237,9 @@ input:focus {
 				&.own:hover:not(.system) .edit-message {
 					display: inline-block;
 				}
+				&.own {
+					background-color: #f5f5f5;
+				}
 				.delete-message {
 					display: none;
 					cursor: pointer;
@@ -255,8 +259,8 @@ input:focus {
 				}
 				.thumb {
 					position: absolute;
-					left: 0;
-					top: 0;
+					left: 10px;
+					top: 6px;
 					display: block;
 					width: 30px;
 					height: 30px;
@@ -280,7 +284,7 @@ input:focus {
 					.info {
 						position: absolute;
 						text-align: right;
-						left: -20px;
+						left: -10px;
 						width: 55px;
 						.time {
 							display: none;
@@ -456,6 +460,15 @@ input:focus {
 			font-size: 0.65rem;
 		}
 
+		.typing {
+			clear: both;
+			color: @secondary-font-color;
+			margin-left: 8px;
+			outline: none;
+			margin-top: 2px;
+			font-size: 0.65rem;
+		}
+
 		.options-menu {
 			min-width: 100px;
 			// min-height: 40px;

packages/rocketchat-livechat/app/client/views/avatar.coffee

@@ -4,7 +4,7 @@ Template.avatar.helpers
 		if not username? and this.userId?
 			username = Meteor.users.findOne(this.userId)?.username
 
-		if not username?
+		if not username? or Meteor.user()?.username is username
 			return
 
 		Session.get "avatar_random_#{username}"

packages/rocketchat-livechat/app/client/views/livechatWindow.js

@@ -120,4 +120,8 @@ Template.livechatWindow.onCreated(function() {
 			Livechat.ready();
 		}
 	});
+
+	$(window).on('focus', () => {
+		$('textarea').focus();
+	});
 });

packages/rocketchat-livechat/app/client/views/messages.html

@@ -32,7 +32,28 @@
 			</div>
 		{{/if}}
 
-		{{> options show=showOptions}}
-		<button class="toggle-options">{{optionsLink}}</button>
+		{{#if usersTyping.users}}
+			{{#with usersTyping}}
+				<div class="typing">
+					<strong>{{users}}</strong>
+					{{#if multi}}
+						{{#if selfTyping}}
+							{{_ "are_also_typing"}}
+						{{else}}
+							{{_ "are_typing"}}
+						{{/if}}
+					{{else}}
+						{{#if selfTyping}}
+							{{_ "is_also_typing" context="male"}}
+						{{else}}
+							{{_ "is_typing" context="male"}}
+						{{/if}}
+					{{/if}}
+				</div>
+			{{/with}}
+		{{else}}
+			{{> options show=showOptions}}
+			<button class="toggle-options">{{optionsLink}}</button>
+		{{/if}}
 	</div>
 </template>

packages/rocketchat-livechat/app/client/views/messages.js

-/* globals Livechat, LivechatVideoCall */
+/* globals Livechat, LivechatVideoCall, MsgTyping */
 
 Template.messages.helpers({
 	messages() {
@@ -32,6 +32,32 @@ Template.messages.helpers({
 	},
 	showConnecting() {
 		return Livechat.connecting;
+	},
+	usersTyping() {
+		const users = MsgTyping.get(visitor.getRoom());
+		if (users.length === 0) {
+			return;
+		}
+		if (users.length === 1) {
+			return {
+				multi: false,
+				selfTyping: MsgTyping.selfTyping.get(),
+				users: users[0]
+			};
+		}
+		// usernames = _.map messages, (message) -> return message.u.username
+		let last = users.pop();
+		if (users.length > 4) {
+			last = t('others');
+		}
+		// else
+		let usernames = users.join(', ');
+		usernames = [usernames, last];
+		return {
+			multi: true,
+			selfTyping: MsgTyping.selfTyping.get(),
+			users: usernames.join(` ${t('and')} `)
+		};
 	}
 });
 

packages/rocketchat-livechat/assets/rocket-livechat.js

@@ -29,6 +29,7 @@
 		widget.dataset.state = 'opened';
 		widget.style.height = '300px';
 		callHook('widgetOpened');
+		document.querySelector('.rocketchat-widget iframe').focus();
 	};
 
 	var api = {

packages/rocketchat-livechat/client/views/app/tabbar/visitorForward.js

@@ -45,7 +45,7 @@ Template.visitorForward.events({
 		if (instance.find('#forwardUser').value) {
 			transferData.userId = instance.find('#forwardUser').value;
 		} else if (instance.find('#forwardDepartment').value) {
-			transferData.deparmentId = instance.find('#forwardDepartment').value;
+			transferData.departmentId = instance.find('#forwardDepartment').value;
 		}
 
 		Meteor.call('livechat:transfer', transferData, (error, result) => {

packages/rocketchat-livechat/server/lib/Livechat.js

@@ -283,10 +283,12 @@ RocketChat.Livechat = {
 			agent = RocketChat.Livechat.getNextAgent(transferData.departmentId);
 		}
 
-		if (agent && agent.agentId !== room.servedBy._id) {
-			room.usernames = _.without(room.usernames, room.servedBy.username).concat(agent.username);
+		const servedBy = room.servedBy;
 
-			RocketChat.models.Rooms.changeAgentByRoomId(room._id, room.usernames, agent);
+		if (agent && agent.agentId !== servedBy._id) {
+			room.usernames = _.without(room.usernames, servedBy.username).concat(agent.username);
+
+			RocketChat.models.Rooms.changeAgentByRoomId(room._id, agent);
 
 			let subscriptionData = {
 				rid: room._id,
@@ -304,11 +306,11 @@ RocketChat.Livechat = {
 				mobilePushNotifications: 'all',
 				emailNotifications: 'all'
 			};
-			RocketChat.models.Subscriptions.removeByRoomIdAndUserId(room._id, room.servedBy._id);
+			RocketChat.models.Subscriptions.removeByRoomIdAndUserId(room._id, servedBy._id);
 
 			RocketChat.models.Subscriptions.insert(subscriptionData);
 
-			RocketChat.models.Messages.createUserLeaveWithRoomIdAndUser(room._id, { _id: room.servedBy._id, username: room.servedBy.username });
+			RocketChat.models.Messages.createUserLeaveWithRoomIdAndUser(room._id, { _id: servedBy._id, username: servedBy.username });
 			RocketChat.models.Messages.createUserJoinWithRoomIdAndUser(room._id, { _id: agent.agentId, username: agent.username });
 
 			return true;

packages/rocketchat-livechat/server/methods/transfer.js

@@ -8,7 +8,7 @@ Meteor.methods({
 		check(transferData, {
 			roomId: String,
 			userId: Match.Optional(String),
-			deparmentId: Match.Optional(String)
+			departmentId: Match.Optional(String)
 		});
 
 		const room = RocketChat.models.Rooms.findOneById(transferData.roomId);