108 lines
3.9 KiB
PHP
108 lines
3.9 KiB
PHP
<?php include 'header.php'; ?>
|
|
|
|
<div class="container mt-5">
|
|
<div class="row">
|
|
<div class="col-md-8 offset-md-2">
|
|
<h1 class="text-center mb-4">AI Support Assistant</h1>
|
|
<div class="card">
|
|
<div class="card-body" id="chat-window" style="height: 400px; overflow-y: scroll;">
|
|
<!-- Chat messages will appear here -->
|
|
<div class="d-flex flex-row justify-content-start mb-4">
|
|
<div class="p-3 ms-3" style="border-radius: 15px; background-color: #f5f6f7;">
|
|
<p class="small mb-0">Hello! How can I help you today? Ask me anything about our plans or services.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer text-muted d-flex justify-content-start align-items-center p-3">
|
|
<input type="text" class="form-control form-control-lg" id="user-input" placeholder="Type your message">
|
|
<button class="btn btn-primary ms-3" id="send-btn">Send</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const chatWindow = document.getElementById('chat-window');
|
|
const userInput = document.getElementById('user-input');
|
|
const sendBtn = document.getElementById('send-btn');
|
|
|
|
const addMessage = (message, sender) => {
|
|
const messageDiv = document.createElement('div');
|
|
const messageContent = document.createElement('div');
|
|
const text = document.createElement('p');
|
|
|
|
messageDiv.classList.add('d-flex', 'flex-row', 'mb-4');
|
|
messageContent.classList.add('p-3');
|
|
text.classList.add('small', 'mb-0');
|
|
|
|
text.innerText = message;
|
|
messageContent.appendChild(text);
|
|
|
|
if (sender === 'user') {
|
|
messageDiv.classList.add('justify-content-end');
|
|
messageContent.classList.add('me-3', 'text-white');
|
|
messageContent.style.borderRadius = '15px';
|
|
messageContent.style.backgroundColor = '#0d6efd'; // Bootstrap Primary Blue
|
|
} else {
|
|
messageDiv.classList.add('justify-content-start');
|
|
messageContent.classList.add('ms-3');
|
|
messageContent.style.borderRadius = '15px';
|
|
messageContent.style.backgroundColor = '#f5f6f7'; // Light grey
|
|
}
|
|
|
|
messageDiv.appendChild(messageContent);
|
|
chatWindow.appendChild(messageDiv);
|
|
chatWindow.scrollTop = chatWindow.scrollHeight; // Auto-scroll to the latest message
|
|
};
|
|
|
|
const handleSend = async () => {
|
|
const question = userInput.value.trim();
|
|
if (!question) return;
|
|
|
|
addMessage(question, 'user');
|
|
userInput.value = '';
|
|
userInput.disabled = true;
|
|
sendBtn.disabled = true;
|
|
|
|
try {
|
|
const response = await fetch('/api/ai_support.php', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({ question })
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error('Network response was not ok');
|
|
}
|
|
|
|
const data = await response.json();
|
|
|
|
if (data.reply) {
|
|
addMessage(data.reply, 'ai');
|
|
} else if (data.error) {
|
|
addMessage(data.error, 'ai');
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('Error:', error);
|
|
addMessage('Sorry, something went wrong. Please try again later.', 'ai');
|
|
} finally {
|
|
userInput.disabled = false;
|
|
sendBtn.disabled = false;
|
|
userInput.focus();
|
|
}
|
|
};
|
|
|
|
sendBtn.addEventListener('click', handleSend);
|
|
userInput.addEventListener('keypress', (e) => {
|
|
if (e.key === 'Enter') {
|
|
handleSend();
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<?php include 'footer.php'; ?>
|