refactor(chat-messages): use CdkTextareaAutosize for chat input

Replace the hand-rolled textarea auto-resize logic in SiChatInputComponent
with Angular CDK's CdkTextareaAutosize directive (cdkAutosizeMinRows="1",
cdkAutosizeMaxRows="8"). The 30vh viewport cap is preserved via CSS
(max-block-size + overflow-y: auto) instead of JS.

Removes setTextareaHeight/adjustTextareaHeight and the (input) handler;
behavior (min 1 row, max 8 rows, capped at 30% viewport) is unchanged.

Author: chintankavathia

projects/element-ng/chat-messages/si-chat-input.component.html

@@ -19,6 +19,9 @@
     <label class="form-label d-none" [for]="id">{{ label() | translate }}</label>
     <textarea
       #textInput
+      cdkTextareaAutosize
+      cdkAutosizeMinRows="1"
+      cdkAutosizeMaxRows="8"
       class="chat-textarea w-100 border-0"
       rows="1"
       [id]="id"
@@ -27,7 +30,6 @@
       [maxlength]="maxLength() || null"
       [(ngModel)]="value"
       (keydown)="onKeyDown($event)"
-      (input)="adjustTextareaHeight($event)"
     ></textarea>
   </div>
 

projects/element-ng/chat-messages/si-chat-input.component.scss

@@ -29,11 +29,13 @@
 .chat-textarea {
   // Prevent layout shift on first input
   min-block-size: 1lh;
+  max-block-size: 30vh;
   font-family: inherit;
   padding-block: 0;
   display: block;
   outline: none;
   resize: none;
+  overflow-y: auto;
   background-color: transparent;
 
   &::placeholder {

projects/element-ng/chat-messages/si-chat-input.component.ts

@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 import { CdkMenuTrigger } from '@angular/cdk/menu';
+import { CdkTextareaAutosize } from '@angular/cdk/text-field';
 import {
   AfterViewInit,
   booleanAttribute,
@@ -80,6 +81,7 @@ export interface ChatInputAttachment extends Attachment {
   selector: 'si-chat-input',
   imports: [
     CdkMenuTrigger,
+    CdkTextareaAutosize,
     FormsModule,
     SiIconComponent,
     SiTranslatePipe,
@@ -436,23 +438,14 @@ export class SiChatInputComponent implements AfterViewInit {
 
   ngAfterViewInit(): void {
     const textarea = this.textInput();
-    if (textarea?.nativeElement) {
-      this.setTextareaHeight(textarea.nativeElement);
-
-      if (this.autoFocus()) {
-        // Use setTimeout to ensure the element is fully rendered
-        setTimeout(() => {
-          textarea.nativeElement.focus();
-        }, 0);
-      }
+    if (textarea?.nativeElement && this.autoFocus()) {
+      // Use setTimeout to ensure the element is fully rendered
+      setTimeout(() => {
+        textarea.nativeElement.focus();
+      }, 0);
     }
   }
 
-  protected adjustTextareaHeight(event: Event): void {
-    const textarea = event.target as HTMLTextAreaElement;
-    this.setTextareaHeight(textarea);
-  }
-
   /**
    * Focus the textarea input
    */
@@ -487,24 +480,4 @@ export class SiChatInputComponent implements AfterViewInit {
     event.stopPropagation();
     this.dragOver = true;
   }
-
-  private setTextareaHeight(textarea: HTMLTextAreaElement): void {
-    textarea.style.blockSize = 'auto';
-
-    const computedStyle = window.getComputedStyle(textarea);
-    const lineHeight =
-      parseInt(computedStyle.lineHeight, 10) || parseInt(computedStyle.fontSize, 10) * 1.2;
-    const paddingTop = parseInt(computedStyle.paddingBlockStart, 10) || 0;
-    const paddingBottom = parseInt(computedStyle.paddingBlockEnd, 10) || 0;
-    const minHeight = lineHeight + paddingTop + paddingBottom;
-
-    const viewportHeight = window.innerHeight;
-    const maxViewportHeight = viewportHeight * 0.3;
-    const maxLinesHeight = lineHeight * 8;
-    const maxHeight = Math.min(maxViewportHeight, maxLinesHeight) + paddingTop + paddingBottom;
-
-    const scrollHeight = textarea.scrollHeight;
-    const finalHeight = Math.max(Math.min(scrollHeight, maxHeight), minHeight);
-    textarea.style.height = finalHeight + 'px';
-  }
 }