s202226701024/src/app/bookcoach/bookcoach.component.ts

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';

interface ChatMessage {
  content: string;
  isUser: boolean;
  time: Date;
}

@Component({
  selector: 'app-bookcoach',
  templateUrl: './bookcoach.component.html',
  styleUrls: ['./bookcoach.component.scss'],
  standalone: true,
  imports: [CommonModule, IonicModule, FormsModule]
})
export class BookcoachComponent implements OnInit {
  @ViewChild('chatContainer') private chatContainer!: ElementRef;
  @ViewChild('messageInput') private messageInput!: ElementRef;

  messages: ChatMessage[] = [];
  newMessage: string = '';
  isTyping: boolean = false;
  showSuggestions: boolean = true;

  suggestions: string[] = [
    '如何提高投篮命中率？',
    '篮球基础训练有哪些？',
    '怎样提升防守能力？',
    '篮球战术布置技巧'
  ];

  constructor() { }

  ngOnInit() {
    // 可以添加初始欢迎消息
  }

  sendMessage() {
    if (this.newMessage.trim()) {
      // 添加用户消息
      this.messages.push({
        content: this.newMessage,
        isUser: true,
        time: new Date()
      });

      // 清空输入框
      const userMessage = this.newMessage;
      this.newMessage = '';

      // 显示AI正在输入
      this.isTyping = true;
      this.showSuggestions = false;

      // 模拟AI回复
      setTimeout(() => {
        this.isTyping = false;
        this.messages.push({
          content: this.getAIResponse(userMessage),
          isUser: false,
          time: new Date()
        });
        this.scrollToBottom();
      }, 1500);

      this.scrollToBottom();
    }
  }

  selectSuggestion(suggestion: string) {
    this.newMessage = suggestion;
    this.sendMessage();
  }

  private scrollToBottom() {
    setTimeout(() => {
      if (this.chatContainer) {
        const element = this.chatContainer.nativeElement;
        element.scrollTop = element.scrollHeight;
      }
    });
  }

  private getAIResponse(message: string): string {
    // 这里可以实现实际的AI响应逻辑
    const responses = [
      '这是一个很好的问题！让我为您详细解答...',
      '根据我的经验，您可以尝试以下方法...',
      '这个问题涉及到几个关键点，首先...',
      '作为教练，我建议您可以这样做...'
    ];
    return responses[Math.floor(Math.random() * responses.length)];
  }
}