|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<title>AI Assist</title> |
|
<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; |
|
|
|
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; |
|
|
|
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; |
|
|
|
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; |
|
|
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div class="container"> |
|
<div class="header"> |
|
<div>AI Assist Powered by J-GPT</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 = ""; |
|
|
|
var userInput = document.getElementById("user-input").value; |
|
|
|
var userMessage = document.createElement("div"); |
|
userMessage.classList.add("user-message"); |
|
userMessage.innerHTML = '<p>' + userInput + '</p>'; |
|
document.querySelector(".chat-area").appendChild(userMessage); |
|
|
|
document.getElementById("user-input").value = ""; |
|
|
|
var botResponse = await generateBotResponse(userInput); |
|
} |
|
async function generateBotResponse(userInput) { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var xhr = new XMLHttpRequest(); |
|
|
|
|
|
xhr.open("POST", '/agent/chat/suggestion', true); |
|
xhr.setRequestHeader('Content-Type', 'application/json'); |
|
xhr.send(JSON.stringify({ |
|
message: [userInput], |
|
"custDetails": { |
|
"cName": "Jai Singh Rathore", |
|
"cDistrict": "Jodhpur" |
|
} |
|
})); |
|
xhr.onload = function() { |
|
console.log(this.responseText); |
|
var response = JSON.parse(this.responseText); |
|
console.log(response); |
|
|
|
var botMessage = document.createElement("div"); |
|
botMessage.classList.add("bot-message"); |
|
botMessage.innerHTML = '<p>' + response.suggestions[0]['message'] + '</p>'; |
|
document.querySelector(".chat-area").appendChild(botMessage); |
|
|
|
document.querySelector('.chat-area').scrollTop = document.querySelector('.chat-area').scrollHeight; |
|
return response.suggestions[0]['message']; |
|
} |
|
|
|
|
|
|
|
|
|
} |
|
</script> |
|
</body> |
|
</html> |
