Files
18xchat/assets/Scripts/chat18x/ui/panels/ChatPanel.ts
T
xionglijia e57818d498 - MVP架构重构聊天逻辑
- 优化聊天气泡体验
- 修复prompt bug
- 实现聊天次数限制功能(未接服务端)
- 实现情绪切视频功能
2025-08-27 16:12:19 +08:00

543 lines
15 KiB
TypeScript

import {
_decorator,
Component,
EditBox,
Node,
Label,
Sprite,
UITransform,
VideoPlayer,
} from "cc";
// 首先加载 polyfills 以确保兼容性
import "../../utils/polyfills";
import { DialogManager } from "../../manager/DialogManager";
import { ChatController, IChatPanelCallback } from "../../core/ChatController";
import li_BaseView from "db://assets/Scripts/Main/Common/li_BaseView";
import Utils from "db://assets/Scripts/Main/Common/Utils";
import { InnerMsgCode } from "db://assets/Scripts/Main/Config/InnerMsgCode";
import { ChatContentsLayout } from "../components/ChatContentsLayout";
import { ViewManager } from "db://assets/Scripts/Main/Manager/ViewManager";
import GameRootUI from "db://assets/Scripts/Main/Common/GameRootUI";
import { ImagePopup } from "../components/ImagePopup";
import ResManager from "db://assets/Scripts/Main/Manager/ResManager";
import LanguageUtils from "../../../Main/Common/LanguageUtils";
import { UITransitionHelper } from "../../utils/UITransitionHelper";
import { VideoEmotion, purchase } from "../../../schema/schema";
import { PayToTalkSubpanel } from "./PayToTalkSubpanel";
const { ccclass, property } = _decorator;
@ccclass("ChatPanel")
export class ChatPanel extends li_BaseView implements IChatPanelCallback {
manager: DialogManager = null;
private chatController: ChatController = null;
@property(PayToTalkSubpanel)
payToTalkPanel: PayToTalkSubpanel = null;
@property(EditBox)
editBox: EditBox = null;
@property(Label)
girlName: Label = null;
@property(Sprite)
girlImg: Sprite = null;
@property(VideoPlayer)
girlVideo: VideoPlayer = null;
@property(ChatContentsLayout)
layout: ChatContentsLayout = null;
@property(ImagePopup)
popUpImage: ImagePopup = null;
id: number;
private _nodeTab: any = {};
nameKey: string;
private commercialVideos: purchase.CommercialVideo[] = [];
private currentEmotion: VideoEmotion | null = null;
private onLanguageChangeCallback = () => {
if (!this.girlName) return;
this.girlName.string = LanguageUtils.getText(this.nameKey);
};
openUIDataCT(data) {
const newRoleId =
typeof data === "object" && data.roleId !== undefined
? data.roleId
: data;
const withAnimation = typeof data === "object" && data.withSlideTransition;
// 检查是否是切换角色
const isRoleSwitch = this.id && this.id !== newRoleId;
this.id = newRoleId;
// 如果标记了需要滑入动画,则执行动画
if (withAnimation && this.node && this.node.isValid) {
// 延迟一帧执行动画,确保节点已正确加载到场景中
this.scheduleOnce(() => {
UITransitionHelper.slideInFromRight(this.node, 0.3);
}, 0);
}
// 获取ChatController单例并绑定当前Panel
this.chatController = ChatController.Instance;
this.chatController.bindView(this);
// 初始化或切换ChatController
if (this.id && this.id > 0) {
if (isRoleSwitch && this.chatController.hasRoleData(this.id)) {
// 如果是角色切换且有缓存数据,使用switchRole
console.log(
`ChatPanel: Switching from role ${this.chatController.getCurrentRoleId()} to role ${
this.id
}`
);
this.chatController.switchRole(this.id);
} else {
// 首次初始化或没有缓存数据,使用initialize
console.log(`ChatPanel: Initializing role ${this.id}`);
this.chatController.initialize(this.id);
}
}
}
onLoadCT() {
Utils.parseNode(this.node, this._nodeTab);
this.register();
this.refresh(this.id);
this.payToTalkPanel.node.active = false;
// Add video loaded event callback
if (this.girlVideo) {
this.girlVideo.node.on(
VideoPlayer.EventType.READY_TO_PLAY,
() => {
this.adjustVideoScale();
},
this
);
}
}
register() {
Utils.addInnerEL(
InnerMsgCode.Chat_DialogRefresh,
this,
this.onDialogUpdate
);
Utils.addInnerEL(
InnerMsgCode.LanguageChange,
this,
this.onLanguageChangeCallback
);
Utils.addInnerEL(
InnerMsgCode.Chat_EmotionInitialized,
this,
this.onEmotionInitialized
);
}
onDestroy(): void {
Utils.removeInnerEL(
InnerMsgCode.Chat_DialogRefresh,
this,
this.onDialogUpdate
);
Utils.removeInnerEL(
InnerMsgCode.LanguageChange,
this,
this.onLanguageChangeCallback
);
Utils.removeInnerEL(
InnerMsgCode.Chat_EmotionInitialized,
this,
this.onEmotionInitialized
);
// Cleanup video event listeners
if (this.girlVideo && this.girlVideo.node) {
this.girlVideo.node.off(
VideoPlayer.EventType.READY_TO_PLAY,
this.adjustVideoScale,
this
);
}
// 解绑ChatController(不销毁,因为它是单例)
if (this.chatController) {
this.chatController.unbindView();
this.chatController = null;
}
}
refresh(id: number) {
this.id = id;
// 通过ChatController获取角色数据
const roleData = this.chatController.getRoleData();
if (!roleData || !roleData.basic) return;
const data = roleData.basic;
const dataDetail = roleData.detail;
this.nameKey = data.nameKey;
this.girlName.string = LanguageUtils.getText(data.nameKey);
ResManager.I.changeBundleSpriteFrame(
this.girlImg,
data.avatarPath,
"Chat18x",
() => {
let sizeTran = this.girlImg.node.parent.getComponent(UITransform);
Utils.adjustBgPixelRatioToSize(
sizeTran.contentSize,
this.girlImg.node,
2
);
}
);
// 通过ChatController获取商业视频数据
const chatModel = this.chatController.getChatModel();
const commercialVideos = chatModel.getCommercialVideos();
this.commercialVideos = commercialVideos;
if (commercialVideos.length > 0) {
console.log(
`Loaded ${commercialVideos.length} videos for role ${this.id}`
);
// Load initial video based on current emotion
if (this.girlVideo) {
// Get current emotion from ChatController
const currentEmotion = this.chatController.getCurrentEmotion();
console.log(
`Current emotion for role ${this.id}: ${VideoEmotion[currentEmotion]}`
);
// Get appropriate video from ChatModel
const initialVideo =
chatModel.getVideoByEmotion(currentEmotion) ||
chatModel.getDefaultVideo();
if (initialVideo) {
console.log(
`Loading initial video: ${initialVideo.path} (emotion: ${
VideoEmotion[initialVideo.emotion]
})`
);
// Set current emotion to the loaded video's emotion
this.currentEmotion = initialVideo.emotion;
ResManager.I.changeBundleVideo(
this.girlVideo,
initialVideo.path,
"Chat18x"
);
// Also immediately try to adjust scale (in case already loaded)
this.adjustVideoScale();
}
}
} else {
this.commercialVideos = [];
this.currentEmotion = null; // Reset current emotion when no videos available
console.log("No commercialVideos data available for role", this.id);
}
}
adjustVideoScale() {
if (!this.girlVideo || !this.girlVideo.node.parent) {
return;
}
const tryAdjustScale = () => {
const parentTransform =
this.girlVideo.node.parent.getComponent(UITransform);
const videoTransform = this.girlVideo.node.getComponent(UITransform);
if (parentTransform && videoTransform && videoTransform.height > 0) {
const scale = parentTransform.height / videoTransform.height;
this.girlVideo.node.setScale(scale, scale, 1);
console.log(
`ChatPanel Video scaled to: ${scale}, parent height: ${parentTransform.height}, video height: ${videoTransform.height}`
);
return true;
}
return false;
};
// Immediately try once
if (!tryAdjustScale()) {
// If failed, delay and try again
this.scheduleOnce(() => {
if (!tryAdjustScale()) {
// Try again with longer delay
this.scheduleOnce(() => {
tryAdjustScale();
}, 0.5);
}
}, 0.1);
}
}
setVideoEnable(enable: boolean) {
if (!this.girlVideo) return;
this.girlVideo.enabled = enable;
if (enable) {
this.girlVideo.play();
}
}
private switchVideoByEmotion(emotion: VideoEmotion): void {
if (!this.girlVideo) {
console.warn("Cannot switch video: missing video player");
return;
}
// Get video data from ChatModel through ChatController
const chatModel = this.chatController.getChatModel();
const commercialVideos = chatModel.getCommercialVideos();
if (commercialVideos.length === 0) {
console.warn("Cannot switch video: no commercialVideos data");
return;
}
// Check if emotion has changed
if (this.currentEmotion === emotion) {
console.log(
`Emotion ${VideoEmotion[emotion]} unchanged, skipping video switch`
);
return;
}
// Get video matching the emotion from ChatModel
const matchingVideo = chatModel.getVideoByEmotion(emotion);
if (matchingVideo) {
console.log(
`Switching to video for emotion ${VideoEmotion[emotion]}: ${
matchingVideo.path
} (from ${
this.currentEmotion !== null
? VideoEmotion[this.currentEmotion]
: "null"
})`
);
// Load the new video
ResManager.I.changeBundleVideo(
this.girlVideo,
matchingVideo.path,
"Chat18x"
);
// Update current emotion state
this.currentEmotion = emotion;
// Adjust scale and enable playback
this.adjustVideoScale();
this.setVideoEnable(true);
} else {
console.warn(
`No video found for emotion ${VideoEmotion[emotion]}, falling back to default video`
);
// Fallback to default video from ChatModel
const fallbackVideo = chatModel.getDefaultVideo();
if (fallbackVideo) {
console.log(
`Loading fallback video: ${fallbackVideo.path} (emotion: ${
VideoEmotion[fallbackVideo.emotion]
})`
);
ResManager.I.changeBundleVideo(
this.girlVideo,
fallbackVideo.path,
"Chat18x"
);
// Update current emotion state to the fallback video's emotion
this.currentEmotion = fallbackVideo.emotion;
this.adjustVideoScale();
this.setVideoEnable(true);
}
}
}
private onEmotionInitialized(data: {
roleId: number;
emotion: VideoEmotion;
}): void {
// 检查是否是当前角色
if (data.roleId === this.id) {
console.log(
`Emotion initialized for current role ${this.id}: ${
VideoEmotion[data.emotion]
}`
);
// 切换到对应的视频
this.switchVideoByEmotion(data.emotion);
} else {
console.log(
`Emotion initialized for role ${data.roleId} (not current role ${this.id}), ignoring`
);
}
}
onDialogUpdate() {
if (this.layout) {
this.layout.UpdateDialog(DialogManager.getInstance().getDialogs());
}
}
protected onEnable(): void {
if (!this.manager) this.manager = DialogManager.getInstance();
GameRootUI.I.hideDefaultView();
}
public async OnClickSend() {
const str = this.editBox.string;
if (!str || str == "") return;
// 通过ChatController发送消息
const succeed = await this.chatController.sendMessage(str);
if (succeed)
// 清空输入框
this.editBox.string = "";
}
// === IChatPanelCallback 接口实现 ===
/**
* 消息发送开始回调
* @param message 用户发送的消息
*/
public onMessageSent(message: string): void {
console.log("Message sent:", message);
// 消息发送后开始显示加载动画,由DialogManager处理
}
/**
* 接收到AI回复回调
* @param response AI的回复内容
*/
public onMessageReceived(response: string): void {
console.log("Message received:", response);
// AI回复收到后加载动画会被自动移除,可以在这里添加其他UI效果
}
/**
* 对话更新回调
*/
public onDialogUpdated(): void {
// 更新对话显示
this.onDialogUpdate();
}
/**
* 错误处理回调
* @param error 错误信息
*/
public onError(error: Error): void {
console.error("Chat error:", error);
// 出错时加载动画会被自动移除,可以在这里显示错误提示给用户
}
onChatLimitReached(): void {
this.payToTalkPanel.show();
}
/**
* 情绪状态更新回调 (实现IChatPanelCallback接口)
* @param emotion 当前情绪状态
*/
public onEmotionUpdated(emotion: VideoEmotion): void {
console.log(
`ChatPanel: Emotion updated to ${VideoEmotion[emotion]} (${emotion})`
);
// Switch video based on the new emotion
this.switchVideoByEmotion(emotion);
// Additional UI updates can be added here based on emotion
// 例如:改变角色表情、背景色、播放相应的动画等
switch (emotion) {
case VideoEmotion.calm_down:
// 平静状态的UI更新
console.log("UI state: Calm");
break;
case VideoEmotion.arousal:
// 兴奋状态的UI更新
console.log("UI state: Arousal");
break;
case VideoEmotion.desire:
// 渴望状态的UI更新
console.log("UI state: Desire");
break;
case VideoEmotion.passion:
// 激情状态的UI更新
console.log("UI state: Passion");
break;
case VideoEmotion.orgasm:
// 高潮状态的UI更新
console.log("UI state: Orgasm");
break;
}
}
returnBtn() {
this.onClose();
GameRootUI.I.showDefaultView();
//ViewManager.I.openBundlesView("GirlListPanel");
}
onClickRecord() {
ViewManager.I.openBundlesView("RecordPanel", this.id);
}
/**
* 获取当前聊天状态信息(用于调试)
*/
public getChatStatus(): any {
if (!this.chatController) {
return { error: "ChatController not initialized" };
}
return {
currentPanelRoleId: this.id,
controllerStats: this.chatController.getDialogStats(),
modelSummary: this.chatController.getModelSummary(),
allRolesStats: this.chatController.getAllRolesStats(),
};
}
/**
* 手动清除指定角色的数据(调试用)
* @param roleId 角色ID,不传则清除当前角色
*/
public clearRoleDataDebug(roleId?: number): void {
if (!this.chatController) {
console.warn("ChatController not initialized");
return;
}
const targetRoleId = roleId || this.id;
if (!targetRoleId) {
console.warn("No role ID specified");
return;
}
this.chatController.clearRoleData(targetRoleId);
console.log(`Cleared data for role ${targetRoleId}`);
}
}