Gemini-like Chatbot Scroll
The example below simulates a conversation with a chatbot. The scroll behavior simulates the Gemini chatbot, where each new question is scrolled to the top, so that a space is preallocated for the answer. The streaming response is simulated with setInterval
.
Key Points
- Each question gets aligned to the top of the viewport when it is sent.
- The
data.map
method is used to stream the incoming response. - The
autoscrollToBottomBehavior
is set tosmooth
to animate the scroll when the streaming response scroll beyond the visible area.
Live Example
loading...