Update

templates/chat.html

@@ -5,10 +5,13 @@
     <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="#" />
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
-        integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
-        crossorigin="anonymous">
+    <link rel="shortcut icon" href="/static/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">
+
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"
         integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU"
         crossorigin="anonymous">
@@ -20,90 +23,7 @@
     <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}" />
 
     <style>
-        body, html {
-            height: 100%;
-            margin: 0;
-            background: rgb(44, 47, 59);
-            background: -webkit-linear-gradient(to right, rgb(40, 59, 34), rgb(54, 60, 70), rgb(32, 32, 43));
-            background: linear-gradient(to right, rgb(38, 51, 61), rgb(50, 55, 65), rgb(33, 33, 78));
-        }
-
-        .chat {
-            margin-top: auto;
-            margin-bottom: auto;
-            height: 80%;
-        }
-
-        .card {
-            height: calc(100% - 40px);
-            max-height: calc(100% - 40px);
-            overflow: hidden;
-            position: relative;
-        }
-
-        .msg_card_body {
-            overflow-y: auto;
-            max-height: calc(100% - 120px);
-        }
-
-        .predefined-text {
-            background-color: #1f2937;
-            color: #f3f4f6;
-            padding: 15px;
-            margin-bottom: 20px;
-            border-radius: 10px;
-            font-size: 18px;
-            text-align: center;
-            font-weight: bold;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-        }
-
-        .predictive-text {
-            position: absolute;
-            background-color: rgba(0, 0, 0, 0.7);
-            border: 1px solid #333;
-            border-radius: 10px;
-            padding: 5px;
-            z-index: 999;
-            cursor: pointer;
-            max-height: 150px;
-            overflow-y: auto;
-            width: calc(100% - 22px);
-            bottom: 65px;
-            left: 10px;
-            color: #fff;
-        }
-
-        .predictive-text p {
-            margin: 5px 0;
-            padding: 5px;
-            cursor: pointer;
-            transition: background-color 0.3s;
-            border-radius: 5px;
-        }
-
-        .predictive-text p:hover {
-            background-color: rgba(255, 255, 255, 0.2);
-        }
-
-        .predictive-text p:not(:last-child) {
-            border-bottom: 1px solid #555;
-        }
-
-        input[type="text"] {
-            white-space: normal;
-            overflow-wrap: break-word;
-            word-wrap: break-word;
-            width: 100%;
-            padding: 10px;
-            height: auto;
-        }
-
-        ::placeholder {
-            white-space: normal;
-            overflow-wrap: break-word;
-            word-wrap: break-word;
-        }
+       
     </style>
 
 </head>
@@ -116,15 +36,35 @@
                     <div class="card-header msg_head">
                         <div class="d-flex bd-highlight">
                             <div class="img_cont">
-                                <img src="https://i.ibb.co/jRMcPVs/snjb.jpg" class="rounded-circle user_img">
+                                <img src="/static/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">
-                                    Use keywords instead of full sentences. For example, if you want to ask about placement, type 'placement' for the best answers.
+                                    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>
+
                             </div>
                         </div>
                     </div>
@@ -133,16 +73,22 @@
                         <!-- Chat messages will be displayed here -->
                     </div>
                     <div class="card-footer" style="position: relative;">
-                        <form id="messageArea" class="input-group">
+                        <form id="messageArea" class="input-group" style="position: relative;">
+                            <!-- Predictive Text Suggestions (ADD THIS HERE) -->
+                            <div class="predictive-text" style="position: absolute; background: white; border: 1px solid #ccc; 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 />
                             <div class="input-group-append">
-                                <button type="submit" id="send" class="input-group-text send_btn"><i
-                                        class="fas fa-location-arrow"></i></button>
+                                <button type="submit" id="send" class="input-group-text send_btn">
+                                    <i class="fas fa-location-arrow"></i>
+                                </button>
                             </div>
                         </form>
-                        <div class="predictive-text"></div>
-                    </div>
+                        <button id="clearChat" class="btn btn-danger mt-2">Clear Chat</button>
+                        
+                      
+                    
                 </div>
             </div>
         </div>
@@ -170,160 +116,8 @@
                 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"],
-                    "tour":["virtual tour",
-        "campus tour","juit tour",
-        "how to see the campus",
-        "online campus tour",
-        "can I see the campus virtually",
-        "how to access the virtual tour",
-        "virtual campus tour","university virtual tour",
-        "college virtual tour",
-        "campus walkthrough",
-        "campus 3D tour",
-        "campus view online",
-        "JUIT virtual tour","JUIT virtual trip",
-        "virtual visit to JUIT",
-        "how to explore campus online",
-        "tour of JUIT campus"],
-        "Chandigarh Shimla Information": ["Chandigarh Shimla", "chandigarh", "shimla", "kalka",
-        "location of JUIT", 
-        "JUIT Waknaghat location", 
-        "distance from Chandigarh to JUIT", 
-        "distance from Shimla to JUIT", 
-        "how to reach JUIT from Chandigarh", 
-        "how to reach JUIT from Shimla","JUIT distance from Kalka", 
-    "JUIT road map", 
-    "JUIT location details", 
-    "JUIT distance from Waknaghat", 
-    "nearest railway station to JUIT", 
-    "nearest bus station to JUIT", 
-    "JUIT directions", 
-    "how to go to JUIT from Chandigarh", 
-    "how to go to JUIT from Shimla", "chandigarh to juit","Kalka to juit","shimla to juit",
-    "how to go to JUIT from kalka", "juit to chandigarh","juit to kalka","juit to shimla",
-    "transport to JUIT from Chandigarh", 
-    "JUIT from Shimla distance", 
-    "how to reach JUIT by road", "location","Juit location","location of juit",
-    "where is it located","where is juit", "where is the university",
-    "what is the location of the college","where is college"
-      ],
-      "btech_admission": [ "what is the process of admission",
-      "what is the admission process",
-      "How to take admission in your college",
-      "What is the process for admission",
-      "admission", "btech admission", "bachelors admission",
-      "how to get admission","btech admission",
-      "admission process","admission","juit admission"],
-
-      "phd_admission":["PhD",
-                    "PhD admission", "admission for PhD",
-                    "PhD admission rules", "rules for admission for PhD",
-                    "PhD admission eligibility", "PhD", "apply for PhD", "apply to PhD", 
-                    "PhD fellowship","fellowship for PhD",  "PhD stipend","stipend for PhD",
-                    "PhD eligibility", "admission PhD","Doctor of Philosophy",
-                    "How can I apply for a PhD at JUIT?",
-                    "What are the rules for PhD admission?",
-                    "What is the eligibility for a PhD program?",
-                    "Is there an entrance exam for PhD at JUIT?",
-                    "What is the duration of the PhD program?","PhD duration",
-                    "What is open defence in a PhD program?","PhD open defence",
-                    "What are the classifications of PhD scholars?",
-                    "Tell me about full-time PhD admission.",
-                    "Can I pursue a part-time PhD at JUIT?",
-                    "What is a sponsored research scholar?","part-time PhD","full-time PhD",
-                    "Where can I find the PhD entrance exam syllabus?", "PhD admission process",
-                    "PhD entrance exam",
-                    "PhD eligibility",
-                    "Apply for PhD",
-                    "PhD program duration",
-                    "What is the PhD fee structure?",
-                    "How much is the PhD stipend?",
-                    "Eligibility criteria for PhD",
-                    "What is the format of the PhD entrance test?",
-                    "Can I do a PhD part-time?",
-                    "PhD rules", "PhD in data science",
-                    "Admission for PhD", "PhD in data science admission",
-                    "PhD in machine learning admission",
-                    "PhD in computer science admission",
-                    "PhD in civil engineering admission",
-                    "PhD in information technology admission",
-                    "PhD in electrical engineering admission",
-                    "PhD in electronics admission",
-                    "PhD in ECE admission",
-                    "PhD in biotechnology admission",
-                    "PhD in bioinformatics admission",
-                    "What is the eligibility for PhD in data science?",
-                    "How to apply for PhD in machine learning?",
-                    "What is the process for PhD in computer science?",
-                    "Eligibility for PhD in civil engineering",
-                    "Requirements for PhD in IT",
-                    "What is the PhD admission process for electrical engineering?",
-                    "Can I apply for PhD in ECE at JUIT?",
-                    "Is there a specialization in biotechnology for PhD?",
-                    "Are there PhD programs for bioinformatics?",
-                    "PhD in data science eligibility",
-                    "PhD in machine learning eligibility",
-                    "PhD in civil engineering rules",
-                    "How to apply for PhD in electronics?",
-                    "PhD in CSE at JUIT",
-                    "PhD in computer science at JUIT",
-                    "PhD in information technology at JUIT",
-                    "What is the fee structure for PhD in data science?",
-                    "PhD in ECE duration",
-                    "Is there a stipend for PhD in electrical engineering?",
-                    "Can I get a fellowship for PhD in biotechnology?",
-                    "What is the admission deadline for PhD in bioinformatics?",
-                    "Where can I find the syllabus for PhD in machine learning?",
-                    "What is the format of the PhD entrance test for computer science?",
-                    "Eligibility for PhD in electronics and communication",
-                    "Duration of PhD in CSE at JUIT",
-                    "Can I apply for a part-time PhD in civil engineering?",
-                    "PhD program details for biotechnology",
-                    "What are the research opportunities for PhD in data science?",
-                    "Specializations for PhD in machine learning",
-                    "What is the workload for PhD in computer science?",
-                    "How to download the admission brochure for PhD in IT?",
-                    "PhD in electrical engineering admission details",
-                    "Research topics for PhD in bioinformatics",
-                    "What are the classifications of PhD in electronics?",
-                    "What are the steps for PhD admission?",
-                    "PhD application form","PhD application",
-                    "How can I apply for a PhD in (data science|machine learning|CSE|ml|ai|bt|bi|civil engineering|computer science|IT|information technology|bioinformatics|biotechnology|artificial intelligence|ECE|electronics|electrical engineering) at JUIT?",
-    "What are the rules for PhD admission in (data science|machine learning|CSE|ml|ai|bt|bi|civil engineering|computer science|IT|information technology|bioinformatics|biotechnology|artificial intelligence|ECE|electronics|electrical engineering)?",
-    "rules for PhD admission in (data science|machine learning|CSE|civil engineering|ml|ai|bt|bi|computer science|IT|information technology|bioinformatics|biotechnology|artificial intelligence|ECE|electronics|electrical engineering)?","PhD admission in (data science|machine learning|CSE|civil engineering|computer science|IT|information technology|bioinformatics|biotechnology|artificial intelligence|ECE|electronics|electrical engineering) rules",
-    "What is the eligibility for a PhD in (data science|machine learning|CSE|ml|ai|bt|bi|civil engineering|computer science|IT|information technology|bioinformatics|biotechnology|artificial intelligence|ECE|electronics|electrical engineering)?","eligibility for a PhD in (data science|machine learning|CSE|civil engineering|computer science|IT|information technology|bioinformatics|biotechnology|artificial intelligence|ECE|electronics|electrical engineering)?",
-    "PhD in (data science|machine learning|CSE|civil engineering|computer science|IT|bt|bi|ml|ai|information technology|bioinformatics|biotechnology|artificial intelligence|ECE|electronics|electrical engineering) eligibility",
-    "What is the duration of a PhD in (data science|machine learning|CSE|ml|ai|bt|bi|civil engineering|computer science|IT|information technology|bioinformatics|biotechnology|artificial intelligence|ECE|electronics|electrical engineering)?","PhD in (data science|machine learning|CSE|civil engineering|computer science|IT|information technology|bioinformatics|biotechnology|artificial intelligence|ECE|electronics|electrical engineering)","duration of a PhD in (data science|machine learning|CSE|civil engineering|computer science|IT|information technology|bioinformatics|biotechnology|artificial intelligence|ECE|electronics|electrical engineering) duration",
-    "What is the process for a PhD in (data science|machine learning|CSE|ml|ai|bt|bi|civil engineering|computer science|IT|information technology|bioinformatics|biotechnology|artificial intelligence|ECE|electronics|electrical engineering)","PhD in (data science|machine learning|CSE|civil engineering|computer science|IT|information technology|bioinformatics|biotechnology|artificial intelligence|ECE|electronics|electrical engineering)","process for a PhD in (data science|machine learning|CSE|civil engineering|computer science|IT|information technology|bioinformatics|biotechnology|artificial intelligence|ECE|electronics|electrical engineering) process",
-    "PhD admission process in (data science|machine learning|CSE|ml|ai|bt|bi|civil engineering|computer science|IT|information technology|bioinformatics|biotechnology|artificial intelligence|ECE|electronics|electrical engineering)",
-    "PhD eligibility for (data science|machine learning|CSE|ml|bt|bi|ai|civil engineering|computer science|IT|information technology|bioinformatics|biotechnology|artificial intelligence|ECE|electronics|electrical engineering)",
-    "Apply for PhD in (data science|machine learning|CSE|ml|ai|bt|bi|civil engineering|computer science|IT|information technology|bioinformatics|biotechnology|artificial intelligence|ECE|electronics|electrical engineering)",
-    "Is there an entrance exam for a PhD in (data science|ml|ai|bt|bi|machine learning|CSE|civil engineering|computer science|IT|information technology|bioinformatics|biotechnology|artificial intelligence|ECE|electronics|electrical engineering)?",
-    "What is the syllabus for the PhD entrance exam in (data science|machine learning|CSE|ml|bt|bi|ai|civil engineering|computer science|IT|information technology|bioinformatics|biotechnology|artificial intelligence|ECE|electronics|electrical engineering)?",
-    "PhD entrance exam in (data science|machine learning|CSE|civil engineering|computer science|bt|bi|IT|ml|ai|information technology|bioinformatics|biotechnology|artificial intelligence|ECE|electronics|electrical engineering) syllabus",
-                    "Are international students eligible for PhD?",
-                    "What is the process for PhD admission?",
-                    "PhD program details","PhD program",
-                    "What is the syllabus for the PhD entrance exam?","PhD entrance exam","PhD entrance exam syllabus",
-                    "Do I need a master's degree for a PhD?",
-                    "What is the selection process for PhD?","PhD election process","phd research",
-                    "What is the research proposal format for PhD?",
-                    "What are the deadlines for PhD admission?",
-                    "How can I apply online for PhD?","phd apply","phd online apply","apply for phd","online apply for phd",
-                    "Is there financial aid for PhD students?",
-                    "Can I apply for a PhD without GATE/NET?",
-                    "Where can I download the PhD guidelines?","PhD guidelines","guidelines for PhD",
-                    "What are the PhD specializations offered?",
-                    "PhD classifications at JUIT","PhD classifications","types of PhD","PhD types",
-                    "How are PhD scholars evaluated?",
-                    "Can I change my PhD supervisor?","PhD supervisor",
-                    "What is the maximum duration for a PhD?","how much time to complete PhD", "maximum duration of PhD",
-                    "Can I withdraw from the PhD program?", "PhD program withdraw","withdraw from PhD program",
-                    "PhD attendance requirements","PhD attendance",
-                    "PhD course work details","PhD course work","details of PhD course work",
-                    "Is teaching mandatory for PhD scholars?","PhD scholars? teaching"]
-
+                    "name": ["what is your name", "name", "what's your name", "who are you", "what should I call you"]
+                  
 
 
                 };
@@ -350,6 +144,7 @@
                 }
             }
 
+            
             // Handle message submission and user input history
             $("#messageArea").on("submit", function(event) {
                 $(".predictive-text").hide(); // Hide predictive suggestions
@@ -363,21 +158,79 @@
                 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_cotainer_send">' + rawText +
-                    '<span class="msg_time_send">' + str_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>';
+                var userHtml = `
+    <div class="d-flex justify-content-end mb-4">
+        <div class="msg_cotainer_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
 
-                // Handle up arrow key for cycling through messages
-                $(document).on("keydown", function(event) {
-                    if (event.key === "ArrowUp") {
-                        if (currentIndex > 0) {
-                            currentIndex--; // Move to the previous message
-                            $("#text").val(chatHistory[currentIndex]); // Update the input field with the previous message
-                        }
-                    }
+                $(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_cotainer_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_cotainer">${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({
@@ -388,7 +241,8 @@
                     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="https://i.ibb.co/jRMcPVs/snjb.jpg" class="rounded-circle user_img_msg"></div><div class="msg_cotainer">';
+                    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_cotainer">';
+
                     for (var i = 0; i < lines.length; i++) {
                         botHtml += '<div class="msg_cotainer">' + lines[i] + '</div>';
                     }
@@ -404,7 +258,58 @@
             });
         });
     </script>
+   
+    <script>
+        document.addEventListener("DOMContentLoaded", () => {
+            const themeToggle = document.getElementById("themeToggle");
+            if (!themeToggle) return; // Prevent errors if button is missing
+        
+            const body = document.body;
+        
+            // Check local storage for a saved theme, default to dark
+            const savedTheme = localStorage.getItem("theme") || "dark";
+            body.classList.toggle("light-mode", savedTheme === "light");
+        
+            updateButton(); // Update button text on load
+        
+            // Toggle theme on button click
+            themeToggle.addEventListener("click", () => {
+                body.classList.toggle("light-mode");
+                const newTheme = body.classList.contains("light-mode") ? "light" : "dark";
+                localStorage.setItem("theme", newTheme);
+                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>
+    
 </body>
 
 </html>