app-recipe/myapp/src/app/tab1/page-aichat/page-aichat.page.html

<!-- page-aichat.page.html -->
<ion-header [translucent]="true">
  <ion-toolbar class="header-bar">
    <ion-title class="app-title">AI助手</ion-title>
    <ion-icon name="sparkles" slot="end" class="header-icon"></ion-icon>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" class="chat-content">
  <!-- 消息容器 -->
  <div #messagesContainer class="messages-container">
    <div 
      *ngFor="let message of messages"
      class="message-wrapper"
      [class.user]="!message.isAI"
      [@messageAnim]>
      <div class="message-bubble">
        <div class="message-text">{{ message.content }}</div>
        <div class="message-time">{{ message.time }}</div>
      </div>
      <div class="message-status" *ngIf="!message.isAI">
        <ion-icon 
          [name]="message.status === 'sending' ? 'time' : 
                  message.status === 'sent' ? 'checkmark' : 
                  'alert-circle'" 
          class="status-icon"></ion-icon>
      </div>
    </div>
  </div>

  <!-- 输入区域 -->
  <div class="input-wrapper">
    <div class="input-box">
      <ion-textarea 
        #messageInput
        [(ngModel)]="newMessage"
        (keyup.enter)="sendMessage()"
        placeholder="输入消息..."
        autoGrow
        rows="1"
        class="message-input"
        [class.focused]="isInputFocused"
        (ionFocus)="isInputFocused = true"
        (ionBlur)="isInputFocused = false">
      </ion-textarea>
      <ion-button 
        class="send-button"
        (click)="sendMessage()"
        [disabled]="!canSend"
        shape="round">
        <ion-icon 
          [name]="canSend ? 'paper-plane' : 'send-outline'" 
          class="send-icon"></ion-icon>
      </ion-button>
    </div>
  </div>
</ion-content>