feat(web-ui): show avatars next to chat messages (#848)

Co-authored-by: Johan Book <{ID}+{username}@users.noreply.github.com>

Author: johanbook

services/web-ui/src/features/chat/pages/ChatPage/components/ChatMessage/ChatMessage.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { Box, Typography, useTheme } from "@mui/material";
+import { Avatar, Box, Typography, useTheme } from "@mui/material";
 
 import { ChatMessageDetails } from "src/api";
 
@@ -20,6 +20,14 @@ export function ChatMessage({ message }: ChatMessageProps): React.ReactElement {
         justifyContent: message.sentByCurrentUser ? "right" : "left",
       }}
     >
+      {!message.sentByCurrentUser && (
+        <Avatar
+          imgProps={{ loading: "lazy" }}
+          src={message.profile.imageUrl}
+          sx={{ mr: 1, width: 34, height: 34, mt: 1 / 2 }}
+        />
+      )}
+
       <Typography
         component="span"
         sx={{

services/web-ui/src/features/chat/pages/ChatPage/components/ChatMessageList/ChatMessageList.tsx

@@ -6,14 +6,14 @@ import { ChatMessageDetails } from "src/api";
 
 import { ChatMessage } from "../ChatMessage/ChatMessage";
 
-export interface ChatMessageListProps {
+interface ChatMessageListProps {
   messages: ChatMessageDetails[];
 }
 
 export function ChatMessageList({
   messages,
 }: ChatMessageListProps): React.ReactElement {
-  // The Flex layout used to keep focus at bottom of container 
+  // The Flex layout used to keep focus at bottom of container
   // shows messages in reverse order
   const shownMessages = [...messages].reverse();
 

services/web-ui/src/test/mocks/chatMessage.mock.ts

@@ -6,6 +6,10 @@ export function createChatMessageMock(
   return {
     id: 1,
     message: "my-message",
+    profile: {
+      id: 1,
+      name: "Johan Doe"
+    },
     read: true,
     sentByCurrentUser: false,
     ...message,