receive user typing

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

@@ -1,6 +1,5 @@
 import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
 import { AnimationController, GestureController, IonRange, ModalController, PopoverController } from '@ionic/angular';
-import { ChatService } from 'src/app/services/chat.service';
 import { ToastService } from 'src/app/services/toast.service';
 import { ChatOptionsPopoverPage } from 'src/app/shared/popover/chat-options-popover/chat-options-popover.page';
 import { MessagesOptionsPage } from 'src/app/shared/popover/messages-options/messages-options.page';
@@ -16,7 +15,6 @@ import { ViewEventPage } from 'src/app/modals/view-event/view-event.page';
 import { Storage } from '@ionic/storage';
 import { RochetChatConnectorService } from 'src/app/services/chat/rochet-chat-connector.service'
 import { MessageService } from 'src/app/services/chat/message.service';
-import { CameraService } from 'src/app/services/camera.service';
 import { FileType } from 'src/app/models/fileType';
 import { SearchPage } from 'src/app/pages/search/search.page';
 import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
@@ -42,6 +40,8 @@ import { TableMessage } from 'src/app/module/chat/data/data-source/message/messa
 import { TableMemberList } from 'src/app/module/chat/data/data-source/room/rooom-local-data-source.service';
 import { MessageInputDTO } from 'src/app/module/chat/data/dto/message/messageInputDtO';
 import { RoomListItemOutPutDTO } from 'src/app/module/chat/data/dto/room/roomListOutputDTO';
+import { UserTypingServiceRepository } from 'src/app/module/chat/data/repository/user-typing-repository.service';
+import { UserTypingList } from 'src/app/module/chat/data/data-source/userTyping/user-typing-local-data-source.service';
 
 
 const IMAGE_DIR = 'stored-images';
@@ -109,6 +109,8 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
   audioDuration = 0;
   audioTimer: any;
   @ViewChild('range', { static: false }) range: IonRange;
+  @ViewChild('array') myInputRef!: ElementRef;
+
   userName = "";
   room: any = new Array();
   roomName: any;
@@ -120,7 +122,8 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
   roomData$: DexieObservable<RoomListItemOutPutDTO | undefined>
   roomMessage$: DexieObservable<TableMessage[]>
   roomMembers$:  DexieObservable<TableMemberList[] | undefined>
-
+  //userTyping$:  DexieObservable<UserTypingList[] | undefined>
+  userTyping$:  UserTypingList[] | undefined
   newMessagesStream!: Subscription
 
   constructor(
@@ -135,7 +138,6 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
     public ThemeService: ThemeService,
     private storage: Storage,
     public RochetChatConnectorService: RochetChatConnectorService,
-    private CameraService: CameraService,
     private sanitiser: DomSanitizer,
     private file: File,
     private platform: Platform,
@@ -143,7 +145,8 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
     public p: PermissionService,
     private FileValidatorService: FileValidatorService,
     private roomRepositoryService: RoomRepositoryService,
-    private messageRepositoryService: MessageRepositoryService
+    private messageRepositoryService: MessageRepositoryService,
+    private userTypingServiceRepository: UserTypingServiceRepository,
   ) {
     // update
     this.checkAudioPermission()
@@ -156,6 +159,15 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
     this.roomRepositoryService.getRoomById(this.roomId)
     this.messageRepositoryService.listAllMessagesByRoomId(this.roomId)
 
+    this.userTypingServiceRepository.getUserTypingLive().subscribe((e) => {
+      const arrayNames = e.map(e => e.userName)
+      this.userTyping$ = e as any
+
+      const uniqueArray = [...new Set(arrayNames)];
+
+      (this.myInputRef.nativeElement as HTMLDivElement).innerHTML = '::'+ uniqueArray
+      this.scrollToBottomClicked()
+    })
 
     this.newMessagesStream?.unsubscribe()
     this.newMessagesStream = this.messageRepositoryService.subscribeToNewMessages(this.roomId).subscribe((e) => {
@@ -169,9 +181,16 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
 
     })
 
+    //this.userTyping$ = this.userTypingMemoryDataSource.select(state => state) as any
+
+    // let a = this.userTypingMemoryDataSource.select(state => state).subscribe((e) => {
+    //   this.userTyping$ = e as any
+    // })
   }
 
-  sendTyping() {}
+  sendTyping() {
+    this.userTypingServiceRepository.addUserTyping(this.roomId)
+  }
 
   async ChatMessageDebuggingPage() {