s202226701042/src/app/tab1/qna/qna.page.ts

import { Component, OnInit } from '@angular/core';
import { 
  IonTextarea,
  IonInput,
  IonHeader, 
  IonToolbar, 
  IonTitle, 
  IonContent,
  IonBackButton,
  IonButtons,
  IonButton
} from '@ionic/angular/standalone';
import { CommonModule } from '@angular/common'; // 导入 CommonModule
import { FmodeChatCompletion, MarkdownPreviewModule } from 'fmode-ng';

@Component({
  selector: 'app-qna',
  templateUrl: './qna.page.html',
  styleUrls: ['./qna.page.scss'],
  standalone: true,
  imports: [
    CommonModule, // 添加 CommonModule
    MarkdownPreviewModule, // 确保导入 MarkdownPreviewModule
    IonTextarea,
    IonInput,
    IonHeader,
    IonToolbar,
    IonTitle,
    IonContent,
    IonBackButton,
    IonButtons,
    IonButton
  ]
})
export class QnaPage implements OnInit {
  constructor() {}

  ngOnInit() {}

  // 用户输入提示词
  userPrompt: string = "请输入你的问题：";   
  
  promptInput(ev: any) {
    this.userPrompt = ev.detail.value;
  }

  // 属性：组件内用于展示消息内容的变量
  responseMsg: any = "";
  isComplete: boolean = false; // 定义完成状态属性，用来标记是否补全完成

  sendMessage() {
    console.log("create");

    let PromptTemplate = `
    您作为一名专业的虚拟教师，请您根据用户的问题${this.userPrompt}，给出详细的解答。
    `;

    let completion = new FmodeChatCompletion([
      { role: "system", content: "" },
      { role: "user", content: PromptTemplate }
    ]);

    completion.sendCompletion().subscribe((message: any) => {
      // 打印消息体
      console.log(message.content);
      // 赋值消息内容给组件内属性
      this.responseMsg = message.content;
      if (message?.complete) { // 判断message为完成状态，则设置isComplete为完成
        this.isComplete = true;
      }
    });

    // 重置状态以允许再次提问
    this.isComplete = false; // 允许再次提问
    this.userPrompt = ""; // 清空输入框
  }
}