chatbox/script.js

// sets the delay time for each request
const DELAYTIME = 500
 // Variable to store the backend server data
let DATA;


// Fetch data from the backend server
function postMessage(url="https://jacobinathanialpeterson-chatbox.hf.space/postMessage") {
	const controller = new AbortController();
	const abortSignal = controller.signal;
	fetch(url, { 
			method: 'POST',
			headers: {
				'Content-Type': 'application/json'
			},
			body: JSON.stringify({nameInput: document.getElementById("nameInputBox").value, messageInput: document.getElementById("messageInputBox").value}),
			signal: abortSignal
		})
		.then(response => { if (!response.ok) { throw new Error('Network response was not ok.') } return response.json() })
		.then(data => {
			controller.abort(); 
		})
		.catch(error => { if (error.name === 'AbortError') { console.log('Fetch aborted:', error.message) } else { console.error('Error fetching data:', error.message) }});
}

function getMessages(url="https://jacobinathanialpeterson-chatbox.hf.space/messages") {
	const controller = new AbortController();
	const abortSignal = controller.signal;
	fetch(url, {signal: abortSignal})
		.then(response => { if (!response.ok) { throw new Error('Network response was not ok.') } return response.json() })
		.then(data => {
			// Get the keys of the object
			const keys = Object.keys(data);

			// Sort the keys based on their natural order
			keys.sort((a, b) => {
			  // Extract numeric part of keys
			  const numA = parseInt(a.match(/\d+/)[0]);
			  const numB = parseInt(b.match(/\d+/)[0]);
			  return numA - numB;
			});

			// Create a new object with sorted keys
			DATA = {};
			keys.forEach(key => {
			  DATA[key] = data[key];
			});

			controller.abort(); 
		})
		.catch(error => { if (error.name === 'AbortError') { console.log('Fetch aborted:', error.message) } else { console.error('Error fetching data:', error.message) }});
}



// Variable to track if the user is at the bottom of the chat box
let atBottom = true;

// Update the UI with fetched messages
function updateUI() {
  const messagesContainer = document.getElementById("messages");
  const isAtBottom = messagesContainer.scrollHeight - messagesContainer.scrollTop === messagesContainer.clientHeight;

  let elementValue = '';
  if (DATA) {
    Object.entries(DATA).forEach(([key, value]) => {
      elementValue +=
        `<div class="msg" id="${key}">
          <div class="nme">${value.name}: </div>
          <div class="body">${value.message}</div>
        </div>`;
    });
  }
  messagesContainer.innerHTML = elementValue;

  if (atBottom || isAtBottom) {
    messagesContainer.scrollTop = messagesContainer.scrollHeight;
  }
  atBottom = isAtBottom;
}

// Your existing interval for getting messages and updating UI
setInterval(getMessages, 100);
setTimeout(() => {
  setInterval(updateUI, 100);
}, DELAYTIME);

// Listen for scroll events
document.getElementById("messages").addEventListener("scroll", () => {
  const messagesContainer = document.getElementById("messages");
  const isAtBottom = messagesContainer.scrollHeight - messagesContainer.scrollTop === messagesContainer.clientHeight;
  atBottom = isAtBottom;
});


// ... (your existing code)

// Function to handle sending message on "Enter" key press
function handleKeyPress(event) {
  if (event.keyCode === 13) {
    event.preventDefault(); // Prevent the default behavior (e.g., form submission)
    postMessage(); // Call the postMessage function when "Enter" is pressed
  }
}

// Add event listener to the message input field
document.getElementById("messageInputBox").addEventListener("keypress", handleKeyPress);

// ... (rest of your existing code)


// document.getElementById("nameInputBox").value
// document.getElementById(messageInputBox).value



// function updateUI() {
	// var targetElement = document.getElementById("messages"); // Replace "targetElementId" with the ID of the element
	// targetElement.innerHTML = "<p>"+JSON.stringify(DATA)+"</p>";
// }

// setInterval(updateUI, 1000);