202226701044/.history/Mind-app/src/app/page-companion/page-companion.component_20241201212439.html

<ion-header [translucent]="true">
  <div class="button-container">
  <ion-button (click)="goTab1()" fill="clear"  class="custom-button daily-button"><ion-icon name="chevron-back" slot="start"></ion-icon>返回</ion-button>
  </div>

  <ion-toolbar>
    <ion-title >
    <div style="display: flex; align-items: center; justify-content: center;  margin: auto;">
     <ion-icon name="heart" style="color: rgb(250, 222, 222); font-size: 18px; "></ion-icon>
      <span style="color: rgb(250, 222, 222); font-size: 18px; margin-left: 2px;">心灵陪伴</span>
    </div>
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" class="chat-container">
  <h1 class="chat-title">心理咨询聊天</h1>

  <!-- 消息列表 -->
  <div class="messages">
    <div *ngFor="let message of messages" [ngClass]="{'user-message': message.role === 'user', 'ai-message': message.role === 'ai'}">
      <p>{{ message.content }}</p>
    </div>
  </div>

  <!-- 输入区域 -->
  <div class="input-area">
    <ion-input 
      [value]="userInput" 
      (ionInput)="promptInput($event)" 
      placeholder="请分享您的感受或问题" 
      
      clearInput
    ></ion-input>

    <ion-button (click)="sendMessage()" expand="full">发送</ion-button>
    
  </div>
</ion-content>