Conversational UI virtual scroll

2 posts, 1 answers
  1. Matej
    Matej avatar
    71 posts
    Member since:
    Jun 2019

    Posted 26 Nov 2020 Link to this post

    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? 

  2. Answer
    Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 26 Nov 2020 Link to this post

    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

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Back to Top