<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/tabs/tab1"></ion-back-button>
    </ion-buttons>
    <ion-title>智能助手</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" class="ion-padding">
  <!-- 聊天消息容器（添加滚动优化） -->
  <div class="conversation-container">
    <div class="message-list">
      <!-- 用户消息 -->
      <div *ngFor="let msg of conversation" 
           [class.user-message]="msg.role === 'user'"
           [class.assistant-message]="msg.role === 'assistant'"
           class="message-item">
        <!-- 仅在助手消息时显示姓名 -->
        <span *ngIf="msg.role === 'assistant'" class="ai-name">友邻助手</span>
        <div class="message-bubble">
          {{ msg.content }}
          <span class="message-time">{{ msg.time | date:'HH:mm' }}</span>
        </div>
      </div> <!-- 对应 *ngFor 的 message-item -->
    </div> <!-- 对应 message-list -->
  </div> <!-- 对应 conversation-container -->
</ion-content>

<!-- 输入区样式优化（固定底部） -->
<ion-footer class="input-footer">
  <ion-toolbar>
    <ion-item class="input-item" lines="none">
      <ion-input [(ngModel)]="userInput" 
                 placeholder="输入您的需求，例如：'帮我总结今日新闻'" 
                 class="input-field"
                 (keyup.enter)="sendMessage()"></ion-input>
      <ion-button class="send-button" 
                  (click)="sendMessage()" 
                  [disabled]="!userInput.trim()">
        <ion-icon name="send" slot="icon-only"></ion-icon>
      </ion-button>
    </ion-item>
  </ion-toolbar>
</ion-footer>