<ion-header>
  <ion-toolbar>
    <ion-title>聊天记录</ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="closeModal()">关闭</ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
<section>
  <ion-card>
    <ion-list>
      <ion-item *ngFor="let chatrecord of chatrecordList; let i = index">
        <ion-label>
          <ng-container *ngFor="let contentItem of chatrecord.get('content')">
            <div *ngIf="contentItem.role && contentItem.content">
              <p style="font-size: 18px; line-height: 1.5; color: #333; margin: 8px 0;">
                <span *ngIf="contentItem.role === 'system'">
                  <strong>第{{ i + 1 }}次:</strong> <!-- 只在 system 角色前显示序号 -->
                  <br>
                </span>
                <strong>{{ contentItem.role }}:</strong> {{ contentItem.content }}
                <br>
                <small style="color: #777;">{{ contentItem.createdAt | date: 'short' }}</small>
              </p>
               <!-- 展示情感分析结果 -->
               <p *ngIf="contentItem.role === 'user'" style="font-size: 18px; line-height: 1.5; color: #333; margin: 8px 0;">
                <strong>内心心情分析:</strong> 
                <br>
                <span *ngIf="userFeelings.length > 0">
                  <strong>(情感标签: {{ userFeelings[userFeelings.length - 1].label }})</strong>
                </span>
                <span *ngIf="userFeelings.length === 0">分析中...</span>
              </p>
            </div>
          </ng-container>
        </ion-label>
      </ion-item>
    </ion-list>
  </ion-card>
</section>
</ion-content>