Simple Chat with Hotwire Turbo Stimulusjs

_messages.html.erb

<%= turbo_frame_tag "new_message", target: "_top" do %>
  <%= form_with(model: [@message.room, @message], data: { controller: "reset-form", action: "turbo:submit-end->reset-form#reset" }) do |form| %>
    <%= form.text_field :content, autocomplete: 'off', placeholder: 'Write your message...' %>
    <%= button_tag(type: :submit) do %>
      <i class="fa fa-paper-plane" aria-hidden="true"></i>
    <% end %>
    <%= form.submit "Send", data: {disable_with: false} %>
  <% end %>
<% end %>

reset_form.js

import { Controller } from "stimulus"
import { Turbo, cable } from "@hotwired/turbo-rails"

export default class extends Controller {
	connect() {
		console.log('connected');
		this.initChannel();
		this.scrollBottom();
	}

	initChannel() {
		const channelName = document.querySelector("turbo-cable-stream-source").getAttribute('channel');
		const signedStreamName = document.querySelector("turbo-cable-stream-source").getAttribute('signed-stream-name');
		const scrollBottom = this.scrollBottom.bind(this)
		this.channel = cable.subscribeTo({ 'channel': channelName, 'signed_stream_name': signedStreamName }, {
			received(data) {
				setTimeout(scrollBottom, 100);
			}
		});
	}

	reset() {
		this.element.reset()
	}

	scrollBottom() {
		console.log('scroll bottom');
		document.querySelector("div.messages").scrollTop = document.querySelector("div.messages").scrollHeight
	}
}