TangchaoKAI/myapp/src/app/ai-chat/ai-chat.component.html

<div class="chat-container">
  <div class="chat-header">
    <button
      (click)="goBack()"
      style="background: none; border: none; color: white; font-size: 16px; cursor: pointer; position: absolute; left: 10px; top: 50%; transform: translateY(-50%);"
    >
      <i class="bi bi-arrow-left"></i> 返回
    </button>
    AI 客服
  </div>

  <div class="chat-messages" #chatMessages>
    <div
      *ngFor="let chat of chats"
      [ngClass]="{'user-message': chat.from === 'user', 'ai-message': chat.from === 'ai', 'message': true}"
    >
      {{ chat.text }}
    </div>
  </div>

  <div class="ai-suggestions">
    <button class="suggestion-button" *ngFor="let sug of suggestions" (click)="onSuggestionClick(sug)">
      {{ sug }}
    </button>
  </div>

  <div class="chat-input">
    <input
      type="text"
      class="input-field"
      [(ngModel)]="inputMessage"
      placeholder="请输入您的问题..."
      (keydown.enter)="sendMessage()"
    />
    <button class="send-button" (click)="sendMessage()">发送</button>
  </div>

  <div class="function-buttons">
    <button class="function-button">砍价</button>
    <button class="function-button">推荐商品</button>
    <button class="function-button">查询订单</button>
    <button class="function-button">交易帮助</button>
  </div>
</div>