Issue with current_user in turbo_stream and broadcast

I'm a beginner learning rails. I am creating a chat app where the message model only has content, user_id, sender_id field. I'm filtering the messages to show two users' message. Nothing complex here so far.

But the issue is, when I'm broadcasting the message, the broadcast message having issue with devise "current_user". I need current_user to show the message on either left or right. After googling, i've learnt that i can use current attributes. But it's not working either. The new message that is broadcasting is always treated as sender. But after i refresh the page, it's working fine. Unless refresh, both of the user's page shows that they are both sender.

This is the message partial

<% if Current.user.id == message.sender_id %>
 <div class="flex justify-end">
    <div class="p-3 m-2 rounded-lg max-w-32 bg-sky-300">
      <h3><%= message.body %></h3>
      <h1>
 Current <%= Current.user.id %>
 </h1>
      <h1>
<!--        Devise user <%#= current_user.id %>-->
 </h1>
    </div>
  </div>
<% else %>
 <div class="flex justify-start">
    <div class="p-3 m-2 rounded-lg max-w-32 bg-green-300">
      <h3><%= message.body %></h3>
      <h1>
 Current <%= Current.user.id %>
 </h1>
      <h1>
<!--        Devise user <%#= current_user.id %>-->
 </h1>
    </div>
  </div>
<% end %>

Here the message is rendering from turbo stream

<%= turbo_stream_from "messages" %>
<div id="messages" class="h-[32rem] overflow-auto">
 <%= render u/messages %>
</div>

Here is the model from where the messages are broadcasted

class Message < ApplicationRecord

  scope :get_messages, ->(user_1, user_2) {
 where("(sender_id = ? AND receiver_id = ?) OR (sender_id = ? AND receiver_id = ?)", user_1, user_2, user_2, user_1)
  }
 after_create_commit {broadcast_append_to "messages"}
end

Solution

You need to realize that if two users are chatting they are both current_user just for different requests. You're always broadcasting from the sender's request and sender is always the current_user.

What you could do is broadcast the same template to everybody, but add an inline style for different users:

<!-- _message.html.erb -->

<div class="user_<%= message.sender_id %>">
  <%= message.body %>
</div>

and then on your page where you show messages:

<%= turbo_stream_from "messages" %>

<%= render "form", message: Message.new(sender: current_user) %>

<div id="messages" class="min-w-full">
  <%= render @messages %>
</div>

<style type="text/css" media="screen">
  .user_<%= current_user.id %> {
    text-align: right;
  }
</style>

I'm using id here as example, but you should pick some other identifier, like username, so you don't expose internal ids.