gradio-app · pngwn · Sep 19, 2023 · Sep 19, 2023 · Sep 19, 2023 · Sep 19, 2023
diff --git a/.changeset/cold-lemons-roll.md b/.changeset/cold-lemons-roll.md
@@ -0,0 +1,33 @@
+---
+"@gradio/accordion": minor
+"@gradio/annotatedimage": minor
+"@gradio/app": minor
+"@gradio/audio": minor
+"@gradio/chatbot": minor
+"@gradio/checkbox": minor
+"@gradio/checkboxgroup": minor
+"@gradio/code": minor
+"@gradio/colorpicker": minor
+"@gradio/dataframe": minor
+"@gradio/dropdown": minor
+"@gradio/fallback": minor
+"@gradio/file": minor
+"@gradio/gallery": minor
+"@gradio/highlightedtext": minor
+"@gradio/html": minor
+"@gradio/image": minor
+"@gradio/json": minor
+"@gradio/label": minor
+"@gradio/markdown": minor
+"@gradio/model3d": minor
+"@gradio/number": minor
+"@gradio/plot": minor
+"@gradio/radio": minor
+"@gradio/slider": minor
+"@gradio/statustracker": minor
+"@gradio/textbox": minor
+"@gradio/video": minor
+"gradio": minor
+---
+
+feat:fix build and broken imports
diff --git a/js/accordion/static/StaticAccordion.svelte b/js/accordion/static/StaticAccordion.svelte
@@ -17,7 +17,11 @@
 </script>
 
 <Block {elem_id} {elem_classes} {visible}>
-	<StatusTracker i18n={gradio.i18n} {...loading_status} />
+	<StatusTracker
+		autoscroll={gradio.autoscroll}
+		i18n={gradio.i18n}
+		{...loading_status}
+	/>
 
 	<Accordion {label} {open}>
 		<Column>

diff --git a/js/annotatedimage/static/AnnotatedImage.svelte b/js/annotatedimage/static/AnnotatedImage.svelte
@@ -84,7 +84,11 @@
 	{scale}
 	{min_width}
 >
-	<StatusTracker i18n={gradio.i18n} {...loading_status} />
+	<StatusTracker
+		autoscroll={gradio.autoscroll}
+		i18n={gradio.i18n}
+		{...loading_status}
+	/>
 	<BlockLabel
 		{show_label}
 		Icon={Image}

diff --git a/js/app/src/Blocks.svelte b/js/app/src/Blocks.svelte
@@ -7,7 +7,7 @@
 		component_map,
 		fallback_component_map
 	} from "./components/directory";
-	import { create_loading_status_store, app_state } from "./stores";
+	import { create_loading_status_store } from "./stores";
 	import type { LoadingStatusCollection } from "./stores";
 
 	import type {
@@ -48,8 +48,6 @@
 
 	let loading_status = create_loading_status_store();
 
-	$: app_state.update((s) => ({ ...s, autoscroll }));
-
 	let rootNode: ComponentMeta = {
 		id: layout.id,
 		type: "column",
@@ -744,6 +742,7 @@
 				on:mount={handle_mount}
 				on:destroy={({ detail }) => handle_destroy(detail)}
 				{version}
+				{autoscroll}
 			/>
 		{/if}
 	</div>

diff --git a/js/app/src/Index.svelte b/js/app/src/Index.svelte
@@ -335,6 +335,7 @@
 			translucent={true}
 			{loading_text}
 			i18n={$_}
+			{autoscroll}
 		>
 			<!-- todo: translate message text -->
 			<div class="error" slot="error">

diff --git a/js/app/src/MountComponents.svelte b/js/app/src/MountComponents.svelte
@@ -9,6 +9,7 @@
 	export let target: any;
 	export let theme_mode: any;
 	export let version: any;
+	export let autoscroll: boolean;
 
 	const dispatch = createEventDispatcher<{ mount: never }>();
 	onMount(() => {
@@ -27,4 +28,5 @@
 	{target}
 	{theme_mode}
 	{version}
+	{autoscroll}
 />
diff --git a/js/app/src/Render.svelte b/js/app/src/Render.svelte
@@ -17,6 +17,7 @@
 	export let target: HTMLElement;
 	export let theme_mode: ThemeMode;
 	export let version: string;
+	export let autoscroll: boolean;
 
 	const dispatch = createEventDispatcher<{ mount: number; destroy: number }>();
 	let filtered_children: ComponentMeta[] = [];
@@ -77,7 +78,7 @@
 	{...props}
 	{theme_mode}
 	{root}
-	gradio={new Gradio(id, target, theme_mode, version, root)}
+	gradio={new Gradio(id, target, theme_mode, version, root, autoscroll)}
 >
 	{#if children && children.length}
 		{#each children as { component, id: each_id, props, children: _children, has_modes } (each_id)}

diff --git a/js/app/src/gradio_helper.ts b/js/app/src/gradio_helper.ts
@@ -11,20 +11,23 @@ export class Gradio<T extends Record<string, any> = Record<string, any>> {
 	i18n: typeof x;
 	#el: HTMLElement;
 	root: string;
+	autoscroll: boolean;
 
 	constructor(
 		id: number,
 		el: HTMLElement,
 		theme: string,
 		version: string,
-		root: string
+		root: string,
+		autoscroll: boolean
 	) {
 		this.#id = id;
 		this.theme = theme;
 		this.version = version;
 		this.#el = el;
 		this.i18n = get(format);
 		this.root = root;
+		this.autoscroll = autoscroll;
 	}
 
 	dispatch<E extends keyof T>(event_name: E, data?: T[E]): void {

diff --git a/js/app/src/stores.ts b/js/app/src/stores.ts
@@ -163,4 +163,3 @@ export function create_loading_status_store(): LoadingStatusStore {
 }
 
 export type LoadingStatusType = ReturnType<typeof create_loading_status_store>;
-export const app_state = writable({ autoscroll: false });
diff --git a/js/audio/interactive/InteractiveAudio.svelte b/js/audio/interactive/InteractiveAudio.svelte
@@ -73,7 +73,11 @@
 	{scale}
 	{min_width}
 >
-	<StatusTracker i18n={gradio.i18n} {...loading_status} />
+	<StatusTracker
+		autoscroll={gradio.autoscroll}
+		i18n={gradio.i18n}
+		{...loading_status}
+	/>
 	<Audio
 		{label}
 		{show_label}

diff --git a/js/audio/static/StaticAudio.svelte b/js/audio/static/StaticAudio.svelte
@@ -63,7 +63,11 @@
 	{scale}
 	{min_width}
 >
-	<StatusTracker i18n={gradio.i18n} {...loading_status} />
+	<StatusTracker
+		autoscroll={gradio.autoscroll}
+		i18n={gradio.i18n}
+		{...loading_status}
+	/>
 
 	<StaticAudio
 		i18n={gradio.i18n}

diff --git a/js/chatbot/static/StaticChatbot.svelte b/js/chatbot/static/StaticChatbot.svelte
@@ -90,6 +90,7 @@
 >
 	{#if loading_status}
 		<StatusTracker
+			autoscroll={gradio.autoscroll}
 			i18n={gradio.i18n}
 			{...loading_status}
 			show_progress={loading_status.show_progress === "hidden"

diff --git a/js/checkbox/interactive/InteractiveCheckbox.svelte b/js/checkbox/interactive/InteractiveCheckbox.svelte
@@ -25,7 +25,11 @@
 </script>
 
 <Block {visible} {elem_id} {elem_classes} {container} {scale} {min_width}>
-	<StatusTracker i18n={gradio.i18n} {...loading_status} />
+	<StatusTracker
+		autoscroll={gradio.autoscroll}
+		i18n={gradio.i18n}
+		{...loading_status}
+	/>
 
 	{#if info}
 		<Info>{info}</Info>

diff --git a/js/checkbox/static/StaticCheckbox.svelte b/js/checkbox/static/StaticCheckbox.svelte
@@ -25,7 +25,11 @@
 </script>
 
 <Block {visible} {elem_id} {elem_classes} {container} {scale} {min_width}>
-	<StatusTracker i18n={gradio.i18n} {...loading_status} />
+	<StatusTracker
+		autoscroll={gradio.autoscroll}
+		i18n={gradio.i18n}
+		{...loading_status}
+	/>
 
 	{#if info}
 		<Info>{info}</Info>

diff --git a/js/checkboxgroup/interactive/InteractiveCheckboxgroup.svelte b/js/checkboxgroup/interactive/InteractiveCheckboxgroup.svelte
@@ -35,7 +35,11 @@
 	{scale}
 	{min_width}
 >
-	<StatusTracker i18n={gradio.i18n} {...loading_status} />
+	<StatusTracker
+		autoscroll={gradio.autoscroll}
+		i18n={gradio.i18n}
+		{...loading_status}
+	/>
 
 	<CheckboxGroup
 		bind:value

diff --git a/js/checkboxgroup/static/StaticCheckboxgroup.svelte b/js/checkboxgroup/static/StaticCheckboxgroup.svelte
@@ -35,7 +35,11 @@
 	{scale}
 	{min_width}
 >
-	<StatusTracker i18n={gradio.i18n} {...loading_status} />
+	<StatusTracker
+		autoscroll={gradio.autoscroll}
+		i18n={gradio.i18n}
+		{...loading_status}
+	/>
 
 	<CheckboxGroup
 		bind:value

diff --git a/js/code/interactive/InteractiveCode.svelte b/js/code/interactive/InteractiveCode.svelte
@@ -40,7 +40,11 @@
 </script>
 
 <Block variant={"solid"} padding={false} {elem_id} {elem_classes} {visible}>
-	<StatusTracker i18n={gradio.i18n} {...loading_status} />
+	<StatusTracker
+		autoscroll={gradio.autoscroll}
+		i18n={gradio.i18n}
+		{...loading_status}
+	/>
 
 	<BlockLabel Icon={CodeIcon} {show_label} {label} float={false} />
 

diff --git a/js/code/static/StaticCode.svelte b/js/code/static/StaticCode.svelte
@@ -40,7 +40,11 @@
 </script>
 
 <Block variant={"solid"} padding={false} {elem_id} {elem_classes} {visible}>
-	<StatusTracker i18n={gradio.i18n} {...loading_status} />
+	<StatusTracker
+		autoscroll={gradio.autoscroll}
+		i18n={gradio.i18n}
+		{...loading_status}
+	/>
 
 	<BlockLabel Icon={CodeIcon} {show_label} {label} float={false} />
 

diff --git a/js/colorpicker/interactive/InteractiveColorpicker.svelte b/js/colorpicker/interactive/InteractiveColorpicker.svelte
@@ -30,7 +30,11 @@
 </script>
 
 <Block {visible} {elem_id} {elem_classes} {container} {scale} {min_width}>
-	<StatusTracker i18n={gradio.i18n} {...loading_status} />
+	<StatusTracker
+		autoscroll={gradio.autoscroll}
+		i18n={gradio.i18n}
+		{...loading_status}
+	/>
 
 	<Colorpicker
 		bind:value

diff --git a/js/colorpicker/static/StaticColorpicker.svelte b/js/colorpicker/static/StaticColorpicker.svelte
@@ -31,7 +31,11 @@
 </script>
 
 <Block {visible} {elem_id} {elem_classes} {container} {scale} {min_width}>
-	<StatusTracker i18n={gradio.i18n} {...loading_status} />
+	<StatusTracker
+		autoscroll={gradio.autoscroll}
+		i18n={gradio.i18n}
+		{...loading_status}
+	/>
 
 	<Colorpicker
 		bind:value

diff --git a/js/dataframe/interactive/InteractiveDataframe.svelte b/js/dataframe/interactive/InteractiveDataframe.svelte
@@ -84,7 +84,11 @@
 	{min_width}
 	allow_overflow={false}
 >
-	<StatusTracker {...loading_status} />
+	<StatusTracker
+		autoscroll={gradio.autoscroll}
+		{...loading_status}
+		i18n={gradio.i18n}
+	/>
 	<Table
 		{label}
 		{row_count}

diff --git a/js/dataframe/static/StaticDataframe.svelte b/js/dataframe/static/StaticDataframe.svelte
@@ -82,7 +82,11 @@
 	{min_width}
 	allow_overflow={false}
 >
-	<StatusTracker i18n={gradio.i18n} {...loading_status} />
+	<StatusTracker
+		autoscroll={gradio.autoscroll}
+		i18n={gradio.i18n}
+		{...loading_status}
+	/>
 	<Table
 		{root}
 		{label}

diff --git a/js/dropdown/interactive/InteractiveDropdown.svelte b/js/dropdown/interactive/InteractiveDropdown.svelte
@@ -41,7 +41,11 @@
 	{scale}
 	{min_width}
 >
-	<StatusTracker i18n={gradio.i18n} {...loading_status} />
+	<StatusTracker
+		autoscroll={gradio.autoscroll}
+		i18n={gradio.i18n}
+		{...loading_status}
+	/>
 
 	{#if multiselect}
 		<Multiselect

diff --git a/js/dropdown/static/StaticDropdown.svelte b/js/dropdown/static/StaticDropdown.svelte
@@ -40,7 +40,11 @@
 	{scale}
 	{min_width}
 >
-	<StatusTracker i18n={gradio.i18n} {...loading_status} />
+	<StatusTracker
+		autoscroll={gradio.autoscroll}
+		i18n={gradio.i18n}
+		{...loading_status}
+	/>
 
 	{#if multiselect}
 		<Multiselect

diff --git a/js/fallback/interactive/InteractiveFallback.svelte b/js/fallback/interactive/InteractiveFallback.svelte
@@ -26,7 +26,11 @@
 </script>
 
 <Block {visible} {elem_id} {elem_classes} {container} {scale} {min_width}>
-	<StatusTracker i18n={gradio.i18n} {...loading_status} />
+	<StatusTracker
+		autoscroll={gradio.autoscroll}
+		i18n={gradio.i18n}
+		{...loading_status}
+	/>
 
 	<JsonView json={value} />
 </Block>
diff --git a/js/fallback/static/StaticFallback.svelte b/js/fallback/static/StaticFallback.svelte
@@ -26,7 +26,11 @@
 </script>
 
 <Block {visible} {elem_id} {elem_classes} {container} {scale} {min_width}>
-	<StatusTracker i18n={gradio.i18n} {...loading_status} />
+	<StatusTracker
+		autoscroll={gradio.autoscroll}
+		i18n={gradio.i18n}
+		{...loading_status}
+	/>
 
 	<JsonView json={value} />
 </Block>
diff --git a/js/file/interactive/InteractiveFile.svelte b/js/file/interactive/InteractiveFile.svelte
@@ -120,6 +120,7 @@
 	allow_overflow={false}
 >
 	<StatusTracker
+		autoscroll={gradio.autoscroll}
 		i18n={gradio.i18n}
 		{...loading_status}
 		status={pending_upload

diff --git a/js/file/static/StaticFile.svelte b/js/file/static/StaticFile.svelte
@@ -116,6 +116,7 @@
 	allow_overflow={false}
 >
 	<StatusTracker
+		autoscroll={gradio.autoscroll}
 		i18n={gradio.i18n}
 		{...loading_status}
 		status={pending_upload

diff --git a/js/gallery/static/StaticGallery.svelte b/js/gallery/static/StaticGallery.svelte
@@ -49,7 +49,11 @@
 	allow_overflow={false}
 	height={typeof height === "number" ? height : undefined}
 >
-	<StatusTracker i18n={gradio.i18n} {...loading_status} />
+	<StatusTracker
+		autoscroll={gradio.autoscroll}
+		i18n={gradio.i18n}
+		{...loading_status}
+	/>
 	<Gallery
 		on:select={(e) => gradio.dispatch("select", e.detail)}
 		on:share={(e) => gradio.dispatch("share", e.detail)}