render avatar on message tiles

src/domain/session/room/timeline/tiles/MessageTile.js

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import {SimpleTile} from "./SimpleTile.js";
-import {getIdentifierColorNumber} from "../../../../avatar.js";
+import {getIdentifierColorNumber, avatarInitials} from "../../../../avatar.js";
 
 export class MessageTile extends SimpleTile {
     constructor(options) {
@@ -35,10 +35,21 @@ export class MessageTile extends SimpleTile {
         return this._entry.displayName || this._entry.sender;
     }
 
-    get senderColorNumber() {
+    get avatarColorNumber() {
         return getIdentifierColorNumber(this._entry.sender);
     }
 
+    get avatarUrl() {
+        if (this._entry.avatarUrl) {
+            return this._mediaRepository.mxcUrlThumbnail(this._entry.avatarUrl, 30, 30, "crop");
+        }
+        return null;
+    }
+
+    get avatarLetter() {
+        return avatarInitials(this.sender);
+    }
+
     get date() {
         return this._date && this._date.toLocaleDateString({}, {month: "numeric", day: "numeric"});
     }

src/ui/web/css/themes/element/theme.css

@@ -297,15 +297,25 @@ ul.Timeline > li:not(.continuation) {
     margin-top: 7px;
 }
 
-ul.Timeline > li.continuation .sender {
+ul.Timeline > li.continuation .profile {
     display: none;
 }
 
+
 .message-container {
     padding: 1px 10px 0px 10px;
     margin: 5px 10px 0 10px;
 }
 
+.message-container .profile {
+    display: flex;
+    align-items: center;
+}
+
+.message-container .avatar {
+    --avatar-size: 25px;
+}
+
 .TextMessageView.continuation .message-container {
     margin-top: 0;
     margin-bottom: 0;
@@ -313,6 +323,7 @@ ul.Timeline > li.continuation .sender {
 
 .message-container .sender {
     margin: 6px 0;
+    margin-left: 6px;
     font-weight: bold;
     line-height: 1.7rem;
 }

src/ui/web/session/room/timeline/common.js

@@ -22,8 +22,20 @@ export function renderMessage(t, vm, children) {
         pending: vm.isPending,
         continuation: vm => vm.isContinuation,
     };
-    const sender = t.div({className: `sender usercolor${vm.senderColorNumber}`}, vm.sender);
-    children = [sender].concat(children);
+
+    const hasAvatar = !!vm.avatarUrl;
+    const avatarClasses = {
+        avatar: true,
+        [`usercolor${vm.avatarColorNumber}`]: !hasAvatar,
+    };
+    const avatarContent = hasAvatar ?
+        t.img({src: vm.avatarUrl, width: "30", height: "30", title: vm.sender}) :
+        vm.avatarLetter;
+    const profile = t.div({className: "profile"}, [
+        t.div({className: avatarClasses}, [avatarContent]),
+        t.div({className: `sender usercolor${vm.avatarColorNumber}`}, vm.sender)
+    ]);
+    children = [profile].concat(children);
     return t.li(
         {className: classes},
         t.div({className: "message-container"}, children)