customer-chat-sdk 1.3.0 → 1.3.6

package/dist/customer-sdk.cjs.js

@@ -2185,741 +2185,6 @@ class IconManager {
     }
 }
 
-class IframeManager {
-    constructor(config = {}) {
-        this.iframeElement = null;
-        this.containerElement = null; // 包装容器，包含iframe和关闭按钮
-        this.isOpen = false;
-        this.isCreated = false;
-        this.debug = false; // debug 模式标志
-        this.targetElement = null; // 目标元素（用于自适应宽度）
-        this.messageHandler = null; // 消息监听器引用（用于清理）
-        this.config = {
-            src: '',
-            mode: 'auto', // 默认自动检测设备类型
-            width: 450, // PC 模式默认宽度
-            height: 600,
-            allowClose: true,
-            ...config
-        };
-        this.debug = config.debug ?? false;
-        // 不在构造函数中添加消息监听器，延迟到 init() 中添加
-        // 这样可以避免创建多个实例时产生多个监听器
-    }
-    /**
-     * 初始化iframe（隐藏状态）
-     * 预创建iframe并连接到SSE，但不显示
-     */
-    async init() {
-        try {
-            // 设置消息监听器（在 init() 中而不是构造函数中，避免多次创建实例时产生多个监听器）
-            this.setupMessageListener();
-            // 关键修复：在初始化前，先清理页面上所有旧的容器元素
-            // 防止切换模式或多次初始化时产生重复的元素
-            this.cleanupOrphanedElements();
-            // 创建隐藏的iframe（预连接到SSE）
-            // 注意：createIframe 会将容器添加到 body
-            this.createIframe();
-            this.isCreated = true;
-            if (this.debug) {
-                console.log('CustomerSDK iframe initialized (hidden, SSE connected)');
-            }
-        }
-        catch (error) {
-            // 错误始终输出
-            console.error('Failed to initialize iframe:', error);
-            // 如果初始化失败，清理消息监听器
-            if (this.messageHandler) {
-                window.removeEventListener('message', this.messageHandler);
-                this.messageHandler = null;
-            }
-            throw error;
-        }
-    }
-    /**
-     * 显示iframe聊天窗口
-     */
-    show() {
-        if (this.isOpen) {
-            return;
-        }
-        if (!this.isCreated) {
-            throw new Error('Iframe not initialized. Call init() first.');
-        }
-        try {
-            // 显示已创建的容器
-            // 关键优化：容器在 init() 时已经添加到正确位置，这里只改变样式，不移动 DOM
-            // 这样可以避免 iframe 重新加载
-            if (this.containerElement) {
-                // 确保容器在 DOM 中（理论上已经在 init() 时添加，但为了安全）
-                if (!this.containerElement.parentNode) {
-                    // 如果容器不在 DOM 中（异常情况），添加到 target 或 body
-                    if (this.targetElement && this.targetElement !== document.body) {
-                        // 确保 target 是相对定位
-                        const targetStyle = window.getComputedStyle(this.targetElement);
-                        if (targetStyle.position === 'static') {
-                            this.targetElement.style.position = 'relative';
-                        }
-                        this.targetElement.appendChild(this.containerElement);
-                        if (this.debug) {
-                            console.log('Iframe container re-added to target element in show()');
-                        }
-                    }
-                    else {
-                        // 没有 target 或 target 是 body，添加到 body
-                        document.body.appendChild(this.containerElement);
-                        if (this.debug) {
-                            console.log('Iframe container re-added to document.body in show()');
-                        }
-                    }
-                }
-                // 根据是否有 target 设置正确的定位方式
-                const useTargetWidth = !!this.targetElement && this.targetElement !== document.body;
-                const displayStyles = useTargetWidth ? {
-                    // 使用 target 时，保持 absolute 定位（相对于 target）
-                    position: 'absolute',
-                    visibility: 'visible',
-                    opacity: '1',
-                    display: 'block'
-                } : {
-                    // 没有 target 时，使用 fixed 定位（相对于视口）
-                    position: 'fixed',
-                    visibility: 'visible',
-                    opacity: '1',
-                    display: 'block'
-                };
-                Object.assign(this.containerElement.style, displayStyles);
-                // 禁用body滚动，防止出现滚动条
-                this.preventBodyScroll(true);
-            }
-            this.isOpen = true;
-            if (this.debug) {
-                console.log('CustomerSDK iframe shown');
-            }
-        }
-        catch (error) {
-            // 错误始终输出
-            console.error('Failed to show iframe:', error);
-        }
-    }
-    /**
-     * 打开iframe聊天窗口（保持兼容性）
-     */
-    open() {
-        this.show();
-    }
-    /**
-     * 隐藏iframe聊天窗口（类似v-show）
-     */
-    hide() {
-        if (!this.isOpen) {
-            return;
-        }
-        // 隐藏容器但保留DOM元素（不移动容器，避免 iframe 重新加载）
-        if (this.containerElement) {
-            Object.assign(this.containerElement.style, {
-                visibility: 'hidden',
-                opacity: '0',
-                display: 'none'
-            });
-            // 注意：不移动容器，保持容器在当前位置（body），避免 iframe 重新加载
-        }
-        // 恢复body滚动
-        this.preventBodyScroll(false);
-        this.isOpen = false;
-        if (this.debug) {
-            console.log('CustomerSDK iframe hidden (SSE still connected)');
-        }
-        // 触发关闭回调
-        if (this.config.onClose) {
-            this.config.onClose();
-        }
-    }
-    /**
-     * 关闭iframe聊天窗口（完全销毁，保持兼容性）
-     */
-    close() {
-        this.hide(); // 默认只隐藏，不销毁
-    }
-    /**
-     * 完全销毁iframe（需要时才调用）
-     */
-    destroy() {
-        this.hide();
-        // 移除消息监听器（防止内存泄漏）
-        if (this.messageHandler) {
-            window.removeEventListener('message', this.messageHandler);
-            this.messageHandler = null;
-        }
-        // 移除容器
-        if (this.containerElement) {
-            this.containerElement.remove();
-            this.containerElement = null;
-            this.iframeElement = null;
-        }
-        this.isCreated = false;
-        if (this.debug) {
-            console.log('CustomerSDK container destroyed');
-        }
-    }
-    /**
-     * 检查是否已打开
-     */
-    isIframeOpen() {
-        return this.isOpen;
-    }
-    /**
-     * 向iframe发送消息
-     */
-    sendToIframe(data) {
-        if (this.iframeElement && this.iframeElement.contentWindow) {
-            this.iframeElement.contentWindow.postMessage(data, '*');
-        }
-    }
-    /**
-     * 清理页面上孤立的容器元素（防止重复创建）
-     */
-    cleanupOrphanedElements() {
-        // 清理所有旧的容器元素（不属于当前实例的）
-        const existingContainers = document.querySelectorAll('.customer-sdk-container');
-        existingContainers.forEach((container) => {
-            if (container !== this.containerElement) {
-                container.remove();
-                if (this.debug) {
-                    console.log('清理旧的容器元素');
-                }
-            }
-        });
-    }
-    /**
-     * 创建iframe（默认隐藏状态，用于SSE连接）
-     */
-    createIframe() {
-        // 创建包装容器（包含iframe和关闭按钮）
-        this.containerElement = document.createElement('div');
-        this.containerElement.className = 'customer-sdk-container';
-        // 确保容器不可拖动
-        this.containerElement.draggable = false;
-        // 创建iframe元素
-        this.iframeElement = document.createElement('iframe');
-        this.iframeElement.className = 'customer-sdk-iframe';
-        // 设置iframe属性
-        // 注意：URL只在初始化时设置一次，之后不会刷新
-        // 如果需要更新URL参数，需要重新初始化SDK
-        this.iframeElement.src = this.config.src || '';
-        this.iframeElement.frameBorder = '0';
-        // 添加必要权限（只保留常用的）
-        this.iframeElement.setAttribute('allow', [
-            'microphone', // 麦克风权限
-            'camera', // 摄像头权限
-            'geolocation', // 地理位置权限
-            'clipboard-read', // 剪贴板读取权限
-            'clipboard-write', // 剪贴板写入权限
-            'fullscreen', // 全屏权限
-            'autoplay', // 自动播放权限
-            'encrypted-media' // 加密媒体权限
-        ].join('; '));
-        // 设置sandbox属性（允许所有必要功能）
-        this.iframeElement.setAttribute('sandbox', [
-            'allow-same-origin', // 允许同源
-            'allow-scripts', // 允许脚本
-            'allow-forms', // 允许表单
-            'allow-popups', // 允许弹窗
-            'allow-popups-to-escape-sandbox', // 允许弹窗逃逸沙箱
-            'allow-presentation', // 允许演示
-            'allow-top-navigation', // 允许顶级导航
-            'allow-top-navigation-by-user-activation', // 允许用户激活的顶级导航
-            'allow-downloads', // 允许下载
-            'allow-modals', // 允许模态框
-            'allow-orientation-lock', // 允许方向锁定
-            'allow-pointer-lock', // 允许指针锁定
-            'allow-storage-access-by-user-activation' // 允许用户激活的存储访问
-        ].join(' '));
-        // 获取目标元素（如果提供了 target）
-        if (this.config.target) {
-            this.targetElement = this.getTargetElement(this.config.target);
-        }
-        // 根据设备类型设置模式
-        const actualMode = this.getActualMode();
-        const isPC = actualMode === 'popup';
-        this.iframeElement.scrolling = 'auto'; // PC和移动端都显示滚动条
-        // 判断是否使用 target 的自适应宽度
-        const useTargetWidth = !!this.targetElement && this.targetElement !== document.body;
-        // PC模式：如果传了 target，使用 target 的宽度（自适应）；否则使用配置的宽度
-        // 移动端：如果传了 target，使用 target 的宽度（自适应）；否则全屏
-        const containerStyles = useTargetWidth ? {
-            // 使用 target 的宽度（自适应），PC 和移动端都适用
-            // 宽度 100% 自适应 target 的实际宽度（target 本身可能有 max-width 限制）
-            width: '100%',
-            height: '100%',
-            maxWidth: '100%', // 不超过 target 的宽度
-            maxHeight: '100%',
-            backgroundColor: '#ffffff',
-            borderRadius: isPC ? '0' : '0',
-            boxShadow: isPC ? 'none' : '0 -4px 16px rgba(0, 0, 0, 0.25)',
-            border: 'none',
-            position: 'absolute', // 相对于 target 元素定位
-            zIndex: '999999',
-            // 占满 target 元素
-            top: '0',
-            left: '0',
-            bottom: '0',
-            right: '0',
-            transform: 'none',
-            overflow: 'hidden',
-            // 初始隐藏的关键样式
-            visibility: 'hidden',
-            opacity: '0',
-            display: 'none'
-        } : (isPC ? {
-            // PC模式：没有 target，固定在右下角（不可拖动）
-            width: `${this.config.width || 450}px`,
-            height: `${this.config.height || 600}px`,
-            maxWidth: '90vw',
-            maxHeight: '90vh',
-            backgroundColor: '#ffffff',
-            borderRadius: '8px',
-            boxShadow: '0 4px 16px rgba(0, 0, 0, 0.25)',
-            border: 'none',
-            position: 'fixed',
-            zIndex: '999999',
-            // PC模式：固定在右下角
-            top: 'auto',
-            left: 'auto',
-            bottom: '20px',
-            right: '20px',
-            transform: 'none',
-            overflow: 'hidden',
-            // 防止拖动和选择
-            userSelect: 'none',
-            WebkitUserSelect: 'none',
-            MozUserSelect: 'none',
-            msUserSelect: 'none',
-            // 初始隐藏的关键样式
-            visibility: 'hidden',
-            opacity: '0',
-            display: 'none'
-        } : {
-            // 移动端全屏模式（没有 target，强制 100% 宽度和高度）
-            width: '100%',
-            height: '100%',
-            maxWidth: '100%',
-            maxHeight: '100%',
-            backgroundColor: '#ffffff',
-            borderRadius: '0',
-            boxShadow: '0 -4px 16px rgba(0, 0, 0, 0.25)',
-            border: 'none',
-            position: 'fixed',
-            zIndex: '999999',
-            // 全屏模式 - 占满整个屏幕
-            top: '0',
-            left: '0',
-            bottom: '0',
-            right: '0',
-            transform: 'none',
-            overflow: 'hidden',
-            // 初始隐藏的关键样式
-            visibility: 'hidden',
-            opacity: '0',
-            display: 'none'
-        });
-        Object.assign(this.containerElement.style, containerStyles);
-        // iframe填充整个容器
-        const iframeStyles = {
-            width: '100%',
-            height: '100%',
-            border: 'none',
-            borderRadius: 'inherit'
-        };
-        Object.assign(this.iframeElement.style, iframeStyles);
-        // 将iframe放入容器
-        this.containerElement.appendChild(this.iframeElement);
-        // PC模式下：禁止拖动容器
-        if (isPC && !useTargetWidth) {
-            // 阻止拖动事件
-            this.containerElement.addEventListener('dragstart', (e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                return false;
-            }, false);
-            // 阻止鼠标按下事件（防止可能的拖动行为）
-            this.containerElement.addEventListener('mousedown', (e) => {
-                // 只阻止在容器边缘的拖动，允许点击 iframe 内容
-                const rect = this.containerElement.getBoundingClientRect();
-                const isOnEdge = (e.clientX < rect.left + 10 ||
-                    e.clientX > rect.right - 10 ||
-                    e.clientY < rect.top + 10 ||
-                    e.clientY > rect.bottom - 10);
-                if (isOnEdge) {
-                    e.preventDefault();
-                    e.stopPropagation();
-                }
-            }, false);
-        }
-        // 添加iframe加载事件监听（移动端样式优化）
-        this.iframeElement.addEventListener('load', () => {
-            // 移动端注入自定义样式
-            if (!isPC) {
-                this.injectMobileStyles();
-            }
-        });
-        // 添加到目标元素或 body
-        if (this.targetElement && this.targetElement !== document.body) {
-            // 如果提供了 target，添加到 target 元素内
-            // 需要设置 target 为相对定位，以便 iframe 可以相对于它定位
-            const targetStyle = window.getComputedStyle(this.targetElement);
-            if (targetStyle.position === 'static') {
-                // 如果 target 是静态定位，设置为相对定位
-                this.targetElement.style.position = 'relative';
-                if (this.debug) {
-                    console.log('Set target element position to relative for iframe container');
-                }
-            }
-            this.targetElement.appendChild(this.containerElement);
-            if (this.debug) {
-                console.log('Iframe container added to target element');
-            }
-        }
-        else {
-            // 没有 target 或 target 是 body，添加到 body
-            document.body.appendChild(this.containerElement);
-            if (this.debug) {
-                console.log('Iframe container added to document.body');
-            }
-        }
-        if (this.debug) {
-            console.log('CustomerSDK container created (hidden, ready for SSE)');
-        }
-    }
-    /**
-     * 向iframe注入移动端优化样式（隐藏滚动条）
-     */
-    injectMobileStyles() {
-        if (!this.iframeElement)
-            return;
-        try {
-            const iframeDoc = this.iframeElement.contentDocument ||
-                this.iframeElement.contentWindow?.document;
-            if (iframeDoc) {
-                // 创建样式元素
-                const style = iframeDoc.createElement('style');
-                style.textContent = `
-          /* 移动端iframe全屏样式优化 */
-          * {
-            -webkit-overflow-scrolling: touch !important;
-          }
-          
-          body, html, #app, .container {
-            overflow: auto !important;
-            -webkit-overflow-scrolling: touch !important;
-          }
-          
-          /* 隐藏所有滚动条 */
-          ::-webkit-scrollbar {
-            width: 0px !important;
-            height: 0px !important;
-            background: transparent !important;
-          }
-          
-          /* Firefox */
-          html {
-            scrollbar-width: none !important;
-          }
-          
-          /* IE/Edge */
-          body {
-            -ms-overflow-style: none !important;
-          }
-          
-          /* 确保内容可以滚动 */
-          body {
-            overflow: auto !important;
-            height: 100vh !important;
-            margin: 0 !important;
-            padding: 0 !important;
-          }
-        `;
-                // 注入样式
-                iframeDoc.head?.appendChild(style);
-                if (this.debug) {
-                    console.log('CustomerSDK mobile styles injected successfully');
-                }
-            }
-        }
-        catch (error) {
-            // 跨域限制时静默忽略
-            if (this.debug) {
-                console.log('Cannot inject styles due to cross-origin restrictions:', error);
-            }
-        }
-    }
-    /**
-     * 控制页面滚动（移动端全屏模式使用）
-     */
-    preventBodyScroll(prevent) {
-        if (prevent) {
-            // 保存当前滚动位置
-            const scrollY = window.scrollY;
-            // 应用防止滚动的样式
-            Object.assign(document.body.style, {
-                position: 'fixed',
-                top: `-${scrollY}px`,
-                width: '100%',
-                overflow: 'hidden'
-            });
-            // 记录滚动位置以便恢复
-            document.body.setAttribute('data-scroll-position', scrollY.toString());
-        }
-        else {
-            // 获取保存的滚动位置
-            const scrollY = parseInt(document.body.getAttribute('data-scroll-position') || '0');
-            // 移除防止滚动的样式
-            Object.assign(document.body.style, {
-                position: '',
-                top: '',
-                width: '',
-                overflow: ''
-            });
-            // 移除记录的属性
-            document.body.removeAttribute('data-scroll-position');
-            // 恢复正常滚动位置
-            window.scrollTo(0, scrollY);
-        }
-    }
-    /**
-     * 检测设备类型
-     */
-    isMobileDevice() {
-        return window.innerWidth <= 768 ||
-            /Android|iPhone|iPad|iPod|Opera Mini|IEMobile/i.test(navigator.userAgent);
-    }
-    /**
-     * 获取当前显示模式
-     * PC 模式使用弹窗，移动端使用全屏
-     */
-    getActualMode() {
-        if (this.config.mode === 'auto') {
-            return this.isMobileDevice() ? 'fullscreen' : 'popup';
-        }
-        return this.config.mode;
-    }
-    /**
-     * 设置消息监听
-     */
-    setupMessageListener() {
-        // 如果已存在，先移除旧的监听器（防止重复添加）
-        if (this.messageHandler) {
-            window.removeEventListener('message', this.messageHandler);
-        }
-        // 创建新的消息处理器并保存引用
-        this.messageHandler = (event) => {
-            // 关键：过滤掉自己通过 dispatchEvent 发送的消息，避免无限循环
-            // 自己发送的消息 source 是 window，而 iframe 发送的消息 source 是 iframe.contentWindow
-            if (event.source === window) {
-                if (this.debug) {
-                    console.log('[IframeManager] Ignoring self-broadcasted message to prevent infinite loop:', event.data);
-                }
-                return;
-            }
-            // 不验证来源，直接处理所有消息（确保消息能够被接收）
-            if (this.debug) {
-                console.log('[IframeManager] Message received:', {
-                    data: event.data,
-                    origin: event.origin,
-                    source: event.source
-                });
-            }
-            this.handleIframeMessage(event.data);
-        };
-        window.addEventListener('message', this.messageHandler, false);
-    }
-    /**
-     * 处理来自iframe的消息
-     */
-    handleIframeMessage(data) {
-        if (this.debug) {
-            console.log('[IframeManager] Message from iframe received:', data);
-        }
-        // 判断data是字符串还是对象，兼容两种格式
-        let messageType;
-        if (typeof data === 'string') {
-            messageType = data;
-        }
-        else if (data && data.type) {
-            messageType = data.type;
-        }
-        else {
-            if (this.debug) {
-                console.log('[IframeManager] Unknown message format:', data);
-            }
-            return;
-        }
-        if (this.debug) {
-            console.log('[IframeManager] Parsed message type:', messageType);
-        }
-        // 根据消息类型处理不同的操作
-        switch (messageType) {
-            case 'iframe_ready':
-                if (this.debug) {
-                    console.log('Iframe is ready');
-                }
-                break;
-            case 'close_iframe':
-            case 'close':
-                this.close();
-                break;
-            case 'resize_iframe':
-            case 'resize':
-                // PC模式支持 resize，移动端忽略
-                const actualMode = this.getActualMode();
-                if (actualMode === 'popup' && data.width && data.height) {
-                    this.resizeIframe(data.width, data.height);
-                }
-                else if (this.debug) {
-                    console.log('Resize request ignored (fullscreen mode)');
-                }
-                break;
-            case 'new-message':
-                // 新消息通知 - 触发回调让外层处理
-                if (this.debug) {
-                    console.log('Received new message notification');
-                }
-                if (this.config.onMessage) {
-                    this.config.onMessage(messageType, data);
-                }
-                break;
-            case 'goto-login':
-                // 登录跳转消息 - 广播给调用 SDK 的 Vue 页面
-                if (this.debug) {
-                    console.log('Received goto-login message, broadcasting to Vue page');
-                }
-                this.broadcastMessageToPage(data);
-                if (this.config.onMessage) {
-                    this.config.onMessage(messageType, data);
-                }
-                break;
-            case 'DCR_DEPOSIT':
-                // 存款跳转消息 - 广播给调用 SDK 的 Vue 页面
-                // 支持两种存款类型：
-                // 1. 钱包直充：{ type: 'DCR_DEPOSIT', payload: { depositType: 0, walletId: 69382 } }
-                // 2. 线下充值：{ type: 'DCR_DEPOSIT', payload: { depositType: 2, offlineTypeId: 2001, accountId: 35213 } }
-                if (this.debug) {
-                    const depositType = data.payload?.depositType;
-                    const depositTypeText = depositType === 0 ? '钱包直充' : depositType === 2 ? '线下充值' : '未知类型';
-                    console.log(`[IframeManager] Received DCR_DEPOSIT message (${depositTypeText}):`, {
-                        type: data.type,
-                        payload: data.payload,
-                        depositType: depositTypeText
-                    });
-                }
-                this.broadcastMessageToPage(data);
-                if (this.config.onMessage) {
-                    this.config.onMessage(messageType, data);
-                }
-                break;
-            case 'DCR_ACTIVITY':
-                // 跳转到优惠页面 - 广播给调用 SDK 的 Vue 页面
-                // 格式：{ type: 'DCR_ACTIVITY', payload: { activityId: 123 } }
-                if (this.debug) {
-                    console.log('[IframeManager] Received DCR_ACTIVITY message:', {
-                        type: data.type,
-                        payload: data.payload,
-                        activityId: data.payload?.activityId
-                    });
-                }
-                this.broadcastMessageToPage(data);
-                if (this.config.onMessage) {
-                    this.config.onMessage(messageType, data);
-                }
-                break;
-            default:
-                // 其他自定义消息处理
-                if (this.debug) {
-                    console.log('[IframeManager] Custom message:', data);
-                }
-                break;
-        }
-    }
-    /**
-     * 向调用 SDK 的地方（Vue 页面）广播消息
-     * 通过 window.dispatchEvent 触发事件，让 Vue 页面中的 window.addEventListener('message') 可以收到
-     *
-     * 重要说明：
-     * 1. window.dispatchEvent 创建的事件会在同一窗口内触发所有监听器，无论 origin 是什么，Vue 页面都能收到
-     * 2. MessageEvent 的 origin 属性不能是 '*'，必须是有效的 origin 字符串（如 'http://localhost:5173'）
-     * 3. 我们使用 window.location.origin 来标识消息来源（当前页面的 origin）
-     * 4. 如果 Vue 页面需要检查 origin，应该检查 window.location.origin 而不是 '*'
-     */
-    broadcastMessageToPage(data) {
-        try {
-            // 使用 dispatchEvent 创建 MessageEvent，在同一窗口内触发所有监听器
-            // 这样调用 SDK 的 Vue 页面中的 window.addEventListener('message') 也能收到
-            // 注意：MessageEvent 的 origin 属性不能是 '*'，必须是有效的 origin 字符串
-            // 我们使用 window.location.origin 来标识消息来源（当前页面的 origin）
-            // Vue 页面可以收到消息，因为 dispatchEvent 会在同一窗口内触发所有监听器
-            const messageEvent = new MessageEvent('message', {
-                data: data,
-                origin: window.location.origin, // 使用当前页面的 origin，不是 '*'（MessageEvent 不支持 '*'）
-                source: window,
-                bubbles: true,
-                cancelable: true
-            });
-            window.dispatchEvent(messageEvent);
-            if (this.debug) {
-                console.log('[IframeManager] Message broadcasted to Vue page via window.dispatchEvent:', {
-                    data: data,
-                    origin: window.location.origin,
-                    type: 'message',
-                    note: 'origin is window.location.origin, not "*" (MessageEvent does not support "*")'
-                });
-            }
-        }
-        catch (error) {
-            if (this.debug) {
-                console.error('[IframeManager] Failed to broadcast message:', error);
-            }
-        }
-    }
-    /**
-     * 调整iframe大小（PC模式支持）
-     */
-    resizeIframe(width, height) {
-        if (this.containerElement) {
-            this.containerElement.style.width = `${width}px`;
-            this.containerElement.style.height = `${height}px`;
-        }
-    }
-    /**
-     * 获取目标元素（支持字符串选择器或 HTMLElement）
-     */
-    getTargetElement(target) {
-        if (typeof target === 'string') {
-            const element = document.querySelector(target);
-            if (element) {
-                return element;
-            }
-            else {
-                if (this.debug) {
-                    console.warn(`Target element not found: ${target}, falling back to document.body`);
-                }
-                return document.body;
-            }
-        }
-        if (target instanceof HTMLElement) {
-            if (document.body.contains(target)) {
-                return target;
-            }
-            else {
-                if (this.debug) {
-                    console.warn('Target element no longer in DOM, falling back to document.body');
-                }
-                return document.body;
-            }
-        }
-        return document.body;
-    }
-}
-
 function changeJpegDpi(uint8Array, dpi) {
   uint8Array[13] = 1;
   uint8Array[14] = dpi >> 8;
@@ -30068,6 +29333,282 @@ function requireBlowfish () {
 
 var cryptoJsExports = cryptoJs.exports;
 
+class CustomerSDK {
+    constructor() {
+        this.iconManager = null;
+        this.screenshotManager = null;
+        this.debug = false; // debug 模式标志
+        this.deviceId = null; // 设备ID（md5后的）
+        this.initResult = null; // 保存初始化结果
+        this.config = null; // 保存配置，用于更新 token
+        this.screenshotCallback = null; // 保存截图回调
+        this.initCallback = null; // 保存初始化回调
+    }
+    /**
+     * 初始化SDK
+     * @param config SDK配置
+     * @param screenshotCallback 截图消息回调（可选）
+     * @param initCallback 初始化回调（可选，包含图标点击回调等）
+     * @returns 返回初始化信息（包含设备ID等）
+     */
+    async init(config, screenshotCallback, initCallback) {
+        try {
+            this.config = config; // 保存配置，用于后续更新 token
+            this.screenshotCallback = screenshotCallback || null; // 保存截图回调
+            this.initCallback = initCallback || null; // 保存初始化回调
+            this.debug = config.debug ?? false;
+            // 获取设备指纹ID
+            const rawDeviceId = await this.getRawDeviceId();
+            if (this.debug) {
+                console.log('Raw Device ID:', rawDeviceId);
+            }
+            // 计算返回给前端的 deviceId：md5(deviceId + getReferrer())
+            const referrer = config.referrer || document.referrer || document.location.href;
+            this.deviceId = cryptoJsExports.MD5(rawDeviceId + referrer).toString();
+            if (this.debug) {
+                console.log('MD5 Device ID (for frontend):', this.deviceId);
+                console.log('Referrer used:', referrer);
+            }
+            // 准备返回的初始化信息
+            const initResult = {
+                deviceId: this.deviceId,
+                referrer,
+                agent: config.agent,
+                timestamp: Date.now()
+            };
+            // 初始化图标管理器（支持传送目标）
+            const iconTarget = config.target || undefined;
+            const iconPosition = config.iconPosition || undefined;
+            this.iconManager = new IconManager(iconPosition, this.debug, iconTarget, {
+                sideAttach: config.sideAttach,
+                sideHideRatio: config.sideHideRatio,
+                magnetic: config.magnetic,
+                magneticDirection: config.magneticDirection,
+                margin: config.margin,
+                autoAttachDelay: config.autoAttachDelay
+            });
+            await this.iconManager.show();
+            // 设置图标点击回调（如果提供了）
+            if (initCallback?.onIconClick) {
+                this.iconManager.onClick(initCallback.onIconClick);
+            }
+            // 初始化截图管理器（如果配置了截图）
+            if (config.screenshot) {
+                const targetElement = typeof iconTarget === 'string'
+                    ? document.querySelector(iconTarget)
+                    : (iconTarget || document.body);
+                // 创建发送回调函数
+                const sendToExternal = screenshotCallback?.sendData || null;
+                this.screenshotManager = new ScreenshotManager(targetElement, config.screenshot, sendToExternal || undefined);
+                // 如果提供了配置回调，设置消息监听
+                if (screenshotCallback?.onConfig) {
+                    this.setupScreenshotConfigListener(screenshotCallback.onConfig);
+                }
+            }
+            // 保存初始化结果
+            this.initResult = initResult;
+            if (this.debug) {
+                console.log('CustomerSDK initialized successfully (icon + screenshot only)');
+            }
+            // 返回初始化信息
+            return initResult;
+        }
+        catch (error) {
+            console.error('Failed to initialize CustomerSDK:', error);
+            throw error;
+        }
+    }
+    /**
+     * 设置截图配置监听器（可选，用于兼容 postMessage 场景）
+     */
+    setupScreenshotConfigListener(onConfig) {
+        const messageHandler = (event) => {
+            try {
+                // 验证消息类型
+                if (!event.data || event.data.type !== 'checkScreenshot') {
+                    return;
+                }
+                if (this.debug) {
+                    console.log('[CustomerSDK] Received screenshot config message:', event.data);
+                }
+                // 调用外部回调
+                if (event.data.data && typeof event.data.data === 'string') {
+                    onConfig(event.data.data);
+                }
+            }
+            catch (error) {
+                if (this.debug) {
+                    console.error('[CustomerSDK] Error handling screenshot config message:', error);
+                }
+            }
+        };
+        window.addEventListener('message', messageHandler);
+        this._screenshotConfigHandler = messageHandler;
+    }
+    /**
+     * 触发截图配置（用于弹窗组件场景）
+     * @param configJson 截图配置的 JSON 字符串（BinaryConfig 格式）
+     */
+    triggerScreenshotConfig(configJson) {
+        if (!this.screenshotManager) {
+            if (this.debug) {
+                console.warn('[CustomerSDK] ScreenshotManager not initialized');
+            }
+            return;
+        }
+        this.screenshotManager.handleScreenshotConfig(configJson);
+    }
+    /**
+     * 隐藏图标
+     */
+    hideIcon() {
+        this.iconManager?.hide();
+    }
+    /**
+     * 显示图标
+     */
+    showIcon() {
+        this.iconManager?.show();
+    }
+    /**
+     * 设置图标点击回调
+     */
+    onIconClick(callback) {
+        this.iconManager?.onClick(callback);
+    }
+    /**
+     * 获取截图管理器实例（用于高级操作）
+     */
+    getScreenshotManager() {
+        return this.screenshotManager;
+    }
+    /**
+     * 获取图标管理器实例（用于高级操作）
+     */
+    getIconManager() {
+        return this.iconManager;
+    }
+    /**
+     * 获取设备ID（md5后的）
+     */
+    getDeviceId() {
+        return this.deviceId;
+    }
+    /**
+     * 获取初始化信息（设备ID等）
+     */
+    getInitResult() {
+        return this.initResult;
+    }
+    /**
+     * 更新 token（用于用户登录/退出场景）
+     * 如果已初始化，会重新初始化以应用新的 token
+     * @param token 新的 token（传空字符串或 undefined 表示移除 token）
+     * @param screenshotCallback 截图消息回调（可选，如果不传则使用之前的回调）
+     * @param initCallback 初始化回调（可选，如果不传则使用之前的回调）
+     * @returns 返回更新后的初始化信息
+     */
+    async updateToken(token, screenshotCallback, initCallback) {
+        if (!this.config) {
+            throw new Error('SDK not initialized. Call init() first.');
+        }
+        if (this.debug) {
+            console.log('Updating token:', token ? 'Token provided' : 'Token removed');
+        }
+        // 更新配置中的 token
+        const updatedConfig = {
+            ...this.config,
+            token: token && token.trim() !== '' ? token : undefined
+        };
+        // 先销毁旧实例
+        this.destroy();
+        // 重新初始化以应用新的 token
+        // 使用新的回调（如果提供），否则使用之前保存的回调
+        return await this.init(updatedConfig, screenshotCallback || this.screenshotCallback || undefined, initCallback || this.initCallback || undefined);
+    }
+    /**
+     * 获取设备指纹ID（原始）
+     */
+    async getRawDeviceId() {
+        if (this.debug) {
+            console.log('🔍 Starting to get device fingerprint...');
+        }
+        try {
+            if (this.debug) {
+                console.log('📦 Loading FingerprintJS...');
+            }
+            const fp = await index$1.load();
+            if (this.debug) {
+                console.log('🎯 Getting device fingerprint...');
+            }
+            const result = await fp.get();
+            if (this.debug) {
+                console.log('✅ FingerprintJS result:', result);
+                console.log('🆔 Device ID obtained:', result.visitorId);
+            }
+            return result.visitorId;
+        }
+        catch (error) {
+            if (this.debug) {
+                console.warn('❌ Failed to get device fingerprint, using fallback:', error);
+            }
+            const fallbackId = 'device_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
+            if (this.debug) {
+                console.log('🆔 Fallback Device ID:', fallbackId);
+            }
+            return fallbackId;
+        }
+    }
+    /**
+     * 显示消息通知
+     */
+    showNotification(badgeCount = 1, options = {}) {
+        if (!this.iconManager) {
+            if (this.debug) {
+                console.warn('SDK not initialized');
+            }
+            return;
+        }
+        this.iconManager.showNotification({
+            badgeCount: typeof badgeCount === 'string' ? 0 : badgeCount,
+            badgeText: typeof badgeCount === 'string' ? badgeCount : '',
+            pulse: options.pulse || false
+        });
+        // 自动隐藏通知
+        if (options.autoHide && options.autoHide > 0) {
+            setTimeout(() => {
+                this.iconManager?.clearNotification();
+            }, options.autoHide);
+        }
+    }
+    /**
+     * 清除消息通知
+     */
+    clearNotification() {
+        this.iconManager?.clearNotification();
+    }
+    /**
+     * 销毁 SDK
+     */
+    destroy() {
+        this.iconManager?.hide();
+        this.screenshotManager?.destroy();
+        // 清理截图配置监听器
+        if (this._screenshotConfigHandler) {
+            window.removeEventListener('message', this._screenshotConfigHandler);
+            this._screenshotConfigHandler = null;
+        }
+        this.iconManager = null;
+        this.screenshotManager = null;
+        this.initResult = null;
+        this.deviceId = null;
+        // 注意：不清理 config 和回调，以便 updateToken 时使用
+        if (this.debug) {
+            console.log('CustomerSDK destroyed');
+        }
+    }
+}
+
 /**
  * Customer SDK 主类
  * 只负责悬浮图标和iframe管理，不处理WebSocket连接
@@ -30076,7 +29617,6 @@ var cryptoJsExports = cryptoJs.exports;
 class CustomerServiceSDK {
     constructor() {
         this.iconManager = null;
-        this.iframeManager = null;
         this.screenshotManager = null;
         this.config = null;
         this.isInitialized = false;
@@ -30114,10 +29654,8 @@ class CustomerServiceSDK {
             if (this.debug) {
                 console.log('Force reinitializing SDK...');
             }
-            // 清理旧的 iframe 和截图管理器
-            this.iframeManager?.destroy();
+            // 清理旧的截图管理器
             this.screenshotManager?.destroy();
-            this.iframeManager = null;
             this.screenshotManager = null;
             // 注意：图标管理器暂时保留，稍后检查配置是否变化再决定是否重新创建
             // 重置初始化标志
@@ -30139,12 +29677,9 @@ class CustomerServiceSDK {
                 console.log('MD5 Device ID (for frontend):', deviceId);
                 console.log('Referrer used:', referrer);
             }
-            // 构建iframe URL（带参数，使用 md5 后的 deviceId）
-            const iframeUrl = this.buildIframeUrl(config, deviceId);
             // 准备返回的初始化信息（返回给前端的是 md5 后的 deviceId）
             const initResult = {
                 deviceId,
-                iframeUrl,
                 referrer,
                 agent: config.agent,
                 timestamp: Date.now()
@@ -30204,42 +29739,11 @@ class CustomerServiceSDK {
                 // 更新配置记录
                 this.lastIconConfig = { position: iconPosition, target: iconTarget };
             }
-            // 创建iframe管理器（自动检测设备类型）
-            // 如果提供了 target，iframe 会自适应 target 的宽度（PC 和移动端都适用）
-            // 如果没有 target，PC 模式使用默认宽度，移动端全屏
-            console.log('iframeUrl:', iframeUrl);
-            this.iframeManager = new IframeManager({
-                src: iframeUrl,
-                mode: 'auto', // 自动根据设备类型选择模式（PC弹窗，移动端全屏）
-                width: options?.width || 450, // PC模式宽度（像素，默认450px），仅在未提供 target 时使用
-                height: options?.height || 600, // PC模式高度（像素），仅在未提供 target 时使用
-                target: options?.target, // 目标元素（如果提供，iframe 会自适应其宽度）
-                allowClose: true,
-                debug: this.debug, // 传递 debug 标志
-                onMessage: (messageType, _data) => {
-                    // 处理来自iframe的消息
-                    if (messageType === 'new-message') {
-                        // 显示红点通知（只显示红点，不显示数字）
-                        this.showNotification(0, { pulse: true });
-                    }
-                    // checkScreenshot 消息由 ScreenshotManager 处理，不需要在这里处理
-                },
-                onClose: () => {
-                    // iframe关闭时，清理图标拖动事件监听器，并重新显示图标
-                    this.iconManager?.forceCleanupDragEvents();
-                    this.iconManager?.show();
-                },
-                ...options
-            });
-            // 预初始化iframe（隐藏状态，连接SSE）
-            await this.iframeManager.init();
-            // 设置点击事件：图标 → iframe
+            // 设置点击事件：图标点击回调（由外部处理）
             this.iconManager.onClick(() => {
-                // 打开iframe时清除红点通知
+                // 图标点击事件由外部处理（例如打开弹窗）
+                // 这里只清除通知
                 this.clearNotification();
-                // 点击图标后隐藏图标
-                this.iconManager?.hide();
-                this.iframeManager?.show();
             });
             // 初始化截图管理器（如果启用了截图功能）
             if (config.screenshot) {
@@ -30251,10 +29755,8 @@ class CustomerServiceSDK {
                     ...config.screenshot,
                     debug: this.debug // 直接传递 debug 标志
                 };
-                this.screenshotManager = new ScreenshotManager(targetElement, screenshotOptions, (data) => {
-                    // 通过 IframeManager 发送消息到 iframe
-                    this.iframeManager?.sendToIframe(data);
-                });
+                this.screenshotManager = new ScreenshotManager(targetElement, screenshotOptions, undefined // 不再通过 iframe 发送，由外部回调处理
+                );
                 // 自动启用截图功能（用于测试，实际使用时需要通过 iframe 消息启用）
                 this.screenshotManager.enable(true);
                 if (this.debug) {
@@ -30265,7 +29767,7 @@ class CustomerServiceSDK {
             // 保存初始化结果，以便后续获取
             this.initResult = initResult;
             if (this.debug) {
-                console.log('CustomerSDK initialized successfully (iframe pre-connected to SSE)');
+                console.log('CustomerSDK initialized successfully (icon + screenshot only)');
             }
             // 返回初始化信息
             return initResult;
@@ -30279,10 +29781,6 @@ class CustomerServiceSDK {
                     this.iconManager.hide();
                     this.iconManager = null;
                 }
-                if (this.iframeManager) {
-                    this.iframeManager.destroy();
-                    this.iframeManager = null;
-                }
                 if (this.screenshotManager) {
                     this.screenshotManager.destroy();
                     this.screenshotManager = null;
@@ -30329,29 +29827,10 @@ class CustomerServiceSDK {
         this.iconManager?.setStyle(style);
     }
     /**
-     * 打开/关闭聊天窗口
+     * 设置图标点击回调
      */
-    openChat() {
-        // 打开iframe时清除红点通知
-        this.clearNotification();
-        this.iframeManager?.open();
-    }
-    closeChat() {
-        // 关闭iframe时，清理图标拖动事件监听器（防止页面无法操作）
-        this.iconManager?.forceCleanupDragEvents();
-        this.iframeManager?.close();
-    }
-    /**
-     * 检查聊天窗口是否打开
-     */
-    isChatOpen() {
-        return this.iframeManager?.isIframeOpen() || false;
-    }
-    /**
-     * 向iframe发送消息（传递用户数据等）
-     */
-    sendToIframe(data) {
-        this.iframeManager?.sendToIframe(data);
+    onIconClick(callback) {
+        this.iconManager?.onClick(callback);
     }
     /**
      * 获取连接状态
@@ -30443,40 +29922,13 @@ 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?.destroy(); // 使用 destroy 而不是 close，确保完全清理
         this.screenshotManager?.destroy();
         this.iconManager = null;
-        this.iframeManager = null;
         this.screenshotManager = null;
         this.config = null;
         this.initResult = null;
@@ -30561,26 +30013,6 @@ class CustomerServiceSDK {
     getReferrer(config) {
         return config.referrer || document.referrer || document.location.href;
     }
-    /**
-     * 构建iframe URL（带用户参数和设备ID）
-     */
-    buildIframeUrl(config, deviceId) {
-        const baseUrl = config.iframeUrl;
-        if (!baseUrl || baseUrl.trim() === '') {
-            throw new Error('iframeUrl is required but not provided or is empty');
-        }
-        const url = new URL(baseUrl);
-        // 添加用户参数（只在有值时才添加）
-        if (config.agent && config.agent.trim() !== '') {
-            url.searchParams.set('Agent', config.agent);
-        }
-        if (config.token && config.token.trim() !== '') {
-            url.searchParams.set('Authorization', config.token);
-        }
-        url.searchParams.set('DeviceSign', deviceId);
-        url.searchParams.set('Referrer', this.getReferrer(config));
-        return url.toString();
-    }
 }
 // 创建全局实例
 let globalSDKInstance = null;
@@ -30630,26 +30062,11 @@ const setIconStyle = (style) => {
     sdk.setIconStyle(style);
 };
 /**
- * 聊天控制API
+ * 设置图标点击回调
  */
-const openChat = () => {
-    const sdk = getInstance();
-    sdk.openChat();
-};
-const closeChat = () => {
+const onIconClick = (callback) => {
     const sdk = getInstance();
-    sdk.closeChat();
-};
-const isChatOpen = () => {
-    const sdk = getInstance();
-    return sdk.isChatOpen();
-};
-/**
- * iframe通信API
- */
-const sendToIframe = (data) => {
-    const sdk = getInstance();
-    sdk.sendToIframe(data);
+    sdk.onIconClick(callback);
 };
 /**
  * 其他API
@@ -30704,16 +30121,6 @@ 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,
@@ -30724,10 +30131,7 @@ var index = {
     setIconPosition,
     setIconCoordinates,
     setIconStyle,
-    openChat,
-    closeChat,
-    isChatOpen,
-    sendToIframe,
+    onIconClick,
     getConnectionStatus,
     showNotification,
     clearNotification,
@@ -30736,14 +30140,13 @@ var index = {
     enableScreenshot,
     getScreenshotState,
     updateScreenshotOptions,
-    updateToken,
     destroy
 };
 
+exports.CustomerSDK = CustomerSDK;
 exports.CustomerServiceSDK = CustomerServiceSDK;
 exports.captureScreenshot = captureScreenshot;
 exports.clearNotification = clearNotification;
-exports.closeChat = closeChat;
 exports.default = index;
 exports.destroy = destroy;
 exports.enableScreenshot = enableScreenshot;
@@ -30753,9 +30156,7 @@ exports.getInstance = getInstance;
 exports.getScreenshotState = getScreenshotState;
 exports.hideIcon = hideIcon;
 exports.init = init;
-exports.isChatOpen = isChatOpen;
-exports.openChat = openChat;
-exports.sendToIframe = sendToIframe;
+exports.onIconClick = onIconClick;
 exports.setIconCoordinates = setIconCoordinates;
 exports.setIconPosition = setIconPosition;
 exports.setIconStyle = setIconStyle;
@@ -30763,4 +30164,3 @@ exports.setScreenshotTarget = setScreenshotTarget;
 exports.showIcon = showIcon;
 exports.showNotification = showNotification;
 exports.updateScreenshotOptions = updateScreenshotOptions;
-exports.updateToken = updateToken;