Chatbot.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Healthcare Chatbot</title>
<style>
/* Add your CSS styles here */
body {
font-family: Arial, sans-serif;
}
.chat-container {
max-width: 500px;
border: 1px solid #ccc;
border-radius: 5px;
overflow: hidden;
}
.chat-box {
height: 350px;
overflow-y: scroll;
padding: 10px;
}
.message {
margin-bottom: 10px;
padding: 5px 10px;
border-radius: 5px;
}
.user-message {
background-color: #f2f2f2;
text-align: right;
}
.bot-message {
background-color: #e5e5ff;
}
.chat-form {
display: flex;
align-items: center;
padding: 10px;
background-color: #f2f2f2;
}
.chat-form input[type="text"] {
flex: 1;
margin-right: 5px;
padding: 5px;
border-radius: 5px;
border: 1px solid #ccc;
}
.chat-form button {
padding: 5px 5px;
border-radius: 5px;
border: none;
background-color: #4CAF50;
color: white;
cursor: pointer;
}
/* Microphone button */
.mic-button {
background-color: #808080;
/* Gray background */
border: none;
padding: 10px;
border-radius: 50%;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
.mic-icon {
width: 24px;
height: auto;
fill: #ffffff;
/* White color for the mic icon */
}
/* Popup */
.mic-popup {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #f2f2f2;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
z-index: 1000;
display: none;
}
</style>
</head>
<body>
<div class="chat-container">
<div class="chat-box" id="chat-box"></div>
<button id="microphone-button" class="mic-button">
<img src="[Link]" alt="Mic" class="mic-icon">
</button>
<form class="chat-form" id="chat-form">
<input type="text" id="user-input" placeholder="Type your
message...">
<button type="submit">Send</button>
</form>
</div>
<!-- Microphone popup -->
<div id="mic-popup" class="mic-popup">
<p id="popup-message">Listening...</p>
</div>
<script>
// Function to append a message to the chat box
function appendMessage(message, className) {
var chatBox = [Link]('chat-box');
var messageElement = [Link]('div');
[Link] = 'message ' + className;
[Link] = message;
[Link](messageElement);
[Link] = [Link]; // Scroll to bottom of
chat box
}
// Function to handle voice input
function startVoiceInput() {
var recognition = new webkitSpeechRecognition();
[Link] = false;
[Link] = false;
[Link] = function (event) {
var userInput = [Link][0][0].transcript;
sendMessage(userInput);
};
[Link] = function (event) {
[Link]('Speech recognition error:', [Link]);
};
[Link]();
// Show microphone popup
var micPopup = [Link]('mic-popup');
[Link] = 'block';
// Hide microphone popup after 20 seconds
setTimeout(function () {
[Link] = 'none';
}, 20000); // 20 seconds
}
// Event listener for the microphone button
[Link]('microphone-button').addEventListener('click',
function () {
startVoiceInput();
});
// Event listener for the chat form submission
[Link]('chat-form').addEventListener('submit', function
(event) {
[Link]();
var userInput = [Link]('user-input').value;
sendMessage(userInput);
});
// Function to send message to the server
function sendMessage(message) {
// Hide microphone popup
var micPopup = [Link]('mic-popup');
[Link] = 'none';
// Append user's message to chat history
appendMessage('You: ' + message, 'user-message');
// Send message to the server using fetch
fetch('/chat', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: [Link]({ message: message })
})
.then(response => [Link]())
.then(data => {
// Append bot's response to chat history
appendMessage('Bot: ' + [Link], 'bot-message');
// If the response contains a button, disable text input and
submit button
if ([Link]("<button")) {
[Link]('user-input').disabled = true;
[Link]('.chat-form
button[type="submit"]').disabled = true;
}
})
.catch(error => {
[Link]('Error:', error);
});
// Clear user input
[Link]('user-input').value = '';
}
</script>
</body>
</html>
