18xchat/assets/Scripts/chat18x/ui/components/ChatContentsLayout.ts

import {
  _decorator,
  Component,
  instantiate,
  Node,
  ScrollView,
  UITransform,
  Vec3,
  view,
} from "cc";
import { DialogManager } from "../../manager/DialogManager";
import { DialogBubble } from "./DialogBubble";
import { Dialog } from "../../data/DialogData";
const { ccclass, property } = _decorator;

@ccclass("ChatContentsLayout")
export class ChatContentsLayout extends Component {
  manager: DialogManager = null;

  @property(DialogBubble)
  lBubble: DialogBubble = null;
  @property(DialogBubble)
  rBubble: DialogBubble = null;

  // 当前显示的气泡
  private bubbles: DialogBubble[] = [];
  // 缓存池
  private cachedBubbles: DialogBubble[] = [];
  // 等待回复气泡的引用
  private waitingBubble: DialogBubble = null;
  // 延时任务ID数组
  private delayedTasks: number[] = [];
  // ScrollView组件引用
  @property(ScrollView)
  private scrollView: ScrollView = null;

  fixMaxWidth: number;

  protected start(): void {
    this.lBubble.node.active = false;
    this.rBubble.node.active = false;
    this.fixMaxWidth = 730;

    // 获取父节点的ScrollView组件
  }

  protected onEnable(): void {
    if (!this.manager) this.manager = DialogManager.getInstance();
    this.manager.layoutout = this;
  }

  /**
   * 更新玩家输入的对话
   * @param dialog 玩家输入的对话数据
   */
  updatePlayerDialog(dialog: Dialog): void {
    // 清理所有现有气泡到缓存池
    this.clearAllBubbles();

    // 清理所有延时任务
    this.clearDelayedTasks();

    // 创建玩家气泡（插入到首位，Layout会让它显示在最下面）
    const playerBubble = this.createOrGetBubble(true);
    playerBubble.node.active = true;
    playerBubble.updateBubbleContent(dialog.content, true);
    this.bubbles.push(playerBubble);

    // 创建等待回复气泡（插入到首位，显示在玩家消息上面）
    this.waitingBubble = this.createOrGetBubble(false);
    this.waitingBubble.node.active = true;
    this.waitingBubble.updateBubbleContent("...", false, undefined, true);
    this.waitingBubble.node.setSiblingIndex(0);
    this.bubbles.push(this.waitingBubble);
    this.node.position = Vec3.ZERO;
    // 滚动到底部（等待下一帧Layout更新完成）
    this.scheduleOnce(() => {
      this.scrollView.scrollToBottom();
    }, 0);
  }
  /**
   * 更新AI回复的对话
   * @param dialogs AI回复的对话数据数组
   */
  updateAIDialogs(dialogs: Dialog[]): void {
    // 清除等待回复气泡
    if (this.waitingBubble) {
      this.removeWaitingBubble();
    }

    // 清理之前的延时任务
    this.clearDelayedTasks();

    // 逐个添加AI对话，带延时
    this.addAIDialogsWithDelay(dialogs, 0);
  }

  /**
   * 清理所有气泡到缓存池
   */
  private clearAllBubbles(): void {
    for (const bubble of this.bubbles) {
      if (bubble && bubble.node) {
        bubble.node.active = false;
        this.cachedBubbles.push(bubble);
      }
    }
    this.bubbles = [];
    this.waitingBubble = null;

    // 清理多余的缓存气泡
    this.cleanupExcessCachedBubbles();
  }

  /**
   * 从缓存池获取或创建新的气泡
   * @param isPlayer 是否为玩家气泡
   * @returns DialogBubble实例
   */
  private createOrGetBubble(isPlayer: boolean): DialogBubble {
    // 尝试从缓存中获取合适的气泡
    for (let i = 0; i < this.cachedBubbles.length; i++) {
      const cached = this.cachedBubbles[i];
      if (cached && cached.node) {
        // 通过原始模板判断气泡类型
        const isRightBubble = cached.node.position.x > 0;
        if ((isPlayer && isRightBubble) || (!isPlayer && !isRightBubble)) {
          this.cachedBubbles.splice(i, 1);
          return cached;
        }
      }
    }

    // 缓存中没有合适的气泡，创建新的
    const templateBubble = isPlayer ? this.rBubble : this.lBubble;
    const newBubbleNode = instantiate(templateBubble.node);
    const newBubble = newBubbleNode.getComponent(DialogBubble);
    newBubble.init(this.fixMaxWidth);

    // 设置为子节点，具体位置由调用者决定
    newBubbleNode.setParent(this.node);

    return newBubble;
  }

  /**
   * 移除等待回复气泡
   */
  private removeWaitingBubble(): void {
    if (this.waitingBubble && this.waitingBubble.node) {
      this.waitingBubble.node.active = false;
      this.cachedBubbles.push(this.waitingBubble);

      // 从当前气泡列表中移除
      const index = this.bubbles.indexOf(this.waitingBubble);
      if (index > -1) {
        this.bubbles.splice(index, 1);
      }
    }
    this.waitingBubble = null;
  }

  /**
   * 带延时地添加AI对话
   * @param dialogs AI对话数组
   * @param index 当前处理的对话索引
   */
  private addAIDialogsWithDelay(dialogs: Dialog[], index: number): void {
    if (index >= dialogs.length) {
      return;
    }

    const dialog = dialogs[index];
    const delay = index > 0 ? Math.random() * 1000 + 500 : 0; // 第一条立即显示，后续延时500-1500ms

    const addCurrentDialog = () => {
      const aiBubble = this.createOrGetBubble(false);
      aiBubble.node.active = true;
      aiBubble.updateBubbleContent(dialog.content, false);
      // AI消息插入到首位，显示在最上面
      aiBubble.node.setSiblingIndex(0);
      this.scheduleOnce(() => {
        this.scrollView.scrollToBottom();
      }, 0);
      this.bubbles.push(aiBubble);

      // 递归处理下一条对话
      this.addAIDialogsWithDelay(dialogs, index + 1);
    };

    if (delay > 0) {
      const taskId = setTimeout(() => {
        // 从任务列表中移除
        const taskIndex = this.delayedTasks.indexOf(taskId);
        if (taskIndex > -1) {
          this.delayedTasks.splice(taskIndex, 1);
        }
        addCurrentDialog();
      }, delay);

      this.delayedTasks.push(taskId);
    } else {
      addCurrentDialog();
    }
  }

  /**
   * 清理多余的缓存气泡
   */
  private cleanupExcessCachedBubbles(): void {
    const maxCachedBubbles = 20;
    if (this.cachedBubbles.length > maxCachedBubbles) {
      const excessCount = this.cachedBubbles.length - maxCachedBubbles;
      for (let i = 0; i < excessCount; i++) {
        const bubble = this.cachedBubbles.shift();
        if (bubble && bubble.node) {
          bubble.node.destroy();
        }
      }
    }
  }

  /**
   * 清理所有延时任务
   */
  private clearDelayedTasks(): void {
    for (const taskId of this.delayedTasks) {
      clearTimeout(taskId);
    }
    this.delayedTasks = [];
  }

  /**
   * 保持向后兼容性的方法
   * @param dialogs 对话数组
   * @deprecated 请使用 updatePlayerDialog 和 updateAIDialogs 替代
   */
  UpdateDialog(dialogs: Dialog[]): void {
    // 为了保持兼容性，我们假设这是一个完整的对话更新
    // 清理所有现有气泡
    this.clearAllBubbles();
    this.clearDelayedTasks();

    // 逐个添加对话，从最后一个开始倒序插入（保持显示顺序）
    for (let i = dialogs.length - 1; i >= 0; i--) {
      const dialog = dialogs[i];
      const bubble = this.createOrGetBubble(dialog.isPlayer);
      bubble.node.active = true;
      bubble.updateBubbleContent(dialog.content, dialog.isPlayer, undefined);
      bubble.node.setSiblingIndex(0);
      this.bubbles.push(bubble);
    }
  }
}