Add fancy chat inside example project

example_project/assets/svelte/Chat.svelte

@@ -1,31 +1,56 @@
 <script>
-    import {slide} from "svelte/transition"
+  import {slide, fly, fade} from "svelte/transition"
+  import {elasticOut} from "svelte/easing"
+  import {afterUpdate} from "svelte"
 
-    export let messages
-    export let pushEvent
+  export let messages
+  export let name
+  export let pushEvent
 
-    let message = ""
-    let name = ""
+  let body = ""
+  let messagesElement
 
-    function submitMessage() {
-        if (message === "" || name === "") return
-        pushEvent("send_message", {body: message, name: name})
-        message = ""
-    }
+	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 class="flex flex-col justify-between items-between min-h-[400px]">
-    <ul class="flex flex-col gap-2">
-        {#each messages as message (message.id)}
-            <li in:slide class="bg-[#eee] rounded-full px-4 py-2 rounded-bl-none">
-                <i>{message.name}:</i> {message.body}
-            </li>
-        {/each}
-    </ul>
+<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}>
-        <input type="text" name="name" class="rounded" bind:value={name} placeholder="Your Name" />
-        <input type="text" name="message" class="rounded" bind:value={message} placeholder="Message..."/>
-        <button class="bg-black text-white rounded px-4 py-2">Send</button>
-    </form>
+  <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>

example_project/lib/example_web/components/layouts/app.html.heex

@@ -1,4 +1,4 @@
-<header class="px-4 sm:px-6 lg:px-8">
+<header class="px-4 sm:px-6 lg:px-8 h-[70px]">
   <div class="flex items-center justify-between border-b border-zinc-100 py-3">
     <div class="flex items-center gap-4">
       <a href="/">
@@ -68,6 +68,6 @@
     </div>
   </div>
 </header>
-<main class="px-4 py-20 sm:px-6 lg:px-8">
+<main class="p-0 sm:py-20 sm:px-6 lg:px-8 h-[calc(100vh_-_70px)]">
   <%= @inner_content %>
 </main>

example_project/lib/example_web/live/live_example_5.ex

@@ -6,22 +6,44 @@ defmodule ExampleWeb.LiveExample5 do
 
   def render(assigns) do
     ~H"""
-    <LiveSvelte.render name="Chat" props={%{messages: @messages}} />
+    <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="Chat"
+          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: [])}
+    {:ok, assign(socket, messages: [], name: nil)}
   end
 
-  def handle_event("send_message", event, socket) do
-    ExampleWeb.Endpoint.broadcast(@topic, @event_new_message, event)
+  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
-    payload = Map.put(payload, :id, System.unique_integer([:positive]))
     {:noreply, assign(socket, messages: socket.assigns.messages ++ [payload])}
   end
 end