Group chatbot messages by default

.changeset/solid-hands-nail.md

@@ -0,0 +1,6 @@
+---
+"@gradio/chatbot": minor
+"gradio": minor
+---
+
+feat:By default, consecutive messages are displayed in the same bubble. This is controlled by the new `display_consecutive_in_same_bubble` param of Chatbot.

gradio/components/chatbot.py

@@ -199,6 +199,7 @@ def __init__(
         examples: list[ExampleMessage] | None = None,
         show_copy_all_button=False,
         allow_file_downloads=True,
+        group_consecutive_messages: bool = True,
     ):
         """
         Parameters:
@@ -235,6 +236,7 @@ def __init__(
             examples: A list of example messages to display in the chatbot before any user/assistant messages are shown. Each example should be a dictionary with an optional "text" key representing the message that should be populated in the Chatbot when clicked, an optional "files" key, whose value should be a list of files to populate in the Chatbot, an optional "icon" key, whose value should be a filepath or URL to an image to display in the example box, and an optional "display_text" key, whose value should be the text to display in the example box. If "display_text" is not provided, the value of "text" will be displayed.
             show_copy_all_button: If True, will show a copy all button that copies all chatbot messages to the clipboard.
             allow_file_downloads: If True, will show a download button for chatbot messages that contain media. Defaults to True.
+            group_consecutive_messages: If True, will display consecutive messages from the same role in the same bubble. If False, will display each message in a separate bubble. Defaults to True.
         """
         if type is None:
             warnings.warn(
@@ -259,6 +261,7 @@ def __init__(
         self.max_height = max_height
         self.min_height = min_height
         self.rtl = rtl
+        self.group_consecutive_messages = group_consecutive_messages
         if latex_delimiters is None:
             latex_delimiters = [{"left": "$$", "right": "$$", "display": True}]
         self.latex_delimiters = latex_delimiters

js/atoms/src/IconButtonWrapper.svelte

@@ -1,8 +1,11 @@
 <script>
 	export let top_panel = true;
+	export let display_top_corner = false;
 </script>
 
-<div class={`icon-button-wrapper ${top_panel ? "top-panel" : ""}`}>
+<div
+	class={`icon-button-wrapper ${top_panel ? "top-panel" : ""} ${display_top_corner ? "display-top-corner" : "hide-top-corner"}`}
+>
 	<slot></slot>
 </div>
 
@@ -16,11 +19,20 @@
 		gap: var(--spacing-sm);
 		box-shadow: var(--shadow-drop);
 		border: 1px solid var(--border-color-primary);
+		background: var(--block-background-fill);
+		padding: var(--spacing-xxs);
+	}
+
+	.icon-button-wrapper.hide-top-corner {
 		border-top: none;
 		border-right: none;
 		border-radius: var(--block-label-right-radius);
-		background: var(--block-background-fill);
-		padding: var(--spacing-xxs);
+	}
+
+	.icon-button-wrapper.display-top-corner {
+		border-radius: var(--radius-sm) 0 0 var(--radius-sm);
+		top: var(--spacing-sm);
+		right: -1px;
 	}
 
 	.icon-button-wrapper:not(.top-panel) {

js/audio/static/StaticAudio.svelte

@@ -25,6 +25,7 @@
 	export let waveform_options: WaveformOptions;
 	export let editable = true;
 	export let loop: boolean;
+	export let display_icon_button_wrapper_top_corner = false;
 
 	const dispatch = createEventDispatcher<{
 		change: FileData;
@@ -45,7 +46,9 @@
 />
 
 {#if value !== null}
-	<IconButtonWrapper>
+	<IconButtonWrapper
+		display_top_corner={display_icon_button_wrapper_top_corner}
+	>
 		{#if show_download_button}
 			<DownloadLink
 				href={value.is_stream

js/chatbot/Chatbot.stories.svelte

@@ -224,6 +224,38 @@ This document is a showcase of various Markdown capabilities.`,
 	}}
 />
 
+<Story
+	name="Consecutive messages grouped in same bubble"
+	args={{
+		type: "messages",
+		display_consecutive_in_same_bubble: true,
+		value: [
+			{
+				role: "user",
+				content: "Show me the file."
+			},
+			{
+				role: "user",
+				content: "Second user message"
+			},
+			{
+				role: "assistant",
+				content: "Here is the file you requested"
+			},
+			{
+				role: "assistant",
+				content: {
+					file: {
+						path: "abc/qwerty.txt",
+						url: ""
+					},
+					alt_text: null
+				}
+			}
+		]
+	}}
+/>
+
 <Story
 	name="MultimodalChatbot with examples"
 	args={{
@@ -327,6 +359,38 @@ This document is a showcase of various Markdown capabilities.`,
 	}}
 />
 
+<Story
+	name="Consecutive messages not grouped in same bubble"
+	args={{
+		type: "messages",
+		display_consecutive_in_same_bubble: false,
+		value: [
+			{
+				role: "user",
+				content: "Show me the file."
+			},
+			{
+				role: "user",
+				content: "Second user message"
+			},
+			{
+				role: "assistant",
+				content: "Here is the file you requested"
+			},
+			{
+				role: "assistant",
+				content: {
+					file: {
+						path: "abc/qwerty.txt",
+						url: ""
+					},
+					alt_text: null
+				}
+			}
+		]
+	}}
+/>
+
 <Story
 	name="Chatbot with examples (not multimodal)"
 	args={{

js/chatbot/Index.svelte

@@ -44,6 +44,7 @@
 	export let autoscroll = true;
 	export let _retryable = false;
 	export let _undoable = false;
+	export let group_consecutive_messages = true;
 	export let latex_delimiters: {
 		left: string;
 		right: string;
@@ -127,6 +128,7 @@
 			{show_copy_all_button}
 			value={_value}
 			{latex_delimiters}
+			display_consecutive_in_same_bubble={group_consecutive_messages}
 			{render_markdown}
 			{theme_mode}
 			pending_message={loading_status?.status === "pending"}

js/chatbot/shared/ChatBot.svelte

@@ -44,6 +44,7 @@
 	export let _fetch: typeof fetch;
 	export let load_component: Gradio["load_component"];
 	export let allow_file_downloads: boolean;
+	export let display_consecutive_in_same_bubble: boolean;
 
 	let _components: Record<string, ComponentType<SvelteComponent>> = {};
 
@@ -278,6 +279,7 @@
 				{@const opposite_avatar_img = avatar_images[role === "user" ? 0 : 1]}
 				<Message
 					{messages}
+					{display_consecutive_in_same_bubble}
 					{opposite_avatar_img}
 					{avatar_img}
 					{role}

js/chatbot/shared/Component.svelte

@@ -9,12 +9,14 @@
 	export let upload;
 	export let _fetch;
 	export let allow_file_downloads: boolean;
+	export let display_icon_button_wrapper_top_corner = false;
 </script>
 
 {#if type === "gallery"}
 	<svelte:component
 		this={components[type]}
 		{value}
+		{display_icon_button_wrapper_top_corner}
 		show_label={false}
 		{i18n}
 		label=""
@@ -47,6 +49,7 @@
 		waveform_settings={{ autoplay: props.autoplay }}
 		waveform_options={{}}
 		show_download_button={allow_file_downloads}
+		{display_icon_button_wrapper_top_corner}
 		on:load
 	/>
 {:else if type === "video"}
@@ -58,6 +61,7 @@
 		show_share_button={true}
 		{i18n}
 		{upload}
+		{display_icon_button_wrapper_top_corner}
 		show_download_button={allow_file_downloads}
 		on:load
 	>
@@ -70,6 +74,7 @@
 		show_label={false}
 		label="chatbot-image"
 		show_download_button={allow_file_downloads}
+		{display_icon_button_wrapper_top_corner}
 		on:load
 		{i18n}
 	/>