AIT_appIA/src/app/components/chat-input/chat-input.html

<div class="chat-input-container" (drop)="onFileDrop($event)" (dragover)="onDragOver($event)">

  <div class="attached-files" *ngIf="attachedFiles.length > 0">
    <div class="file-item" *ngFor="let attachedFile of attachedFiles">
      <div class="file-preview">
        <img *ngIf="attachedFile.preview" [src]="attachedFile.preview" alt="Preview">
        <div class="file-icon" *ngIf="!attachedFile.preview" [innerHTML]="getFileIcon(attachedFile.file.type)">
        </div>
      </div>
      <div class="file-info">
        <span class="file-name">{{ attachedFile.file.name }}</span>
        <span class="file-size">{{ formatFileSize(attachedFile.file.size) }}</span>
      </div>
      <button class="remove-file-button" (click)="removeFile(attachedFile.id)" [attr.aria-label]="'Supprimer le fichier'">
        <fa-icon [icon]="faTimes"></fa-icon>
      </button>
    </div>
  </div>

  <div class="input-wrapper">
    <textarea
      #messageInput
      [(ngModel)]="message"
      placeholder="Nouvelle conversation..."
      rows="1"
      [disabled]="disabled"
      (input)="onInputChange()"
    ></textarea>

    <div class="actions-row">
      <button class="attach-button" (click)="onAttach()" [attr.aria-label]="'Importer un fichier'">
        <fa-icon [icon]="faPaperclip"></fa-icon>
        <span>Importer un fichier</span>
      </button>

      <div class="right-actions">
        <button class="voice-button" (click)="onVoice()" [attr.aria-label]="'Message vocal'">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-soundwave" viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M8.5 2a.5.5 0 0 1 .5.5v11a.5.5 0 0 1-1 0v-11a.5.5 0 0 1 .5-.5m-2 2a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5m4 0a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5m-6 1.5A.5.5 0 0 1 5 6v4a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m8 0a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m-10 1A.5.5 0 0 1 3 7v2a.5.5 0 0 1-1 0V7a.5.5 0 0 1 .5-.5m12 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0V7a.5.5 0 0 1 .5-.5"/>
          </svg>
        </button>

        <button
          class="send-button"
          (click)="onSend()"
          [disabled]="(!message.trim() && attachedFiles.length === 0) || disabled"
          [attr.aria-label]="'Envoyer le message'"
        >
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-up" viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5"/>
          </svg>
        </button>
      </div>
    </div>
  </div>

  <input
    #fileInput
    type="file"
    [accept]="acceptedFileTypes"
    [multiple]="true"
    (change)="onFileSelected($event)"
    style="display: none;"
  />
</div>