Spaces:
Sleeping
Sleeping
File size: 3,237 Bytes
6952a04 |
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 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
# jinja2 html page with chatbot functionality using adminlte3 theme
<html>
<body>
<form id="myform">
<div class="content-wrapper">
<section class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1>Chatbot</h1>
</div>
<div class="col-sm-6">
<ol class="breadcrumb float-sm-right">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active">Chatbot</li>
</ol>
</div>
</div>
</div>
</section>
<section class="content">
<div class="container-fluid">
<div class="row">
<div class="col-md-8 offset-md-2">
<div class="card card-primary">
<div class="card-header">
<h3 class="card-title">Chat with our AI</h3>
</div>
<div class="card-body">
<div id="chat-container">
<div class="chat-messages">
<!-- Chat messages will be dynamically added here -->
</div>
<div class="chat-input">
<input type="text" id="user_question" placeholder="Type your message...">
<button id="send-button" onclick="clickform()">Send</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</form>
<script>
const chatContainer = document.getElementById('chat-container');
const userInput = document.getElementById('user_question');
const sendButton = document.getElementById('send-button');
function clickform() {
alert('Please enter');
var formElement = document.getElementById('myForm');
var user_question = document.getElementById('user_question').value;
alert(user_question);
//var data = new FormData(formElement);
//alert(data);
fetch('/chat_with_agent', {
method: 'POST',
//body: data,
})
.then(resp => resp.text()) // or, resp.json(), etc.
.then(data => {
//document.getElementById("responseArea").innerHTML = data;
alert(data);
const chatMessage = document.createElement('div');
chatMessage.classList.add('chat-message');
chatMessage.innerHTML = '<strong>You:</strong> ${user_question}<br><strong>AI:</strong> ${data}';
chatContainer.appendChild(chatMessage);
userInput.value = '';
userInput.focus();
})
.catch(error => {
console.error(error);
});
}
</script>
</body></html> |