Group messages from the same person together

services/web/app/views/project/editor/chat.jade

@@ -12,11 +12,12 @@ aside.chat(
 		.infinite-scroll-inner
 			ul.list-unstyled
 				li.message(
-					ng-repeat="message in chat.messages | orderBy:'timestamp':true"
+					ng-repeat="message in chat.groupedMessages | orderBy:'timestamp':false"
 					ng-controller="ChatMessageController"
 					ng-class="{'self': message.user.id == user.id }"
 				)
-
+					div.date(ng-if="$index == 0 || (message.timestamp - chat.groupedMessages[$index - 1].timestamp) > 5 * 60 * 1000")
+						{{ message.timestamp | formatDate:'h:MMa' }} {{ message.timestamp | relativeDate }}
 					span.avatar
 						img(ng-src="{{gravatarUrl(message.user)}}")
 					div.message-wrapper
@@ -28,7 +29,7 @@ aside.chat(
 							}"
 						)
 							.arrow(ng-style="{'border-color': 'hsl({{ hue(message.user) }}, 60%, 80%)'}")
-							{{ message.content }}
+							p(ng-repeat="content in message.contents") {{ content }}
 
 	.new-message
 		textarea(

services/web/public/coffee/app/ide/chat/controllers/ChatController.coffee

@@ -23,11 +23,41 @@ define [
 		$scope.chat.messages = [
 			{ content: "Hello world", timestamp: Date.now() - 2000, user: james2 }
 			{ content: "Hello, this is the new chat", timestamp: Date.now() - 4000, user: james }
-			{ content: "Here are some longer messages to show what ti looks like when I say a lot!", timestamp: Date.now() - 20000, user: henry }
+			{ content: "Here are some longer messages to show what it looks like when I say a lot!", timestamp: Date.now() - 20000, user: henry }
 			{ content: "What about some maths? $x^2 = 1$?", timestamp: Date.now() - 22000, user: james2 }
 			{ content: "Nope, that doesn't work yet!", timestamp: Date.now() - 45000, user: henry }
 			{ content: "I'm running out of things to say.", timestamp: Date.now() - 56000, user: henry }
 			{ content: "Yep, me too", timestamp: Date.now() - 100000, user: james }
 			{ content: "Hmm, looks like we've had this conversation backwards", timestamp: Date.now() - 120000, user: james }
-		]
+			{ content: "Hello world", timestamp: Date.now() - 202000, user: james2 }
+			{ content: "Hello, this is the new chat", timestamp: Date.now() - 204000, user: james }
+			{ content: "Here are some longer messages to show what it looks like when I say a lot!", timestamp: Date.now() - 2020000, user: henry }
+			{ content: "What about some maths? $x^2 = 1$?", timestamp: Date.now() - 12022000, user: james2 }
+			{ content: "Nope, that doesn't work yet!", timestamp: Date.now() - 12045000, user: henry }
+			{ content: "I'm running out of things to say.", timestamp: Date.now() - 22056000, user: henry }
+			{ content: "Yep, me too", timestamp: Date.now() - 220100000, user: james }
+			{ content: "Hmm, looks like we've had this conversation backwards", timestamp: Date.now() - 520120000, user: james }
+		].reverse()
+
+		$scope.$watch "chat.messages", (messages) ->
+			if messages?
+				$scope.chat.groupedMessages = groupMessages(messages)
+
+		TIMESTAMP_GROUP_SIZE = 5 * 60 * 1000 # 5 minutes
+		groupMessages = (messages) ->
+			previousMessage = null
+			groupedMessages = []
+			for message in messages
+				shouldGroup = previousMessage? and
+					previousMessage.user == message.user
+				if shouldGroup
+					previousMessage.timestamp = message.timestamp
+					previousMessage.contents.push message.content
+				else
+					groupedMessages.push(previousMessage = {
+						user: message.user
+						timestamp: message.timestamp
+						contents: [message.content]
+					})
+			return groupedMessages
 	]

services/web/public/stylesheets/app/editor/chat.less

@@ -10,6 +10,13 @@
 		overflow-x: hidden;
 		li.message {
 			margin: @line-height-computed / 2;
+			.date {
+				font-size: 12px;
+				color: @gray-light;
+				border-bottom: 1px solid @gray-lightest;
+				margin-bottom: @line-height-computed / 2;
+				text-align: center;
+			}
 			.avatar {
 				margin-top: 14px;
 				float: left;
@@ -49,6 +56,12 @@
 						border-width: 10px;
 					}
 				}
+				p {
+					margin-bottom: @line-height-computed / 4;
+					&:last-child {
+						margin-bottom: 0;
+					}
+				}
 			}
 
 			&:not(.self) {