Adds a placeholder argument to gr.Chatbot (#7849)

* add placeholder

* add changeset

* add test

* format

* lint

* chatbot

---------

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

.changeset/beige-animals-tan.md

@@ -0,0 +1,6 @@
+---
+"@gradio/chatbot": minor
+"gradio": minor
+---
+
+feat:Adds a `placeholder` argument to `gr.Chatbot`

gradio/components/chatbot.py

@@ -66,6 +66,7 @@ class Chatbot(Component):
         line_breaks: bool = True,
         likeable: bool = False,
         layout: Literal["panel", "bubble"] | None = None,
+        placeholder: str | None = None,
     ):
         """
         Parameters:
@@ -92,6 +93,7 @@ class Chatbot(Component):
             line_breaks: If True (default), will enable Github-flavored Markdown line breaks in chatbot messages. If False, single new lines will be ignored. Only applies if `render_markdown` is True.
             likeable: Whether the chat messages display a like or dislike button. Set automatically by the .like method but has to be present in the signature for it to show up in the config.
             layout: If "panel", will display the chatbot in a llm style layout. If "bubble", will display the chatbot with message bubbles, with the user and bot messages on alterating sides. Will default to "bubble".
+            placeholder: a placeholder message to display in the chatbot when it is empty. Centered vertically and horizontally in the Chatbot. Supports Markdown and HTML. If None, no placeholder is displayed.
         """
         self.likeable = likeable
         self.height = height
@@ -131,6 +133,7 @@ class Chatbot(Component):
                 self.serve_static_file(avatar_images[0]),
                 self.serve_static_file(avatar_images[1]),
             ]
+        self.placeholder = placeholder
 
     def _preprocess_chat_messages(
         self, chat_message: str | FileMessage | None

js/chatbot/Chatbot.stories.svelte

@@ -132,3 +132,12 @@
 		height: "50%"
 	}}
 />
+
+<Story
+	name="Chatbot with placeholder"
+	args={{
+		value: [],
+		placeholder:
+			"**Gradio Helper**\n\nThis Chatbot can help you on *any topic related to Gradio*."
+	}}
+/>

js/chatbot/Index.svelte

@@ -81,6 +81,7 @@
 
 	export let loading_status: LoadingStatus | undefined = undefined;
 	export let height = 400;
+	export let placeholder: string | null = null;
 </script>
 
 <Block
@@ -133,6 +134,7 @@
 			{bubble_full_width}
 			{line_breaks}
 			{layout}
+			{placeholder}
 		/>
 	</div>
 </Block>

js/chatbot/shared/ChatBot.svelte

@@ -46,6 +46,7 @@
 	export let line_breaks = true;
 	export let i18n: I18nFormatter;
 	export let layout: "bubble" | "panel" = "bubble";
+	export let placeholder: string | null = null;
 
 	let div: HTMLDivElement;
 	let autoscroll: boolean;
@@ -151,13 +152,14 @@
 
 <div
 	class={layout === "bubble" ? "bubble-wrap" : "panel-wrap"}
+	class:placeholder-container={value === null || value.length === 0}
 	bind:this={div}
 	role="log"
 	aria-label="chatbot conversation"
 	aria-live="polite"
 >
 	<div class="message-wrap" class:bubble-gap={layout === "bubble"} use:copy>
-		{#if value !== null}
+		{#if value !== null && value.length > 0}
 			{#each value as message_pair, i}
 				{#each message_pair as message, j}
 					{#if message !== null}
@@ -285,11 +287,21 @@
 			{#if pending_message}
 				<Pending {layout} />
 			{/if}
+		{:else if placeholder !== null}
+			<center>
+				<Markdown message={placeholder} {latex_delimiters} />
+			</center>
 		{/if}
 	</div>
 </div>
 
 <style>
+	.placeholder-container {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		height: 100%;
+	}
 	.bubble-wrap {
 		padding: var(--block-padding);
 		width: 100%;

test/test_components.py

@@ -2055,6 +2055,7 @@ class TestChatbot:
             "container": True,
             "min_width": 160,
             "scale": None,
+            "placeholder": None,
             "height": None,
             "proxy_url": None,
             "_selectable": False,