Realtime Chat Part 3 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' })