134 lines
4.5 KiB
JavaScript
134 lines
4.5 KiB
JavaScript
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const startChatBtn = document.getElementById('startChatBtn');
|
|
const chatContainer = document.getElementById('chatContainer');
|
|
const chatBox = document.getElementById('chatBox');
|
|
const chatForm = document.getElementById('chatForm');
|
|
const chatInput = document.getElementById('chatInput');
|
|
|
|
// Conversation context
|
|
let conversationState = 'initial'; // 'initial', 'asked_day', 'asked_profession', 'done'
|
|
let userDay = '';
|
|
let userProfession = '';
|
|
|
|
if (startChatBtn) {
|
|
startChatBtn.addEventListener('click', () => {
|
|
chatContainer.scrollIntoView({ behavior: 'smooth' });
|
|
if (conversationState === 'initial') {
|
|
setTimeout(() => {
|
|
addAiMessage('Hello there! How was your day?');
|
|
conversationState = 'asked_day';
|
|
}, 500);
|
|
}
|
|
});
|
|
}
|
|
|
|
chatForm.addEventListener('submit', (e) => {
|
|
e.preventDefault();
|
|
const userMessage = chatInput.value.trim();
|
|
if (userMessage) {
|
|
addUserMessage(userMessage);
|
|
chatInput.value = '';
|
|
handleConversation(userMessage);
|
|
}
|
|
});
|
|
|
|
function handleConversation(userMessage) {
|
|
if (conversationState === 'asked_day') {
|
|
userDay = userMessage;
|
|
addAiMessage('Interesting! And what is your profession?');
|
|
conversationState = 'asked_profession';
|
|
} else if (conversationState === 'asked_profession') {
|
|
userProfession = userMessage;
|
|
conversationState = 'done';
|
|
getAiResponse();
|
|
}
|
|
}
|
|
|
|
function getAiResponse() {
|
|
addAiMessage('Thinking of something funny...', 'typing');
|
|
const formData = new FormData();
|
|
formData.append('day', userDay);
|
|
formData.append('profession', userProfession);
|
|
|
|
fetch('api/chat.php', {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
removeTypingIndicator();
|
|
if (data.success) {
|
|
addAiMeme(data.message, data.meme.src, data.meme.photographer);
|
|
addMoreButton();
|
|
} else {
|
|
addAiMessage('Oops, my wires are crossed. Please try again!');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
removeTypingIndicator();
|
|
console.error('Error:', error);
|
|
addAiMessage('I seem to have lost my train of thought. Could you try again?');
|
|
});
|
|
}
|
|
|
|
function addMoreButton() {
|
|
const moreButton = document.createElement('button');
|
|
moreButton.textContent = 'Another one!';
|
|
moreButton.className = 'btn btn-secondary btn-sm mt-2';
|
|
moreButton.onclick = () => {
|
|
moreButton.remove();
|
|
getAiResponse();
|
|
};
|
|
chatBox.appendChild(moreButton);
|
|
chatBox.scrollTop = chatBox.scrollHeight;
|
|
}
|
|
|
|
function addUserMessage(message) {
|
|
const bubble = document.createElement('div');
|
|
bubble.className = 'chat-bubble user';
|
|
bubble.textContent = message;
|
|
chatBox.appendChild(bubble);
|
|
chatBox.scrollTop = chatBox.scrollHeight;
|
|
}
|
|
|
|
function addAiMessage(message, id = null) {
|
|
const bubble = document.createElement('div');
|
|
bubble.className = 'chat-bubble ai';
|
|
if (id) bubble.id = id;
|
|
bubble.textContent = message;
|
|
chatBox.appendChild(bubble);
|
|
chatBox.scrollTop = chatBox.scrollHeight;
|
|
}
|
|
|
|
function removeTypingIndicator() {
|
|
const typingBubble = document.getElementById('typing');
|
|
if (typingBubble) {
|
|
typingBubble.remove();
|
|
}
|
|
}
|
|
|
|
function addAiMeme(text, imageUrl, photographer) {
|
|
const bubble = document.createElement('div');
|
|
bubble.className = 'chat-bubble ai';
|
|
|
|
const textElement = document.createElement('p');
|
|
textElement.textContent = text;
|
|
bubble.appendChild(textElement);
|
|
|
|
const memeElement = document.createElement('img');
|
|
memeElement.src = imageUrl;
|
|
memeElement.className = 'meme';
|
|
memeElement.alt = `Meme for ${userProfession}`;
|
|
bubble.appendChild(memeElement);
|
|
|
|
const credit = document.createElement('p');
|
|
credit.className = 'text-muted small mt-2';
|
|
credit.innerHTML = `Photo by ${photographer} on Pexels`;
|
|
bubble.appendChild(credit);
|
|
|
|
chatBox.appendChild(bubble);
|
|
chatBox.scrollTop = chatBox.scrollHeight;
|
|
}
|
|
});
|