Chat sends messages

src/app/services/chat-message-handler.ts

@@ -1,8 +1,8 @@
-import { Observable, Subject } from 'rxjs';
 import { MatrixClient } from 'matrix-js-sdk/src/client';
 import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
 import { EventTimeline } from 'matrix-js-sdk/src/models/event-timeline';
 import { Room } from 'matrix-js-sdk/src/models/room';
+import { Subject } from 'rxjs';
 
 export class ChatMessageHandler {
     constructor(

src/app/services/chat.service.ts

@@ -1,16 +1,14 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import * as olm from 'olm';
-global.Olm = olm;
 import * as matrix from 'matrix-js-sdk';
 import { MatrixClient } from 'matrix-js-sdk/src/client';
-import { RoomMember } from 'matrix-js-sdk/src/models/room';
-import { Room } from 'matrix-js-sdk/src/models/room';
-import { EventTimeline } from 'matrix-js-sdk/src/models/event-timeline';
-import { MatrixLoginDto } from '../entities/matrix-login-dto';
 import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
-import { Observable, Subject } from 'rxjs';
+import { Room, RoomMember } from 'matrix-js-sdk/src/models/room';
+import * as olm from 'olm';
+import { Observable } from 'rxjs';
+import { MatrixLoginDto } from '../entities/matrix-login-dto';
 import { ChatMessageHandler } from './chat-message-handler';
+global.Olm = olm;
 
 @Injectable({
   providedIn: 'root'
@@ -67,6 +65,14 @@ export class ChatService {
     return this.matrixClient;
   }
 
+  sendMessage = (roomId: string, body: string) => {
+    const message = {
+      body,
+      msgtype: 'm.text'
+    };
+    return this.matrixClient.sendMessage(roomId, message);
+  }
+
   getRoomMembers(roomId: string): RoomMember[] {
     const room: Room = this.matrixClient?.getRoom(roomId) as Room;
     return room?.getJoinedMembers();

src/app/views/chat/chat.component.css

@@ -3,3 +3,7 @@
     height: 100%;
     overflow-y: scroll;
 }
+
+.send-message-input {
+    width: 100%;
+}

src/app/views/chat/chat.component.html

@@ -1,18 +1,28 @@
 <mat-grid-list cols="5">
-    <mat-grid-tile colspan=4>
-        <mat-list class="chat-messages">
-            <mat-list-item #messageItem *ngFor="let message of messages">
-              <h3 matLine> {{message.getSender()}} </h3>
-              <p matLine>
-                {{message.getContent().body}}
-              </p>
-            </mat-list-item>
-          </mat-list>
-    </mat-grid-tile>
+  <mat-grid-tile colspan=4>
+    <mat-list #messageList class="chat-messages">
+      <mat-list-item #messageItem *ngFor="let message of messages; trackBy: getMessageId">
+        <h3 matLine> {{message.getSender()}} </h3>
+        <p matLine>
+          {{message.getContent().body}}
+        </p>
+      </mat-list-item>
+    </mat-list>
+  </mat-grid-tile>
 
-    <mat-grid-tile>
-        <mat-list>
-          Miembros
-        </mat-list>
-    </mat-grid-tile>
-  </mat-grid-list>  
+  <mat-grid-tile>
+    <mat-list>
+      Miembros
+    </mat-list>
+  </mat-grid-tile>
+
+  <mat-grid-tile colspan=4>
+    <mat-form-field class="send-message-input">
+      <input [(ngModel)]="messageInput" (keyup.enter)="sendMessage()" matInput placeholder="Type message here">
+    </mat-form-field>
+  </mat-grid-tile>
+
+  <mat-grid-tile colspan=1>
+    <button mat-raised-button class="btn btn-default" (click)="sendMessage()">Send</button>
+  </mat-grid-tile>
+</mat-grid-list>

src/app/views/chat/chat.component.ts

@@ -1,9 +1,7 @@
-import { Component, Input, OnInit, AfterViewInit, ElementRef, ViewChildren, ChangeDetectorRef } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, Input, OnInit, QueryList, ViewChild, ViewChildren } from '@angular/core';
+import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
 import { ChatService } from 'src/app/services/chat.service';
 
-import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
-import { QueryList } from '@angular/core';
-import { Observable } from 'rxjs';
 
 @Component({
   selector: 'app-chat',
@@ -12,8 +10,10 @@ import { Observable } from 'rxjs';
 })
 export class ChatComponent implements OnInit, AfterViewInit {
   @Input() roomId: string;
+  @ViewChild('messageList', { read: ElementRef }) messageList: ElementRef;
   @ViewChildren('messageItem', { read: ElementRef }) messageItems: QueryList<ElementRef>;
   messages: MatrixEvent[] = new Array();
+  messageInput: string;
 
   constructor(
     private chatService: ChatService,
@@ -27,20 +27,30 @@ export class ChatComponent implements OnInit, AfterViewInit {
       messages$.subscribe({
         next: (event: MatrixEvent) => {
           this.messages.push(event);
-          this.changeDetection.detectChanges();
+          this.changeDetection.detectChanges(); // TODO theoretically it is not needed
         }
       });
     }
   }
 
+  // Always scroll to last chat message.
   ngAfterViewInit(): void {
-    // Always scroll to last chat message.
     this.messageItems.last?.nativeElement?.scrollIntoView(false);
     this.messageItems.changes.subscribe({
       next: (c) => {
-        this.messageItems.last?.nativeElement?.scrollIntoView(false);
+        // this.messageItems.last?.nativeElement?.scrollIntoView(false);
+        this.messageList.nativeElement.scrollTop = this.messageItems.last?.nativeElement?.offsetTop;
       }
     });
   }
 
+  sendMessage(): void {
+    this.chatService.sendMessage(this.roomId, this.messageInput);
+    this.messageInput = '';
+  }
+
+  getMessageId(index: number, message: any): string {
+    return message.getId();
+  }
+
 }