@gradio/multimodaltextbox 0.5.5 → 0.6.0-beta.1

package/CHANGELOG.md

@@ -1,5 +1,57 @@
 # @gradio/multimodaltextbox
 
+## 0.6.0-beta.1
+
+### Features
+
+- [#9235](https://github.com/gradio-app/gradio/pull/9235) [`f8b411f`](https://github.com/gradio-app/gradio/commit/f8b411fe282ff0316ed4abebc0a043b044bf4dd9) - Built-in submit and stop buttons in `gr.ChatInterface(multimodal=False)`, adding `submit_btn` and `stop_btn` props to `gr.Textbox()` and `gr.MultimodalText()`.  Thanks @whitphx!
+
+### Dependency updates
+
+- @gradio/video@0.11.0-beta.1
+- @gradio/atoms@0.8.1-beta.1
+- @gradio/icons@0.8.0-beta.1
+- @gradio/statustracker@0.8.0-beta.1
+- @gradio/utils@0.7.0-beta.1
+- @gradio/client@1.6.0-beta.1
+- @gradio/image@0.16.0-beta.1
+- @gradio/upload@0.12.4-beta.1
+
+## 0.5.7-beta.0
+
+### Fixes
+
+- [#9163](https://github.com/gradio-app/gradio/pull/9163) [`2b6cbf2`](https://github.com/gradio-app/gradio/commit/2b6cbf25908e42cf027324e54ef2cc0baad11a91) - fix exports and generate types.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/utils@0.7.0-beta.0
+- @gradio/statustracker@0.8.0-beta.0
+- @gradio/atoms@0.8.1-beta.0
+- @gradio/client@1.6.0-beta.0
+- @gradio/icons@0.8.0-beta.0
+- @gradio/upload@0.12.4-beta.0
+- @gradio/image@0.16.0-beta.0
+- @gradio/video@0.11.0-beta.0
+
+## 0.5.6
+
+### Features
+
+- [#9031](https://github.com/gradio-app/gradio/pull/9031) [`04b7d32`](https://github.com/gradio-app/gradio/commit/04b7d327ec1227a693fc2dfea51b1e2729851bde) - Allow drag and replace image in `gr.Image` and Multimodal textbox.  Thanks @hannahblair!
+- [#9118](https://github.com/gradio-app/gradio/pull/9118) [`e1c404d`](https://github.com/gradio-app/gradio/commit/e1c404da1143fb52b659d03e028bdba1badf443d) - setup npm-previews of all packages.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/utils@0.6.0
+- @gradio/upload@0.12.3
+- @gradio/atoms@0.8.0
+- @gradio/client@1.5.1
+- @gradio/statustracker@0.7.5
+- @gradio/icons@0.7.1
+- @gradio/image@0.15.0
+- @gradio/video@0.10.3
+
 ## 0.5.5
 
 ### Dependency updates

package/Example.svelte

@@ -42,7 +42,7 @@
 		{#if file.mime_type && file.mime_type.includes("image")}
 			<Image src={file.url} alt="" />
 		{:else if file.mime_type && file.mime_type.includes("video")}
-			<Video src={file.url} alt="" loop={true} />
+			<Video src={file.url} alt="" loop={true} is_stream={false} />
 		{:else if file.mime_type && file.mime_type.includes("audio")}
 			<audio src={file.url} controls />
 		{:else}

package/Index.svelte

@@ -16,6 +16,7 @@
 	export let gradio: Gradio<{
 		change: typeof value;
 		submit: never;
+		stop: never;
 		blur: never;
 		select: SelectData;
 		input: never;
@@ -40,7 +41,8 @@
 	export let container = true;
 	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
-	export let submit_btn: string | null = null;
+	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;
@@ -50,16 +52,19 @@
 	export let interactive: boolean;
 	export let root: string;
 	export let file_count: "single" | "multiple" | "directory";
+
+	let dragging: boolean;
 </script>
 
 <Block
 	{visible}
 	{elem_id}
-	{elem_classes}
+	elem_classes={[...elem_classes, "multimodal-textbox"]}
 	{scale}
 	{min_width}
 	allow_overflow={false}
 	padding={container}
+	border_mode={dragging ? "focus" : "base"}
 >
 	{#if loading_status}
 		<StatusTracker
@@ -73,6 +78,7 @@
 	<MultimodalTextbox
 		bind:value
 		bind:value_is_output
+		bind:dragging
 		{file_types}
 		{root}
 		{label}
@@ -84,6 +90,7 @@
 		max_lines={!max_lines ? lines + 1 : max_lines}
 		{placeholder}
 		{submit_btn}
+		{stop_btn}
 		{autofocus}
 		{container}
 		{autoscroll}
@@ -92,6 +99,7 @@
 		on:change={() => gradio.dispatch("change", 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")}
@@ -103,3 +111,11 @@
 		stream_handler={gradio.client.stream}
 	/>
 </Block>
+
+<style>
+	:global(.form .block.multimodal-textbox) {
+		box-shadow: var(--block-shadow) !important;
+		border-width: var(--block-border-width) !important;
+		border-radius: var(--block-radius) !important;
+	}
+</style>

package/MultimodalTextbox.test.ts

@@ -1,6 +1,5 @@
 import { test, describe, assert, afterEach } from "vitest";
-import { spy } from "tinyspy";
-import { cleanup, fireEvent, render, get_text, wait } from "@gradio/tootils";
+import { cleanup, render } from "@self/tootils";
 import event from "@testing-library/user-event";
 
 import MultimodalTextbox from "./Index.svelte";

package/dist/Example.svelte

@@ -0,0 +1,96 @@
+<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) {
+  if (!element || !el_width)
+    return;
+  el.style.setProperty(
+    "--local-text-width",
+    `${el_width < 150 ? el_width : 200}px`
+  );
+  el.style.whiteSpace = "unset";
+}
+onMount(() => {
+  set_styles(el, size);
+});
+</script>
+
+<div
+	class="container"
+	bind:clientWidth={size}
+	bind:this={el}
+	class:table={type === "table"}
+	class:gallery={type === "gallery"}
+	class:selected
+	class:border={value}
+>
+	<p>{value.text ? value.text : ""}</p>
+	{#each value.files as file}
+		{#if file.mime_type && file.mime_type.includes("image")}
+			<Image src={file.url} alt="" />
+		{:else if file.mime_type && file.mime_type.includes("video")}
+			<Video src={file.url} alt="" loop={true} is_stream={false} />
+		{:else if file.mime_type && file.mime_type.includes("audio")}
+			<audio src={file.url} controls />
+		{:else}
+			{file.orig_name}
+		{/if}
+	{/each}
+</div>
+
+<style>
+	.gallery {
+		padding: var(--size-1) var(--size-2);
+		display: flex;
+		align-items: center;
+		gap: 20px;
+		overflow-x: auto;
+	}
+
+	div {
+		overflow: hidden;
+		min-width: var(--local-text-width);
+		white-space: nowrap;
+	}
+
+	.container :global(img),
+	.container :global(video) {
+		object-fit: contain;
+		width: 100px;
+		height: 100px;
+	}
+
+	.container.selected {
+		border-color: var(--border-color-accent);
+	}
+	.border.table {
+		border: 2px solid var(--border-color-primary);
+	}
+
+	.container.table {
+		margin: 0 auto;
+		border-radius: var(--radius-lg);
+		overflow-x: auto;
+		width: max-content;
+		height: max-content;
+		object-fit: cover;
+		padding: var(--size-2);
+	}
+
+	.container.gallery {
+		object-fit: cover;
+	}
+
+	div > :global(p) {
+		font-size: var(--text-lg);
+		white-space: normal;
+	}
+</style>

package/dist/Example.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+import type { FileData } from "@gradio/client";
+declare const __propDef: {
+    props: {
+        value?: {
+            text: string;
+            files: FileData[];
+        } | undefined;
+        type: "gallery" | "table";
+        selected?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+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> {
+}
+export {};

package/dist/Index.svelte

@@ -0,0 +1,104 @@
+<svelte:options accessors={true} />
+
+<script context="module">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";
+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 container = true;
+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;
+let dragging;
+</script>
+
+<Block
+	{visible}
+	{elem_id}
+	elem_classes={[...elem_classes, "multimodal-textbox"]}
+	{scale}
+	{min_width}
+	allow_overflow={false}
+	padding={container}
+	border_mode={dragging ? "focus" : "base"}
+>
+	{#if loading_status}
+		<StatusTracker
+			autoscroll={gradio.autoscroll}
+			i18n={gradio.i18n}
+			{...loading_status}
+			on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
+		/>
+	{/if}
+
+	<MultimodalTextbox
+		bind:value
+		bind:value_is_output
+		bind:dragging
+		{file_types}
+		{root}
+		{label}
+		{info}
+		{show_label}
+		{lines}
+		{rtl}
+		{text_align}
+		max_lines={!max_lines ? lines + 1 : max_lines}
+		{placeholder}
+		{submit_btn}
+		{stop_btn}
+		{autofocus}
+		{container}
+		{autoscroll}
+		{file_count}
+		max_file_size={gradio.max_file_size}
+		on:change={() => gradio.dispatch("change", 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 }) => {
+			gradio.dispatch("error", detail);
+		}}
+		disabled={!interactive}
+		upload={gradio.client.upload}
+		stream_handler={gradio.client.stream}
+	/>
+</Block>
+
+<style>
+	:global(.form .block.multimodal-textbox) {
+		box-shadow: var(--block-shadow) !important;
+		border-width: var(--block-border-width) !important;
+		border-radius: var(--block-radius) !important;
+	}
+</style>

package/dist/Index.svelte.d.ts

@@ -0,0 +1,171 @@
+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";
+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;
+        }>;
+        elem_id?: string | undefined;
+        elem_classes?: string[] | undefined;
+        visible?: boolean | undefined;
+        value?: {
+            text: string;
+            files: FileData[];
+        } | undefined;
+        file_types?: (string[] | null) | undefined;
+        lines: number;
+        placeholder?: string | undefined;
+        label?: string | undefined;
+        info?: string | undefined;
+        show_label: boolean;
+        max_lines: number;
+        container?: boolean | undefined;
+        scale?: (number | null) | undefined;
+        min_width?: number | undefined;
+        submit_btn?: (string | boolean | null) | undefined;
+        stop_btn?: (string | boolean | null) | undefined;
+        loading_status?: LoadingStatus | undefined;
+        value_is_output?: boolean | undefined;
+        rtl?: boolean | undefined;
+        text_align?: "left" | "right" | undefined;
+        autofocus?: boolean | undefined;
+        autoscroll?: boolean | undefined;
+        interactive: boolean;
+        root: string;
+        file_count: "single" | "multiple" | "directory";
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+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;
+    }>;
+    /**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;
+    }>);
+    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 | undefined;
+    /**accessor*/
+    set visible(_: boolean | 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 container(): boolean | undefined;
+    /**accessor*/
+    set container(_: boolean | undefined);
+    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");
+}