next-ucap-messenger/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.html

<div
  class="container"
  fxFlex="0 0 auto"
  fxLayout="row"
  fxLayoutAlign="center center"
>
  <div class="add-option">
    <button mat-icon-button class="material-icons" (click)="onClickFileInput()">
      <mat-icon>attach_file</mat-icon>
    </button>
    <input
      type="file"
      #fileInput
      style="display: none"
      multiple
      (change)="onChangeFileInput()"
    />

    <button mat-icon-button class="material-icons">
      <mat-icon>sentiment_satisfied_alt</mat-icon>
    </button>

    <button mat-icon-button class="material-icons">
      <mat-icon>g_translate</mat-icon>
    </button>
  </div>

  <form
    #replyForm="ngForm"
    (ngSubmit)="onSend($event)"
    (keydown.enter)="onSend($event)"
    fxFlex
    fxLayout="row"
    fxLayoutAlign="start center"
  >
    <mat-form-field
      class="message-text"
      fxFlex
      floatLabel="never"
      appearance="standard"
    >
      <textarea
        matInput
        #replyInput
        placeholder="Type your message"
        ngModel
        name="message"
        [matTextareaAutosize]="true"
        [matAutosizeMinRows]="1"
        [matAutosizeMaxRows]="20"
      ></textarea>
    </mat-form-field>

    <button
      class="send-message-button bg-accent-darkest"
      mat-icon-button
      type="submit"
      aria-label="Send message"
    >
      <i class="material-icons">
        send
      </i>
    </button>
  </form>
</div>