From 873604a9f762406dccd276552d452d3fb0cc547c Mon Sep 17 00:00:00 2001
From: Wout De Puysseleir <woutdp@gmail.com>
Date: Thu, 30 Mar 2023 11:35:33 -0700
Subject: [PATCH] Refactor chat example

---
 example_project/assets/svelte/Chat.svelte     | 39 ++++++++++---------
 .../lib/example_web/live/live_example_6.ex    |  2 +-
 2 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/example_project/assets/svelte/Chat.svelte b/example_project/assets/svelte/Chat.svelte
index 0d2ebbe..3edf6f1 100644
--- a/example_project/assets/svelte/Chat.svelte
+++ b/example_project/assets/svelte/Chat.svelte
@@ -1,5 +1,5 @@
 <script>
-  import {fly, fade} from "svelte/transition"
+  import {fly} from "svelte/transition"
   import {elasticOut} from "svelte/easing"
   import {afterUpdate} from "svelte"
 
@@ -10,11 +10,9 @@
   let body = ""
   let messagesElement
 
-	afterUpdate(() => { scrollToBottom(messagesElement) })
+  $: charCount = body.length
 
-  const scrollToBottom = async (node) => {
-    node.scroll({ top: node.scrollHeight, behavior: 'smooth' })
-  }
+  afterUpdate(() => messagesElement.scroll({ top: messagesElement.scrollHeight, behavior: "smooth" }))
 
   function submitMessage() {
     if (body === "") return
@@ -23,7 +21,7 @@
   }
 </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]">
+<div 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 overflow-x-clip overflow-y-auto p-2">
     {#each messages as message (message.id)}
       {@const me = message.name === name}
@@ -35,22 +33,27 @@
         "
       >
         <span in:fly={{y: 10}} class="text-xs font-bold">{message.name}</span>
-        <span in:fade>{message.body}</span>
+        <span>{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"
-    />
+  <form on:submit|preventDefault={submitMessage} class="bg-gray-100 p-2 flex gap-2 justify-center items-center">
+    <div class="relative flex justify-center items-center">
+      <!-- svelte-ignore a11y-autofocus -->
+      <input
+        type="text"
+        name="message"
+        bind:value={body}
+        placeholder="Message..."
+        autofocus
+        autocomplete="off"
+        class="flex-grow rounded-full bg-transparent text-black pr-10"
+      />
+      <span class="absolute right-0 px-4 text-gray-500 text-xs">
+        {charCount}
+      </span>
+    </div>
     <button class="bg-black text-white rounded px-4 py-2">Send</button>
   </form>
 </div>
diff --git a/example_project/lib/example_web/live/live_example_6.ex b/example_project/lib/example_web/live/live_example_6.ex
index 37d19a4..5683d29 100644
--- a/example_project/lib/example_web/live/live_example_6.ex
+++ b/example_project/lib/example_web/live/live_example_6.ex
@@ -7,7 +7,7 @@ defmodule ExampleWeb.LiveExample6 do
   def render(assigns) do
     ~H"""
     <div class="flex justify-center items-center h-full w-full">
-      <%= unless @name do %>
+      <%= if !@name do %>
         <form phx-submit="set_name">
           <!-- svelte-ignore a11y-autofocus -->
           <input