Update templates/chat.html

templates/chat.html

@@ -44,12 +44,16 @@
                                 <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 class="d-flex flex-column align-items-end ml-auto">
+                                <button id="themeToggle" class="btn btn-sm btn-light" style="position: static;">Light Mode</button>
+        
+                                <button id="clearChat" class="btn btn-danger btn-sm mt-2">Clear Chat</button>
+                              </div>
                         </div>
                     </div>
-
+                 
                     <div id="messageFormeight" class="card-body msg_card_body">
                         <!-- Chat messages will be displayed here -->
                     </div>
@@ -68,7 +72,7 @@
                                 </button>
                             </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">
@@ -101,30 +105,24 @@
         $(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)) {
@@ -134,7 +132,6 @@
                 }
                 return predictions;
             }
-
             function showPredictiveText(predictions) {
                 if (predictions.length > 0) {
                     var html = "";
@@ -146,21 +143,17 @@
                     $(".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}
@@ -170,10 +163,8 @@
             <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
@@ -216,7 +207,6 @@
         </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);
                         });
@@ -234,7 +224,6 @@
            
                 
               
-
                 // Send the message to the server via AJAX
                 $.ajax({
                     data: {
@@ -245,18 +234,15 @@
                 }).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>';
                     }
                     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);
                 });
-
                 event.preventDefault(); // Prevent form submission
             });
         });
@@ -296,20 +282,22 @@
             });
         
             function updateButton() {
-                themeToggle.textContent = body.classList.contains("light-mode")
-                    ? "Switch to Dark Mode"
-                    : "Switch to Light Mode";
+                if (body.classList.contains("light-mode")) {
+                    // Show sun icon when in light mode (indicating you can switch to dark)
+                    themeToggle.innerHTML = '<i class="fas fa-sun"></i> Dark Mode';
+                } else {
+                    // Show moon icon when in dark mode (indicating you can switch to light)
+                    themeToggle.innerHTML = '<i class="fas fa-moon"></i> 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() {