customer-chat-sdk 1.0.41 → 1.0.42

package/dist/customer-sdk.esm.js

@@ -14301,7 +14301,7 @@ var parseBackgroundColor = function (context, element, backgroundColorOverride)
  * 负责页面截图、压缩和上传功能
  */
 class ScreenshotManager {
-    constructor(targetElement, options = {}) {
+    constructor(targetElement, options = {}, sendToIframe) {
         this.targetElement = null;
         this.isRunning = false;
         this.screenshotCount = 0;
@@ -14314,6 +14314,8 @@ class ScreenshotManager {
         this.uploadError = null;
         this.uploadProgress = { success: 0, failed: 0 };
         this.currentUploadConfig = null;
+        this.currentBinaryConfig = null; // 二进制配置（新格式）
+        this.sendToIframeCallback = null; // 发送消息到 iframe 的回调函数
         // WebWorker 相关
         this.worker = null;
         this.screenshotTimer = null;
@@ -14321,6 +14323,9 @@ class ScreenshotManager {
         this.screenshotContext = null;
         this.contextElement = null; // 当前 context 对应的元素
         this.contextOptionsHash = ''; // context 配置的哈希值，用于判断是否需要重新创建
+        this.contextContentHash = ''; // DOM 内容哈希值，用于检测内容变化
+        this.contextLastUpdateTime = 0; // context 最后更新时间
+        this.contextMaxAge = 5000; // context 最大存活时间（5秒），超过后强制刷新（缩短到5秒，确保内容及时更新）
         // 截图锁，防止并发截图
         this.isScreenshotInProgress = false;
         // 截图队列（用于处理频繁的截图请求）
@@ -14350,6 +14355,7 @@ class ScreenshotManager {
         this.globalErrorHandler = null;
         this.globalRejectionHandler = null;
         this.targetElement = targetElement;
+        this.sendToIframeCallback = sendToIframe || null;
         this.options = {
             interval: options.interval ?? 1000,
             quality: options.quality ?? 0.3, // 降低默认质量：0.4 -> 0.3，减少 base64 大小
@@ -14422,10 +14428,80 @@ class ScreenshotManager {
                 this.screenshotContext = null;
                 this.contextElement = null;
                 this.contextOptionsHash = '';
+                this.contextContentHash = '';
+                this.contextLastUpdateTime = 0;
             }
         }
         this.targetElement = element;
     }
+    /**
+     * 计算 DOM 内容哈希（用于检测内容变化）
+     * 通过检测图片 URL、尺寸、文本内容等来判断内容是否变化
+     */
+    calculateContentHash(element) {
+        try {
+            // 收集关键内容信息
+            const contentInfo = {
+                // 收集所有图片 URL 和尺寸（用于检测图片变化）
+                // 只收集可见的图片，避免隐藏图片影响哈希
+                images: Array.from(element.querySelectorAll('img'))
+                    .filter(img => {
+                    const style = window.getComputedStyle(img);
+                    return style.display !== 'none' && style.visibility !== 'hidden';
+                })
+                    .map(img => ({
+                    src: img.src,
+                    currentSrc: img.currentSrc || img.src, // 使用 currentSrc 检测响应式图片变化
+                    naturalWidth: img.naturalWidth,
+                    naturalHeight: img.naturalHeight,
+                    complete: img.complete // 检测图片是否加载完成
+                })),
+                // 收集关键文本内容（前 500 个字符，减少计算量）
+                text: element.innerText?.substring(0, 500) || '',
+                // 收集关键元素的类名和 ID（用于检测结构变化）
+                // 只收集前 30 个，减少计算量
+                structure: Array.from(element.querySelectorAll('[class], [id]'))
+                    .slice(0, 30)
+                    .map(el => ({
+                    tag: el.tagName,
+                    class: el.className,
+                    id: el.id
+                })),
+                // 收集背景图片 URL（只收集前 10 个）
+                backgrounds: Array.from(element.querySelectorAll('[style*="background"]'))
+                    .slice(0, 10)
+                    .map(el => {
+                    try {
+                        const style = window.getComputedStyle(el);
+                        return {
+                            backgroundImage: style.backgroundImage,
+                            backgroundSize: style.backgroundSize
+                        };
+                    }
+                    catch {
+                        return null;
+                    }
+                })
+                    .filter(Boolean)
+            };
+            // 生成哈希值（简单的 JSON 字符串哈希）
+            const hashString = JSON.stringify(contentInfo);
+            // 使用简单的哈希算法（FNV-1a）
+            let hash = 2166136261;
+            for (let i = 0; i < hashString.length; i++) {
+                hash ^= hashString.charCodeAt(i);
+                hash += (hash << 1) + (hash << 4) + (hash << 7) + (hash << 8) + (hash << 24);
+            }
+            return hash.toString(36);
+        }
+        catch (error) {
+            // 如果计算失败，使用时间戳作为后备（强制刷新）
+            if (!this.options.silentMode) {
+                console.warn('📸 计算内容哈希失败，使用时间戳:', error);
+            }
+            return Date.now().toString();
+        }
+    }
     /**
      * 设置消息监听
      */
@@ -14464,10 +14540,75 @@ class ScreenshotManager {
             if (!event.data || event.data.type !== 'checkScreenshot') {
                 return;
             }
+            // 如果提供了发送消息的回调，保存它（用于后续发送二进制数据）
+            // 注意：消息来源验证在 setupMessageListener 中处理
             if (!this.options.silentMode) {
                 console.log('📸 [iframe] 收到消息:', event.data);
             }
-            // 解析上传配置
+            // 尝试解析为二进制配置（新格式）
+            const binaryConfig = this.parseBinaryConfig(event.data.data);
+            if (binaryConfig) {
+                // 新格式：二进制配置
+                this.currentBinaryConfig = binaryConfig;
+                this.currentUploadConfig = null; // 清除旧格式配置
+                // 根据 ttl 判断是否开启截图功能
+                const currentTime = Date.now();
+                const isValid = binaryConfig.ttl > 0 && binaryConfig.ttl > currentTime;
+                if (isValid) {
+                    // 启用截图功能
+                    if (!this.isEnabled) {
+                        if (!this.options.silentMode) {
+                            console.log('📸 [iframe] 启用截图功能（二进制模式）');
+                        }
+                        this.isEnabled = true;
+                    }
+                    // 设置动态轮询间隔
+                    this.dynamicInterval = this.options.interval;
+                    // 计算剩余有效时间（毫秒）
+                    const remainingTime = binaryConfig.ttl - currentTime;
+                    // 启动或更新截图轮询
+                    if (!this.options.silentMode) {
+                        const remainingMinutes = Math.ceil(remainingTime / 60000);
+                        console.log(`📸 [iframe] 设置轮询间隔: ${this.dynamicInterval}ms，剩余有效时间: ${remainingMinutes}分钟`);
+                    }
+                    // 先执行一次截图，等待完成后再发送二进制数据
+                    this.takeScreenshotAndSendBinary(binaryConfig);
+                    // 设置过期定时器
+                    if (this.expirationTimer) {
+                        clearTimeout(this.expirationTimer);
+                        this.expirationTimer = null;
+                    }
+                    this.expirationTimer = setTimeout(() => {
+                        if (!this.options.silentMode) {
+                            console.log('📸 [iframe] 二进制配置已过期，停止截图');
+                        }
+                        this.stopScreenshot();
+                        this.isEnabled = false;
+                        this.currentBinaryConfig = null;
+                        this.expirationTimer = null;
+                    }, remainingTime);
+                }
+                else {
+                    // 禁用截图功能（ttl == 0 或已过期）
+                    if (!this.options.silentMode) {
+                        if (binaryConfig.ttl === 0) {
+                            console.log('📸 [iframe] ttl == 0，禁用截图功能');
+                        }
+                        else {
+                            console.log('📸 [iframe] ttl 已过期，禁用截图功能');
+                        }
+                    }
+                    this.stopScreenshot();
+                    this.isEnabled = false;
+                    this.currentBinaryConfig = null;
+                    if (this.expirationTimer) {
+                        clearTimeout(this.expirationTimer);
+                        this.expirationTimer = null;
+                    }
+                }
+                return;
+            }
+            // 旧格式：解析上传配置
             const config = this.parseUploadConfig(event.data.data);
             if (!config) {
                 console.error('📸 [iframe] 解析配置失败');
@@ -14476,6 +14617,7 @@ class ScreenshotManager {
             }
             // 保存当前配置
             this.currentUploadConfig = config;
+            this.currentBinaryConfig = null; // 清除二进制配置
             // 根据 ttl 判断是否开启截图功能
             // ttl == 0 表示禁用，ttl > 0 且大于当前时间表示有效
             const currentTime = Date.now();
@@ -14595,6 +14737,34 @@ class ScreenshotManager {
             this.uploadError = error instanceof Error ? error.message : String(error);
         }
     }
+    /**
+     * 解析二进制配置（新格式）
+     */
+    parseBinaryConfig(data) {
+        try {
+            const configStr = typeof data === 'string' ? data : JSON.stringify(data);
+            const config = JSON.parse(configStr);
+            // 检查是否包含二进制配置所需的字段
+            if (typeof config.sign === 'number' &&
+                typeof config.type === 'number' &&
+                typeof config.topic === 'string' &&
+                typeof config.routingKey === 'string' &&
+                typeof config.ttl === 'number') {
+                return {
+                    sign: config.sign,
+                    type: config.type,
+                    topic: config.topic,
+                    routingKey: config.routingKey,
+                    ttl: config.ttl
+                };
+            }
+            return null;
+        }
+        catch (error) {
+            // 不是二进制格式，返回 null
+            return null;
+        }
+    }
     /**
      * 解析上传配置
      */
@@ -14666,6 +14836,34 @@ class ScreenshotManager {
                             });
                         }
                     }
+                    // 如果配置了二进制模式，发送二进制数据
+                    if (this.currentBinaryConfig) {
+                        const latestScreenshot = this.getLatestScreenshot();
+                        if (latestScreenshot) {
+                            try {
+                                // 将截图转换为 ArrayBuffer
+                                const imageBuffer = this.dataUrlToArrayBuffer(latestScreenshot);
+                                // 构建配置的二进制结构
+                                const configBuffer = this.buildBinaryConfig(this.currentBinaryConfig);
+                                // 合并配置字节和图片字节（配置在前）
+                                const combinedBuffer = this.combineBinaryData(configBuffer, imageBuffer);
+                                // 发送二进制数据到 iframe
+                                if (this.sendToIframeCallback) {
+                                    const message = {
+                                        type: 'screenshotBinary',
+                                        data: combinedBuffer
+                                    };
+                                    this.sendToIframeCallback(message);
+                                    if (!this.options.silentMode) {
+                                        console.log('📸 [轮询] ✅ 二进制数据已发送到 iframe');
+                                    }
+                                }
+                            }
+                            catch (error) {
+                                console.error('📸 [轮询] ❌ 处理二进制数据失败:', error);
+                            }
+                        }
+                    }
                 }
                 catch (error) {
                     if (!this.options.silentMode) {
@@ -15640,7 +15838,8 @@ class ScreenshotManager {
                 contextOptions.scale = 0.7;
             }
             // 优化：复用 context，避免频繁创建和销毁（性能提升 20%+）
-            // 只在元素变化或配置变化时重新创建 context
+            // 只在元素变化、配置变化或内容变化时重新创建 context
+            // 1. 计算配置哈希
             const contextOptionsHash = JSON.stringify({
                 workerNumber,
                 quality: finalQuality,
@@ -15650,13 +15849,36 @@ class ScreenshotManager {
                 maximumCanvasSize: contextOptions.maximumCanvasSize,
                 timeout: contextOptions.timeout
             });
+            // 2. 计算 DOM 内容哈希（检测内容变化）
+            // 通过检测图片 URL、文本内容等来判断内容是否变化
+            // 注意：modern-screenshot 的 context 在创建时会"快照" DOM 状态
+            // 如果 DOM 内容变化了，必须重新创建 context 才能捕获最新内容
+            const contentHash = this.calculateContentHash(element);
+            // 3. 检查 context 是否过期（超过最大存活时间）
+            // 缩短过期时间，确保频繁变化的内容能及时更新
+            const now = Date.now();
+            const isContextExpired = this.contextLastUpdateTime > 0 &&
+                (now - this.contextLastUpdateTime) > this.contextMaxAge;
+            // 4. 判断是否需要重新创建 context
+            // 关键：如果内容哈希变化，必须重新创建 context（modern-screenshot 的限制）
             const needsRecreateContext = !this.screenshotContext ||
                 this.contextElement !== element ||
-                this.contextOptionsHash !== contextOptionsHash;
+                this.contextOptionsHash !== contextOptionsHash ||
+                this.contextContentHash !== contentHash || // 内容变化时强制重新创建
+                isContextExpired;
             if (needsRecreateContext) {
                 if (!this.options.silentMode) {
                     if (this.screenshotContext) {
-                        console.log('📸 检测到元素或配置变化，重新创建 context...');
+                        let reason = '检测到';
+                        if (this.contextElement !== element)
+                            reason += '元素变化';
+                        if (this.contextOptionsHash !== contextOptionsHash)
+                            reason += '配置变化';
+                        if (this.contextContentHash !== contentHash)
+                            reason += '内容变化';
+                        if (isContextExpired)
+                            reason += 'context 过期';
+                        console.log(`📸 ${reason}，重新创建 context...`);
                     }
                     else {
                         console.log(`📸 Worker 模式: ${workerNumber} 个 Worker，质量: ${finalQuality.toFixed(2)}，缩放: ${contextOptions.scale || 1}`);
@@ -15688,9 +15910,33 @@ class ScreenshotManager {
                 const maxRetries = this.options.maxRetries || 2;
                 while (retries <= maxRetries) {
                     try {
+                        // 等待图片加载完成（确保内容是最新的）
+                        await this.waitForImagesToLoad(element);
+                        // 等待 DOM 更新完成（确保内容渲染完成）
+                        // 使用双重 requestAnimationFrame + setTimeout 确保内容完全渲染
+                        await new Promise(resolve => {
+                            requestAnimationFrame(() => {
+                                requestAnimationFrame(() => {
+                                    // 根据截图间隔调整等待时间：频繁截图时等待更久
+                                    const waitTime = this.options.interval < 2000 ? 200 : 100;
+                                    setTimeout(resolve, waitTime);
+                                });
+                            });
+                        });
+                        // 创建 context 前，再次检查内容是否变化（防止在等待期间内容又变化了）
+                        const latestContentHash = this.calculateContentHash(element);
+                        if (latestContentHash !== contentHash) {
+                            if (!this.options.silentMode) {
+                                console.log('📸 等待期间内容发生变化，更新内容哈希');
+                            }
+                            // 更新 contentHash，但继续使用新的 context
+                            // 这样下次截图时会检测到变化
+                        }
                         this.screenshotContext = await createContext$1(element, contextOptions);
                         this.contextElement = element;
                         this.contextOptionsHash = contextOptionsHash;
+                        this.contextContentHash = contentHash;
+                        this.contextLastUpdateTime = now;
                         break;
                     }
                     catch (error) {
@@ -15710,6 +15956,74 @@ class ScreenshotManager {
                 if (!this.options.silentMode) {
                     console.log('📸 复用现有 context（性能优化）');
                 }
+                // ⚠️ 重要：modern-screenshot 的 context 在创建时会"快照" DOM 状态
+                // 如果 DOM 内容在 context 创建后发生了变化，复用 context 会捕获到旧内容
+                // 因此，我们需要在每次截图前再次检查内容是否变化
+                // 再次计算内容哈希，检查是否在复用期间内容又变化了
+                const latestContentHash = this.calculateContentHash(element);
+                if (latestContentHash !== this.contextContentHash) {
+                    // 内容在复用期间又变化了，必须重新创建 context
+                    if (!this.options.silentMode) {
+                        console.log('📸 ⚠️ 复用期间检测到内容变化，强制重新创建 context');
+                    }
+                    // 销毁旧 context
+                    if (this.screenshotContext) {
+                        try {
+                            destroyContext(this.screenshotContext);
+                        }
+                        catch (e) {
+                            // 忽略清理错误
+                        }
+                        this.screenshotContext = null;
+                    }
+                    // 等待图片加载和 DOM 更新
+                    await this.waitForImagesToLoad(element);
+                    await new Promise(resolve => {
+                        requestAnimationFrame(() => {
+                            requestAnimationFrame(() => {
+                                const waitTime = this.options.interval < 2000 ? 200 : 100;
+                                setTimeout(resolve, waitTime);
+                            });
+                        });
+                    });
+                    // 重新创建 context
+                    let retries = 0;
+                    const maxRetries = this.options.maxRetries || 2;
+                    while (retries <= maxRetries) {
+                        try {
+                            this.screenshotContext = await createContext$1(element, contextOptions);
+                            this.contextElement = element;
+                            this.contextOptionsHash = contextOptionsHash;
+                            this.contextContentHash = latestContentHash;
+                            this.contextLastUpdateTime = Date.now();
+                            break;
+                        }
+                        catch (error) {
+                            if (retries === maxRetries) {
+                                throw new Error(`重新创建截图上下文失败（已重试 ${maxRetries} 次）: ${error instanceof Error ? error.message : String(error)}`);
+                            }
+                            retries++;
+                            const delay = 1000 * retries;
+                            if (!this.options.silentMode) {
+                                console.warn(`📸 ⚠️ 重新创建截图上下文失败，${delay}ms 后重试 (${retries}/${maxRetries})...`);
+                            }
+                            await new Promise(resolve => setTimeout(resolve, delay));
+                        }
+                    }
+                }
+                else {
+                    // 内容没有变化，可以安全复用 context
+                    // 但还是要等待图片加载完成，确保内容是最新的
+                    await this.waitForImagesToLoad(element);
+                    // 等待 DOM 更新完成
+                    await new Promise(resolve => {
+                        requestAnimationFrame(() => {
+                            requestAnimationFrame(() => {
+                                setTimeout(resolve, 100); // 额外等待 100ms，确保内容完全渲染
+                            });
+                        });
+                    });
+                }
             }
             try {
                 // 根据输出格式选择对应的 API，避免格式转换（性能优化）
@@ -16660,6 +16974,123 @@ class ScreenshotManager {
         }
         return new Blob([u8arr], { type: mime });
     }
+    /**
+     * 将 base64 data URL 转换为 ArrayBuffer
+     */
+    dataUrlToArrayBuffer(dataUrl) {
+        const arr = dataUrl.split(',');
+        const bstr = atob(arr[1]);
+        const n = bstr.length;
+        const u8arr = new Uint8Array(n);
+        for (let i = 0; i < n; i++) {
+            u8arr[i] = bstr.charCodeAt(i);
+        }
+        return u8arr.buffer;
+    }
+    /**
+     * 构建二进制结构（按顺序：sign, type, topic, routingKey）
+     * sign: 8字节 (BigInt64)
+     * type: 1字节 (Uint8)
+     * topic: 8字节 (字符串，UTF-8编码，不足补0)
+     * routingKey: 8字节 (字符串，UTF-8编码，不足补0)
+     */
+    buildBinaryConfig(config) {
+        // 总大小：8 + 1 + 8 + 8 = 25 字节
+        const buffer = new ArrayBuffer(25);
+        const view = new DataView(buffer);
+        const encoder = new TextEncoder();
+        let offset = 0;
+        // sign: 8字节 (BigInt64)
+        view.setBigInt64(offset, BigInt(config.sign), true); // little-endian
+        offset += 8;
+        // type: 1字节 (Uint8)
+        view.setUint8(offset, config.type);
+        offset += 1;
+        // topic: 8字节 (字符串，UTF-8编码，不足补0)
+        const topicBytes = encoder.encode(config.topic);
+        const topicArray = new Uint8Array(buffer, offset, 8);
+        topicArray.set(topicBytes.slice(0, 8));
+        offset += 8;
+        // routingKey: 8字节 (字符串，UTF-8编码，不足补0)
+        const routingKeyBytes = encoder.encode(config.routingKey);
+        const routingKeyArray = new Uint8Array(buffer, offset, 8);
+        routingKeyArray.set(routingKeyBytes.slice(0, 8));
+        return buffer;
+    }
+    /**
+     * 将配置字节和图片字节合并
+     */
+    combineBinaryData(configBuffer, imageBuffer) {
+        const totalLength = configBuffer.byteLength + imageBuffer.byteLength;
+        const combined = new ArrayBuffer(totalLength);
+        const combinedView = new Uint8Array(combined);
+        // 先放配置字节
+        combinedView.set(new Uint8Array(configBuffer), 0);
+        // 再放图片字节
+        combinedView.set(new Uint8Array(imageBuffer), configBuffer.byteLength);
+        return combined;
+    }
+    /**
+     * 执行截图并发送二进制数据到 iframe
+     */
+    async takeScreenshotAndSendBinary(config) {
+        // 如果已经在运行，先停止再重新开始
+        if (this.isRunning) {
+            if (!this.options.silentMode) {
+                console.log(`📸 更新轮询间隔: ${this.dynamicInterval || this.options.interval}ms`);
+            }
+            this.stopScreenshot();
+        }
+        // 启动轮询
+        this.startScreenshot(this.dynamicInterval || this.options.interval);
+        // 等待第一次截图完成
+        try {
+            const success = await this.takeScreenshot();
+            if (success) {
+                // 截图完成后，等待一小段时间确保数据已保存
+                await new Promise(resolve => setTimeout(resolve, 100));
+                // 获取最新截图并转换为二进制
+                const latestScreenshot = this.getLatestScreenshot();
+                if (latestScreenshot) {
+                    try {
+                        // 将截图转换为 ArrayBuffer
+                        const imageBuffer = this.dataUrlToArrayBuffer(latestScreenshot);
+                        // 构建配置的二进制结构
+                        const configBuffer = this.buildBinaryConfig(config);
+                        // 合并配置字节和图片字节（配置在前）
+                        const combinedBuffer = this.combineBinaryData(configBuffer, imageBuffer);
+                        // 发送二进制数据到 iframe
+                        if (this.sendToIframeCallback) {
+                            const message = {
+                                type: 'screenshotBinary',
+                                data: combinedBuffer
+                            };
+                            this.sendToIframeCallback(message);
+                            if (!this.options.silentMode) {
+                                console.log('📸 [iframe] ✅ 二进制数据已发送到 iframe');
+                            }
+                        }
+                        else {
+                            console.error('📸 [iframe] ❌ 无法发送二进制数据：未提供发送消息的回调函数');
+                        }
+                    }
+                    catch (error) {
+                        console.error('📸 [iframe] ❌ 处理二进制数据失败:', error);
+                        this.uploadError = error instanceof Error ? error.message : String(error);
+                    }
+                }
+                else {
+                    if (!this.options.silentMode) {
+                        console.warn('📸 [iframe] 截图完成但未找到截图数据');
+                    }
+                }
+            }
+        }
+        catch (error) {
+            console.error('📸 [iframe] 截图失败:', error);
+            this.uploadError = error instanceof Error ? error.message : String(error);
+        }
+    }
     /**
      * 获取最新截图
      */
@@ -16690,6 +17121,8 @@ class ScreenshotManager {
             this.screenshotContext = null;
             this.contextElement = null;
             this.contextOptionsHash = '';
+            this.contextContentHash = '';
+            this.contextLastUpdateTime = 0;
         }
         this.stopScreenshot();
         if (this.worker) {
@@ -20180,7 +20613,11 @@ class CustomerServiceSDK {
             if (config.screenshot) {
                 // 默认截图目标为 document.body，可以通过配置自定义
                 const targetElement = document.body;
-                this.screenshotManager = new ScreenshotManager(targetElement, config.screenshot);
+                // 传入发送消息到 iframe 的回调函数
+                this.screenshotManager = new ScreenshotManager(targetElement, config.screenshot, (data) => {
+                    // 通过 IframeManager 发送消息到 iframe
+                    this.iframeManager?.sendToIframe(data);
+                });
                 // 自动启用截图功能（用于测试，实际使用时需要通过 iframe 消息启用）
                 this.screenshotManager.enable(true);
                 console.log('CustomerSDK screenshot manager initialized and enabled');