<html lang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Chatbot Interface</title>
<!-- Add Bootstrap CSS -->
<linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
.custom-btn {
height: 38px;
line-height: 1.5;
margin: 0;
padding: 6px12px; /* Bootstrap default padding */
vertical-align: middle;
}
#chat-container {
height: 400px;
overflow-y: scroll;
border: 1pxsolid#ccc;
padding: 10px;
margin-bottom: 10px;
}
#user-input {
width: calc(100% - 10px);
margin-bottom: 10px;
}
.btn-send {
width: 100%;
}
#chat-info {
margin-bottom: 10px;
}
#loading-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.8);
justify-content: center;
align-items: center;
z-index: 1000;
}
.loading-spinner {
border: 4pxsolidrgba(0, 0, 0, 0.1);
border-radius: 50%;
border-top: 4pxsolid#3498db;
width: 40px;
height: 40px;
animation: spin 1slinearinfinite;
}
@keyframesspin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body class="container mt-4">
<div class="card">
<divclass="card-header">
<divid="chat-info">
<h5>Chat ID: <spanid="chat-id-value"></span></h5>
<pid="response-time"></p>
</div>
</div>
<divclass="card-body"id="chat-container"></div>
<divclass="card-footer">
<textareastyle="width: 100%;"id="user-input"class="form-control"placeholder="Type your message..."></textarea>
<divstyle="display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;">
<buttonclass="btn btn-primary btn-send custom-btn"onclick="sendMessage()">Send</button>
<!-- "Provide feedback" button -->
<buttonclass="btn btn-secondary custom-btn"onclick="provideFeedback()">Provide Feedback</button>
</div>
</div>
</div>
<!-- Loading overlay -->
<div id="loading-overlay">
<divclass="loading-spinner"></div>
</div>
<script>
constchatContainer = document.getElementById('chat-container');
constuserInput = document.getElementById('user-input');
constchatIdValue = document.getElementById('chat-id-value');
constresponseTime = document.getElementById('response-time');
constloadingOverlay = document.getElementById('loading-overlay');
letstartTime;
// Function to handle the "Provide Feedback" button click
functionprovideFeedback() {
constformID = '1FAIpQLSego12kuc7zN1M6QaGb6kt10VktTP7i1tbOtqRqodeaR7CqRg';
// Construct the URL with the chatID parameter
constformURL = `https://docs.google.com/forms/d/e/${formID}/viewform?entry.867485306=${chatID}`;
// Open the Google Form in a new tab or window
window.open(formURL, '_blank');
}
functiongenerateUUID() {
return'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
constr = Math.random() * 16 | 0;
constv = c === 'x' ? r : (r & 0x3 | 0x8);
returnv.toString(16);
});
}
functionstartTimer() {
startTime = newDate();
}
functionstopTimer() {
constendTime = newDate();
consttimeDiff = endTime - startTime;
constseconds = Math.floor(timeDiff / 1000);
responseTime.textContent = `Response time: ${seconds} seconds`;
}
functionshowLoadingOverlay() {
loadingOverlay.style.display = 'flex';
}
functionhideLoadingOverlay() {
loadingOverlay.style.display = 'none';
}
// Retrieve chatID from sessionStorage or generate a new one
letchatID = sessionStorage.getItem('chatID');
if (!chatID) {
chatID = generateUUID();
sessionStorage.setItem('chatID', chatID);
}
// Display chatID at the top
chatIdValue.textContent = chatID;
functionappendMessage(sender, content) {
constmessageDiv = document.createElement('div');
messageDiv.innerHTML = `<strong>${sender}:</strong> ${content}`;
chatContainer.appendChild(messageDiv);
chatContainer.scrollTop = chatContainer.scrollHeight;
}
functionhandleEnterKey(event) {
if (event.key === 'Enter') {
sendMessage();
event.preventDefault(); // Prevent the default behavior of the Enter key (new line)
}
}
functionsendMessage() {
constuserMessage = userInput.value;
if (userMessage.trim() === '') {
return;
}
startTimer(); // Start the timer when the user clicks "Send"
showLoadingOverlay(); // Show the loading overlay
// Display the user's message in the chat interface
appendMessage('User', userMessage);
constapiUrl = 'http://prime-gpt.af-south-1.elasticbeanstalk.com/web';
// const apiUrl = 'http://localhost:8000/web'
constapiKey = '27690756-29e6-4e74-a155-90d13bd4e526';
fetch(apiUrl, {
method:'POST',
headers: {
'Content-Type':'application/json',
'X-API-Key':apiKey,
},
body:JSON.stringify({
sender:'User',
content:userMessage,
chat_id:chatID,
}),
})
.then(response => response.json())
.then(data => {
// Display the chatbot's response in the chat interface with preserved line breaks
constchatContainer = document.getElementById('chat-container');
chatContainer.innerHTML += `<p><strong>Chatbot:</strong> ${data.response_content.replace(/n/g, '<br>')}</p>`;
stopTimer(); // Stop the timer when a response is received
})
.catch(error => {
console.error('Error sending message:', error);
})
.finally(() => {
hideLoadingOverlay(); // Hide the loading overlay regardless of success or error
});
userInput.value = '';
}
userInput.addEventListener('keydown', handleEnterKey);
</script>
<!-- Add Bootstrap JS and Popper.js -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
