Update

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

@@ -1,12 +1,59 @@
-import { Component } from '@angular/core';
-import {TuiAppearance} from '@taiga-ui/core';
+import {Component, HostListener, inject, input} from '@angular/core';
+import {TuiAppearance, TuiButton, TuiGroup, TuiIcon, TuiScrollbarDirective} 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';
 
 @Component({
   selector: 'message-box',
   imports: [
-    TuiAppearance
+    TuiAppearance,
+    TranslatePipe,
+    TuiScrollbarDirective,
+    TuiGroup,
+    TuiIcon,
+    TuiButton,
+    FormsModule
   ],
   templateUrl: './message-box.html',
   styleUrl: './message-box.scss',
 })
-export class MessageBox {}
+export class MessageBox {
+  viewModel = input.required<MessageBoxViewModel>()
+
+  textareaHeight = 25
+  messageBoxRadius = 200
+
+  private dragCounter = 0;
+  isDraggingOverWindow = false;
+
+  @HostListener('window:dragenter', ['$event'])
+  onDragEnter(event: DragEvent) {
+    event.preventDefault();
+    this.dragCounter++;
+
+    if (this.dragCounter === 1) {
+      this.isDraggingOverWindow = true;
+      console.log("Drag entered the window area");
+    }
+  }
+
+  @HostListener('window:dragleave', ['$event'])
+  onDragLeave(event: DragEvent) {
+    event.preventDefault();
+    this.dragCounter--;
+
+    if (this.dragCounter === 0) {
+      this.isDraggingOverWindow = false;
+      console.log("Drag left the window completely");
+    }
+  }
+
+  onTextAreaInput(e: HTMLTextAreaElement) {
+    const calculatedHeight = e.value.split(/\r?\n/).length * 25
+    const calculatedRadius = (200 - this.textareaHeight)
+    this.textareaHeight = calculatedHeight > 180 ? 180 : calculatedHeight
+    this.messageBoxRadius = calculatedRadius < 30 ? 30 : calculatedRadius
+  }
+}