Added attachment support

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

@@ -13,10 +13,35 @@
   </div>
 </div>
 
+<ng-template [(tuiDialog)]="viewModel().dialogOpen" [tuiDialogOptions]="{label: 'chat.elements.messageBox.fileUploadDialog.label'|translate}">
+  <masonry [maxColSize]="2" style="overflow-y: scroll; height: 500px">
+    @for (file of viewModel().files(); track file) {
+      @if (file.type == "image") {
+        <img [src]="file.preview" style="width: 100%; height: 100%; object-fit: fill;"/>
+      }
+    }
+  </masonry>
+
+  <div style="margin-top: 10px; display: flex; gap: 10px; width: 100%">
+    <tui-textfield style="width: 100%">
+      <label tuiLabel>{{"chat.elements.messageBox.placeholder"|translate}}</label>
+      <textarea
+        #caption
+        placeholder="{{ 'chat.elements.messageBox.message'|translate }}"
+        [(ngModel)]="viewModel().message"
+        tuiTextarea
+      ></textarea>
+    </tui-textfield>
+
+    <button tuiButton iconStart="@tui.send" (click)="sendMessageWithCaption(caption)"></button>
+  </div>
+</ng-template>
+
 <div id="message-box" [style]="'border-radius:'+messageBoxRadius+'px;'">
   <div class="items-left">
-    <button tuiButton appearance="flat">
+    <button tuiButton appearance="flat" (click)="uplInput.click()">
       <tui-icon icon="@tui.file-up"/>
+      <input #uplInput type="file" (change)="handleFileInput($event)" multiple hidden/>
     </button>
 
     <button tuiButton appearance="flat">
@@ -29,7 +54,7 @@
           [class.hidden]="message.value != ''">{{ "chat.elements.messageBox.placeholder"|translate }}</span>
   </div>
   <div class="items-right">
-    <button tuiButton appearance="flat" (click)="viewModel().onMessageSend(message.value)">
+    <button tuiButton appearance="flat" (click)="viewModel().onMessageSend(message.value, null)">
       <tui-icon icon="@tui.send"/>
     </button>
   </div>