Aggiedit/lib/aggiedit_web/live/post_live/show.html.heex

<div class="d-flex justify-content-center">
  <div class="container">
    <div>
      <h1><%= @post.title %></h1>
    </div>
    <div>
      <%= if Ecto.assoc_loaded?(@post.upload) && !is_nil(@post.upload) do %>
        <img src={Routes.static_path(@socket, "/uploads/#{@post.upload.file}")} class="img-fluid"/>
      <% end %>
    </div>
    <div class="post-body">
      <%= @post.body %>
    </div>
    <%= if Aggiedit.Roles.guard?(@current_user, :edit, @post) do %>
      <span><%= live_patch "Edit", to: Routes.post_show_path(@socket, :edit, @room, @post), class: "button" %></span> |
    <% end %>
    <span><%= live_redirect "Back", to: Routes.post_index_path(@socket, :index, @room) %></span>
  </div>
</div>

<!-- chat container from https://www.bootdey.com/snippets/view/card-chat-list#html -->
<div class="container content mt-2">
  <div class="row">
  <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
        	<div class="card">
        		<div class="card-header">Chat</div>
        		<div class="card-body chat-container">
        			<ul class="chat-list" id="chat">
        			</ul>
        		</div>
        	</div>
        </div>
  </div>
</div>

<%= if @live_action in [:edit] do %>
  <.modal return_to={Routes.post_show_path(@socket, :show, @room, @post)}>
    <.live_component
      module={AggieditWeb.PostLive.FormComponent}
      id={@post.id}
      current_user={@current_user}
      title={@page_title}
      action={@live_action}
      post={@post}
      return_to={Routes.post_show_path(@socket, :show, @room, @post)}
    />
  </.modal>
<% end %>

<script>
  const scrollToBottom = (element) => {
    element.scrollIntoView({ behavior: 'smooth', block: 'end' });
  };

  const appendComment = ({user, body, id, user_id, inserted_at}, element) => {
    const messageElement = document.createElement("div");
    messageElement.innerHTML = `
      <li class="${user_id == <%= @current_user.id %> ? 'out' : 'in'}" id=${id}>
        <div class="chat-body">
          <div class="chat-message">
            <h5>${user}</h5>
            <p>${body}</p>
          </div>
        </div>
      </li>
    `;
    element.appendChild(messageElement);
    scrollToBottom(element);
  };


  let channel;
  window.addEventListener('phx:initial-post', (e) => {
    const chatWindow = document.getElementById("chat");
    window.userSocket.connect();
    channel = window.RoomChat.connect(window.userSocket, e.detail.id);

    channel.on('shout', (comment) => {
      appendComment(comment, chatWindow);
    });

    channel.on('initial-comments', ({comments}) => {
      comments.forEach((comment) => {
        appendComment(comment, chatWindow);
      });
      scrollToBottom(chatWindow);
    });
    channel.push("send", {body: "Hello!"});
  });
</script>