Auto Scroll DIV whose content is being edited by Laravel Livewire component

[seb-ogsi]

Hi,

I've got a Laravel livewire component that is a sort of ai CHAT.

When asking a question, a response is fetched from the AI API and is streamed into an html element (with wire:stream)

The parent html element has a vertical scroll. As the content of the response is streamed into the html element, i'd like to find a way to use alpine to "auto" scoll the content.

I've managed to scroll with an event that is fired from livewire and catch with alpine.

The issue is that, when streaming the data, the events fired are not continuously sent to the brother . Only when the full response is streamed are the event all really fired.

So you see the scroll bar being more and more tall as the content is added but the content is hidden until all the response is streamed and the event are fired.

Is there a way to watch with alpine the content of an element, or his height, and trigger the scroll of the containing element ?

Any help ?

Thx

[SimoTod]

You should be able to do it with standard javascript using a Resize observer: https://rawgit.com/WICG/ResizeObserver/master/examples/chat.html

Alpine cannot observe those changes out of the box because it needs to wrap the observed variable in a javascript proxy in order to work.

[ekwoka]

I'd probably recommend instead the MutationObserver and just watch for added child elements.

There are ways to also kind of like...snap the area to the bottom instead of the top, but they might not work particularly well for this use case.

[seb-ogsi]

Hi

I was able to make it work with MutationObserver

Thank you both for your help !