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

<ion-header [translucent]="true">
  <div class="teacher-selector">
    <ion-button fill="clear" id="select-teacher">
      <div class="teacher-info">
        <ion-icon name="person-circle-outline" class="teacher-icon"></ion-icon>
        <div class="teacher-name">{{ selectedTeacher.name }}</div>
        <div class="teacher-description">{{ selectedTeacher.description }}</div>
      </div>
    </ion-button>

    <ion-modal trigger="select-teacher" [breakpoints]="[0, 0.5]" [initialBreakpoint]="0.5">
      <ng-template>
        <ion-content>
          <ion-list>
            <ion-item *ngFor="let teacher of teachers" (click)="selectTeacher(teacher)" [class.selected]="teacher.id === selectedTeacher.id">
              <div class="teacher-list-item">
                <ion-icon name="person-circle-outline" class="teacher-icon"></ion-icon>
                <div class="teacher-details">
                  <div class="teacher-name">{{ teacher.name }}</div>
                  <div class="teacher-description">{{ teacher.description }}</div>
                </div>
              </div>
            </ion-item>
          </ion-list>
        </ion-content>
      </ng-template>
    </ion-modal>
  </div>
</ion-header>

<ion-content [fullscreen]="true">
  <div class="chat-container">
    <div class="chat-content">
      <!-- 历史消息显示 -->
      <div *ngFor="let message of messages" 
           [ngClass]="{'user-message': message.isUser, 'ai-message': !message.isUser}" 
           class="message-wrapper">
        <div class="message-bubble">
          @if(message.isUser) {
            <div class="message-content">{{ message.content }}</div>
          } @else {
            <fm-markdown-preview class="message-content" [content]="message.content"></fm-markdown-preview>
          }
          <div class="message-time">
            {{ message.timestamp | date:'HH:mm' }}
          </div>
        </div>
      </div>
      
      <!-- 实时消息预览 -->
      @if(isLoading && !isComplete) {
        <div class="ai-message message-wrapper">
          <div class="message-bubble">
            <div class="message-content">{{ currentResponse }}</div>
          </div>
        </div>
      }
    </div>
  </div>
</ion-content>

<ion-footer>
  <ion-toolbar>
    <ion-item>
      <ion-textarea
        [(ngModel)]="userInput" 
        placeholder="请输入消息..." 
        (keyup.enter)="sendMessage()"
        [disabled]="isLoading"
        autoGrow="true"
        rows="1"
      ></ion-textarea>
      <ion-button slot="end" 
                  (click)="sendMessage()" 
                  [disabled]="!userInput || isLoading">
        <ion-icon name="send"></ion-icon>
      </ion-button>
    </ion-item>
  </ion-toolbar>
</ion-footer>