64 lines
2.2 KiB
JavaScript
64 lines
2.2 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
const chatMessages = document.getElementById('chat-messages');
|
|
const messageInput = document.getElementById('message-input');
|
|
const sendButton = document.getElementById('send-button');
|
|
|
|
const addMessage = (role, content) => {
|
|
const messageElement = document.createElement('div');
|
|
messageElement.classList.add('message', role);
|
|
|
|
const avatarElement = document.createElement('img');
|
|
avatarElement.classList.add('avatar');
|
|
avatarElement.src = role === 'user' ? 'https://picsum.photos/seed/user-avatar/100/100' : 'https://picsum.photos/seed/companion-avatar/100/100';
|
|
|
|
const textElement = document.createElement('div');
|
|
textElement.classList.add('text');
|
|
textElement.textContent = content;
|
|
|
|
if (role === 'user') {
|
|
messageElement.appendChild(textElement);
|
|
messageElement.appendChild(avatarElement);
|
|
} else {
|
|
messageElement.appendChild(avatarElement);
|
|
messageElement.appendChild(textElement);
|
|
}
|
|
|
|
chatMessages.appendChild(messageElement);
|
|
chatMessages.scrollTop = chatMessages.scrollHeight;
|
|
};
|
|
|
|
const sendMessage = async () => {
|
|
const message = messageInput.value.trim();
|
|
if (message === '') return;
|
|
|
|
addMessage('user', message);
|
|
messageInput.value = '';
|
|
|
|
try {
|
|
const response = await fetch('/api/chat.php', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({ message })
|
|
});
|
|
|
|
const data = await response.json();
|
|
addMessage('assistant', data.reply);
|
|
} catch (error) {
|
|
console.error('Error:', error);
|
|
addMessage('assistant', 'Sorry, something went wrong. Please try again later.');
|
|
}
|
|
};
|
|
|
|
sendButton.addEventListener('click', sendMessage);
|
|
messageInput.addEventListener('keypress', (e) => {
|
|
if (e.key === 'Enter') {
|
|
sendMessage();
|
|
}
|
|
});
|
|
|
|
// Initial greeting
|
|
addMessage('assistant', 'Hello! I am your Companion. How can I help you today?');
|
|
});
|