Change upload icon for MultimodalTextbox (#8236)

* icon

* add changeset

* add changeset

* test fix

* format

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

.changeset/smooth-emus-cover.md

@@ -0,0 +1,7 @@
+---
+"@gradio/icons": patch
+"@gradio/multimodaltextbox": patch
+"gradio": patch
+---
+
+feat:Change upload icon for MultimodalTextbox

js/app/test/chatbot_multimodal.spec.ts

@@ -24,7 +24,7 @@ test("images uploaded by a user should be shown in the chat", async ({
 	page
 }) => {
 	const fileChooserPromise = page.waitForEvent("filechooser");
-	await page.getByRole("button", { name: "+", exact: true }).click();
+	await page.getByTestId("upload-button").click();
 	const fileChooser = await fileChooserPromise;
 	await fileChooser.setFiles("./test/files/cheetah1.jpg");
 	await page.getByTestId("textbox").click();
@@ -46,7 +46,7 @@ test("audio uploaded by a user should be shown in the chatbot", async ({
 	page
 }) => {
 	const fileChooserPromise = page.waitForEvent("filechooser");
-	await page.getByRole("button", { name: "+" }).click();
+	await page.getByTestId("upload-button").click();
 	const fileChooser = await fileChooserPromise;
 	await fileChooser.setFiles("../../test/test_files/audio_sample.wav");
 	await page.getByTestId("textbox").click();
@@ -67,7 +67,7 @@ test("videos uploaded by a user should be shown in the chatbot", async ({
 	page
 }) => {
 	const fileChooserPromise = page.waitForEvent("filechooser");
-	await page.getByRole("button", { name: "+" }).click();
+	await page.getByTestId("upload-button").click();
 	const fileChooser = await fileChooserPromise;
 	await fileChooser.setFiles("../../test/test_files/video_sample.mp4");
 	await page.getByTestId("textbox").click();

js/app/test/upload_file_limit_test.spec.ts

@@ -79,7 +79,7 @@ test("gr.Model3D() triggers the gr.Error modal when an uploaded file exceeds max
 test("gr.MultimodalTextBox() triggers the gr.Error modal when an uploaded file exceeds max_file_size ", async ({
 	page
 }) => {
-	const locator = page.getByRole("button", { name: "+" });
+	const locator = page.getByTestId("upload-button").first();
 	const file_chooser = await get_file_selector(page, locator);
 	await file_chooser.setFiles(["./test/files/face.obj"]);
 	await error_modal_showed(page);

js/icons/src/Paperclip.svelte

@@ -0,0 +1,15 @@
+<svg
+	fill="currentColor"
+	viewBox="0 0 1920 1920"
+	xmlns="http://www.w3.org/2000/svg"
+	><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g
+		id="SVGRepo_tracerCarrier"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	></g><g id="SVGRepo_iconCarrier">
+		<path
+			d="M1752.768 221.109C1532.646.986 1174.283.986 954.161 221.109l-838.588 838.588c-154.052 154.165-154.052 404.894 0 558.946 149.534 149.421 409.976 149.308 559.059 0l758.738-758.626c87.982-88.094 87.982-231.417 0-319.51-88.32-88.208-231.642-87.982-319.51 0l-638.796 638.908 79.85 79.849 638.795-638.908c43.934-43.821 115.539-43.934 159.812 0 43.934 44.047 43.934 115.877 0 159.812l-758.739 758.625c-110.23 110.118-289.355 110.005-399.36 0-110.118-110.117-110.005-289.242 0-399.247l838.588-838.588c175.963-175.962 462.382-176.188 638.909 0 176.075 176.188 176.075 462.833 0 638.908l-798.607 798.72 79.849 79.85 798.607-798.72c220.01-220.123 220.01-578.485 0-798.607"
+			fill-rule="evenodd"
+		></path>
+	</g></svg
+>

js/icons/src/index.ts

@@ -32,6 +32,7 @@ export { default as Maximise } from "./Maximise.svelte";
 export { default as Microphone } from "./Microphone.svelte";
 export { default as Music } from "./Music.svelte";
 export { default as Palette } from "./Palette.svelte";
+export { default as Paperclip } from "./Paperclip.svelte";
 export { default as Pause } from "./Pause.svelte";
 export { default as Play } from "./Play.svelte";
 export { default as Plot } from "./Plot.svelte";

js/multimodaltextbox/shared/MultimodalTextbox.svelte

@@ -10,7 +10,7 @@
 	import { Upload } from "@gradio/upload";
 	import { Image } from "@gradio/image/shared";
 	import type { FileData, Client } from "@gradio/client";
-	import { Clear, File, Music, Video, Send } from "@gradio/icons";
+	import { Clear, File, Music, Paperclip, Video, Send } from "@gradio/icons";
 	import type { SelectData } from "@gradio/utils";
 
 	export let value: { text: string; files: FileData[] } = {
@@ -229,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
@@ -337,7 +339,7 @@
 		color: var(--input-placeholder-color);
 	}
 
-	.plus-button,
+	.upload-button,
 	.submit-button {
 		position: absolute;
 		background: var(--button-secondary-background-fill);
@@ -353,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);
 	}
@@ -377,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;