message avatars

src/assets/css/chat.scss

@@ -118,6 +118,7 @@ $chat-text-size: 0.7pt;
     margin: 8px;
     margin-right: 30% !important;
     text-align: left;
+    position: relative;
     .bubble {
         background-color: white;
         border-radius: 10px 10px 10px 0;
@@ -126,6 +127,16 @@ $chat-text-size: 0.7pt;
         border-style: solid !important;
         border-color: #cccccc !important;
     }
+    .avatar {
+        position: absolute;
+        left: -10px;
+        top: 0;
+        border: 2px solid white;
+    }
+    .sender {
+        position: relative;
+        left: 40px;
+    }
 }
 
 .sender, .status {

src/components/Chat.vue

@@ -50,6 +50,11 @@
         >
           <div class="messageIn">
             <div class="sender">{{ messageEventDisplayName(event) }}</div>
+            <v-avatar class="avatar" size="40" color="grey">
+              <img v-if="messageEventAvatar(event)" :src="messageEventAvatar(event)" />
+              <span v-else class="white--text headline">{{messageEventDisplayName(event).substring(0,1).toUpperCase()}}</span>
+            </v-avatar>
+
             <div class="bubble">
               <div class="message">{{ event.getContent().body }}</div>
             </div>
@@ -264,6 +269,16 @@ export default {
       return this.stateEventDisplayName(event);
     },
 
+    messageEventAvatar(event) {
+      if (this.room) {
+        const member = this.room.getMember(event.getSender());
+        if (member) {
+          return member.getAvatarUrl(this.$matrix.matrixClient.getHomeserverUrl(), 40, 40, "scale", true);
+        }
+      }
+      return null;
+    },
+
     sendMessage() {
       if (this.currentInput.length > 0) {
         this.sendMatrixMessage(this.currentInput);