I had a chatbox in HTML created based on Javascript. Now I am trying to translate the Javascript code to Pyscript, to better streamline the data analytics tools. However, after the translation, the chatbox does not work properly. I have posted both Pyscript and Javascript versions of code for comparison.
Could you please let me know what is wrong with the Pyscript code? Thanks.
The .html file with a pyscript based chatbox (i.e., the code after translation) is as follows. After clicking the "Send" button, nothing happens. It is supposed to display the question in one line, and the answer in the following line.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<!-- PyScript CSS and JS -->
<link rel="stylesheet" href="https://pyscript.net/releases/2024.1.3/core.css"/>
<script type="module" src="https://pyscript.net/releases/2024.1.3/core.js"></script>
</head>
<body>
<div id="contents">
<div class="post">
<br><br><br><br>
<p>
Post your question here. The answer will be returned in the next row.
<div id="chatbox">
<div id="messages"></div>
<input type="text" id="userInput" placeholder="Type a message...">
<button id="sendButton">Send</button>
</div>
<py-script>
from js import document
def send_message(event):
input_element = document.getElementById("userInput")
message = input_element.value.trim()
if message:
messages_container = document.getElementById("messages")
new_message = document.createElement("div")
new_message.textContent = message
messages_container.appendChild(new_message)
input_element.value = "" # Clear input field
messages_container.scrollTop = messages_container.scrollHeight # Scroll to the bottom
# Simulated response
response = document.createElement("div")
response.textContent = "The response should be displayed here."
messages_container.appendChild(response)
messages_container.scrollTop = messages_container.scrollHeight # Scroll to the bottom again
send_button = document.getElementById("sendButton")
send_button.addEventListener("click", send_message)
</py-script>
</p>
</div>
</div>
</body>
</html>
The Javascript version of the code works well. The code is as follows.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="contents">
<div class="post">
<br><br><br><br>
<p>
Post your question here. The answer will be returned in the next row.
<div id="chatbox">
<div id="messages"></div>
<input type="text" id="userInput" placeholder="Type a message...">
<button onclick="sendMessage()">Send</button>
</div>
<script>
function sendMessage() {
var input = document.getElementById("userInput");
var message = input.value.trim();
if (message !== "") {
// Post question here.
var messagesContainer = document.getElementById("messages");
var newMessage = document.createElement("div");
newMessage.textContent = message;
messagesContainer.appendChild(newMessage);
input.value = ""; // Clear input field
messagesContainer.scrollTop = messagesContainer.scrollHeight; // Scroll to the bottom
// Post anwer here.
var newMessage = document.createElement("div");
newMessage.textContent = "The response should be displayed here.";
messagesContainer.appendChild(newMessage);
input.value = ""; // Clear input field
messagesContainer.scrollTop = messagesContainer.scrollHeight; // Scroll to the bottom
}
}
</script>
</p>
</div>
</div>
</body>
</html>
Two things:
The recommended way to attach event listeners in PyScript is using the @when decorator, which takes an event name and a CSS Selector.
Second, the method for removing unnecessarily whitespace in Python is strip(), not trim().
Put together, the first part of your tag looks like this:
<py-script>
from js import document
from pyscript import when
@when("click", "#sendButton")
def send_message(event):
input_element = document.getElementById("userInput")
message = input_element.value.strip()
if message:
...
</py-script>