From 0cc7e2dcf60e216e0a30e2f85a9879ce3cb2a1bd Mon Sep 17 00:00:00 2001
From: Dawood Khan <dawoodkhan82@gmail.com>
Date: Tue, 29 Aug 2023 14:40:10 -0400
Subject: [PATCH] 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   |  6 ++++++
 js/chatbot/Chatbot.stories.svelte |  3 ++-
 js/chatbot/Chatbot.test.ts        | 17 +++++++++++++++++
 js/chatbot/static/ChatBot.svelte  |  6 ++++--
 4 files changed, 29 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/puny-wombats-tell.md

diff --git a/.changeset/puny-wombats-tell.md b/.changeset/puny-wombats-tell.md
new file mode 100644
index 000000000000..ec078b7d296c
--- /dev/null
+++ b/.changeset/puny-wombats-tell.md
@@ -0,0 +1,6 @@
+---
+"@gradio/chatbot": patch
+"gradio": patch
+---
+
+fix:Hide avatar when message none
diff --git a/js/chatbot/Chatbot.stories.svelte b/js/chatbot/Chatbot.stories.svelte
index fbe342c9b761..e6abd5f8192e 100644
--- a/js/chatbot/Chatbot.stories.svelte
+++ b/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>
diff --git a/js/chatbot/Chatbot.test.ts b/js/chatbot/Chatbot.test.ts
index 1b1831b9be9f..8693a0627818 100644
--- a/js/chatbot/Chatbot.test.ts
+++ b/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,
diff --git a/js/chatbot/static/ChatBot.svelte b/js/chatbot/static/ChatBot.svelte
index dd83369709dc..a3e2a9466f54 100644
--- a/js/chatbot/static/ChatBot.svelte
+++ b/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"}