@gradio/multimodaltextbox 0.10.22-dev.0 → 0.11.0

package/CHANGELOG.md

@@ -1,4 +1,61 @@
 # @gradio/multimodaltextbox
+## 0.11.0
+
+### Features
+
+- [#11908](https://github.com/gradio-app/gradio/pull/11908) [`029034f`](https://github.com/gradio-app/gradio/commit/029034f7853ea018d110efe9b7e2ef7d1407091c) - remove_placeholder_type_here
+- [#11908](https://github.com/gradio-app/gradio/pull/11908) [`029034f`](https://github.com/gradio-app/gradio/commit/029034f7853ea018d110efe9b7e2ef7d1407091c) - Clear Error statuses
+- [#11908](https://github.com/gradio-app/gradio/pull/11908) [`029034f`](https://github.com/gradio-app/gradio/commit/029034f7853ea018d110efe9b7e2ef7d1407091c) - Improve gr.MultimodalTextbox in mobile
+- [#11908](https://github.com/gradio-app/gradio/pull/11908) [`029034f`](https://github.com/gradio-app/gradio/commit/029034f7853ea018d110efe9b7e2ef7d1407091c) - Add minimal recording UI to gr.MultimodalTextbox
+- [#11908](https://github.com/gradio-app/gradio/pull/11908) [`029034f`](https://github.com/gradio-app/gradio/commit/029034f7853ea018d110efe9b7e2ef7d1407091c) - Add back default values for labels
+- [#11908](https://github.com/gradio-app/gradio/pull/11908) [`029034f`](https://github.com/gradio-app/gradio/commit/029034f7853ea018d110efe9b7e2ef7d1407091c) - Unit test fixes
+- [#12438](https://github.com/gradio-app/gradio/pull/12438) [`25ffc03`](https://github.com/gradio-app/gradio/commit/25ffc0398f8feb43d817c02b2ab970c16de6d797) - Svelte5 migration and bugfix
+
+### Dependencies
+
+- @gradio/atoms@0.19.0
+- @gradio/icons@0.15.0
+- @gradio/statustracker@0.12.0
+- @gradio/utils@0.10.3
+- @gradio/upload@0.17.2
+- @gradio/image@0.24.0
+- @gradio/video@0.17.0
+- @gradio/client@2.0.0
+- @gradio/audio@0.20.0
+
+## 0.11.0-dev.2
+
+### Dependency updates
+
+- @gradio/atoms@0.19.0-dev.1
+- @gradio/client@2.0.0-dev.2
+- @gradio/statustracker@0.12.0-dev.1
+- @gradio/upload@0.17.2-dev.2
+- @gradio/audio@0.20.0-dev.4
+- @gradio/image@0.24.0-dev.2
+- @gradio/video@0.17.0-dev.2
+
+## 0.11.0-dev.1
+
+### Features
+
+- [#12088](https://github.com/gradio-app/gradio/pull/12088) [`199de34`](https://github.com/gradio-app/gradio/commit/199de3428291b799ae334474132f3d2ceef31e9d) - Improve gr.MultimodalTextbox in mobile.  Thanks @hannahblair!
+
+### Dependency updates
+
+- @gradio/atoms@0.18.2-dev.0
+- @gradio/upload@0.17.2-dev.1
+- @gradio/utils@0.10.3-dev.0
+- @gradio/image@0.23.2-dev.1
+- @gradio/statustracker@0.12.0-dev.0
+- @gradio/icons@0.15.0-dev.0
+- @gradio/video@0.17.0-dev.1
+
+## 0.10.22-dev.0
+
+### Dependency updates
+
+- @gradio/client@2.0.0-dev.1
 
 ## 0.10.22-dev.0
 

package/Index.svelte

@@ -6,84 +6,46 @@
 </script>
 
 <script lang="ts">
-	import type { Gradio, SelectData } from "@gradio/utils";
+	import { Gradio, type SelectData } from "@gradio/utils";
 	import MultimodalTextbox from "./shared/MultimodalTextbox.svelte";
 	import { Block } from "@gradio/atoms";
 	import { StatusTracker } from "@gradio/statustracker";
-	import type { LoadingStatus } from "@gradio/statustracker";
-	import type { FileData } from "@gradio/client";
-	import { onMount } from "svelte";
+	import { onMount, tick } from "svelte";
 	import type { WaveformOptions } from "../audio/shared/types";
-	import type { InputHTMLAttributes } from "./shared/types";
-
-	export let gradio: Gradio<{
-		change: typeof value;
-		submit: never;
-		stop: never;
-		blur: never;
-		select: SelectData;
-		input: never;
-		focus: never;
-		error: string;
-		clear_status: LoadingStatus;
-		start_recording: never;
-		pause_recording: never;
-		stop_recording: never;
-		upload: FileData[] | FileData;
-		clear: undefined;
-	}>;
-	export let elem_id = "";
-	export let elem_classes: string[] = [];
-	export let visible: boolean | "hidden" = true;
-	export let value: { text: string; files: FileData[] } = {
-		text: "",
-		files: []
-	};
-	export let file_types: string[] | null = null;
-	export let lines: number;
-	export let placeholder = "";
-	export let label = "MultimodalTextbox";
-	export let info: string | undefined = undefined;
-	export let show_label: boolean;
-	export let max_lines: number;
-	export let scale: number | null = null;
-	export let min_width: number | undefined = undefined;
-	export let submit_btn: string | boolean | null = null;
-	export let stop_btn: string | boolean | null = null;
-	export let loading_status: LoadingStatus | undefined = undefined;
-	export let value_is_output = false;
-	export let rtl = false;
-	export let text_align: "left" | "right" | undefined = undefined;
-	export let autofocus = false;
-	export let autoscroll = true;
-	export let interactive: boolean;
-	export let root: string;
-	export let file_count: "single" | "multiple" | "directory";
-	export let max_plain_text_length: number;
-	export let sources: ["microphone" | "upload"] = ["upload"];
-	export let waveform_options: WaveformOptions = {};
-	export let html_attributes: InputHTMLAttributes | null = null;
-
-	let dragging: boolean;
-	let active_source: "microphone" | null = null;
-	let waveform_settings: Record<string, any>;
-	let color_accent = "darkorange";
+	import type {
+		MultimodalTextboxProps,
+		MultimodalTextboxEvents
+	} from "./types";
 
-	onMount(() => {
-		color_accent = getComputedStyle(document?.documentElement).getPropertyValue(
-			"--color-accent"
-		);
-		set_trim_region_colour();
-		waveform_settings.waveColor = waveform_options.waveform_color || "#9ca3af";
-		waveform_settings.progressColor =
-			waveform_options.waveform_progress_color || color_accent;
-		waveform_settings.mediaControls = waveform_options.show_controls;
-		waveform_settings.sampleRate = waveform_options.sample_rate || 44100;
-	});
+	let upload_promise = $state<Promise<any>>();
 
-	$: waveform_settings = {
-		height: 50,
+	class MultimodalTextboxGradio extends Gradio<
+		MultimodalTextboxEvents,
+		MultimodalTextboxProps
+	> {
+		async get_data() {
+			if (upload_promise) {
+				await upload_promise;
+				await tick();
+			}
+			const data = await super.get_data();
+
+			return data;
+		}
+	}
+
+	let props = $props();
+	const gradio = new MultimodalTextboxGradio(props);
 
+	const value = $derived(gradio.props.value || { text: "", files: [] });
+
+	let dragging = $state<boolean>(false);
+	let active_source = $state<"microphone" | null>(null);
+
+	let color_accent = "darkorange";
+
+	const waveform_settings = {
+		height: 50,
 		barWidth: 2,
 		barGap: 3,
 		cursorWidth: 2,
@@ -92,11 +54,30 @@
 		barRadius: 10,
 		dragToSeek: true,
 		normalize: true,
-		minPxPerSec: 20
+		minPxPerSec: 20,
+		waveColor: "",
+		progressColor: "",
+		mediaControls: false as boolean | undefined,
+		sampleRate: 44100
 	};
 
+	onMount(() => {
+		color_accent = getComputedStyle(document?.documentElement).getPropertyValue(
+			"--color-accent"
+		);
+		set_trim_region_colour();
+		waveform_settings.waveColor =
+			gradio.props?.waveform_options?.waveform_color || "#9ca3af";
+		waveform_settings.progressColor =
+			gradio.props?.waveform_options?.waveform_progress_color || color_accent;
+		waveform_settings.mediaControls =
+			gradio.props?.waveform_options?.show_controls;
+		waveform_settings.sampleRate =
+			gradio.props?.waveform_options?.sample_rate || 44100;
+	});
+
 	const trim_region_settings = {
-		color: waveform_options.trim_region_color,
+		color: gradio.props?.waveform_options?.trim_region_color,
 		drag: true,
 		resize: true
 	};
@@ -111,66 +92,77 @@
 	// 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 upload_fn = (...args: Parameters<typeof gradio.shared.client.upload>) =>
+		gradio.shared.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);
+		...args: Parameters<typeof gradio.shared.client.stream>
+	): EventSource => gradio.shared.client.stream(...args);
 
-	$: sources_string = sources.join(",") as
-		| "upload"
-		| "upload,microphone"
-		| "microphone"
-		| "microphone,upload";
+	let sources_string = $derived(
+		gradio.props.sources.join(",") as
+			| "upload"
+			| "upload,microphone"
+			| "microphone"
+			| "microphone,upload"
+	);
 
-	$: file_types_string = (file_types || []).join(",") || null;
+	let file_types_string = $derived.by(
+		() => (gradio.props.file_types || []).join(",") || null
+	);
 </script>
 
 <Block
-	{visible}
-	{elem_id}
-	elem_classes={[...elem_classes, "multimodal-textbox"]}
-	{scale}
-	{min_width}
+	visible={gradio.shared.visible}
+	elem_id={gradio.shared.elem_id}
+	elem_classes={[...(gradio.shared.elem_classes || []), "multimodal-textbox"]}
+	scale={gradio.shared.scale}
+	min_width={gradio.shared.min_width}
 	allow_overflow={false}
 	padding={false}
 	border_mode={dragging ? "focus" : "base"}
 >
-	{#if loading_status}
+	{#if gradio.shared.loading_status}
 		<StatusTracker
-			autoscroll={gradio.autoscroll}
+			autoscroll={gradio.shared.autoscroll}
 			i18n={gradio.i18n}
-			{...loading_status}
-			on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
+			{...gradio.shared.loading_status}
+			on_clear_status={() =>
+				gradio.dispatch("clear_status", gradio.shared.loading_status)}
 		/>
 	{/if}
 
 	<MultimodalTextbox
-		bind:value
-		bind:value_is_output
+		bind:upload_promise
+		{value}
+		value_is_output
 		bind:dragging
 		bind:active_source
 		{file_types_string}
-		{root}
-		{label}
-		{info}
-		{show_label}
-		{lines}
-		{rtl}
-		{text_align}
-		{waveform_settings}
+		root={gradio.shared.root}
+		label={gradio.shared.label || "MultimodalTextbox"}
+		info={gradio.props.info}
+		show_label={gradio.shared.show_label}
+		lines={gradio.props.lines}
+		rtl={gradio.props.rtl}
+		text_align={gradio.props.text_align}
+		waveform_settings={waveform_settings as WaveformOptions}
 		{i18n}
-		max_lines={!max_lines ? lines + 1 : max_lines}
-		{placeholder}
-		{submit_btn}
-		{stop_btn}
-		{autofocus}
-		{autoscroll}
-		{file_count}
+		max_lines={!gradio.props.max_lines
+			? gradio.props.lines + 1
+			: gradio.props.max_lines}
+		placeholder={gradio.props.placeholder}
+		submit_btn={gradio.props.submit_btn}
+		stop_btn={gradio.props.stop_btn}
+		autofocus={gradio.props.autofocus}
+		autoscroll={gradio.shared.autoscroll}
+		file_count={gradio.props.file_count}
 		{sources_string}
-		max_file_size={gradio.max_file_size}
-		on:change={() => gradio.dispatch("change", value)}
+		max_file_size={gradio.shared.max_file_size}
+		on:change={(e) => (
+			(gradio.props.value = e.detail),
+			gradio.dispatch("change", gradio.props.value)
+		)}
 		on:input={() => gradio.dispatch("input")}
 		on:submit={() => gradio.dispatch("submit")}
 		on:stop={() => gradio.dispatch("stop")}
@@ -185,10 +177,10 @@
 		on:stop_recording={() => gradio.dispatch("stop_recording")}
 		on:upload={(e) => gradio.dispatch("upload", e.detail)}
 		on:clear={() => gradio.dispatch("clear")}
-		disabled={!interactive}
+		disabled={!gradio.shared.interactive}
 		upload={upload_fn}
 		stream_handler={stream_handler_fn}
-		{max_plain_text_length}
-		{html_attributes}
+		max_plain_text_length={gradio.props.max_plain_text_length}
+		html_attributes={gradio.props.html_attributes}
 	/>
 </Block>

package/MultimodalTextbox.test.ts

@@ -28,7 +28,8 @@ describe("MultimodalTextbox", () => {
 			value: { text: "hello world", files: [] },
 			label: "Textbox",
 			interactive: false,
-			root: ""
+			root: "",
+			sources: []
 		});
 
 		const item: HTMLInputElement = getByDisplayValue(
@@ -38,19 +39,17 @@ describe("MultimodalTextbox", () => {
 	});
 
 	test("changing the text should update the value", async () => {
-		const { component, getByDisplayValue, listen } = await render(
-			MultimodalTextbox,
-			{
-				show_label: true,
-				max_lines: 10,
-				loading_status,
-				lines: 1,
-				value: { text: "hi ", files: [] },
-				label: "MultimodalTextbox",
-				interactive: true,
-				root: ""
-			}
-		);
+		const { getByDisplayValue, listen } = await render(MultimodalTextbox, {
+			show_label: true,
+			max_lines: 10,
+			loading_status,
+			lines: 1,
+			value: { text: "hi ", files: [] },
+			label: "MultimodalTextbox",
+			interactive: true,
+			root: "",
+			sources: []
+		});
 
 		const item: HTMLInputElement = getByDisplayValue("hi") as HTMLInputElement;
 
@@ -60,14 +59,13 @@ describe("MultimodalTextbox", () => {
 		await event.keyboard("some text");
 
 		assert.equal(item.value, "hi some text");
-		assert.equal(component.value.text, "hi some text");
 		assert.equal(mock.callCount, 9);
 		assert.equal(mock.calls[8][0].detail.data.text, "hi some text");
 		assert.equal(mock.calls[8][0].detail.data.files.length, 0);
 	});
 
 	test("submitting should clear mic_audio", async () => {
-		const { component } = await render(MultimodalTextbox, {
+		const { getByTestId, listen } = await render(MultimodalTextbox, {
 			show_label: true,
 			max_lines: 10,
 			loading_status,
@@ -76,12 +74,13 @@ describe("MultimodalTextbox", () => {
 			label: "MultimodalTextbox",
 			interactive: true,
 			root: "",
-			sources: ["microphone"]
+			sources: ["microphone"],
+			submit_btn: true
 		});
 
-		component.$set({ mic_audio: { url: "test.mp3", mime_type: "audio/mp3" } });
-		component.$set({ active_source: "microphone" });
-		await component.$$.ctx[component.$$.props["handle_submit"]];
-		assert.equal(component.mic_audio, null);
+		const mock = listen("submit");
+		const submitButton = getByTestId("submit-button");
+		await event.click(submitButton);
+		assert.equal(mock.callCount, 1);
 	});
 });

package/README.md

@@ -11,7 +11,7 @@ BaseMultimodalTextbox
 	export let value = "";
 	export let value_is_output = false;
 	export let lines = 1;
-	export let placeholder = "Type here...";
+	export let placeholder = "";
 	export let label: string;
 	export let info: string | undefined = undefined;
 	export let disabled = false;

package/dist/Example.svelte

@@ -1,24 +1,30 @@
-<script>import { onMount } from "svelte";
-import { Image } from "@gradio/image/shared";
-import { Video } from "@gradio/video/shared";
-export let value = {
-  text: "",
-  files: []
-};
-export let type;
-export let selected = false;
-let size;
-let el;
-function set_styles(element, el_width) {
-  element.style.setProperty(
-    "--local-text-width",
-    `${el_width && el_width < 150 ? el_width : 200}px`
-  );
-  element.style.whiteSpace = "unset";
-}
-onMount(() => {
-  set_styles(el, size);
-});
+<script lang="ts">
+	import { onMount } from "svelte";
+	import { Image } from "@gradio/image/shared";
+	import { Video } from "@gradio/video/shared";
+	import type { FileData } from "@gradio/client";
+
+	export let value: { text: string; files: FileData[] } = {
+		text: "",
+		files: []
+	};
+	export let type: "gallery" | "table";
+	export let selected = false;
+
+	let size: number;
+	let el: HTMLDivElement;
+
+	function set_styles(element: HTMLElement, el_width: number): void {
+		element.style.setProperty(
+			"--local-text-width",
+			`${el_width && el_width < 150 ? el_width : 200}px`
+		);
+		element.style.whiteSpace = "unset";
+	}
+
+	onMount(() => {
+		set_styles(el, size);
+	});
 </script>
 
 <div

package/dist/Example.svelte.d.ts

@@ -1,24 +1,26 @@
-import { SvelteComponent } from "svelte";
 import type { FileData } from "@gradio/client";
-declare const __propDef: {
-    props: {
-        value?: {
-            text: string;
-            files: FileData[];
-        };
-        type: "gallery" | "table";
-        selected?: boolean;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type ExampleProps = typeof __propDef.props;
-export type ExampleEvents = typeof __propDef.events;
-export type ExampleSlots = typeof __propDef.slots;
-export default class Example extends SvelteComponent<ExampleProps, ExampleEvents, ExampleSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Example: $$__sveltets_2_IsomorphicComponent<{
+    value?: {
+        text: string;
+        files: FileData[];
+    };
+    type: "gallery" | "table";
+    selected?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Example = InstanceType<typeof Example>;
+export default Example;