From de442c36e841c935d085f6ef441e6704a80cebd1 Mon Sep 17 00:00:00 2001
From: Wout De Puysseleir <woutdp@gmail.com>
Date: Thu, 16 Mar 2023 16:50:49 -0700
Subject: [PATCH] Add Advanced chat example

---
 examples/advanced_chat/AdvancedChat.svelte | 56 ++++++++++++++++++++++
 examples/advanced_chat/live_svelte.ex      | 49 +++++++++++++++++++
 2 files changed, 105 insertions(+)
 create mode 100644 examples/advanced_chat/AdvancedChat.svelte
 create mode 100644 examples/advanced_chat/live_svelte.ex

diff --git a/examples/advanced_chat/AdvancedChat.svelte b/examples/advanced_chat/AdvancedChat.svelte
new file mode 100644
index 0000000..61909d9
--- /dev/null
+++ b/examples/advanced_chat/AdvancedChat.svelte
@@ -0,0 +1,56 @@
+<script>
+  import {slide, fly, fade} from "svelte/transition"
+  import {elasticOut} from "svelte/easing"
+  import {afterUpdate} from "svelte"
+
+  export let messages
+  export let name
+  export let pushEvent
+
+  let body = ""
+  let messagesElement
+
+	afterUpdate(() => { scrollToBottom(messagesElement) })
+
+  const scrollToBottom = async (node) => {
+    node.scroll({ top: node.scrollHeight, behavior: 'smooth' })
+  }
+
+  function submitMessage() {
+    if (body === "") return
+    pushEvent("send_message", {body})
+    body = ""
+  }
+</script>
+
+<div in:fade class="flex flex-col justify-between items-between sm:border sm:rounded-lg w-full h-full sm:w-[360px] sm:h-[600px]">
+  <ul bind:this={messagesElement} class="flex flex-col gap-2 h-full sm:h-[400px] overflow-x-clip overflow-y-auto p-2">
+    {#each messages as message (message.id)}
+      {@const me = message.name === name}
+      <li
+        in:fly={{x: 100 * (me ? 1 : -1), y: -20, duration: 1000, easing: elasticOut}}
+        class="
+          rounded-[1em] px-4 py-2 flex flex-col
+          {me ? 'rounded-tr-none ml-10 bg-[#0A80FE] text-white' : 'rounded-tl-none mr-10 bg-[#E9E8EB] text-black'}
+        "
+      >
+        <span in:fly={{y: 10}} class="text-xs font-bold">{message.name}</span>
+        <span in:fade>{message.body}</span>
+      </li>
+    {/each}
+  </ul>
+
+  <form on:submit|preventDefault={submitMessage} class="bg-gray-100 p-2 flex gap-2">
+    <!-- svelte-ignore a11y-autofocus -->
+    <input
+      type="text"
+      name="message"
+      class="flex-grow rounded-full bg-transparent text-black"
+      bind:value={body}
+      placeholder="Message..."
+      autofocus
+      autocomplete="off"
+    />
+    <button class="bg-black text-white rounded px-4 py-2">Send</button>
+  </form>
+</div>
diff --git a/examples/advanced_chat/live_svelte.ex b/examples/advanced_chat/live_svelte.ex
new file mode 100644
index 0000000..47c51f5
--- /dev/null
+++ b/examples/advanced_chat/live_svelte.ex
@@ -0,0 +1,49 @@
+defmodule ExampleWeb.AdvancedChat do
+  use ExampleWeb, :live_view
+
+  @topic "public"
+  @event_new_message "new_message"
+
+  def render(assigns) do
+    ~H"""
+    <div class="flex justify-center items-center h-full w-full">
+      <%= unless @name do %>
+        <form phx-submit="set_name">
+          <!-- svelte-ignore a11y-autofocus -->
+          <input type="text" placeholder="Name" name="name" class="rounded" autofocus autocomplete="name" />
+          <button class="py-2 px-4 bg-black text-white rounded">Join</button>
+        </form>
+      <% else %>
+        <LiveSvelte.render
+          name="AdvancedChat"
+          props={%{messages: @messages, name: @name}}
+          class="w-full h-full flex justify-center items-center"
+        />
+      <% end %>
+    </div>
+    """
+  end
+
+  def mount(_params, _session, socket) do
+    ExampleWeb.Endpoint.subscribe(@topic)
+    {:ok, assign(socket, messages: [], name: nil)}
+  end
+
+  def handle_event("set_name", %{"name" => ""}, socket), do: {:noreply, socket}
+  def handle_event("set_name", %{"name" => name}, socket), do: {:noreply, assign(socket, name: name)}
+
+  def handle_event("send_message", payload, socket) do
+    payload =
+      payload
+      |> Map.put(:name, socket.assigns.name)
+      |> Map.put(:id, System.unique_integer([:positive]))
+
+    ExampleWeb.Endpoint.broadcast(@topic, @event_new_message, payload)
+
+    {:noreply, socket}
+  end
+
+  def handle_info(%{topic: @topic, event: @event_new_message, payload: payload}, socket) do
+    {:noreply, assign(socket, messages: socket.assigns.messages ++ [payload])}
+  end
+end