Redmind_GPT_API_Aug1

Sleeping

App Files Files Community

Redmind_GPT_API_Aug1 / templates /chatpage.html

lakshmivairamani

Upload 25 files

62aa71b verified 5 months ago

raw

history blame contribute delete

3.94 kB

	<!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/admin-lte@3.1/dist/css/adminlte.min.css">
	<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/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>