update

templates/chat.html

@@ -9,10 +9,12 @@
 
 
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
-        integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
+      integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
+      crossorigin="anonymous">
 
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"
-        integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
+        integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU"
+        crossorigin="anonymous">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
     <script>
         window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
@@ -21,7 +23,7 @@
     <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}" />
 
     <style>
-
+       
     </style>
 
 </head>
@@ -37,13 +39,31 @@
                                 <img src="/static/images/juitlogo.png" class="rounded-circle user_img">
                                 <span class="online_icon"></span>
                             </div>
-
+                            
                             <div class="user_info">
                                 <span>JUIT AI Assist</span>
                                 <p>Explore College and Beyond: Ask Anything! 🎓</p>
-
+                                <div class="predefined-text">
+                                    Created by  
+                                    Ramandeep Singh Makkar 
+                                    (<a href="https://www.linkedin.com/in/ramandeep-singh-makkar/" target="_blank">
+                                        <i class="fab fa-linkedin"></i> LinkedIn
+                                    </a>) 
+                                    (<a href="mailto:[email protected]">
+                                        <i class="fas fa-envelope"></i> Gmail
+                                    </a>) 
+                                    and  
+                                    Aditya Singh 
+                                    (<a href="https://www.linkedin.com/in/aditsg26/" target="_blank">
+                                        <i class="fab fa-linkedin"></i> LinkedIn
+                                    </a>) 
+                                    (<a href="mailto:[email protected]">
+                                        <i class="fas fa-envelope"></i> Gmail
+                                    </a>)
+                                </div>
+                            
                                 <!-- Add this inside the card-header (after user_info div) -->
-                                <button id="themeToggle" class="btn btn-sm btn-light ml-auto">Light Mode</button>
+<button id="themeToggle" class="btn btn-sm btn-light ml-auto">Light Mode</button>
 
                             </div>
                         </div>
@@ -55,13 +75,12 @@
                     <div class="card-footer" style="position: relative;">
                         <form id="messageArea" class="input-group" style="position: relative;">
                             <!-- Predictive Text Suggestions (ADD THIS HERE) -->
-                            <div class="predictive-text"
-                                style="position: absolute; display: none; z-index: 1000; width: 100%;"></div>
+                            <div class="predictive-text" style="position: absolute; display: none; z-index: 1000; width: 100%;"></div>
 
 
-
-                            <input type="text" id="text" name="msg" placeholder="Type your message..."
-                                autocomplete="off" class="form-control type_msg" required />
+                        
+                            <input type="text" id="text" name="msg" placeholder="Type your message..." autocomplete="off"
+                                class="form-control type_msg" required />
                             <div class="input-group-append">
                                 <button type="submit" id="send" class="input-group-text send_btn">
                                     <i class="fas fa-location-arrow"></i>
@@ -69,19 +88,18 @@
                             </div>
                         </form>
                         <button id="clearChat" class="btn btn-danger mt-2">Clear Chat</button>
-
+                        
                         <div class="card-footer text-center">
+                            <p class="mb-1">Created by</p>
                             <div class="d-flex justify-content-center align-items-center">
-                                <span class="mr-2">Developed by:</span>
                                 <span class="mr-2">Ramandeep Singh Makkar</span>
-                                <a href="https://www.linkedin.com/in/ramandeep-singh-makkar/" target="_blank"
-                                    class="mr-2">
+                                <a href="https://www.linkedin.com/in/ramandeep-singh-makkar/" target="_blank" class="mr-2">
                                     <i class="fab fa-linkedin"></i>
                                 </a>
                                 <a href="mailto:[email protected]" class="mr-3">
                                     <i class="fas fa-envelope"></i>
                                 </a>
-
+                        
                                 <span class="mr-2">Aditya Singh</span>
                                 <a href="https://www.linkedin.com/in/aditsg26/" target="_blank" class="mr-2">
                                     <i class="fab fa-linkedin"></i>
@@ -91,339 +109,242 @@
                                 </a>
                             </div>
                         </div>
-                    </div>
+                        
+                    
                 </div>
             </div>
         </div>
+    </div>
 
-        <script>
-            $(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() {
-                    var text = $(this).text();
-                    $("#text").val(text);
-                    $(".predictive-text").hide();
-                });
-    
-                function getPredictiveText(input) {
-                    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"]
-                    };
-    
-                    for (var tag in patterns) {
-                        patterns[tag].forEach(function(pattern) {
-                            if (pattern.toLowerCase().startsWith(input) && !predictions.includes(pattern)) {
-                                predictions.push(pattern);
-                            }
-                        });
-                    }
-                    return predictions;
-                }
-    
-                function showPredictiveText(predictions) {
-                    if (predictions.length > 0) {
-                        var html = "";
-                        predictions.forEach(function(prediction) {
-                            html += "<p>" + prediction + "</p>";
-                        });
-                        $(".predictive-text").html(html).show();
-                    } else {
-                        $(".predictive-text").hide();
-                    }
-                }
-    
-                // 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;
-    
-                    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/images/user.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(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 with HTML support START ---
-                                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) {
-                                        // Check if current character starts an HTML tag
-                                        if (response.charAt(i) === '<') {
-                                            let endTag = response.indexOf('>', i);
-                                            if (endTag !== -1) {
-                                                // Append the entire tag at once (so that HTML renders)
-                                                let tag = response.substring(i, endTag + 1);
-                                                msgDiv.append(tag);
-                                                i = endTag + 1;
-                                            } else {
-                                                // Fallback: append the single character if no closing '>' is found
-                                                msgDiv.append(response.charAt(i));
-                                                i++;
-                                            }
-                                        } else {
-                                            msgDiv.append(response.charAt(i));
-                                            i++;
-                                        }
-                                        setTimeout(typeWriterInner, 30); // Adjust delay as desired
-                                    } else {
-                                        msgDiv.append(`<span class="msg_time">${time}</span>`);
-                                        $("#messageFormeight").animate({ scrollTop: $("#messageFormeight")[0].scrollHeight }, 500);
-                                    }
-                                }
-                                typeWriterInner();
-                                // --- Typewriter effect for bot response with HTML support END ---
-                            });
+    <script>
+        $(document).ready(function() {
+            let chatHistory = []; // Stores the user's input history
+            let currentIndex = -1; // Tracks the current position in the history
 
-                        });
-                    
-                        // 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 with HTML support 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).append(msgDiv);
-                        $("#messageFormeight").append(botContainer);
-
-                        var i = 0;
-                        function typeWriter() {
-                            if (i < fullText.length) {
-                                if (fullText.charAt(i) === '<') {
-                                    var endTag = fullText.indexOf('>', i);
-                                    if (endTag !== -1) {
-                                        var tag = fullText.substring(i, endTag + 1);
-                                        msgDiv.append(tag);
-                                        i = endTag + 1;
-                                    } else {
-                                        msgDiv.append(fullText.charAt(i));
-                                        i++;
-                                    }
-                                } else {
-                                    msgDiv.append(fullText.charAt(i));
-                                    i++;
-                                }
-                                setTimeout(typeWriter, 30); // Adjust delay as needed
-                            } else {
-                                msgDiv.append('<span class="msg_time">' + str_time + '</span>');
-                                $("#messageFormeight").animate({ scrollTop: $("#messageFormeight")[0].scrollHeight }, 500);
-                            }
-                        }
-                        typeWriter();
-                        // --- Typewriter effect for bot response with HTML support END ---
-                    });
+            // Handle predictive text
+            $("#text").on("input", function() {
+                var input = $(this).val().toLowerCase();
+                var predictions = getPredictiveText(input);
+                showPredictiveText(predictions);
+            });
 
-    
-                    event.preventDefault(); // Prevent form submission
-                });
+            $(document).on("click", ".predictive-text p", function() {
+                var text = $(this).text();
+                $("#text").val(text);
+                $(".predictive-text").hide();
             });
-        </script>
-       
-        <script>
-            document.addEventListener("DOMContentLoaded", () => {
-                const themeToggle = document.getElementById("themeToggle");
-                const body = document.body;
-            
-                // 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 getPredictiveText(input) {
+                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"]
+                  
+
+
+                };
+
+                for (var tag in patterns) {
+                    patterns[tag].forEach(function(pattern) {
+                        if (pattern.toLowerCase().startsWith(input) && !predictions.includes(pattern)) {
+                            predictions.push(pattern);
+                        }
+                    });
                 }
-            });
-            
+                return predictions;
+            }
+
             function showPredictiveText(predictions) {
-                if (predictions.length > 0 && $("#text").val().trim() !== "") {
-                    let html = predictions.map(p => `<p>${p}</p>`).join('');
+                if (predictions.length > 0) {
+                    var html = "";
+                    predictions.forEach(function(prediction) {
+                        html += "<p>" + prediction + "</p>";
+                    });
                     $(".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>
+
             
+            // Handle message submission and user input history
+            $("#messageArea").on("submit", function(event) {
+                $(".predictive-text").hide(); // Hide predictive suggestions
 
-        <script>
-            document.addEventListener("DOMContentLoaded", () => {
-                const themeToggle = document.getElementById("themeToggle");
-                const body = document.body;
-                // 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");
+                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;
+
+                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/images/user.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(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) {
+                            let botHtml = `
+    <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">${response}<span class="msg_time">${time}</span></div>
+    </div>`;
+
+                            $("#messageFormeight").append($.parseHTML(botHtml));
+                            $("#messageFormeight").animate({ scrollTop: $("#messageFormeight")[0].scrollHeight }, 500);
+                        });
+                    });
+                
+                    // 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) {
+                    var lines = data.split("**");
+                    var botHtml = '<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">';
+
+                    for (var i = 0; i < lines.length; i++) {
+                        botHtml += '<div class="msg_container">' + lines[i] + '</div>';
                     }
-                    updateButton();
+                    botHtml += '<span class="msg_time">' + str_time + '</span></div></div>';
+                    $("#messageFormeight").append($.parseHTML(botHtml));
+
+                    // Smooth scroll to the bottom of the chat
+                    var container = $("#messageFormeight");
+                    container.animate({ scrollTop: container.prop("scrollHeight") }, 500);
                 });
-                function updateButton() {
-                    themeToggle.textContent = body.classList.contains("light-mode")
-                        ? "Switch to Dark Mode"
-                        : "Switch to Light Mode";
-                }
+
+                event.preventDefault(); // Prevent form submission
             });
-            function showPredictiveText(predictions) {
-                if (predictions.length > 0 && $("#text").val().trim() !== "") {
-                    let html = predictions.map(p => `<p>${p}</p>`).join('');
-                    $(".predictive-text").html(html).show();
+        });
+    </script>
+   
+    <script>
+        document.addEventListener("DOMContentLoaded", () => {
+            const themeToggle = document.getElementById("themeToggle");
+            const body = document.body;
+        
+            // 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 {
-                    $(".predictive-text").hide();
+                    // 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 scrollToBottom() {
-                $("#messageFormeight").animate({ scrollTop: $("#messageFormeight")[0].scrollHeight }, 500);
+        });
+        
+        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();
+
             }
-            $(document).ready(function () {
-                $("#clearChat").click(function () {
-                    $("#messageFormeight").html(""); // Clears the chat area
-                    localStorage.removeItem("chatHistory"); // Clears stored history
-                });
+        }
+        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>
+    
 </body>
 
 </html>