Spaces:

jacobinathanialpeterson
/

chatbox2

Sleeping

App Files Files Community

jacobinathanialpeterson commited on Jan 7, 2024

Commit

4f737fe

1 Parent(s): ac0a9f3

Upload 3 files

Browse files

Files changed (3) hide show

chatbox/index.html +20 -0
chatbox/script.js +123 -0
chatbox/style.css +98 -0

chatbox/index.html ADDED Viewed

	@@ -0,0 +1,20 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Chat System</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div class="chat-container">
+    <div class="chat-messages" id="messages"></div>
+    <div class="chat-input">
+      <input type="text" id="nameInputBox" placeholder="Your Name">
+      <input type="text" id="messageInputBox" placeholder="Type a message...">
+      <button onclick="postMessage()">Send</button>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+</html>

chatbox/script.js ADDED Viewed

	@@ -0,0 +1,123 @@

+// 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);

chatbox/style.css ADDED Viewed

	@@ -0,0 +1,98 @@

+/* Dark color theme styles */
+body {
+  font-family: Arial, sans-serif; /* Change the font family here */
+  background-color: #333; /* Dark background color */
+  color: #eee; /* Light text color */
+}
+.chat-container {
+  border: 1px solid #555; /* Darker border */
+  width: 600px;
+  margin: 20px auto;
+  padding: 10px;
+  background-color: #444; /* Slightly lighter background color */
+}
+.chat-messages {
+  height: 700px;
+  overflow-y: scroll;
+  border-bottom: 1px solid #555;
+  padding-bottom: 10px;
+}
+.msgc {
+  margin-bottom: 10px;
+  padding: 5px;
+  border-radius: 5px;
+  background-color: #555; /* Darker message background */
+}
+.nme {
+  font-weight: bold;
+  margin-bottom: 5px;
+}
+/* Your existing styles */
+/* Adjusted styles for message content padding */
+.msg {
+  margin-bottom: 10px;
+  padding: 10px; /* Add padding to the message */
+  border-radius: 5px;
+}
+/* Rest of your existing styles */
+/* Your existing styles */
+/* Adjusted styles for input and button layout */
+.chat-input {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 10px;
+}
+input[type="text"] {
+  flex: 1;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  margin-right: 10px; /* Add spacing between inputs and button */
+}
+input[type="text"]:last-child {
+  margin-right: 0; /* Remove margin from the last input */
+}
+.chat-input button {
+  padding: 10px;
+  cursor: pointer;
+  background-color: #3498db;
+  color: #fff;
+  border: none;
+  border-radius: 5px;
+}
+/* Rest of your existing styles */
+.chat-input button:hover {
+  background-color: #2980b9; /* Darker blue on hover */
+}
+/* Your existing styles */
+/* Adjusted styles for alternating message backgrounds */
+.msg:nth-child(even) {
+  background-color: #555; /* Darker background for even messages */
+}
+.msg:nth-child(odd) {
+  background-color: #444; /* Slightly lighter background for odd messages */
+}
+/* Rest of your existing styles */