nonsense

static/style.css

@@ -64,7 +64,7 @@ body, html {
 }
 .dark-mode .msg_container {
     background-color: var(--msg-bg) !important;
-    color: #ffffff !important; /* Ensure text is visible */
+    color: #000000 !important; /* Ensure text is visible */
 }
 
 .dark-mode .msg_container_send {

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,12 @@
                                 <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>
-
                                 <!-- 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 +56,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 +69,18 @@
                             </div>
                         </form>
                         <button id="clearChat" class="btn btn-danger mt-2">Clear Chat</button>
-
+                        
                         <div class="card-footer text-center">
                             <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,227 +90,222 @@
                                 </a>
                             </div>
                         </div>
-                    </div>
+                        
+                    
                 </div>
             </div>
         </div>
+    </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);
-                    showPredictiveText(predictions);
-                });
-            
-                $(document).on("click", ".predictive-text p", function () {
-                    const text = $(this).text();
-                    $("#text").val(text);
+    <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();
-                });
-            
-                function getPredictiveText(input) {
-                    const predictions = [];
-                    const 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) {
-                            if (pattern.toLowerCase().startsWith(input) && !predictions.includes(pattern)) {
-                                predictions.push(pattern);
-                            }
-                        });
-                    }
-                    return predictions;
                 }
+            }
             
-                function showPredictiveText(predictions) {
-                    if (predictions.length > 0) {
-                        let html = "";
-                        predictions.forEach(function (prediction) {
-                            html += "<p>" + prediction + "</p>";
+            // 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) {
+                            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);
                         });
-                        $(".predictive-text").html(html).show();
-                    } else {
-                        $(".predictive-text").hide();
-                    }
-                }
-            
-                /* ------------------------------
-                   Message Submission and Response
-                   ------------------------------ */
-                $("#messageArea").on("submit", function (event) {
-                    event.preventDefault();
-                    $(".predictive-text").hide();
-            
-                    // Get current time for timestamp
-                    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>
-                                </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);
-                                }
-                            }
-                            typeWriter();
-                        }, 1000);
+                    });
+                
+                    // Clear chat history
+                    $("#clearChat").click(function () {
+                        $("#messageFormeight").html(""); // Clears UI
+                        chatHistory = []; // Clears array
+                        localStorage.removeItem("chatHistory"); // Clears from storage
+                        currentIndex = 0;
                     });
                 });
-            
-                /* -------------------
-                   Clear Chat Function
-                   ------------------- */
-                $("#clearChat").click(function () {
-                    $("#messageFormeight").html("");
-                    chatHistory = [];
-                    localStorage.removeItem("chatHistory");
-                    currentIndex = 0;
-                });
-            });
-            </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");
+                
+           
+                
+              
+                // 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>