update

templates/chat.html

@@ -162,7 +162,7 @@
                 <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">
+                <img src="/static/images/user.png" class="rounded-circle user_img_msg">
             </div>
         </div>`;
     
@@ -204,32 +204,48 @@
                                 type: "POST",
                                 url: "/get",
                             }).done(function (response) {
-                                // --- Typewriter effect for bot response START ---
-                                // Create the container for the bot message
+                                // --- 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>`);
+                                    <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) {
-                                        msgDiv.append(response.charAt(i));
-                                        i++;
-                                        setTimeout(typeWriterInner, 30);
+                                        // 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 END ---
+                                // --- Typewriter effect for bot response with HTML support END ---
                             });
+
                         });
                     
                         // Clear chat history
@@ -243,39 +259,48 @@
                     
                     // Send the message to the server via AJAX
                     $.ajax({
-                        data: {
-                            msg: rawText,
-                        },
+                        data: { msg: rawText },
                         type: "POST",
                         url: "/get",
                     }).done(function(data) {
-                        // --- Typewriter effect for bot response START ---
+                        // --- 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);
-                        botContainer.append(msgDiv);
+                        botContainer.append(imgDiv).append(msgDiv);
                         $("#messageFormeight").append(botContainer);
-        
+
                         var i = 0;
                         function typeWriter() {
                             if (i < fullText.length) {
-                                msgDiv.append(fullText.charAt(i));
-                                i++;
+                                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>');
-                                // Smooth scroll to the bottom of the chat
-                                var container = $("#messageFormeight");
-                                container.animate({ scrollTop: container.prop("scrollHeight") }, 500);
+                                $("#messageFormeight").animate({ scrollTop: $("#messageFormeight")[0].scrollHeight }, 500);
                             }
                         }
                         typeWriter();
-                        // --- Typewriter effect for bot response END ---
+                        // --- Typewriter effect for bot response with HTML support END ---
                     });
+
     
                     event.preventDefault(); // Prevent form submission
                 });
@@ -349,7 +374,6 @@
             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") {
@@ -359,9 +383,7 @@
                     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")) {
@@ -377,36 +399,29 @@
                     }
                     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>