20222670105/novel-app/src/app/character-detail/character-detail.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { CharacterService } from '../services/character.service';
import { Character } from '../services/character.service';
import { IonBackButton, IonButton, IonButtons, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, 
  IonCardTitle, IonContent, IonHeader, IonTitle, IonToolbar, ModalController } from '@ionic/angular/standalone';
import { CommonModule } from '@angular/common';
import { ChatPanelOptions, FmodeChat, openChatPanelModal } from 'fmode-ng';

@Component({
  selector: 'app-character-detail',
  templateUrl: './character-detail.component.html',
  styleUrls: ['./character-detail.component.scss'],
  standalone: true,
  imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonCard, IonBackButton, IonButtons,
    IonCardHeader, IonCardTitle, IonCardSubtitle, IonCardContent, CommonModule, IonButton]
})
export class CharacterDetailComponent implements OnInit {
  character!: Character;
  characterNotFound: boolean = false;
  

  constructor(private route: ActivatedRoute, private characterService: CharacterService, private router: Router, private modalCtrl: ModalController) {}

  ngOnInit() {
    const characterId = this.route.snapshot.paramMap.get('id');
    if (characterId) {
      this.characterService.getCharacterById(characterId).subscribe(character => {
        if (character) {
          this.character = character;
          this.characterNotFound = false;
        } else {
          this.characterNotFound = true;
          console.error('角色未找到');
        }
      });
    }
  }

  startChat() {
    const chatOptions: ChatPanelOptions = {
      roleId: "2DXJkRsjXK",
      onChatInit: (chat: FmodeChat) => {
        // 设置智能体的名字为角色名称
        chat.role.set("name", this.character.name);
        let newAvatar = "https://nova-cloud.obs.cn-south-1.myhuaweicloud.com/storage/aigc/imagine/U6UU36FsN8-0.png?x-image-process=image/resize,m_fixed,w_300"
        chat.role.set("avatar", newAvatar); // 设置角色头像
        chat.role.set("desc", "新的角色简介");
        console.log(chat.role?.toJSON()) // 查看角色数据，内部属性均可覆盖
        
        // 决赛设定
        chat.role.set("prompt", `你的名字是${this.character.name},你将作为${this.character.name}和用户聊天，
          你的性别是${this.character.gender},你有着${this.character.appearance}外貌，你的性格是${this.character.personality},
          请你在聊天过程中,按照你的人物设定和用户进行对话,并且当你准备好了时,请开始聊天`);
        
        // 设置角色的外貌特征和性格特点
        chat.role.set("appearance", this.character.appearance); 
        chat.role.set("personality", this.character.personality);
        
        // 设置角色头像
        chat.role.set("avatar", this.character.avatar);
      },
      onChatSaved: (chat: FmodeChat) => {
        console.log("onChatSaved",chat,chat?.chatSession,chat?.chatSession?.id);
        // 在后端设置一张表，记录当前用户、对话角色，还有chatId为chat?.chatSession?.id
        // 页面中加载历史对话表，循环时候，调用restoreChat()将存储的chatId传入，即可实现
      },
    };
    openChatPanelModal(this.modalCtrl, chatOptions);
  }

    restoreChat(chatId:string){
      let options:ChatPanelOptions = {
        roleId:"2DXJkRsjXK",
        chatId:chatId
      }
      openChatPanelModal(this.modalCtrl,options)
    }

}