<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button (click)="goBack()">
        <ion-icon name="arrow-back"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>{{username}}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="chat-content">
  <div class="message-list">
    <!-- 消息列表将在这里动态生成 -->
    <div *ngFor="let message of messages" class="message" [class.sent]="message.isSent">
      <div class="message-bubble">
        <div class="message-text">{{message.text}}</div>
        <div class="message-time">{{message.time | date:'HH:mm'}}</div>
      </div>
    </div>
  </div>

  <div class="message-input-container">
    <ion-button fill="clear" class="attachment-btn">
      <ion-icon name="image"></ion-icon>
    </ion-button>
    <ion-input placeholder="输入消息..." [(ngModel)]="newMessage"></ion-input>
    <ion-button fill="clear" (click)="sendMessage()">
      <ion-icon name="send"></ion-icon>
    </ion-button>
  </div>
</ion-content>