Add clickable nicks in messages for starting private chats

client/src/css/style.css

@@ -237,6 +237,7 @@ i[class^="icon-"]:before, i[class*=" icon-"]:before {
 
 .message-sender {
 	color: #6BB758;
+	cursor: pointer;
 }
 
 .message-input-wrap {

client/src/js/components/MessageBox.jsx

@@ -4,7 +4,7 @@ var _ = require('lodash');
 var Infinite = require('react-infinite');
 var Autolinker = require('autolinker');
 
-var util = require('../util');
+var MessageHeader = require('./MessageHeader.jsx');
 var messageLineStore = require('../stores/messageLine');
 var selectedTabStore = require('../stores/selectedTab');
 var messageActions = require('../actions/message');
@@ -81,13 +81,7 @@ var MessageBox = React.createClass({
 				messageClass += ' message-' + message.type;
 			}
 
-			lines.push(
+			lines.push(<MessageHeader key={key} message={message} />);
-				<p key={key} className={messageClass}>
-					<span className="message-time">{util.timestamp(message.time)}</span>
-					{message.from ? <span className="message-sender"> {message.from}</span> : null}
-					<span dangerouslySetInnerHTML={{ __html: ' ' + Autolinker.link(message.lines[0]) }}></span>
-				</p>
-			);
 
 			for (var i = 1; i < message.lines.length; i++) {
 				lines.push(

client/src/js/components/MessageHeader.jsx

@@ -0,0 +1,47 @@
+var React = require('react');
+var Reflux = require('reflux');
+var Autolinker = require('autolinker');
+
+var util = require('../util');
+var privateChatActions = require('../actions/privateChat');
+var tabActions = require('../actions/tab');
+
+var MessageHeader = React.createClass({
+	handleSenderClick: function() {
+		var message = this.props.message;
+
+		privateChatActions.open(message.server, message.from);
+		tabActions.select(message.server, message.from);
+	},
+
+	render: function() {
+		var message = this.props.message;
+		var sender = null;
+		var messageClass = 'message';
+
+		if (message.from) {
+			sender = (
+				<span 
+					className="message-sender" 
+					style={{ marginLeft: window.charWidth + 'px' }}
+					onClick={this.handleSenderClick}>
+						{message.from}
+				</span>
+			);
+		}
+
+		if (message.type) {
+			messageClass += ' message-' + message.type;
+		}
+
+		return (
+			<p className={messageClass}>
+				<span className="message-time">{util.timestamp(message.time)}</span>
+				{sender}
+				<span dangerouslySetInnerHTML={{ __html: ' ' + Autolinker.link(message.lines[0]) }}></span>
+			</p>
+		);
+	}
+});
+
+module.exports = MessageHeader;