<!-- 示例框架1 -->


<ion-content class="ai-container">
  <!-- 顶部标题栏，collapse属性表示滚动时自动收缩 -->
  <ion-header >
    <!-- 工具栏容器 -->
    <ion-toolbar>
      <!-- 页面标题 -->
      <ion-title>AI守护</ion-title>
      <!-- 右侧按钮组 -->
      <ion-buttons slot="end">
        <!-- 切换深色模式的按钮 -->
        <ion-button (click)="toggleDarkMode()">
          <!-- 月亮图标 -->
          <ion-icon :icon="moon"></ion-icon>
        </ion-button>

      </ion-buttons>
    </ion-toolbar>
  </ion-header>

  <!-- 聊天消息区域容器 -->
  <div class="chat-wrapper">
    <div class="message-container">
      <!-- 每条消息循环 -->
      <div *ngFor="let msg of messages" 
       [class.user-msg]="msg.isUser"
       class="message-bubble">
        <!-- AI头像区域 -->
        <div class="ai-avatar" *ngIf="!msg.isUser">
          <img [src]="'assets/ai-avatar/ai-avatar.jpg'"
           alt="AI守护头像"
           class="avatar-image">
        </div>
        <!-- 用户消息显示用户头像 -->
        <div class="user-avatar" *ngIf="msg.isUser">
          <img [src]="'assets/ai-avatar/user-avatar.jpg'"
          alt="用户头像">
        </div>
        <!-- 消息内容区 -->
        <div class="bubble-content">{{ msg.text }}</div>
        <div class="timestamp">{{ msg.time | date:'HH:mm' }}</div>
     </div>
    </div>
  </div>
  <!-- 消息流区域 -->
  <!-- <div *ngFor="let msg of messages" 
       [class]="'message-bubble ' + msg.type">
    <div class="bubble-content">
      {{ msg.content }}
      <div class="time-stamp">{{ msg.time }}</div>
    </div>
  </div> -->
</ion-content>

<!-- 输入栏 -->
<ion-footer class="input-footer">
  <ion-item lines="none">
    <ion-input [(ngModel)]="newMessage" 
              placeholder="和心灵伙伴聊聊..."
              class="message-input"
              (keyup.enter)="sendMessage()"></ion-input>
    <ion-button fill="clear" 
               color="primary"
               (click)="sendMessage()">
      <ion-icon slot="icon-only" name="send"></ion-icon>
    </ion-button>
  </ion-item>
</ion-footer>


<!-- ai.page.html
<ion-content class="ai-guard">
  动态情绪仪表
  <div class="emotion-meter">
    <div class="wave"></div>
    <div class="face-avatar">
      <img [src]="currentMood.avatar" alt="AI头像">
    </div>
  </div>

  对话容器
  <div class="chat-container">
    <div #messageContainer class="messages">
      AI消息
      <div *ngFor="let msg of chatHistory" class="message" 
           [class.ai]="msg.isAI"
           [@messageAnim]>
        <div class="bubble">
          <div class="content">{{ msg.content }}</div>
          <div class="meta">
            <span class="time">{{ msg.time | date:'HH:mm' }}</span>
            <ion-icon *ngIf="msg.suggestion" name="bulb"></ion-icon>
          </div>
        </div>
      </div>
    </div>

    输入区域
    <div class="input-area">
      <ion-textarea [(ngModel)]="userInput" 
                    placeholder="和心灵伙伴聊聊..." 
                    autoGrow
                    (keyup.enter)="sendMessage()"></ion-textarea>
      <ion-button fill="clear" (click)="sendMessage()">
        <ion-icon name="send"></ion-icon>
      </ion-button>
    </div>
  </div>

  紧急求助浮窗
  <div class="emergency-card" [class.active]="showEmergency">
    <div class="header">需要立即帮助吗？</div>
    <div class="actions">
      <ion-button expand="block" fill="solid" color="danger">
        <ion-icon name="call"></ion-icon>
        联系紧急联系人
      </ion-button>
      <ion-button expand="block" fill="outline" (click)="startBreathingGuide()">
        <ion-icon name="play-circle"></ion-icon>
        启动呼吸引导
      </ion-button>
    </div>
  </div>
</ion-content> -->