Update

src/app/chat/dm/dm.html

@@ -1,13 +1,13 @@
 @defer (when store) {
   <navbar>
     <div class="items-left">
-       <oimg [src]="store.chatData.pfp" height="50px" width="50px" [radius]="15"></oimg>
+       <oimg [src]="store.chatData().pfp" height="50px" width="50px" [radius]="15"></oimg>
       <div class="chat-data">
-        @if (store.chatData.displayName == "") {
-          <span class="main-name">{{'@'+store.chatData.username}}</span>
+        @if (store.chatData().displayName == "") {
+          <span class="main-name">{{'@'+store.chatData().username}}</span>
         } @else {
-          <span class="main-name">{{store.chatData.displayName}}</span>
-          <span class="alt-name">{{'@'+store.chatData.username}}</span>
+          <span class="main-name">{{store.chatData().displayName}}</span>
+          <span class="alt-name">{{'@'+store.chatData().username}}</span>
         }
       </div>
     </div>
@@ -17,11 +17,10 @@
         <tui-icon icon="@tui.phone"/>
       </button>
     </div>
+    {{chatid}}
   </navbar>
 
-  <main>
+  <messages [messages]="store.messages()"/>
 
-  </main>
-
-  <message-box/>
+  <message-box [viewModel]="store.messageBox"/>
 }

src/app/chat/dm/dm.scss

@@ -1,5 +1,5 @@
 :host {
-  height: 100%;
+  height: 95svh;
   display: grid;
   grid-template-rows: 70px minmax(0, 1fr) auto;
 

src/app/chat/dm/dm.ts

@@ -1,4 +1,4 @@
-import {Component, inject, OnInit} from '@angular/core';
+import {Component, inject, OnInit, signal} from '@angular/core';
 import {DmStorage, ServiceManager} from '../../service-manager';
 import {ActivatedRoute} from '@angular/router';
 import {DMService} from '@chatenium/chatenium-sdk/services/dmService';
@@ -7,6 +7,10 @@ import {Navbar} from '../elements/navbar/navbar';
 import {Oimg} from '../elements/oimg/oimg';
 import {TuiButton, TuiIcon} from '@taiga-ui/core';
 import {MessageBox} from '../elements/message-box/message-box';
+import {Messages} from '../elements/messages/messages';
+import {Chat} from '@chatenium/chatenium-sdk/domain/chatService.schema';
+import {Message} from '@chatenium/chatenium-sdk/domain/dmService.schema';
+import {MessageBoxViewModel} from '../elements/message-box/message-box-viewmodel';
 
 @Component({
   selector: 'app-dm',
@@ -15,7 +19,8 @@ import {MessageBox} from '../elements/message-box/message-box';
     Oimg,
     TuiButton,
     TuiIcon,
-    MessageBox
+    MessageBox,
+    Messages
   ],
   templateUrl: './dm.html',
   styleUrl: './dm.scss',
@@ -31,14 +36,23 @@ export class Dm implements OnInit {
     return this.serviceManager.dmServices()[this.chatid]
   }
 
+  async sendMessage(message: string) {
+    await this.store.service.sendMessage(message)
+  }
+
+  onWsListen(action: string, message: string) {
+    console.log(action, message)
+  }
+
   ngOnInit() {
-    this.route.params.subscribe(params => {
+    this.route.params.subscribe(async params => {
       const chatid = params['chatid']
       this.chatid = chatid
       console.log(this.serviceManager.chats())
       const session = this.serviceManager.currentSession();
       const chatData = this.serviceManager.chats().find(chat => chat.chatid == chatid)
 
+      // Setup storage
       if (!this.serviceManager.dmServices()[chatid] && session != null && chatData != null) {
         this.serviceManager.dmServices()[chatid] = {
           service: new DMService(
@@ -46,11 +60,20 @@ export class Dm implements OnInit {
             session.token,
             chatid,
             this.indexedDb.getApi(),
-            () => {}
+            (action, data) => {
+              this.onWsListen(action, data)
+            }
           ),
-          chatData: chatData
+          chatData: signal<Chat>(chatData),
+          messages: signal<Message[]>([]),
+          messageBox: new MessageBoxViewModel(
+            (msg) => this.sendMessage(msg),
+          )
         }
       }
+
+      this.store.messages.set(await this.serviceManager.dmServices()[chatid].service.get())
+      await this.store.service.joinWebSocketRoom()
     })
   }
 }