<div class="ai-chat-panel">

  <div #messagesContainer class="messages-area">

    @if (messages.length === 0 && !currentAssistantText && !error) {
      <div class="welcome-hint">
        <lucide-icon [img]="Sparkles" [size]="18"></lucide-icon>
        <p>{{ 'sessionAiChatPanel.welcome' | translate }}</p>
        <p class="welcome-sub">
          {{ 'sessionAiChatPanel.welcomeSub' | translate }}
        </p>
      </div>
    }

    @for (m of messages; track m) {
      <div class="msg" [class.msg--user]="m.role === 'user'" [class.msg--assistant]="m.role === 'assistant'">
        <div class="msg-content">{{ m.content }}</div>
        @if (m.role === 'assistant') {
          <button
            type="button"
            class="msg-action"
            [disabled]="!canSaveToJournal"
            [title]="(canSaveToJournal ? 'sessionAiChatPanel.saveReplyTitle' : 'sessionAiChatPanel.sessionEnded') | translate"
            (click)="onSaveToJournal(m.content)">
            <lucide-icon [img]="BookmarkPlus" [size]="12"></lucide-icon>
            {{ 'sessionAiChatPanel.toJournal' | translate }}
          </button>
        }
      </div>
    }

    <!-- Stream en cours : on affiche les tokens au fil de l'eau. -->
    @if (currentAssistantText) {
      <div class="msg msg--assistant msg--streaming">
        <div class="msg-content">{{ currentAssistantText }}<span class="cursor">▍</span></div>
      </div>
    }

    @if (error) {
      <p class="error-hint">{{ error }}</p>
    }
  </div>

  <div class="composer">
    <textarea
      class="composer-input"
      [(ngModel)]="input"
      name="aiChatInput"
      rows="2"
      [placeholder]="(isStreaming ? 'sessionAiChatPanel.replying' : 'sessionAiChatPanel.inputPlaceholder') | translate"
      [disabled]="isStreaming"
    (keydown.control.enter)="send()"></textarea>

    <div class="composer-actions">
      <button type="button"
        class="btn-link"
        [disabled]="messages.length === 0 && !currentAssistantText"
        (click)="clearConversation()"
        [title]="'sessionAiChatPanel.clearConversation' | translate">
        <lucide-icon [img]="Trash2" [size]="12"></lucide-icon>
      </button>

      @if (!isStreaming) {
        <button
          type="button"
          class="btn-primary btn-send"
          [disabled]="!input.trim()"
          (click)="send()">
          <lucide-icon [img]="Send" [size]="14"></lucide-icon>
          {{ 'sessionAiChatPanel.send' | translate }}
        </button>
      }

      @if (isStreaming) {
        <button
          type="button"
          class="btn-secondary btn-send"
          (click)="cancelStream()">
          <lucide-icon [img]="Square" [size]="14"></lucide-icon>
          {{ 'sessionAiChatPanel.stop' | translate }}
        </button>
      }
    </div>
  </div>

</div>
