Tweak Chatbot bubble_full_width behaviour

[hannahblair]

Description

Right now it doesn't seem like the chatbot bubble_full_width behaviour doesn't actually have any effect; see the test demo I've added. However this PR makes a slight change to the fit-content class and makes the bubble widths up to 60%, which I have guessed is the intended visual behaviour. Happy to have a discussion around this though. Maybe we should actually deprecate this parameter?

Closes: #10117

before

after

tests

import gradio as gr

def chat_with_bot(message, history):
    return message

with gr.Blocks() as demo:
    gr.Markdown("# Chatbot Layout Tests")
        
    with gr.Tab("Panel Layout"):
        with gr.Column(scale=1):
            chatbot1 = gr.Chatbot(
                value=[
                    ["Hello!", "Hi there!"],
                    ["Here's a very long message that should demonstrate the full width behavior. When bubble_full_width is True, this message will take up the full width of the container. When it's False, it will only be as wide as needed.", "That's right! And here's another long message to demonstrate the same."],
                    ["Short message", "Short reply"]
                    ],
                    layout="panel",
                    height=400,
                    container=True,
                    avatar_images=["https://avatars.githubusercontent.com/u/100000?v=4", "https://avatars.githubusercontent.com/u/100000?v=4"]
                )
            msg1 = gr.Textbox(label="Message")
            btn1 = gr.Button("Send")
            btn1.click(chat_with_bot, [msg1, chatbot1], [chatbot1])
            msg1.submit(chat_with_bot, [msg1, chatbot1], [chatbot1])
        
        with gr.Tab("Bubble Layout - Full Width"):
            with gr.Column(scale=1):
                chatbot2 = gr.Chatbot(
                    value=[
                        ["Hello!", "Hi there!"],
                        ["Here's a very long message that should demonstrate the full width behavior. When bubble_full_width is True, this message will take up the full width of the container. When it's False, it will only be as wide as needed.", "That's right! And here's another long message to demonstrate the same."],
                        ["Short message", "Short reply"]
                    ],
                    layout="bubble",
                    height=400,
                    container=True,
                    bubble_full_width=True,
                    avatar_images=["https://avatars.githubusercontent.com/u/100000?v=4", "https://avatars.githubusercontent.com/u/100000?v=4"]
                )
                msg2 = gr.Textbox(label="Message")
                btn2 = gr.Button("Send")
                btn2.click(chat_with_bot, [msg2, chatbot2], [chatbot2])
                msg2.submit(chat_with_bot, [msg2, chatbot2], [chatbot2])
        
        with gr.Tab("Bubble Layout - Fit Width"):
            with gr.Column(scale=1):
                chatbot3 = gr.Chatbot(
                    value=[
                        ["Hello!", "Hi there!"],
                        ["Here's a very long message that should demonstrate the full width behavior. When bubble_full_width is True, this message will take up the full width of the container. When it's False, it will only be as wide as needed.", "That's right! And here's another long message to demonstrate the same."],
                        ["Short message", "Short reply"]
                    ],
                    layout="bubble",
                    height=400,
                    container=True,
                    bubble_full_width=False,
                    avatar_images=["https://avatars.githubusercontent.com/u/100000?v=4", "https://avatars.githubusercontent.com/u/100000?v=4"]
                )
                msg3 = gr.Textbox(label="Message")
                btn3 = gr.Button("Send")
                btn3.click(chat_with_bot, [msg3, chatbot3], [chatbot3])
                msg3.submit(chat_with_bot, [msg3, chatbot3], [chatbot3])
        
        with gr.Tab("Bubble Layout - No Avatars"):
            with gr.Column(scale=1):
                chatbot4 = gr.Chatbot(
                    value=[
                        ["Hello!", "Hi there!"],
                        ["Here's a very long message that should demonstrate the full width behavior. When bubble_full_width is True, this message will take up the full width of the container. When it's False, it will only be as wide as needed.", "That's right! And here's another long message to demonstrate the same."],
                        ["Short message", "Short reply"]
                    ],
                    layout="bubble",
                    height=400,
                    container=True,
                    bubble_full_width=True
                )
                msg4 = gr.Textbox(label="Message")
                btn4 = gr.Button("Send")
                btn4.click(chat_with_bot, [msg4, chatbot4], [chatbot4])
                msg4.submit(chat_with_bot, [msg4, chatbot4], [chatbot4])

if __name__ == "__main__":
    demo.launch() 

[gradio-pr-bot]

🪼 branch checks and previews

•	Name	Status	URL
	Spaces	ready!	Spaces preview
	Website	ready!	Website preview
	Storybook	ready!	Storybook preview
🦄	Changes	detected!	Details

---

Install Gradio from this PR

pip install https://gradio-pypi-previews.s3.amazonaws.com/2ab1cdd7b077cd3e616cb428b22d6a08fc03f909/gradio-5.8.0-py3-none-any.whl

Install Gradio Python Client from this PR

pip install "gradio-client @ git+https://github.com/gradio-app/gradio@2ab1cdd7b077cd3e616cb428b22d6a08fc03f909#subdirectory=client/python"

Install Gradio JS Client from this PR

npm install https://gradio-npm-previews.s3.amazonaws.com/2ab1cdd7b077cd3e616cb428b22d6a08fc03f909/gradio-client-1.8.0.tgz

Use Lite from this PR

<script type="module" src="https://gradio-lite-previews.s3.amazonaws.com/2ab1cdd7b077cd3e616cb428b22d6a08fc03f909/dist/lite.js""></script>

[gradio-pr-bot]

🦄 change detected

This Pull Request includes changes to the following packages.

Package	Version
@gradio/chatbot	minor
@self/component-test	minor
gradio	minor

• Maintainers can select this checkbox to manually select packages to update.

With the following changelog entry.

Tweak Chatbot bubble_full_width behaviour

Maintainers or the PR author can modify the PR title to modify this entry.

Something isn't right?

• Maintainers can change the version label to modify the version bump.
• If the bot has failed to detect any changes, or if this pull request needs to update multiple packages to different versions or requires a more comprehensive changelog entry, maintainers can update the changelog file directly.

[abidlabs]

Thanks for adding the demo, that's helpful.

It looks like what happened is that previously, the chatbot bubbles by default took the full width of the chatbot even if the content of the bubbles was very short. We had the bubble_full_width parameter to allow developers to shrink the bubbles to fit the content if they wanted to adjust this behavior. But at some point, we reversed the default behavior (which I think was a good decision from a UI standpoint) but forgot to update the parameter, essentially deprecating it. I think we should just go all the way and deprecate the bubble_full_width parameter. I don't think there's much value in having a parameter that sets the bubble width to 60% and it just adds another UI configuration that we need to maintain going forward.

[abidlabs]

lgtm thanks @hannahblair!