feat(chat): use streams to show messages

lib/slax_web/live/chat_room_live.ex

@@ -86,8 +86,8 @@ defmodule SlaxWeb.ChatRoomLive do
           <% end %>
         </ul>
       </div>
-      <div class="flex flex-col flex-grow overflow-auto">
+      <div id="room-messages" class="flex flex-col flex-grow overflow-auto" phx-update="stream">
-        <.message :for={message <- @messages} message={message} />
+        <.message :for={{dom_id, message} <- @streams.messages} dom_id={dom_id} message={message} />
       </div>
       <div class="h-12 bg-white px-4 pb-4">
         <.form
@@ -137,7 +137,8 @@ defmodule SlaxWeb.ChatRoomLive do
 
     {:noreply,
      socket
-     |> assign(hide_topic?: false, messages: messages, page_title: "# #{room.name}", room: room)
+     |> assign(hide_topic?: false, page_title: "# #{room.name}", room: room)
+     |> stream(:messages, messages, reset: true)
      |> assign_message_form(Chat.change_message(%Message{}))}
   end
 
@@ -160,7 +161,7 @@ defmodule SlaxWeb.ChatRoomLive do
       case Chat.create_message(room, user, message_params) do
         {:ok, message} ->
           socket
-          |> update(:messages, &(&1 ++ [message]))
+          |> stream_insert(:messages, message)
           |> assign_message_form(Chat.change_message(%Message{}))
 
         {:error, changeset} ->
@@ -191,11 +192,12 @@ defmodule SlaxWeb.ChatRoomLive do
     """
   end
 
+  attr :dom_id, :string, required: true
   attr :message, Message, required: true
 
   defp message(assigns) do
     ~H"""
-    <div class="relative flex px-4 py-3">
+    <div id={@dom_id} class="relative flex px-4 py-3">
       <div class="h-10 w-10 rounded flex-shrink-0 bg-slate-300"></div>
       <div class="ml-2">
         <div class="-mt-1">