|
|
@@ -1,22 +1,9 @@
|
|
|
-import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
|
|
-import {
|
|
|
- IonHeader, IonToolbar, IonTitle, IonContent,
|
|
|
- IonCard, IonCardHeader, IonCardTitle, IonCardContent,
|
|
|
- IonList, IonItem, IonLabel, IonAvatar, IonInput, IonButton, IonIcon
|
|
|
- } from '@ionic/angular/standalone';
|
|
|
+import { Component } from '@angular/core';
|
|
|
+import { Router } from '@angular/router';
|
|
|
+import { IonHeader, IonToolbar, IonTitle, IonContent, ModalController, IonButton } from '@ionic/angular/standalone';
|
|
|
import { ExploreContainerComponent } from '../explore-container/explore-container.component';
|
|
|
-import { CommonModule } from '@angular/common';
|
|
|
-
|
|
|
-interface Character {
|
|
|
- name: string;
|
|
|
- avatar: string;
|
|
|
- description: string;
|
|
|
-}
|
|
|
-
|
|
|
-interface Message {
|
|
|
- sender: string;
|
|
|
- text: string;
|
|
|
-}
|
|
|
+import { ChatPanelOptions, FmChatModalInput, FmodeChat, FmodeChatMessage, openChatPanelModal } from 'fmode-ng';
|
|
|
+// import { ModalAudioMessageComponent } from 'fmode-ng/lib/aigc/chat/chat-modal-input/modal-audio-message/modal-audio-message.component';
|
|
|
|
|
|
@Component({
|
|
|
selector: 'app-tab3',
|
|
|
@@ -24,55 +11,116 @@ interface Message {
|
|
|
styleUrls: ['tab3.page.scss'],
|
|
|
standalone: true,
|
|
|
imports: [
|
|
|
- CommonModule,
|
|
|
IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent,
|
|
|
- IonCard, IonCardHeader, IonCardTitle, IonCardContent,
|
|
|
- IonList, IonItem, IonLabel, IonAvatar, IonInput, IonButton, IonIcon,
|
|
|
- ],
|
|
|
- schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
|
|
+ IonButton,
|
|
|
+ // ASR语音输入模块
|
|
|
+ FmChatModalInput,
|
|
|
+ // ModalAudioMessageComponent
|
|
|
+ ]
|
|
|
})
|
|
|
export class Tab3Page {
|
|
|
- characters: Character[] = [
|
|
|
- {
|
|
|
- name: '角色A',
|
|
|
- avatar: 'assets/character-a.png',
|
|
|
- description: '角色A的简介...',
|
|
|
- },
|
|
|
- {
|
|
|
- name: '角色B',
|
|
|
- avatar: 'assets/character-b.png',
|
|
|
- description: '角色B的简介...',
|
|
|
- },
|
|
|
- {
|
|
|
- name: '角色C',
|
|
|
- avatar: 'assets/character-c.png',
|
|
|
- description: '角色C的简介...',
|
|
|
- },
|
|
|
- ];
|
|
|
|
|
|
- selectedCharacter: Character | null = null; // 当前选择的角色
|
|
|
- chatMessages: Message[] = []; // 聊天消息列表
|
|
|
- userMessage: string = ''; // 用户输入的消息
|
|
|
+ constructor(
|
|
|
+ private modalCtrl:ModalController,
|
|
|
+ private router:Router,
|
|
|
+ ) {
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ /** 示例：问诊ChatPanel面板 */
|
|
|
+ openInquiry(){
|
|
|
+ localStorage.setItem("company","E4KpGvTEto")
|
|
|
+ let options:ChatPanelOptions = {
|
|
|
+ roleId:"2DXJkRsjXK",
|
|
|
+ onChatInit:(chat:FmodeChat)=>{
|
|
|
+ console.log("onChatInit");
|
|
|
+ console.log("预设角色",chat.role);
|
|
|
+ chat.role.set("name","晓晓");
|
|
|
+ chat.role.set("title","资深剧迷");
|
|
|
+ chat.role.set("desc","一名资深的影视剧剧迷，晓晓，年龄22岁");
|
|
|
+ // chat.role.set("tags",["全科","门诊"]);
|
|
|
+ chat.role.set("avatar","https://nova-cloud.obs.cn-south-1.myhuaweicloud.com/storage/aigc/imagine/Q4Zif7fTbK-0.png")
|
|
|
+ chat.role.set("prompt",`
|
|
|
+# 角色设定
|
|
|
+你是一名资深的影视剧剧迷，晓晓，年龄22岁，需要完成一次轻松愉快的看剧感悟分享的陪聊服务。
|
|
|
+
|
|
|
+# 对话环节
|
|
|
+1.开始话题（根据用户最近在看的影视剧，围绕具体情节、角色分析、剧情走向等陪用户聊天）
|
|
|
+2.主动提出话题
|
|
|
+例如：询问用户觉得哪个情节让他影响最深刻。
|
|
|
+3.拓展的聊天细节
|
|
|
+例如：用户表达出对某个角色的喜爱，拓展出：是否喜欢这一类型的角色，是否喜欢演员本人等。
|
|
|
+
|
|
|
+4.结束聊天
|
|
|
+- 委婉的和用户结束聊天，若用户还想继续聊天可以再陪伴一会儿。
|
|
|
+- 若用户有结束聊天的意愿，在聊天的最后表达期待和用户的下次聊天。在消息结尾附带: [完成]
|
|
|
+# 开始话语
|
|
|
+当你准备好了，可以以一个追剧搭子的身份，向用户打招呼，并询问他/她最近在看什么影视剧。`);
|
|
|
+ },
|
|
|
+ onMessage:(chat:FmodeChat,message:FmodeChatMessage)=>{
|
|
|
+ console.log("onMessage",message)
|
|
|
+ let content:any = message?.content
|
|
|
+ if(typeof content == "string"){
|
|
|
+ if(content?.indexOf("[完成]")>-1){
|
|
|
+ console.log("陪聊已完成")
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onChatSaved:(chat:FmodeChat)=>{
|
|
|
+ // chat?.chatSession?.id 本次会话的 chatId
|
|
|
+ console.log("onChatSaved",chat,chat?.chatSession,chat?.chatSession?.id)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ openChatPanelModal(this.modalCtrl,options)
|
|
|
+ }
|
|
|
+
|
|
|
+ openChat(){
|
|
|
+ let options:ChatPanelOptions = {
|
|
|
+ roleId:"2DXJkRsjXK",
|
|
|
+ onChatSaved:(chat:FmodeChat)=>{
|
|
|
+ // chat?.chatSession?.id 本次会话的 chatId
|
|
|
+
|
|
|
+console.log("onChatSaved",chat,chat?.chatSession,chat?.chatSession?.id)
|
|
|
+
|
|
|
+ },
|
|
|
|
|
|
- selectCharacter(character: Character) {
|
|
|
- this.selectedCharacter = character;
|
|
|
- this.chatMessages = []; // 清空聊天记录
|
|
|
+ }
|
|
|
+ openChatPanelModal(this.modalCtrl,options)
|
|
|
}
|
|
|
|
|
|
- sendMessage() {
|
|
|
- if (this.userMessage.trim()) {
|
|
|
- this.chatMessages.push({
|
|
|
- sender: '您',
|
|
|
- text: this.userMessage,
|
|
|
- });
|
|
|
- this.userMessage = ''; // 清空输入框
|
|
|
- // 模拟角色的回复
|
|
|
- setTimeout(() => {
|
|
|
- this.chatMessages.push({
|
|
|
- sender: this.selectedCharacter?.name || '角色',
|
|
|
- text: '这是角色的回复。',
|
|
|
- });
|
|
|
- }, 1000);
|
|
|
+ restoreChat(chatId:string){
|
|
|
+ let options:ChatPanelOptions = {
|
|
|
+ roleId:"2DXJkRsjXK",
|
|
|
+ chatId:chatId
|
|
|
}
|
|
|
+ openChatPanelModal(this.modalCtrl,options)
|
|
|
+ }
|
|
|
+
|
|
|
+ goChat(){
|
|
|
+ this.router.navigateByUrl("/chat/session/role/2DXJkRsjXK")
|
|
|
}
|
|
|
-}
|
|
|
+
|
|
|
+
|
|
|
+ // audioModalHeightPoint:number = 0.35;
|
|
|
+ // async startTalk(){
|
|
|
+ // // 根据手机兼容性，适配组件弹出高度
|
|
|
+ // let height = document.body.clientHeight || 960;
|
|
|
+ // this.audioModalHeightPoint = Number((165/height).toFixed(2));
|
|
|
+
|
|
|
+ // // 弹出组件
|
|
|
+ // let modal:any
|
|
|
+ // let chat:any
|
|
|
+ // modal = await this.modalCtrl.create({
|
|
|
+ // component:ModalAudioMessageComponent,
|
|
|
+ // componentProps:{
|
|
|
+ // chat:chat,
|
|
|
+ // modal:modal,
|
|
|
+ // onBreakPointSet:()=>{
|
|
|
+ // modal?.setCurrentBreakpoint(this.audioModalHeightPoint)
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // modal.present();
|
|
|
+ // }
|
|
|
+
|
|
|
+}
|
lzy