Spaces:
Sleeping
Sleeping
| <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> | |