`
}
/**
* 初始化引导
* @param {*} root
*/
const initGuide = (root) => {
root.insertAdjacentHTML('beforeend', guideHtml)
const button = root.querySelector('.sqlbot-assistant-button')
const close_icon = root.querySelector('.sqlbot-assistant-close')
const close_func = () => {
root.removeChild(root.querySelector('.sqlbot-assistant-tips'))
root.removeChild(root.querySelector('.sqlbot-assistant-mask'))
localStorage.setItem('sqlbot_assistant_mask_tip', true)
}
button.onclick = close_func
close_icon.onclick = close_func
}
const initChat = (root, data) => {
// 添加对话icon
root.insertAdjacentHTML('beforeend', chatButtonHtml(data))
// 添加对话框
root.insertAdjacentHTML('beforeend', getChatContainerHtml(data))
// 按钮元素
const chat_button = root.querySelector('.sqlbot-assistant-chat-button')
let chat_button_img = root.querySelector('.sqlbot-assistant-chat-button > svg')
if (data.float_icon) {
chat_button_img = root.querySelector('.sqlbot-assistant-chat-button > img')
}
chat_button_img.style.display = 'block'
// 对话框元素
const chat_container = root.querySelector('#sqlbot-assistant-chat-container')
// 引导层
const mask_content = root.querySelector('.sqlbot-assistant-mask > .sqlbot-assistant-content')
const mask_tips = root.querySelector('.sqlbot-assistant-tips')
chat_button_img.onload = (event) => {
if (mask_content) {
mask_content.style.width = chat_button_img.width + 'px'
mask_content.style.height = chat_button_img.height + 'px'
if (data.x_type == 'left') {
mask_tips.style.marginLeft =
(chat_button_img.naturalWidth > 500 ? 500 : chat_button_img.naturalWidth) - 64 + 'px'
} else {
mask_tips.style.marginRight =
(chat_button_img.naturalWidth > 500 ? 500 : chat_button_img.naturalWidth) - 64 + 'px'
}
}
}
const viewport = root.querySelector('.sqlbot-assistant-openviewport')
const closeviewport = root.querySelector('.sqlbot-assistant-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('.sqlbot-assistant-chat-close')
chat_button.onclick = close_func
close_icon.onclick = close_func
const viewport_func = () => {
if (chat_container.classList.contains('sqlbot-assistant-enlarge')) {
chat_container.classList.remove('sqlbot-assistant-enlarge')
viewport.classList.remove('sqlbot-assistant-viewportnone')
closeviewport.classList.add('sqlbot-assistant-viewportnone')
} else {
chat_container.classList.add('sqlbot-assistant-enlarge')
viewport.classList.add('sqlbot-assistant-viewportnone')
closeviewport.classList.remove('sqlbot-assistant-viewportnone')
}
}
if (data.float_icon_drag) {
chat_button.setAttribute('draggable', 'true')
let startX = 0
let startY = 0
const img = new Image()
img.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs='
chat_button.addEventListener('dragstart', (e) => {
startX = e.clientX - chat_button.offsetLeft
startY = e.clientY - chat_button.offsetTop
e.dataTransfer.setDragImage(img, 0, 0)
})
chat_button.addEventListener('drag', (e) => {
if (e.clientX && e.clientY) {
const left = e.clientX - startX
const top = e.clientY - startY
const maxX = window.innerWidth - chat_button.offsetWidth
const maxY = window.innerHeight - chat_button.offsetHeight
chat_button.style.left = Math.min(Math.max(0, left), maxX) + 'px'
chat_button.style.top = Math.min(Math.max(0, top), maxY) + 'px'
}
})
let touchStartX = 0
let touchStartY = 0
chat_button.addEventListener('touchstart', (e) => {
touchStartX = e.touches[0].clientX - chat_button.offsetLeft
touchStartY = e.touches[0].clientY - chat_button.offsetTop
e.preventDefault()
})
chat_button.addEventListener('touchmove', (e) => {
const left = e.touches[0].clientX - touchStartX
const top = e.touches[0].clientY - touchStartY
const maxX = window.innerWidth - chat_button.offsetWidth
const maxY = window.innerHeight - chat_button.offsetHeight
chat_button.style.left = Math.min(Math.max(0, left), maxX) + 'px'
chat_button.style.top = Math.min(Math.max(0, top), maxY) + 'px'
e.preventDefault()
})
}
/* const drag = (e) => {
if (['touchmove', 'touchstart'].includes(e.type)) {
chat_button.style.top = e.touches[0].clientY - chat_button_img.clientHeight / 2 + 'px'
chat_button.style.left = e.touches[0].clientX - chat_button_img.clientHeight / 2 + 'px'
} else {
chat_button.style.top = e.y - chat_button_img.clientHeight / 2 + 'px'
chat_button.style.left = e.x - chat_button_img.clientHeight / 2 + 'px'
}
chat_button.style.width = chat_button_img.clientHeight + 'px'
chat_button.style.height = chat_button_img.clientHeight + 'px'
}
if (data.float_icon_drag) {
chat_button.setAttribute('draggable', 'true')
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 initsqlbot_assistant(data) {
const sqlbot_div = document.createElement('div')
const root = document.createElement('div')
const sqlbot_root_id = 'sqlbot-assistant-root-' + data.id
root.id = sqlbot_root_id
initsqlbot_assistantStyle(sqlbot_div, sqlbot_root_id, data)
sqlbot_div.appendChild(root)
document.body.appendChild(sqlbot_div)
const sqlbot_assistant_mask_tip = localStorage.getItem('sqlbot_assistant_mask_tip')
if (sqlbot_assistant_mask_tip == null && data.show_guide) {
initGuide(root)
}
initChat(root, data)
}
// 初始化全局样式
function initsqlbot_assistantStyle(root, sqlbot_assistantId, data) {
style = document.createElement('style')
style.type = 'text/css'
style.innerText = `
/* 放大 */
#sqlbot-assistant .sqlbot-assistant-enlarge {
width: 50%!important;
height: 100%!important;
bottom: 0!important;
right: 0 !important;
}
@media only screen and (max-width: 768px){
#sqlbot-assistant .sqlbot-assistant-enlarge {
width: 100%!important;
height: 100%!important;
right: 0 !important;
bottom: 0!important;
}
}
/* 引导 */
#sqlbot-assistant .sqlbot-assistant-mask {
position: fixed;
z-index: 10001;
background-color: transparent;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
#sqlbot-assistant .sqlbot-assistant-mask .sqlbot-assistant-content {
width: 64px;
height: 64px;
box-shadow: 1px 1px 1px 9999px rgba(0,0,0,.6);
position: absolute;
${data.x_type}: ${data.x_val}px;
${data.y_type}: ${data.y_val}px;
z-index: 10001;
}
#sqlbot-assistant .sqlbot-assistant-tips {
position: fixed;
${data.x_type}:calc(${data.x_val}px + 75px);
${data.y_type}: calc(${data.y_val}px + 0px);
padding: 22px 24px 24px;
border-radius: 6px;
color: #ffffff;
font-size: 14px;
background: #3370FF;
z-index: 10001;
}
#sqlbot-assistant .sqlbot-assistant-tips .sqlbot-assistant-arrow {
position: absolute;
background: #3370FF;
width: 10px;
height: 10px;
pointer-events: none;
transform: rotate(45deg);
box-sizing: border-box;
/* left */
${data.x_type}: -5px;
${data.y_type}: 33px;
border-left-color: transparent;
border-bottom-color: transparent
}
#sqlbot-assistant .sqlbot-assistant-tips .sqlbot-assistant-title {
font-size: 20px;
font-weight: 500;
margin-bottom: 8px;
}
#sqlbot-assistant .sqlbot-assistant-tips .sqlbot-assistant-button {
text-align: right;
margin-top: 24px;
}
#sqlbot-assistant .sqlbot-assistant-tips .sqlbot-assistant-button button {
border-radius: 4px;
background: #FFF;
padding: 3px 12px;
color: #3370FF;
cursor: pointer;
outline: none;
border: none;
}
#sqlbot-assistant .sqlbot-assistant-tips .sqlbot-assistant-button button::after{
border: none;
}
#sqlbot-assistant .sqlbot-assistant-tips .sqlbot-assistant-close {
position: absolute;
right: 20px;
top: 20px;
cursor: pointer;
}
#sqlbot-assistant-chat-container {
width: 460px;
height: 640px;
display:none;
}
@media only screen and (max-width: 768px) {
#sqlbot-assistant-chat-container {
width: 100%;
height: 70%;
right: 0 !important;
}
}
#sqlbot-assistant .sqlbot-assistant-chat-button{
position: fixed;
${data.x_type}: ${data.x_val}px;
${data.y_type}: ${data.y_val}px;
cursor: pointer;
z-index:10000;
}
#sqlbot-assistant #sqlbot-assistant-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;
}
.ed-overlay-dialog {
margin-top: 50px;
}
.ed-drawer {
margin-top: 50px;
}
#sqlbot-assistant #sqlbot-assistant-chat-container .sqlbot-assistant-operate{
top: 18px;
right: 15px;
position: absolute;
display: flex;
align-items: center;
line-height: 18px;
}
#sqlbot-assistant #sqlbot-assistant-chat-container .sqlbot-assistant-operate .sqlbot-assistant-chat-close{
margin-left:15px;
cursor: pointer;
}
#sqlbot-assistant #sqlbot-assistant-chat-container .sqlbot-assistant-operate .sqlbot-assistant-openviewport{
cursor: pointer;
}
#sqlbot-assistant #sqlbot-assistant-chat-container .sqlbot-assistant-operate .sqlbot-assistant-closeviewport{
cursor: pointer;
}
#sqlbot-assistant #sqlbot-assistant-chat-container .sqlbot-assistant-viewportnone{
display:none;
}
#sqlbot-assistant #sqlbot-assistant-chat-container #sqlbot-assistant-chat-iframe-${data.id} {
height:100%;
width:100%;
border: none;
}
#sqlbot-assistant #sqlbot-assistant-chat-container {
animation: appear .4s ease-in-out;
}
@keyframes appear {
from {
height: 0;;
}
to {
height: 600px;
}
}`.replaceAll('#sqlbot-assistant ', `#${sqlbot_assistantId} `)
root.appendChild(style)
}
function getParam(src, key) {
const url = new URL(src)
return url.searchParams.get(key)
}
function parsrCertificate(config) {
const certificateList = config.certificate
if (!certificateList?.length) {
return null
}
const list = certificateList.map((item) => formatCertificate(item)).filter((item) => !!item)
return JSON.stringify(list)
}
function isEmpty(obj) {
return obj == null || typeof obj == 'undefined'
}
function formatCertificate(item) {
const { type, source, target, target_key, target_val } = item
let source_val = null
if (type.toLocaleLowerCase() == 'localstorage') {
source_val = localStorage.getItem(source)
}
if (type.toLocaleLowerCase() == 'sessionstorage') {
source_val = sessionStorage.getItem(source)
}
if (type.toLocaleLowerCase() == 'cookie') {
source_val = getCookie(source)
}
if (type.toLocaleLowerCase() == 'custom') {
source_val = source
}
if (isEmpty(source_val)) {
return null
}
return {
target,
key: target_key || source,
value: (target_val && eval(target_val)) || source_val,
}
}
function getCookie(key) {
if (!key || !document.cookie) {
return null
}
const cookies = document.cookie.split(';')
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i].trim()
if (cookie.startsWith(key + '=')) {
return decodeURIComponent(cookie.substring(key.length + 1))
}
}
return null
}
function registerMessageEvent(id, data) {
const iframe = document.getElementById(`sqlbot-assistant-chat-iframe-${id}`)
const url = iframe.src
const eventName = 'sqlbot_assistant_event'
window.addEventListener('message', (event) => {
if (event.data?.eventName === eventName) {
if (event.data?.messageId !== id) {
return
}
if (event.data?.busi == 'ready' && event.data?.ready) {
const certificate = parsrCertificate(data)
params = {
busi: 'certificate',
certificate,
eventName,
messageId: id,
}
const contentWindow = iframe.contentWindow
contentWindow.postMessage(params, url)
}
}
})
}
function loadScript(src, id) {
const domain_url = getDomain(src)
const online = getParam(src, 'online')
let url = `${domain_url}/api/v1/system/assistant/info/${id}`
if (domain_url.includes('5173')) {
url = url.replace('5173', '8000')
}
fetch(url)
.then((response) => response.json())
.then((res) => {
if (!res.data) {
throw new Error(res)
}
const data = res.data
const config_json = data.configuration
let tempData = Object.assign(defaultData, data)
if (tempData.configuration) {
delete tempData.configuration
}
if (config_json) {
const config = JSON.parse(config_json)
if (config) {
delete config.id
tempData = Object.assign(tempData, config)
}
}
tempData['id'] = id
tempData['domain_url'] = domain_url
if (tempData['float_icon'] && !tempData['float_icon'].startsWith('http://')) {
tempData['float_icon'] =
`${domain_url}/api/v1/system/assistant/picture/${tempData['float_icon']}`
if (domain_url.includes('5173')) {
tempData['float_icon'] = tempData['float_icon'].replace('5173', '8000')
}
}
tempData['online'] = online && online.toString().toLowerCase() == 'true'
initsqlbot_assistant(tempData)
if (data.type == 1) {
registerMessageEvent(id, tempData)
// postMessage the certificate to iframe
}
})
.catch((e) => {
showMsg('嵌入失败', e.message)
})
}
function getDomain(src) {
return src.substring(0, src.indexOf('/assistant.js'))
}
function init() {
const sqlbotScripts = document.querySelectorAll(`script[id^="${script_id_prefix}"]`)
const scriptsArray = Array.from(sqlbotScripts)
const src_list = scriptsArray.map((script) => script.src)
src_list.forEach((src) => {
const id = getParam(src, 'id')
window.sqlbot_assistant_handler[id] = window.sqlbot_assistant_handler[id] || {}
window.sqlbot_assistant_handler[id]['id'] = id
const propName = script_id_prefix + id + '-state'
if (window[propName]) {
return true
}
window[propName] = true
loadScript(src, id)
expposeGlobalMethods(id)
})
}
function showMsg(title, content) {
// 检查并创建容器（如果不存在）
let container = document.getElementById('messageContainer')
if (!container) {
container = document.createElement('div')
container.id = 'messageContainer'
container.style.position = 'fixed'
container.style.bottom = '20px'
container.style.right = '20px'
container.style.zIndex = '1000'
document.body.appendChild(container)
} else {
// 如果容器已存在，先移除旧弹窗
const oldMessage = container.querySelector('div')
if (oldMessage) {
oldMessage.style.transform = 'translateX(120%)'
oldMessage.style.opacity = '0'
setTimeout(() => {
container.removeChild(oldMessage)
}, 300)
}
}
// 创建弹窗元素
const messageBox = document.createElement('div')
messageBox.style.width = '240px'
messageBox.style.minHeight = '100px'
messageBox.style.background = 'linear-gradient(135deg, #ff6b6b, #ff8e8e)'
messageBox.style.borderRadius = '8px'
messageBox.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.15)'
messageBox.style.padding = '15px'
messageBox.style.color = 'white'
messageBox.style.fontFamily = 'Arial, sans-serif'
messageBox.style.display = 'flex'
messageBox.style.flexDirection = 'column'
messageBox.style.transform = 'translateX(120%)'
messageBox.style.transition = 'transform 0.3s ease-out'
messageBox.style.opacity = '0'
messageBox.style.transition = 'opacity 0.3s ease, transform 0.3s ease'
messageBox.style.overflow = 'hidden'
// 创建标题元素
const titleElement = document.createElement('div')
titleElement.style.fontSize = '18px'
titleElement.style.fontWeight = 'bold'
titleElement.style.marginBottom = '10px'
titleElement.style.borderBottom = '1px solid rgba(255, 255, 255, 0.3)'
titleElement.style.paddingBottom = '8px'
titleElement.textContent = title
// 创建内容元素
const contentElement = document.createElement('div')
contentElement.style.fontSize = '14px'
contentElement.style.flexGrow = '1'
contentElement.style.overflow = 'auto'
contentElement.textContent = content
// 组装元素
messageBox.appendChild(titleElement)
messageBox.appendChild(contentElement)
// 添加到容器
container.appendChild(messageBox)
// 触发显示动画
setTimeout(() => {
messageBox.style.transform = 'translateX(0)'
messageBox.style.opacity = '1'
}, 10)
// 3秒后自动隐藏
setTimeout(() => {
messageBox.style.transform = 'translateX(120%)'
messageBox.style.opacity = '0'
setTimeout(() => {
container.removeChild(messageBox)
// 如果容器是空的，也移除容器
if (container.children.length === 0) {
document.body.removeChild(container)
}
}, 300)
}, 5000)
}
/* function hideMsg() {
const container = document.getElementById('messageContainer');
if (container) {
const messageBox = container.querySelector('div');
if (messageBox) {
messageBox.style.transform = 'translateX(120%)';
messageBox.style.opacity = '0';
setTimeout(() => {
container.removeChild(messageBox);
// 如果容器是空的，也移除容器
if (container.children.length === 0) {
document.body.removeChild(container);
}
}, 300);
}
}
} */
function updateParam(target_url, key, newValue) {
try {
const url = new URL(target_url)
const [hashPath, hashQuery] = url.hash.split('?')
let searchParams
if (hashQuery) {
searchParams = new URLSearchParams(hashQuery)
} else {
searchParams = url.searchParams
}
searchParams.set(key, newValue)
if (hashQuery) {
url.hash = `${hashPath}?${searchParams.toString()}`
} else {
url.search = searchParams.toString()
}
return url.toString()
} catch (e) {
console.error('Invalid URL:', target_url)
return target_url
}
}
function expposeGlobalMethods(id) {
window.sqlbot_assistant_handler[id]['setOnline'] = (online) => {
if (online != null && typeof online != 'boolean') {
throw new Error('The parameter can only be of type boolean')
}
const iframe = document.getElementById(`sqlbot-assistant-chat-iframe-${id}`)
if (iframe) {
const url = iframe.src
const eventName = 'sqlbot_assistant_event'
const params = {
busi: 'setOnline',
online,
eventName,
messageId: id,
}
const contentWindow = iframe.contentWindow
contentWindow.postMessage(params, url)
}
}
window.sqlbot_assistant_handler[id]['refresh'] = (online) => {
if (online != null && typeof online != 'boolean') {
throw new Error('The parameter can only be of type boolean')
}
const iframe = document.getElementById(`sqlbot-assistant-chat-iframe-${id}`)
if (iframe) {
const url = iframe.src
let new_url = updateParam(url, 't', Date.now())
if (online != null) {
new_url = updateParam(new_url, 'online', online)
}
iframe.src = 'about:blank'
setTimeout(() => {
iframe.src = new_url
}, 500)
}
}
}
// window.addEventListener('load', init)
const executeWhenReady = (fn) => {
if (
document.readyState === 'complete' ||
(document.readyState !== 'loading' && !document.documentElement.doScroll)
) {
setTimeout(fn, 0)
} else {
const onReady = () => {
document.removeEventListener('DOMContentLoaded', onReady)
window.removeEventListener('load', onReady)
fn()
}
document.addEventListener('DOMContentLoaded', onReady)
window.addEventListener('load', onReady)
}
}
executeWhenReady(init)
})()