Frontend - Autoscroll toggle button next to setting cog

[808vita]

What problem or use case are you trying to solve? Users many times would need to check up the previous messages while the assistant is typing, but the autoscroll will keep navigating to the latest chat position. (only when acitve messages is typed out by assistant or when new messages are sent by user)

Describe the UX of the solution you'd like Provide a autoscroll check box next the settings cog.

Do you have thoughts on the technical implementation?

• create a component for Autoscroll with checkbox and place it next to cog
• Make the checkbox and text clickable (onclick on the div would be nice , would provide good click surface area)
• Add new state to chatslice and tooggling action
• add new action to chatting service
• import the new state and use it inside the useEffect which triggers messageScroll function
• If this state is false then return ie. (!autoscrollAcitve) return on the first line within the useEffect.

[foragerr]

Does it need to be a checkbox? Can it be the way ChatGPT does it - user scrolls away from the bottom, turn off auto scroll (and perhaps present a floating button to resume auto scroll)

user scrolls back to the bottom, auto scroll resumes.

[rbren]

IMO the way this should work is:

• if scroll is already touching the bottom, auto-scroll
• if the user has scrolled up at all, stop auto-scrolling

I've seen this behavior in other UIs. Maybe CircleCI?

[foragerr]

Here's how ChatGPT does it, Note the little floating arrow button that appears when autoscroll is stopped.

https://github.com/OpenDevin/OpenDevin/assets/8560257/0063ff03-114d-4e79-a63c-975b99d9322c

[808vita]

Your suggestions are good and doable. I posted this issue to help people who want to contribute but don't know where to start or are afraid of making mistakes. I still think a simple autoscroll toggle would be a good starting point. It's simple enough for new contributors to get started and gain confidence. We can iterate on the feature after receiving feedback. It's more fun with more people involved.

[rbren]

I dig the arrow @foragerr!

My general take is that, if it's a strict improvement over what we have today, ship it. But I also don't want someone to put a bunch of work into a toggle only to have it replaced by something better a few days later.

We can leave it to the contributors to decide. And hopefully the arrow isn't too hard 😄

[openartist]

I agree with the ChatGPT approach, scrolling basically makes the autoscroll inactive and there is a "scroll to bottom" button that appears. I'll add a design for this.

[openartist]

Here's a link to a design and documentation: https://www.figma.com/file/iM5UBG1lnpg2sgE3cFnF1P/OpenDevin?type=design&node-id=7517%3A15105&mode=design&t=R2ZNlZRT4LnQIfar-1

[amanape]

@Shimada666

[Shimada666]

@amanape Thank you, I just noticed this issue. I will try to address it next, maybe it may take some time (I've been quite busy with recent tasks) 😁

[amanape]

#1656 implements this feature for Jupyter. Forgot to reference it in the PR so leaving it here.

[amanape]

@808vita Woops! Should have clarified: the feature is only present in the Jupyter UI, not yet on the chat interface!