<!DOCTYPE html>
<html>
<head>
<title>J AI Assist</title>
<link rel="icon" type="image/png" href="../static/Jio-Logo.png" />
<link rel="apple-touch-icon" type="image/png" href="../static/Jio-Logo.png" />
<style>
body {
background-color: #ECE5DD;
font-family: Arial, sans-serif;
font-size: 14px;
padding: 20px;
}
.container {
display: flex;
flex-direction: column;
height: 700px;
max-width: 700px;
margin: 0 auto;
background-color: #fff;
border-radius: 10px;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.header {
display: flex;
align-items: center;
justify-content: center;
height: 60px;
background-color: #0f3cc9;
/* #075E54 */
color: #fff;
font-weight: bold;
font-size: 20px;
}
.chat-area {
flex-grow: 1;
padding: 20px;
overflow-y: auto;
}
.chat-area p {
margin: 5px 0;
}
.message-box {
display: flex;
align-items: center;
background-color: #F4F4F4;
padding: 10px;
border-top: 1px solid #ccc;
}
.message-box input {
flex-grow: 1;
border: none;
padding: 10px;
font-size: 14px;
border-radius: 5px;
background-color: #fff;
margin-right: 10px;
}
.message-box button {
background-color: #0f3cc9;
/* #075E54 */
color: #fff;
border: none;
padding: 10px;
font-size: 14px;
font-weight: bold;
border-radius: 5px;
cursor: pointer;
}
.user-message {
display: flex;
flex-direction: row-reverse;
align-items: center;
margin-bottom: 10px;
}
.bot-message {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.user-message p,
.bot-message p {
background-color: #ccd6f2;
/* #DCF8C6; */
color: #000;
padding: 10px;
border-radius: 10px;
max-width: 60%;
word-wrap: break-word;
}
.user-message p {
margin-right: 10px;
}
.bot-message p {
margin-left: 10px;
}
.logoClass {
width: 50px;
height: 40px;
align-self: center;
margin-right: 10px;
gap: 20px 20px;
background-repeat: no-repeat;
background-size: cover;
/* background-image: url({{url_for('static',filename='Jio-Logo.png')}}); */
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<div>
</div>
<div>AI Assist Powered by JGPT</div>
</div>
<div class="chat-area">
<div class="bot-message">
<p>Hello! How can I assist you today?</p>
</div>
</div>
<div class="message-box">
<input id="user-input" type="text" placeholder="Type your message..." onkeyup="return searchKeyPress(event)">
<button id="send-button" onclick="sendMessage()">Send</button>
</div>
</div>
<script>
function searchKeyPress(event) {
event.preventDefault();
if (event.keyCode === 13) {
document.getElementById("send-button").click();
}
};
async function sendMessage() {
var response = "";
// Get the user input
var userInput = document.getElementById("user-input").value;
// Create a new user message and add it to the chat area
var userMessage = document.createElement("div");
userMessage.classList.add("user-message");
userMessage.innerHTML = '<p>' + userInput + '</p>';
document.querySelector(".chat-area").appendChild(userMessage);
// Clear the input field
document.getElementById("user-input").value = "";
// Generate a bot response
var botResponse = await generateBotResponse(userInput);
}
async function generateBotResponse(userInput) {
// Make a POST request to the chatbot API endpoint
// response = await fetch('http://127.0.0.1:1111/post_json', {
// method: 'POST',
// headers: {
// 'Content-Type': 'application/json'
// },
// body: JSON.stringify({
// query: userInput
// })
// });
var xhr = new XMLHttpRequest();
//xhr.open("POST", 'http://127.0.0.1:1111/post_json', true);
//xhr.open("POST", '/post_json', true);
xhr.open("POST", '/agent/chat/suggestion', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({
message: [userInput],
"custDetails": {
"cName": "Mohit Srivastava",
"cDistrict": "Lucknow"
}
}));
xhr.onload = function() {
console.log(this.responseText);
var response = JSON.parse(this.responseText);
console.log(response);
// Create a new bot message and add it to the chat area
var botMessage = document.createElement("div");
botMessage.classList.add("bot-message");
botMessage.innerHTML = '<p>' + response.suggestions[0]['message'] + '</p>';
document.querySelector(".chat-area").appendChild(botMessage);
// Scroll to the bottom of the chat area
document.querySelector('.chat-area').scrollTop = document.querySelector('.chat-area').scrollHeight;
return response.suggestions[0]['message'];
}
// Parse the response JSON and return the bot message
//console.log(data);
//var data = await response.json();
//return response.botMessage;
}
</script>
</body>
</html>