File size: 1,691 Bytes
3e0aeb8 63c5108 3e0aeb8 63c5108 3e0aeb8 63c5108 3e0aeb8 63c5108 3e0aeb8 63c5108 3e0aeb8 |
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 |
document.addEventListener("DOMContentLoaded", (event) => {
const chatMessages = document.getElementById("chat-messages");
const userInput = document.getElementById("user-input");
const sendButton = document.getElementById("send-button");
function addMessage(message, isUser = false) {
const messageElement = document.createElement("p");
messageElement.textContent = message;
messageElement.style.backgroundColor = isUser ? "#e6f2ff" : "#f0f0f0";
messageElement.style.padding = "10px";
messageElement.style.borderRadius = "5px";
messageElement.style.marginBottom = "10px";
chatMessages.appendChild(messageElement);
chatMessages.scrollTop = chatMessages.scrollHeight;
}
function sendMessage() {
const message = userInput.value.trim();
if (message) {
addMessage(`You: ${message}`, true);
userInput.value = "";
fetch("/chatbot", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ text: message }),
})
.then((response) => response.json())
.then((data) => {
if (data.error) {
addMessage(`Error: ${data.error}`);
} else {
addMessage(`Chatbot: ${data.response}`);
}
})
.catch((error) => {
console.error("Error:", error);
addMessage("Error: Unable to get response from the server.");
});
}
}
sendButton.addEventListener("click", sendMessage);
userInput.addEventListener("keypress", function (e) {
if (e.key === "Enter") {
sendMessage();
}
});
});
|