Spaces:
Running
Running
File size: 3,150 Bytes
81e5563 a1955ce 4e322c2 a1955ce 4e322c2 256e3d5 4e322c2 256e3d5 4e322c2 256e3d5 4e322c2 a1955ce 4e322c2 81e5563 4e322c2 81e5563 4e322c2 81e5563 4e322c2 256e3d5 a1955ce 4e322c2 a1955ce 256e3d5 a1955ce 4e322c2 a1955ce 4e322c2 a1955ce 4e322c2 a1955ce 4e322c2 a1955ce 4e322c2 a1955ce |
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 |
const socket = io.connect(document.baseURI);
const chatBox = document.getElementById('chat-box');
const chatInput = document.getElementById('chat-input');
const sendButton = document.getElementById('send-button');
const converter = new showdown.Converter(); // If you're using showdown.js for markdown to HTML conversion
let response = "";
// Function to add a loader element
function addLoader() {
const loaderEle = document.createElement('div');
loaderEle.classList.add('dot-loader');
loaderEle.innerHTML = `
<div></div>
<div></div>
<div></div>
`;
chatBox.appendChild(loaderEle);
}
// Function to append a message to the chat box
function appendMessage(message, sender) {
if (sender === 'bot') {
response += message;
const loaderEle = chatBox.lastElementChild;
if (loaderEle && loaderEle.classList.contains('dot-loader')) {
chatBox.removeChild(loaderEle);
const messageElement = document.createElement('div');
messageElement.classList.add('chat-message', sender);
messageElement.innerHTML = `<span>${response}</span>`;
chatBox.append(messageElement);
chatBox.scrollTop = chatBox.scrollHeight;
} else {
const lastMessageEle = chatBox.lastElementChild;
if (lastMessageEle) {
lastMessageEle.innerHTML = response;
}
chatBox.scrollTop = chatBox.scrollHeight;
}
} else {
const messageElement = document.createElement('div');
messageElement.classList.add('chat-message', sender);
messageElement.innerHTML = `<span>${message}</span>`;
chatBox.append(messageElement);
chatBox.scrollTop = chatBox.scrollHeight;
// Add a loader after a slight delay
setTimeout(addLoader, 500);
}
}
// Event listener for the send button
sendButton.addEventListener('click', () => {
const message = chatInput.value.trim();
if (message) {
appendMessage(message, 'user');
socket.emit('message', { question: message, session_id: 'abc123' });
chatInput.value = '';
response = "";
} else {
console.error("Message cannot be empty.");
}
});
// Event listener for 'Enter' key press in the chat input
chatInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
sendButton.click();
}
});
// Handle incoming responses from the server
socket.on('response', (data) => {
if (data && typeof data === 'string') {
appendMessage(data, 'bot');
} else {
console.error("Invalid response format received from the server.");
}
});
// Handle connection errors
socket.on('connect_error', (error) => {
console.error("Connection error:", error);
appendMessage("Sorry, there was a problem connecting to the server. Please try again later.", 'bot');
});
// Handle disconnection
socket.on('disconnect', (reason) => {
console.warn("Disconnected from server:", reason);
appendMessage("You have been disconnected from the server. Please refresh the page to reconnect.", 'bot');
});
|