@gradio/multimodaltextbox 0.11.3 → 0.11.5

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # @gradio/multimodaltextbox
 
+## 0.11.5
+
+### Fixes
+
+- [#12789](https://github.com/gradio-app/gradio/pull/12789) [`af5e86f`](https://github.com/gradio-app/gradio/commit/af5e86f10d95cc71ee4cb950e455dbdc8e138983) - Migrate gr.MultimodalTextbox.  Thanks @hannahblair!
+
+### Dependency updates
+
+- @gradio/atoms@0.21.0
+- @gradio/client@2.0.4
+- @gradio/statustracker@0.12.3
+- @gradio/image@0.25.2
+- @gradio/upload@0.17.5
+- @gradio/video@0.20.2
+- @gradio/audio@0.22.2
+
+## 0.11.4
+
+### Fixes
+
+- [#12800](https://github.com/gradio-app/gradio/pull/12800) [`7a1c321`](https://github.com/gradio-app/gradio/commit/7a1c321b6546ba05a353488f5133e8262c4a8a39) - Bump svelte/kit for security reasons.  Thanks @freddyaboulton!
+- [#12779](https://github.com/gradio-app/gradio/pull/12779) [`ea2d3e9`](https://github.com/gradio-app/gradio/commit/ea2d3e985a8b42d188e551f517c5825c00790628) - Migrate Audio + Upload + Atoms to Svelte 5.  Thanks @dawoodkhan82!
+- [#12795](https://github.com/gradio-app/gradio/pull/12795) [`184968a`](https://github.com/gradio-app/gradio/commit/184968aa13636b5afe78f8ae443cd7fc29635bfa) - Add fade effect to overflowing text.  Thanks @hannahblair!
+- [#12594](https://github.com/gradio-app/gradio/pull/12594) [`c2f0f19`](https://github.com/gradio-app/gradio/commit/c2f0f1949d453bc850fa65e5b140067008a83e22) - add conditional rendering for the upload button in multimodal textbox.  Thanks @hannahblair!
+
+### Dependency updates
+
+- @gradio/statustracker@0.12.2
+- @gradio/atoms@0.20.1
+- @gradio/utils@0.11.2
+- @gradio/icons@0.15.1
+- @gradio/upload@0.17.4
+- @gradio/client@2.0.3
+- @gradio/image@0.25.1
+- @gradio/video@0.20.1
+- @gradio/audio@0.22.1
+
 ## 0.11.3
 
 ### Fixes

package/Example.svelte

@@ -1,17 +1,19 @@
 <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 {
+		value = { text: "", files: [] },
+		type,
+		selected = false
+	}: {
+		value?: { text: string; files: FileData[] };
+		type: "gallery" | "table";
+		selected?: boolean;
+	} = $props();
 
-	let size: number;
+	let size = $state<number>(0);
 	let el: HTMLDivElement;
 
 	function set_styles(element: HTMLElement, el_width: number): void {
@@ -22,8 +24,10 @@
 		element.style.whiteSpace = "unset";
 	}
 
-	onMount(() => {
-		set_styles(el, size);
+	$effect(() => {
+		if (el && size) {
+			set_styles(el, size);
+		}
 	});
 </script>
 

package/Index.svelte

@@ -17,7 +17,7 @@
 		MultimodalTextboxEvents
 	} from "./types";
 
-	let upload_promise = $state<Promise<any>>();
+	let upload_promise = $state<Promise<any> | null>(null);
 
 	class MultimodalTextboxGradio extends Gradio<
 		MultimodalTextboxEvents,
@@ -37,7 +37,7 @@
 	let props = $props();
 	const gradio = new MultimodalTextboxGradio(props);
 
-	const value = $derived(gradio.props.value || { text: "", files: [] });
+	gradio.props.value = gradio.props.value ?? { text: "", files: [] };
 
 	let dragging = $state<boolean>(false);
 	let active_source = $state<"microphone" | null>(null);
@@ -135,7 +135,7 @@
 
 	<MultimodalTextbox
 		bind:upload_promise
-		{value}
+		bind:value={gradio.props.value}
 		value_is_output
 		bind:dragging
 		bind:active_source
@@ -160,24 +160,22 @@
 		file_count={gradio.props.file_count}
 		{sources_string}
 		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")}
-		on:blur={() => gradio.dispatch("blur")}
-		on:select={(e) => gradio.dispatch("select", e.detail)}
-		on:focus={() => gradio.dispatch("focus")}
-		on:error={({ detail }) => {
+		onchange={(e) => {
+			gradio.props.value = e;
+			gradio.dispatch("change", gradio.props.value);
+		}}
+		oninput={() => gradio.dispatch("input")}
+		onsubmit={() => gradio.dispatch("submit")}
+		onstop={() => gradio.dispatch("stop")}
+		onblur={() => gradio.dispatch("blur")}
+		onselect={(e) => gradio.dispatch("select", e)}
+		onfocus={() => gradio.dispatch("focus")}
+		onerror={(detail) => {
 			gradio.dispatch("error", detail);
 		}}
-		on:start_recording={() => gradio.dispatch("start_recording")}
-		on:pause_recording={() => gradio.dispatch("pause_recording")}
-		on:stop_recording={() => gradio.dispatch("stop_recording")}
-		on:upload={(e) => gradio.dispatch("upload", e.detail)}
-		on:clear={() => gradio.dispatch("clear")}
+		onstop_recording={() => gradio.dispatch("stop_recording")}
+		onupload={(e) => gradio.dispatch("upload", e)}
+		onclear={() => gradio.dispatch("clear")}
 		disabled={!gradio.shared.interactive}
 		upload={upload_fn}
 		stream_handler={stream_handler_fn}

package/MultimodalTextbox.stories.svelte

@@ -1,60 +1,63 @@
-<script>
-	import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
 	import MultimodalTextbox from "./Index.svelte";
-</script>
+	import { wrapProps } from "../storybook/wrapProps";
 
-<Meta
-	title="Components/MultimodalTextbox"
-	component={MultimodalTextbox}
-	argTypes={{
-		label: {
-			control: "text",
-			description: "The textbox label",
-			name: "label"
-		},
-		show_label: {
-			options: [true, false],
-			description: "Whether to show the label",
-			control: { type: "boolean" },
-			defaultValue: true
-		},
-		text_align: {
-			options: ["left", "right"],
-			description: "Whether to align the text left or right",
-			control: { type: "select" },
-			defaultValue: "left"
-		},
-		lines: {
-			options: [1, 5, 10, 20],
-			description: "The number of lines to display in the textbox",
-			control: { type: "select" },
-			defaultValue: 1
-		},
-		max_lines: {
-			options: [1, 5, 10, 20],
-			description:
-				"The maximum number of lines to allow users to type in the textbox",
-			control: { type: "select" },
-			defaultValue: 1
-		},
-		rtl: {
-			options: [true, false],
-			description: "Whether to render right-to-left",
-			control: { type: "boolean" },
-			defaultValue: false
-		},
-		sources: {
-			options: ["upload", "microphone"],
-			description: "The sources to enable",
-			control: { type: "select" },
-			defaultValue: ["upload", "microphone"]
+	const cheetah = "/cheetah.jpg";
+
+	const { Story } = defineMeta({
+		title: "Components/MultimodalTextbox",
+		component: MultimodalTextbox,
+		argTypes: {
+			label: {
+				control: "text",
+				description: "The textbox label",
+				name: "label"
+			},
+			show_label: {
+				options: [true, false],
+				description: "Whether to show the label",
+				control: { type: "boolean" },
+				defaultValue: true
+			},
+			text_align: {
+				options: ["left", "right"],
+				description: "Whether to align the text left or right",
+				control: { type: "select" },
+				defaultValue: "left"
+			},
+			lines: {
+				options: [1, 5, 10, 20],
+				description: "The number of lines to display in the textbox",
+				control: { type: "select" },
+				defaultValue: 1
+			},
+			max_lines: {
+				options: [1, 5, 10, 20],
+				description:
+					"The maximum number of lines to allow users to type in the textbox",
+				control: { type: "select" },
+				defaultValue: 1
+			},
+			rtl: {
+				options: [true, false],
+				description: "Whether to render right-to-left",
+				control: { type: "boolean" },
+				defaultValue: false
+			},
+			sources: {
+				options: ["upload", "microphone"],
+				description: "The sources to enable",
+				control: { type: "select" },
+				defaultValue: ["upload", "microphone"]
+			}
 		}
-	}}
-/>
+	});
+</script>
 
-<Template let:args>
-	<MultimodalTextbox {...args} />
-</Template>
+{#snippet template(args)}
+	<MultimodalTextbox {...wrapProps(args)} />
+{/snippet}
 
 <Story
 	name="MultimodalTextbox with file and label"
@@ -63,43 +66,77 @@
 			text: "sample text",
 			files: [
 				{
-					path: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
-					url: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
+					path: cheetah,
+					url: cheetah,
 					orig_name: "cheetah.jpg"
 				}
 			]
 		},
 		label: "My simple label",
-		show_label: true
+		show_label: true,
+		sources: ["upload", "microphone"],
+		file_types: [],
+		lines: 1,
+		max_lines: 5
 	}}
+	{template}
 />
 <Story
 	name="MultimodalTextbox with 5 lines and max 5 lines"
-	args={{ lines: 5, max_lines: 5 }}
+	args={{
+		lines: 5,
+		max_lines: 5,
+		sources: ["upload", "microphone"],
+		file_types: [],
+		value: { text: "", files: [] }
+	}}
+	{template}
+/>
+<Story
+	name="Right aligned textbox"
+	args={{
+		text_align: "right",
+		sources: ["upload", "microphone"],
+		file_types: [],
+		lines: 1,
+		max_lines: 5,
+		value: { text: "", files: [] }
+	}}
+	{template}
 />
-<Story name="Right aligned textbox" args={{ text_align: "right" }} />
 <Story
 	name="Single file upload"
 	args={{
 		file_count: "single",
 		submit_btn: true,
+		sources: ["upload"],
+		file_types: [],
+		lines: 1,
+		max_lines: 5,
 		value: {
 			text: "sample text",
 			files: [
 				{
-					path: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg"
+					path: cheetah,
+					url: cheetah,
+					orig_name: "cheetah.jpg"
 				}
 			]
 		}
 	}}
+	{template}
 />
 <Story
 	name="MultimodalTextbox with microphone input and right to left text"
 	args={{
 		label: "مرحبًا",
 		sources: ["microphone"],
+		file_types: [],
 		rtl: true,
 		submit_btn: true,
+		lines: 1,
+		max_lines: 5,
 		value: { text: "مرحبًا", files: [] }
 	}}
+	{template}
 />

package/MultimodalTextboxExample.stories.svelte

@@ -1,27 +1,31 @@
-<script>
-	import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
 	import MultimodalTextbox from "./Example.svelte";
-</script>
-
-<Meta
-	title="Components/MultimodalTextbox/Example"
-	component={MultimodalTextbox}
-/>
 
-<Template let:args>
-	<MultimodalTextbox {...args} />
-</Template>
+	const { Story } = defineMeta({
+		title: "Components/MultimodalTextbox/Example",
+		component: MultimodalTextbox
+	});
+</script>
 
 <Story
 	name="Text value"
 	args={{
 		value: { text: "the quick brown fox", files: [] }
 	}}
-/>
+>
+	{#snippet template(args)}
+		<MultimodalTextbox {...args} />
+	{/snippet}
+</Story>
 
 <Story
 	name="Empty Value"
 	args={{
 		value: { text: "", files: [] }
 	}}
-/>
+>
+	{#snippet template(args)}
+		<MultimodalTextbox {...args} />
+	{/snippet}
+</Story>

package/dist/Example.svelte

@@ -1,17 +1,19 @@
 <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 {
+		value = { text: "", files: [] },
+		type,
+		selected = false
+	}: {
+		value?: { text: string; files: FileData[] };
+		type: "gallery" | "table";
+		selected?: boolean;
+	} = $props();
 
-	let size: number;
+	let size = $state<number>(0);
 	let el: HTMLDivElement;
 
 	function set_styles(element: HTMLElement, el_width: number): void {
@@ -22,8 +24,10 @@
 		element.style.whiteSpace = "unset";
 	}
 
-	onMount(() => {
-		set_styles(el, size);
+	$effect(() => {
+		if (el && size) {
+			set_styles(el, size);
+		}
 	});
 </script>
 

package/dist/Example.svelte.d.ts

@@ -1,26 +1,12 @@
 import type { FileData } from "@gradio/client";
-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;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Example: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     value?: {
         text: string;
         files: FileData[];
     };
     type: "gallery" | "table";
     selected?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Example = InstanceType<typeof Example>;
+};
+declare const Example: import("svelte").Component<$$ComponentProps, {}, "">;
+type Example = ReturnType<typeof Example>;
 export default Example;

package/dist/Index.svelte

@@ -17,7 +17,7 @@
 		MultimodalTextboxEvents
 	} from "./types";
 
-	let upload_promise = $state<Promise<any>>();
+	let upload_promise = $state<Promise<any> | null>(null);
 
 	class MultimodalTextboxGradio extends Gradio<
 		MultimodalTextboxEvents,
@@ -37,7 +37,7 @@
 	let props = $props();
 	const gradio = new MultimodalTextboxGradio(props);
 
-	const value = $derived(gradio.props.value || { text: "", files: [] });
+	gradio.props.value = gradio.props.value ?? { text: "", files: [] };
 
 	let dragging = $state<boolean>(false);
 	let active_source = $state<"microphone" | null>(null);
@@ -135,7 +135,7 @@
 
 	<MultimodalTextbox
 		bind:upload_promise
-		{value}
+		bind:value={gradio.props.value}
 		value_is_output
 		bind:dragging
 		bind:active_source
@@ -160,24 +160,22 @@
 		file_count={gradio.props.file_count}
 		{sources_string}
 		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")}
-		on:blur={() => gradio.dispatch("blur")}
-		on:select={(e) => gradio.dispatch("select", e.detail)}
-		on:focus={() => gradio.dispatch("focus")}
-		on:error={({ detail }) => {
+		onchange={(e) => {
+			gradio.props.value = e;
+			gradio.dispatch("change", gradio.props.value);
+		}}
+		oninput={() => gradio.dispatch("input")}
+		onsubmit={() => gradio.dispatch("submit")}
+		onstop={() => gradio.dispatch("stop")}
+		onblur={() => gradio.dispatch("blur")}
+		onselect={(e) => gradio.dispatch("select", e)}
+		onfocus={() => gradio.dispatch("focus")}
+		onerror={(detail) => {
 			gradio.dispatch("error", detail);
 		}}
-		on:start_recording={() => gradio.dispatch("start_recording")}
-		on:pause_recording={() => gradio.dispatch("pause_recording")}
-		on:stop_recording={() => gradio.dispatch("stop_recording")}
-		on:upload={(e) => gradio.dispatch("upload", e.detail)}
-		on:clear={() => gradio.dispatch("clear")}
+		onstop_recording={() => gradio.dispatch("stop_recording")}
+		onupload={(e) => gradio.dispatch("upload", e)}
+		onclear={() => gradio.dispatch("clear")}
 		disabled={!gradio.shared.interactive}
 		upload={upload_fn}
 		stream_handler={stream_handler_fn}