Bugfixes:

1. UI improvement: the Opponent username bubble has alignment flex-end to ensure it's in the bottom
2. Cache usernames of all users present in a room to save database queries

django_chatter/consumers.py

@@ -92,6 +92,8 @@ class ChatConsumer(AsyncJsonWebsocketConsumer):
     async def connect(self):
         self.user = self.scope['user']
 
+        self.room_username_list = [] # Cache room usernames to send alerts
+
         self.schema_name = self.scope.get('schema_name', None)
         self.multitenant = self.scope.get('multitenant', False)
         for param in self.scope['path'].split('/'):
@@ -114,6 +116,9 @@ async def connect(self):
                             self.channel_name
                         )
                         await self.accept()
+
+                        for user in self.room.members.all():
+                            self.room_username_list.append(user.username)
                     else:
                         await self.disconnect(403)
             else:
@@ -124,6 +129,9 @@ async def connect(self):
                         self.channel_name
                     )
                     await self.accept()
+
+                    for user in self.room.members.all():
+                        self.room_username_list.append(user.username)
                 else:
                     await self.disconnect(403)
         except Exception as ex:
@@ -175,10 +183,10 @@ async def receive_json(self, data):
                 }
             )
 
-            for user in self.room.members.all():
-                if user != self.user:
+            for username in self.room_username_list:
+                if username != self.user.username:
                     await self.channel_layer.group_send(
-                        f'user_{user.username}',
+                        f'user_{username}',
                         {
                             'type': 'receive_json',
                             'message_type': 'text',

django_chatter/static/css/chat-window.css

@@ -116,7 +116,7 @@ AI-------------------------------------------------------------------
 
 .message-received-container {
   display: flex;
-  align-items: center;
+  align-items: flex-end;
 }
 
 .receiver-bubble {
@@ -130,6 +130,7 @@ AI-------------------------------------------------------------------
   width: 30px;
   height: 30px;
   margin-left: 10px;
+  margin-bottom: 10px;
 }
 
 /*Messages received by other users in the chat have these settings.*/