update

static/style.css

@@ -31,12 +31,7 @@ body, html {
     --input-bg: rgba(255, 255, 255, 0.85);
     --border-color: #444; /* Slightly softer black for a modern look */
     
-    background: linear-gradient(
-        to bottom, 
-        var(--gradient-start), 
-        var(--gradient-mid), 
-        var(--gradient-end)
-    ) !important;
+	background-image: linear-gradient(to right, #74ebd5 0%, #9face6 100%)!important;
     color: var(--text-color) !important;
 }
 /* Light Mode - Ensure theme toggle button is dark */
@@ -64,7 +59,7 @@ body, html {
     --input-bg: rgba(0,0,0,0.5);
     --border-color: #777;
     
-    background: linear-gradient(to right, var(--gradient-start), var(--gradient-mid), var(--gradient-end)) !important;
+    background-image: linear-gradient(to top, #09203f 0%, #537895 100%)!important;
     color: var(--text-color) !important;
 }
 .dark-mode .msg_container {
@@ -74,7 +69,7 @@ body, html {
 
 .dark-mode .msg_container_send {
     background-color: var(--msg-send-bg) !important;
-    color: #ffffff !important;
+    color: #000000 !important;
 }
 .dark-mode .type_msg::placeholder {
     color: rgba(255, 255, 255, 0.7) !important; /* Make it more readable */
@@ -135,12 +130,12 @@ body, html {
 
 /* Chat Container */
 .chat {
-    height: 85vh; /* Adjust as needed */
+    height: 90vh; /* Adjust as needed */
     max-height: 700px; /* Ensures it doesn't get too large */
 }
 .card {
-	height: calc(100% - 40px);
-	max-height: calc(100% - 40px);
+	height: calc(100% );
+	max-height: calc(100%);
 	overflow: hidden;
 	position: relative;
 	background-color: var(--card-bg) !important;
@@ -400,6 +395,10 @@ border-radius: 0 0 15px 15px !important;
 	background-color: var(--msg-send-bg);
 	padding: 10px;
 	border-radius: 25px;
+	margin-right:10px;
+	padding-left: 20px;
+	padding-right: 20px;
+	
 }
 .msg_time{
 	position: absolute;
@@ -469,5 +468,4 @@ border-radius: 0 0 15px 15px !important;
 	
 	.predefined-text a:hover {
 		text-decoration: underline;
-	}
-	
+	}

templates/chat.html

@@ -5,16 +5,14 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>JUIT AI Assist</title>
-    <link rel="shortcut icon" href="/static/juitlogo.png" type="image/x-icon">
+    <link rel="shortcut icon" href="/static/images/juitlogo.png" type="image/x-icon">
 
 
     <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); };
@@ -23,7 +21,7 @@
     <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}" />
 
     <style>
-       
+
     </style>
 
 </head>
@@ -36,9 +34,18 @@
                     <div class="card-header msg_head">
                         <div class="d-flex bd-highlight">
                             <div class="img_cont">
-                                <img src="/static/juitlogo.png" class="rounded-circle user_img">
+                                <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>
+
+                            </div>
                         </div>
                     </div>
 
@@ -48,12 +55,13 @@
                     <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>
@@ -61,18 +69,19 @@
                             </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>
@@ -82,242 +91,227 @@
                                 </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();
+        <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);
+                    $(".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>";
+                        });
+                        $(".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 Function
+                   ------------------- */
+                $("#clearChat").click(function () {
+                    $("#messageFormeight").html("");
+                    chatHistory = [];
+                    localStorage.removeItem("chatHistory");
+                    currentIndex = 0;
+                });
             });
+            </script>
+            
 
-            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"]
-                  
+        <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();
+                });
 
-                for (var tag in patterns) {
-                    patterns[tag].forEach(function(pattern) {
-                        if (pattern.toLowerCase().startsWith(input) && !predictions.includes(pattern)) {
-                            predictions.push(pattern);
-                        }
-                    });
+                function updateButton() {
+                    themeToggle.textContent = body.classList.contains("light-mode")
+                        ? "Switch to Dark Mode"
+                        : "Switch to Light Mode";
                 }
-                return predictions;
-            }
+            });
 
             function showPredictiveText(predictions) {
-                if (predictions.length > 0) {
-                    var html = "";
-                    predictions.forEach(function(prediction) {
-                        html += "<p>" + prediction + "</p>";
-                    });
+                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);
+            }
 
-            
-            // 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/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(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/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/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>';
-                    }
-                    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);
+            $(document).ready(function () {
+                $("#clearChat").click(function () {
+                    $("#messageFormeight").html(""); // Clears the chat area
+                    localStorage.removeItem("chatHistory"); // Clears stored history
                 });
-
-                event.preventDefault(); // Prevent form submission
             });
-        });
-    </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 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>
+
 </body>
 
 </html>