feat: Add autoscroll parameter to HTML component (#11747)

* feat: Add autoscroll parameter to HTML component

- Add autoscroll parameter to gr.HTML() component with default value True
- Implement auto-scroll functionality in frontend when content changes
- Add comprehensive tests for autoscroll parameter
- Include demo script showcasing the feature

Resolves: #7735

The autoscroll parameter allows users to control whether the HTML component
automatically scrolls to the bottom when content is updated, similar to
the existing autoscroll behavior in the Chatbot component.

Example usage:
  gr.HTML('content', autoscroll=False)  # Disable autoscroll
  gr.HTML('content', autoscroll=True)   # Enable autoscroll (default)

* add changeset

* test html

* fix

* changes

* autoscroll

* format

* changes

---------

Co-authored-by: gradio-pr-bot <[email protected]>
Co-authored-by: Abubakar Abid <[email protected]>

Author: 3 people

.changeset/better-ants-wash.md

@@ -0,0 +1,6 @@
+---
+"@gradio/html": minor
+"gradio": minor
+---
+
+feat:feat: Add autoscroll parameter to HTML component

demo/html_autoscroll/run.ipynb

@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: html_autoscroll"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import time\n", "\n", "def longer(val):\n", "    for i in range(10):\n", "        val = val + f\"<p>This is paragraph {i+1}.</p>\"\n", "        time.sleep(0.2)\n", "        yield val\n", "\n", "with gr.Blocks() as demo:\n", "    h = gr.HTML(value=\"<p>This is a paragraph 0.</p>\", max_height=200, autoscroll=True)\n", "    demo.load(longer, h, h)\n", "\n", "demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/html_autoscroll/run.py

@@ -0,0 +1,14 @@
+import gradio as gr
+import time
+
+def longer(val):
+    for i in range(10):
+        val = val + f"<p>This is paragraph {i+1}.</p>"
+        time.sleep(0.2)
+        yield val
+
+with gr.Blocks() as demo:
+    h = gr.HTML(value="<p>This is a paragraph 0.</p>", max_height=200, autoscroll=True)
+    demo.load(longer, h, h)
+
+demo.launch()

gradio/components/html.py

@@ -44,6 +44,7 @@ def __init__(
         max_height: int | None = None,
         container: bool = False,
         padding: bool = True,
+        autoscroll: bool = False,
     ):
         """
         Parameters:
@@ -62,10 +63,12 @@ def __init__(
             max_height: The maximum height of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. If content exceeds the height, the component will scroll.
             container: If True, the HTML component will be displayed in a container. Default is False.
             padding: If True, the HTML component will have a certain padding (set by the `--block-padding` CSS variable) in all directions. Default is True.
+            autoscroll: If True, will automatically scroll to the bottom of the component when the content changes, unless the user has scrolled up. If False, will not scroll to the bottom when the content changes.
         """
         self.min_height = min_height
         self.max_height = max_height
         self.padding = padding
+        self.autoscroll = autoscroll
         super().__init__(
             label=label,
             every=every,

js/html/Index.svelte

@@ -23,6 +23,7 @@
 	export let max_height: number | undefined = undefined;
 	export let container = false;
 	export let padding = true;
+	export let autoscroll = false;
 </script>
 
 <Block {visible} {elem_id} {elem_classes} {container} padding={false}>
@@ -50,6 +51,7 @@
 			{value}
 			{elem_classes}
 			{visible}
+			{autoscroll}
 			on:change={() => gradio.dispatch("change")}
 			on:click={() => gradio.dispatch("click")}
 		/>

js/html/shared/HTML.svelte

@@ -1,20 +1,86 @@
 <script lang="ts">
-	import { createEventDispatcher } from "svelte";
+	import { createEventDispatcher, onMount, tick } from "svelte";
 
 	export let elem_classes: string[] = [];
 	export let value: string;
 	export let visible = true;
+	export let autoscroll = false;
 
 	const dispatch = createEventDispatcher<{
 		change: undefined;
 		click: undefined;
 	}>();
 
+	let div: HTMLDivElement;
+	let scrollable_parent: HTMLElement | null = null;
+
+	function get_scrollable_parent(element: HTMLElement): HTMLElement | null {
+		let parent = element.parentElement;
+		while (parent) {
+			const style = window.getComputedStyle(parent);
+			if (
+				style.overflow === "auto" ||
+				style.overflow === "scroll" ||
+				style.overflowY === "auto" ||
+				style.overflowY === "scroll"
+			) {
+				return parent;
+			}
+			parent = parent.parentElement;
+		}
+		return null;
+	}
+
+	function is_at_bottom(): boolean {
+		if (!div) return true;
+		if (!scrollable_parent) {
+			return (
+				window.innerHeight + window.scrollY >=
+				document.documentElement.scrollHeight - 100
+			);
+		}
+		return (
+			scrollable_parent.offsetHeight + scrollable_parent.scrollTop >=
+			scrollable_parent.scrollHeight - 100
+		);
+	}
+
+	function scroll_to_bottom(): void {
+		if (!div) return;
+		if (scrollable_parent) {
+			scrollable_parent.scrollTo(0, scrollable_parent.scrollHeight);
+		} else {
+			window.scrollTo(0, document.documentElement.scrollHeight);
+		}
+	}
+
+	async function scroll_on_value_update(): Promise<void> {
+		if (!autoscroll || !div) return;
+		if (!scrollable_parent) {
+			scrollable_parent = get_scrollable_parent(div);
+		}
+		if (is_at_bottom()) {
+			await new Promise((resolve) => setTimeout(resolve, 300));
+			scroll_to_bottom();
+		}
+	}
+
+	onMount(() => {
+		if (autoscroll) {
+			scroll_to_bottom();
+		}
+		scroll_on_value_update();
+	});
+
 	$: value, dispatch("change");
+	$: if (value && autoscroll) {
+		scroll_on_value_update();
+	}
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
 <div
+	bind:this={div}
 	class="prose {elem_classes.join(' ')}"
 	class:hide={!visible}
 	on:click={() => dispatch("click")}

test/components/test_html.py

@@ -23,6 +23,7 @@ def test_component_functions(self):
             "max_height": None,
             "container": False,
             "padding": True,
+            "autoscroll": False,
         }
 
     def test_in_interface(self):