@gradio/multimodaltextbox 0.5.5 → 0.6.0-beta.1

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;
@@ -45,11 +54,13 @@
 	let can_scroll: boolean;
 	let previous_scroll_top = 0;
 	let user_has_scrolled_up = false;
-	let dragging = false;
+	export let dragging = false;
 	let uploading = false;
 	let oldValue = value.text;
 	$: dispatch("drag", dragging);
 
+	let full_container: HTMLDivElement;
+
 	$: if (oldValue !== value.text) {
 		dispatch("change", value);
 		oldValue = value.text;
@@ -73,6 +84,7 @@
 	const dispatch = createEventDispatcher<{
 		change: typeof value;
 		submit: undefined;
+		stop: undefined;
 		blur: undefined;
 		select: SelectData;
 		input: undefined;
@@ -186,7 +198,11 @@
 		}
 	}
 
-	async function handle_submit(): Promise<void> {
+	function handle_stop(): void {
+		dispatch("stop");
+	}
+
+	function handle_submit(): void {
 		dispatch("submit");
 	}
 
@@ -201,109 +217,181 @@
 			}
 		}
 	}
+
+	function handle_dragenter(event: DragEvent): void {
+		event.preventDefault();
+		dragging = true;
+	}
+
+	function handle_dragleave(event: DragEvent): void {
+		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: DragEvent): void {
+		event.preventDefault();
+		dragging = false;
+		if (event.dataTransfer && event.dataTransfer.files) {
+			upload_component.load_files(Array.from(event.dataTransfer.files));
+		}
+	}
 </script>
 
-<!-- svelte-ignore a11y-autofocus -->
-<label class:container>
-	<BlockTitle {show_label} {info}>{label}</BlockTitle>
-	{#if value.files.length > 0 || uploading}
-		<div
-			class="thumbnails scroll-hide"
-			data-testid="container_el"
-			style="display: {value.files.length > 0 || uploading ? 'flex' : 'none'};"
-		>
-			{#each value.files as file, index}
-				<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 />
+<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}
-						<File />
+						{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>
-			{/each}
-			{#if uploading}
-				<div class="loader"></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}
-					Hello World
-				{/if}
-			</button>
-		{/if}
-	</div>
-</label>
+	</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;
@@ -323,6 +411,8 @@
 		margin-top: 0px;
 		margin-bottom: 0px;
 		resize: none;
+		position: relative;
+		z-index: 1;
 	}
 
 	textarea:disabled {
@@ -335,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;
@@ -351,11 +440,18 @@
 		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);
@@ -375,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;
@@ -406,11 +515,11 @@
 	}
 
 	.thumbnails {
-		align-self: flex-start;
 		display: flex;
-		justify-content: left;
 		align-items: center;
 		gap: var(--spacing-lg);
+		overflow-x: scroll;
+		padding-top: var(--spacing-sm);
 	}
 
 	.thumbnail-item {

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