@gradio/multimodaltextbox 0.2.1 → 0.2.3

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @gradio/multimodaltextbox
 
+## 0.2.3
+
+### Features
+
+- [#7875](https://github.com/gradio-app/gradio/pull/7875) [`e6d051d`](https://github.com/gradio-app/gradio/commit/e6d051dc8a497fdd6b4cfbd57efd4c8015b97a66) - Paste Images into MultimodalTextbox.  Thanks @abidlabs!
+
+### Dependency updates
+
+- @gradio/upload@0.8.3
+- @gradio/client@0.15.0
+- @gradio/image@0.9.10
+
+## 0.2.2
+
+### Fixes
+
+- [#7848](https://github.com/gradio-app/gradio/pull/7848) [`8d7b3ca`](https://github.com/gradio-app/gradio/commit/8d7b3caebd8f95b1372f8412cadbb5862766c365) - Multimodal Textbox Loading + other fixes.  Thanks @dawoodkhan82!
+
+### Dependency updates
+
+- @gradio/atoms@0.6.1
+- @gradio/statustracker@0.4.10
+- @gradio/icons@0.3.4
+- @gradio/upload@0.8.2
+- @gradio/image@0.9.9
+
 ## 0.2.1
 
 ### Dependency updates

package/Index.svelte

@@ -38,7 +38,7 @@
 	export let container = true;
 	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
-	export let submit_btn = "⌲";
+	export let submit_btn: string | null = null;
 	export let loading_status: LoadingStatus | undefined = undefined;
 	export let value_is_output = false;
 	export let rtl = false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/multimodaltextbox",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -14,12 +14,12 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@gradio/atoms": "^0.6.0",
-    "@gradio/statustracker": "^0.4.9",
-    "@gradio/icons": "^0.3.3",
+    "@gradio/atoms": "^0.6.1",
+    "@gradio/icons": "^0.3.4",
     "@gradio/utils": "^0.3.0",
-    "@gradio/upload": "^0.8.1",
-    "@gradio/image": "^0.9.8",
-    "@gradio/client": "^0.14.0"
+    "@gradio/statustracker": "^0.4.10",
+    "@gradio/upload": "^0.8.3",
+    "@gradio/image": "^0.9.10",
+    "@gradio/client": "^0.15.0"
   }
 }

package/shared/MultimodalTextbox.svelte

@@ -9,8 +9,8 @@
 	import { BlockTitle } from "@gradio/atoms";
 	import { Upload } from "@gradio/upload";
 	import { Image } from "@gradio/image/shared";
-	import type { FileData } from "@gradio/client";
-	import { Clear, File, Music, Video } from "@gradio/icons";
+	import type { FileData, upload } from "@gradio/client";
+	import { Clear, File, Music, Video, Send } from "@gradio/icons";
 	import type { SelectData } from "@gradio/utils";
 
 	export let value: { text: string; files: FileData[] } = {
@@ -27,7 +27,7 @@
 	export let show_label = true;
 	export let container = true;
 	export let max_lines: number;
-	export let submit_btn = "⌲";
+	export let submit_btn: string | null = null;
 	export let rtl = false;
 	export let autofocus = false;
 	export let text_align: "left" | "right" | undefined = undefined;
@@ -35,11 +35,14 @@
 	export let root: string;
 	export let file_types: string[] | null = null;
 
+	let upload_component: Upload;
+	let hidden_upload: HTMLInputElement;
 	let el: HTMLTextAreaElement | HTMLInputElement;
 	let can_scroll: boolean;
 	let previous_scroll_top = 0;
 	let user_has_scrolled_up = false;
 	let dragging = false;
+	let uploading = false;
 	let oldValue = value.text;
 	$: dispatch("drag", dragging);
 
@@ -171,8 +174,6 @@
 		value = value;
 	}
 
-	let hidden_upload: HTMLInputElement;
-
 	function handle_upload_click(): void {
 		if (hidden_upload) {
 			hidden_upload.click();
@@ -182,6 +183,18 @@
 	async function handle_submit(): Promise<void> {
 		dispatch("submit");
 	}
+
+	function handle_paste(event: ClipboardEvent): void {
+		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]);
+			}
+		}
+	}
 </script>
 
 <!-- svelte-ignore a11y-autofocus -->
@@ -189,26 +202,34 @@
 	<BlockTitle {show_label} {info}>{label}</BlockTitle>
 	<div class="input-container">
 		<Upload
+			bind:this={upload_component}
 			on:load={handle_upload}
 			filetype={accept_file_types}
 			{root}
 			bind:dragging
+			bind:uploading
 			disable_click={true}
 			bind:hidden_upload
 		>
-			{#if submit_btn}
+			{#if submit_btn !== null}
 				<button class:disabled class="submit-button" on:click={handle_submit}
 					>{submit_btn}</button
 				>
+			{:else}
+				<button class:disabled class="submit-button" on:click={handle_submit}
+					><Send /></button
+				>
 			{/if}
 			<button class:disabled class="plus-button" on:click={handle_upload_click}
 				>+</button
 			>
-			{#if value.files.length > 0}
+			{#if value.files.length > 0 || uploading}
 				<div
 					class="thumbnails scroll-hide"
 					data-testid="container_el"
-					style="display: {value.files.length > 0 ? 'flex' : 'none'};"
+					style="display: {value.files.length > 0 || uploading
+						? 'flex'
+						: 'none'};"
 				>
 					{#each value.files as file, index}
 						<button class="thumbnail-item thumbnail-small">
@@ -235,6 +256,9 @@
 							{/if}
 						</button>
 					{/each}
+					{#if uploading}
+						<div class="loader"></div>
+					{/if}
 				</div>
 			{/if}
 			<textarea
@@ -257,6 +281,7 @@
 				on:select={handle_select}
 				on:focus
 				on:scroll={handle_scroll}
+				on:paste={handle_paste}
 				style={text_align ? "text-align: " + text_align : ""}
 			/>
 		</Upload>
@@ -288,6 +313,7 @@
 		margin-bottom: 0px;
 		margin-left: 30px;
 		padding-top: 12px;
+		resize: none;
 	}
 
 	textarea:disabled {
@@ -335,11 +361,41 @@
 		padding-left: 2px;
 	}
 
+	.submit-button :global(svg) {
+		height: 23px;
+		width: 23px;
+		padding-left: 4px;
+		padding-top: 2px;
+	}
+
 	.plus-button {
 		left: 10px;
 		margin-right: 5px;
 	}
 
+	.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);