Merge pull request #120 from RocketChat/mentions

Mentions

client/stylesheets/base.less

@@ -13,6 +13,7 @@
 @primary-background-color: #04436a;
 @secondary-background-color: #F4F4F4;
 @tertiary-background-color: #EAEAEA;
+@link-font-color: #008CE3;
 @primary-font-color: #444444;
 @secondary-font-color: #7f7f7f;
 @tertiary-font-color: rgba(255, 255, 255, 0.6);
@@ -1643,10 +1644,11 @@ a.github-fork {
 		}
 		> div {
 			a {
-				color: @primary-background-color;
-				font-weight: 500;
+				color: @link-font-color;
+				font-weight: 400;
 				&:hover {
-					color: darken(@primary-background-color, 10%);
+					color: darken(@link-font-color, 10%);
+					text-decoration: underline;
 				}
 			}
 			ul{

client/views/app/chatMessageDashboard.coffee

@@ -12,8 +12,20 @@ Template.chatMessageDashboard.helpers
 	isEditing: ->
 		return this._id is Session.get('editingMessageId')
 
-	autolinker: (msg) ->
-		return Autolinker.link(_.stripTags(msg), { stripPrefix: false })
+	autolinkerAndMentions: ->
+		msg = Autolinker.link(_.stripTags(this.msg), { stripPrefix: false, twitter: false })
+
+		if not this.mentions? or this.mentions.length is 0
+			return msg
+
+		mentions = _.map this.mentions, (mention) ->
+			return mention.username or mention
+
+		mentions = mentions.join('|')
+		msg = msg.replace new RegExp("(?:^|\\s)(@(#{mentions}))(?:\\s|$)", 'g'), (match, mention, username) ->
+			return match.replace mention, "<a href=\"\" class=\"mention-link\" data-username=\"#{username}\">#{mention}</a>"
+
+		return msg
 
 	message: ->
 		if this.by
@@ -64,6 +76,11 @@ Template.chatMessageDashboard.events
 			Meteor.defer ->
 				$('.input-message-editing').select()
 
+	# TODO open flextab with user info
+	# 'click .mention-link': ->
+	# 	Session.set('flexOpened', true)
+	# 	Session.set('showUserInfo', $(e.currentTarget).data('username'))
+
 Template.chatMessageDashboard.onRendered ->
 	chatMessages = $('.messages-box .wrapper')
 	message = $(this.firstNode)

client/views/app/chatMessageDashboard.html

@@ -22,7 +22,7 @@
 					</div>
 				{{else}}
 					<div>
-						{{#markdown}}{{#emojione}}{{autolinker message}}{{/emojione}}{{/markdown}}
+						{{#markdown}}{{#emojione}}{{autolinkerAndMentions message}}{{/emojione}}{{/markdown}}
 					</div>
 				{{/if}}
 			{{/if}}

server/methods/sendMessage.coffee

@@ -28,10 +28,28 @@ Meteor.methods
 			messageFilter = { rid: rid, uid: Meteor.userId(), t: 't' }
 			activityFilter = { rid: rid, uid: { $ne: Meteor.userId() } }
 
+		mentions = []
+		msg.message.replace /(?:^|\s|\n)(?:@)([A-Za-z0-9-_.]+)/g, (match, mention) ->
+			mentions.push mention
+
+		mentions = _.unique mentions
+
+		mentions = mentions.filter (mention) ->
+			return Meteor.users.findOne({username: mention}, {fields: {_id: 1}})?
+
+		mentions = mentions.map (mention) ->
+			return {
+				username: mention
+			}
+
+		if mentions.length is 0
+			mentions = undefined
+
 		ChatMessage.upsert messageFilter,
 			$set:
 				ts: now
 				msg: msg.message
+				mentions: mentions
 			$unset:
 				t: 1
 				expireAt: 1