Spaces:
Running
Running
File size: 2,985 Bytes
646538b |
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 |
document.addEventListener('DOMContentLoaded', () => {
const input = document.getElementById('user-input');
const sendBtn = document.getElementById('send-btn');
const chatContainer = document.getElementById('chat-container');
const loadingIndicator = document.getElementById('loading');
function addMessage(text, sender) { // sender is 'user' or 'bot'
const div = document.createElement('div');
div.classList.add('message', sender + '-message');
const img = document.createElement('img');
img.src = `/static/${sender}_icon.png`;
img.classList.add('avatar', sender + '-avatar');
const contentDiv = document.createElement('div');
contentDiv.classList.add('message-content');
// Allow basic HTML formatting like line breaks if needed, or just text
contentDiv.innerHTML = text.replace(/\n/g, '<br>');
div.appendChild(img);
div.appendChild(contentDiv);
// Insert before the loading indicator so loading always stays at bottom
chatContainer.insertBefore(div, loadingIndicator);
chatContainer.scrollTop = chatContainer.scrollHeight;
}
async function sendMessage() {
const query = input.value.trim();
if (!query) return;
addMessage(query, 'user');
input.value = '';
input.disabled = true;
// Show loading
loadingIndicator.style.display = 'block';
chatContainer.scrollTop = chatContainer.scrollHeight;
// Typing Animation
let dots = '';
const baseText = "Demogorgon is typing";
const typingInterval = setInterval(() => {
dots = dots.length < 3 ? dots + '.' : '';
loadingIndicator.innerText = baseText + dots;
}, 500);
try {
const response = await fetch('/query', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ query: query })
});
const data = await response.json();
// Hide loading & Stop Animation
clearInterval(typingInterval);
loadingIndicator.style.display = 'none';
addMessage(data.answer, 'bot');
// Optional: Handle sources if you want to display them
} catch (error) {
// Stop animation on error too
if (typeof typingInterval !== 'undefined') clearInterval(typingInterval);
loadingIndicator.style.display = 'none';
addMessage("ERR: CONNECTION LOST WITH UPSIDE DOWN.", 'bot');
console.error(error);
} finally {
input.disabled = false;
input.focus();
}
}
sendBtn.addEventListener('click', sendMessage);
input.addEventListener('keypress', (e) => {
if (e.key === 'Enter') sendMessage();
});
});
|