feat: implement chat functionality with admin threads and message broadcasting

Author: zcesur

lib/algora/admin/admin.ex

@@ -330,6 +330,16 @@ defmodule Algora.Admin do
     |> Algora.Repo.update()
   end
 
+  def admins_last_active do
+    Algora.Repo.one(
+      from u in User,
+        where: u.is_admin == true,
+        order_by: [desc: u.last_active_at],
+        select: u.last_active_at,
+        limit: 1
+    )
+  end
+
   def setup_test_account(user_handle) do
     with account_id when is_binary(account_id) <- Algora.config([:stripe, :test_account_id]),
          {:ok, user} <- Repo.fetch_by(User, handle: user_handle),

lib/algora/chat/chat.ex

@@ -8,6 +8,14 @@ defmodule Algora.Chat do
   alias Algora.Chat.Thread
   alias Algora.Repo
 
+  def broadcast(message) do
+    Phoenix.PubSub.broadcast(Algora.PubSub, "chat:thread:#{message.thread_id}", message)
+  end
+
+  def subscribe(thread_id) do
+    Phoenix.PubSub.subscribe(Algora.PubSub, "chat:thread:#{thread_id}")
+  end
+
   def create_direct_thread(user_1, user_2) do
     Repo.transaction(fn ->
       {:ok, thread} =
@@ -30,14 +38,44 @@ defmodule Algora.Chat do
     end)
   end
 
+  def create_admin_thread(user, admins) do
+    Repo.transaction(fn ->
+      {:ok, thread} =
+        %Thread{}
+        |> Thread.changeset(%{title: "Chat with Algora founders"})
+        |> Repo.insert()
+
+      participants = Enum.uniq_by([user | admins], & &1.id)
+      # Add participants
+      for u <- participants do
+        %Participant{}
+        |> Participant.changeset(%{
+          thread_id: thread.id,
+          user_id: u.id,
+          last_read_at: DateTime.utc_now()
+        })
+        |> Repo.insert!()
+      end
+
+      thread
+    end)
+  end
+
   def send_message(thread_id, sender_id, content) do
-    %Message{}
-    |> Message.changeset(%{
-      thread_id: thread_id,
-      sender_id: sender_id,
-      content: content
-    })
-    |> Repo.insert()
+    case %Message{}
+         |> Message.changeset(%{
+           thread_id: thread_id,
+           sender_id: sender_id,
+           content: content
+         })
+         |> Repo.insert() do
+      {:ok, message} ->
+        message |> Repo.preload(:sender) |> broadcast()
+        {:ok, message}
+
+      {:error, changeset} ->
+        {:error, changeset}
+    end
   end
 
   def list_messages(thread_id, limit \\ 50) do
@@ -62,18 +100,20 @@ defmodule Algora.Chat do
     |> Repo.update_all(set: [last_read_at: DateTime.utc_now()])
   end
 
-  def get_thread_for_users(user1_id, user2_id) do
+  def get_thread_for_users(users) do
+    participants = Enum.uniq_by(users, & &1.id)
+
     Thread
     |> join(:inner, [t], p in Participant, on: p.thread_id == t.id)
-    |> where([t, p], p.user_id in [^user1_id, ^user2_id])
+    |> where([t, p], p.user_id in ^Enum.map(participants, & &1.id))
     |> group_by([t], t.id)
-    |> having([t, p], count(p.id) == 2)
+    |> having([t, p], count(p.id) == ^length(participants))
     |> limit(1)
     |> Repo.one()
   end
 
   def get_or_create_thread(contract) do
-    case get_thread_for_users(contract.client_id, contract.contractor_id) do
+    case get_thread_for_users([contract.client, contract.contract]) do
       nil -> create_direct_thread(contract.client, contract.contractor)
       thread -> {:ok, thread}
     end
@@ -83,4 +123,13 @@ defmodule Algora.Chat do
     {:ok, thread} = get_or_create_thread(contract)
     thread
   end
+
+  def get_or_create_admin_thread(current_user) do
+    admins = Repo.all(from u in User, where: u.is_admin == true)
+
+    case get_thread_for_users([current_user] ++ admins) do
+      nil -> create_admin_thread(current_user, admins)
+      thread -> {:ok, thread}
+    end
+  end
 end

lib/algora_web/live/org/dashboard_live.ex

@@ -12,6 +12,7 @@ defmodule AlgoraWeb.Org.DashboardLive do
   alias Algora.Bounties
   alias Algora.Bounties.Bounty
   alias Algora.Bounties.Claim
+  alias Algora.Chat
   alias Algora.Contracts
   alias Algora.Github
   alias Algora.Organizations
@@ -55,8 +56,11 @@ defmodule AlgoraWeb.Org.DashboardLive do
             Workspace.list_contributors(current_org.provider_login)
         end
 
+      admins_last_active = Algora.Admin.admins_last_active()
+
       {:ok,
        socket
+       |> assign(:admins_last_active, admins_last_active)
        |> assign(:has_fresh_token?, Accounts.has_fresh_token?(socket.assigns.current_user))
        |> assign(:installations, installations)
        |> assign(:experts, experts)
@@ -74,7 +78,11 @@ defmodule AlgoraWeb.Org.DashboardLive do
        |> assign_login_form(User.login_changeset(%User{}, %{}))
        |> assign_payable_bounties()
        |> assign_contracts()
-       |> assign_achievements()}
+       |> assign_achievements()
+       # Will be initialized when chat starts
+       |> assign(:thread, nil)
+       |> assign(:messages, [])
+       |> assign(:show_chat, false)}
     else
       {:ok, redirect(socket, to: ~p"/org/#{current_org.handle}/home")}
     end
@@ -521,6 +529,15 @@ defmodule AlgoraWeb.Org.DashboardLive do
     end
   end
 
+  @impl true
+  def handle_info(%Chat.Message{} = message, socket) do
+    if message.id in Enum.map(socket.assigns.messages, & &1.id) do
+      {:noreply, socket}
+    else
+      {:noreply, assign(socket, :messages, socket.assigns.messages ++ [message])}
+    end
+  end
+
   @impl true
   def handle_event("install_app" = event, unsigned_params, socket) do
     {:noreply,
@@ -775,6 +792,46 @@ defmodule AlgoraWeb.Org.DashboardLive do
      end}
   end
 
+  @impl true
+  def handle_event("start_chat", _params, socket) do
+    # Get or create thread between user and founders
+    {:ok, thread} = Chat.get_or_create_admin_thread(socket.assigns.current_user)
+
+    if connected?(socket) do
+      Phoenix.PubSub.subscribe(Algora.PubSub, "chat:thread:#{thread.id}")
+    end
+
+    messages = thread.id |> Chat.list_messages() |> Repo.preload(:sender)
+
+    {:noreply,
+     socket
+     |> assign(:thread, thread)
+     |> assign(:messages, messages)
+     |> assign(:show_chat, true)}
+  end
+
+  @impl true
+  def handle_event("close_chat", _params, socket) do
+    {:noreply, assign(socket, :show_chat, false)}
+  end
+
+  @impl true
+  def handle_event("send_message", %{"message" => content}, socket) do
+    {:ok, message} =
+      Chat.send_message(
+        socket.assigns.thread.id,
+        socket.assigns.current_user.id,
+        content
+      )
+
+    message = Repo.preload(message, :sender)
+
+    {:noreply,
+     socket
+     |> Phoenix.Component.update(:messages, &(&1 ++ [message]))
+     |> push_event("clear-input", %{selector: "#message-input"})}
+  end
+
   @impl true
   def handle_event(_event, _params, socket) do
     {:noreply, socket}
@@ -1351,7 +1408,9 @@ defmodule AlgoraWeb.Org.DashboardLive do
               class="relative z-0 inline-block size-6 rounded-full ring-2 ring-background"
             />
           </div>
-          Chat with founders
+          <button phx-click="start_chat" class="hover:underline">
+            Chat with founders
+          </button>
         </div>
         <div class="flex items-center gap-2">
           <.icon name="tabler-brand-x" class="size-6 text-muted-foreground" /> @algoraio
@@ -1363,6 +1422,113 @@ defmodule AlgoraWeb.Org.DashboardLive do
           <.icon name="tabler-mail" class="size-6 text-muted-foreground" /> [email protected]
         </div>
       </div>
+
+      <%= if @show_chat do %>
+        <div class="fixed bottom-0 right-96 w-[400px] h-[500px] flex flex-col border border-border bg-background rounded-t-lg shadow-lg">
+          <div class="flex flex-none items-center justify-between border-b border-border bg-card/50 p-4 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+            <div class="flex items-center gap-3">
+              <div class="flex -space-x-2">
+                <.avatar class="relative z-10 h-8 w-8 ring-2 ring-background">
+                  <.avatar_image src="https://github.com/ioannisflo.png" alt="Ioannis Florokapis" />
+                </.avatar>
+                <.avatar class="relative z-0 h-8 w-8 ring-2 ring-background">
+                  <.avatar_image src="https://github.com/zcesur.png" alt="Zafer Cesur" />
+                </.avatar>
+              </div>
+              <div>
+                <h2 class="text-lg font-semibold">Algora Founders</h2>
+                <p class="text-xs text-muted-foreground">
+                  Active {Algora.Util.time_ago(@admins_last_active)}
+                </p>
+              </div>
+            </div>
+            <.button variant="ghost" size="icon" phx-click="close_chat">
+              <.icon name="tabler-x" class="h-4 w-4" />
+            </.button>
+          </div>
+
+          <.scroll_area
+            class="flex h-full flex-1 flex-col-reverse gap-6 p-4"
+            id="messages-container"
+            phx-hook="ScrollToBottom"
+          >
+            <div class="space-y-6">
+              <%= for {date, messages} <- @messages
+                  |> Enum.group_by(fn msg ->
+                    case Date.diff(Date.utc_today(), DateTime.to_date(msg.inserted_at)) do
+                      0 -> "Today"
+                      1 -> "Yesterday"
+                      n when n <= 7 -> Calendar.strftime(msg.inserted_at, "%A")
+                      _ -> Calendar.strftime(msg.inserted_at, "%b %d")
+                    end
+                  end)
+                  |> Enum.sort_by(fn {_, msgs} -> hd(msgs).inserted_at end, Date) do %>
+                <div class="flex items-center justify-center">
+                  <div class="rounded-full bg-background px-2 py-1 text-xs text-muted-foreground">
+                    {date}
+                  </div>
+                </div>
+
+                <div class="flex flex-col gap-6">
+                  <%= for message <- Enum.sort_by(messages, & &1.inserted_at, Date) do %>
+                    <div class="group flex gap-3">
+                      <.avatar class="h-8 w-8">
+                        <.avatar_image src={message.sender.avatar_url} />
+                        <.avatar_fallback>
+                          {Algora.Util.initials(message.sender.name)}
+                        </.avatar_fallback>
+                      </.avatar>
+                      <div class="max-w-[80%] relative rounded-2xl rounded-tl-none bg-muted p-3">
+                        {message.content}
+                        <div class="text-[10px] mt-1 text-muted-foreground">
+                          {message.inserted_at
+                          |> DateTime.to_time()
+                          |> Time.to_string()
+                          |> String.slice(0..4)}
+                        </div>
+                      </div>
+                    </div>
+                  <% end %>
+                </div>
+              <% end %>
+            </div>
+          </.scroll_area>
+
+          <div class="mt-auto flex-none border-t border-border bg-card/50 p-4 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+            <form phx-submit="send_message" class="flex items-center gap-2">
+              <div class="relative flex-1">
+                <.input
+                  id="message-input"
+                  type="text"
+                  name="message"
+                  value=""
+                  placeholder="Type a message..."
+                  autocomplete="off"
+                  class="flex-1 pr-24"
+                  phx-hook="ClearInput"
+                />
+                <div class="absolute top-1/2 right-2 flex -translate-y-1/2 gap-1">
+                  <.button
+                    type="button"
+                    variant="ghost"
+                    size="icon-sm"
+                    phx-hook="EmojiPicker"
+                    id="emoji-trigger"
+                  >
+                    <.icon name="tabler-mood-smile" class="h-4 w-4" />
+                  </.button>
+                </div>
+              </div>
+              <.button type="submit" size="icon">
+                <.icon name="tabler-send" class="h-4 w-4" />
+              </.button>
+            </form>
+            <div id="emoji-picker-container" class="bottom-[80px] absolute right-4 hidden">
+              <emoji-picker></emoji-picker>
+            </div>
+          </div>
+        </div>
+      <% end %>
     </aside>
     """
   end

test/algora/chat_test.exs

@@ -13,7 +13,7 @@ defmodule Algora.ChatTest do
       {:ok, message_2} = Chat.send_message(thread.id, user_2.id, "there")
       assert thread.id |> Chat.list_messages() |> Enum.map(& &1.id) == [message_1.id, message_2.id]
       assert Chat.mark_as_read(thread.id, user_1.id) == {1, nil}
-      assert Chat.get_thread_for_users(user_1.id, user_2.id).id == thread.id
+      assert Chat.get_thread_for_users([user_1, user_2]).id == thread.id
       assert user_1.id |> Chat.list_threads() |> Enum.map(& &1.id) == [thread.id]
       assert user_2.id |> Chat.list_threads() |> Enum.map(& &1.id) == [thread.id]
     end