|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> |
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"> |
|
<style> |
|
body { |
|
font-family: Arial, sans-serif; |
|
background-color: #eef1f5; |
|
margin: 0; |
|
padding: 20px; |
|
} |
|
#chat-container { |
|
max-width: 600px; |
|
margin: auto; |
|
padding: 20px; |
|
border-radius: 30px; |
|
background-color: #fff; |
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); |
|
} |
|
#chat-history { |
|
height: 400px; |
|
overflow-y: auto; |
|
margin-bottom: 10px; |
|
padding: 10px; |
|
background-color: #f9f9f9; |
|
border-radius: 20px; |
|
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1); |
|
} |
|
.message { |
|
position: relative; |
|
padding: 8px 12px; |
|
margin: 5px 0; |
|
border-radius: 20px; |
|
max-width: 70%; |
|
font-size: 0.85em; |
|
cursor: pointer; |
|
transition: background-color 0.3s; |
|
} |
|
.user-message { |
|
background: linear-gradient(135deg, #d1ecf1 0%, #a8d8e0 100%); |
|
color: #0c5460; |
|
margin-left: auto; |
|
} |
|
.bot-message { |
|
background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%); |
|
color: #721c24; |
|
margin-right: auto; |
|
} |
|
.user-icon, .bot-icon { |
|
margin-right: 8px; |
|
font-size: 1.1em; |
|
} |
|
#loading { |
|
display: none; |
|
margin: 10px 0; |
|
text-align: center; |
|
} |
|
#user-input { |
|
border: 1px solid #ccc; |
|
border-radius: 5px; |
|
} |
|
#user-input:focus { |
|
border-color: #007bff; |
|
outline: none; |
|
} |
|
.btn-icon { |
|
background-color: #007bff; |
|
color: white; |
|
} |
|
.btn-close { |
|
background-color: #dc3545; |
|
color: white; |
|
} |
|
.btn-close:hover { |
|
background-color: #c82333; |
|
} |
|
.typing-indicator { |
|
font-style: italic; |
|
color: #aaa; |
|
margin: 5px 0; |
|
} |
|
.timestamp { |
|
font-size: 0.75em; |
|
color: #aaa; |
|
display: none; |
|
margin-top: 5px; |
|
} |
|
</style> |
|
<title>Chat Interface</title> |
|
</head> |
|
<body> |
|
<div id="chat-container" class="rounded p-4 shadow"> |
|
<div id="chat-history" class="mb-3"></div> |
|
<div id="loading" class="spinner-border text-primary" role="status"> |
|
<span class="sr-only">Loading...</span> |
|
</div> |
|
<div class="input-group mb-2"> |
|
<input type="text" id="user-input" class="form-control" placeholder="Type your message..." aria-label="Message input"> |
|
<div class="input-group-append"> |
|
<button id="send-button" class="btn btn-icon" aria-label="Send message"> |
|
<i class="fas fa-paper-plane"></i> |
|
</button> |
|
<button id="close-button" class="btn btn-close" aria-label="Close chat"> |
|
<i class="fas fa-times"></i> |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
<script> |
|
let chatHistoryArray = []; |
|
|
|
document.getElementById("send-button").addEventListener("click", sendMessage); |
|
document.getElementById("user-input").addEventListener("keypress", function(event) { |
|
if (event.key === "Enter") { |
|
event.preventDefault(); |
|
sendMessage(); |
|
} |
|
}); |
|
|
|
document.getElementById("close-button").addEventListener("click", closeChat); |
|
|
|
async function sendMessage() { |
|
const input = document.getElementById("user-input"); |
|
const message = input.value.trim(); |
|
if (message === "") { |
|
return; |
|
} |
|
addMessage("User", message, "user-message"); |
|
chatHistoryArray.push({ sender: "User", message: message }); |
|
input.value = ""; |
|
|
|
|
|
document.getElementById("loading").style.display = "block"; |
|
showTypingIndicator(); |
|
|
|
try { |
|
const response = await fetch("/chat/", { |
|
method: "POST", |
|
headers: { |
|
"Content-Type": "application/json" |
|
}, |
|
body: JSON.stringify({ message }) |
|
}); |
|
if (!response.ok) { |
|
throw new Error(`HTTP error! Status: ${response.status}`); |
|
} |
|
const data = await response.json(); |
|
addMessage("Bot", data.response, "bot-message"); |
|
chatHistoryArray.push({ sender: "Bot", message: data.response }); |
|
} catch (error) { |
|
console.error('Error:', error); |
|
addMessage("Bot", "Sorry, something went wrong.", "bot-message"); |
|
} finally { |
|
|
|
document.getElementById("loading").style.display = "none"; |
|
hideTypingIndicator(); |
|
} |
|
} |
|
|
|
function addMessage(sender, message, className) { |
|
const chatHistory = document.getElementById("chat-history"); |
|
const messageElement = document.createElement("div"); |
|
messageElement.className = `message ${className}`; |
|
const icon = sender === "User" ? '<i class="fas fa-user user-icon"></i>' : '<i class="fas fa-robot bot-icon"></i>'; |
|
messageElement.innerHTML = `${icon}<div>${message} <span class="timestamp">${new Date().toLocaleTimeString()}</span></div>`; |
|
messageElement.onclick = function() { |
|
const timestamp = messageElement.querySelector('.timestamp'); |
|
timestamp.style.display = timestamp.style.display === 'none' ? 'block' : 'none'; |
|
}; |
|
chatHistory.appendChild(messageElement); |
|
chatHistory.scrollTop = chatHistory.scrollHeight; |
|
} |
|
|
|
function showTypingIndicator() { |
|
const typingElement = document.createElement("div"); |
|
typingElement.className = "typing-indicator"; |
|
typingElement.innerText = "Bot is typing..."; |
|
document.getElementById("chat-history").appendChild(typingElement); |
|
} |
|
|
|
function hideTypingIndicator() { |
|
const typingIndicator = document.querySelector(".typing-indicator"); |
|
if (typingIndicator) { |
|
typingIndicator.remove(); |
|
} |
|
} |
|
|
|
async function closeChat() { |
|
try { |
|
await fetch("/hist/", { |
|
method: "POST", |
|
headers: { |
|
"Content-Type": "application/json" |
|
}, |
|
body: JSON.stringify({ history: chatHistoryArray }) |
|
}); |
|
} catch (error) { |
|
console.error('Error sending chat history:', error); |
|
} finally { |
|
window.location.href = "https://redfernstech.com"; |
|
} |
|
} |
|
</script> |
|
</body> |
|
</html> |
