<ion-header>
  <ion-toolbar class="title">
    <ion-title class="ion-text-center">历史聊天</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" class="history">
  <!-- Displaying chat history -->
  <div *ngIf="chatHistory.length > 0; else noChats">
    <ion-list>
      <ion-item *ngFor="let chat of chatHistory" (click)="goToChat(chat.chatId)" class="chat-item">
        <div class="avatar">{{ chat.username[0].toUpperCase() }}</div>
        <ion-label>
          <h2>{{ chat.userChat.slice(0, 18) }}</h2>
          <p>{{ chat.aiChat.slice(0, 18) }}</p>
        </ion-label>
      </ion-item>
    </ion-list>
  </div>
  <ng-template #noChats>
    <ion-text color="medium" class="no-chats">
      <p>暂无</p>
    </ion-text>
  </ng-template>
</ion-content>

<!-- Button to start new chat -->
<ion-footer>
  <ion-toolbar>
    <ion-buttons slot="end" class="new-chat-button">
      <ion-button expand="block" (click)="startNewChat()">开启新聊天</ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-footer>
