Update app.py

app.py

@@ -122,10 +122,29 @@ def render_message(history):
                 messages_html += f"<img src='{assistant_pic}' style='width: 40px; height: 40px; border-radius: 50%; margin-right: 10px;'>"
             messages_html += f"<span style='color: white;'>{assistant_message}</span></div><br>"
 
-    messages_html += "</div></div>"  # Close the messages and chatbox container
-    return messages_html
-
+    messages_html += """
+        </div>
+    </div>
+
+    <script>
+    let chatboxContainer = document.getElementById('chatbox-container');
+    let isScrolledToBottom = chatboxContainer.scrollTop + chatboxContainer.clientHeight === chatboxContainer.scrollHeight;
+
+    window.onload = function() {
+        if (isScrolledToBottom) {
+            chatboxContainer.scrollTop = chatboxContainer.scrollHeight;
+        }
+    };
+
+    window.onchange = function() {
+        if (isScrolledToBottom) {
+            chatboxContainer.scrollTop = chatboxContainer.scrollHeight;
+        }
+    };
+    </script>
+    """
 
+    return messages_html
 
 with gr.Blocks(css=".chatbox {height: 400px; overflow-y: auto; border: 1px solid #262626; padding: 10px; background-color: #171717;}") as demo: