Spaces:
Sleeping
Sleeping
File size: 3,218 Bytes
6e443ec |
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 |
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;
console.log(response);
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, language:"en", 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) => {
console.log(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');
});
|