@gradio/multimodaltextbox 0.5.6 → 0.6.0-beta.1

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @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

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;
@@ -88,6 +90,7 @@
 		max_lines={!max_lines ? lines + 1 : max_lines}
 		{placeholder}
 		{submit_btn}
+		{stop_btn}
 		{autofocus}
 		{container}
 		{autoscroll}
@@ -96,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")}

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");
+}

package/dist/shared/MultimodalTextbox.svelte

@@ -0,0 +1,543 @@
+<script>import {
+  beforeUpdate,
+  afterUpdate,
+  createEventDispatcher,
+  tick
+} from "svelte";
+import { text_area_resize, resize } from "../shared/utils";
+import { BlockTitle } from "@gradio/atoms";
+import { Upload } from "@gradio/upload";
+import { Image } from "@gradio/image/shared";
+import {
+  Clear,
+  File,
+  Music,
+  Paperclip,
+  Video,
+  Send,
+  Square
+} from "@gradio/icons";
+export let value = {
+  text: "",
+  files: []
+};
+export let value_is_output = false;
+export let lines = 1;
+export let placeholder = "Type here...";
+export let disabled = false;
+export let label;
+export let info = void 0;
+export let show_label = true;
+export let container = true;
+export let max_lines;
+export let submit_btn = null;
+export let stop_btn = null;
+export let rtl = false;
+export let autofocus = false;
+export let text_align = void 0;
+export let autoscroll = true;
+export let root;
+export let file_types = null;
+export let max_file_size = null;
+export let upload;
+export let stream_handler;
+export let file_count = "multiple";
+let upload_component;
+let hidden_upload;
+let el;
+let can_scroll;
+let previous_scroll_top = 0;
+let user_has_scrolled_up = false;
+export let dragging = false;
+let uploading = false;
+let oldValue = value.text;
+$:
+  dispatch("drag", dragging);
+let full_container;
+$:
+  if (oldValue !== value.text) {
+    dispatch("change", value);
+    oldValue = value.text;
+  }
+let accept_file_types;
+if (file_types == null) {
+  accept_file_types = null;
+} else {
+  file_types = file_types.map((x) => {
+    if (x.startsWith(".")) {
+      return x;
+    }
+    return x + "/*";
+  });
+  accept_file_types = file_types.join(", ");
+}
+$:
+  if (value === null)
+    value = { text: "", files: [] };
+$:
+  value, el && lines !== max_lines && resize(el, lines, max_lines);
+const dispatch = createEventDispatcher();
+beforeUpdate(() => {
+  can_scroll = el && el.offsetHeight + el.scrollTop > el.scrollHeight - 100;
+});
+const scroll = () => {
+  if (can_scroll && autoscroll && !user_has_scrolled_up) {
+    el.scrollTo(0, el.scrollHeight);
+  }
+};
+async function handle_change() {
+  dispatch("change", value);
+  if (!value_is_output) {
+    dispatch("input");
+  }
+}
+afterUpdate(() => {
+  if (autofocus && el !== null) {
+    el.focus();
+  }
+  if (can_scroll && autoscroll) {
+    scroll();
+  }
+  value_is_output = false;
+});
+function handle_select(event) {
+  const target = event.target;
+  const text = target.value;
+  const index = [
+    target.selectionStart,
+    target.selectionEnd
+  ];
+  dispatch("select", { value: text.substring(...index), index });
+}
+async function handle_keypress(e) {
+  await tick();
+  if (e.key === "Enter" && e.shiftKey && lines > 1) {
+    e.preventDefault();
+    dispatch("submit");
+  } else if (e.key === "Enter" && !e.shiftKey && lines === 1 && max_lines >= 1) {
+    e.preventDefault();
+    dispatch("submit");
+  }
+}
+function handle_scroll(event) {
+  const target = event.target;
+  const current_scroll_top = target.scrollTop;
+  if (current_scroll_top < previous_scroll_top) {
+    user_has_scrolled_up = true;
+  }
+  previous_scroll_top = current_scroll_top;
+  const max_scroll_top = target.scrollHeight - target.clientHeight;
+  const user_has_scrolled_to_bottom = current_scroll_top >= max_scroll_top;
+  if (user_has_scrolled_to_bottom) {
+    user_has_scrolled_up = false;
+  }
+}
+async function handle_upload({
+  detail
+}) {
+  handle_change();
+  if (Array.isArray(detail)) {
+    for (let file of detail) {
+      value.files.push(file);
+    }
+    value = value;
+  } else {
+    value.files.push(detail);
+    value = value;
+  }
+  await tick();
+  dispatch("change", value);
+  dispatch("upload", detail);
+}
+function remove_thumbnail(event, index) {
+  handle_change();
+  event.stopPropagation();
+  value.files.splice(index, 1);
+  value = value;
+}
+function handle_upload_click() {
+  if (hidden_upload) {
+    hidden_upload.value = "";
+    hidden_upload.click();
+  }
+}
+function handle_stop() {
+  dispatch("stop");
+}
+function handle_submit() {
+  dispatch("submit");
+}
+function handle_paste(event) {
+  if (!event.clipboardData)
+    return;
+  const items = event.clipboardData.items;
+  for (let index in items) {
+    const item = items[index];
+    if (item.kind === "file" && item.type.includes("image")) {
+      const blob = item.getAsFile();
+      if (blob)
+        upload_component.load_files([blob]);
+    }
+  }
+}
+function handle_dragenter(event) {
+  event.preventDefault();
+  dragging = true;
+}
+function handle_dragleave(event) {
+  event.preventDefault();
+  const rect = full_container.getBoundingClientRect();
+  const { clientX, clientY } = event;
+  if (clientX <= rect.left || clientX >= rect.right || clientY <= rect.top || clientY >= rect.bottom) {
+    dragging = false;
+  }
+}
+function handle_drop(event) {
+  event.preventDefault();
+  dragging = false;
+  if (event.dataTransfer && event.dataTransfer.files) {
+    upload_component.load_files(Array.from(event.dataTransfer.files));
+  }
+}
+</script>
+
+<div
+	class="full-container"
+	class:dragging
+	bind:this={full_container}
+	on:dragenter={handle_dragenter}
+	on:dragleave={handle_dragleave}
+	on:dragover|preventDefault
+	on:drop={handle_drop}
+	role="group"
+	aria-label="Multimedia input field"
+>
+	<!-- svelte-ignore a11y-autofocus -->
+	<label class:container>
+		<BlockTitle {show_label} {info}>{label}</BlockTitle>
+		{#if value.files.length > 0 || uploading}
+			<div
+				class="thumbnails scroll-hide"
+				aria-label="Uploaded files"
+				data-testid="container_el"
+				style="display: {value.files.length > 0 || uploading
+					? 'flex'
+					: 'none'};"
+			>
+				{#each value.files as file, index}
+					<span role="listitem" aria-label="File thumbnail">
+						<button class="thumbnail-item thumbnail-small">
+							<button
+								class:disabled
+								class="delete-button"
+								on:click={(event) => remove_thumbnail(event, index)}
+								><Clear /></button
+							>
+							{#if file.mime_type && file.mime_type.includes("image")}
+								<Image
+									src={file.url}
+									title={null}
+									alt=""
+									loading="lazy"
+									class={"thumbnail-image"}
+								/>
+							{:else if file.mime_type && file.mime_type.includes("audio")}
+								<Music />
+							{:else if file.mime_type && file.mime_type.includes("video")}
+								<Video />
+							{:else}
+								<File />
+							{/if}
+						</button>
+					</span>
+				{/each}
+				{#if uploading}
+					<div class="loader" role="status" aria-label="Uploading"></div>
+				{/if}
+			</div>
+		{/if}
+		<div class="input-container">
+			<Upload
+				bind:this={upload_component}
+				on:load={handle_upload}
+				{file_count}
+				{root}
+				{max_file_size}
+				bind:dragging
+				bind:uploading
+				show_progress={false}
+				disable_click={true}
+				bind:hidden_upload
+				on:error
+				hidden={true}
+				{upload}
+				{stream_handler}
+			></Upload>
+			<button
+				data-testid="upload-button"
+				class="upload-button"
+				on:click={handle_upload_click}><Paperclip /></button
+			>
+			<textarea
+				data-testid="textbox"
+				use:text_area_resize={{
+					text: value.text,
+					lines: lines,
+					max_lines: max_lines
+				}}
+				class="scroll-hide"
+				dir={rtl ? "rtl" : "ltr"}
+				bind:value={value.text}
+				bind:this={el}
+				{placeholder}
+				rows={lines}
+				{disabled}
+				{autofocus}
+				on:keypress={handle_keypress}
+				on:blur
+				on:select={handle_select}
+				on:focus
+				on:scroll={handle_scroll}
+				on:paste={handle_paste}
+				style={text_align ? "text-align: " + text_align : ""}
+			/>
+			{#if submit_btn}
+				<button
+					class="submit-button"
+					class:padded-button={submit_btn !== true}
+					on:click={handle_submit}
+				>
+					{#if submit_btn === true}
+						<Send />
+					{:else}
+						{submit_btn}
+					{/if}
+				</button>
+			{/if}
+			{#if stop_btn}
+				<button
+					class="stop-button"
+					class:padded-button={stop_btn !== true}
+					on:click={handle_stop}
+				>
+					{#if stop_btn === true}
+						<Square />
+					{:else}
+						{stop_btn}
+					{/if}
+				</button>
+			{/if}
+		</div>
+	</label>
+</div>
+
+<style>
+	.full-container {
+		width: 100%;
+		position: relative;
+	}
+
+	.full-container.dragging::after {
+		content: "";
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		pointer-events: none;
+	}
+
+	.input-container {
+		display: flex;
+		position: relative;
+		align-items: flex-end;
+	}
+
+	textarea {
+		flex-grow: 1;
+		outline: none !important;
+		background: var(--input-background-fill);
+		padding: var(--input-padding);
+		color: var(--body-text-color);
+		font-weight: var(--input-text-weight);
+		font-size: var(--input-text-size);
+		line-height: var(--line-sm);
+		border: none;
+		margin-top: 0px;
+		margin-bottom: 0px;
+		resize: none;
+		position: relative;
+		z-index: 1;
+	}
+
+	textarea:disabled {
+		-webkit-opacity: 1;
+		opacity: 1;
+	}
+
+	textarea::placeholder {
+		color: var(--input-placeholder-color);
+	}
+
+	.upload-button,
+	.submit-button,
+	.stop-button {
+		border: none;
+		text-align: center;
+		text-decoration: none;
+		font-size: 14px;
+		cursor: pointer;
+		border-radius: 15px;
+		min-width: 30px;
+		height: 30px;
+		flex-shrink: 0;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		margin-bottom: 5px;
+		z-index: var(--layer-1);
+	}
+	.padded-button {
+		padding: 0 10px;
+	}
+
+	.upload-button,
+	.submit-button {
+		background: var(--button-secondary-background-fill);
+		color: var(--button-secondary-text-color);
+	}
+
+	.upload-button:hover,
+	.submit-button:hover {
+		background: var(--button-secondary-background-fill-hover);
+	}
+
+	.upload-button:active,
+	.submit-button:active {
+		box-shadow: var(--button-shadow-active);
+	}
+
+	.submit-button :global(svg) {
+		height: 22px;
+		width: 22px;
+	}
+	.upload-button :global(svg) {
+		height: 17px;
+		width: 17px;
+	}
+
+	.stop-button {
+		background: var(--button-cancel-background-fill);
+		color: var(--button-cancel-text-color);
+	}
+	.stop-button:hover {
+		background: var(--button-cancel-background-fill-hover);
+		color: var(--button-cancel-text-color-hover);
+	}
+	.stop-button :global(svg) {
+		height: 18px;
+		width: 18px;
+	}
+
+	.loader {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		--ring-color: transparent;
+		position: relative;
+		border: 5px solid #f3f3f3;
+		border-top: 5px solid var(--color-accent);
+		border-radius: 50%;
+		width: 25px;
+		height: 25px;
+		animation: spin 2s linear infinite;
+	}
+
+	@keyframes spin {
+		0% {
+			transform: rotate(0deg);
+		}
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+
+	.thumbnails :global(img) {
+		width: var(--size-full);
+		height: var(--size-full);
+		object-fit: cover;
+		border-radius: var(--radius-lg);
+	}
+
+	.thumbnails {
+		display: flex;
+		align-items: center;
+		gap: var(--spacing-lg);
+		overflow-x: scroll;
+		padding-top: var(--spacing-sm);
+	}
+
+	.thumbnail-item {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		--ring-color: transparent;
+		position: relative;
+		box-shadow:
+			0 0 0 2px var(--ring-color),
+			var(--shadow-drop);
+		border: 1px solid var(--border-color-primary);
+		border-radius: var(--radius-lg);
+		background: var(--background-fill-secondary);
+		aspect-ratio: var(--ratio-square);
+		width: var(--size-full);
+		height: var(--size-full);
+		cursor: default;
+	}
+
+	.thumbnail-small {
+		flex: none;
+		transform: scale(0.9);
+		transition: 0.075s;
+		width: var(--size-12);
+		height: var(--size-12);
+	}
+
+	.thumbnail-item :global(svg) {
+		width: 30px;
+		height: 30px;
+	}
+
+	.delete-button {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		position: absolute;
+		right: -7px;
+		top: -7px;
+		color: var(--button-secondary-text-color);
+		background: var(--button-secondary-background-fill);
+		border: none;
+		text-align: center;
+		text-decoration: none;
+		font-size: 10px;
+		cursor: pointer;
+		border-radius: 50%;
+		width: 20px;
+		height: 20px;
+	}
+
+	.disabled {
+		display: none;
+	}
+
+	.delete-button :global(svg) {
+		width: 12px;
+		height: 12px;
+	}
+
+	.delete-button:hover {
+		filter: brightness(1.2);
+		border: 0.8px solid var(--color-grey-500);
+	}
+</style>

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

@@ -0,0 +1,60 @@
+import { SvelteComponent } from "svelte";
+import type { FileData, Client } from "@gradio/client";
+import type { SelectData } from "@gradio/utils";
+declare const __propDef: {
+    props: {
+        value?: {
+            text: string;
+            files: FileData[];
+        } | undefined;
+        value_is_output?: boolean | undefined;
+        lines?: number | undefined;
+        placeholder?: string | undefined;
+        disabled?: boolean | undefined;
+        label: string;
+        info?: string | undefined;
+        show_label?: boolean | undefined;
+        container?: boolean | undefined;
+        max_lines: number;
+        submit_btn?: (string | boolean | null) | undefined;
+        stop_btn?: (string | boolean | null) | undefined;
+        rtl?: boolean | undefined;
+        autofocus?: boolean | undefined;
+        text_align?: "left" | "right" | undefined;
+        autoscroll?: boolean | undefined;
+        root: string;
+        file_types?: (string[] | null) | undefined;
+        max_file_size?: (number | null) | undefined;
+        upload: Client["upload"];
+        stream_handler: Client["stream"];
+        file_count?: ("single" | "multiple" | "directory") | undefined;
+        dragging?: boolean | undefined;
+    };
+    events: {
+        dragover: DragEvent;
+        error: CustomEvent<any>;
+        blur: CustomEvent<any>;
+        focus: CustomEvent<any>;
+        change: CustomEvent<{
+            text: string;
+            files: FileData[];
+        }>;
+        submit: CustomEvent<undefined>;
+        stop: CustomEvent<undefined>;
+        select: CustomEvent<SelectData>;
+        input: CustomEvent<undefined>;
+        drag: CustomEvent<boolean>;
+        upload: CustomEvent<FileData | FileData[]>;
+        clear: CustomEvent<undefined>;
+        load: CustomEvent<FileData | FileData[]>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type MultimodalTextboxProps = typeof __propDef.props;
+export type MultimodalTextboxEvents = typeof __propDef.events;
+export type MultimodalTextboxSlots = typeof __propDef.slots;
+export default class MultimodalTextbox extends SvelteComponent<MultimodalTextboxProps, MultimodalTextboxEvents, MultimodalTextboxSlots> {
+}
+export {};

package/dist/shared/utils.d.ts

@@ -0,0 +1,8 @@
+interface Value {
+    lines: number;
+    max_lines: number;
+    text: string;
+}
+export declare function resize(target: HTMLTextAreaElement | HTMLInputElement, lines: number, max_lines: number): Promise<void>;
+export declare function text_area_resize(_el: HTMLTextAreaElement, _value: Value): any | undefined;
+export {};

package/dist/shared/utils.js

@@ -0,0 +1,39 @@
+import { tick } from "svelte";
+export async function resize(target, lines, max_lines) {
+    await tick();
+    if (lines === max_lines)
+        return;
+    let max = max_lines === undefined
+        ? false
+        : max_lines === undefined // default
+            ? 21 * 11
+            : 21 * (max_lines + 1);
+    let min = 21 * (lines + 1);
+    target.style.height = "1px";
+    let scroll_height;
+    if (max && target.scrollHeight > max) {
+        scroll_height = max;
+    }
+    else if (target.scrollHeight < min) {
+        scroll_height = min;
+    }
+    else {
+        scroll_height = target.scrollHeight;
+    }
+    target.style.height = `${scroll_height}px`;
+}
+export function text_area_resize(_el, _value) {
+    if (_value.lines === _value.max_lines)
+        return;
+    _el.style.overflowY = "scroll";
+    function handle_input(event) {
+        resize(event.target, _value.lines, _value.max_lines);
+    }
+    _el.addEventListener("input", handle_input);
+    if (!_value.text.trim())
+        return;
+    resize(_el, _value.lines, _value.max_lines);
+    return {
+        destroy: () => _el.removeEventListener("input", handle_input)
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/multimodaltextbox",
-  "version": "0.5.6",
+  "version": "0.6.0-beta.1",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -9,22 +9,33 @@
   "main_changeset": true,
   "main": "Index.svelte",
   "exports": {
-    ".": "./Index.svelte",
-    "./example": "./Example.svelte",
+    ".": {
+      "gradio": "./Index.svelte",
+      "svelte": "./dist/Index.svelte",
+      "types": "./dist/Index.svelte.d.ts"
+    },
+    "./example": {
+      "gradio": "./Example.svelte",
+      "svelte": "./dist/Example.svelte",
+      "types": "./dist/Example.svelte.d.ts"
+    },
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@gradio/atoms": "^0.8.0",
-    "@gradio/icons": "^0.7.1",
-    "@gradio/statustracker": "^0.7.5",
-    "@gradio/upload": "^0.12.3",
-    "@gradio/utils": "^0.6.0",
-    "@gradio/image": "^0.15.0",
-    "@gradio/video": "^0.10.3",
-    "@gradio/client": "^1.5.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/upload": "^0.12.4-beta.1",
+    "@gradio/image": "^0.16.0-beta.1",
+    "@gradio/video": "^0.11.0-beta.1",
+    "@gradio/client": "^1.6.0-beta.1"
   },
   "devDependencies": {
-    "@gradio/preview": "^0.11.0"
+    "@gradio/preview": "^0.11.1-beta.0"
+  },
+  "peerDependencies": {
+    "svelte": "^4.0.0"
   },
   "repository": {
     "type": "git",

package/shared/MultimodalTextbox.svelte

@@ -10,7 +10,15 @@
 	import { Upload } from "@gradio/upload";
 	import { Image } from "@gradio/image/shared";
 	import type { FileData, Client } from "@gradio/client";
-	import { Clear, File, Music, Paperclip, Video, Send } from "@gradio/icons";
+	import {
+		Clear,
+		File,
+		Music,
+		Paperclip,
+		Video,
+		Send,
+		Square
+	} from "@gradio/icons";
 	import type { SelectData } from "@gradio/utils";
 
 	export let value: { text: string; files: FileData[] } = {
@@ -28,6 +36,7 @@
 	export let container = true;
 	export let max_lines: number;
 	export let submit_btn: string | boolean | null = null;
+	export let stop_btn: string | boolean | null = null;
 	export let rtl = false;
 	export let autofocus = false;
 	export let text_align: "left" | "right" | undefined = undefined;
@@ -75,6 +84,7 @@
 	const dispatch = createEventDispatcher<{
 		change: typeof value;
 		submit: undefined;
+		stop: undefined;
 		blur: undefined;
 		select: SelectData;
 		input: undefined;
@@ -188,7 +198,11 @@
 		}
 	}
 
-	async function handle_submit(): Promise<void> {
+	function handle_stop(): void {
+		dispatch("stop");
+	}
+
+	function handle_submit(): void {
 		dispatch("submit");
 	}
 
@@ -341,7 +355,20 @@
 					{#if submit_btn === true}
 						<Send />
 					{:else}
-						Hello World
+						{submit_btn}
+					{/if}
+				</button>
+			{/if}
+			{#if stop_btn}
+				<button
+					class="stop-button"
+					class:padded-button={stop_btn !== true}
+					on:click={handle_stop}
+				>
+					{#if stop_btn === true}
+						<Square />
+					{:else}
+						{stop_btn}
 					{/if}
 				</button>
 			{/if}
@@ -398,9 +425,8 @@
 	}
 
 	.upload-button,
-	.submit-button {
-		background: var(--button-secondary-background-fill);
-		color: var(--button-secondary-text-color);
+	.submit-button,
+	.stop-button {
 		border: none;
 		text-align: center;
 		text-decoration: none;
@@ -420,6 +446,12 @@
 		padding: 0 10px;
 	}
 
+	.upload-button,
+	.submit-button {
+		background: var(--button-secondary-background-fill);
+		color: var(--button-secondary-text-color);
+	}
+
 	.upload-button:hover,
 	.submit-button:hover {
 		background: var(--button-secondary-background-fill-hover);
@@ -439,6 +471,19 @@
 		width: 17px;
 	}
 
+	.stop-button {
+		background: var(--button-cancel-background-fill);
+		color: var(--button-cancel-text-color);
+	}
+	.stop-button:hover {
+		background: var(--button-cancel-background-fill-hover);
+		color: var(--button-cancel-text-color-hover);
+	}
+	.stop-button :global(svg) {
+		height: 18px;
+		width: 18px;
+	}
+
 	.loader {
 		display: flex;
 		justify-content: center;

package/shared/utils.ts

@@ -42,17 +42,16 @@ export function text_area_resize(
 ): any | undefined {
 	if (_value.lines === _value.max_lines) return;
 	_el.style.overflowY = "scroll";
-	_el.addEventListener("input", (event: Event) =>
-		resize(event.target as HTMLTextAreaElement, _value.lines, _value.max_lines)
-	);
+
+	function handle_input(event: Event): void {
+		resize(event.target as HTMLTextAreaElement, _value.lines, _value.max_lines);
+	}
+	_el.addEventListener("input", handle_input);
 
 	if (!_value.text.trim()) return;
 	resize(_el, _value.lines, _value.max_lines);
 
 	return {
-		destroy: () =>
-			_el.removeEventListener("input", (e: Event) =>
-				resize(e.target as HTMLTextAreaElement, _value.lines, _value.max_lines)
-			)
+		destroy: () => _el.removeEventListener("input", handle_input)
 	};
 }