update

templates/chat.html

@@ -97,36 +97,32 @@
         </div>
 
         <script>
-            $(document).ready(function () {
-                // Retrieve chat history from localStorage, or initialize an empty array.
-                let chatHistory = JSON.parse(localStorage.getItem("chatHistory")) || [];
-                let currentIndex = chatHistory.length;
-            
-                /* -------------------
-                   Predictive Text Setup
-                   ------------------- */
-                $("#text").on("input", function () {
-                    const input = $(this).val().toLowerCase();
-                    const predictions = getPredictiveText(input);
+            $(document).ready(function() {
+                let chatHistory = []; // Stores the user's input history
+                let currentIndex = -1; // Tracks the current position in the history
+    
+                // Handle predictive text
+                $("#text").on("input", function() {
+                    var input = $(this).val().toLowerCase();
+                    var predictions = getPredictiveText(input);
                     showPredictiveText(predictions);
                 });
-            
-                $(document).on("click", ".predictive-text p", function () {
-                    const text = $(this).text();
+    
+                $(document).on("click", ".predictive-text p", function() {
+                    var text = $(this).text();
                     $("#text").val(text);
                     $(".predictive-text").hide();
                 });
-            
+    
                 function getPredictiveText(input) {
-                    const predictions = [];
-                    const patterns = {
+                    var predictions = [];
+                    var patterns = {
                         "greeting": ["Hi", "Hey", "How are you", "what's up", "Is anyone there?", "Hello", "Good day"],
                         "name": ["what is your name", "name", "what's your name", "who are you", "what should I call you"]
                     };
-            
-                    // Loop through each pattern group and add matching predictions.
-                    for (let tag in patterns) {
-                        patterns[tag].forEach(function (pattern) {
+    
+                    for (var tag in patterns) {
+                        patterns[tag].forEach(function(pattern) {
                             if (pattern.toLowerCase().startsWith(input) && !predictions.includes(pattern)) {
                                 predictions.push(pattern);
                             }
@@ -134,11 +130,11 @@
                     }
                     return predictions;
                 }
-            
+    
                 function showPredictiveText(predictions) {
                     if (predictions.length > 0) {
-                        let html = "";
-                        predictions.forEach(function (prediction) {
+                        var html = "";
+                        predictions.forEach(function(prediction) {
                             html += "<p>" + prediction + "</p>";
                         });
                         $(".predictive-text").html(html).show();
@@ -146,106 +142,207 @@
                         $(".predictive-text").hide();
                     }
                 }
-            
-                /* ------------------------------
-                   Message Submission and Response
-                   ------------------------------ */
-                $("#messageArea").on("submit", function (event) {
-                    event.preventDefault();
-                    $(".predictive-text").hide();
-            
-                    // Get current time for timestamp
+    
+                // Handle message submission and user input history
+                $("#messageArea").on("submit", function(event) {
+                    $(".predictive-text").hide(); // Hide predictive suggestions
+    
                     const date = new Date();
                     const hour = date.getHours().toString().padStart(2, '0');
                     const minute = date.getMinutes().toString().padStart(2, '0');
                     const str_time = hour + ":" + minute;
-            
-                    // Get and validate user input
-                    const rawText = $("#text").val().trim();
-                    if(rawText === "") return;
-            
-                    // Update chat history and store it
-                    chatHistory.push(rawText);
-                    localStorage.setItem("chatHistory", JSON.stringify(chatHistory));
-                    currentIndex = chatHistory.length;
-            
-                    // Build and append the user message
-                    const userHtml = `
-                        <div class="d-flex justify-content-end mb-4">
-                            <div class="msg_container_send">
-                                ${rawText}
-                                <span class="msg_time_send">${str_time}</span>
-                            </div>
-                            <div class="img_cont_msg">
-                                <img src="/static/images/user.png" class="rounded-circle user_img_msg">
-                            </div>
-                        </div>`;
-                    $("#messageFormeight").append(userHtml);
-                    $("#text").val("");
-                    $("#messageFormeight").animate({ scrollTop: $("#messageFormeight")[0].scrollHeight }, 500);
-            
-                    // Append a typing animation for the bot
-                    const typingHtml = `
-                        <div id="typingIndicator" class="d-flex justify-content-start mb-4">
-                            <div class="img_cont_msg">
-                                <img src="/static/images/juitlogo.png" class="rounded-circle user_img_msg">
-                            </div>
-                            <div class="msg_container typing-animation">
-                                <span>.</span><span>.</span><span>.</span>
-                            </div>
-                        </div>`;
-                    $("#messageFormeight").append(typingHtml);
-            
-                    // Send user message to server and process bot's response
-                    $.ajax({
-                        data: { msg: rawText },
-                        type: "POST",
-                        url: "/get"
-                    }).done(function (response) {
-                        // Delay to simulate typing before showing response
-                        setTimeout(function () {
-                            // Remove the typing animation
-                            $("#typingIndicator").remove();
-            
-                            // Append container for the bot's response
-                            const botHtmlContainer = `
-                                <div class="d-flex justify-content-start mb-4">
-                                    <div class="img_cont_msg">
-                                        <img src="/static/images/juitlogo.png" class="rounded-circle user_img_msg">
-                                    </div>
-                                    <div class="msg_container" id="botResponse"></div>
+    
+                    var rawText = $("#text").val();
+                    chatHistory.push(rawText); // Store the user's message in history
+                    currentIndex = chatHistory.length - 1; // Update the current index
+    
+                    var userHtml = `
+        <div class="d-flex justify-content-end mb-4">
+            <div class="msg_container_send">${rawText}
+                <span class="msg_time_send">${str_time}</span>
+            </div>
+            <div class="img_cont_msg">
+                <img src="/static/userlogo.png" class="rounded-circle user_img_msg">
+            </div>
+        </div>`;
+    
+                    $("#text").val(""); // Clear the input field
+                    $("#messageFormeight").append(userHtml); // Add the user message to the chat
+    
+                    $(document).ready(function () {
+                        let chatHistory = JSON.parse(localStorage.getItem("chatHistory")) || []; // Load stored history
+                        let currentIndex = chatHistory.length; // Set index to last message
+                    
+                        $("#messageArea").on("submit", function (event) {
+                            event.preventDefault(); // Prevent form submission
+                    
+                            let rawText = $("#text").val().trim();
+                            if (rawText === "") return; // Ignore empty input
+                    
+                            const time = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+                    
+                            // Append user message to chat
+                            let userHtml = `
+                                <div class="d-flex justify-content-end mb-4">
+                                    <div class="msg_container_send">${rawText}<span class="msg_time_send">${time}</span></div>
+                                    <div class="img_cont_msg"><img src="https://i.ibb.co/d5b84Xw/Untitled-design.png" class="rounded-circle user_img_msg"></div>
                                 </div>`;
-                            $("#messageFormeight").append(botHtmlContainer);
-            
-                            // Typewriter effect: append one character at a time.
-                            let index = 0;
-                            function typeWriter() {
-                                if (index < response.length) {
-                                    $("#botResponse").append(response.charAt(index));
-                                    index++;
-                                    setTimeout(typeWriter, 10); // adjust delay (50ms) for speed
-                                } else {
-                                    // After finishing, append timestamp and scroll to the bottom.
-                                    $("#botResponse").append(`<span class="msg_time">${str_time}</span>`);
-                                    $("#messageFormeight").animate({ scrollTop: $("#messageFormeight")[0].scrollHeight }, 500);
+                            $("#messageFormeight").append(userHtml);
+                    
+                            // Update chat history
+                            chatHistory.push(rawText);
+                            localStorage.setItem("chatHistory", JSON.stringify(chatHistory)); // Save in localStorage
+                            currentIndex = chatHistory.length; // Reset index to end
+                    
+                            // Clear input field & scroll down
+                            $("#text").val("");
+                            $("#messageFormeight").animate({ scrollTop: $("#messageFormeight")[0].scrollHeight }, 500);
+                    
+                            // Send message to server
+                            $.ajax({
+                                data: { msg: rawText },
+                                type: "POST",
+                                url: "/get",
+                            }).done(function (response) {
+                                // --- Typewriter effect for bot response START ---
+                                // Create the container for the bot message
+                                let botContainer = $(`
+        <div class="d-flex justify-content-start mb-4">
+            <div class="img_cont_msg">
+                <img src="/static/juitlogo.png" class="rounded-circle user_img_msg">
+            </div>
+            <div class="msg_container"></div>
+        </div>`);
+                                $("#messageFormeight").append(botContainer);
+                                
+                                let msgDiv = botContainer.find(".msg_container");
+                                let i = 0;
+                                function typeWriterInner() {
+                                    if (i < response.length) {
+                                        msgDiv.append(response.charAt(i));
+                                        i++;
+                                        setTimeout(typeWriterInner, 30);
+                                    } else {
+                                        msgDiv.append(`<span class="msg_time">${time}</span>`);
+                                        $("#messageFormeight").animate({ scrollTop: $("#messageFormeight")[0].scrollHeight }, 500);
+                                    }
                                 }
+                                typeWriterInner();
+                                // --- Typewriter effect for bot response END ---
+                            });
+                        });
+                    
+                        // Clear chat history
+                        $("#clearChat").click(function () {
+                            $("#messageFormeight").html(""); // Clears UI
+                            chatHistory = []; // Clears array
+                            localStorage.removeItem("chatHistory"); // Clears from storage
+                            currentIndex = 0;
+                        });
+                    });
+                    
+                    // Send the message to the server via AJAX
+                    $.ajax({
+                        data: {
+                            msg: rawText,
+                        },
+                        type: "POST",
+                        url: "/get",
+                    }).done(function(data) {
+                        // --- Typewriter effect for bot response START ---
+                        var lines = data.split("**");
+                        var fullText = lines.join(' ');
+                        // Create the container for the bot message
+                        var botContainer = $('<div class="d-flex justify-content-start mb-4"></div>');
+                        var imgDiv = $('<div class="img_cont_msg"><img src="/static/juitlogo.png" class="rounded-circle user_img_msg"></div>');
+                        var msgDiv = $('<div class="msg_container"></div>');
+                        botContainer.append(imgDiv);
+                        botContainer.append(msgDiv);
+                        $("#messageFormeight").append(botContainer);
+        
+                        var i = 0;
+                        function typeWriter() {
+                            if (i < fullText.length) {
+                                msgDiv.append(fullText.charAt(i));
+                                i++;
+                                setTimeout(typeWriter, 30); // Adjust delay as needed
+                            } else {
+                                msgDiv.append('<span class="msg_time">' + str_time + '</span>');
+                                // Smooth scroll to the bottom of the chat
+                                var container = $("#messageFormeight");
+                                container.animate({ scrollTop: container.prop("scrollHeight") }, 500);
                             }
-                            typeWriter();
-                        }, 1000);
+                        }
+                        typeWriter();
+                        // --- Typewriter effect for bot response END ---
                     });
+    
+                    event.preventDefault(); // Prevent form submission
                 });
+            });
+        </script>
+       
+        <script>
+            document.addEventListener("DOMContentLoaded", () => {
+                const themeToggle = document.getElementById("themeToggle");
+                const body = document.body;
             
-                /* -------------------
-                   Clear Chat Function
-                   ------------------- */
-                $("#clearChat").click(function () {
-                    $("#messageFormeight").html("");
-                    chatHistory = [];
-                    localStorage.removeItem("chatHistory");
-                    currentIndex = 0;
+                // Check local storage for a saved theme, default to dark
+                const savedTheme = localStorage.getItem("theme") || "dark";
+                if (savedTheme === "light") {
+                    body.classList.add("light-mode");
+                    body.classList.remove("dark-mode");
+                } else {
+                    body.classList.add("dark-mode");
+                    body.classList.remove("light-mode");
+                }
+            
+                updateButton(); // Update button text on load
+            
+                // Toggle theme on button click
+                themeToggle.addEventListener("click", () => {
+                    if (body.classList.contains("light-mode")) {
+                        // Switch to dark mode
+                        body.classList.remove("light-mode");
+                        body.classList.add("dark-mode");
+                        localStorage.setItem("theme", "dark");
+                    } else {
+                        // Switch to light mode
+                        body.classList.remove("dark-mode");
+                        body.classList.add("light-mode");
+                        localStorage.setItem("theme", "light");
+                    }
+                    updateButton();
+                });
+            
+                function updateButton() {
+                    themeToggle.textContent = body.classList.contains("light-mode")
+                        ? "Switch to Dark Mode"
+                        : "Switch to Light Mode";
+                }
+            });
+            
+            function showPredictiveText(predictions) {
+                if (predictions.length > 0 && $("#text").val().trim() !== "") {
+                    let html = predictions.map(p => `<p>${p}</p>`).join('');
+                    $(".predictive-text").html(html).show();
+                } else {
+                    $(".predictive-text").hide();
+                }
+            }
+            function scrollToBottom() {
+                $("#messageFormeight").animate({ scrollTop: $("#messageFormeight")[0].scrollHeight }, 500);
+            }
+                    
+            $(document).ready(function() {
+                $("#clearChat").click(function() {
+                    $("#messageFormeight").html(""); // Clears the chat area
+                    localStorage.removeItem("chatHistory"); // Clears stored history
                 });
             });
-            </script>
+            
+            
+        </script>
             
 
         <script>