s202226701003/AiStudy-app/src/app/tab1/tab1.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>对话</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" class="ion-padding">
  <!-- 聊天消息区域 -->
  <div class="chat-container">
    <div *ngFor="let message of messages" [ngClass]="{'user-message': message.isUser, 'ai-message': !message.isUser}" class="message-wrapper">
      <div class="message-bubble">
        {{ message.content }}
      </div>
    </div>
  </div>
</ion-content>

<!-- 底部输入区域 -->
<ion-footer>
  <ion-toolbar>
    <ion-item>
      <ion-input 
        [(ngModel)]="userInput" 
        placeholder="请输入消息..." 
        (keyup.enter)="sendMessage()"
      ></ion-input>
      <ion-button slot="end" (click)="sendMessage()" [disabled]="!userInput">
        <ion-icon name="send"></ion-icon>
      </ion-button>
    </ion-item>
  </ion-toolbar>
</ion-footer>