Added attachment support

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

@@ -1,9 +1,22 @@
 import {Component, HostListener, inject, input} from '@angular/core';
-import {TuiAppearance, TuiButton, TuiGroup, TuiIcon, TuiScrollbarDirective} from '@taiga-ui/core';
+import {
+  TuiAppearance,
+  TuiButton,
+  TuiDialog,
+  TuiGroup,
+  TuiIcon,
+  TuiScrollbarDirective,
+  TuiTextfield
+} from '@taiga-ui/core';
 import {TranslatePipe} from '@ngx-translate/core';
 import {ServiceManager} from '../../../service-manager';
 import {MessageBoxViewModel} from './message-box-viewmodel';
 import {FormsModule} from '@angular/forms';
+import {v4 as uuidv4} from 'uuid';
+import {Masonry} from '../masonry/masonry';
+import {Oimg} from '../oimg/oimg';
+import {FileData} from '@chatenium/chatenium-sdk/domain/fileUploadService.schema';
+import {TuiTextarea, TuiTextareaComponent} from '@taiga-ui/kit';
 
 @Component({
   selector: 'message-box',
@@ -14,7 +27,12 @@ import {FormsModule} from '@angular/forms';
     TuiGroup,
     TuiIcon,
     TuiButton,
-    FormsModule
+    FormsModule,
+    TuiDialog,
+    Oimg,
+    Masonry,
+    TuiTextfield,
+    TuiTextarea
   ],
   templateUrl: './message-box.html',
   styleUrl: './message-box.scss',
@@ -56,4 +74,82 @@ export class MessageBox {
     this.textareaHeight = calculatedHeight > 180 ? 180 : calculatedHeight
     this.messageBoxRadius = calculatedRadius < 30 ? 30 : calculatedRadius
   }
+
+  handleFileInput(event: any) {
+    this.processFiles(event.target.files)
+  }
+
+  sendMessageWithCaption(e: TuiTextareaComponent) {
+    this.viewModel().onMessageSend((e.content() as string), this.viewModel().files())
+  }
+
+  async processFiles(fileList: FileList) {
+    for (let i = 0; i < fileList.length; i++) {
+      const file = fileList[i];
+      const type = file.type.split("/").shift() ?? ""
+      let preview = ""
+      let height = 0
+      let width = 0
+
+      console.log(type)
+
+      if (type == "image") {
+        try {
+          const imgData = await makePicturePreview(file)
+          console.log(imgData)
+          preview = imgData.preview
+          height = imgData.height
+          width = imgData.width
+        } catch (error) {
+          console.error(error)
+        }
+      }
+
+      console.log("push")
+      this.viewModel().files().push({
+        fileId: uuidv4(),
+        data: file,
+        name: file.name,
+        type: type,
+        extension: file.name.split(".").pop() ?? "",
+        preview: preview,
+        height: height,
+        width: width,
+      })
+      console.log(this.viewModel().files())
+    }
+
+    function makePicturePreview(file: File): Promise<{ preview: string, height: number, width: number }> {
+      return new Promise((resolve, reject) => {
+        const img = new Image();
+        const objectUrl = URL.createObjectURL(file);
+
+        img.onload = () => {
+          console.log("Loaded image")
+          resolve({
+            preview: objectUrl,
+            width: img.naturalWidth,
+            height: img.naturalHeight,
+          });
+        };
+
+        img.onerror = (err) => {
+          URL.revokeObjectURL(objectUrl);
+          console.error("Error loading image:", err);
+          reject(err);
+        };
+
+        img.src = objectUrl;
+      });
+    }
+  }
+}
+
+/**
+ * All the extra data for client-side rendering. (With finished messages these are generated on the server)
+ */
+export interface FileDataWithPreview extends FileData {
+  preview: string;
+  height: number;
+  width: number;
 }