Auto-Scroll to Latest Message in AI Chat

Ask us anything How do I?
1

I’m building an AI chat interface in WeWeb.

The layout includes:

  • A chat-container with a fixed height of 85vh.
  • Inside it, a message-container with dynamic height (auto), which holds all the chat messages (fetched from Xano).
  • Outside both, I have a prompt-container that handles user input and runs a workflow:
    • It sends the user’s message to Xano,
    • Fetches the updated conversation,
    • Updates variables, etc.

The challenge:
After fetching new messages, I can’t seem to scroll to the most recent “user message” correctly. I want the scroll behaviour to:

  1. Bring the “new user message into view” (ideally aligning it with the top of the chat container).
  2. Show the “AI’s response just below it”.

I’ve been tracking the positions of both chat-container and message-container, but haven’t yet found a reliable logic to perform this scroll smoothly.

Is there a way to programmatically scroll the chat-container so that:

  • The latest user message is visible near the top?
    The AI message will be automatically shown below anyways.

Any thoughts on the best approach?

2

Not 100% sure on your setup.
But in these kind of interfaces i usually put an empty div outside of the list (at the top, or at the bottom) and when a new message comes in / goes out I scroll to the empty div.

Does that help?

3

This video has the step by step instructions you need, it’s in Portuguese, but with the subtitles you can understand it well.

3 Likes
4

Use a repeating container and add to the css

flex-direction: column-reverse;

5

Great video @GeovanyFerreira !

@tcc We are working on a new chat component now. I think this will be possible by default. You will have component action to scroll to the bottom.