Update static/index.html

static/index.html

@@ -4,6 +4,7 @@
     <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;
@@ -15,38 +16,43 @@
             max-width: 600px;
             margin: auto;
             padding: 20px;
-            border-radius: 10px;
-            background-color: #f9f9f9;
-            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+            border-radius: 30px; /* Modern rounded corners */
+            background-color: #fff;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
         }
         #chat-history {
             height: 400px;
             overflow-y: auto;
             margin-bottom: 10px;
-            border: 1px solid #ddd;
-            background: white;
-            border-radius: 10px;
             padding: 10px;
+            background-color: #f9f9f9;
+            border-radius: 20px; /* Rounded corners for chat history */
+            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
         }
         .message {
-            margin: 5px 0;
-            padding: 10px;
-            border-radius: 10px;
             position: relative;
-            max-width: 80%;
+            padding: 8px 12px;
+            margin: 5px 0;
+            border-radius: 20px; /* Rounded corners for messages */
+            max-width: 70%;
+            font-size: 0.85em;
+            cursor: pointer;
+            transition: background-color 0.3s;
         }
         .user-message {
-            background-color: #d1ecf1;
-            border: 1px solid #bee5eb;
+            background: linear-gradient(135deg, #d1ecf1 0%, #a8d8e0 100%);
             color: #0c5460;
             margin-left: auto;
         }
         .bot-message {
-            background-color: #f8d7da;
-            border: 1px solid #f5c6cb;
+            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;
@@ -54,21 +60,33 @@
         }
         #user-input {
             border: 1px solid #ccc;
+            border-radius: 5px;
         }
         #user-input:focus {
             border-color: #007bff;
             outline: none;
         }
-        .btn-send {
+        .btn-icon {
             background-color: #007bff;
             color: white;
         }
-        .btn-send:hover {
-            background-color: #0056b3;
-            transform: scale(1.05);
+        .btn-close {
+            background-color: #dc3545;
+            color: white;
         }
-        .btn-send:active {
-            transform: scale(0.95);
+        .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; /* Hidden by default */
+            margin-top: 5px;
         }
     </style>
     <title>Chat Interface</title>
@@ -79,14 +97,21 @@
         <div id="loading" class="spinner-border text-primary" role="status">
             <span class="sr-only">Loading...</span>
         </div>
-        <div class="input-group">
+        <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-send" aria-label="Send message">Send</button>
+                <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") {
@@ -94,7 +119,9 @@
                 sendMessage();
             }
         });
-        
+
+        document.getElementById("close-button").addEventListener("click", closeChat);
+
         async function sendMessage() {
             const input = document.getElementById("user-input");
             const message = input.value.trim();
@@ -102,10 +129,12 @@
                 return;
             }
             addMessage("User", message, "user-message");
+            chatHistoryArray.push({ sender: "User", message: message });
             input.value = "";
 
             // Show loading spinner
             document.getElementById("loading").style.display = "block";
+            showTypingIndicator();
 
             try {
                 const response = await fetch("/chat/", {
@@ -120,23 +149,60 @@
                 }
                 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 {
                 // Hide loading spinner
                 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}`;
-            messageElement.innerHTML = `<strong>${sender}:</strong> ${message}`;
+            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>
+</html>