Conversational UI virtual scroll

[Matej]

Hi,

we can have a lot of messages and attachments in our chat history. Is there a virtual scroll option or do you have any advice how to do this without loading every message at the beginning but enable access to the whole chat history? 

[Stefan]

Hello, Matej,

In this case, this can be achieved with the lazy loading of the message during scroll similar to how it is done in most of the top messaging apps like Facebook Messanger, MS Teams etc.

We have a task logged for providing a method that will help with the scroll position as currently if we load more messages the scroll position will not move:

https://github.com/telerik/kendo-react/issues/786

Currently, a possible approach will be to keep in the state which was the last message (as a text), then go over all messages and programmatically scroll to that message using the scrollToView method:

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

https://stackblitz.com/edit/react-conv-ui-scroll-738fhc?file=index.html

We understand that the current approach is not ideal, this is why we logged the task, but it could be useful until the official method is ready.

Virtualization is not recommended for messages.  The virtualization relies on elements with fixed height, which is not possible with the messages as they can be with very dynamic height. This is why even the top messaging applications use lazy loading instead of virtualization.

 

Regards,
Stefan
Progress Telerik