<div class="ai-container">
    <div class="ai-chat-container">
      <div class="ai-messages">
        <div *ngFor="let message of messages" class="ai-message" [ngClass]="{'user-message': message.isUser}">
          <div class="avatar" [ngClass]="{'user-avatar': message.isUser}">
            <img src="{{ message.avatar }}" alt="Avatar" />
          </div>
          <div class="message-text">{{ message.text }}</div>
        </div>
      </div>



      <button class="advanced-button" (click)="goToNextPage()">升级ai</button>





      <!-- 在 HTML 中添加一个按钮和一个输入框 -->
      <div class="ai-input-container">
        <button class="ai-toggle-button" (click)="toggleNextAISpeechInput()"[hidden]="hideToggleButton">控制</button>
        <div *ngIf="showNextAISpeechInput" class="ai-input-wrapper">
          <input type="text" [(ngModel)]="nextAISpeech" placeholder="输入AI接下来说的话" class="ai-input" />
          <button class="ai-set-button" (click)="setNextAISpeech()">设置</button>
        </div>
      </div>
      

      <div class="ai-input-container">
        <input [(ngModel)]="userInput" class="ai-input" (keyup.enter)="sendMessage()" placeholder="请输入消息" />
        <button class="ai-send-button" (click)="sendMessage()">发送</button>
      </div>
    </div>
  </div>
  



