feat(chat): usage improvements with hooks

1. scroll room messages to the bottom
2. submit message on `enter`

assets/js/app.js

@@ -21,9 +21,17 @@ import "phoenix_html"
 import { Socket } from "phoenix"
 import { LiveSocket } from "phoenix_live_view"
 import topbar from "../vendor/topbar"
+import RoomMessages from "./hooks/RoomMessages"
+import ChatMessageTextarea from "./hooks/ChatMessageTextarea"
+
+const hooks = {
+  ChatMessageTextarea,
+  RoomMessages,
+}
 
 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
 let liveSocket = new LiveSocket("/live", Socket, {
+  hooks,
   longPollFallbackMs: 2500,
   params: {
     _csrf_token: csrfToken,

assets/js/hooks/ChatMessageTextarea.js

@@ -0,0 +1,14 @@
+const ChatMessageTextarea = {
+  mounted() {
+    this.el.addEventListener('keydown', e => {
+      if (e.key == 'Enter' && !e.shitfKey) {
+        const form = document.getElementById('new-message-form');
+
+        form.dispatchEvent(new Event('change', { bubbles: true, cancelable: true }));
+        form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
+      }
+    });
+  }
+};
+
+export default ChatMessageTextarea;

assets/js/hooks/RoomMessages.js

@@ -0,0 +1,10 @@
+const RoomMessages = {
+  mounted() {
+    this.el.scrollTop = this.el.scrollHeight;
+    this.handleEvent("scroll_messages_to_bottom", () => {
+      this.el.scrollTop = this.el.scrollHeight;
+    });
+  }
+};
+
+export default RoomMessages;

lib/slax_web/live/chat_room_live.ex

@@ -89,7 +89,12 @@ defmodule SlaxWeb.ChatRoomLive do
           <% end %>
         </ul>
       </div>
-      <div id="room-messages" class="flex flex-col flex-grow overflow-auto" phx-update="stream">
+      <div
+        id="room-messages"
+        class="flex flex-col flex-grow overflow-auto"
+        phx-hook="RoomMessages"
+        phx-update="stream"
+      >
         <.message
           :for={{dom_id, message} <- @streams.messages}
           current_user={@current_user}
@@ -113,6 +118,7 @@ defmodule SlaxWeb.ChatRoomLive do
             name={@new_message_form[:body].name}
             placeholder={"Message ##{@room.name}"}
             phx-debounce
+            phx-hook="ChatMessageTextarea"
             rows="1"
           ><%= Phoenix.HTML.Form.normalize_value("textarea", @new_message_form[:body].value) %></textarea>
           <button class="flex-shrink flex items-center justify-center h-6 w-6 rounded hover:bg-slate-200">
@@ -154,7 +160,8 @@ defmodule SlaxWeb.ChatRoomLive do
      socket
      |> assign(hide_topic?: false, page_title: "# #{room.name}", room: room)
      |> stream(:messages, messages, reset: true)
-     |> assign_message_form(Chat.change_message(%Message{}))}
+     |> assign_message_form(Chat.change_message(%Message{}))
+     |> push_event("scroll_messages_to_bottom", %{})}
   end
 
   @impl Phoenix.LiveView
@@ -193,7 +200,12 @@ defmodule SlaxWeb.ChatRoomLive do
 
   @impl Phoenix.LiveView
   def handle_info({:new_message, message}, socket) do
-    {:noreply, stream_insert(socket, :messages, message)}
+    socket =
+      socket
+      |> stream_insert(:messages, message)
+      |> push_event("scroll_messages_to_bottom", %{})
+
+    {:noreply, socket}
   end
 
   @impl Phoenix.LiveView