fix autoscroll (#1570)

* fix autoscroll

* fix formatting

Co-authored-by: Ali Abid <aabid94@gmail.com>

gradio/blocks.py

@@ -566,7 +566,7 @@ class Blocks(BlockContext):
     def get_config_file(self):
         config = {
             "version": routes.VERSION,
-            "mode": "blocks",
+            "mode": self.mode,
             "dev_mode": self.dev_mode,
             "components": [],
             "theme": self.theme,

ui/packages/app/src/Blocks.svelte

@@ -2,7 +2,7 @@
 	import type { SvelteComponentTyped } from "svelte";
 	import { onMount } from "svelte";
 	import { component_map } from "./components/directory";
-	import { loading_status } from "./stores";
+	import { loading_status, app_state } from "./stores";
 	import type { LoadingStatus } from "./components/StatusTracker/types";
 
 	import { _ } from "svelte-i18n";
@@ -66,6 +66,9 @@
 	export let css: string;
 	export let is_space: boolean;
 	export let id: number = 0;
+	export let autoscroll: boolean = false;
+
+	$: app_state.update((s) => ({ ...s, autoscroll }));
 
 	let rootNode: Component = { id: layout.id, type: "column", props: {} };
 	components.push(rootNode);
@@ -338,6 +341,7 @@
 			let dependency = dependencies[loading_status.fn_index];
 			loading_status.scroll_to_output = dependency.scroll_to_output;
 			loading_status.visible = dependency.show_progress;
+
 			set_prop(instance_map[id], "loading_status", loading_status);
 		}
 		const inputs_to_update = loading_status.get_inputs_to_update();

ui/packages/app/src/components/StatusTracker/StatusTracker.svelte

@@ -5,8 +5,14 @@
 
 	let called = false;
 
-	async function scroll_into_view(el: HTMLDivElement) {
-		if (window.__gradio_mode__ === "website") {
+	async function scroll_into_view(
+		el: HTMLDivElement,
+		enable: boolean | null = true
+	) {
+		if (
+			window.__gradio_mode__ === "website" ||
+			(window.__gradio_mode__ !== "app" && enable !== true)
+		) {
 			return;
 		}
 
@@ -39,6 +45,7 @@
 
 <script lang="ts">
 	import { onDestroy, onMount } from "svelte";
+	import { app_state } from "../../stores";
 	import Loader from "./Loader.svelte";
 
 	export let eta: number | null = null;
@@ -104,7 +111,7 @@
 	$: el &&
 		scroll_to_output &&
 		(status === "pending" || status === "complete") &&
-		scroll_into_view(el);
+		scroll_into_view(el, $app_state.autoscroll);
 
 	$: formatted_eta = eta && (eta * ((initial_queue_pos || 0) + 1)).toFixed(1);
 	$: formatted_timer = timer_diff.toFixed(1);

ui/packages/app/src/main.ts

@@ -161,7 +161,8 @@ function mount_app(
 	config: Config,
 	target: HTMLElement | ShadowRoot | false,
 	wrapper: HTMLDivElement,
-	id: number
+	id: number,
+	autoscroll?: Boolean
 ) {
 	if (config.detail === "Not authenticated" || config.auth_required) {
 		const app = new Login({
@@ -176,7 +177,7 @@ function mount_app(
 		const app = new Blocks({
 			target: wrapper,
 			//@ts-ignore
-			props: { ...config, target: wrapper, id }
+			props: { ...config, target: wrapper, id, autoscroll: autoscroll }
 		});
 	}
 
@@ -239,10 +240,14 @@ function create_custom_element() {
 
 			const space = this.getAttribute("space");
 			const initial_height = this.getAttribute("initial_height");
+			let autoscroll = this.getAttribute("autoscroll");
+
+			const _autoscroll = autoscroll === "true" ? true : false;
+
 			this.wrapper.style.minHeight = initial_height || "300px";
 
 			const config = await handle_config(this.root, space);
-			mount_app(config, this.root, this.wrapper, this._id);
+			mount_app(config, this.root, this.wrapper, this._id, _autoscroll);
 		}
 	}
 
@@ -263,7 +268,6 @@ async function unscoped_mount() {
 	});
 
 	const config = await handle_config(target, null);
-
 	mount_app(config, false, target, 0);
 }
 

ui/packages/app/src/stores.ts

@@ -117,3 +117,4 @@ function create_loading_status_store() {
 }
 
 export const loading_status = create_loading_status_store();
+export const app_state = writable({ autoscroll: false });