@gradio/multimodaltextbox 0.3.0 → 0.4.1

package/CHANGELOG.md

@@ -1,5 +1,44 @@
 # @gradio/multimodaltextbox
 
+## 0.4.1
+
+### Features
+
+- [#8236](https://github.com/gradio-app/gradio/pull/8236) [`bf909bd`](https://github.com/gradio-app/gradio/commit/bf909bd14532a27e119fb401003a7d94c0618ffb) - Change upload icon for MultimodalTextbox.  Thanks @dawoodkhan82!
+
+### Fixes
+
+- [#8252](https://github.com/gradio-app/gradio/pull/8252) [`22df61a`](https://github.com/gradio-app/gradio/commit/22df61a26adf8023f6dd49c051979990e8d3879a) - Client node fix.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/atoms@0.7.3
+- @gradio/statustracker@0.5.2
+- @gradio/client@0.19.0
+- @gradio/icons@0.4.1
+- @gradio/image@0.11.1
+- @gradio/upload@0.10.1
+
+## 0.4.0
+
+### Features
+
+- [#8121](https://github.com/gradio-app/gradio/pull/8121) [`f5b710c`](https://github.com/gradio-app/gradio/commit/f5b710c919b0ce604ea955f0d5f4faa91095ca4a) - chore(deps): update dependency eslint to v9.  Thanks @renovate!
+- [#8209](https://github.com/gradio-app/gradio/pull/8209) [`b9afe93`](https://github.com/gradio-app/gradio/commit/b9afe93915401df5bd6737c89395c2477acfa585) - Rename `eventSource_Factory` and `fetch_implementation`.  Thanks @hannahblair!
+
+### Fixes
+
+- [#8179](https://github.com/gradio-app/gradio/pull/8179) [`6a218b4`](https://github.com/gradio-app/gradio/commit/6a218b4148095aaa0c58d8c20973ba01c8764fc2) - rework upload to be a class method + pass client into each component.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/atoms@0.7.2
+- @gradio/client@0.18.0
+- @gradio/upload@0.10.0
+- @gradio/utils@0.4.1
+- @gradio/statustracker@0.5.1
+- @gradio/image@0.11.0
+
 ## 0.3.0
 
 ### Highlights

package/Index.svelte

@@ -97,5 +97,7 @@
 			gradio.dispatch("error", detail);
 		}}
 		disabled={!interactive}
+		upload={gradio.client.upload}
+		stream_handler={gradio.client.stream}
 	/>
 </Block>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/multimodaltextbox",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -14,15 +14,15 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@gradio/atoms": "^0.7.1",
-    "@gradio/icons": "^0.4.0",
-    "@gradio/statustracker": "^0.5.0",
-    "@gradio/upload": "^0.9.0",
-    "@gradio/utils": "^0.4.0",
-    "@gradio/client": "^0.17.0",
-    "@gradio/image": "^0.10.0"
+    "@gradio/icons": "^0.4.1",
+    "@gradio/atoms": "^0.7.3",
+    "@gradio/statustracker": "^0.5.2",
+    "@gradio/utils": "^0.4.1",
+    "@gradio/image": "^0.11.1",
+    "@gradio/upload": "^0.10.1",
+    "@gradio/client": "^0.19.0"
   },
   "devDependencies": {
-    "@gradio/preview": "^0.8.0"
+    "@gradio/preview": "^0.9.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, upload } from "@gradio/client";
-	import { Clear, File, Music, Video, Send } from "@gradio/icons";
+	import type { FileData, Client } from "@gradio/client";
+	import { Clear, File, Music, Paperclip, Video, Send } from "@gradio/icons";
 	import type { SelectData } from "@gradio/utils";
 
 	export let value: { text: string; files: FileData[] } = {
@@ -35,6 +35,8 @@
 	export let root: string;
 	export let file_types: string[] | null = null;
 	export let max_file_size: number | null = null;
+	export let upload: Client["upload"];
+	export let stream_handler: Client["stream"];
 
 	let upload_component: Upload;
 	let hidden_upload: HTMLInputElement;
@@ -215,6 +217,8 @@
 			disable_click={true}
 			bind:hidden_upload
 			on:error
+			{upload}
+			{stream_handler}
 		>
 			{#if submit_btn !== null}
 				<button class:disabled class="submit-button" on:click={handle_submit}
@@ -225,8 +229,10 @@
 					><Send /></button
 				>
 			{/if}
-			<button class:disabled class="plus-button" on:click={handle_upload_click}
-				>+</button
+			<button
+				data-testid="upload-button"
+				class="upload-button"
+				on:click={handle_upload_click}><Paperclip /></button
 			>
 			{#if value.files.length > 0 || uploading}
 				<div
@@ -333,7 +339,7 @@
 		color: var(--input-placeholder-color);
 	}
 
-	.plus-button,
+	.upload-button,
 	.submit-button {
 		position: absolute;
 		background: var(--button-secondary-background-fill);
@@ -349,12 +355,12 @@
 		bottom: 15px;
 	}
 
-	.plus-button:hover,
+	.upload-button:hover,
 	.submit-button:hover {
 		background: var(--button-secondary-background-fill-hover);
 	}
 
-	.plus-button:active,
+	.upload-button:active,
 	.submit-button:active {
 		box-shadow: var(--button-shadow-active);
 	}
@@ -373,11 +379,17 @@
 		padding-top: 2px;
 	}
 
-	.plus-button {
+	.upload-button {
 		left: 10px;
 		margin-right: 5px;
 	}
 
+	.upload-button :global(svg) {
+		height: 23px;
+		width: 23px;
+		padding-left: 7px;
+	}
+
 	.loader {
 		display: flex;
 		justify-content: center;

package/shared/utils.ts

@@ -18,8 +18,8 @@ export async function resize(
 		max_lines === undefined
 			? false
 			: max_lines === undefined // default
-			? 21 * 11
-			: 21 * (max_lines + 1);
+				? 21 * 11
+				: 21 * (max_lines + 1);
 	let min = 21 * (lines + 1);
 
 	target.style.height = "1px";