@gradio/multimodaltextbox 0.9.14 → 0.10.1

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @gradio/multimodaltextbox
 
+## 0.10.1
+
+### Dependency updates
+
+- @gradio/upload@0.16.1
+- @gradio/atoms@0.15.1
+- @gradio/statustracker@0.10.8
+- @gradio/icons@0.12.0
+- @gradio/image@0.22.1
+- @gradio/video@0.14.9
+
+## 0.10.0
+
+### Features
+
+- [#10635](https://github.com/gradio-app/gradio/pull/10635) [`2f68c9d`](https://github.com/gradio-app/gradio/commit/2f68c9d988dcbc53a0b8e53bdb1de49c9c8c65d8) - Refactor and redesign `ImageEditor` component.  Thanks @pngwn!
+
+### Fixes
+
+- [#10925](https://github.com/gradio-app/gradio/pull/10925) [`c37de0f`](https://github.com/gradio-app/gradio/commit/c37de0f9081f30ac963b0c837e8f1985461afbb1) - Tweak `rtl` UI in `gr.MultimodalTextbox`.  Thanks @hannahblair!
+
+### Dependency updates
+
+- @gradio/statustracker@0.10.7
+- @gradio/video@0.14.8
+- @gradio/atoms@0.15.0
+- @gradio/icons@0.11.0
+- @gradio/upload@0.16.0
+- @gradio/image@0.22.0
+
 ## 0.9.14
 
 ### Dependency updates

package/MultimodalTextbox.stories.svelte

@@ -78,11 +78,11 @@
 	args={{ lines: 5, max_lines: 5 }}
 />
 <Story name="Right aligned textbox" args={{ text_align: "right" }} />
-<Story name="RTL textbox" args={{ rtl: true }} />
 <Story
 	name="Single file upload"
 	args={{
 		file_count: "single",
+		submit_btn: true,
 		value: {
 			text: "sample text",
 			files: [
@@ -94,6 +94,12 @@
 	}}
 />
 <Story
-	name="MultimodalTextbox with microphone input"
-	args={{ sources: ["microphone"] }}
+	name="MultimodalTextbox with microphone input and right to left text"
+	args={{
+		label: "مرحبًا",
+		sources: ["microphone"],
+		rtl: true,
+		submit_btn: true,
+		value: { text: "مرحبًا", files: [] }
+	}}
 />

package/dist/shared/MultimodalTextbox.svelte

@@ -53,7 +53,6 @@ export let waveform_options = {
 export let sources = ["upload"];
 export let active_source = null;
 let upload_component;
-let hidden_upload;
 let el;
 let can_scroll;
 let previous_scroll_top = 0;
@@ -164,10 +163,7 @@ function remove_thumbnail(event, index) {
   value = value;
 }
 function handle_upload_click() {
-  if (hidden_upload) {
-    hidden_upload.value = "";
-    hidden_upload.click();
-  }
+  upload_component.open_upload();
 }
 function handle_stop() {
   dispatch("stop");
@@ -260,7 +256,7 @@ function handle_drop(event) {
 	role="group"
 	aria-label="Multimedia input field"
 >
-	<BlockTitle {root} {show_label} {info}>{label}</BlockTitle>
+	<BlockTitle {root} {show_label} {info} {rtl}>{label}</BlockTitle>
 	{#if value.files.length > 0 || uploading}
 		<div
 			class="thumbnails scroll-hide"
@@ -345,7 +341,6 @@ function handle_drop(event) {
 				bind:uploading
 				show_progress={false}
 				disable_click={true}
-				bind:hidden_upload
 				on:error
 				hidden={true}
 				{upload}
@@ -474,7 +469,22 @@ function handle_drop(event) {
 		resize: none;
 		position: relative;
 		z-index: 1;
+		text-align: left;
+	}
+	textarea[dir="rtl"] {
+		text-align: right;
+	}
+
+	textarea[dir="rtl"] ~ .submit-button {
+		order: -1;
+		margin-left: 0;
+		margin-right: var(--spacing-sm);
 	}
+
+	textarea[dir="rtl"] ~ .submit-button :global(svg) {
+		transform: scaleX(-1);
+	}
+
 	textarea.no-label {
 		padding-top: 5px;
 		padding-bottom: 5px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/multimodaltextbox",
-  "version": "0.9.14",
+  "version": "0.10.1",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -22,13 +22,13 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@gradio/atoms": "^0.14.1",
-    "@gradio/icons": "^0.10.0",
-    "@gradio/statustracker": "^0.10.6",
-    "@gradio/upload": "^0.15.7",
-    "@gradio/image": "^0.21.7",
+    "@gradio/atoms": "^0.15.1",
+    "@gradio/icons": "^0.12.0",
+    "@gradio/statustracker": "^0.10.8",
     "@gradio/utils": "^0.10.1",
-    "@gradio/video": "^0.14.7",
+    "@gradio/image": "^0.22.1",
+    "@gradio/video": "^0.14.9",
+    "@gradio/upload": "^0.16.1",
     "@gradio/client": "^1.14.1"
   },
   "devDependencies": {

package/shared/MultimodalTextbox.svelte

@@ -60,7 +60,6 @@
 	export let sources: ["microphone" | "upload"] = ["upload"];
 	export let active_source: "microphone" | null = null;
 	let upload_component: Upload;
-	let hidden_upload: HTMLInputElement;
 	let el: HTMLTextAreaElement | HTMLInputElement;
 	let can_scroll: boolean;
 	let previous_scroll_top = 0;
@@ -205,10 +204,7 @@
 	}
 
 	function handle_upload_click(): void {
-		if (hidden_upload) {
-			hidden_upload.value = "";
-			hidden_upload.click();
-		}
+		upload_component.open_upload();
 	}
 
 	function handle_stop(): void {
@@ -315,7 +311,7 @@
 	role="group"
 	aria-label="Multimedia input field"
 >
-	<BlockTitle {root} {show_label} {info}>{label}</BlockTitle>
+	<BlockTitle {root} {show_label} {info} {rtl}>{label}</BlockTitle>
 	{#if value.files.length > 0 || uploading}
 		<div
 			class="thumbnails scroll-hide"
@@ -400,7 +396,6 @@
 				bind:uploading
 				show_progress={false}
 				disable_click={true}
-				bind:hidden_upload
 				on:error
 				hidden={true}
 				{upload}
@@ -529,7 +524,22 @@
 		resize: none;
 		position: relative;
 		z-index: 1;
+		text-align: left;
+	}
+	textarea[dir="rtl"] {
+		text-align: right;
+	}
+
+	textarea[dir="rtl"] ~ .submit-button {
+		order: -1;
+		margin-left: 0;
+		margin-right: var(--spacing-sm);
 	}
+
+	textarea[dir="rtl"] ~ .submit-button :global(svg) {
+		transform: scaleX(-1);
+	}
+
 	textarea.no-label {
 		padding-top: 5px;
 		padding-bottom: 5px;