async function embedChatbot() {
const chatBtnId = 'fastgpt-chatbot-button';
const chatWindowId = 'fastgpt-chatbot-window';
const script = document.getElementById('fastgpt-iframe');
const botSrc = script?.getAttribute('data-src');
const primaryColor = script?.getAttribute('data-color') || '#4e83fd';
const defaultOpen = script?.getAttribute('data-default-open') === 'true';
if (!botSrc) {
console.error(`Can't find appid`);
return;
}
if (document.getElementById(chatBtnId)) {
return;
}
const MessageIcon = ``;
const CloseIcon = ``;
const ChatBtn = document.createElement('div');
ChatBtn.id = chatBtnId;
ChatBtn.style.cssText =
'position: fixed; bottom: 1rem; right: 1rem; width: 40px; height: 40px; cursor: pointer; z-index: 2147483647; transition: 0;';
const ChatBtnDiv = document.createElement('div');
ChatBtnDiv.innerHTML = MessageIcon;
const iframe = document.createElement('iframe');
iframe.allow = 'fullscreen;microphone';
iframe.title = 'FastGPT Chat Window';
iframe.id = chatWindowId;
iframe.src = botSrc;
iframe.style.cssText =
'border: none; position: fixed; flex-direction: column; justify-content: space-between; box-shadow: rgba(150, 150, 150, 0.2) 0px 10px 30px 0px, rgba(150, 150, 150, 0.2) 0px 0px 0px 1px; bottom: 4rem; right: 1rem; width: 24rem; height: 40rem; max-width: 90vw; max-height: 85vh; border-radius: 0.75rem; display: flex; z-index: 2147483647; overflow: hidden; left: unset; background-color: #F3F4F6;';
iframe.style.visibility = defaultOpen ? 'unset' : 'hidden';
document.body.appendChild(iframe);
let chatBtnDragged = false;
let chatBtnDown = false;
let chatBtnMouseX;
let chatBtnMouseY;
ChatBtn.addEventListener('click', function () {
if (chatBtnDragged) {
chatBtnDragged = false;
return;
}
const chatWindow = document.getElementById(chatWindowId);
if (!chatWindow) return;
const visibilityVal = chatWindow.style.visibility;
if (visibilityVal === 'hidden') {
chatWindow.style.visibility = 'unset';
ChatBtnDiv.innerHTML = CloseIcon;
} else {
chatWindow.style.visibility = 'hidden';
ChatBtnDiv.innerHTML = MessageIcon;
}
});
ChatBtn.addEventListener('mousedown', (e) => {
if (!chatBtnMouseX && !chatBtnMouseY) {
chatBtnMouseX = e.clientX;
chatBtnMouseY = e.clientY;
}
chatBtnDown = true;
});
ChatBtn.addEventListener('mousemove', (e) => {
if (!chatBtnDown) return;
chatBtnDragged = true;
const transformX = e.clientX - chatBtnMouseX;
const transformY = e.clientY - chatBtnMouseY;
ChatBtn.style.transform = `translate3d(${transformX}px, ${transformY}px, 0)`;
e.stopPropagation();
});
ChatBtn.addEventListener('mouseup', (e) => {
chatBtnDown = false;
});
ChatBtn.addEventListener('mouseleave', (e) => {
chatBtnDown = false;
});
ChatBtn.appendChild(ChatBtnDiv);
document.body.appendChild(ChatBtn);
}
document.body.onload = embedChatbot;