@if(imageUrl) {
<div class="files">
  <div class="filesView">
    @if (['png', 'jpg', 'jpeg', 'gif'].includes(getFileType(imageUrl))) {
    <img
      src="{{ imageUrl }}"
      alt="image"
      loading="lazy"
      [ngStyle]="{
        height:
          openOnSecondaryChat && viewWidth >= RESPONSIVE_THRESHOLD
            ? '5vw'
            : '7.5vw'
      }"
      (click)="showOverlay(imageUrl)"
    />
    } @if (['pdf', 'doc', 'txt'].includes(getFileType(imageUrl))) {
    <a href="{{ imageUrl }}" target="_blank">
      <img
        class="otherFiles"
        src="./assets/img/attachments/{{ getFileType(imageUrl) }}.png"
        alt="image"
        loading="lazy"
        [ngStyle]="{
          height:
            openOnSecondaryChat && viewWidth >= RESPONSIVE_THRESHOLD
              ? '3vw'
              : '5vw'
        }"
    /></a>
    } @if (['mp3', 'wav', 'wma'].includes(getFileType(imageUrl))) {
    <audio
      controls
      preload="auto"
      src="{{ imageUrl }}"
      loading="lazy"
      [ngStyle]="{
        width:
          openOnSecondaryChat && viewWidth >= RESPONSIVE_THRESHOLD
            ? '250px'
            : ''
      }"
    ></audio>
    }@if (getFileType(imageUrl) === 'mp4') {
    <div (click)="showOverlay(imageUrl)">
      <video
        src="{{ imageUrl }}"
        alt="video"
        loading="lazy"
        [ngStyle]="{
          height:
            openOnSecondaryChat && viewWidth >= RESPONSIVE_THRESHOLD
              ? '5vw'
              : '7.5vw'
        }"
      ></video>
    </div>
    }
  </div>
</div>
}