While receiving data, user is unable to scroll back chatBox

[chrishow]

Hi!

Firstly, this is a great PWA! Awesome to be able to use this offline!

I notice that while receiving data, the user isn't able to scroll backwards. There's a !overflow-y-hidden class added to the scrollableFeed in the chatBox container.

It would (IMO) be useful if the user could scroll the scrollableFeed while Ollama is 'thinking' or generating tokens.

I was thinking of working on this, but wanted to check if this was a design choice.

[mrdjohnson]

First off, thanks for using the app!

It's both intentional and unwanted, there was A LOT of weirdness around scrolling while getting a message but only scrolling if the user was already at the bottom 😵‍💫 Eventually I gave up and forced the scroll.

I haven't looked into it since then but if you can set it up for it to scroll correctly that would be awesome. Otherwise we can just add a "toggle scroll" field in the settings

[mrdjohnson]

👋 hey! Wanted to follow up and confirm you wanted to take a crack at this? I'd be happy to answer any questions

[chrishow]

I did have a quick-ish attempt. I'm sure I ran into the same problem as you: impossible to stop it scrolling!

I made a Plunk to make sure that react scrollable feed can handle adding content to an item (in addition to adding items), and that works as expected:

https://plnkr.co/edit/tVD50fbJYFGwdnJE?preview

I will try to get some time to have another look before the weekend, if not it will be some time as I'm tied up next week.

I'll reply when I have an update 😁

[chrishow]

Ok, so now I see the problem is rather that the scrollable feed doesn't scroll as expected, so you had to add the scrollIntoView method in LazyMessage.tsx, right?

[mrdjohnson]

Yep! I think the easiest way to reproduce the issue is to take out the forced scroll, make your window size smaller, and regenerate a message.

By Quickly adding content to the bottom for the scrollable feed, it almost always creates an issue 😬

I realize that this probably should be reported to react-scrollable-feed,

but it might also be related to the library's onChangeDetection method. 🤔 Maybe it stops recognizing that the IncomingMessage is changing because of something mobx related.

[mrdjohnson]

How to test:

• remove the the scrollIntoView prop on the IncomingMessage in Message.tsx
• remove addition to the ChatBox.tsx classname that hides the overflow during an incoming message
• put your viewport in a mobile state and use a fast / small model
• ask the model to output a couple paragraphs about anything
• (optional): add a function that outputs true to the changeDetectionFilter for react-scrollable-feed. but also put in a console log saying it detected changes

For me this consistently showed that the changeDetection functionality did not even know to trigger

[mrdjohnson]

changing the message key in ChatBox.tsx to be the content (forcing the change to detect) also does not make it scroll.

sigh