InsightSphere/src/app/tab1/tab1.page.html

<ion-header>
  <ion-toolbar>
    <ion-title class="header-title">用提问探索世界</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [scrollEvents]="true">
  <div class="suggestions">
    <ion-chip *ngFor="let suggestion of suggestions" (click)="useSuggestion(suggestion)">
      <ion-label>{{ suggestion }}</ion-label>
    </ion-chip>
  </div>

  <div class="chat-container">
    <div *ngFor="let message of messageList" class="message" [ngClass]="{'user-message': message.role === 'user', 'ai-message': message.role === 'ai'}">
      <div class="message-bubble">{{ message.content }}</div>
    </div>
  </div>
</ion-content>

<ion-footer>
  <ion-toolbar>
    <ion-input [(ngModel)]="userInput" placeholder="输入您的问题"></ion-input>
    <ion-button (click)="sendMessage()" slot="end">
      <ion-icon name="send-outline"></ion-icon>
    </ion-button>
  </ion-toolbar>
</ion-footer>