|
|
|
<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">
|
|
|
|
</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) {
|
|
|
|
alert(xhr.responseText);
|
|
console.log(xhr.responseText);
|
|
|
|
} else {
|
|
|
|
alert('There was a problem with the request.');
|
|
console.error('Error:', xhr.statusText);
|
|
}
|
|
}
|
|
};
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|
