在线客服弹窗
# 在线客服弹窗
# 预览效果图
# 配置文件
# 弹窗配置文件代码
chat-config.js
// 在线客服弹窗组件的配置文件
const ChatConfig = {
serviceUrl: "http://192.168.1.119/chat",
icon:{
fullIcon:'data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLW1heGltaXplIj48cGF0aCBkPSJNOCAzSDVhMiAyIDAgMCAwLTIgMnYzbTE4IDBWNWEyIDIgMCAwIDAtMi0yaC0zbTAgMThoM2EyIDIgMCAwIDAgMi0ydi0zTTMgMTZ2M2EyIDIgMCAwIDAgMiAyaDMiLz48L3N2Zz4=',
miniIcon:'data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLW1pbmltaXplIj48cGF0aCBkPSJNOCAzdjNhMiAyIDAgMCAxLTIgMkgzbTE4IDBoLTNhMiAyIDAgMCAxLTItMlYzbTAgMTh2LTNhMiAyIDAgMCAxIDItMmgzTTMgMTZoM2EyIDIgMCAwIDEgMiAydjMiLz48L3N2Zz4=',
chatIcon:'data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLXR3aXRjaCI+PHBhdGggZD0iTTIxIDJIM3YxNmg1djRsNC00aDVsNC00VjJ6bS0xMCA5VjdtNSA0VjciLz48L3N2Zz4=',
closeIcon:'data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLXgtY2lyY2xlIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCIvPjxsaW5lIHgxPSIxNSIgeTE9IjkiIHgyPSI5IiB5Mj0iMTUiLz48bGluZSB4MT0iOSIgeTE9IjkiIHgyPSIxNSIgeTI9IjE1Ii8+PC9zdmc+',
fixedIcon:'data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLWNvbHVtbnMiPjxwYXRoIGQ9Ik0xMiAzaDdhMiAyIDAgMCAxIDIgMnYxNGEyIDIgMCAwIDEtMiAyaC03bTAtMThINWEyIDIgMCAwIDAtMiAydjE0YTIgMiAwIDAgMCAyIDJoN20wLTE4djE4Ii8+PC9zdmc+'
},
chatConfig:{
parentOrigin: window.location.origin, // 当前页面origin
userId: localStorage.getItem('chat-user-id') || new Date().getTime(),
sessionId: localStorage.getItem('chat-user-id') || new Date().getTime(),
avatar:'https://gw.alicdn.com/imgextra/i2/O1CN01fPEB9P1ylYWgaDuVR_!!6000000006619-0-tps-132-132.jpg',
userAvatar: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAOVBMVEUAAABRUVFQUFBRUVFRUVFRUVFQUFBRUVFQUFBQUFBQUFBRUVFRUVFRUVFQUFBRUVFQUFBQUFBRUVFoxAENAAAAEnRSTlMAwBDw0IAgcEBgUOCgsDCQn48lJo3TAAACp0lEQVRYw7VXWZatIAyUeRBw2P9iXwvSQQqH99H5uecqKVKVGMJ0Z9yryOb9x2YWlefTf1na5N6Z3NJXb27mfWiz4V/clWhc2I81cEK9QrjqLpXV9aG2i6wQ7tFds9PbcCR2YjB97+/L9tGOX9tYgvB3/lvZ4UHtVCLcxm/XDG+eNTI5yHX0Kmby+rVEZGZ5s3/4kucwjGEh/1fLCEun/9DfGrWuytghwiUXWqC/3gQVoEYE0T5jh34gd2vuqsOhJGvqNwOCpmSgWhItKD/+GdD0iCooFY/dQDVz7FnrXdV4SL3iok81ClzVklirJoBr/cqOtsvf9pUEhWCgstzeczIoJPtdM0N4EThNDGnWoBKkkJc6wUrTwDOdgjtgIKbOKG8treUEuvYfdYoCtBYIVNafmwyRYa7r1h5Wg6rZLPJaslQKV+93ADsKqzI3jUmYwPBpyp8wg+f2HiDBI3YQnj8DWBBLZpTPABrTNQDgtLQxDbAA8JaF7wDyoZAQQEAhTqEUJ6IuE4goahqhHeiBBB65Miik2qIUlq2YsJBiLWVsqRowwzQqZT9QTMP5GSskfkx6pFjomqLDk486yVx+UIU9EVk8eaiTLGUzpEfMFPVkaGnUVLHuHDEgpbGpYgPijnUHSR4VmePY1msorEnBep7LvhUxm1g1HCxVMVvJlzmsL3x66tseyUkj1k/JkV9YxW5iptZNx7uL5O05jv/tazre6Siau4EGTdMcPtNBRRSLSfc4i0tayVrsCh3s9GI21EA1tICdEv1k/FyMHQvHz4ehWg0/wJV/COBuKA7fhm0tyR8QPo/75I867Mw+pIDtyB+vPGsav04rXHlAoC+XLv7KsWBsXv9u7Te69v3RxRODRSNi75YWCd7LWNqn639gMruy8HD9/wfsyUv+zkirqgAAAABJRU5ErkJggg==',
defaultAgent:'sonaAgent',
agent:{
sonaAgent:{
agentId: 'sonaAgent',
agentName:'诺言',
systemMessage: ['专属智能助理诺言，为您服务！','Hi，我是你的专属智能助理诺言，有问题请随时找我哦~'], // 默认系统对话
apiRunLink: '/chat-api/v1/agents/sonaAgent/runs', // 智能体对话接口
apiClearLink: '/chat-api/v1/agents/sonaAgent/sessions/6', // 清除对话历史接口
}
},
},
// 按钮配置
buttonConfig: {
direction: ['left','bottom'],// 方位
position: ["20px","20px"], // 距离
size: ['50px','50px'], // 按钮大小 (像素)
background: "#2ecc71", // 按钮背景颜色
borderRadius:'50%',
hoverBackground:"#2ecc71",
hoverEffect: true, // 是否启用悬停效果
},
// 窗口配置
windowConfig: {
width: 400, // 窗口宽度 (像素)
height: 650, // 窗口高度 (像素)
title: "智能助理", // 弹窗标题
titleColor: "white", // 标题颜色
titleBackground: "#3498db", // 标题栏背景颜色
},
// 居中弹窗配置
centerPopupConfig: {
width: "40%", // 居中弹窗宽度
height: "50%", // 居中弹窗高度
overlayColor: "rgba(0, 0, 0, 0.5)", // 遮罩层颜色
},
// 其他功能配置
otherConfig: {
autoOpen: false, // 页面加载后自动打开窗口
outsideClickClose: false, // 点击弹窗外区域关闭窗口
}
};
# 弹窗代码
chat-dialog.js
// chat-dialog.js
function initChat(initConfig) {
// 加载配置 - 假设配置对象已存在于全局作用域
const config = initConfig || {
serviceUrl: "/chat",
windowConfig:{},
chatConfig:{},
icon:{}
};
const UserId = localStorage.getItem('chat-user-id') || new Date().getTime()
const chatConfig = {
parentOrigin: window.location.origin, // 当前页面origin
userId: UserId,
sessionId: UserId,
avatar:'https://gw.alicdn.com/imgextra/i2/O1CN01fPEB9P1ylYWgaDuVR_!!6000000006619-0-tps-132-132.jpg',
userAvatar:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAOVBMVEUAAABRUVFQUFBRUVFRUVFRUVFQUFBRUVFQUFBQUFBQUFBRUVFRUVFRUVFQUFBRUVFQUFBQUFBRUVFoxAENAAAAEnRSTlMAwBDw0IAgcEBgUOCgsDCQn48lJo3TAAACp0lEQVRYw7VXWZatIAyUeRBw2P9iXwvSQQqH99H5uecqKVKVGMJ0Z9yryOb9x2YWlefTf1na5N6Z3NJXb27mfWiz4V/clWhc2I81cEK9QrjqLpXV9aG2i6wQ7tFds9PbcCR2YjB97+/L9tGOX9tYgvB3/lvZ4UHtVCLcxm/XDG+eNTI5yHX0Kmby+rVEZGZ5s3/4kucwjGEh/1fLCEun/9DfGrWuytghwiUXWqC/3gQVoEYE0T5jh34gd2vuqsOhJGvqNwOCpmSgWhItKD/+GdD0iCooFY/dQDVz7FnrXdV4SL3iok81ClzVklirJoBr/cqOtsvf9pUEhWCgstzeczIoJPtdM0N4EThNDGnWoBKkkJc6wUrTwDOdgjtgIKbOKG8treUEuvYfdYoCtBYIVNafmwyRYa7r1h5Wg6rZLPJaslQKV+93ADsKqzI3jUmYwPBpyp8wg+f2HiDBI3YQnj8DWBBLZpTPABrTNQDgtLQxDbAA8JaF7wDyoZAQQEAhTqEUJ6IuE4goahqhHeiBBB65Miik2qIUlq2YsJBiLWVsqRowwzQqZT9QTMP5GSskfkx6pFjomqLDk486yVx+UIU9EVk8eaiTLGUzpEfMFPVkaGnUVLHuHDEgpbGpYgPijnUHSR4VmePY1msorEnBep7LvhUxm1g1HCxVMVvJlzmsL3x66tseyUkj1k/JkV9YxW5iptZNx7uL5O05jv/tazre6Siau4EGTdMcPtNBRRSLSfc4i0tayVrsCh3s9GI21EA1tICdEv1k/FyMHQvHz4ehWg0/wJV/COBuKA7fhm0tyR8QPo/75I867Mw+pIDtyB+vPGsav04rXHlAoC+XLv7KsWBsXv9u7Te69v3RxRODRSNi75YWCd7LWNqn639gMruy8HD9/wfsyUv+zkirqgAAAABJRU5ErkJggg==',
defaultAgent:'sonaAgent',
agent:{
sonaAgent:{
agentId: 'sonaAgent',
agentName:'诺言',
systemMessage: ['专属智能助理诺言，为您服务！','Hi，我是你的专属智能助理诺言，有问题请随时找我哦~'],
apiRunLink: 'http://192.168.1.119:86/chat-api/v1/agents/sonaAgent/runs',
apiClearLink: 'http://192.168.1.119:86/chat-api/v1/agents/sonaAgent/sessions/6',
},
},
...config.chatConfig
}
if(window.ChatAgentId){
config.chatConfig.defaultAgent = window.ChatAgentId
chatConfig.defaultAgent = window.ChatAgentId
}
const configIcon = {
fullIcon:'data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLW1heGltaXplIj48cGF0aCBkPSJNOCAzSDVhMiAyIDAgMCAwLTIgMnYzbTE4IDBWNWEyIDIgMCAwIDAtMi0yaC0zbTAgMThoM2EyIDIgMCAwIDAgMi0ydi0zTTMgMTZ2M2EyIDIgMCAwIDAgMiAyaDMiLz48L3N2Zz4=',
miniIcon:'data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLW1pbmltaXplIj48cGF0aCBkPSJNOCAzdjNhMiAyIDAgMCAxLTIgMkgzbTE4IDBoLTNhMiAyIDAgMCAxLTItMlYzbTAgMTh2LTNhMiAyIDAgMCAxIDItMmgzTTMgMTZoM2EyIDIgMCAwIDEgMiAydjMiLz48L3N2Zz4=',
chatIcon:'data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLXR3aXRjaCI+PHBhdGggZD0iTTIxIDJIM3YxNmg1djRsNC00aDVsNC00VjJ6bS0xMCA5VjdtNSA0VjciLz48L3N2Zz4=',
closeIcon:'data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLXgtY2lyY2xlIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCIvPjxsaW5lIHgxPSIxNSIgeTE9IjkiIHgyPSI5IiB5Mj0iMTUiLz48bGluZSB4MT0iOSIgeTE9IjkiIHgyPSIxNSIgeTI9IjE1Ii8+PC9zdmc+',
fixedIcon:'data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLWNvbHVtbnMiPjxwYXRoIGQ9Ik0xMiAzaDdhMiAyIDAgMCAxIDIgMnYxNGEyIDIgMCAwIDEtMiAyaC03bTAtMThINWEyIDIgMCAwIDAtMiAydjE0YTIgMiAwIDAgMCAyIDJoN20wLTE4djE4Ii8+PC9zdmc+',
...config.icon
}
// 合并配置
const centerPopupConfig = {
width:config.centerPopupConfig?.width || "40%", // 居中弹窗宽度
height:config.centerPopupConfig?.height || "50%", // 居中弹窗高度
overlayColor:config.centerPopupConfig?.overlayColor || "rgba(0, 0, 0, 0.5)", // 遮罩层颜色
};
// 合并默认配置和自定义配置（简化版）
const buttonConfig = {
direction: ['right','bottom'],
position: ["20px","20px"], // 底部和右侧距离
size: 50,
background: "#2ecc71",
hoverBackground:"#2ecc71",
iconColor: "white",
iconSize: 30,
borderRadius:'50%',
hoverEffect: true,
shadow: "0 4px 20px rgba(46, 204, 113, 0.4)",
...config.buttonConfig
};
const windowConfig = {
width: config.windowConfig?.width || 400,
height: config.windowConfig?.height || 650,
title: config.windowConfig?.title || "智能助理",
titleColor: config.windowConfig?.titleColor || "white",
titleBackground: config.windowConfig?.titleBackground || "#3498db",
borderRadius:"7px",
shadow: "0 8px 30px rgba(0, 0, 0, 0.2)",
closeButtonColor: "white",
...config.windowConfig
};
const animationConfig = {
duration: config.animationConfig?.duration || 300,
easing: config.animationConfig?.easing || "ease",
buttonTransform: config.animationConfig?.buttonTransform !== false,
};
const otherConfig = {
saveConfig: config.otherConfig?.saveConfig || false,
autoOpen: config.otherConfig?.autoOpen || false,
outsideClickClose: config.otherConfig?.outsideClickClose !== false,
};
// 创建样式元素
const style = document.createElement('style');
style.textContent = `
.chat-dialog-container {
position: fixed;
${buttonConfig.direction[0]}: ${buttonConfig.position[0]};
${buttonConfig.direction[1]}: ${buttonConfig.position[1]};
z-index: 9999;
}
.chat-dialog-container * {
padding:0;
margin:0;
box-sizing: border-box;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.chat-dialog-container.fixed-window {
width: ${windowConfig.width}px;
height: 100% !important;
${buttonConfig.direction[0]}:0;
${buttonConfig.direction[1]}: 0;
}
.chat-dialog-container.fixed-window .chat-dialog-window.active {
height:100% !important;
}
.chat-dialog-container .df {
display: flex;
}
.chat-dialog-container .df-ac {
align: center;
}
.chat-dialog-container .df-jcsb {
justify-content: space-between;
}
.chat-dialog-header-btn {
height:28px;
overflow:hidden;
}
.chat-dialog-container .chat-dialog-btn {
background: none;
border: none;
color: white;
cursor: pointer;
margin-right: 10px;
font-size: 24px;
height:28px;
line-height: 28px;
width: 28px;
padding: 2px;
box-sizing: border-box;
}
.chat-dialog-container .chat-dialog-button {
width: ${buttonConfig.size[0]};
height: ${buttonConfig.size[1]};
border-radius: ${buttonConfig.borderRadius};
background: ${buttonConfig.background};
box-shadow: ${buttonConfig.shadow};
overflow: hidden;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all ${animationConfig.duration}ms ${animationConfig.easing};
position: absolute;
${buttonConfig.direction[0]}: 0;
bottom: 0;
z-index: 10;
}
.chat-dialog-container.fixed-window .chat-dialog-button {
${buttonConfig.direction[0]}: ${buttonConfig.position[0]};
${buttonConfig.direction[1]}: ${buttonConfig.position[1]};
}
.chat-dialog-container .chat-dialog-button:hover {
background: ${buttonConfig.hoverBackground};
transform: ${buttonConfig.hoverEffect ? 'scale(1.05)' : 'none'};
box-shadow: ${buttonConfig.hoverEffect ? buttonConfig.shadow.replace(')', ', 0.5)').replace('rgba', 'rgba').replace('0.4', '0.5') : buttonConfig.shadow};
}
.chat-dialog-container .chat-dialog-button .chat-icon {
font-size: ${buttonConfig.iconSize}px;
color: ${buttonConfig.iconColor};
display: block;
width: 85%;
height: 85%;
}
.chat-dialog-container .chat-dialog-button .close-icon {
display: none;
font-size: ${buttonConfig.iconSize * 0.8}px;
color: ${buttonConfig.iconColor};
font-weight: bold;
}
.chat-dialog-container .chat-dialog-window {
width: 0;
height: 0;
opacity: 0;
overflow: hidden;
border-radius: ${windowConfig.borderRadius};
box-shadow: ${windowConfig.shadow};
position: relative;
// transition: all ${animationConfig.duration}ms ${animationConfig.easing};
transform: translateY(20px) scale(0.9);
background: white;
}
.chat-dialog-container .chat-dialog-window.active {
width: ${windowConfig.width}px;
height: ${windowConfig.height}px;
opacity: 1;
transform: translateY(0) scale(1);
}
.chat-dialog-container .chat-dialog-header {
background: ${windowConfig.titleBackground};
color: ${windowConfig.titleColor};
padding: 10px;
display: flex;
justify-content: space-between;
align-items: center;
border-radius: ${windowConfig.borderRadius} ${windowConfig.borderRadius} 0 0;
}
.chat-dialog-container .chat-dialog-header h3 {
font-weight: 500;
font-size: 1.2rem;
}
.chat-dialog-container .chat-dialog-header .chat-dialog-btn:hover {
background: rgba(255, 255, 255, 0.2);
}
.chat-dialog-container .chat-iframe-container {
width: 100%;
height: calc(100% - 50px);
}
.chat-dialog-container .chat-iframe {
width: 100%;
height: 100%;
border: none;
border-radius: 0 0 ${windowConfig.borderRadius} ${windowConfig.borderRadius};
}
/* 全屏样式 */
.chat-dialog-fullscreen { position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; z-index: 10000 !important; border-radius: 0 !important; }
/* 居中弹窗样式 */
.center-popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: ${centerPopupConfig.overlayColor || 'rgba(0, 0, 0, 0.5)'}; z-index: 10000; display: none; }
.center-popup-container {
position: fixed;
${buttonConfig.direction[1] == 'left' ? 'right' : 'left' }: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: ${centerPopupConfig.width || '80%'};
height: ${centerPopupConfig.height || '80%'};
background: white;
border-radius: 10px;
z-index: 10001;
display: none;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}
.center-popup-container.full-window {
left: ${buttonConfig.direction[0] == 'left' ? windowConfig.width : 0 }px;
top: 0px;
width: calc(100% - ${windowConfig.width}px) !important;
height: 100vh !important;
margin: 0;
transform: translate(0px, 0px);
}
.center-popup-header {
display: flex;
align-items: center;
justify-content: flex-end;
height:35px;
gap:10px;
padding-right:10px;
background-color:${windowConfig.titleBackground};
color:${windowConfig.titleColor};
}
.center-popup-header-full {
font-size: 20px;
border: none;
color: #333;
cursor: pointer;
width: 24px;
height: 24px;
padding: 0px;
background-color:transparent;
}
.center-popup-header-close {
font-size: 20px;
border: none;
color: #333;
cursor: pointer;
width: 24px;
height: 24px;
padding: 0px;
background-color:transparent;
}
.center-popup-iframe { width: 100%; height: calc(100% - 35px); border: none; border-radius: 10px; }
`;
document.head.appendChild(style);
// 创建组件HTML结构
const container = document.createElement('div');
container.className = 'chat-dialog-container';
const button = document.createElement('div');
button.className = 'chat-dialog-button';
button.id = 'chatWidgetButton';
const chatIcon = document.createElement('img');
chatIcon.className = 'chat-icon';
chatIcon.src = configIcon.chatIcon;
button.appendChild(chatIcon);
const windowEl = document.createElement('div');
windowEl.className = 'chat-dialog-window';
windowEl.id = 'chatWidgetWindow';
const header = document.createElement('div');
header.className = 'chat-dialog-header';
const title = document.createElement('h3');
title.textContent = windowConfig.title;
header.appendChild(title);
const controls = document.createElement('div');
controls.className = 'df df-ac df-jcsb chat-dialog-header-btn'
// 添加吸附按钮
const fixedScreenBtn = document.createElement('img');
fixedScreenBtn.className = 'chat-dialog-btn'
fixedScreenBtn.src = configIcon.fixedIcon
controls.appendChild(fixedScreenBtn);
// 添加全屏按钮
const fullscreenBtn = document.createElement('img');
fullscreenBtn.className = 'fullscreen-btn chat-dialog-btn';
fullscreenBtn.src = configIcon.fullIcon;
controls.appendChild(fullscreenBtn);
// 添加关闭聊天框按钮
const closeChatBtn = document.createElement('img');
closeChatBtn.className = 'chat-dialog-btn';
closeChatBtn.src = configIcon.closeIcon;
controls.appendChild(closeChatBtn);
header.appendChild(controls);
// 设置聊天内容区
const iframeContainer = document.createElement('div');
iframeContainer.className = 'chat-iframe-container';
const iframe = document.createElement('iframe');
iframe.className = 'chat-iframe';
iframe.id = 'chatWidgetIframe';
iframe.title = windowConfig.title;
iframeContainer.appendChild(iframe);
windowEl.appendChild(header);
windowEl.appendChild(iframeContainer);
container.appendChild(button);
container.appendChild(windowEl);
document.body.appendChild(container);
// 创建居中弹窗组件
const overlay = document.createElement('div');
overlay.className = 'center-popup-overlay';
const popupContainer = document.createElement('div');
popupContainer.className = 'center-popup-container';
const popupHeader = document.createElement('div')
popupHeader.className = 'center-popup-header'
// 添加吸附按钮
// const popupHeaerFull = document.createElement('img')
// popupHeaerFull.className = 'center-popup-header-full'
// popupHeaerFull.src = configIcon.fullIcon;
// popupHeader.appendChild(popupHeaerFull)
// 添加关闭中间弹窗按钮
const popupCloseBtn = document.createElement('img');
popupCloseBtn.className = 'center-popup-header-close';
popupCloseBtn.src = configIcon.closeIcon;
const popupIframe = document.createElement('iframe');
popupIframe.className = 'center-popup-iframe';
popupHeader.appendChild(popupCloseBtn)
popupContainer.appendChild(popupHeader);
popupContainer.appendChild(popupIframe);
document.body.appendChild(overlay);
document.body.appendChild(popupContainer);
// 组件状态
let isOpen = false;
let isFullscreen = false;
let dialogFlag = false
let popupFixed = false
// 显示居中弹窗
function openDialog(url) {
popupIframe.src = url;
if(dialogFlag){
popupIframe.reload(true)
}
// overlay.style.display = 'block';
popupContainer.style.display = 'block';
dialogFlag = true
};
// 关闭居中弹窗
function closeDialog() {
dialogFlag = false
overlay.style.display = 'none';
popupContainer.style.display = 'none';
popupFull = false
popupIframe.src = '';
}
overlay.addEventListener('click', closeDialog);
popupCloseBtn.addEventListener('click', closeDialog);
function fixedScreenFn(opt={}){
const {beforeFixed} = opt
let currentFixed = popupFixed
if(beforeFixed){
currentFixed = !beforeFixed
}
if (!currentFixed) {
// 进入
popupContainer.classList.add('full-window');
container.classList.add('fixed-window');
// popupIframe.reload(true)
popupFixed = true;
} else {
// 退出
popupContainer.classList.remove('full-window');
container.classList.remove('fixed-window');
popupFixed = false;
}
}
// 吸附模式
fixedScreenBtn.addEventListener('click',()=> fixedScreenFn());
// 全屏功能
controls.querySelector('.fullscreen-btn').addEventListener('click', function() {
if (!isFullscreen) {
// 进入全屏
windowEl.classList.add('chat-dialog-fullscreen');
fullscreenBtn.src = configIcon.miniIcon;
isFullscreen = true;
} else {
// 退出全屏
windowEl.classList.remove('chat-dialog-fullscreen');
fullscreenBtn.src = configIcon.fullIcon;
isFullscreen = false;
}
});
let userId = localStorage.getItem('chat-user-id') || new Date().getTime()
// 传递配置参数
function getUserSessionInfo(data = {}){
const parentOrigin = window.location.origin
const defaultConfig = {
parentOrigin:data.parentOrigin || parentOrigin,
userId:data.userId || userId,
sessionId:data.userId || userId,
...data
}
return defaultConfig
}
// 打开聊天窗口
function openChatWindow() {
console.log('config.serviceUrl',config.serviceUrl);
// 第一次打开时加载iframe
// if (!iframe.src) {
iframe.src = config.serviceUrl;
// }
iframe.onload = () => {
// 向 iframe 发送消息
const data = getUserSessionInfo(chatConfig)
localStorage.setItem('chat-user-id',data.userId)
const url = config.serviceUrl.indexOf('http') == 0 ?config.serviceUrl : window.location.origin+config.serviceUrl
iframe.contentWindow.postMessage(
{
type: "INIT_CONFIG", // 消息类型（自定义）
data, // 传递的数据
},
url // 目标 iframe 的 origin（必须匹配！）
);
};
if(popupFixed){
fixedScreenFn({beforeFixed:popupFixed})
}
windowEl.classList.add('active');
isOpen = true;
if (animationConfig.buttonTransform) {
button.style.transform = 'scale(0)';
setTimeout(() => {
chatIcon.style.display = 'none';
// container.style.display = 'none';
button.style.display = 'none'
button.style.transform = 'scale(1)';
button.style.background = '#e74c3c';
}, animationConfig.duration / 2);
} else {
chatIcon.style.display = 'none';
button.style.background = '#e74c3c';
button.style.display = 'none'
// container.style.display = 'block';
}
}
// 关闭聊天窗口
function closeChatWindow() {
windowEl.classList.remove('active');
isOpen = false;
container.classList.remove('fixed-window');
if (animationConfig.buttonTransform) {
button.style.transform = 'scale(0)';
setTimeout(() => {
chatIcon.style.display = 'block';
button.style.transform = 'scale(1)';
button.style.display = 'flex'
button.style.background = buttonConfig.background;
}, animationConfig.duration / 2);
} else {
chatIcon.style.display = 'block';
button.style.display = 'flex'
button.style.background = buttonConfig.background;
}
}
// 切换聊天窗口状态
function toggleChatWindow() {
if (isOpen) {
closeChatWindow();
} else {
openChatWindow();
}
}
// 绑定事件
button.addEventListener('click', toggleChatWindow);
closeChatBtn.addEventListener('click', toggleChatWindow);
// 外部点击关闭
if (otherConfig.outsideClickClose) {
document.addEventListener('click', (e) => {
const isInside = container.contains(e.target);
if (!isInside && isOpen) {
closeChatWindow();
}
});
}
// 自动打开窗口
if (otherConfig.autoOpen) {
setTimeout(openChatWindow, 1000);
}
const handleMessage = (event) => {
// 根据消息类型执行不同操作
switch (event.data.type) {
case 'openDialog':
openDialog(event.data.data);
break;
case 'changeAgent':
chatConfig.defaultAgent = event.data.data
window.ChatAgentId = event.data.data
break;
}
};
window.addEventListener('message', handleMessage);
// 使组件功能可以外部调用（可选）
window.Chat = {
open: openChatWindow,
close: closeChatWindow,
toggle: toggleChatWindow,
openDialog,
closeDialog,
initUserSessionInfo:getUserSessionInfo
};
};
# 预览
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>在线客服组件演示</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #333;
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 1600px;
margin: 40px auto;
padding: 30px;
background: rgba(255, 255, 255, 0.9);
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
h1 {
text-align: center;
margin-bottom: 20px;
color: #2c3e50;
font-size: 2.5rem;
}
.content {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 30px;
width: 100%;
}
.config-area,
.info-area {
padding: 25px;
background: white;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.config-area h2,
.info-area h2 {
color: #3498db;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 2px solid #ecf0f1;
}
.feature-list {
margin-left: 20px;
}
.feature-list li {
margin-bottom: 10px;
line-height: 1.6;
}
.feature-list li:before {
content: "✓";
color: #2ecc71;
font-weight: bold;
margin-right: 8px;
}
.code-block {
background: #2c3e50;
color: #ecf0f1;
padding: 20px;
border-radius: 8px;
font-family: monospace;
overflow-x: auto;
margin: 20px 0;
line-height: 1.5;
font-size: 15px;
width: 100%;
}
.code-block .comment {
color: #7f8c8d;
}
.code-block .keyword {
color: #3498db;
}
.code-block .string {
color: #2ecc71;
}
.code-block .number {
color: #f1c40f;
}
pre {
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<h1>在线客服弹窗组件演示</h1>
<div class="content">
<div class="config-area" style="width: calc(100% - 400px);">
<h2>配置说明</h2>
<p>创建配置文件 <code>chatConfig.js</code>：</p>
<div class="code-block">
<pre>
{
// 在线客服链接
serviceUrl: "/chat",
icon:{
fullIcon:'全屏显示图标',
miniIcon:'取消全屏显示图标',
chatIcon:'聊天图标',
closeIcon:'关闭图标',
fixedIcon:'吸顶图标'
},
chatConfig:{
parentOrigin: window.location.origin, // 当前页面origin
userId: localStorage.getItem('chat-user-id') || new Date().getTime(),
sessionId: localStorage.getItem('chat-user-id') || new Date().getTime(),
avatar:'系统图标',
userAvatar: '用户头像图标',
defaultAgent:'sonaAgent', // 默认对话智能体
agent:{
sonaAgent:{
agentId: 'sonaAgent',
agentName:'诺言',
systemMessage: ['专属智能助理诺言，为您服务！','Hi，我是你的专属智能助理诺言，有问题请随时找我哦~'], // 默认系统对话
apiRunLink: '/chat-api/v1/agents/sonaAgent/runs', // 智能体对话接口
apiClearLink: '/chat-api/v1/agents/sonaAgent/sessions/6', // 清除对话历史接口
}
}
},
// 按钮配置
buttonConfig: {
direction: ['left','bottom'],// 方位
position: ["20px","20px"], // 距离
size: 50, // 按钮大小 (像素)
borderRadius:'50%',
hoverEffect: true, // 是否启用悬停效果
background:'#2ecc71', // 聊天按钮背景颜色
shadow:'0 4px 20px rgba(46, 204, 113, 0.4)', // 聊天背景阴影
},
// 窗口配置
windowConfig: {
width: 400, // 窗口宽度 (像素)
height: 650, // 窗口高度 (像素)
title: "智能助理", // 弹窗标题
titleColor: "white", // 标题颜色
titleBackground: "#3498db", // 标题栏背景颜色
},
// 居中弹窗配置
centerPopupConfig: {
width: "40%", // 居中弹窗宽度
height: "50%", // 居中弹窗高度
overlayColor: "rgba(0, 0, 0, 0.5)", // 遮罩层颜色
},
// 其他功能配置
otherConfig: {
autoOpen: false, // 页面加载后自动打开窗口
outsideClickClose: false, // 点击弹窗外区域关闭窗口
}
}
</pre>
</div>
<p>在HTML中引入：</p>
<div class="code-block">
<script src=<span class="string">"chatConfig.js"</span
>></script><br />
<script src=<span class="string">"chat.js"</span
>></script><br />
</div>
</div>
<div class="info-area" style="width:400px">
<h2>功能特点</h2>
<ul class="feature-list">
<li>高度可配置：按钮位置、颜色、大小、图标等</li>
<li>弹窗大小和外观可完全自定义</li>
<li>平滑的打开/关闭动画效果</li>
<li>响应式设计，适配移动设备</li>
<li>点击窗口外区域自动关闭</li>
<li>无依赖、轻量级的原生JavaScript实现</li>
<li>支持自动打开功能</li>
</ul>
<h2>API方法</h2>
<ul class="feature-list">
<li><code>Chat.open()</code> - 打开客服窗口</li>
<li><code>Chat.close()</code> - 关闭客服窗口</li>
<li><code>Chat.toggle()</code> - 切换客服窗口状态</li>
<li><code>Chat.openDialog(url)</code> - 打开居中弹窗</li>
<li><code>Chat.closeDialog()</code> - 关闭居中弹窗</li>
<li><code>Chat.initUserSessionInfo(config)</code> - 设置聊天初始化配置</li>
</ul>
<div class="code-block">
<span class="comment">// 在配置文件中设置自动打开</span><br />
otherConfig: {<br />
autoOpen: <span class="keyword">true</span><br />
}<br /><br />
<span class="comment">// 或者在需要时手动打开</span><br />
<button onclick=<span class="string">"Chat.open()"</span
>>打开客服</button>
</div>
</div>
</div>
</div>
<!-- 引入配置文件 -->
<script src="./js/chatConfig.js"></script>
<!-- <script src="./js/chat.min.js"></script> -->
<script src="./js/chat.js"></script>
<script>
window.onload = function() {
// initChat(chatConfig);
initChat({
// 在线客服链接
serviceUrl: "/chat",
icon: {
fullIcon: 'data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLW1heGltaXplIj48cGF0aCBkPSJNOCAzSDVhMiAyIDAgMCAwLTIgMnYzbTE4IDBWNWEyIDIgMCAwIDAtMi0yaC0zbTAgMThoM2EyIDIgMCAwIDAgMi0ydi0zTTMgMTZ2M2EyIDIgMCAwIDAgMiAyaDMiLz48L3N2Zz4=',
miniIcon: 'data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLW1pbmltaXplIj48cGF0aCBkPSJNOCAzdjNhMiAyIDAgMCAxLTIgMkgzbTE4IDBoLTNhMiAyIDAgMCAxLTItMlYzbTAgMTh2LTNhMiAyIDAgMCAxIDItMmgzTTMgMTZoM2EyIDIgMCAwIDEgMiAydjMiLz48L3N2Zz4=',
chatIcon: 'data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLXR3aXRjaCI+PHBhdGggZD0iTTIxIDJIM3YxNmg1djRsNC00aDVsNC00VjJ6bS0xMCA5VjdtNSA0VjciLz48L3N2Zz4=',
// chatIcon: 'https://wimg.588ku.com/gif320/25/05/08/c12c6d3a092505c70a0c564a6f5c3315.gif',
closeIcon: 'data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLXgtY2lyY2xlIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCIvPjxsaW5lIHgxPSIxNSIgeTE9IjkiIHgyPSI5IiB5Mj0iMTUiLz48bGluZSB4MT0iOSIgeTE9IjkiIHgyPSIxNSIgeTI9IjE1Ii8+PC9zdmc+',
fixedIcon: 'data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLWNvbHVtbnMiPjxwYXRoIGQ9Ik0xMiAzaDdhMiAyIDAgMCAxIDIgMnYxNGEyIDIgMCAwIDEtMiAyaC03bTAtMThINWEyIDIgMCAwIDAtMiAydjE0YTIgMiAwIDAgMCAyIDJoN20wLTE4djE4Ii8+PC9zdmc+'
},
chatConfig: {
parentOrigin: window.location.origin, // 当前页面origin
userId: localStorage.getItem('chat-user-id') || new Date().getTime(),
sessionId: localStorage.getItem('chat-user-id') || new Date().getTime(),
avatar: 'https://gw.alicdn.com/imgextra/i2/O1CN01fPEB9P1ylYWgaDuVR_!!6000000006619-0-tps-132-132.jpg',
userAvatar: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAOVBMVEUAAABRUVFQUFBRUVFRUVFRUVFQUFBRUVFQUFBQUFBQUFBRUVFRUVFRUVFQUFBRUVFQUFBQUFBRUVFoxAENAAAAEnRSTlMAwBDw0IAgcEBgUOCgsDCQn48lJo3TAAACp0lEQVRYw7VXWZatIAyUeRBw2P9iXwvSQQqH99H5uecqKVKVGMJ0Z9yryOb9x2YWlefTf1na5N6Z3NJXb27mfWiz4V/clWhc2I81cEK9QrjqLpXV9aG2i6wQ7tFds9PbcCR2YjB97+/L9tGOX9tYgvB3/lvZ4UHtVCLcxm/XDG+eNTI5yHX0Kmby+rVEZGZ5s3/4kucwjGEh/1fLCEun/9DfGrWuytghwiUXWqC/3gQVoEYE0T5jh34gd2vuqsOhJGvqNwOCpmSgWhItKD/+GdD0iCooFY/dQDVz7FnrXdV4SL3iok81ClzVklirJoBr/cqOtsvf9pUEhWCgstzeczIoJPtdM0N4EThNDGnWoBKkkJc6wUrTwDOdgjtgIKbOKG8treUEuvYfdYoCtBYIVNafmwyRYa7r1h5Wg6rZLPJaslQKV+93ADsKqzI3jUmYwPBpyp8wg+f2HiDBI3YQnj8DWBBLZpTPABrTNQDgtLQxDbAA8JaF7wDyoZAQQEAhTqEUJ6IuE4goahqhHeiBBB65Miik2qIUlq2YsJBiLWVsqRowwzQqZT9QTMP5GSskfkx6pFjomqLDk486yVx+UIU9EVk8eaiTLGUzpEfMFPVkaGnUVLHuHDEgpbGpYgPijnUHSR4VmePY1msorEnBep7LvhUxm1g1HCxVMVvJlzmsL3x66tseyUkj1k/JkV9YxW5iptZNx7uL5O05jv/tazre6Siau4EGTdMcPtNBRRSLSfc4i0tayVrsCh3s9GI21EA1tICdEv1k/FyMHQvHz4ehWg0/wJV/COBuKA7fhm0tyR8QPo/75I867Mw+pIDtyB+vPGsav04rXHlAoC+XLv7KsWBsXv9u7Te69v3RxRODRSNi75YWCd7LWNqn639gMruy8HD9/wfsyUv+zkirqgAAAABJRU5ErkJggg==',
defaultAgent: 'sonaAgent',
agent: {
sonaAgent: {
agentId: 'sonaAgent',
agentName: '诺言智能体',
systemMessage: ['专属智能助理诺言，为您服务！', 'Hi，我是你的专属智能助理诺言，有问题请随时找我哦~'], // 默认系统对话
apiRunLink: '/chat-api/v1/agents/sonaAgent/runs', // 智能体对话接口
apiClearLink: '/chat-api/v1/agents/sonaAgent/sessions/'+localStorage.getItem('chat-user-id') || new Date().getTime(), // 清除对话历史接口
},
commAgent: {
agentId: 'commAgent',
agentName: '通用智能体',
systemMessage: ['通用智能体，为您服务！', 'Hi，我是通用智能体，有问题请随时找我哦~'],
apiRunLink: '/chat-api/v1/agents/commAgent/runs',
apiClearLink: '/chat-api/v1/agents/commAgent/sessions/'+localStorage.getItem('chat-user-id') || new Date().getTime(),
},
},
},
// 按钮配置
buttonConfig: {
direction: ['right', 'bottom'],// 方位
position: ["49%", "20px"], // 距离
size: ['500px','500px'], // 按钮大小 (像素)
background: "transparent", // 按钮背景颜色
hoverBackground:"transparent", // 按钮滑动背景颜色
shadow:'none',
borderRadius: '50%',
hoverEffect: true, // 是否启用悬停效果
},
// 窗口配置
windowConfig: {
width: 400, // 窗口宽度 (像素)
height: 650, // 窗口高度 (像素)
title: "智能助理", // 弹窗标题
titleColor: "white", // 标题颜色
titleBackground: "#3498db", // 标题栏背景颜色
},
// 居中弹窗配置
centerPopupConfig: {
width: "40%", // 居中弹窗宽度
height: "50%", // 居中弹窗高度
overlayColor: "rgba(0, 0, 0, 0.5)", // 遮罩层颜色
},
// 其他功能配置
otherConfig: {
autoOpen: false, // 页面加载后自动打开窗口
outsideClickClose: false, // 点击弹窗外区域关闭窗口
}
});
};
</script>
</body>
</html>