Stimulus Autoscroll and Broadcasting Messages Discussion

Very nice, I'm enjoying these videos where you walk through the approaches and build on them piece-by-piece! One StimulusJS-specific update could be converting your message partial to:

<p class="flex items-center" data-conversation-target="message">
  <div class="messenger">
    <span class="message-avatar"><%= user_avatar(message.user) %></span>
    <span><%= message.user.name.capitalize %></span>
  </div>

  <%= message.content %>
</p>

And then in your stimulus controller you can use the:

messageTargetConnected(element) {
  this.setScrollPosition()
}

Stimulus provides lifecycle callbacks for adding/removing target elements, so you don't have to manage that yourself.

Great videos. I love how you break down all the concepts by referencing the docs and then showing them step by step in the example app. It's very informative.

I solved the scroll into view using this JS.

this.messagesTarget.scrollIntoView({ behavior: 'smooth' })

Replace 'messages-container' with the actual id of the div or other element that contains your messages. This is crucial for the code to work correctly.

Is it intentional not to use broadcasts_refreshes?

Up to this point, yes. Don't worry it's coming though ;)

[Deprecation]Listener added for a 'DOMNodeInserted' mutation event. Support for this event type has been removed, and this event will no longer be fired.