Auto scroll to bottom of textbox

[dawoodkhan82]

Description

Auto scroll to bottom of textbox.

Closes: #4862
Closes: #4044

🎯 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/63f36fe98a66d2a3610bb03688a791673d779234/gradio-3.42.0-py3-none-any.whl

Install Gradio Python Client from this PR

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

[gradio-pr-bot]

🦄 change detected

This Pull Request includes changes to the following packages.

Package	Version
@gradio/textbox	minor
gradio	minor

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

With the following changelog entry.

Auto scroll to bottom of textbox

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]

Nice @dawoodkhan82! Works great.

One comment -- we create the autoscroll prop in the frontend but we don't allow users to set it in the backend. How about we add the autoscroll attribute in the gr.Textbox() class as well (can be True by default)?

As an aside, I believe this closes: #4044 as well. The user wanted to scroll down to the bottom of the textbox to ensure that their textbox was still streaming and this change handles the underlying concern.

[dawoodkhan82]

@abidlabs Any reason why a user would want to disable auto scroll? I feel like our attributes are getting too granular.

[abidlabs]

No reason comes to mind, but that's what I thought you had intended since you defined a prop (autoscroll) in the frontend and check if it's true/false.

[dawoodkhan82]

@abidlabs Oh I see, I can rename. But that param is keeping track to see if the textbox needs to be scrolled.

[abidlabs]

oh sorry I misunderstood -- my bad we're good, nvm!

[w-e-w]

No reason comes to mind, but that's what I thought you had intended since you defined a prop (autoscroll) in the frontend and check if it's true/false.

I can think of some reasons why one wants to be able to disable this or otherwise customize the behavior

basically "any time when the last row of text is not the point of interest"

I know of a project of a frend of my that uses Textbox as constantly updating log of activities
If I understand correctly this code would make it not possible to scroll up and look at what's above when thers an update to the contacts
in his use case he has implemented a auto scroll start/stop https://github.com/SpenserCai/sd-webui-discord-ex/blob/82f247df77aaa8f13cf4b5fd6f6d6e5f5293351a/scripts/ui_bot_mgr.py#L73-L99

or imagine if the logs is in reverse order, the newest line appears at the top
this would force one to look at the last line which is undesirable

ideally not only one would want the ability to disable this, they will want to be able to customise the scrll direction
better if it behaviour like a terminal (only auto scroll when the pointer is at the bottom and disable auto scroll when the user scroll up look at other parts of text)

[abidlabs]

I agree with @w-e-w here. I actually think that autoscrolling on the Textbox may not always be a good idea since the Textbox can be used to output text all at once, where the user probably wants to start reading from the beginning. e.g. an example like this:

import gradio as gr

value = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."

gr.Interface(lambda x:value, "textbox", gr.Textbox(max_lines=4)).launch()

I think we should add an autoscroll parameter to gr.Textbox() to control this behavior @dawoodkhan82

[dawoodkhan82]

@w-e-w @abidlabs Oh yeah makes sense. Will add! Created issue here

[yummy527]

How to scroll a embedded gr.HTML nested in gr.Column?