@gradio/multimodaltextbox 0.10.22-dev.0 → 0.11.0-dev.2

package/dist/Index.svelte

@@ -1,133 +1,168 @@
 <svelte:options accessors={true} />
 
-<script context="module">export { default as BaseMultimodalTextbox } from "./shared/MultimodalTextbox.svelte";
-export { default as BaseExample } from "./Example.svelte";
+<script context="module" lang="ts">
+	export { default as BaseMultimodalTextbox } from "./shared/MultimodalTextbox.svelte";
+	export { default as BaseExample } from "./Example.svelte";
 </script>
 
-<script>import MultimodalTextbox from "./shared/MultimodalTextbox.svelte";
-import { Block } from "@gradio/atoms";
-import { StatusTracker } from "@gradio/statustracker";
-import { onMount } from "svelte";
-export let gradio;
-export let elem_id = "";
-export let elem_classes = [];
-export let visible = true;
-export let value = {
-  text: "",
-  files: []
-};
-export let file_types = null;
-export let lines;
-export let placeholder = "";
-export let label = "MultimodalTextbox";
-export let info = void 0;
-export let show_label;
-export let max_lines;
-export let scale = null;
-export let min_width = void 0;
-export let submit_btn = null;
-export let stop_btn = null;
-export let loading_status = void 0;
-export let value_is_output = false;
-export let rtl = false;
-export let text_align = void 0;
-export let autofocus = false;
-export let autoscroll = true;
-export let interactive;
-export let root;
-export let file_count;
-export let max_plain_text_length;
-export let sources = ["upload"];
-export let waveform_options = {};
-export let html_attributes = null;
-let dragging;
-let active_source = null;
-let waveform_settings;
-let color_accent = "darkorange";
-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;
-});
-$: waveform_settings = {
-  height: 50,
-  barWidth: 2,
-  barGap: 3,
-  cursorWidth: 2,
-  cursorColor: "#ddd5e9",
-  autoplay: false,
-  barRadius: 10,
-  dragToSeek: true,
-  normalize: true,
-  minPxPerSec: 20
-};
-const trim_region_settings = {
-  color: waveform_options.trim_region_color,
-  drag: true,
-  resize: true
-};
-function set_trim_region_colour() {
-  document.documentElement.style.setProperty(
-    "--trim-region-color",
-    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 lang="ts">
+	import { Gradio, type SelectData } from "@gradio/utils";
+	import MultimodalTextbox from "./shared/MultimodalTextbox.svelte";
+	import { Block } from "@gradio/atoms";
+	import { StatusTracker } from "@gradio/statustracker";
+	import { onMount, tick } from "svelte";
+	import type { WaveformOptions } from "../audio/shared/types";
+	import type {
+		MultimodalTextboxProps,
+		MultimodalTextboxEvents
+	} from "./types";
+
+	let upload_promise = $state<Promise<any>>();
+
+	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: boolean;
+	let active_source: "microphone" | null = null;
+
+	let color_accent = "darkorange";
+
+	const waveform_settings = {
+		height: 50,
+		barWidth: 2,
+		barGap: 3,
+		cursorWidth: 2,
+		cursorColor: "#ddd5e9",
+		autoplay: false,
+		barRadius: 10,
+		dragToSeek: true,
+		normalize: true,
+		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: gradio.props?.waveform_options?.trim_region_color,
+		drag: true,
+		resize: true
+	};
+
+	function set_trim_region_colour(): void {
+		document.documentElement.style.setProperty(
+			"--trim-region-color",
+			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.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.shared.client.stream>
+	): EventSource => gradio.shared.client.stream(...args);
+
+	let sources_string = $derived(
+		gradio.props.sources.join(",") as
+			| "upload"
+			| "upload,microphone"
+			| "microphone"
+			| "microphone,upload"
+	);
+
+	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")}
@@ -142,10 +177,10 @@ $: file_types_string = (file_types || []).join(",") || null;
 		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/dist/Index.svelte.d.ts

@@ -1,201 +1,5 @@
-import { SvelteComponent } from "svelte";
 export { default as BaseMultimodalTextbox } from "./shared/MultimodalTextbox.svelte";
 export { default as BaseExample } from "./Example.svelte";
-import type { Gradio, SelectData } from "@gradio/utils";
-import type { LoadingStatus } from "@gradio/statustracker";
-import type { FileData } from "@gradio/client";
-import type { InputHTMLAttributes } from "./shared/types";
-declare const __propDef: {
-    props: {
-        gradio: Gradio<{
-            change: {
-                text: string;
-                files: FileData[];
-            };
-            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;
-        }>;
-        elem_id?: string;
-        elem_classes?: string[];
-        visible?: boolean | "hidden";
-        value?: {
-            text: string;
-            files: FileData[];
-        };
-        file_types?: string[] | null;
-        lines: number;
-        placeholder?: string;
-        label?: string;
-        info?: string | undefined;
-        show_label: boolean;
-        max_lines: number;
-        scale?: number | null;
-        min_width?: number | undefined;
-        submit_btn?: string | boolean | null;
-        stop_btn?: string | boolean | null;
-        loading_status?: LoadingStatus | undefined;
-        value_is_output?: boolean;
-        rtl?: boolean;
-        text_align?: "left" | "right" | undefined;
-        autofocus?: boolean;
-        autoscroll?: boolean;
-        interactive: boolean;
-        root: string;
-        file_count: "single" | "multiple" | "directory";
-        max_plain_text_length: number;
-        sources?: ["microphone" | "upload"];
-        waveform_options?: any;
-        html_attributes?: InputHTMLAttributes | null;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type IndexProps = typeof __propDef.props;
-export type IndexEvents = typeof __propDef.events;
-export type IndexSlots = typeof __propDef.slots;
-export default class Index extends SvelteComponent<IndexProps, IndexEvents, IndexSlots> {
-    get gradio(): Gradio<{
-        change: {
-            text: string;
-            files: FileData[];
-        };
-        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;
-    }>;
-    /**accessor*/
-    set gradio(_: Gradio<{
-        change: {
-            text: string;
-            files: FileData[];
-        };
-        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;
-    }>);
-    get elem_id(): string | undefined;
-    /**accessor*/
-    set elem_id(_: string | undefined);
-    get elem_classes(): string[] | undefined;
-    /**accessor*/
-    set elem_classes(_: string[] | undefined);
-    get visible(): boolean | "hidden" | undefined;
-    /**accessor*/
-    set visible(_: boolean | "hidden" | undefined);
-    get value(): {
-        text: string;
-        files: FileData[];
-    } | undefined;
-    /**accessor*/
-    set value(_: {
-        text: string;
-        files: FileData[];
-    } | undefined);
-    get file_types(): string[] | null | undefined;
-    /**accessor*/
-    set file_types(_: string[] | null | undefined);
-    get lines(): number;
-    /**accessor*/
-    set lines(_: number);
-    get placeholder(): string | undefined;
-    /**accessor*/
-    set placeholder(_: string | undefined);
-    get label(): string | undefined;
-    /**accessor*/
-    set label(_: string | undefined);
-    get info(): string | undefined;
-    /**accessor*/
-    set info(_: string | undefined);
-    get show_label(): boolean;
-    /**accessor*/
-    set show_label(_: boolean);
-    get max_lines(): number;
-    /**accessor*/
-    set max_lines(_: number);
-    get scale(): number | null | undefined;
-    /**accessor*/
-    set scale(_: number | null | undefined);
-    get min_width(): number | undefined;
-    /**accessor*/
-    set min_width(_: number | undefined);
-    get submit_btn(): string | boolean | null | undefined;
-    /**accessor*/
-    set submit_btn(_: string | boolean | null | undefined);
-    get stop_btn(): string | boolean | null | undefined;
-    /**accessor*/
-    set stop_btn(_: string | boolean | null | undefined);
-    get loading_status(): LoadingStatus | undefined;
-    /**accessor*/
-    set loading_status(_: LoadingStatus | undefined);
-    get value_is_output(): boolean | undefined;
-    /**accessor*/
-    set value_is_output(_: boolean | undefined);
-    get rtl(): boolean | undefined;
-    /**accessor*/
-    set rtl(_: boolean | undefined);
-    get text_align(): "left" | "right" | undefined;
-    /**accessor*/
-    set text_align(_: "left" | "right" | undefined);
-    get autofocus(): boolean | undefined;
-    /**accessor*/
-    set autofocus(_: boolean | undefined);
-    get autoscroll(): boolean | undefined;
-    /**accessor*/
-    set autoscroll(_: boolean | undefined);
-    get interactive(): boolean;
-    /**accessor*/
-    set interactive(_: boolean);
-    get root(): string;
-    /**accessor*/
-    set root(_: string);
-    get file_count(): "multiple" | "single" | "directory";
-    /**accessor*/
-    set file_count(_: "multiple" | "single" | "directory");
-    get max_plain_text_length(): number;
-    /**accessor*/
-    set max_plain_text_length(_: number);
-    get sources(): ["upload" | "microphone"] | undefined;
-    /**accessor*/
-    set sources(_: ["upload" | "microphone"] | undefined);
-    get waveform_options(): any;
-    /**accessor*/
-    set waveform_options(_: any);
-    get html_attributes(): any;
-    /**accessor*/
-    set html_attributes(_: any);
-}
+declare const Index: import("svelte").Component<$$ComponentProps, {}, "">;
+type Index = ReturnType<typeof Index>;
+export default Index;