customer-chat-sdk 1.1.9 → 1.1.11

package/dist/customer-sdk.esm.js

@@ -18,6 +18,19 @@ class IconManager {
         this.lastTouchPosition = { x: 0, y: 0 }; // 最后触摸位置
         this.touchStartTime = 0; // 触摸开始时间
         this.clickThreshold = 15; // 点击阈值（像素）
+        // 性能优化：缓存容器信息，避免频繁查询 DOM
+        this.cachedContainer = null;
+        this.cachedContainerRect = null;
+        this.cachedIconSize = { width: 0, height: 0 };
+        this.lastContainerUpdateTime = 0;
+        this.containerUpdateInterval = 100; // 每 100ms 更新一次容器信息（避免频繁重排）
+        // 性能优化：缓存所有 iframe 的位置信息（用于检测鼠标是否在 iframe 上）
+        this.cachedIframes = [];
+        this.lastIframeUpdateTime = 0;
+        this.iframeUpdateInterval = 50; // 每 50ms 更新一次 iframe 位置信息（更频繁，因为 iframe 可能移动）
+        // 性能优化：使用 requestAnimationFrame 节流位置更新
+        this.rafId = null;
+        this.pendingPosition = { x: 0, y: 0, needsUpdate: false };
         // 事件处理器引用（用于清理）
         this.onDragHandler = null;
         this.stopDragHandler = null;
@@ -317,6 +330,14 @@ class IconManager {
             this.dragOffset.x = clientX - iconRect.left;
             this.dragOffset.y = clientY - iconRect.top;
             // 注意：不在这里转换位置，只在真正开始拖动时才转换（在 onDrag 中）
+            // 性能优化：在拖动开始时预加载所有 iframe 位置信息
+            // 这样可以避免在拖动过程中频繁查询 DOM
+            const allIframes = document.querySelectorAll('iframe');
+            this.cachedIframes = Array.from(allIframes).map(iframe => ({
+                element: iframe,
+                rect: iframe.getBoundingClientRect()
+            }));
+            this.lastIframeUpdateTime = Date.now();
             // 添加 document 事件监听器
             if (this.onDragHandler) {
                 document.addEventListener('mousemove', this.onDragHandler);
@@ -359,7 +380,7 @@ class IconManager {
             };
             window.addEventListener('blur', this.blurHandler);
             // 3. 添加超时机制（如果一段时间没有收到 mousemove 事件，自动停止拖动）
-            // 这可以处理鼠标移动到 iframe 上的情况
+            // 优化：缩短超时时间到 100ms，更快检测到事件丢失（特别是嵌套 iframe 场景）
             this.dragTimeoutId = window.setTimeout(() => {
                 if (this.isDragging) {
                     if (this.debug) {
@@ -367,7 +388,7 @@ class IconManager {
                     }
                     this.stopDrag();
                 }
-            }, 500); // 500ms 没有移动事件，自动停止拖动（处理鼠标移动到 iframe 上的情况）
+            }, 100); // 缩短到 100ms，更快检测到事件丢失（特别是嵌套 iframe 场景）
             if (this.debug) {
                 console.log('Drag start');
             }
@@ -385,7 +406,41 @@ class IconManager {
         if (!this.iconElement)
             return;
         e.preventDefault();
+        const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
+        const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
+        // 检测鼠标是否在任何 iframe 上（通过坐标判断）
+        // 如果检测到鼠标在 iframe 区域，立即停止拖动
+        // 重要：需要检测所有 iframe（包括嵌套的），因为任何 iframe 都会导致事件丢失
+        if (this.isDragging) {
+            const now = Date.now();
+            // 性能优化：缓存 iframe 位置信息，避免频繁查询 DOM
+            if (this.cachedIframes.length === 0 ||
+                now - this.lastIframeUpdateTime > this.iframeUpdateInterval) {
+                // 更新 iframe 缓存
+                const allIframes = document.querySelectorAll('iframe');
+                this.cachedIframes = Array.from(allIframes).map(iframe => ({
+                    element: iframe,
+                    rect: iframe.getBoundingClientRect()
+                }));
+                this.lastIframeUpdateTime = now;
+            }
+            // 检查鼠标是否在任何 iframe 上
+            for (const { rect } of this.cachedIframes) {
+                if (clientX >= rect.left &&
+                    clientX <= rect.right &&
+                    clientY >= rect.top &&
+                    clientY <= rect.bottom) {
+                    // 鼠标在 iframe 上，立即停止拖动
+                    if (this.debug) {
+                        console.log('Mouse over iframe, stopping drag immediately');
+                    }
+                    this.stopDrag();
+                    return;
+                }
+            }
+        }
         // 重置超时定时器（每次移动都重置，确保只有真正停止移动时才触发超时）
+        // 优化：缩短超时时间到 100ms，更快检测到事件丢失（特别是嵌套 iframe 场景）
         if (this.dragTimeoutId !== null) {
             window.clearTimeout(this.dragTimeoutId);
             this.dragTimeoutId = window.setTimeout(() => {
@@ -395,10 +450,8 @@ class IconManager {
                     }
                     this.stopDrag();
                 }
-            }, 500); // 500ms 没有移动事件，自动停止拖动
+            }, 100); // 缩短到 100ms，更快检测到事件丢失（特别是嵌套 iframe 场景）
         }
-        const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
-        const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
         // 检查是否有足够的移动距离
         const deltaX = Math.abs(clientX - this.lastTouchPosition.x);
         const deltaY = Math.abs(clientY - this.lastTouchPosition.y);
@@ -442,17 +495,31 @@ class IconManager {
             return;
         }
         try {
+            // 性能优化：缓存容器信息，避免频繁查询 DOM
+            const now = Date.now();
             const container = this.getTargetElement();
             if (!container) {
                 return;
             }
-            const containerRect = container.getBoundingClientRect();
+            // 只在必要时更新容器信息（避免频繁重排）
+            if (!this.cachedContainer ||
+                this.cachedContainer !== container ||
+                now - this.lastContainerUpdateTime > this.containerUpdateInterval) {
+                this.cachedContainer = container;
+                this.cachedContainerRect = container.getBoundingClientRect();
+                this.cachedIconSize = {
+                    width: this.iconElement.offsetWidth,
+                    height: this.iconElement.offsetHeight
+                };
+                this.lastContainerUpdateTime = now;
+            }
+            const containerRect = this.cachedContainerRect;
+            const iconWidth = this.cachedIconSize.width;
+            const iconHeight = this.cachedIconSize.height;
             // 计算新位置
             let newX = clientX - this.dragOffset.x - containerRect.left;
             let newY = clientY - this.dragOffset.y - containerRect.top;
             // 限制在容器内
-            const iconWidth = this.iconElement.offsetWidth;
-            const iconHeight = this.iconElement.offsetHeight;
             if (container === document.body) {
                 // 限制在视口内
                 newX = Math.max(0, Math.min(newX, window.innerWidth - iconWidth));
@@ -465,11 +532,22 @@ class IconManager {
                 newX = Math.max(0, Math.min(newX, containerWidth - iconWidth));
                 newY = Math.max(0, Math.min(newY, containerHeight - iconHeight));
             }
-            // 更新位置
-            this.iconElement.style.left = `${newX}px`;
-            this.iconElement.style.top = `${newY}px`;
-            this.iconElement.style.right = 'auto';
-            this.iconElement.style.bottom = 'auto';
+            // 性能优化：使用 requestAnimationFrame 节流位置更新
+            this.pendingPosition.x = newX;
+            this.pendingPosition.y = newY;
+            this.pendingPosition.needsUpdate = true;
+            if (this.rafId === null) {
+                this.rafId = requestAnimationFrame(() => {
+                    this.rafId = null;
+                    if (this.pendingPosition.needsUpdate && this.iconElement && this.isDragging) {
+                        this.iconElement.style.left = `${this.pendingPosition.x}px`;
+                        this.iconElement.style.top = `${this.pendingPosition.y}px`;
+                        this.iconElement.style.right = 'auto';
+                        this.iconElement.style.bottom = 'auto';
+                        this.pendingPosition.needsUpdate = false;
+                    }
+                });
+            }
             // 更新最后位置
             this.lastTouchPosition.x = clientX;
             this.lastTouchPosition.y = clientY;
@@ -569,6 +647,16 @@ class IconManager {
             window.clearTimeout(this.dragTimeoutId);
             this.dragTimeoutId = null;
         }
+        // 清理 requestAnimationFrame
+        if (this.rafId !== null) {
+            cancelAnimationFrame(this.rafId);
+            this.rafId = null;
+        }
+        // 清理缓存
+        this.cachedContainer = null;
+        this.cachedContainerRect = null;
+        this.cachedIframes = []; // 清理 iframe 缓存
+        this.pendingPosition.needsUpdate = false;
     }
     /**
      * 处理点击事件
@@ -720,6 +808,7 @@ class IframeManager {
         this.isCreated = false;
         this.debug = false; // debug 模式标志
         this.targetElement = null; // 目标元素（用于自适应宽度）
+        this.messageHandler = null; // 消息监听器引用（用于清理）
         this.config = {
             src: '',
             mode: 'auto', // 默认自动检测设备类型
@@ -729,7 +818,8 @@ class IframeManager {
             ...config
         };
         this.debug = config.debug ?? false;
-        this.setupMessageListener();
+        // 不在构造函数中添加消息监听器，延迟到 init() 中添加
+        // 这样可以避免创建多个实例时产生多个监听器
     }
     /**
      * 初始化iframe（隐藏状态）
@@ -737,6 +827,8 @@ class IframeManager {
      */
     async init() {
         try {
+            // 设置消息监听器（在 init() 中而不是构造函数中，避免多次创建实例时产生多个监听器）
+            this.setupMessageListener();
             // 关键修复：在初始化前，先清理页面上所有旧的容器元素
             // 防止切换模式或多次初始化时产生重复的元素
             this.cleanupOrphanedElements();
@@ -751,6 +843,11 @@ class IframeManager {
         catch (error) {
             // 错误始终输出
             console.error('Failed to initialize iframe:', error);
+            // 如果初始化失败，清理消息监听器
+            if (this.messageHandler) {
+                window.removeEventListener('message', this.messageHandler);
+                this.messageHandler = null;
+            }
             throw error;
         }
     }
@@ -838,6 +935,11 @@ class IframeManager {
      */
     destroy() {
         this.hide();
+        // 移除消息监听器（防止内存泄漏）
+        if (this.messageHandler) {
+            window.removeEventListener('message', this.messageHandler);
+            this.messageHandler = null;
+        }
         // 移除容器
         if (this.containerElement) {
             this.containerElement.remove();
@@ -1165,12 +1267,18 @@ class IframeManager {
      * 设置消息监听
      */
     setupMessageListener() {
-        window.addEventListener('message', (event) => {
+        // 如果已存在，先移除旧的监听器（防止重复添加）
+        if (this.messageHandler) {
+            window.removeEventListener('message', this.messageHandler);
+        }
+        // 创建新的消息处理器并保存引用
+        this.messageHandler = (event) => {
             // 验证消息来源（可选的安全检查）
             if (!this.config.src || event.origin === new URL(this.config.src).origin) {
                 this.handleIframeMessage(event.data);
             }
-        }, false);
+        };
+        window.addEventListener('message', this.messageHandler, false);
     }
     /**
      * 处理来自iframe的消息
@@ -20983,26 +21091,49 @@ class CustomerServiceSDK {
         this.screenshotManager = null;
         this.config = null;
         this.isInitialized = false;
+        this.isInitializing = false; // 初始化锁，防止并发初始化
         this.initResult = null; // 保存初始化结果
         this.debug = false; // debug 模式标志
+        this.lastIconConfig = null; // 保存上一次的图标配置
     }
     /**
      * 初始化 SDK
      * @param config SDK配置
      * @param options UI选项（可选）
+     * @param forceReinit 是否强制重新初始化（用于更新token等配置）
      * @returns 返回初始化信息（包含设备ID等）
      */
-    async init(config, options) {
-        if (this.isInitialized) {
+    async init(config, options, forceReinit = false) {
+        // 防止并发初始化
+        if (this.isInitializing) {
+            throw new Error('SDK is already initializing. Please wait for the current initialization to complete.');
+        }
+        // 如果已经初始化且不强制重新初始化，返回之前保存的初始化信息
+        if (this.isInitialized && !forceReinit) {
             if (this.debug) {
-                console.warn('CustomerSDK already initialized');
+                console.warn('CustomerSDK already initialized, returning cached result. Use forceReinit=true to reinitialize.');
             }
-            // 如果已经初始化，返回之前保存的初始化信息
             if (this.initResult) {
                 return this.initResult;
             }
             throw new Error('SDK already initialized but cannot retrieve initialization info');
         }
+        // 设置初始化锁
+        this.isInitializing = true;
+        // 如果需要强制重新初始化，先清理旧资源
+        if (this.isInitialized && forceReinit) {
+            if (this.debug) {
+                console.log('Force reinitializing SDK...');
+            }
+            // 清理旧的 iframe 和截图管理器
+            this.iframeManager?.destroy();
+            this.screenshotManager?.destroy();
+            this.iframeManager = null;
+            this.screenshotManager = null;
+            // 注意：图标管理器暂时保留，稍后检查配置是否变化再决定是否重新创建
+            // 重置初始化标志
+            this.isInitialized = false;
+        }
         this.config = config;
         this.debug = config.debug ?? false;
         try {
@@ -21021,11 +21152,47 @@ class CustomerServiceSDK {
                 agent: config.agent,
                 timestamp: Date.now()
             };
-            // 创建悬浮图标管理器（支持自定义位置和传送目标）
-            const iconPosition = options?.iconPosition || undefined;
-            const iconTarget = options?.target || undefined;
-            this.iconManager = new IconManager(iconPosition, this.debug, iconTarget);
-            await this.iconManager.show();
+            // 处理图标管理器（优化：如果配置没变化，保留图标避免闪烁）
+            // 如果 options 未提供，使用之前保存的配置（避免更新 token 时图标闪烁）
+            const iconPosition = options?.iconPosition !== undefined
+                ? options.iconPosition
+                : (this.lastIconConfig?.position || undefined);
+            const iconTarget = options?.target !== undefined
+                ? options.target
+                : (this.lastIconConfig?.target || undefined);
+            // 检查图标配置是否变化
+            const iconConfigChanged = this.isIconConfigChanged(iconPosition, iconTarget);
+            if (iconConfigChanged) {
+                // 配置变化了，需要重新创建图标管理器
+                if (this.iconManager) {
+                    this.iconManager.hide();
+                    this.iconManager = null; // 先清空引用，避免引用混乱
+                    if (this.debug) {
+                        console.log('Icon config changed, recreating icon manager');
+                    }
+                }
+                this.iconManager = new IconManager(iconPosition, this.debug, iconTarget);
+                await this.iconManager.show();
+                // 保存新的配置
+                this.lastIconConfig = { position: iconPosition, target: iconTarget };
+            }
+            else {
+                // 配置没变化，保留图标管理器（避免闪烁）
+                if (!this.iconManager) {
+                    // 如果不存在，创建新的
+                    this.iconManager = new IconManager(iconPosition, this.debug, iconTarget);
+                    await this.iconManager.show();
+                }
+                else {
+                    // 已存在，确保显示（可能被隐藏了）
+                    await this.iconManager.show();
+                    if (this.debug) {
+                        console.log('Icon config unchanged, keeping existing icon manager');
+                    }
+                }
+                // 更新配置记录
+                this.lastIconConfig = { position: iconPosition, target: iconTarget };
+            }
             // 创建iframe管理器（自动检测设备类型）
             // 如果提供了 target，iframe 会自适应 target 的宽度（PC 和移动端都适用）
             // 如果没有 target，PC 模式使用默认宽度，移动端全屏
@@ -21094,8 +21261,33 @@ class CustomerServiceSDK {
         catch (error) {
             // 错误始终输出
             console.error('Failed to initialize CustomerSDK:', error);
+            // 清理已创建的资源（防止资源泄漏）
+            try {
+                if (this.iconManager) {
+                    this.iconManager.hide();
+                    this.iconManager = null;
+                }
+                if (this.iframeManager) {
+                    this.iframeManager.destroy();
+                    this.iframeManager = null;
+                }
+                if (this.screenshotManager) {
+                    this.screenshotManager.destroy();
+                    this.screenshotManager = null;
+                }
+                this.isInitialized = false;
+                this.initResult = null;
+            }
+            catch (cleanupError) {
+                // 清理过程中的错误不应该影响原始错误的抛出
+                console.error('Error during cleanup after initialization failure:', cleanupError);
+            }
             throw error;
         }
+        finally {
+            // 释放初始化锁
+            this.isInitializing = false;
+        }
     }
     /**
      * 显示/隐藏悬浮图标
@@ -21239,18 +21431,44 @@ class CustomerServiceSDK {
             console.log('📸 截图配置已更新:', options);
         }
     }
+    /**
+     * 更新 token（用于用户登录/退出场景）
+     * 如果已初始化，会重新创建 iframe 并更新 URL
+     * @param token 新的 token（传空字符串或 undefined 表示移除 token）
+     * @param options UI选项（可选，用于重新初始化时的配置）
+     * @returns 返回更新后的初始化信息
+     */
+    async updateToken(token, options) {
+        if (!this.isInitialized) {
+            throw new Error('SDK not initialized. Call init() first.');
+        }
+        if (!this.config) {
+            throw new Error('SDK config not found');
+        }
+        // 更新配置中的 token
+        const updatedConfig = {
+            ...this.config,
+            token: token && token.trim() !== '' ? token : undefined
+        };
+        if (this.debug) {
+            console.log('Updating token:', token ? 'Token provided' : 'Token removed');
+        }
+        // 强制重新初始化以应用新的 token
+        return await this.init(updatedConfig, options, true);
+    }
     /**
      * 销毁 SDK
      */
     destroy() {
         this.iconManager?.hide();
-        this.iframeManager?.close();
+        this.iframeManager?.destroy(); // 使用 destroy 而不是 close，确保完全清理
         this.screenshotManager?.destroy();
         this.iconManager = null;
         this.iframeManager = null;
         this.screenshotManager = null;
         this.config = null;
         this.initResult = null;
+        this.lastIconConfig = null;
         this.isInitialized = false;
         if (this.debug) {
             console.log('CustomerSDK destroyed');
@@ -21295,6 +21513,36 @@ class CustomerServiceSDK {
             return fallbackId;
         }
     }
+    /**
+     * 检查图标配置是否变化
+     */
+    isIconConfigChanged(newPosition, newTarget) {
+        // 如果没有保存的配置，说明是首次初始化，需要创建
+        if (!this.lastIconConfig) {
+            return true;
+        }
+        // 比较位置配置
+        const positionChanged = JSON.stringify(this.lastIconConfig.position) !== JSON.stringify(newPosition);
+        // 比较 target 配置
+        const oldTarget = this.lastIconConfig.target;
+        let targetChanged = false;
+        if (oldTarget !== newTarget) {
+            // 如果引用不同，进一步检查
+            if (typeof oldTarget === 'string' && typeof newTarget === 'string') {
+                // 都是字符串，比较值
+                targetChanged = oldTarget !== newTarget;
+            }
+            else if (oldTarget instanceof HTMLElement && newTarget instanceof HTMLElement) {
+                // 都是 HTMLElement，比较引用（引用不同就是变化了）
+                targetChanged = true;
+            }
+            else {
+                // 类型不同，肯定是变化了
+                targetChanged = true;
+            }
+        }
+        return positionChanged || targetChanged;
+    }
     /**
      * 构建iframe URL（带用户参数和设备ID）
      */
@@ -21322,13 +21570,14 @@ let globalSDKInstance = null;
  * 初始化 Customer SDK
  * @param config SDK配置
  * @param options UI选项（可选）
+ * @param forceReinit 是否强制重新初始化（用于更新token等配置）
  * @returns 返回初始化信息（包含设备ID等）
  */
-const init = async (config, options) => {
+const init = async (config, options, forceReinit = false) => {
     if (!globalSDKInstance) {
         globalSDKInstance = new CustomerServiceSDK();
     }
-    return await globalSDKInstance.init(config, options);
+    return await globalSDKInstance.init(config, options, forceReinit);
 };
 /**
  * 获取全局SDK实例
@@ -21437,6 +21686,16 @@ const updateScreenshotOptions = (options) => {
     const sdk = getInstance();
     sdk.updateScreenshotOptions(options);
 };
+/**
+ * 更新 token（用于用户登录/退出场景）
+ * @param token 新的 token（传空字符串或 undefined 表示移除 token）
+ * @param options UI选项（可选）
+ * @returns 返回更新后的初始化信息
+ */
+const updateToken = async (token, options) => {
+    const sdk = getInstance();
+    return await sdk.updateToken(token, options);
+};
 // 默认导出
 var index = {
     init,
@@ -21459,7 +21718,8 @@ var index = {
     enableScreenshot,
     getScreenshotState,
     updateScreenshotOptions,
+    updateToken,
     destroy
 };
 
-export { CustomerServiceSDK, captureScreenshot, clearNotification, closeChat, index as default, destroy, enableScreenshot, getConnectionStatus, getInitResult, getInstance, getScreenshotState, hideIcon, init, isChatOpen, openChat, sendToIframe, setIconCoordinates, setIconPosition, setIconStyle, setScreenshotTarget, showIcon, showNotification, updateScreenshotOptions };
+export { CustomerServiceSDK, captureScreenshot, clearNotification, closeChat, index as default, destroy, enableScreenshot, getConnectionStatus, getInitResult, getInstance, getScreenshotState, hideIcon, init, isChatOpen, openChat, sendToIframe, setIconCoordinates, setIconPosition, setIconStyle, setScreenshotTarget, showIcon, showNotification, updateScreenshotOptions, updateToken };