<div class="chat-view" [class.active]="conversation">
  <div class="messages-wrapper">
    <div class="messages-container" #messagesContainer>
      <div
        *ngFor="let message of conversation?.messages; let isLast = last"
        class="message"
        [class.user-message]="message.sender === 'user'"
        [class.agent-message]="message.sender === 'agent'"
      >
        <!-- Message de l'utilisateur -->
        <div class="message-content" *ngIf="message.sender === 'user'">
          <div class="message-bubble user-bubble">
            <!-- Fichiers attachés -->
            <div class="message-files" *ngIf="message.files && message.files.length > 0">
              <div class="file-item" *ngFor="let file of message.files">
                <div class="file-preview" *ngIf="file.preview">
                  <img [src]="file.preview" [alt]="file.file.name">
                </div>
                <div class="file-icon" *ngIf="!file.preview" [innerHTML]="getFileIcon(file.file)">
                </div>
                <div class="file-details">
                  <span class="file-name">{{ file.file.name }}</span>
                  <span class="file-size">{{ formatFileSize(file.file.size) }}</span>
                </div>
                <a *ngIf="file.url" [href]="file.url" download [attr.aria-label]="'Télécharger ' + file.file.name" class="file-download">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                    <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5"/>
                    <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708z"/>
                  </svg>
                </a>
              </div>
            </div>

            <!-- Texte du message -->
            <p *ngIf="message.content">{{ message.content }}</p>
          </div>
        </div>

        <!-- Message de l'agent -->
        <div class="message-content" *ngIf="message.sender === 'agent'">
          <div class="message-bubble agent-bubble">
            <p>{{ message.content }}</p>
          </div>

          <!-- Actions pour les messages de l'agent -->
          <div class="message-actions">
            <button
              class="action-button"
              (click)="onCopyMessage(message.content)"
              [attr.aria-label]="'Copier le message'"
            >
              <fa-icon [icon]="faCopy"></fa-icon>
            </button>
            <button
              class="action-button"
              (click)="onRegenerateMessage()"
              [attr.aria-label]="'Régénérer la réponse'"
              *ngIf="isLast"
            >
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                   class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
                <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2z"/>
                <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466"/>
              </svg>
            </button>
          </div>
        </div>
      </div>

      <!-- Indicateur de saisie -->
      <div class="message agent-message" *ngIf="isTyping">
        <div class="message-content">
          <div class="message-bubble agent-bubble typing-indicator">
            <span></span>
            <span></span>
            <span></span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Input de chat -->
  <div class="chat-input-container">
    <app-chat-input
      (messageSent)="onMessageSent($event)"
    ></app-chat-input>
  </div>
</div>
