Update static/index.html

static/index.html

@@ -7,100 +7,129 @@
     <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;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background-color: #f4f7fb;
             margin: 0;
             padding: 0;
         }
+
         #chat-container {
             max-width: 500px;
-            position: relative;
             margin: auto;
-            padding: 20px;
-            border-radius: 30px;
-            background-color: #fafafa;
-            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+            padding: 25px;
+            border-radius: 15px;
+            background-color: #fff;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+            position: relative;
         }
+
         #chat-history {
-            height: 490px;
+            height: 400px;
             overflow-y: auto;
-            margin-bottom: 10px;
-            padding: 10px;
-            background-color: #f9f9f9;
-            background: linear-gradient(135deg, #f0f4ff 0%, #ffd1d1 100%);
-            border-radius: 20px;
-            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
+            padding: 15px;
+            background: linear-gradient(135deg, #f3f4f8 0%, #d3e0f0 100%);
+            border-radius: 15px;
+            box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
+            margin-bottom: 15px;
         }
+
         .message {
-            position: relative;
-            padding: 8px 12px;
-            margin: 5px 0;
+            padding: 12px 15px;
+            margin: 10px 0;
             border-radius: 20px;
-            max-width: 70%;
-            font-size: 0.85em;
+            font-size: 0.9em;
+            line-height: 1.4em;
+            position: relative;
             cursor: pointer;
             transition: background-color 0.3s;
         }
+
         .user-message {
-            background: linear-gradient(135deg, #d1ecf1 0%, #a8d8e0 100%);
-            color: #0c5460;
+            background: linear-gradient(135deg, #c9e6f5 0%, #91c9e6 100%);
+            color: #006c8e;
             margin-left: auto;
-            border-radius: 15px 15px 0 15px;
+            border-radius: 20px 20px 0 20px;
         }
+
         .bot-message {
-            background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
-            color: #721c24;
+            background: linear-gradient(135deg, #fce0e0 0%, #f9b2b2 100%);
+            color: #8b3e40;
             margin-right: auto;
-            border-radius: 15px 15px 15px 0;
+            border-radius: 20px 20px 20px 0;
         }
+
         .user-icon, .bot-icon {
-            margin-right: 8px;
-            font-size: 1.1em;
+            margin-right: 10px;
+            font-size: 1.2em;
         }
+
         #loading {
             display: none;
-            margin: 10px 0;
+            margin: 15px 0;
             text-align: center;
+            font-size: 1.2em;
         }
+
         #user-input {
-            border: 1px solid #ccc;
-            border-radius: 5px;
-            resize: none; /* Prevents resizing */
+            border: 1px solid #ddd;
+            border-radius: 8px;
+            resize: none;
+            padding: 12px;
+            font-size: 1em;
+            width: calc(100% - 48px);
         }
+
         #user-input:focus {
             border-color: #007bff;
             outline: none;
         }
-        .btn-icon {
+
+        .btn-send {
             background-color: #007bff;
             color: white;
+            border-radius: 8px;
+            padding: 10px 15px;
+            border: none;
+            cursor: pointer;
+            font-size: 1.1em;
+            transition: background-color 0.3s;
+        }
+
+        .btn-send:hover {
+            background-color: #0056b3;
         }
+
         .btn-close {
-            position: absolute; /* Keep it absolute within the chat container */
-            top: 10px; /* Adjust top position */
-            right: 10px; /* Adjust left position */
-            background-color: #dc3545; /* Red color for close button */
+            position: absolute;
+            top: 12px;
+            right: 12px;
+            background-color: #dc3545;
             color: white;
-            border: none; /* Remove border for a cleaner look */
-            border-radius: 50%; /* Round shape */
-            width: 30px; /* Set width */
-            height: 30px; /* Set height */
-            display: flex; /* Flexbox for centering icon */
-            align-items: center; /* Center vertically */
-            justify-content: center; /* Center horizontally */
-            transition: background-color 0.3s; /* Add transition for hover effect */
+            border: none;
+            border-radius: 50%;
+            width: 30px;
+            height: 30px;
+            font-size: 1.2em;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            transition: background-color 0.3s;
         }
+
         .btn-close:hover {
-            background-color: #c82333; /* Darker red on hover */
+            background-color: #c82333;
         }
+
         .typing-indicator {
             font-style: italic;
-            color: #aaa;
-            margin: 5px 0;
+            color: #888;
+            margin-top: 10px;
         }
+
         .timestamp {
             font-size: 0.75em;
-            color: #aaa;
+            color: #999;
             display: none;
             margin-top: 5px;
         }
@@ -110,138 +139,115 @@
 <body>
     <div id="chat-container" class="rounded p-4 shadow">
         <input type="hidden" id="user-id" value="{{ user_id }}">
-     <button type="hidden" id="close-button" class="btn btn-close" aria-label="Close chat" hidden>
-            <i class="fas fa-arrow-left"></i>
+        <button type="button" id="close-button" class="btn-close" aria-label="Close chat">
+            <i class="fas fa-times"></i>
         </button>
         <div id="chat-history" class="mb-3"></div>
         <div class="input-group mb-2">
             <textarea id="user-input" class="form-control" rows="2" placeholder="Type your message..." aria-label="Message input"></textarea>
             <div class="input-group-append">
-                <button id="send-button" class="btn btn-icon" aria-label="Send message">
+                <button id="send-button" class="btn-send" aria-label="Send message">
                     <i class="fas fa-paper-plane"></i>
                 </button>
             </div>
         </div>
         <small class="form-text text-muted">Press Shift + Enter for a new line</small>
-    </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.shiftKey) { // Only send if Enter is pressed without Shift
-                event.preventDefault(); // Prevent default newline behavior
+            if (event.key === "Enter" && !event.shiftKey) {
+                event.preventDefault();
                 sendMessage();
             }
         });
         document.getElementById("close-button").addEventListener("click", closeChat);
-        
-       window.addEventListener('DOMContentLoaded', () => {
-    sendInitialBotMessage(); // Trigger initial message when chatbot opens
-});
-
-function sendInitialBotMessage() {
-    const userId = document.getElementById("user-id").value;
-    const initialMessage = "Hello! How can I assist you today?"; // Initial bot message
-
-    addMessage("Bot", initialMessage, "bot-message"); // Display the initial bot message
-    chatHistoryArray.push({ userId, sender: "Bot", message: initialMessage }); // Save to chat history
-}
-
-async function sendMessage() {
-    const input = document.getElementById("user-input");
-    const userId = document.getElementById("user-id").value;
-    const message = input.value.trim();
-    if (message === "") {
-        return;
-    }
-    addMessage("User", message, "user-message");
-    chatHistoryArray.push({ userId, sender: "User", message });
-    input.value = "";
-    showTypingIndicator();
-    try {
-        const response = await fetch("/chat/", {
-            method: "POST",
-            headers: {
-                "Content-Type": "application/json"
-            },
-            body: JSON.stringify({ message })
+
+        window.addEventListener('DOMContentLoaded', () => {
+            sendInitialBotMessage();
         });
-        if (!response.ok) {
-            throw new Error(`HTTP error! Status: ${response.status}`);
-        }
-        const data = await response.json();
-        addMessage("Bot", data.response, "bot-message");
-        chatHistoryArray.push({ userId, sender: "Bot", message: data.response });
-    } catch (error) {
-        console.error('Error:', error);
-        addMessage("Bot", "Sorry, something went wrong.", "bot-message");
-    } finally {
-        hideTypingIndicator();
-    }
-}
+
+        function sendInitialBotMessage() {
+            const userId = document.getElementById("user-id").value;
+            const initialMessage = "Hello! How can I assist you today?";
+            addMessage("Bot", initialMessage, "bot-message");
+            chatHistoryArray.push({ userId, sender: "Bot", message: initialMessage });
+        }
+
+        async function sendMessage() {
+            const input = document.getElementById("user-input");
+            const userId = document.getElementById("user-id").value;
+            const message = input.value.trim();
+            if (message === "") return;
+            addMessage("User", message, "user-message");
+            chatHistoryArray.push({ userId, sender: "User", message });
+            input.value = "";
+            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({ userId, sender: "Bot", message: data.response });
+            } catch (error) {
+                console.error('Error:', error);
+                addMessage("Bot", "Sorry, something went wrong.", "bot-message");
+            } finally {
+                hideTypingIndicator();
+            }
+        }
+
         async function closeChat() {
             const userId = document.getElementById("user-id").value;
             try {
                 await fetch("/hist/", {
                     method: "POST",
-                    headers: {
-                        "Content-Type": "application/json"
-                    },
+                    headers: { "Content-Type": "application/json" },
                     body: JSON.stringify({ history: chatHistoryArray, userId })
                 });
             } catch (error) {
                 console.error('Error sending chat history on close:', error);
             } finally {
-                 window.history.back();
+                window.top.location.href = 'https://redfernstech.com/';
             }
         }
+
         function addMessage(sender, message, className) {
-    const chatHistory = document.getElementById("chat-history");
-    const messageElement = document.createElement("div");
-    messageElement.className = `message ${className}`;
-    // Check if the message contains a URL
-    const linkRegex = /(https?:\/\/[^\s]+)/g;
-    const formattedMessage = message.replace(linkRegex, function(url) {
-        let linkText;
-        if (url === "https://appexchange.salesforce.com/appxListingDetail?listingId=cf4b19d4-8667-49f7-83b0-d2bc4032527b") {
-            linkText = "Click here";
-        } else if (url === "https://appexchange.salesforce.com/appxListingDetail?listingId=e671f4fe-92fb-4760-99e5-7a5df5754cfe") {
-            linkText = "Click here";
-        } else if (url === "https://appexchange.salesforce.com/appxListingDetail?listingId=3473ffd3-d530-462f-828f-d2c69f80d89d") {
-            linkText = "Click here";
-        } else if (url === "https://appexchange.salesforce.com/appxListingDetail?listingId=6d605bd9-de3c-49d3-9fa4-ec3caabd5d63") {
-            linkText = "Click here";
-        } else if (url === "https://redfernstech.com/careers/") {
-            linkText = "Click here";
-        } else {
-            linkText = "Visit this link."; // Fallback for other URLs
-        }
-        return `<a href="${url}" target="_blank">${linkText}</a>`;
-    });
-    messageElement.innerHTML = `<span class="${sender.toLowerCase()}-icon">
-        ${sender === "User" ? '<i class="fas fa-user"></i>' : '<img src="https://i.ibb.co/khk6Ywx/bot.jpg" alt="Bot" style="width: 20px; height: 20px; border-radius: 50%;">'}
-    </span>${formattedMessage}<div class="timestamp">${new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</div>`;
-    chatHistory.appendChild(messageElement);
-    chatHistory.scrollTop = chatHistory.scrollHeight; // Scroll to bottom
-}
-
-        
+            const chatHistory = document.getElementById("chat-history");
+            const messageElement = document.createElement("div");
+            messageElement.className = `message ${className}`;
+            const linkRegex = /(https?:\/\/[^\s]+)/g;
+            const formattedMessage = message.replace(linkRegex, function(url) {
+                let linkText = url.includes("salesforce") ? "Click here" : "Visit this link.";
+                return `<a href="${url}" target="_blank">${linkText}</a>`;
+            });
+            messageElement.innerHTML = `<span class="${sender.toLowerCase()}-icon">
+                ${sender === "User" ? '<i class="fas fa-user"></i>' : '<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTa1q4s76cKilDcBElngWUNlMagmp18HjhF5A&s" alt="Bot" style="width: 20px; height: 20px; border-radius: 50%;">'}
+            </span>${formattedMessage}<div class="timestamp">${new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</div>`;
+            chatHistory.appendChild(messageElement);
+            chatHistory.scrollTop = chatHistory.scrollHeight;
+        }
+
         function showTypingIndicator() {
             const chatHistory = document.getElementById("chat-history");
             const typingIndicator = document.createElement("div");
             typingIndicator.className = "typing-indicator";
             typingIndicator.id = "typing-indicator";
-            typingIndicator.innerText = "Clara is typing...";
+            typingIndicator.innerText = "Bot is typing...";
             chatHistory.appendChild(typingIndicator);
-            chatHistory.scrollTop = chatHistory.scrollHeight; 
+            chatHistory.scrollTop = chatHistory.scrollHeight;
         }
-        
+
         function hideTypingIndicator() {
             const typingIndicator = document.getElementById("typing-indicator");
-            if (typingIndicator) {
-                typingIndicator.remove();
-            }
+            if (typingIndicator) typingIndicator.remove();
         }
     </script>
 </body>
-</html>
+</html>