Skip to main content

Virtuoso Message List

The Virtuoso message list component is built specifically for human/chatbot conversations. In addition to the virtualized rendering, the component exposes declarative and imperative data/scroll position API that gives you the necessary control over the scroll position when older messages are loaded, new messages arrive, and when the user submits a message. The scroll position can update instantly or with a smooth scroll animation.

You can specify custom components as header, footer, sticky header, or sticky footer, for loading messages, scroll to bottom indicators, and new message notifications. You can also control the vertical positioning for short conversations that don't fill the viewport.

Apart from the structural styling necessary for the virtualized rendering, the component is completely unstyled. You can easily integrate it with your design system and UI component library of choice.

Live Example​

loading...

License​

The @virtuoso.dev/message-list package is distributed under a commercial license. See Licensing for more details.

Installation​

The message list component is distributed as an NPM package. Install @virtuoso.dev/message-list in your React project.

npm install @virtuoso.dev/message-list

Then, add the component along with your license to your application.

loading...

To explore the features in an interactive way, you can jump straight to Virtuoso Message List Tutorial.

Features at a Glance​

The chat interface has a certain set of specifics - a live flow of new messages, scroll location updating when new messages arrive, message updates, etc. The VirtuosoMessageList component API is designed to handle these scenarios, while using the virtualized rendering approach.

Virtualized Rendering​

Out of the box, the component tracks the viewport and the items heights and renders only the items that are visible. This allows you to display thousands of messages without performance issues. You don't need to adjust anything or measure the items' heights manually.

Data Management and Scroll Position Control​

The data property of the component includes the data it should render and a optional scrollModifier object that specifies the location and the scroll behavior to apply when the data changes. For example, when the user submits a message, you append the new message to the exiting data set, and scroll to the bottom instantly or with a smooth scroll animation. A different behavior may be applied when messages from other users arrive, or when a chatbot response is updated.

More details about the scroll modifier type and its usage can be found in the Scroll Modifier section.

Customizable Rendering​

The component accepts custom components as header, footer, sticky header, or sticky footer. This allows you to display loading messages, scroll to bottom indicators, and new message notifications. Optionally, the sticky header/footer can overlay the message items if needed.

For interactive examples of headers and footers, refer to the Headers and Footers section.