Added file uploading + drag'n'drop

package-lock.json

@@ -15,7 +15,7 @@
         "@angular/forms": "^21.2.0",
         "@angular/platform-browser": "^21.2.0",
         "@angular/router": "^21.2.0",
-        "@chatenium/chatenium-sdk": "^1.0.10",
+        "@chatenium/chatenium-sdk": "^1.0.11",
         "@ngx-translate/core": "^17.0.0",
         "@ngx-translate/http-loader": "^17.0.0",
         "@taiga-ui/addon-charts": "^5.1.0",
@@ -988,9 +988,9 @@
       }
     },
     "node_modules/@chatenium/chatenium-sdk": {
-      "version": "1.0.10",
+      "version": "1.0.11",
-      "resolved": "https://registry.npmjs.org/@chatenium/chatenium-sdk/-/chatenium-sdk-1.0.10.tgz",
+      "resolved": "https://registry.npmjs.org/@chatenium/chatenium-sdk/-/chatenium-sdk-1.0.11.tgz",
-      "integrity": "sha512-AhWtM4bD3p1nXW/tC/eiBlPGesk/vjwjf1CPuScYaD2OwmXLGZXNZPXe3g6T5dRAA1Zyo18QkWEJXglA+6VZSQ==",
+      "integrity": "sha512-2vkN+W541bMEdWTStrXorsEmbQ9mva6drKOU11yFdVMzpPEsMJr9bvk5Lwc5COpOgNTIbnFSAkzPg+0USFruVQ==",
       "dependencies": {
         "@faker-js/faker": "^10.4.0",
         "axios": "^1.14.0",

package.json

@@ -18,7 +18,7 @@
     "@angular/forms": "^21.2.0",
     "@angular/platform-browser": "^21.2.0",
     "@angular/router": "^21.2.0",
-    "@chatenium/chatenium-sdk": "^1.0.10",
+    "@chatenium/chatenium-sdk": "^1.0.11",
     "@ngx-translate/core": "^17.0.0",
     "@ngx-translate/http-loader": "^17.0.0",
     "@taiga-ui/addon-charts": "^5.1.0",

src/app/chat/dm/dm.ts

@@ -42,12 +42,6 @@ export class Dm implements OnInit {
   async sendMessage(message: string, files: FileDataWithPreview[] | null) {
     const session = this.serviceManager.currentSession();
     if (session != null) {
-      await this.store.service.sendMessage(message, null, null, files, <FileUploadProgressListener>{
-        fileProgressUpdate: (fileId, allChunks, chunksDone) => {
-          this.uploadProgressUpdate(fileId, allChunks, chunksDone)
-        }
-      })
-
       let attachments: Attachment[] = []
       files?.forEach(file => {
         attachments.push({
@@ -75,10 +69,16 @@ export class Dm implements OnInit {
         replyToId: "",
         forwardedFromName: ""
       }])
+
+      await this.store.service.sendMessage("", message, null, null, files, <FileUploadProgressListener>{
+        fileProgressUpdate: (tempMsgId, fileId, allChunks, chunksDone) => {
+          this.uploadProgressUpdate(tempMsgId, fileId, allChunks, chunksDone)
+        }
+      })
     }
   }
 
-  uploadProgressUpdate(fileId: string, allChunks: number, chunksDone: number) {
+  uploadProgressUpdate(tempMsgId: string, fileId: string, allChunks: number, chunksDone: number) {
     console.log(fileId, allChunks, chunksDone)
   }
 

src/app/chat/elements/message-box/message-box-viewmodel.ts

@@ -11,11 +11,5 @@ export class MessageBoxViewModel {
 
   message = signal<string>("")
   files = signal<FileDataWithPreview[]>([])
-
+  dialogOpen = signal<boolean>(false)
-  get dialogOpen() {
-    return this.files().length != 0
-  }
-  set dialogOpen(value: boolean) {
-    this.files.set([])
-  }
 }

src/app/chat/elements/message-box/message-box.html

@@ -1,5 +1,5 @@
 <div id="dragOverlay" tuiGroup orientation="vertical" [class.show]="isDraggingOverWindow">
-  <div class="method">
+  <div class="method" (drop)="onDrop($event)" (dragover)="onDragOver($event)">
     <div class="icon-holder">
       <tui-icon icon="@tui.file-up"/>
     </div>
@@ -33,7 +33,7 @@
       ></textarea>
     </tui-textfield>
 
-    <button tuiButton iconStart="@tui.send" (click)="sendMessageWithCaption(caption)"></button>
+    <button tuiButton iconStart="@tui.send" (click)="sendMessageWithCaption()"></button>
   </div>
 </ng-template>
 

src/app/chat/elements/message-box/message-box.ts

@@ -1,4 +1,4 @@
-import {Component, HostListener, inject, input} from '@angular/core';
+import {ChangeDetectorRef, Component, HostListener, inject, input} from '@angular/core';
 import {
   TuiAppearance,
   TuiButton,
@@ -40,6 +40,8 @@ import {TuiTextarea, TuiTextareaComponent} from '@taiga-ui/kit';
 export class MessageBox {
   viewModel = input.required<MessageBoxViewModel>()
 
+  cdr = inject(ChangeDetectorRef)
+
   textareaHeight = 25
   messageBoxRadius = 200
 
@@ -68,6 +70,22 @@ export class MessageBox {
     }
   }
 
+  onDragOver(event: DragEvent) {
+    // This is the "magic" line that enables the drop event to fire
+    event.preventDefault();
+    event.stopPropagation();
+  }
+
+  onDrop(event: DragEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    const files = event.dataTransfer?.files;
+    if (files) this.processFiles(files)
+    this.isDraggingOverWindow = false
+    this.cdr.detectChanges();
+  }
+
   onTextAreaInput(e: HTMLTextAreaElement) {
     const calculatedHeight = e.value.split(/\r?\n/).length * 25
     const calculatedRadius = (200 - this.textareaHeight)
@@ -79,8 +97,10 @@ export class MessageBox {
     this.processFiles(event.target.files)
   }
 
-  sendMessageWithCaption(e: TuiTextareaComponent) {
+  sendMessageWithCaption() {
-    this.viewModel().onMessageSend((e.content() as string), this.viewModel().files())
+    this.viewModel().onMessageSend(this.viewModel().message(), this.viewModel().files())
+    this.viewModel().files.set([])
+    this.viewModel().dialogOpen.set(false)
   }
 
   async processFiles(fileList: FileList) {
@@ -116,8 +136,8 @@ export class MessageBox {
         height: height,
         width: width,
       })
-      console.log(this.viewModel().files())
     }
+    this.viewModel().dialogOpen.set(true)
 
     function makePicturePreview(file: File): Promise<{ preview: string, height: number, width: number }> {
       return new Promise((resolve, reject) => {
@@ -143,6 +163,8 @@ export class MessageBox {
       });
     }
   }
+
+  protected readonly console = console;
 }
 
 /**

src/app/chat/elements/messages/messages.html

@@ -12,11 +12,13 @@
       </div>
       <div class="bubble">
         <span class="message-text">{{message.message}}</span>
-        @for (file of message.files; track file) {
+        <masonry style="max-height: 300px">
-          @if (file.type == "image") {
+          @for (file of message.files; track file) {
-            <img [src]="file.path"/>
+            @if (file.type == "image") {
+              <img [src]="file.path" style="width: 100%; height: 100%; max-height: 300px; object-fit: cover; border-radius: 25px"/>
+            }
           }
-        }
+        </masonry>
       </div>
       <div class="below"></div>
     </div>

src/app/chat/elements/messages/messages.scss

@@ -57,8 +57,9 @@
       min-width: 250px;
       min-height: 40px;
       display: flex;
-      align-items: center;
+      flex-direction: column;
-      padding: 5px;
+      justify-content: center;
+      padding: 10px;
 
       .message-text {
         white-space: none;

src/app/chat/elements/messages/messages.ts

@@ -3,11 +3,13 @@ import {Message} from '@chatenium/chatenium-sdk/domain/dmService.schema';
 import {Message as NetworkMessage} from '@chatenium/chatenium-sdk/domain/textChannelService.schema'
 import {ServiceManager} from '../../../service-manager';
 import {DatePipe} from '@angular/common';
+import {Masonry} from '../masonry/masonry';
 
 @Component({
   selector: 'messages',
   imports: [
-    DatePipe
+    DatePipe,
+    Masonry
   ],
   templateUrl: './messages.html',
   styleUrl: './messages.scss',