From f2137d3104a2902a4d6f7489b251a68d3ed38554 Mon Sep 17 00:00:00 2001
From: Huangzhe <huang.ze@ebiz-digits.com>
Date: Wed, 30 Apr 2025 17:31:38 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=B9=E8=BF=9Biframe=E6=B6=88=E6=81=AF?=
 =?UTF-8?q?=E9=80=9A=E9=81=93=E5=AE=9E=E7=8E=B0=E5=92=8C=E6=9B=B4=E6=96=B0?=
 =?UTF-8?q?=E5=BA=94=E7=94=A8=E6=A0=87=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/app/layout.tsx           |  2 +-
 web/utils/message-channel.ts | 68 +++++++++++++++++++++++++++---------
 2 files changed, 52 insertions(+), 18 deletions(-)

diff --git a/web/app/layout.tsx b/web/app/layout.tsx
index 4f9fc616c..0593a00ba 100644
--- a/web/app/layout.tsx
+++ b/web/app/layout.tsx
@@ -9,7 +9,7 @@ import './styles/globals.css'
 import './styles/markdown.scss'
 
 export const metadata = {
-  title: 'Dify',
+  title: 'AgentAI',
 }
 
 export const viewport: Viewport = {
diff --git a/web/utils/message-channel.ts b/web/utils/message-channel.ts
index 49d023673..150468717 100644
--- a/web/utils/message-channel.ts
+++ b/web/utils/message-channel.ts
@@ -1,26 +1,60 @@
+'use client'
+
 // 定义一个全局的 MessageChannel 用于 iframe 通信
-let port
+let port: MessagePort | null = null
 
 export function activeMessageChannel() {
-  // 只监听一次初始化消息，接收到后自动移除监听器
+  // 确保代码只在客户端运行
+  if (typeof window === 'undefined') return
+
+  // 检查是否在 iframe 中
+  const isInIframe = window !== window.parent
+
+  if (!isInIframe) {
+    console.log('不在 iframe 中，无需激活消息通道')
+    return
+  }
+
+  // console.log('在 iframe 中，准备接收消息通道')
+
+  // 监听来自父窗口的消息
   window.addEventListener('message', function initHandler(event) {
-    console.log('尝试接收初始化消息:', event.data)
+    try {
+      // console.log('接收到消息:', event.data)
 
-    console.log('接收到初始化消息，设置端口')
-    port = event.ports[0]
+      // 检查消息中是否包含 MessagePort
+      if (event.ports && event.ports.length > 0) {
+        // console.log('接收到包含 MessagePort 的消息')
 
-    // 设置端口消息处理函数
-    port.onmessage = (msgEvent) => {
-      console.log('接收到worker消息:', msgEvent.data)
+        // 保存端口
+        port = event.ports[0]
+
+        // 设置端口消息处理函数
+        port.onmessage = (/* msgEvent */) => {
+          // console.log('通过 MessagePort 接收到消息:', msgEvent.data)
+        }
+
+        // 将 port 暴露到全局对象
+        // 使用 any 类型避免 TypeScript 错误
+        (window as any).port = port
+
+        // 向父窗口发送确认消息
+        window.parent.postMessage('port-received', '*')
+
+        // 通过端口发送就绪消息
+        port.postMessage({
+          type: 'ready',
+          message: 'iframe 已准备好通信',
+        })
+
+        // 初始化完成后移除这个事件监听器
+        window.removeEventListener('message', initHandler)
+      }
     }
+    catch (error) {
+      console.error('处理消息时出错:', error)
+    }
+  })
 
-    Object.defineProperty(globalThis, 'port', {
-      value: port,
-    })
-
-    // 初始化完成后移除这个事件监听器
-    window.removeEventListener('message', initHandler)
-  }, /* {
-        once: true,
-    } */)
+  // console.log('消息通道监听已激活，等待父窗口发送 MessagePort')
 }