@gradio/multimodaltextbox 0.10.19 → 0.10.21

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @gradio/multimodaltextbox
 
+## 0.10.21
+
+### Fixes
+
+- [#12019](https://github.com/gradio-app/gradio/pull/12019) [`81fc464`](https://github.com/gradio-app/gradio/commit/81fc4647cdc9ffd724b69ec7286f1d686571062a) - Fix MultimodalTextbox autofocus issue when file_types is specified.  Thanks @freddyaboulton!
+
+## 0.10.20
+
+### Dependency updates
+
+- @gradio/client@1.19.1
+
+## 0.10.20
+
+### Fixes
+
+- [#11937](https://github.com/gradio-app/gradio/pull/11937) [`1b97ed7`](https://github.com/gradio-app/gradio/commit/1b97ed760c6adc6f7eef613904b90a0bfd0e9970) - Fix bug where multimodaltextbox would focus on any app update.  Thanks @freddyaboulton!
+
+### Dependency updates
+
+- @gradio/image@0.23.1
+- @gradio/upload@0.17.1
+- @gradio/atoms@0.18.1
+
 ## 0.10.19
 
 ### Fixes

package/Index.svelte

@@ -107,6 +107,24 @@
 			trim_region_settings.color || color_accent
 		);
 	}
+
+	// Create const references to the callbacks so that afterUpdate in child is not called on every prop change
+	// in the DOM. See https://github.com/gradio-app/gradio/issues/11933
+	// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+	const upload_fn = (...args: Parameters<typeof gradio.client.upload>) =>
+		gradio.client.upload(...args);
+	const i18n = (s: string | null | undefined): string => gradio.i18n(s);
+	const stream_handler_fn = (
+		...args: Parameters<typeof gradio.client.stream>
+	): EventSource => gradio.client.stream(...args);
+
+	$: sources_string = sources.join(",") as
+		| "upload"
+		| "upload,microphone"
+		| "microphone"
+		| "microphone,upload";
+
+	$: file_types_string = (file_types || []).join(",") || null;
 </script>
 
 <Block
@@ -133,7 +151,7 @@
 		bind:value_is_output
 		bind:dragging
 		bind:active_source
-		{file_types}
+		{file_types_string}
 		{root}
 		{label}
 		{info}
@@ -142,7 +160,7 @@
 		{rtl}
 		{text_align}
 		{waveform_settings}
-		i18n={gradio.i18n}
+		{i18n}
 		max_lines={!max_lines ? lines + 1 : max_lines}
 		{placeholder}
 		{submit_btn}
@@ -150,7 +168,7 @@
 		{autofocus}
 		{autoscroll}
 		{file_count}
-		{sources}
+		{sources_string}
 		max_file_size={gradio.max_file_size}
 		on:change={() => gradio.dispatch("change", value)}
 		on:input={() => gradio.dispatch("input")}
@@ -168,8 +186,8 @@
 		on:upload={(e) => gradio.dispatch("upload", e.detail)}
 		on:clear={() => gradio.dispatch("clear")}
 		disabled={!interactive}
-		upload={(...args) => gradio.client.upload(...args)}
-		stream_handler={(...args) => gradio.client.stream(...args)}
+		upload={upload_fn}
+		stream_handler={stream_handler_fn}
 		{max_plain_text_length}
 		{html_attributes}
 	/>

package/dist/Index.svelte

@@ -77,6 +77,11 @@ function set_trim_region_colour() {
     trim_region_settings.color || color_accent
   );
 }
+const upload_fn = (...args) => gradio.client.upload(...args);
+const i18n = (s) => gradio.i18n(s);
+const stream_handler_fn = (...args) => gradio.client.stream(...args);
+$: sources_string = sources.join(",");
+$: file_types_string = (file_types || []).join(",") || null;
 </script>
 
 <Block
@@ -103,7 +108,7 @@ function set_trim_region_colour() {
 		bind:value_is_output
 		bind:dragging
 		bind:active_source
-		{file_types}
+		{file_types_string}
 		{root}
 		{label}
 		{info}
@@ -112,7 +117,7 @@ function set_trim_region_colour() {
 		{rtl}
 		{text_align}
 		{waveform_settings}
-		i18n={gradio.i18n}
+		{i18n}
 		max_lines={!max_lines ? lines + 1 : max_lines}
 		{placeholder}
 		{submit_btn}
@@ -120,7 +125,7 @@ function set_trim_region_colour() {
 		{autofocus}
 		{autoscroll}
 		{file_count}
-		{sources}
+		{sources_string}
 		max_file_size={gradio.max_file_size}
 		on:change={() => gradio.dispatch("change", value)}
 		on:input={() => gradio.dispatch("input")}
@@ -138,8 +143,8 @@ function set_trim_region_colour() {
 		on:upload={(e) => gradio.dispatch("upload", e.detail)}
 		on:clear={() => gradio.dispatch("clear")}
 		disabled={!interactive}
-		upload={(...args) => gradio.client.upload(...args)}
-		stream_handler={(...args) => gradio.client.stream(...args)}
+		upload={upload_fn}
+		stream_handler={stream_handler_fn}
 		{max_plain_text_length}
 		{html_attributes}
 	/>

package/dist/shared/MultimodalTextbox.svelte

@@ -40,7 +40,7 @@ export let autofocus = false;
 export let text_align = void 0;
 export let autoscroll = true;
 export let root;
-export let file_types = null;
+export let file_types_string = null;
 export let max_file_size = null;
 export let upload;
 export let stream_handler;
@@ -50,7 +50,7 @@ export let waveform_settings;
 export let waveform_options = {
   show_recording_waveform: true
 };
-export let sources = ["upload"];
+export let sources_string = "upload";
 export let active_source = null;
 export let html_attributes = null;
 let upload_component;
@@ -62,6 +62,8 @@ export let dragging = false;
 let uploading = false;
 let oldValue = value?.text ?? "";
 let recording = false;
+$: sources = sources_string.split(",").map((s) => s.trim()).filter((s) => s === "upload" || s === "microphone");
+$: file_types = file_types_string ? file_types_string.split(",").map((s) => s.trim()) : null;
 $: dispatch("drag", dragging);
 let mic_audio = null;
 let full_container;
@@ -91,15 +93,15 @@ onMount(() => {
     el.focus();
   }
 });
-afterUpdate(() => {
+const after_update = () => {
   if (can_scroll && autoscroll) {
     scroll();
   }
-  if (autofocus && el !== null) {
+  if (autofocus && el) {
     el.focus();
   }
-  value_is_output = false;
-});
+};
+afterUpdate(after_update);
 function handle_select(event) {
   const target = event.target;
   const text = target.value;

package/dist/shared/MultimodalTextbox.svelte.d.ts

@@ -25,7 +25,7 @@ declare const __propDef: {
         text_align?: "left" | "right" | undefined;
         autoscroll?: boolean;
         root: string;
-        file_types?: string[] | null;
+        file_types_string?: string | null;
         max_file_size?: number | null;
         upload: Client["upload"];
         stream_handler: Client["stream"];
@@ -33,7 +33,7 @@ declare const __propDef: {
         max_plain_text_length?: number;
         waveform_settings: Record<string, any>;
         waveform_options?: any;
-        sources?: ["microphone" | "upload"];
+        sources_string?: "upload" | "upload,microphone" | "microphone" | "microphone,upload";
         active_source?: "microphone" | null;
         html_attributes?: InputHTMLAttributes | null;
         dragging?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/multimodaltextbox",
-  "version": "0.10.19",
+  "version": "0.10.21",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -22,14 +22,14 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@gradio/atoms": "^0.18.0",
-    "@gradio/statustracker": "^0.11.1",
-    "@gradio/utils": "^0.10.2",
-    "@gradio/image": "^0.23.0",
+    "@gradio/atoms": "^0.18.1",
     "@gradio/icons": "^0.14.0",
+    "@gradio/utils": "^0.10.2",
+    "@gradio/statustracker": "^0.11.1",
+    "@gradio/upload": "^0.17.1",
+    "@gradio/image": "^0.23.1",
     "@gradio/video": "^0.16.0",
-    "@gradio/client": "^1.19.0",
-    "@gradio/upload": "^0.17.0"
+    "@gradio/client": "^1.19.1"
   },
   "devDependencies": {
     "@gradio/preview": "^0.14.0"

package/shared/MultimodalTextbox.svelte

@@ -48,7 +48,7 @@
 	export let text_align: "left" | "right" | undefined = undefined;
 	export let autoscroll = true;
 	export let root: string;
-	export let file_types: string[] | null = null;
+	export let file_types_string: string | null = null;
 	export let max_file_size: number | null = null;
 	export let upload: Client["upload"];
 	export let stream_handler: Client["stream"];
@@ -58,7 +58,11 @@
 	export let waveform_options: WaveformOptions = {
 		show_recording_waveform: true
 	};
-	export let sources: ["microphone" | "upload"] = ["upload"];
+	export let sources_string:
+		| "upload"
+		| "upload,microphone"
+		| "microphone"
+		| "microphone,upload" = "upload";
 	export let active_source: "microphone" | null = null;
 	export let html_attributes: InputHTMLAttributes | null = null;
 
@@ -72,6 +76,17 @@
 	// value can be null in multimodalchatinterface when loading a deep link
 	let oldValue = value?.text ?? "";
 	let recording = false;
+
+	$: sources = sources_string
+		.split(",")
+		.map((s) => s.trim())
+		.filter((s) => s === "upload" || s === "microphone") as (
+		| "upload"
+		| "microphone"
+	)[];
+	$: file_types = file_types_string
+		? file_types_string.split(",").map((s) => s.trim())
+		: null;
 	$: dispatch("drag", dragging);
 	let mic_audio: FileData | null = null;
 
@@ -126,15 +141,16 @@
 		}
 	});
 
-	afterUpdate(() => {
+	const after_update = (): void => {
 		if (can_scroll && autoscroll) {
 			scroll();
 		}
-		if (autofocus && el !== null) {
+		if (autofocus && el) {
 			el.focus();
 		}
-		value_is_output = false;
-	});
+	};
+
+	afterUpdate(after_update);
 
 	function handle_select(event: Event): void {
 		const target: HTMLTextAreaElement | HTMLInputElement = event.target as