@gradio/multimodaltextbox 0.7.8 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @gradio/multimodaltextbox
 
+## 0.8.0
+
+### Features
+
+- [#10135](https://github.com/gradio-app/gradio/pull/10135) [`3e93740`](https://github.com/gradio-app/gradio/commit/3e93740f057712278a7c2194a1702f48915683e1) - Improve pasted text behaviour in `Multimodaltextbox`.  Thanks @hannahblair!
+
+### Fixes
+
+- [#10168](https://github.com/gradio-app/gradio/pull/10168) [`7d70596`](https://github.com/gradio-app/gradio/commit/7d70596d0b3343dc4b357758f85420a0afdb65a2) - Multimodal autofocus fix.  Thanks @dawoodkhan82!
+
+### Dependency updates
+
+- @gradio/video@0.12.1
+- @gradio/statustracker@0.9.7
+- @gradio/upload@0.14.3
+- @gradio/atoms@0.12.0
+- @gradio/image@0.19.0
+
 ## 0.7.8
 
 ### Dependency updates

package/Index.svelte

@@ -52,6 +52,7 @@
 	export let interactive: boolean;
 	export let root: string;
 	export let file_count: "single" | "multiple" | "directory";
+	export let max_plain_text_length: number;
 
 	let dragging: boolean;
 </script>
@@ -109,5 +110,6 @@
 		disabled={!interactive}
 		upload={(...args) => gradio.client.upload(...args)}
 		stream_handler={(...args) => gradio.client.stream(...args)}
+		{max_plain_text_length}
 	/>
 </Block>

package/dist/Index.svelte

@@ -36,6 +36,7 @@ export let autoscroll = true;
 export let interactive;
 export let root;
 export let file_count;
+export let max_plain_text_length;
 let dragging;
 </script>
 
@@ -92,5 +93,6 @@ let dragging;
 		disabled={!interactive}
 		upload={(...args) => gradio.client.upload(...args)}
 		stream_handler={(...args) => gradio.client.stream(...args)}
+		{max_plain_text_length}
 	/>
 </Block>

package/dist/Index.svelte.d.ts

@@ -48,6 +48,7 @@ declare const __propDef: {
         interactive: boolean;
         root: string;
         file_count: "single" | "multiple" | "directory";
+        max_plain_text_length: number;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -168,4 +169,7 @@ export default class Index extends SvelteComponent<IndexProps, IndexEvents, Inde
     get file_count(): "single" | "multiple" | "directory";
     /**accessor*/
     set file_count(_: "single" | "multiple" | "directory");
+    get max_plain_text_length(): number;
+    /**accessor*/
+    set max_plain_text_length(_: number);
 }

package/dist/shared/MultimodalTextbox.svelte

@@ -1,4 +1,5 @@
 <script>import {
+  onMount,
   beforeUpdate,
   afterUpdate,
   createEventDispatcher,
@@ -42,6 +43,7 @@ export let max_file_size = null;
 export let upload;
 export let stream_handler;
 export let file_count = "multiple";
+export let max_plain_text_length = 1e3;
 let upload_component;
 let hidden_upload;
 let el;
@@ -79,10 +81,12 @@ async function handle_change() {
     dispatch("input");
   }
 }
-afterUpdate(() => {
+onMount(() => {
   if (autofocus && el !== null) {
     el.focus();
   }
+});
+afterUpdate(() => {
   if (can_scroll && autoscroll) {
     scroll();
   }
@@ -155,10 +159,22 @@ function handle_stop() {
 function handle_submit() {
   dispatch("submit");
 }
-function handle_paste(event) {
+async function handle_paste(event) {
   if (!event.clipboardData)
     return;
   const items = event.clipboardData.items;
+  const text = event.clipboardData.getData("text");
+  if (text && text.length > max_plain_text_length) {
+    event.preventDefault();
+    const file = new window.File([text], "pasted_text.txt", {
+      type: "text/plain",
+      lastModified: Date.now()
+    });
+    if (upload_component) {
+      upload_component.load_files([file]);
+    }
+    return;
+  }
   for (let index in items) {
     const item = items[index];
     if (item.kind === "file" && item.type.includes("image")) {

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

@@ -28,6 +28,7 @@ declare const __propDef: {
         upload: Client["upload"];
         stream_handler: Client["stream"];
         file_count?: ("single" | "multiple" | "directory") | undefined;
+        max_plain_text_length?: number | undefined;
         dragging?: boolean | undefined;
     };
     events: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/multimodaltextbox",
-  "version": "0.7.8",
+  "version": "0.8.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -22,13 +22,13 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@gradio/atoms": "^0.11.2",
-    "@gradio/icons": "^0.8.1",
-    "@gradio/statustracker": "^0.9.6",
+    "@gradio/atoms": "^0.12.0",
+    "@gradio/statustracker": "^0.9.7",
     "@gradio/utils": "^0.9.0",
-    "@gradio/upload": "^0.14.2",
-    "@gradio/image": "^0.18.0",
-    "@gradio/video": "^0.12.0",
+    "@gradio/upload": "^0.14.3",
+    "@gradio/video": "^0.12.1",
+    "@gradio/image": "^0.19.0",
+    "@gradio/icons": "^0.8.1",
     "@gradio/client": "^1.8.0"
   },
   "devDependencies": {

package/shared/MultimodalTextbox.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import {
+		onMount,
 		beforeUpdate,
 		afterUpdate,
 		createEventDispatcher,
@@ -47,6 +48,7 @@
 	export let upload: Client["upload"];
 	export let stream_handler: Client["stream"];
 	export let file_count: "single" | "multiple" | "directory" = "multiple";
+	export let max_plain_text_length = 1000;
 
 	let upload_component: Upload;
 	let hidden_upload: HTMLInputElement;
@@ -101,10 +103,13 @@
 		}
 	}
 
-	afterUpdate(() => {
+	onMount(() => {
 		if (autofocus && el !== null) {
 			el.focus();
 		}
+	});
+
+	afterUpdate(() => {
 		if (can_scroll && autoscroll) {
 			scroll();
 		}
@@ -194,9 +199,23 @@
 		dispatch("submit");
 	}
 
-	function handle_paste(event: ClipboardEvent): void {
+	async function handle_paste(event: ClipboardEvent): Promise<void> {
 		if (!event.clipboardData) return;
 		const items = event.clipboardData.items;
+		const text = event.clipboardData.getData("text");
+
+		if (text && text.length > max_plain_text_length) {
+			event.preventDefault();
+			const file = new window.File([text], "pasted_text.txt", {
+				type: "text/plain",
+				lastModified: Date.now()
+			});
+			if (upload_component) {
+				upload_component.load_files([file]);
+			}
+			return;
+		}
+
 		for (let index in items) {
 			const item = items[index];
 			if (item.kind === "file" && item.type.includes("image")) {