File size: 3,778 Bytes
62aa71b |
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 |
<!-- 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>
</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">RedmindGPT</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" class="form-control" name="user_question" id="user_question" placeholder="Type your message...">
<button id="send-button" class="form-control" 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() {
var userquestion = document.getElementById('user_question').value;
var xhr = new XMLHttpRequest();
var myForm = document.getElementById('myform');
var formData = new FormData(myForm);
xhr.open("POST", "/chat_with_agent", true);
xhr.send(formData);
alert('sent');
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
// Successfully received a response
alert(xhr.responseText);
console.log(xhr.responseText);
//chatContainer.innerHTML += '<div class="chat-message"><div class="chat-message-content"><p>'+userquestion+ '\n' + xhr.responseText + '</p></div></div>';
} else {
// There was a problem with the request
alert('There was a problem with the request.');
console.error('Error:', xhr.statusText);
}
}
};
}
</script>
</body>
</html>
|