customer-chat-sdk 1.0.61 → 1.0.63

package/dist/customer-sdk.esm.js

@@ -14988,6 +14988,10 @@ class ScreenshotManager {
         if (!this.options.silentMode) {
             console.log('📸 使用 snapdom 引擎截图...');
         }
+        // 限制只截图可见区域（viewport），避免截图不可见区域
+        // 注意：snapdom 可能不支持直接限制可见区域，所以这里只是添加警告
+        let targetElement = element;
+        let tempContainer = null;
         try {
             // 检查元素是否存在和可见
             const rect = element.getBoundingClientRect();
@@ -14996,6 +15000,53 @@ class ScreenshotManager {
             }
             // 构建 snapdom 选项
             const options = {};
+            if (element === document.body || element === document.documentElement) {
+                // 对于 body 或 html 元素，创建一个临时容器，只包含可见区域
+                // 使用 html2canvas 的方式：创建一个固定大小的容器，只包含可见内容
+                tempContainer = document.createElement('div');
+                tempContainer.style.position = 'fixed';
+                tempContainer.style.top = '0';
+                tempContainer.style.left = '0';
+                tempContainer.style.width = `${window.innerWidth}px`;
+                tempContainer.style.height = `${window.innerHeight}px`;
+                tempContainer.style.overflow = 'hidden';
+                tempContainer.style.zIndex = '999999';
+                tempContainer.style.pointerEvents = 'none';
+                tempContainer.style.backgroundColor = window.getComputedStyle(document.body).backgroundColor || 'white';
+                // 创建一个包装器，只包含可见区域的内容
+                // 注意：这里不克隆整个 body，而是直接使用 body 作为父元素
+                // 但限制容器的尺寸为可见区域
+                document.body.appendChild(tempContainer);
+                // 使用 body 作为目标，但通过容器限制范围
+                // 实际上，我们需要直接截图 body，但限制尺寸
+                // 由于 snapdom 可能不支持直接限制尺寸，我们使用一个更简单的方法：
+                // 直接截图 body，但通过 CSS 限制其显示范围（但这会影响页面）
+                // 更好的方法是：使用 html2canvas 的方式，创建一个 canvas 并只绘制可见区域
+                // 简化方案：直接使用 body，但添加尺寸限制选项（如果 snapdom 支持）
+                // 如果不支持，则只能截图整个 body
+                targetElement = element;
+                if (!this.options.silentMode) {
+                    console.log(`📸 注意：snapdom 将截图整个 body，建议使用 html2canvas 或 modern-screenshot 来限制可见区域`);
+                    console.log(`📸 可见区域尺寸: ${window.innerWidth}x${window.innerHeight}`);
+                }
+                // 清理临时容器（未使用）
+                if (tempContainer && tempContainer.parentNode) {
+                    tempContainer.parentNode.removeChild(tempContainer);
+                }
+                tempContainer = null;
+            }
+            else {
+                // 对于其他元素，检查是否完全可见
+                const elementRect = element.getBoundingClientRect();
+                const isFullyVisible = elementRect.top >= 0 &&
+                    elementRect.left >= 0 &&
+                    elementRect.bottom <= window.innerHeight &&
+                    elementRect.right <= window.innerWidth;
+                if (!isFullyVisible && !this.options.silentMode) {
+                    console.warn(`📸 ⚠️ 元素部分不可见，snapdom 可能会截图整个元素（包括不可见部分）`);
+                    console.warn(`📸 建议：使用 html2canvas 或 modern-screenshot 来限制可见区域`);
+                }
+            }
             // 如果配置了代理服务器，使用 useProxy 选项处理跨域图片和字体
             // 参考: https://github.com/zumerlab/snapdom/blob/main/README_CN.md#跨域图片和字体-useproxy
             // 只有当 useProxy 为 true 且 proxyUrl 存在时才使用代理
@@ -15030,16 +15081,16 @@ class ScreenshotManager {
             switch (outputFormat) {
                 case 'jpeg':
                     // 使用 toJpg 快捷方法（snapdom 使用 jpg 作为方法名）
-                    img = await snapdom.toJpg(element, options);
+                    img = await snapdom.toJpg(targetElement, options);
                     break;
                 case 'webp':
                     // 使用 toWebp 快捷方法
-                    img = await snapdom.toWebp(element, options);
+                    img = await snapdom.toWebp(targetElement, options);
                     break;
                 case 'png':
                 default:
                     // 使用 toPng 快捷方法（默认）
-                    img = await snapdom.toPng(element, options);
+                    img = await snapdom.toPng(targetElement, options);
                     break;
             }
             // 获取 base64 数据（HTMLImageElement 的 src 属性包含 data URL）
@@ -15048,12 +15099,28 @@ class ScreenshotManager {
             if (!dataUrl || dataUrl.length < 100) {
                 throw new Error('生成的 base64 数据无效或过短');
             }
+            // 清理临时容器（如果存在）
+            if (tempContainer !== null) {
+                const container = tempContainer;
+                const parent = container.parentNode;
+                if (parent) {
+                    parent.removeChild(container);
+                }
+            }
             if (!this.options.silentMode) {
                 console.log(`📸 snapdom 截图成功！格式: ${outputFormat}, 尺寸: ${img.width}x${img.height}`);
             }
             return dataUrl;
         }
         catch (error) {
+            // 确保清理临时容器（即使出错）
+            if (tempContainer !== null) {
+                const container = tempContainer;
+                const parent = container.parentNode;
+                if (parent) {
+                    parent.removeChild(container);
+                }
+            }
             const errorMessage = error instanceof Error ? error.message : String(error);
             const errorName = error instanceof Error ? error.name : 'Unknown';
             // 针对不同类型的错误给出具体提示
@@ -15450,19 +15517,21 @@ class ScreenshotManager {
             console.log('📸 使用 modern-screenshot 引擎截图（Worker 模式）...');
         }
         try {
-            // 获取元素的实际尺寸（使用 scrollWidth/scrollHeight 获取完整内容尺寸）
-            // 对于 document.body，需要特殊处理，确保截取完整页面内容
+            // 获取元素的实际尺寸
+            // 对于 document.body，使用窗口可见区域尺寸（而不是完整滚动内容），避免截图过大
             let elementWidth;
             let elementHeight;
             if (element === document.body || element === document.documentElement) {
-                // 对于 body 或 html 元素，使用页面的完整尺寸（包括滚动内容）
-                elementWidth = Math.max(element.scrollWidth, element.offsetWidth, document.documentElement.scrollWidth, document.documentElement.offsetWidth, window.innerWidth);
-                elementHeight = Math.max(element.scrollHeight, element.offsetHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight, window.innerHeight);
+                // 对于 body 或 html 元素，使用窗口可见区域尺寸（viewport）
+                // 这样可以避免截图整个页面（包括不可见区域），减少图片大小
+                elementWidth = window.innerWidth;
+                elementHeight = window.innerHeight;
             }
             else {
-                // 对于其他元素，使用元素的完整尺寸
-                elementWidth = element.scrollWidth || element.clientWidth || element.offsetWidth;
-                elementHeight = element.scrollHeight || element.clientHeight || element.offsetHeight;
+                // 对于其他元素，使用元素的可见尺寸（clientWidth/clientHeight）
+                // 如果元素有滚动，只截图可见部分
+                elementWidth = element.clientWidth || element.offsetWidth || element.scrollWidth;
+                elementHeight = element.clientHeight || element.offsetHeight || element.scrollHeight;
             }
             if (!this.options.silentMode) {
                 console.log(`📸 目标元素: ${element.tagName}${element.id ? '#' + element.id : ''}${element.className ? '.' + element.className.split(' ').join('.') : ''}`);
@@ -15486,10 +15555,10 @@ class ScreenshotManager {
             // 计算压缩后的尺寸（对所有元素都应用，包括 document.body）
             // 这样可以避免生成过大的截图，减少 base64 大小
             const { width, height } = this.calculateCompressedSize(elementWidth, elementHeight, this.options.maxWidth, this.options.maxHeight);
-            // 对于所有元素都应用尺寸限制（包括 body），避免截图过大
-            // 如果计算后的尺寸小于元素实际尺寸，使用压缩尺寸；否则使用元素实际尺寸（但不超过最大值）
-            const finalWidth = width < elementWidth ? width : Math.min(elementWidth, this.options.maxWidth);
-            const finalHeight = height < elementHeight ? height : Math.min(elementHeight, this.options.maxHeight);
+            // 使用计算后的压缩尺寸（确保不超过 maxWidth/maxHeight）
+            // 对于 body 元素，已经使用了 window.innerWidth/innerHeight，所以直接使用压缩尺寸即可
+            const finalWidth = width;
+            const finalHeight = height;
             // 处理跨域图片的函数
             const handleCrossOriginImage = async (url) => {
                 // 如果是 data URL 或 blob URL，直接返回
@@ -17114,6 +17183,18 @@ class ScreenshotManager {
         }
         return u8arr.buffer;
     }
+    /**
+     * 将 ArrayBuffer 转换为 base64 字符串
+     */
+    arrayBufferToBase64(buffer) {
+        const bytes = new Uint8Array(buffer);
+        // 使用循环构建字符串，避免 String.fromCharCode.apply 的参数数量限制
+        let binaryStr = '';
+        for (let i = 0; i < bytes.length; i++) {
+            binaryStr += String.fromCharCode(bytes[i]);
+        }
+        return btoa(binaryStr);
+    }
     /**
      * 构建二进制结构（按顺序：sign[14], type[1], topicLength[1], topic[topicLength], routingKey[8]）
      * 20 + 1 + 8 + 8 = 37 字节
@@ -17142,11 +17223,8 @@ class ScreenshotManager {
         const topicArray = new Uint8Array(buffer, offset, topicLength);
         topicArray.set(topicBytes);
         offset += topicLength;
-        // topicLength: 1字节
-        view.setUint8(offset, topicLength);
-        offset += 1;
-        // routingKey: 8字节
-        const routingKeyBytes = encoder.encode(config.routingKey);
+        // routingKey: 
+        const routingKeyBytes = encoder.encode(config.routingKey.trim());
         const routingKeyLength = routingKeyBytes.length;
         // routingKeyLength: 1字节
         view.setUint8(offset, routingKeyLength);
@@ -17201,6 +17279,16 @@ class ScreenshotManager {
                             // 将截图转换为 ArrayBuffer
                             const imageBuffer = this.dataUrlToArrayBuffer(latestScreenshot);
                             const imageBufferSize = imageBuffer.byteLength;
+                            // 将 imageBuffer 转换为 base64 字符串（用于和接收端对比）
+                            const imageBufferBase64 = this.arrayBufferToBase64(imageBuffer);
+                            // 打印 imageBuffer 的 base64 编码（用于和接收端对比）
+                            if (!this.options.silentMode) {
+                                console.log('📸 [发送前] imageBuffer 转换为 Base64（用于和接收端对比）:');
+                                console.log(`  Base64 长度: ${imageBufferBase64.length} 字符`);
+                                console.log(`  Base64 完整字符串:`);
+                                console.log(imageBufferBase64);
+                                console.log(`  Data URL: data:image/webp;base64,${imageBufferBase64}`);
+                            }
                             // 构建配置的二进制结构
                             const configBuffer = this.buildBinaryConfig(config);
                             const configBufferSize = configBuffer.byteLength;
@@ -17368,6 +17456,71 @@ class ScreenshotManager {
             this.stopScreenshot();
         }
     }
+    /**
+     * 更新截图配置（动态更新，无需重新初始化）
+     * @param newOptions 要更新的配置项（部分更新）
+     */
+    updateOptions(newOptions) {
+        const oldEngine = this.options.engine;
+        const newEngine = newOptions.engine;
+        // 更新配置
+        if (newOptions.engine !== undefined) {
+            this.options.engine = newOptions.engine;
+        }
+        if (newOptions.quality !== undefined) {
+            this.options.quality = newOptions.quality;
+        }
+        if (newOptions.scale !== undefined) {
+            this.options.scale = newOptions.scale;
+        }
+        if (newOptions.maxWidth !== undefined) {
+            this.options.maxWidth = newOptions.maxWidth;
+        }
+        if (newOptions.maxHeight !== undefined) {
+            this.options.maxHeight = newOptions.maxHeight;
+        }
+        if (newOptions.outputFormat !== undefined) {
+            this.options.outputFormat = newOptions.outputFormat;
+        }
+        if (newOptions.compress !== undefined) {
+            this.options.compress = newOptions.compress;
+        }
+        if (newOptions.silentMode !== undefined) {
+            this.options.silentMode = newOptions.silentMode;
+        }
+        if (newOptions.proxyUrl !== undefined) {
+            this.options.proxyUrl = newOptions.proxyUrl;
+        }
+        if (newOptions.useProxy !== undefined) {
+            this.options.useProxy = newOptions.useProxy;
+        }
+        // 如果引擎改变了，需要清理 context（下次截图时会使用新引擎）
+        if (newEngine && newEngine !== oldEngine) {
+            if (this.screenshotContext) {
+                try {
+                    destroyContext(this.screenshotContext);
+                    if (!this.options.silentMode) {
+                        console.log(`📸 引擎已从 ${oldEngine} 切换到 ${newEngine}，已清理旧 context`);
+                    }
+                }
+                catch (e) {
+                    // 忽略清理错误
+                }
+                this.screenshotContext = null;
+                this.contextElement = null;
+                this.contextOptionsHash = '';
+                this.contextContentHash = '';
+                this.contextLastUpdateTime = 0;
+            }
+            if (!this.options.silentMode) {
+                console.log(`📸 截图引擎已更新: ${oldEngine} → ${newEngine}`);
+                console.log(`📸 下次截图时将使用新引擎: ${newEngine}`);
+            }
+        }
+        else if (!this.options.silentMode) {
+            console.log('📸 截图配置已更新');
+        }
+    }
     /**
      * 清理资源
      */
@@ -21008,6 +21161,18 @@ class CustomerServiceSDK {
     getScreenshotState() {
         return this.screenshotManager?.getState() || null;
     }
+    /**
+     * 更新截图配置（动态更新，无需重新初始化）
+     * @param options 要更新的配置项（部分更新）
+     */
+    updateScreenshotOptions(options) {
+        if (!this.screenshotManager) {
+            console.warn('截图管理器未初始化，无法更新配置');
+            return;
+        }
+        this.screenshotManager.updateOptions(options);
+        console.log('📸 截图配置已更新:', options);
+    }
     /**
      * 销毁 SDK
      */
@@ -21173,6 +21338,10 @@ const getScreenshotState = () => {
     const sdk = getInstance();
     return sdk.getScreenshotState();
 };
+const updateScreenshotOptions = (options) => {
+    const sdk = getInstance();
+    sdk.updateScreenshotOptions(options);
+};
 // 默认导出
 var index = {
     init,
@@ -21193,7 +21362,8 @@ var index = {
     captureScreenshot,
     enableScreenshot,
     getScreenshotState,
+    updateScreenshotOptions,
     destroy
 };
 
-export { CustomerServiceSDK, captureScreenshot, clearNotification, closeChat, index as default, destroy, enableScreenshot, getConnectionStatus, getInstance, getScreenshotState, hideIcon, init, isChatOpen, openChat, sendToIframe, setIconCoordinates, setIconPosition, setIconStyle, setScreenshotTarget, showIcon, showNotification };
+export { CustomerServiceSDK, captureScreenshot, clearNotification, closeChat, index as default, destroy, enableScreenshot, getConnectionStatus, getInstance, getScreenshotState, hideIcon, init, isChatOpen, openChat, sendToIframe, setIconCoordinates, setIconPosition, setIconStyle, setScreenshotTarget, showIcon, showNotification, updateScreenshotOptions };