Update templates/chat.html

templates/chat.html

@@ -220,9 +220,6 @@
                         currentIndex = 0;
                     });
                 });
-                
-           
-                
               
                 // Send the message to the server via AJAX
                 $.ajax({
@@ -232,18 +229,41 @@
                     type: "POST",
                     url: "/get",
                 }).done(function(data) {
+                    // --- Typewriter effect for bot response START ---
                     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>';
+                    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/images/juitlogo.png" class="rounded-circle user_img_msg"></div>');
+                    var msgDiv = $('<div class="msg_container"></div>');
+                    botContainer.append(imgDiv);
+                    botContainer.append(msgDiv);
+                    $("#messageFormeight").append(botContainer);
+
+                    var i = 0;
+
+                    function typeWriter() {
+                        if (i < fullText.length) {
+                            var charSpan = $('<span style="opacity: 0;">' + fullText.charAt(i) + '</span>'); 
+                            msgDiv.append(charSpan); // Append the character
+                            
+                            charSpan.animate({ opacity: 1 }, 150); // Fade-in effect
+
+                            i++;
+                            setTimeout(typeWriter, 15); // 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);
+                        }
                     }
-                    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);
+                    typeWriter();
+                    // --- Typewriter effect for bot response END ---
                 });
-                event.preventDefault(); // Prevent form submission
+                event.preventDefault();
             });
         });
     </script>