// iframe-widget.js
(function () {
let widgetInstance = null;
const defaultConfig = {
// 支持'top-left'左上, 'top-right'右上, 'bottom-left'左下, 'bottom-right'右下
iconPosition: 'bottom-right',
//图标的大小
iconSize: '45px',
//图标的颜色
iconColor: '#155eef',
//必填不允许修改
appId: '',
//聊天弹窗的宽度
chatWidth: '800px',
//聊天弹窗的高度
chatHeight: '700px',
};
/**
* 创建ai图标
* @param config
*/
function createAiChat(config) {
// 单例模式，确保只存在一个实例
if (widgetInstance) {
return;
}
// 合并配置
const finalConfig = { ...defaultConfig, ...config };
if (!finalConfig.appId) {
console.error('appId为空！');
return;
}
let body = document.body;
body.style.margin = "0";
// 创建容器
const container = document.createElement('div');
container.style.cssText = `
position: fixed;
z-index: 998;
${getPositionStyles(finalConfig.iconPosition)}
cursor: pointer;
`;
// 创建图标
const icon = document.createElement('div');
icon.style.cssText = `
width: ${finalConfig.iconSize};
height: ${finalConfig.iconSize};
background-color: ${finalConfig.iconColor};
border-radius: 50%;
box-shadow: #cccccc 0 4px 8px 0;
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
color: white;
box-sizing: border-box;
`;
icon.innerHTML =
'';
// 创建iframe容器
const iframeContainer = document.createElement('div');
let right = finalConfig.chatWidth === '100%' ? '0' : '10px';
let bottom = finalConfig.chatHeight === '100%' ? '0' : '10px';
let chatWidth = finalConfig.chatWidth;
let chatHeight = finalConfig.chatHeight;
if(isMobileDevice()){
chatWidth = "100%";
chatHeight = "100%";
right = '0';
bottom = '0';
}
iframeContainer.style.cssText = `
position: fixed;
right: ${right};
bottom: ${bottom};
width: ${chatWidth} !important;
height: ${chatHeight} !important;
background: white;
border-radius: 8px;
box-shadow: 0 0 20px #cccccc;
display: none;
z-index: 10000;
`;
// 创建iframe
const iframe = document.createElement('iframe');
iframe.style.cssText = `
width: 100%;
height: 100%;
border: none;
border-radius: 8px;
`;
iframe.id = 'ai-app-chat-document';
//update-begin---author:wangshuai---date:2025-04-25---for:【QQYUN-12159】【AI 广告位】让需要自建AI知识库的用户知道如何通过敲敲云搭建自己的AI知识库---
iframe.src = getIframeSrc(finalConfig) + '/ai/app/chat/' + finalConfig.appId + "?source=chatJs";
//update-end---author:wangshuai---date:2025-04-25---for:【QQYUN-12159】【AI 广告位】让需要自建AI知识库的用户知道如何通过敲敲云搭建自己的AI知识库---
let iconRight = finalConfig.chatWidth === '100%'?'0':'-6px';
let iconTop = finalConfig.chatWidth === '100%'?'0':'-9px';
if(isMobileDevice()){
iconRight = '2px';
iconTop = '2px';
}
// 创建关闭按钮
const closeBtn = document.createElement('div');
closeBtn.innerHTML =
'';
closeBtn.style.cssText = `
position: absolute;
margin-top: ${iconTop};
right: ${iconRight};
cursor: pointer;
background: white;
width: 25px;
height: 25px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 5px #cccccc;
`;
// 组装元素
iframeContainer.appendChild(closeBtn);
iframeContainer.appendChild(iframe);
document.body.appendChild(iframeContainer);
container.appendChild(icon);
document.body.appendChild(container);
// 事件监听
icon.addEventListener('click', () => {
iframeContainer.style.display = 'block';
});
closeBtn.addEventListener('click', () => {
iframeContainer.style.display = 'none';
});
// 保存实例引用
widgetInstance = {
remove: () => {
container.remove();
iframeContainer.remove();
},
};
}
/**
* 获取位置信息
*
* @param position
* @returns {*|string}
*/
function getPositionStyles(position) {
const positions = {
'top-left': 'top: 20px; left: 20px;',
'top-right': 'top: 20px; right: 20px;',
'bottom-left': 'bottom: 20px; left: 20px;',
'bottom-right': 'bottom: 20px; right: 20px;',
};
return positions[position] || positions['bottom-right'];
}
/**
* 获取src地址
*/
function getIframeSrc(finalConfig) {
const specificScript = document.getElementById("e7e007dd52f67fe36365eff636bbffbd");
if (specificScript) {
return specificScript.src.substring(0, specificScript.src.indexOf('/', specificScript.src.indexOf('://') + 3));
}
}
/**
* 判断是否为手机
* @returns {boolean}
*/
function isMobileDevice() {
return /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}
// 暴露全局方法
window.createAiChat = createAiChat;
})();