Hide avatar when message none (#5366)

* hide avatar when message none

* add changeset

* frontend test and story

* test fix

* fix test

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

.changeset/puny-wombats-tell.md

@@ -0,0 +1,6 @@
+---
+"@gradio/chatbot": patch
+"gradio": patch
+---
+
+fix:Hide avatar when message none

js/chatbot/Chatbot.stories.svelte

@@ -35,7 +35,8 @@
 				"Can you write a function in Python?",
 				"```py\ndef test():\n\tprint(x)\n```"
 			],
-			["Can you do math?", "$$1+1=2$$"]
+			["Can you do math?", "$$1+1=2$$"],
+			["Can you say nothing?", null]
 		]}
 	/>
 </Template>

js/chatbot/Chatbot.test.ts

@@ -36,6 +36,23 @@ describe("Chatbot", () => {
 		assert.exists(user);
 	});
 
+	test("renders none messages", async () => {
+		const { getAllByTestId } = await render(Chatbot, {
+			loading_status,
+			label: "chatbot",
+			value: [[null, null]],
+			root: "",
+			root_url: "",
+			latex_delimiters: [{ left: "$$", right: "$$", display: true }],
+			theme_mode: "dark"
+		});
+
+		const user = getAllByTestId("user");
+		const bot = getAllByTestId("bot");
+		assert.equal(user[0].innerHTML, "");
+		assert.equal(bot[0].innerHTML, "");
+	});
+
 	test("renders additional message as they are passed", async () => {
 		const { component, getAllByTestId } = await render(Chatbot, {
 			loading_status,

js/chatbot/static/ChatBot.svelte

@@ -96,7 +96,10 @@
 		{#if value !== null}
 			{#each value as message_pair, i}
 				{#each message_pair as message, j}
-					<div class="message-row {j == 0 ? 'user-row' : 'bot-row'}">
+					<div
+						class="message-row {j == 0 ? 'user-row' : 'bot-row'}"
+						class:hide={message === null}
+					>
 						{#if avatar_images[j] !== null}
 							<div class="avatar-container">
 								<img
@@ -118,7 +121,6 @@
 							class:latest={i === value.length - 1}
 							class="message {j == 0 ? 'user' : 'bot'}"
 							class:message-fit={!bubble_full_width}
-							class:hide={message === null}
 							class:selectable
 							on:click={() => handle_select(i, j, message)}
 							dir={rtl ? "rtl" : "ltr"}