ai_fitness/src/app/tab2/tab2.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>Chat</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="chat-container">
    <div *ngFor="let message of messageList" [ngClass]="{'user-message': message.role === 'user', 'ai-message': message.role === 'assistant'}">
      <div *ngIf="message.role === 'user'" class="avatar-container">
        <div class="message-content">{{ message.content }}</div>
        <div class="avatar1">{{ username.charAt(0).toUpperCase() }}</div>
      </div>
      <div *ngIf="message.role === 'assistant'" class="avatar-container">
        <div class="avatar2">AI</div>
        <div class="message-content">{{ message.content }}</div>
      </div>
    </div>
  </div>
</ion-content>

<ion-footer>
  <ion-toolbar>
    <ion-item>
      <ion-input [(ngModel)]="userInput" placeholder="Type a message..."></ion-input>
      <ion-button (click)="sendMessage()">Send</ion-button>
    </ion-item>
  </ion-toolbar>
</ion-footer>