Tweak Chatbot bubble_full_width behaviour (#10132)

.changeset/little-bees-sink.md

@@ -0,0 +1,7 @@
+---
+"@gradio/chatbot": minor
+"@self/component-test": minor
+"gradio": minor
+---
+
+feat:Tweak Chatbot `bubble_full_width` behaviour

gradio/components/chatbot.py

@@ -190,7 +190,7 @@ class Chatbot(Component):
         avatar_images: tuple[str | Path | None, str | Path | None] | None = None,
         sanitize_html: bool = True,
         render_markdown: bool = True,
-        bubble_full_width: bool = True,
+        bubble_full_width=None,
         line_breaks: bool = True,
         layout: Literal["panel", "bubble"] | None = None,
         placeholder: str | None = None,
@@ -225,7 +225,7 @@ class Chatbot(Component):
             avatar_images: Tuple of two avatar image paths or URLs for user and bot (in that order). Pass None for either the user or bot image to skip. Must be within the working directory of the Gradio app or an external URL.
             sanitize_html: If False, will disable HTML sanitization for chatbot messages. This is not recommended, as it can lead to security vulnerabilities.
             render_markdown: If False, will disable Markdown rendering for chatbot messages.
-            bubble_full_width: If False, the chat bubble will fit to the content of the message. If True (default), the chat bubble will be the full width of the component.
+            bubble_full_width: Deprecated.
             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.
             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.
@@ -266,7 +266,12 @@ class Chatbot(Component):
         self.render_markdown = render_markdown
         self.show_copy_button = show_copy_button
         self.sanitize_html = sanitize_html
-        self.bubble_full_width = bubble_full_width
+        if bubble_full_width is not None:
+            warnings.warn(
+                "The 'bubble_full_width' parameter is deprecated and will be removed in a future version. This parameter no longer has any effect.",
+                DeprecationWarning,
+            )
+        self.bubble_full_width = None
         self.line_breaks = line_breaks
         self.layout = layout
         self.show_copy_all_button = show_copy_all_button

js/chatbot/Chatbot.stories.svelte

@@ -84,17 +84,10 @@
 	}}
 />
 
-<Story
-	name="Chatbot with chat bubble full width disabled and copy button"
-	args={{
-		bubble_full_width: false,
-		show_copy_button: true
-	}}
-/>
-
 <Story
 	name="Chatbot with panel layout enabled and avatars"
 	args={{
+		show_copy_button: true,
 		layout: "panel",
 		avatar_images: [
 			{ url: "https://avatars.githubusercontent.com/u/100000?v=4" },
@@ -106,7 +99,6 @@
 <Story
 	name="Chatbot with bubble layout enabled and avatars"
 	args={{
-		bubble_full_width: true,
 		layout: "bubble",
 		avatar_images: [
 			{ url: "https://avatars.githubusercontent.com/u/100000?v=4" },
@@ -118,7 +110,6 @@
 <Story
 	name="Chatbot with percentage height"
 	args={{
-		bubble_full_width: false,
 		layout: "panel",
 		height: "50%"
 	}}

js/chatbot/Index.svelte

@@ -37,7 +37,6 @@
 	export let show_copy_button = true;
 	export let show_copy_all_button = false;
 	export let sanitize_html = true;
-	export let bubble_full_width = true;
 	export let layout: "bubble" | "panel" = "bubble";
 	export let type: "tuples" | "messages" = "tuples";
 	export let render_markdown = true;
@@ -149,7 +148,6 @@
 			on:copy={(e) => gradio.dispatch("copy", e.detail)}
 			{avatar_images}
 			{sanitize_html}
-			{bubble_full_width}
 			{line_breaks}
 			{autoscroll}
 			{layout}

js/chatbot/shared/ChatBot.svelte

@@ -72,7 +72,6 @@
 	export let show_copy_button = false;
 	export let avatar_images: [FileData | null, FileData | null] = [null, null];
 	export let sanitize_html = true;
-	export let bubble_full_width = true;
 	export let render_markdown = true;
 	export let line_breaks = true;
 	export let autoscroll = true;
@@ -291,7 +290,6 @@
 					{upload}
 					{selectable}
 					{sanitize_html}
-					{bubble_full_width}
 					{render_markdown}
 					{rtl}
 					{i}

js/chatbot/shared/Message.svelte

@@ -16,7 +16,6 @@
 	export let role = "user";
 	export let messages: NormalisedMessage[] = [];
 	export let layout: "bubble" | "panel";
-	export let bubble_full_width: boolean;
 	export let render_markdown: boolean;
 	export let latex_delimiters: {
 		left: string;
@@ -121,7 +120,6 @@
 				class="message {role} {is_component_message(message)
 					? message?.content.component
 					: ''}"
-				class:message-fit={layout === "bubble" && !bubble_full_width}
 				class:panel-full-width={true}
 				class:message-markdown-disabled={!render_markdown}
 				class:component={message.type === "component"}
@@ -303,10 +301,6 @@
 		border-radius: var(--radius-md);
 	}
 
-	.message-fit {
-		width: fit-content !important;
-	}
-
 	.panel-full-width {
 		width: 100%;
 	}
@@ -382,10 +376,6 @@
 		margin-left: calc(var(--spacing-xxl) + 35px + var(--spacing-xxl));
 	}
 
-	.bubble .message-fit {
-		width: fit-content !important;
-	}
-
 	/* panel mode styles */
 	.panel {
 		margin: 0;

js/component-test/src/lib/component_json.ts

@@ -391,7 +391,7 @@ export default [
 			avatar_images: [null, null],
 			sanitize_html: true,
 			render_markdown: true,
-			bubble_full_width: true,
+			bubble_full_width: null,
 			line_breaks: true,
 			show_copy_all_button: false,
 			name: "chatbot",

test/components/test_chatbot.py

@@ -61,7 +61,7 @@ class TestChatbot:
             "avatar_images": [None, None],
             "sanitize_html": True,
             "render_markdown": True,
-            "bubble_full_width": True,
+            "bubble_full_width": None,
             "line_breaks": True,
             "layout": None,
             "show_copy_all_button": False,