Add fullscreen mode to gr.Chatbot

[hannahblair]

Description

Adds a full screen mode to chatbot using the maximize and minimize icons, similar to what we have for gr.Gallery.

Q: Should True or False be the default?

Another note, the original issue from @hysts was about changing the size of the chatbot area and making it resizeable, but @abidlabs suggested this full screen mode as an alternative. Do we think this is sufficient?

Closes: #8240

🎯 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	building...
	Storybook	ready!	Storybook preview
🦄	Changes	detecting...

---

Install Gradio from this PR

pip install https://gradio-pypi-previews.s3.amazonaws.com/6bda21eb00b4768e60eeead1e67edb96fd541b85/gradio-4.44.0-py3-none-any.whl

Install Gradio Python Client from this PR

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

Install Gradio JS Client from this PR

npm install https://gradio-npm-previews.s3.amazonaws.com/6bda21eb00b4768e60eeead1e67edb96fd541b85/gradio-client-1.6.0-beta.1.tgz

[gradio-pr-bot]

🦄 change detected

This Pull Request includes changes to the following packages.

Package	Version
@gradio/chatbot	minor
gradio	minor

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

With the following changelog entry.

Add fullscreen mode to gr.Chatbot

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.

[hysts]

I tried to run this, but it didn't seem to work.

import gradio as gr


def fn(message, history):
    return message


demo = gr.ChatInterface(fn=fn, chatbot=gr.Chatbot(allow_fullscreen=True))
demo.launch()

Another note, the original issue from @hysts was about changing the size of the chatbot area and making it resizeable, but @abidlabs suggested this full screen mode as an alternative. Do we think this is sufficient?

Well, it's nice to be able to show the chat area in full screen, but I think this PR is a bit different from what I had in mind.
I couldn't check how the full screen view of chat component looks like, so maybe I'm missing the point, but I want to take screenshots of Chat Spaces, including the outside of the chat area. Users often put the model name and a short description at the top of the Space, and I want to include them in the screenshot as well.

[abidlabs]

Same, I didn't see any maximize/minimize icons when using gr.Chatbot directly, or with @hysts's example.

Upon further reflection, I think this issue is a bit tricky to implement because we would need both the input textbox and the Chatbot component itself to be maximized to provide a useful DX on mobile. Is that possible? Perhaps this would need to be a parameter in gr.ChatInterface?

@hysts I'm not sure what kind of UI you are thinking of -- the title of a chatbot could be arbitrarily connected to the chatbot so I'm not sure how we could maximize both. Is there a specific Space you have in mind? Perhaps we could look at how to improve the UI of that space specifically. Otherwise, we might just want to table this issue.

[hysts]

I'm not sure if it's easy or possible, but the UI I was thinking of is adding this little triangle thing in the bottom right corner to the gr.Chatbot so users can adjust the height of the chat area.

[abidlabs]

I think we can go ahead and close this @hannahblair?

[abidlabs]

Closing for now @hannahblair