XAI_API_KEY,
'apiEndpoint' => 'https://api.x.ai/v1/chat/completions' // Replace with actual xAI API endpoint
));
// Enqueue custom chatbot styles
wp_enqueue_style('xai-chatbot-style', plugins_url('/css/chatbot.css', __FILE__), array(), '1.1');
}
add_action('wp_enqueue_scripts', 'xai_chatbot_enqueue_scripts');
// Add chatbot HTML to footer
function xai_chatbot_add_to_footer() {
?>
{
const chatbot = document.getElementById('xai-chatbot');
const openBtn = document.getElementById('xai-chatbot-open');
const toggleBtn = document.getElementById('xai-chatbot-toggle');
const input = document.getElementById('xai-chatbot-input');
const messages = document.getElementById('xai-chatbot-messages');
// Toggle chatbot visibility
openBtn.addEventListener('click', () => {
chatbot.classList.toggle('hidden');
openBtn.classList.toggle('hidden');
});
toggleBtn.addEventListener('click', () => {
chatbot.classList.add('hidden');
openBtn.classList.remove('hidden');
});
// Handle user input
input.addEventListener('keypress', (e) => {
if (e.key === 'Enter' && input.value.trim()) {
const userMessage = input.value.trim();
addMessage('user', userMessage);
getBotResponse(userMessage);
input.value = '';
messages.scrollTop = messages.scrollHeight;
}
});
// Add message to chat
function addMessage(sender, text) {
const messageDiv = document.createElement('div');
messageDiv.className = sender === 'user' ? 'text-right mb-2' : 'text-left mb-2';
messageDiv.innerHTML = `\${text}
`;
messages.appendChild(messageDiv);
}
// Fetch response from xAI API
async function getBotResponse(message) {
try {
const response = await fetch(xaiChatbot.apiEndpoint, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer \${xaiChatbot.apiKey}`
},
body: JSON.stringify({
model: 'grok', // Specify the model, adjust as per xAI API docs
messages: [
{ role: 'user', content: message }
],
max_tokens: 150
})
});
if (!response.ok) {
throw new Error('API request failed');
}
const data = await response.json();
const botResponse = data.choices[0].message.content;
addMessage('bot', botResponse);
} catch (error) {
console.error('Error fetching API response:', error);
addMessage('bot', 'Sorry, something went wrong. Please try again.');
}
}
});
JS;
file_put_contents($js_dir . '/chatbot.js', $js_content);
// Create chatbot.css
$css_content = <<