@gradio/multimodaltextbox 0.2.0 → 0.2.2

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @gradio/multimodaltextbox
 
+## 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
+
+- @gradio/upload@0.8.1
+- @gradio/statustracker@0.4.9
+- @gradio/atoms@0.6.0
+- @gradio/image@0.9.8
+
 ## 0.2.0
 
 ### Features

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.0",
+  "version": "0.2.2",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -14,12 +14,12 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@gradio/atoms": "^0.5.3",
-    "@gradio/icons": "^0.3.3",
-    "@gradio/upload": "^0.8.0",
-    "@gradio/utils": "^0.3.0",
-    "@gradio/image": "^0.9.7",
+    "@gradio/atoms": "^0.6.1",
+    "@gradio/icons": "^0.3.4",
+    "@gradio/upload": "^0.8.2",
+    "@gradio/image": "^0.9.9",
+    "@gradio/statustracker": "^0.4.10",
     "@gradio/client": "^0.14.0",
-    "@gradio/statustracker": "^0.4.8"
+    "@gradio/utils": "^0.3.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;
@@ -40,6 +40,7 @@
 	let previous_scroll_top = 0;
 	let user_has_scrolled_up = false;
 	let dragging = false;
+	let uploading = false;
 	let oldValue = value.text;
 	$: dispatch("drag", dragging);
 
@@ -193,22 +194,29 @@
 			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 +243,9 @@
 							{/if}
 						</button>
 					{/each}
+					{#if uploading}
+						<div class="loader"></div>
+					{/if}
 				</div>
 			{/if}
 			<textarea
@@ -288,6 +299,7 @@
 		margin-bottom: 0px;
 		margin-left: 30px;
 		padding-top: 12px;
+		resize: none;
 	}
 
 	textarea:disabled {
@@ -335,11 +347,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);