Spaces:
Sleeping
Sleeping
File size: 3,919 Bytes
47285f7 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 |
document.addEventListener('DOMContentLoaded', () => {
const messageForm = document.getElementById('message-form');
const messageInput = document.getElementById('message-input');
const messagesContainer = document.getElementById('messages-container');
const endpoint = '/chatbot';
/**
* Handles the form submission event.
* @param {Event} event - The form submission event.
*/
const sendMessage = async (event) => {
event.preventDefault();
const userInput = messageInput.value.trim();
if (userInput === '') return;
createBubble(userInput, 'user');
messageInput.value = '';
autoResizeTextarea();
showLoadingIndicator();
try {
const response = await fetch(endpoint, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ prompt: userInput })
});
if (!response.ok) {
throw new Error(`Network error: ${response.statusText}`);
}
const data = await response.json();
removeLoadingIndicator();
createBubble(data.response, 'aibot');
} catch (error) {
console.error('Fetch Error:', error);
removeLoadingIndicator();
createBubble('Sorry, something went wrong. Please check the server connection and try again.', 'error');
}
};
/**
* Creates and appends a new chat bubble to the message container.
* @param {string} text - The message text.
* @param {string} type - The bubble type ('user', 'aibot', or 'error').
*/
const createBubble = (text, type) => {
const messageDiv = document.createElement('div');
messageDiv.classList.add('message', type);
const avatarSrc = {
user: '/static/user.jpeg',
aibot: '/static/Bot_logo.png',
error: '/static/Error.png'
};
messageDiv.innerHTML = `
<img src="${avatarSrc[type]}" alt="${type} avatar">
<p>${text.replace(/\n/g, '<br>')}</p>
`; // Replaces newlines with <br> for better formatting
messagesContainer.appendChild(messageDiv);
messagesContainer.scrollTop = messagesContainer.scrollHeight;
};
/**
* Displays a loading indicator.
*/
const showLoadingIndicator = () => {
const loadingDiv = document.createElement('div');
loadingDiv.id = 'loading-indicator';
loadingDiv.classList.add('loading-container');
loadingDiv.innerHTML = `
<div class="loading-animation"></div>
<p class="loading-text">Assistant is thinking...</p>
`;
messagesContainer.appendChild(loadingDiv);
messagesContainer.scrollTop = messagesContainer.scrollHeight;
};
/**
* Removes the loading indicator.
*/
const removeLoadingIndicator = () => {
const loadingIndicator = document.getElementById('loading-indicator');
if (loadingIndicator) {
messagesContainer.removeChild(loadingIndicator);
}
};
/**
* Automatically resizes the textarea to fit its content.
*/
const autoResizeTextarea = () => {
messageInput.style.height = 'auto';
messageInput.style.height = (messageInput.scrollHeight) + 'px';
};
messageForm.addEventListener('submit', sendMessage);
messageInput.addEventListener('input', autoResizeTextarea);
// Allow sending message with Enter key, but new line with Shift+Enter
messageInput.addEventListener('keydown', (event) => {
if (event.key === 'Enter' && !event.shiftKey) {
event.preventDefault();
sendMessage(event);
}
});
}); |