Ensure Chatbot theme text size is set correctly

[hannahblair]

Description

We were hardcoding the font size to the large font variable in Chatbot.svelte, so the text_size was being ignored when setting the theme.

Demo:

import gradio as gr
import random
import time

# test "sm" "md" and "lg" and check font-size is 13px, 14px and 16px respectively

with gr.Blocks(theme = gr.themes.Default(text_size="lg")) as demo:
    chatbot = gr.Chatbot()
    msg = gr.Textbox()
    clear = gr.ClearButton([msg, chatbot])

    def respond(message, chat_history):
        bot_message = random.choice(["How are you?", "I love you", "I'm very hungry"])
        chat_history.append((message, bot_message))
        time.sleep(2)
        return "", chat_history

    msg.submit(respond, [msg, chatbot], [msg, chatbot])

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

Closes: #6943

🎯 PRs Should Target Issues

Before your create a PR, please check to see if there is an existing issue for this change. If not, please create an issue before you create this PR, unless the fix is very small.

Not adhering to this guideline will result in the PR being closed.

Tests

1. PRs will only be merged if tests pass on CI. To run the tests locally, please set up your Gradio environment locally and run the tests: bash scripts/run_all_tests.sh

2. You may need to run the linters: bash scripts/format_backend.sh and bash scripts/format_frontend.sh

[gradio-pr-bot]

🪼 branch checks and previews

•	Name	Status	URL
	Spaces	ready!	Spaces preview
	Website	ready!	Website preview
	Storybook	ready!	Storybook preview
	Visual tests	all good!	Build review
🦄	Changes	detected!	Details

---

Install Gradio from this PR

pip install https://gradio-builds.s3.amazonaws.com/ad9612510f3dd4af8e83868ba45d0e90570527a5/gradio-4.13.0-py3-none-any.whl

Install Gradio Python Client from this PR

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

[gradio-pr-bot]

🦄 change detected

This Pull Request includes changes to the following packages.

Package	Version
@gradio/chatbot	patch
gradio	patch

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

With the following changelog entry.

Ensure Chatbot theme text size is set correctly

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]

I think this will cause a breaking change for demos that use the default theme without specifying a text size, because the default body-text-size is medium.

[hannahblair]

Good point!

[pngwn]

Since the previous behaviour was broken, I'd be inclined to call this a bugfix.

[abidlabs]

In theory yes, but it'd be a pretty jarring change for anyone upgrading their version of gradio. I'd suggest instead we keep the font-size of the chatbot text one size larger than the regular body-text-size. That way, people can still control the text size but without the breaking change. Is that possible using css vars?

[hannahblair]

My last commit adds a function to tweak the body text sizes such that "sm", "md", "lg" theme settings equate to 14-16-20px body text sizes in the chatbot. For reference, the body text sizes would normally be 13-14-16px in other components. The chatbot component before this fix was behaving weirdly with 16-16-20px body text sizes.

My concern with this fix is that in a demo (with a theme) with a chatbot and multiple other components, the body text sizes won't be consistent throughout each component. Some custom CSS could be used to fix this but I'm wondering whether this might cause developer frustration as well.

[abidlabs]

Nice! LGTM

My concern with this fix is that in a demo (with a theme) with a chatbot and multiple other components, the body text sizes won't be consistent throughout each component. Some custom CSS could be used to fix this but I'm wondering whether this might cause developer frustration as well.

That's true, although that is also the case right now with the default theme (chatbot size is larger than main body text) and we haven't heard any issues with it.

[abidlabs]

LGTM thanks @hannahblair!