Refactor chat example

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>

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