请将以下代码复制到自己的网站中即可实现
<!-- SongAI 智能聊天助手嵌入代码 -->
<div id="songai-chat-widget" style="position: fixed; bottom: 20px; right: 20px; width: 350px; height: 500px; border-radius: 12px; box-shadow: 0 5px 25px rgba(0,0,0,0.2); overflow: hidden; z-index: 9999; background: white; display: flex; flex-direction: column;">
<div style="background: linear-gradient(to right, #4361ee, #3f37c9); color: white; padding: 12px 15px; font-weight: 500; display: flex; justify-content: space-between; align-items: center;">
<span>SongAI 助手</span>
<button id="songai-close" style="background: none; border: none; color: white; cursor: pointer;">×</button>
</div>
<div id="songai-messages" style="flex: 1; padding: 15px; overflow-y: auto; background: #f5f7fb;"></div>
<div style="padding: 10px; border-top: 1px solid #e9ecef; background: white;">
<textarea id="songai-input" placeholder="输入您的问题..." style="width: 100%; border: 1px solid #e9ecef; border-radius: 8px; padding: 10px; resize: none; min-height: 50px; margin-bottom: 8px;"></textarea>
<button id="songai-send" style="background: #4361ee; color: white; border: none; border-radius: 8px; padding: 8px 15px; cursor: pointer; width: 100%;">发送</button>
</div>
</div>
<script>
(function() {
const widget = document.getElementById('songai-chat-widget');
const closeBtn = document.getElementById('songai-close');
const messagesDiv = document.getElementById('songai-messages');
const input = document.getElementById('songai-input');
const sendBtn = document.getElementById('songai-send');
// 初始欢迎消息
addMessage('ai', '您好！我是SongAI智能助手，有什么可以帮您的吗？');
// 关闭按钮
closeBtn.addEventListener('click', () => {
widget.style.display = 'none';
});
// 发送消息
function sendMessage() {
const message = input.value.trim();
if (!message) return;
addMessage('user', message);
input.value = '';
// 显示正在输入
const typingDiv = document.createElement('div');
typingDiv.innerHTML = '<div style="display: flex; padding: 8px;"><div style="width: 8px; height: 8px; border-radius: 50%; background: #6c757d; margin: 0 2px; animation: typing 1.4s infinite ease-in-out;"></div><div style="width: 8px; height: 8px; border-radius: 50%; background: #6c757d; margin: 0 2px; animation: typing 1.4s infinite ease-in-out; animation-delay: 0.2s;"></div><div style="width: 8px; height: 8px; border-radius: 50%; background: #6c757d; margin: 0 2px; animation: typing 1.4s infinite ease-in-out; animation-delay: 0.4s;"></div></div>';
messagesDiv.appendChild(typingDiv);
messagesDiv.scrollTop = messagesDiv.scrollHeight;
// 发送请求到API
fetch('https://api.pearktrue.cn/api/aichat/', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
body: JSON.stringify({
model: 'deepseek-v3',
messages: [{role: 'user', content: message}],
temperature: 0.7,
max_tokens: 2048,
stream: false
})
})
.then(response => {
if (!response.ok) throw new Error('网络响应不正常: ' + response.status);
return response.json();
})
.then(data => {
typingDiv.remove();
if (data.code === 200) {
addMessage('ai', data.content);
} else {
addMessage('ai', '抱歉，出现错误: ' + (data.msg || '未知错误'));
}
})
.catch(error => {
typingDiv.remove();
addMessage('ai', '请求失败: ' + error.message);
});
}
// 添加消息
function addMessage(role, content) {
const messageDiv = document.createElement('div');
messageDiv.style.marginBottom = '12px';
messageDiv.style.display = 'flex';
messageDiv.style.flexDirection = 'column';
messageDiv.style.alignItems = role === 'user' ? 'flex-end' : 'flex-start';
const contentDiv = document.createElement('div');
contentDiv.style.padding = '10px 12px';
contentDiv.style.borderRadius = '12px';
contentDiv.style.maxWidth = '80%';
contentDiv.style.wordBreak = 'break-word';
contentDiv.style.lineHeight = '1.5';
contentDiv.textContent = content;
if (role === 'user') {
contentDiv.style.background = '#4361ee';
contentDiv.style.color = 'white';
contentDiv.style.borderBottomRightRadius = '4px';
} else {
contentDiv.style.background = 'white';
contentDiv.style.color = '#212529';
contentDiv.style.boxShadow = '0 2px 8px rgba(0,0,0,0.1)';
contentDiv.style.borderBottomLeftRadius = '4px';
}
messageDiv.appendChild(contentDiv);
messagesDiv.appendChild(messageDiv);
messagesDiv.scrollTop = messagesDiv.scrollHeight;
}
// 发送按钮点击
sendBtn.addEventListener('click', sendMessage);
// 回车键发送
input.addEventListener('keydown', (e) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
sendMessage();
}
});
// 添加样式
const style = document.createElement('style');
style.textContent = `
@keyframes typing {
0%, 60%, 100% { transform: translateY(0); }
30% { transform: translateY(-5px); }
}
#songai-messages::-webkit-scrollbar {
width: 6px;
}
#songai-messages::-webkit-scrollbar-track {
background: #e9ecef;
}
#songai-messages::-webkit-scrollbar-thumb {
background: #4361ee;
border-radius: 3px;
}
`;
document.head.appendChild(style);
})();
</script>
亲，沙发正空着，还不快来抢？
我要评论 / 展开表单