`
}
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
