fix chat messages

src/app/shared/chat/messages/messages.page.html

@@ -15,13 +15,19 @@
           </button>
         </div>
       </div>
-      <div class="d-flex" >
+      <div class="d-flex header-bottom" >
         
-        <ion-list *ngIf="roomMembers$ | async as memberList" >
+        <div class="header-bottom-icon">
+          <ion-icon *ngIf="ThemeService.currentTheme == 'default' " src="assets/icon/icons-user.svg"></ion-icon>
+          <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " src="assets/icon/theme/gov/icons-user.svg"></ion-icon>
+        </div>
 
-          <div *ngFor="let user of memberList" > {{ user.user.wxFullName }}, </div>
-          
+        <ion-list class="header-bottom-contacts"  *ngIf="roomMembers$ | async as memberList">
+          <ng-container *ngFor="let user of memberList; let i = index">
+            {{ user.user.wxFullName }}<ng-container *ngIf="i < memberList.length - 1">, </ng-container>
+          </ng-container>
         </ion-list>
+
       </div>
     </div>
     <ion-refresher name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
@@ -39,7 +45,7 @@
     <div 
       *ngFor="let message of roomMessage$ | async" class="messages-list-item-wrapper" 
       [ngClass]="{'my-message': message.sender.wxUserId === sessionStore.user.UserId, 'other-message': message.sender.wxUserId !== sessionStore.user.UserId}">
-      {{ message.message }}
+      {{ message.message }} == {{ message.id }}
     </div>
 
   </div>

src/app/shared/chat/messages/messages.page.scss

@@ -47,18 +47,15 @@
       .header-bottom-icon {
         width: rem(30);
         font-size: rem(25);
-        float: left;
         padding: 2px;
       }
 
       .header-bottom-contacts {
-        width: 275px;
         font-size: rem(15);
         color: #797979;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
-        float: left;
         padding: 5px;
         margin: 1px;
       }
@@ -171,7 +168,7 @@ ion-content {
 
     .other-message {
       margin: 10px 75px 10px 20px;
-      // background: #ebebeb;
+      background: #ebebeb;
       // float: left;
       // Styles for incoming messages from other users
       justify-content: flex-start;

src/app/shared/chat/messages/messages.page.ts

@@ -41,6 +41,7 @@ import { TableMemberList } from 'src/app/services/Repositorys/chat/data-source/r
 import { TableMessage } from 'src/app/services/Repositorys/chat/data-source/message/message-local-data-source.service';
 import { ChatPopoverPage } from '../../popover/chat-popover/chat-popover.page';
 import { Observable as  DexieObservable } from 'Dexie';
+import { Subscription } from 'rxjs';
 
 const IMAGE_DIR = 'stored-images';
 @Component({
@@ -119,6 +120,8 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
   roomMessage$: DexieObservable<TableMessage[]>
   roomMembers$:  DexieObservable<TableMemberList[] | undefined>
 
+  newMessagesStream!: Subscription 
+
   constructor(
     public popoverController: PopoverController,
     private modalController: ModalController,
@@ -151,6 +154,20 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
     this.roomMembers$ = this.roomRepositoryService.getRoomMemberByIdLive(this.roomId) as any
     this.roomRepositoryService.getRoomById(this.roomId)
     this.messageRepositoryService.listAllMessagesByRoomId(this.roomId)
+
+
+    this.newMessagesStream?.unsubscribe()
+    this.newMessagesStream = this.messageRepositoryService.subscribeToNewMessages(this.roomId).subscribe((e) => {
+ 
+      setTimeout(() => {
+        this.scrollToBottomClicked()
+      }, 10)
+      setTimeout(() => {
+        this.scrollToBottomClicked()
+      }, 200)
+      
+    })
+
   }
 
   sendTyping() {}
@@ -424,6 +441,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
     }
 
     this.messageRepositoryService.sendMessage(data)
+    this.textField = ''
   }