`;
};
const initializeChat = (root) => {
// Get the data-bot-src attribute from the script tag
const scriptTag = document.getElementById('chatbot-iframe');
const botSrc = scriptTag.getAttribute('data-bot-src');
// Add chat icon
root.insertAdjacentHTML('beforeend', chatButtonHtml);
// Add chat container with the correct URL
root.insertAdjacentHTML('beforeend', getChatContainerHtml(botSrc));
// 按钮元素
const chat_button = root.querySelector('.aibox-chat-button');
const chat_button_img = root.querySelector('.aibox-chat-button > img');
// 对话框元素
const chat_container = root.querySelector('#aibox-chat-container');
const viewport = root.querySelector('.aibox-openviewport');
const closeviewport = root.querySelector('.aibox-closeviewport');
const close_func = () => {
chat_container.style['display'] = chat_container.style['display'] == 'block' ? 'none' : 'block';
chat_button.style['display'] = chat_container.style['display'] == 'block' ? 'none' : 'block';
};
close_icon = chat_container.querySelector('.aibox-chat-close');
chat_button.onclick = close_func;
close_icon.onclick = close_func;
const viewport_func = () => {
if (chat_container.classList.contains('aibox-enlarge')) {
chat_container.classList.remove('aibox-enlarge');
viewport.classList.remove('aibox-viewportnone');
closeviewport.classList.add('aibox-viewportnone');
} else {
chat_container.classList.add('aibox-enlarge');
viewport.classList.add('aibox-viewportnone');
closeviewport.classList.remove('aibox-viewportnone');
}
};
const drag = (e) => {
if (['touchmove', 'touchstart'].includes(e.type)) {
chat_button.style.top = e.touches[0].clientY - 25 + 'px';
chat_button.style.left = e.touches[0].clientX - 25 + 'px';
} else {
chat_button.style.top = e.y - 25 + 'px';
chat_button.style.left = e.x - 25 + 'px';
}
chat_button.style.width = chat_button_img.naturalWidth + 'px';
chat_button.style.height = chat_button_img.naturalHeight + 'px';
};
if (true) {
console.dir(chat_button_img);
chat_button.addEventListener('drag', drag);
chat_button.addEventListener('dragover', (e) => {
e.preventDefault();
});
chat_button.addEventListener('dragend', drag);
chat_button.addEventListener('touchstart', drag);
chat_button.addEventListener('touchmove', drag);
}
viewport.onclick = viewport_func;
closeviewport.onclick = viewport_func;
};
/**
* 第一次进来的引导提示
*/
function initializeAIBox() {
const aibox = document.createElement('div');
const root = document.createElement('div');
root.id = 'aibox';
initializeAIBoxStyle(aibox);
aibox.appendChild(root);
document.body.appendChild(aibox);
initializeChat(root);
}
// 初始化全局样式
function initializeAIBoxStyle(root) {
style = document.createElement('style');
style.type = 'text/css';
style.innerText = `
/* 放大 */
#aibox .aibox-enlarge {
width: 50%!important;
height: 100%!important;
bottom: 0!important;
right: 0 !important;
}
@media only screen and (max-width: 768px){
#aibox .aibox-enlarge {
width: 100%!important;
height: 100%!important;
right: 0 !important;
bottom: 0!important;
}
}
/* 引导 */
#aibox .aibox-mask {
position: fixed;
z-index: 999;
background-color: transparent;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
#aibox .aibox-mask .aibox-content {
width: 64px;
height: 64px;
box-shadow: 1px 1px 1px 2000px rgba(0,0,0,.6);
position: absolute;
right: 0;
bottom: 30px;
z-index: 1000;
}
#aibox-chat-container {
width: 450px;
height: 600px;
display:none;
}
@media only screen and (max-width: 768px) {
#aibox-chat-container {
width: 100%;
height: 70%;
right: 0 !important;
}
}
#aibox .aibox-chat-button{
position: fixed;
bottom: 4rem;
right: 1rem;
cursor: pointer;
max-height:500px;
max-width:500px;
}
#aibox #aibox-chat-container{
z-index:10000;position: relative;
border-radius: 8px;
border: 1px solid #ffffff;
background: linear-gradient(188deg, rgba(235, 241, 255, 0.20) 39.6%, rgba(231, 249, 255, 0.20) 94.3%), #EFF0F1;
box-shadow: 0px 4px 8px 0px rgba(31, 35, 41, 0.10);
position: fixed;bottom: 16px;right: 16px;overflow: hidden;
}
#aibox #aibox-chat-container .aibox-operate{
top: 18px;
right: 15px;
position: absolute;
display: flex;
align-items: center;
}
#aibox #aibox-chat-container .aibox-operate .aibox-chat-close{
margin-left:5px;
cursor: pointer;
}
#aibox #aibox-chat-container .aibox-operate .aibox-openviewport{
cursor: pointer;
}
#aibox #aibox-chat-container .aibox-operate .aibox-closeviewport{
cursor: pointer;
}
#aibox #aibox-chat-container .aibox-viewportnone{
display:none;
}
#aibox #aibox-chat-container #aibox-chat{
height:100%;
width:100%;
border: none;
}
#aibox #aibox-chat-container {
animation: appear .4s ease-in-out;
}
@keyframes appear {
from {
height: 0;;
}
to {
height: 600px;
}
}`;
root.appendChild(style);
}
function embedAIChatbot() {
initializeAIBox();
}
window.onload = embedAIChatbot;
