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"
      (click)="onClickStickerSelector()"
    >
      <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-primary-darkest"
      mat-icon-button
      type="submit"
      aria-label="Send message"
    >
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
        stroke-width="2" stroke-linecap="butt" stroke-linejoin="round">
        <path d="M12 19V6M5 12l7-7 7 7" /></svg>
    </button>
  </form>
</div>