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