聊天记录展示

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

@@ -43,13 +43,16 @@ export class ChatContentsLayout extends Component {
   private isPressing: boolean = false;
   // 长按计时器
   private longPressTimer: number = null;
+  // 已显示的AI对话数量（用于避免重复显示）
+  private displayedAIDialogCount: number = 0;
 
   fixMaxWidth: number;
 
   protected start(): void {
     this.lBubble.node.active = false;
     this.rBubble.node.active = false;
-    this.fixMaxWidth = 534.4;
+    // 设置气泡最大宽度为屏幕宽度的70%
+    this.fixMaxWidth = view.getVisibleSize().width * 0.7;
 
     // 获取或添加UIOpacity组件到content节点
     this.contentOpacity =
@@ -77,37 +80,44 @@ export class ChatContentsLayout extends Component {
   }
 
   /**
-   * 更新玩家输入的对话
+   * 更新玩家输入的对话（追加模式，不清空历史）
    * @param dialog 玩家输入的对话数据
    */
   updatePlayerDialog(dialog: Dialog): void {
-    // 清理所有现有气泡到缓存池
-    this.clearAllBubbles();
+    if (!dialog) return;
 
-    // 清理所有延时任务
-    this.clearDelayedTasks();
+    // 不再清空气泡，改为追加模式以支持历史记录
 
-    // 创建玩家气泡（插入到首位，Layout会让它显示在最下面）
+    // 创建玩家气泡
     const playerBubble = this.createOrGetBubble(true);
     playerBubble.node.active = true;
     playerBubble.updateBubbleContent(dialog.content, true);
     this.bubbles.push(playerBubble);
+
+    // 滚动到底部
+    this.scheduleOnce(() => {
+      this.scrollView.scrollToBottom();
+    }, 0);
   }
   /**
-   * 更新AI回复的对话
+   * 更新AI回复的对话（智能追加，避免重复显示）
    * @param dialogs AI回复的对话数据数组
    */
   updateAIDialogs(dialogs: Dialog[]): void {
-    // 清除等待回复气泡
-    // if (this.waitingBubble) {
-    //   this.removeWaitingBubble();
-    // }
+    if (!dialogs || dialogs.length === 0) return;
 
     // 清理之前的延时任务
     this.clearDelayedTasks();
 
-    // 逐个添加AI对话，带延时
-    this.addAIDialogsWithDelay(dialogs, 0);
+    // 只添加新的AI对话（避免重复显示历史记录）
+    const newDialogs = dialogs.slice(this.displayedAIDialogCount);
+    if (newDialogs.length > 0) {
+      // 更新已显示数量
+      this.displayedAIDialogCount = dialogs.length;
+
+      // 逐个添加新的AI对话，带延时
+      this.addAIDialogsWithDelay(newDialogs, 0);
+    }
 
     this.node.position = Vec3.ZERO;
     // 滚动到底部（等待下一帧Layout更新完成）
@@ -117,9 +127,9 @@ export class ChatContentsLayout extends Component {
   }
 
   /**
-   * 清理所有气泡到缓存池
+   * 清理所有气泡到缓存池（改为public，供外部调用）
    */
-  private clearAllBubbles(): void {
+  public clearAllBubbles(): void {
     for (const bubble of this.bubbles) {
       if (bubble && bubble.node) {
         bubble.node.active = false;
@@ -129,10 +139,48 @@ export class ChatContentsLayout extends Component {
     this.bubbles = [];
     //this.waitingBubble = null;
 
+    // 重置AI对话计数器
+    this.displayedAIDialogCount = 0;
+
     // 清理多余的缓存气泡
     this.cleanupExcessCachedBubbles();
   }
 
+  /**
+   * 加载所有历史对话（用于初始化）
+   * @param dialogs 所有对话记录
+   */
+  public loadAllDialogs(dialogs: Dialog[]): void {
+    if (!dialogs || dialogs.length === 0) return;
+
+    // 清空现有气泡
+    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);
+      // 每个气泡插入到首位，确保旧消息在上面，新消息在下面
+      bubble.node.setSiblingIndex(0);
+      this.bubbles.push(bubble);
+
+      // 统计AI对话数量
+      if (!dialog.isPlayer) {
+        this.displayedAIDialogCount++;
+      }
+    }
+
+    // 滚动到底部
+    this.scheduleOnce(() => {
+      this.scrollView.scrollToBottom();
+    }, 0.1);
+
+    console.log(`ChatContentsLayout: Loaded ${dialogs.length} history dialogs`);
+  }
+
   /**
    * 从缓存池获取或创建新的气泡
    * @param isPlayer 是否为玩家气泡
@@ -198,12 +246,12 @@ export class ChatContentsLayout extends Component {
       const aiBubble = this.createOrGetBubble(false);
       aiBubble.node.active = true;
       aiBubble.updateBubbleContent(dialog.content, false);
-      // AI消息插入到首位，显示在最上面
-      aiBubble.node.setSiblingIndex(0);
+      // AI消息自然追加到末尾，显示在最下面（与玩家消息保持一致）
+      this.bubbles.push(aiBubble);
+
       this.scheduleOnce(() => {
         this.scrollView.scrollToBottom();
       }, 0);
-      this.bubbles.push(aiBubble);
 
       // 递归处理下一条对话
       this.addAIDialogsWithDelay(dialogs, index + 1);