Some basic positioning of HTML

webroot/js/Message.js

@@ -11,11 +11,14 @@ define(
 				this.author = ko.observable("Anonymous");
 				this.body = ko.observable("");
 			}
+			this.image = ko.observable("https://robohash.org/" + this.author() + "?set=set3&size=50x50")
+
 
 			this.toModel = function() {
 				return {
 					author: this.author(),
-					body: this.body()
+					body: this.body(),
+					image: this.image()
 				};
 			}
 		}

webroot/js/MessageList.js

@@ -16,16 +16,30 @@ define(
 				ws.send($.toJSON(model));
 				var message = new Message();
 				message.author(model.author);
+				message.image("https://robohash.org/" + model.author);
+				console.log("https://robohash.org/" + model.author)
 				this.editingMessage(message);
 			};
 
-			ws.onmessage = function(e) {
+			ws.onmessage = function (e) {
+				console.log("on message")
 				var model = $.evalJSON(e.data);
 				var msg = new Message(model);
 				that.messages.push(msg);
+
+				// Scroll DIV to the bottom
+				scrollSmoothToBottom("messages-container")
 			};
 		}
 		
 		return MessageList;
 	}
 );
+
+
+function scrollSmoothToBottom(id) {
+	var div = document.getElementById(id);
+	$('#' + id).animate({
+		scrollTop: div.scrollHeight - div.clientHeight
+	}, 500);
+}