Implement "seen by" functionality

src/assets/css/chat.scss

@@ -356,6 +356,40 @@ body {
   .quick-reaction-container .emoji {
     display: inline;
   }
+
+  .seen-by-container {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    height: 16px;
+    .clickable {
+      display: flex;
+      height: 16px;
+    }
+    div {
+      height: 16px;
+    }
+    margin-top: 3px;
+    .more {
+      margin-right: 10px;
+      color: #444444;
+      font-size: 12px;
+    }
+    .seen-by-user {
+      width: 16px !important;
+      height: 16px !important;
+      margin-left: -5px !important;
+      vertical-align: top;
+    }
+    .list-enter-active,
+    .list-leave-active {
+      transition: all 1s;
+    }
+    .list-enter, .list-leave-to /* .list-leave-active below version 2.1.8 */ {
+      opacity: 0;
+      transform: translateX(24px);
+    }
+  }
 }
 
 .messageIn {

src/assets/translations/en.json

@@ -88,7 +88,8 @@
     "outgoing_message_deleted_text": "You deleted this message.",
     "incoming_message_deleted_text": "This message was deleted.",
     "not_allowed_to_send": "Only admins and moderators are allowed to send to the room",
-    "reaction_count_more": "{reactionCount} more"
+    "reaction_count_more": "{reactionCount} more",
+    "seen_by": "Seen by no members | Seen by 1 member | Seen by {count} members"
   },
   "room": {
     "invitations": "You have no invitations | You have 1 invitation | You have {count} invitations",