File size: 3,935 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 81 82 83 84 85 86 87 88 89 90 91 92 |
<!DOCTYPE html>
<html>
<head>
<title>Chatbot</title>
<!-- Include the necessary CSS and JS files for the AdminLTE3 theme -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/adminlte.min.css">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">
<!-- Side Pane -->
{% include 'sidepane.html' %}
<form id="myform">
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<section class="content">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-body">
<h5 class="card-title">Chat History</h5>
<textarea class="form-control" id="chatHistory" readonly></textarea>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- Form -->
<div class="container-fluid">
<div class="row" style="width:50%">
<div class="col-md-3"></div>
<div class="col-md-6" style="margin-left: 90px;">
<div class="input-group">
<input type="text" class="form-control" name="user_question" id="user_question" placeholder="Enter your question">
<button type="button" class="btn btn-primary" onclick="submitQuestion()">Submit</button>
</div>
</div>
</div>
</div>
</div>
</form>
<script>
function submitQuestion() {
// Get the user's question from the input box
var question = document.getElementById("user_question").value;
// Call the API with the user's question and get the response
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);
// Append the user's question and the response to the chat history
var chatHistory = document.getElementById("chatHistory");
chatHistory.value += "User: " + question + "\n";
chatHistory.value += "Chatbot: " + xhr.responseText + "\n";
// Clear the input box
document.getElementById("user_question").value = "";
//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>
|