add dom ids for new chat messages

assets/js/user_socket.ts

@@ -42,6 +42,7 @@ const init = () => {
 
     channel.on("new_msg", (payload) => {
       const messageItem = document.createElement("div");
+      messageItem.id = `message-${payload.id}`;
       messageItem.className = "group hover:bg-white/5 relative px-4";
 
       const senderItem = document.createElement("span");

lib/algora_web/channels/room_channel.ex

@@ -13,12 +13,17 @@ defmodule AlgoraWeb.RoomChannel do
     "room:" <> video_id = socket.topic
 
     if user do
-      broadcast!(socket, "new_msg", %{user: %{id: user.id, handle: user.handle}, body: body})
+      message =
+        Repo.insert!(%Message{
+          body: body,
+          user_id: user.id,
+          video_id: String.to_integer(video_id)
+        })
 
-      Repo.insert!(%Message{
-        body: body,
-        user_id: user.id,
-        video_id: String.to_integer(video_id)
+      broadcast!(socket, "new_msg", %{
+        user: %{id: user.id, handle: user.handle},
+        id: message.id,
+        body: body
       })
     end