Lazy load interactive or static variants of a component individually, rather than loading both variants regardless. This change will improve performance for many applications. (#5215)

* lazy load compoennts more granularly

* add changeset

* format

* add changeset

* fix casing

* fix casing

* fix casing

* revert changelog formatting

* add changeset

* revert changelog formatting

* add changeset

* make interactive updates work

* revert changelog stuff

* fix order

* fix static dataframe

* revert demo change

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

.changeset/forty-cases-cough.md

@@ -0,0 +1,33 @@
+---
+"@gradio/accordion": patch
+"@gradio/annotatedimage": patch
+"@gradio/app": patch
+"@gradio/audio": patch
+"@gradio/box": patch
+"@gradio/chatbot": patch
+"@gradio/checkbox": patch
+"@gradio/checkboxgroup": patch
+"@gradio/code": patch
+"@gradio/colorpicker": patch
+"@gradio/dataframe": patch
+"@gradio/dropdown": patch
+"@gradio/file": patch
+"@gradio/gallery": patch
+"@gradio/highlightedtext": patch
+"@gradio/html": patch
+"@gradio/image": patch
+"@gradio/json": patch
+"@gradio/label": patch
+"@gradio/markdown": patch
+"@gradio/model3d": patch
+"@gradio/number": patch
+"@gradio/plot": patch
+"@gradio/radio": patch
+"@gradio/slider": patch
+"@gradio/statustracker": patch
+"@gradio/timeseries": patch
+"@gradio/video": patch
+"gradio": patch
+---
+
+feat:Lazy load interactive or static variants of a component individually, rather than loading both variants regardless. This change will improve performance for many applications.

.config/.prettierignore

@@ -22,4 +22,5 @@
 **/storybook-static/**  
 **/.vscode/**
 sweep.yaml
-**/.vercel/**
+**/.vercel/**
+**/build/**

js/accordion/static/StaticAccordion.svelte

@@ -2,7 +2,7 @@
 	import Accordion from "./Accordion.svelte";
 	import { Block } from "@gradio/atoms";
 	import { StatusTracker } from "@gradio/statustracker";
-	import type { LoadingStatus } from "@gradio/statustracker/types";
+	import type { LoadingStatus } from "@gradio/statustracker";
 
 	import Column from "@gradio/column";
 

js/annotatedimage/static/AnnotatedImage.svelte

@@ -3,7 +3,7 @@
 	import { Block, BlockLabel, Empty } from "@gradio/atoms";
 	import { Image } from "@gradio/icons";
 	import { StatusTracker } from "@gradio/statustracker";
-	import type { LoadingStatus } from "@gradio/statustracker/types";
+	import type { LoadingStatus } from "@gradio/statustracker";
 	import { type FileData, normalise_file } from "@gradio/upload";
 	import type { SelectData } from "@gradio/utils";
 

js/app/src/Blocks.svelte

@@ -50,7 +50,7 @@
 	let rootNode: ComponentMeta = {
 		id: layout.id,
 		type: "column",
-		props: {},
+		props: { mode: "static" },
 		has_modes: false,
 		instance: {} as ComponentMeta["instance"],
 		component: {} as ComponentMeta["component"]
@@ -134,48 +134,60 @@
 	);
 
 	type LoadedComponent = {
-		Component: ComponentMeta["component"];
-		modes?: string[];
-		document?: (arg0: Record<string, unknown>) => Documentation;
+		default: ComponentMeta["component"];
 	};
 
 	async function load_component<T extends ComponentMeta["type"]>(
-		name: T
+		name: T,
+		mode: ComponentMeta["props"]["mode"]
 	): Promise<{
 		name: T;
 		component: LoadedComponent;
 	}> {
 		try {
-			const c = await component_map[name]();
+			//@ts-ignore
+			const c = await component_map[name][mode]();
 			return {
 				name,
 				component: c as LoadedComponent
 			};
 		} catch (e) {
-			console.error(`failed to load: ${name}`);
-			console.error(e);
-			throw e;
+			if (mode === "interactive") {
+				try {
+					const c = await component_map[name]["static"]();
+					return {
+						name,
+						component: c as LoadedComponent
+					};
+				} catch (e) {
+					console.error(`failed to load: ${name}`);
+					console.error(e);
+					throw e;
+				}
+			} else {
+				console.error(`failed to load: ${name}`);
+				console.error(e);
+				throw e;
+			}
 		}
 	}
 
 	const component_set = new Set<
 		Promise<{ name: ComponentMeta["type"]; component: LoadedComponent }>
 	>();
+
 	const _component_map = new Map<
-		ComponentMeta["type"],
+		`${ComponentMeta["type"]}_${ComponentMeta["props"]["mode"]}`,
 		Promise<{ name: ComponentMeta["type"]; component: LoadedComponent }>
 	>();
+	const _type_for_id = new Map<number, ComponentMeta["props"]["mode"]>();
 
 	async function walk_layout(node: LayoutNode): Promise<void> {
 		let instance = instance_map[node.id];
-		const _component = (await _component_map.get(instance.type))!.component;
-		instance.component = _component.Component;
-		if (_component.document) {
-			instance.documentation = _component.document(instance.props);
-		}
-		if (_component.modes && _component.modes.length > 1) {
-			instance.has_modes = true;
-		}
+		const _component = (await _component_map.get(
+			`${instance.type}_${_type_for_id.get(node.id) || "static"}`
+		))!.component;
+		instance.component = _component.default;
 
 		if (node.children) {
 			instance.children = node.children.map((v) => instance_map[v.id]);
@@ -183,10 +195,21 @@
 		}
 	}
 
-	components.forEach(async (c) => {
-		const _c = load_component(c.type);
+	components.forEach((c) => {
+		if ((c.props as any).interactive === false) {
+			(c.props as any).mode = "static";
+		} else if ((c.props as any).interactive === true) {
+			(c.props as any).mode = "interactive";
+		} else if (dynamic_ids.has(c.id)) {
+			(c.props as any).mode = "interactive";
+		} else {
+			(c.props as any).mode = "static";
+		}
+		_type_for_id.set(c.id, c.props.mode);
+
+		const _c = load_component(c.type, c.props.mode);
 		component_set.add(_c);
-		_component_map.set(c.type, _c);
+		_component_map.set(`${c.type}_${c.props.mode}`, _c);
 	});
 
 	export let ready = false;
@@ -200,6 +223,32 @@
 			});
 	});
 
+	async function update_interactive_mode(
+		instance: ComponentMeta,
+		mode: "dynamic" | "interactive" | "static"
+	): Promise<void> {
+		let new_mode: "interactive" | "static" =
+			mode === "dynamic" ? "interactive" : mode;
+
+		if (instance.props.mode === new_mode) return;
+
+		instance.props.mode = new_mode;
+		const _c = load_component(instance.type, instance.props.mode);
+		component_set.add(_c);
+		_component_map.set(
+			`${instance.type}_${instance.props.mode}`,
+			_c as Promise<{
+				name: ComponentMeta["type"];
+				component: LoadedComponent;
+			}>
+		);
+
+		_c.then((c) => {
+			instance.component = c.component.default;
+			rootNode = rootNode;
+		});
+	}
+
 	function handle_update(data: any, fn_index: number): void {
 		const outputs = dependencies[fn_index].outputs;
 		data?.forEach((value: any, i: number) => {
@@ -214,6 +263,12 @@
 					if (update_key === "__type__") {
 						continue;
 					} else {
+						if (update_key === "mode") {
+							update_interactive_mode(
+								output,
+								update_value as "dynamic" | "static"
+							);
+						}
 						output.props[update_key] = update_value;
 					}
 				}
@@ -232,6 +287,7 @@
 		val: any
 	): void {
 		if (!obj?.props) {
+			// @ts-ignore
 			obj.props = {};
 		}
 		obj.props[prop] = val;
@@ -570,7 +626,6 @@
 	<div class="contain" style:flex-grow={app_mode ? "1" : "auto"}>
 		{#if ready}
 			<Render
-				has_modes={rootNode.has_modes}
 				component={rootNode.component}
 				id={rootNode.id}
 				props={rootNode.props}

js/app/src/Login.svelte

@@ -2,7 +2,7 @@
 	import Form from "@gradio/form";
 	import Textbox from "@gradio/textbox";
 	import { BaseButton } from "@gradio/button/static";
-	import { Component as Column } from "./components/Column";
+	import Column from "@gradio/column";
 	export let root: string;
 	export let auth_message: string | null;
 	export let app_mode: boolean;

js/app/src/Render.svelte

@@ -12,25 +12,12 @@
 
 	export let children: ComponentMeta["children"];
 	export let dynamic_ids: Set<number>;
-	export let has_modes: boolean | undefined;
 	export let parent: string | null = null;
 	export let target: HTMLElement;
 	export let theme_mode: ThemeMode;
 
 	const dispatch = createEventDispatcher<{ mount: number; destroy: number }>();
 
-	if (has_modes) {
-		if ((props as any).interactive === false) {
-			(props as any).mode = "static";
-		} else if ((props as any).interactive === true) {
-			(props as any).mode = "dynamic";
-		} else if (dynamic_ids.has(id)) {
-			(props as any).mode = "dynamic";
-		} else {
-			(props as any).mode = "static";
-		}
-	}
-
 	onMount(() => {
 		dispatch("mount", id);
 

js/app/src/components/Accordion/index.ts

@@ -1,2 +0,0 @@
-export { default as Component } from "@gradio/accordion";
-export const modes = ["static"];

js/app/src/components/AnnotatedImage/index.ts

@@ -1,2 +0,0 @@
-export { default as Component } from "@gradio/annotatedimage";
-export const modes = ["static"];

js/app/src/components/Audio/index.ts

@@ -1,2 +0,0 @@
-export { default as Component } from "@gradio/audio";
-export const modes = ["static", "dynamic"];

js/app/src/components/Box/index.ts

@@ -1,2 +0,0 @@
-export { default as Component } from "@gradio/box";
-export const modes = ["static"];

js/app/src/components/Button/index.ts

@@ -1,2 +0,0 @@
-export { default as Component } from "@gradio/button";
-export const modes = ["static", "dynamic"];

js/app/src/components/Chatbot/index.ts

@@ -1,2 +0,0 @@
-export { default as Component } from "@gradio/chatbot";
-export const modes = ["static"];

js/app/src/components/Checkbox/index.ts

@@ -1,2 +0,0 @@
-export { default as Component } from "@gradio/checkbox";
-export const modes = ["static", "dynamic"];

js/app/src/components/CheckboxGroup/index.ts

@@ -1,2 +0,0 @@
-export { default as Component } from "@gradio/checkboxgroup";
-export const modes = ["static", "dynamic"];

js/app/src/components/Code/index.ts

@@ -1,2 +0,0 @@
-export { default as Component } from "@gradio/code";
-export const modes = ["static", "dynamic"];

js/app/src/components/ColorPicker/index.ts

@@ -1,2 +0,0 @@
-export { default as Component } from "@gradio/colorpicker";
-export const modes = ["static", "dynamic"];

js/app/src/components/Column/index.ts

@@ -1,2 +0,0 @@
-export { default as Component } from "@gradio/column";
-export const modes = ["static"];

js/app/src/components/DataFrame/index.ts

@@ -1,2 +0,0 @@
-export { default as Component } from "@gradio/dataframe";
-export const modes = ["static", "dynamic"];

js/app/src/components/Dataset/index.ts

@@ -1,2 +1 @@
-export { default as Component } from "./Dataset.svelte";
-export const modes = ["dynamic"];
+export { default } from "./Dataset.svelte";

js/app/src/components/Dropdown/index.ts

@@ -1,2 +0,0 @@
-export { default as Component } from "@gradio/dropdown";
-export const modes = ["static", "dynamic"];

js/app/src/components/File/index.ts

@@ -1,2 +0,0 @@
-export { default as Component } from "@gradio/file";
-export const modes = ["static", "dynamic"];

js/app/src/components/Form/index.ts

@@ -1,2 +0,0 @@
-export { default as Component } from "@gradio/form";
-export const modes = ["static"];

js/app/src/components/Gallery/index.ts

@@ -1,2 +0,0 @@
-export { default as Component } from "@gradio/gallery";
-export const modes = ["static"];

js/app/src/components/Group/index.ts

@@ -1,2 +0,0 @@
-export { default as Component } from "@gradio/group";
-export const modes = ["static"];

js/app/src/components/HTML/index.ts

@@ -1,2 +0,0 @@
-export { default as Component } from "@gradio/html";
-export const modes = ["static"];

js/app/src/components/HighlightedText/index.ts

@@ -1,2 +0,0 @@
-export { default as Component } from "@gradio/highlightedtext";
-export const modes = ["static"];

js/app/src/components/Image/index.ts

@@ -1,3 +0,0 @@
-export { default as Component } from "@gradio/image";
-export { default as ExampleComponent } from "@gradio/image/example";
-export const modes = ["static", "dynamic"];

js/app/src/components/Interpretation/index.ts

@@ -1,2 +1 @@
-export { default as Component } from "./Interpretation.svelte";
-export const modes = ["dynamic"];
+export { default } from "./Interpretation.svelte";

js/app/src/components/Json/index.ts

@@ -1,2 +0,0 @@
-export { default as Component } from "@gradio/json";
-export const modes = ["static"];

js/app/src/components/Label/index.ts

@@ -1,2 +0,0 @@
-export { default as Component } from "@gradio/label";
-export const modes = ["static"];

js/app/src/components/Markdown/index.ts

@@ -1,2 +0,0 @@
-export { default as Component } from "@gradio/markdown";
-export const modes = ["static"];

js/app/src/components/Model3D/index.ts

@@ -1,3 +0,0 @@
-export { default as Component } from "@gradio/model3d";
-export { default as ExampleComponent } from "@gradio/model3d/example";
-export const modes = ["static", "dynamic"];

js/app/src/components/Number/index.ts

@@ -1,2 +0,0 @@
-export { default as Component } from "@gradio/number";
-export const modes = ["static", "dynamic"];

js/app/src/components/Plot/index.ts

@@ -1,2 +0,0 @@
-export { default as Component } from "@gradio/plot";
-export const modes = ["static"];

js/app/src/components/Radio/index.ts

@@ -1,2 +0,0 @@
-export { default as Component } from "@gradio/radio";
-export const modes = ["static", "dynamic"];

js/app/src/components/Row/index.ts

@@ -1,2 +0,0 @@
-export { default as Component } from "@gradio/row";
-export const modes = ["static"];

js/app/src/components/Slider/index.ts

@@ -1,2 +0,0 @@
-export { default as Component } from "@gradio/slider";
-export const modes = ["static", "dynamic"];

js/app/src/components/State/index.ts

@@ -1,2 +1 @@
-export { default as Component } from "@gradio/state";
-export const modes = ["static"];
+export { default } from "@gradio/state";

js/app/src/components/StatusTracker/index.ts

@@ -1,2 +0,0 @@
-export { StatusTracker as Component } from "@gradio/statustracker";
-export const modes = ["static"];

js/app/src/components/TabItem/index.ts

@@ -1,2 +0,0 @@
-export { default as Component } from "@gradio/tabitem";
-export const modes = ["static"];

js/app/src/components/Tabs/index.ts

@@ -1,2 +0,0 @@
-export { default as Component } from "@gradio/tabs";
-export const modes = ["static"];

js/app/src/components/Textbox/index.ts

@@ -1,2 +0,0 @@
-export { default as Component } from "@gradio/textbox";
-export const modes = ["static", "dynamic"];

js/app/src/components/TimeSeries/index.ts

@@ -1,2 +0,0 @@
-export { default as Component } from "@gradio/timeseries";
-export const modes = ["static", "dynamic"];

js/app/src/components/UploadButton/index.ts

@@ -1,2 +0,0 @@
-export { default as Component } from "@gradio/uploadbutton";
-export const modes = ["static", "dynamic"];

js/app/src/components/Video/index.ts

@@ -1,2 +0,0 @@
-export { default as Component } from "@gradio/video";
-export const modes = ["static", "dynamic"];

js/app/src/components/directory.ts

@@ -1,41 +1,137 @@
 export const component_map = {
-	accordion: () => import("./Accordion"),
-	annotatedimage: () => import("./AnnotatedImage"),
-	audio: () => import("./Audio"),
-	box: () => import("./Box"),
-	button: () => import("./Button"),
-	chatbot: () => import("./Chatbot"),
-	checkbox: () => import("./Checkbox"),
-	checkboxgroup: () => import("./CheckboxGroup"),
-	code: () => import("./Code"),
-	colorpicker: () => import("./ColorPicker"),
-	column: () => import("./Column"),
-	dataframe: () => import("./DataFrame"),
-	dataset: () => import("./Dataset"),
-	dropdown: () => import("./Dropdown"),
-	file: () => import("./File"),
-	form: () => import("./Form"),
-	gallery: () => import("./Gallery"),
-	group: () => import("./Group"),
-	highlightedtext: () => import("./HighlightedText"),
-	html: () => import("./HTML"),
-	image: () => import("./Image"),
-	interpretation: () => import("./Interpretation"),
-	json: () => import("./Json"),
-	label: () => import("./Label"),
-	markdown: () => import("./Markdown"),
-	model3d: () => import("./Model3D"),
-	number: () => import("./Number"),
-	plot: () => import("./Plot"),
-	radio: () => import("./Radio"),
-	row: () => import("./Row"),
-	slider: () => import("./Slider"),
-	state: () => import("./State"),
-	statustracker: () => import("./StatusTracker"),
-	tabs: () => import("./Tabs"),
-	tabitem: () => import("./TabItem"),
-	textbox: () => import("./Textbox"),
-	timeseries: () => import("./TimeSeries"),
-	uploadbutton: () => import("./UploadButton"),
-	video: () => import("./Video")
+	accordion: {
+		static: () => import("@gradio/accordion/static")
+	},
+	annotatedimage: {
+		static: () => import("@gradio/annotatedimage/static")
+	},
+	audio: {
+		static: () => import("@gradio/audio/static"),
+		interactive: () => import("@gradio/audio/interactive")
+	},
+	box: {
+		static: () => import("@gradio/box/static")
+	},
+	button: {
+		static: () => import("@gradio/button/static")
+	},
+	chatbot: {
+		static: () => import("@gradio/chatbot/static")
+	},
+	checkbox: {
+		static: () => import("@gradio/checkbox/static"),
+		interactive: () => import("@gradio/checkbox/interactive")
+	},
+	checkboxgroup: {
+		static: () => import("@gradio/checkboxgroup/static"),
+		interactive: () => import("@gradio/checkboxgroup/interactive")
+	},
+	code: {
+		static: () => import("@gradio/code/static"),
+		interactive: () => import("@gradio/code/interactive")
+	},
+	colorpicker: {
+		static: () => import("@gradio/colorpicker/static"),
+		interactive: () => import("@gradio/colorpicker/interactive")
+	},
+	column: {
+		static: () => import("@gradio/column/static")
+	},
+	dataframe: {
+		static: () => import("@gradio/dataframe/static"),
+		interactive: () => import("@gradio/dataframe/interactive")
+	},
+	dataset: {
+		static: () => import("./Dataset")
+	},
+	dropdown: {
+		static: () => import("@gradio/dropdown/static"),
+		interactive: () => import("@gradio/dropdown/interactive")
+	},
+	file: {
+		static: () => import("@gradio/file/static"),
+		interactive: () => import("@gradio/file/interactive")
+	},
+	form: {
+		static: () => import("@gradio/form/static")
+	},
+	gallery: {
+		static: () => import("@gradio/gallery/static")
+	},
+	group: {
+		static: () => import("@gradio/group/static")
+	},
+	highlightedtext: {
+		static: () => import("@gradio/highlightedtext/static")
+	},
+	html: {
+		static: () => import("@gradio/html/static")
+	},
+	image: {
+		static: () => import("@gradio/image/static"),
+		interactive: () => import("@gradio/image/interactive")
+	},
+	interpretation: {
+		static: () => import("./Interpretation"),
+		interactive: () => import("./Interpretation")
+	},
+	json: {
+		static: () => import("@gradio/json/static")
+	},
+	label: {
+		static: () => import("@gradio/label/static")
+	},
+	markdown: {
+		static: () => import("@gradio/markdown/static")
+	},
+	model3d: {
+		static: () => import("@gradio/model3d/static"),
+		interactive: () => import("@gradio/model3d/interactive")
+	},
+	number: {
+		static: () => import("@gradio/number/static"),
+		interactive: () => import("@gradio/number/interactive")
+	},
+	plot: {
+		static: () => import("@gradio/plot/static")
+	},
+	radio: {
+		static: () => import("@gradio/radio/static"),
+		interactive: () => import("@gradio/radio/interactive")
+	},
+	row: {
+		static: () => import("@gradio/row/static")
+	},
+	slider: {
+		static: () => import("@gradio/slider/static"),
+		interactive: () => import("@gradio/slider/interactive")
+	},
+	state: {
+		static: () => import("./State")
+	},
+	statustracker: {
+		static: () => import("@gradio/statustracker/static")
+	},
+	tabs: {
+		static: () => import("@gradio/tabs/static")
+	},
+	tabitem: {
+		static: () => import("@gradio/tabitem/static")
+	},
+	textbox: {
+		static: () => import("@gradio/textbox/static"),
+		interactive: () => import("@gradio/textbox/interactive")
+	},
+	timeseries: {
+		static: () => import("@gradio/timeseries/static"),
+		interactive: () => import("@gradio/timeseries/interactive")
+	},
+	uploadbutton: {
+		static: () => import("@gradio/uploadbutton/static"),
+		interactive: () => import("@gradio/uploadbutton/interactive")
+	},
+	video: {
+		static: () => import("@gradio/video/static"),
+		interactive: () => import("@gradio/video/interactive")
+	}
 };

js/app/src/components/types.ts

@@ -9,7 +9,7 @@ export interface ComponentMeta {
 	type: keyof ComponentMap;
 	id: number;
 	has_modes: boolean;
-	props: Record<string, unknown>;
+	props: Record<string, unknown> & { mode: "interactive" | "static" };
 	instance: SvelteComponent;
 	component: ComponentType<SvelteComponent>;
 	documentation?: Documentation;

js/app/test/components.test.ts

@@ -33,7 +33,7 @@ import Textbox from "@gradio/textbox";
 import TimeSeries from "@gradio/timeseries";
 import UploadButton from "@gradio/uploadbutton";
 import Video from "@gradio/video";
-import { LoadingStatus } from "@gradio/statustracker/types";
+import { LoadingStatus } from "@gradio/statustracker";
 
 const loading_status: LoadingStatus = {
 	eta: 0,

js/audio/index.svelte

@@ -2,7 +2,7 @@
 
 <script lang="ts">
 	import type { FileData } from "@gradio/upload";
-	import type { LoadingStatus } from "@gradio/statustracker/types";
+	import type { LoadingStatus } from "@gradio/statustracker";
 
 	import Audio from "./interactive";
 	import StaticAudio from "./static";

js/audio/interactive/InteractiveAudio.svelte

@@ -6,7 +6,7 @@
 	import { UploadText } from "@gradio/atoms";
 
 	import type { FileData } from "@gradio/upload";
-	import type { LoadingStatus } from "@gradio/statustracker/types";
+	import type { LoadingStatus } from "@gradio/statustracker";
 
 	import Audio from "./Audio.svelte";
 	import { StatusTracker } from "@gradio/statustracker";

js/audio/static/StaticAudio.svelte

@@ -5,7 +5,7 @@
 	import { _ } from "svelte-i18n";
 
 	import type { FileData } from "@gradio/upload";
-	import type { LoadingStatus } from "@gradio/statustracker/types";
+	import type { LoadingStatus } from "@gradio/statustracker";
 
 	import StaticAudio from "./AudioPlayer.svelte";
 	import { StatusTracker } from "@gradio/statustracker";

js/box/static/index.ts

@@ -0,0 +1 @@
+export { default } from "./index.svelte";

js/chatbot/Chatbot.test.ts

@@ -1,7 +1,7 @@
 import { test, describe, assert, afterEach } from "vitest";
 import { cleanup, render } from "@gradio/tootils";
 import Chatbot from "./index.svelte";
-import type { LoadingStatus } from "@gradio/statustracker/types";
+import type { LoadingStatus } from "@gradio/statustracker";
 import type { FileData } from "@gradio/upload";
 
 const loading_status: LoadingStatus = {

js/chatbot/utils.ts

@@ -201,23 +201,22 @@ export const format_chat_for_sharing = async (
 
 					if (typeof message === "string") {
 						const regexPatterns = {
-							'audio': /<audio.*?src="(\/file=.*?)"/g,
-							'video': /<video.*?src="(\/file=.*?)"/g,
-							'image': /<img.*?src="(\/file=.*?)".*?\/>|!\[.*?\]\((\/file=.*?)\)/g,
+							audio: /<audio.*?src="(\/file=.*?)"/g,
+							video: /<video.*?src="(\/file=.*?)"/g,
+							image: /<img.*?src="(\/file=.*?)".*?\/>|!\[.*?\]\((\/file=.*?)\)/g
 						};
-				
+
 						html_content = message;
-				
+
 						for (let [_, regex] of Object.entries(regexPatterns)) {
 							let match;
-				
+
 							while ((match = regex.exec(message)) !== null) {
 								const fileUrl = match[1] || match[2];
 								const newUrl = await uploadToHuggingFace(fileUrl, "url");
 								html_content = html_content.replace(fileUrl, newUrl);
 							}
 						}
-				
 					} else {
 						const file_url = await uploadToHuggingFace(message.data, "url");
 						if (message.mime_type?.includes("audio")) {
@@ -228,8 +227,6 @@ export const format_chat_for_sharing = async (
 							html_content = `<img src="${file_url}" />`;
 						}
 					}
-				
-
 
 					return `${speaker_emoji}: ${html_content}`;
 				})

js/checkbox/index.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import StaticCheckbox from "./static";
 	import InteractiveCheckbox from "./interactive";
-	import type { LoadingStatus } from "@gradio/statustracker/types";
+	import type { LoadingStatus } from "@gradio/statustracker";
 
 	export let elem_id = "";
 	export let elem_classes: string[] = [];

js/checkbox/interactive/InteractiveCheckbox.svelte

@@ -2,7 +2,7 @@
 	import Checkbox from "../shared";
 	import { Block, Info } from "@gradio/atoms";
 	import { StatusTracker } from "@gradio/statustracker";
-	import type { LoadingStatus } from "@gradio/statustracker/types";
+	import type { LoadingStatus } from "@gradio/statustracker";
 
 	export let elem_id = "";
 	export let elem_classes: string[] = [];

js/checkbox/static/StaticCheckbox.svelte

@@ -2,7 +2,7 @@
 	import Checkbox from "../shared";
 	import { Block, Info } from "@gradio/atoms";
 	import { StatusTracker } from "@gradio/statustracker";
-	import type { LoadingStatus } from "@gradio/statustracker/types";
+	import type { LoadingStatus } from "@gradio/statustracker";
 
 	export let elem_id = "";
 	export let elem_classes: string[] = [];

js/checkboxgroup/index.svelte

@@ -2,7 +2,7 @@
 	import StaticCheckboxgroup from "./static";
 	import InteractiveCheckboxgroup from "./interactive";
 
-	import type { LoadingStatus } from "@gradio/statustracker/types";
+	import type { LoadingStatus } from "@gradio/statustracker";
 
 	export let elem_id = "";
 	export let elem_classes: string[] = [];

js/checkboxgroup/interactive/InteractiveCheckboxgroup.svelte

@@ -2,7 +2,7 @@
 	import CheckboxGroup from "../shared";
 	import { Block } from "@gradio/atoms";
 	import { StatusTracker } from "@gradio/statustracker";
-	import type { LoadingStatus } from "@gradio/statustracker/types";
+	import type { LoadingStatus } from "@gradio/statustracker";
 
 	export let elem_id = "";
 	export let elem_classes: string[] = [];

js/checkboxgroup/static/StaticCheckboxgroup.svelte

@@ -2,7 +2,7 @@
 	import CheckboxGroup from "../shared";
 	import { Block } from "@gradio/atoms";
 	import { StatusTracker } from "@gradio/statustracker";
-	import type { LoadingStatus } from "@gradio/statustracker/types";
+	import type { LoadingStatus } from "@gradio/statustracker";
 
 	export let elem_id = "";
 	export let elem_classes: string[] = [];

js/code/index.svelte

@@ -2,7 +2,7 @@
 	import { createEventDispatcher, afterUpdate } from "svelte";
 	import { _ } from "svelte-i18n";
 
-	import type { LoadingStatus } from "@gradio/statustracker/types";
+	import type { LoadingStatus } from "@gradio/statustracker";
 
 	import StaticCode from "./static";
 	import InteractiveCode from "./interactive";

js/code/interactive/InteractiveCode.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { createEventDispatcher, afterUpdate } from "svelte";
 
-	import type { LoadingStatus } from "@gradio/statustracker/types";
+	import type { LoadingStatus } from "@gradio/statustracker";
 
 	import Code from "../shared";
 	import { StatusTracker } from "@gradio/statustracker";

js/code/static/StaticCode.svelte

@@ -2,7 +2,7 @@
 	import { createEventDispatcher, afterUpdate } from "svelte";
 	import { _ } from "svelte-i18n";
 
-	import type { LoadingStatus } from "@gradio/statustracker/types";
+	import type { LoadingStatus } from "@gradio/statustracker";
 
 	import Code, { Widget } from "../shared";
 	import { StatusTracker } from "@gradio/statustracker";

js/colorpicker/index.svelte

@@ -4,7 +4,7 @@
 	import StaticColorpicker from "./static";
 	import InteractiveColorpicker from "./interactive";
 
-	import type { LoadingStatus } from "@gradio/statustracker/types";
+	import type { LoadingStatus } from "@gradio/statustracker";
 
 	export let label = "ColorPicker";
 	export let info: string | undefined = undefined;

js/colorpicker/interactive/InteractiveColorpicker.svelte

@@ -4,7 +4,7 @@
 	import Colorpicker from "../shared";
 	import { Block } from "@gradio/atoms";
 	import { StatusTracker } from "@gradio/statustracker";
-	import type { LoadingStatus } from "@gradio/statustracker/types";
+	import type { LoadingStatus } from "@gradio/statustracker";
 
 	export let label = "ColorPicker";
 	export let info: string | undefined = undefined;

js/colorpicker/static/StaticColorpicker.svelte

@@ -4,7 +4,7 @@
 	import Colorpicker from "../shared";
 	import { Block } from "@gradio/atoms";
 	import { StatusTracker } from "@gradio/statustracker";
-	import type { LoadingStatus } from "@gradio/statustracker/types";
+	import type { LoadingStatus } from "@gradio/statustracker";
 
 	export let label = "ColorPicker";
 	export let info: string | undefined = undefined;

js/dataframe/index.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { LoadingStatus } from "@gradio/statustracker/types";
+	import type { LoadingStatus } from "@gradio/statustracker";
 
 	import StaticDataframe from "./static";
 	import InteractiveDataframe from "./interactive";

js/dataframe/interactive/InteractiveDataframe.svelte

@@ -2,7 +2,7 @@
 	import { Block } from "@gradio/atoms";
 	import Table from "../shared";
 	import { StatusTracker } from "@gradio/statustracker";
-	import type { LoadingStatus } from "@gradio/statustracker/types";
+	import type { LoadingStatus } from "@gradio/statustracker";
 	import { createEventDispatcher, afterUpdate } from "svelte";
 
 	type Headers = string[];

js/dataframe/static/StaticDataframe.svelte

@@ -2,7 +2,7 @@
 	import { Block } from "@gradio/atoms";
 	import Table from "../shared";
 	import { StatusTracker } from "@gradio/statustracker";
-	import type { LoadingStatus } from "@gradio/statustracker/types";
+	import type { LoadingStatus } from "@gradio/statustracker";
 	import { createEventDispatcher, afterUpdate } from "svelte";
 
 	type Headers = string[];
@@ -71,5 +71,6 @@
 		on:select
 		{wrap}
 		{datatype}
+		editable={false}
 	/>
 </Block>

js/dropdown/index.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import StaticDropdown from "./static";
 	import InteractiveDropdown from "./interactive";
-	import type { LoadingStatus } from "@gradio/statustracker/types";
+	import type { LoadingStatus } from "@gradio/statustracker";
 
 	export let label = "Dropdown";
 	export let info: string | undefined = undefined;

js/dropdown/interactive/InteractiveDropdown.svelte

@@ -2,7 +2,7 @@
 	import Dropdown from "../shared";
 	import { Block } from "@gradio/atoms";
 	import { StatusTracker } from "@gradio/statustracker";
-	import type { LoadingStatus } from "@gradio/statustracker/types";
+	import type { LoadingStatus } from "@gradio/statustracker";
 
 	export let label = "Dropdown";
 	export let info: string | undefined = undefined;

js/dropdown/static/StaticDropdown.svelte

@@ -2,7 +2,7 @@
 	import Dropdown from "../shared";
 	import { Block } from "@gradio/atoms";
 	import { StatusTracker } from "@gradio/statustracker";
-	import type { LoadingStatus } from "@gradio/statustracker/types";
+	import type { LoadingStatus } from "@gradio/statustracker";
 
 	export let label = "Dropdown";
 	export let info: string | undefined = undefined;

js/file/index.svelte

@@ -11,7 +11,7 @@
 
 	import { upload_files as default_upload_files } from "@gradio/client";
 
-	import type { LoadingStatus } from "@gradio/statustracker/types";
+	import type { LoadingStatus } from "@gradio/statustracker";
 
 	import { _ } from "svelte-i18n";
 

js/file/interactive/InteractiveFile.svelte

@@ -11,7 +11,7 @@
 	import { upload_files as default_upload_files } from "@gradio/client";
 
 	import { StatusTracker } from "@gradio/statustracker";
-	import type { LoadingStatus } from "@gradio/statustracker/types";
+	import type { LoadingStatus } from "@gradio/statustracker";
 
 	import { _ } from "svelte-i18n";
 

js/file/static/StaticFile.svelte

@@ -11,7 +11,7 @@
 	import { upload_files as default_upload_files } from "@gradio/client";
 
 	import { StatusTracker } from "@gradio/statustracker";
-	import type { LoadingStatus } from "@gradio/statustracker/types";
+	import type { LoadingStatus } from "@gradio/statustracker";
 
 	import { _ } from "svelte-i18n";
 

js/gallery/static/StaticGallery.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Block } from "@gradio/atoms";
 	import Gallery from "./Gallery.svelte";
-	import type { LoadingStatus } from "@gradio/statustracker/types";
+	import type { LoadingStatus } from "@gradio/statustracker";
 	import { StatusTracker } from "@gradio/statustracker";
 	import type { FileData } from "@gradio/upload";
 

js/highlightedtext/static/StaticHighlightedtext.svelte

@@ -4,7 +4,7 @@
 	import { Block, BlockLabel, Empty } from "@gradio/atoms";
 	import { TextHighlight } from "@gradio/icons";
 	import { StatusTracker } from "@gradio/statustracker";
-	import type { LoadingStatus } from "@gradio/statustracker/types";
+	import type { LoadingStatus } from "@gradio/statustracker";
 
 	export let elem_id = "";
 	export let elem_classes: string[] = [];

js/html/static/StaticHtml.svelte

@@ -2,7 +2,7 @@
 	import { createEventDispatcher } from "svelte";
 	import HTML from "./HTML.svelte";
 	import { StatusTracker } from "@gradio/statustracker";
-	import type { LoadingStatus } from "@gradio/statustracker/types";
+	import type { LoadingStatus } from "@gradio/statustracker";
 	import { Block } from "@gradio/atoms";
 
 	export let label: string;

js/image/Image.test.ts

@@ -12,7 +12,7 @@ import { cleanup, render } from "@gradio/tootils";
 import { setupi18n } from "../app/src/i18n";
 
 import Image from "./index.svelte";
-import type { LoadingStatus } from "@gradio/statustracker/types";
+import type { LoadingStatus } from "@gradio/statustracker";
 
 const loading_status = {
 	eta: 0,

js/image/index.svelte

@@ -11,7 +11,7 @@
 	import { Block } from "@gradio/atoms";
 	import { _ } from "svelte-i18n";
 	import { StatusTracker } from "@gradio/statustracker";
-	import type { LoadingStatus } from "@gradio/statustracker/types";
+	import type { LoadingStatus } from "@gradio/statustracker";
 	import { UploadText } from "@gradio/atoms";
 
 	export let elem_id = "";

js/image/interactive/InteractiveImage.svelte

@@ -7,7 +7,7 @@
 	import { Block } from "@gradio/atoms";
 	import { _ } from "svelte-i18n";
 	import { StatusTracker } from "@gradio/statustracker";
-	import type { LoadingStatus } from "@gradio/statustracker/types";
+	import type { LoadingStatus } from "@gradio/statustracker";
 	import { UploadText } from "@gradio/atoms";
 
 	export let elem_id = "";

js/image/static/StaticImage.svelte

@@ -7,7 +7,7 @@
 	import { Block } from "@gradio/atoms";
 	import { _ } from "svelte-i18n";
 	import { StatusTracker } from "@gradio/statustracker";
-	import type { LoadingStatus } from "@gradio/statustracker/types";
+	import type { LoadingStatus } from "@gradio/statustracker";
 
 	export let elem_id = "";
 	export let elem_classes: string[] = [];

js/json/static/StaticJson.svelte

@@ -5,7 +5,7 @@
 	import { JSON as JSONIcon } from "@gradio/icons";
 
 	import { StatusTracker } from "@gradio/statustracker";
-	import type { LoadingStatus } from "@gradio/statustracker/types";
+	import type { LoadingStatus } from "@gradio/statustracker";
 	import { _ } from "svelte-i18n";
 
 	export let elem_id = "";

js/label/Label.component.spec.ts

@@ -2,7 +2,7 @@ import { test, expect } from "@playwright/experimental-ct-svelte";
 import Label from "./static";
 import { spy } from "tinyspy";
 
-import type { LoadingStatus } from "@gradio/statustracker/types";
+import type { LoadingStatus } from "@gradio/statustracker";
 
 const loading_status: LoadingStatus = {
 	eta: 0,

js/label/static/StaticLabel.svelte

@@ -4,7 +4,7 @@
 	import { LineChart as LabelIcon } from "@gradio/icons";
 	import { Block, BlockLabel, Empty } from "@gradio/atoms";
 	import { StatusTracker } from "@gradio/statustracker";
-	import type { LoadingStatus } from "@gradio/statustracker/types";
+	import type { LoadingStatus } from "@gradio/statustracker";
 
 	export let elem_id = "";
 	export let elem_classes: string[] = [];

js/markdown/static/StaticMarkdown.svelte

@@ -3,7 +3,7 @@
 	import Markdown from "./Markdown.svelte";
 
 	import { StatusTracker } from "@gradio/statustracker";
-	import type { LoadingStatus } from "@gradio/statustracker/types";
+	import type { LoadingStatus } from "@gradio/statustracker";
 	import { Block } from "@gradio/atoms";
 
 	export let label: string;

js/model3D/index.svelte

@@ -3,7 +3,7 @@
 	import Interactive from "./interactive";
 
 	import type { FileData } from "@gradio/upload";
-	import type { LoadingStatus } from "@gradio/statustracker/types";
+	import type { LoadingStatus } from "@gradio/statustracker";
 
 	export let elem_id = "";
 	export let elem_classes: string[] = [];

js/model3D/interactive/InteractiveModel3d.svelte

@@ -5,7 +5,7 @@
 	import { Block, UploadText } from "@gradio/atoms";
 
 	import { StatusTracker } from "@gradio/statustracker";
-	import type { LoadingStatus } from "@gradio/statustracker/types";
+	import type { LoadingStatus } from "@gradio/statustracker";
 	import { _ } from "svelte-i18n";
 
 	export let elem_id = "";

js/model3D/static/StaticModel3d.svelte

@@ -6,7 +6,7 @@
 	import { File } from "@gradio/icons";
 
 	import { StatusTracker } from "@gradio/statustracker";
-	import type { LoadingStatus } from "@gradio/statustracker/types";
+	import type { LoadingStatus } from "@gradio/statustracker";
 	import { _ } from "svelte-i18n";
 
 	export let elem_id = "";

js/number/index.svelte

@@ -5,7 +5,7 @@
 	import Number from "./static";
 	import { Block } from "@gradio/atoms";
 	import { StatusTracker } from "@gradio/statustracker";
-	import type { LoadingStatus } from "@gradio/statustracker/types";
+	import type { LoadingStatus } from "@gradio/statustracker";
 
 	export let label = "Number";
 	export let info: string | undefined = undefined;

js/number/interactive/InteractiveNumber.svelte

@@ -2,7 +2,7 @@
 	import Number from "../shared";
 	import { Block } from "@gradio/atoms";
 	import { StatusTracker } from "@gradio/statustracker";
-	import type { LoadingStatus } from "@gradio/statustracker/types";
+	import type { LoadingStatus } from "@gradio/statustracker";
 
 	export let label = "Number";
 	export let info: string | undefined = undefined;

js/number/static/StaticNumber.svelte

@@ -2,7 +2,7 @@
 	import Number from "../shared";
 	import { Block } from "@gradio/atoms";
 	import { StatusTracker } from "@gradio/statustracker";
-	import type { LoadingStatus } from "@gradio/statustracker/types";
+	import type { LoadingStatus } from "@gradio/statustracker";
 
 	export let label = "Number";
 	export let info: string | undefined = undefined;

js/plot/static/StaticPlot.svelte

@@ -5,7 +5,7 @@
 	import { Plot as PlotIcon } from "@gradio/icons";
 
 	import { StatusTracker } from "@gradio/statustracker";
-	import type { LoadingStatus } from "@gradio/statustracker/types";
+	import type { LoadingStatus } from "@gradio/statustracker";
 	import { _ } from "svelte-i18n";
 	import type { ThemeMode } from "js/app/src/components/types";
 

js/radio/Radio.test.ts

@@ -4,7 +4,7 @@ import { cleanup, render } from "@gradio/tootils";
 import event from "@testing-library/user-event";
 
 import Radio from "./index.svelte";
-import type { LoadingStatus } from "@gradio/statustracker/types";
+import type { LoadingStatus } from "@gradio/statustracker";
 
 const loading_status = {
 	eta: 0,

js/radio/index.svelte

@@ -5,7 +5,7 @@
 	import Radio from "./static";
 	import { Block } from "@gradio/atoms";
 	import { StatusTracker } from "@gradio/statustracker";
-	import type { LoadingStatus } from "@gradio/statustracker/types";
+	import type { LoadingStatus } from "@gradio/statustracker";
 
 	export let label = "Radio";
 	export let info: string | undefined = undefined;

js/radio/interactive/InteractiveRadio.svelte

@@ -2,7 +2,7 @@
 	import Radio from "../shared";
 	import { Block } from "@gradio/atoms";
 	import { StatusTracker } from "@gradio/statustracker";
-	import type { LoadingStatus } from "@gradio/statustracker/types";
+	import type { LoadingStatus } from "@gradio/statustracker";
 
 	export let label = "Radio";
 	export let info: string | undefined = undefined;

js/radio/static/Radio.svelte

@@ -2,7 +2,7 @@
 	import Radio from "../shared";
 	import { Block } from "@gradio/atoms";
 	import { StatusTracker } from "@gradio/statustracker";
-	import type { LoadingStatus } from "@gradio/statustracker/types";
+	import type { LoadingStatus } from "@gradio/statustracker";
 
 	export let label = "Radio";
 	export let info: string | undefined = undefined;

js/slider/Slider.component.spec.ts

@@ -3,7 +3,7 @@ import type { Page, Locator } from "@playwright/test";
 import Slider from "./index.svelte";
 import { spy } from "tinyspy";
 
-import type { LoadingStatus } from "@gradio/statustracker/types";
+import type { LoadingStatus } from "@gradio/statustracker";
 
 const loading_status: LoadingStatus = {
 	eta: 0,

js/slider/index.svelte

@@ -2,7 +2,7 @@
 	import Static from "./static";
 	import Interactive from "./interactive";
 
-	import type { LoadingStatus } from "@gradio/statustracker/types";
+	import type { LoadingStatus } from "@gradio/statustracker";
 
 	export let elem_id = "";
 	export let elem_classes: string[] = [];