Plumb contact avatars into conversations

js/models/conversations.js

@@ -32,8 +32,10 @@
     },
 
     initialize: function() {
-        this.messageCollection = new Whisper.MessageCollection();
         this.contactCollection = new Whisper.ConversationCollection();
+        this.messageCollection = new Whisper.MessageCollection([], {
+            conversation: this
+        });
     },
 
     validate: function(attributes, options) {

js/models/messages.js

@@ -42,6 +42,9 @@
         },
         isIncoming: function() {
             return this.get('type') === 'incoming';
+        },
+        getContact: function() {
+            return this.collection.conversation.contactCollection.get(this.get('source'));
         }
     });
 
@@ -50,6 +53,11 @@
         database   : Whisper.Database,
         storeName  : 'messages',
         comparator : 'received_at',
+        initialize : function(models, options) {
+            if (options) {
+                this.conversation = options.conversation;
+            }
+        },
         destroyAll : function () {
             return Promise.all(this.models.map(function(m) {
                 return new Promise(function(resolve, reject) {

js/views/message_view.js

@@ -48,14 +48,26 @@
             return text.replace(/(^|[\s\n]|<br\/?>)((?:https?|ftp):\/\/[\-A-Z0-9+\u0026\u2019@#\/%?=()~_|!:,.;]*[\-A-Z0-9+\u0026@#\/%=~()_|])/gi, "$1<a href='$2' target='_blank'>$2</a>");
         },
         render: function() {
+            var contact = this.model.getContact();
             this.$el.html(
                 Mustache.render(this.template, {
                     message: this.model.get('body'),
                     timestamp: moment(this.model.get('received_at')).fromNow(),
-                    sender: this.model.get('source')
+                    sender: (contact && contact.getTitle()) || ''
                 })
             );
 
+            var avatar;
+            if (contact && contact.get('avatar')) {
+                avatar = new Whisper.AttachmentView({
+                    model: contact.get('avatar')
+                }).render().el;
+            }
+            else {
+                avatar = $('<img>').attr('src', '/images/default.png');
+            }
+            this.$el.find('.avatar').append(avatar);
+
             twemoji.parse(this.el, { base: '/components/twemoji/', size: 16 });
 
             var content = this.$el.find('.content');