refactor: use Stimulus controller instead of inline script for chat input focus

app/javascript/controllers/chat_controller.js

@@ -57,4 +57,10 @@ export default class extends Controller {
   #scrollToBottom = () => {
     this.messagesTarget.scrollTop = this.messagesTarget.scrollHeight;
   };
+
+  focusInput() {
+    if (this.hasInputTarget) {
+      this.inputTarget.focus();
+    }
+  }
 }

app/javascript/controllers/focus_chat_input_controller.js

@@ -0,0 +1,16 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  connect() {
+    const chatController = this.application.getControllerForElementAndIdentifier(
+      document.querySelector('[data-controller~="chat"]'),
+      "chat"
+    );
+    
+    if (chatController) {
+      chatController.focusInput();
+    }
+    
+    this.element.remove();
+  }
+}

app/views/messages/create.turbo_stream.erb

@@ -8,14 +8,7 @@
   <%= render "messages/chat_form", chat: @chat %>
 <% end %>
 
-<%# Focus the input after form replacement %>
+<%# Focus the input after form replacement using Stimulus %>
-<%= turbo_stream.after "chat-form" do %>
+<%= turbo_stream.append "messages" do %>
-  <script>
+  <div data-controller="focus-chat-input"></div>
-    requestAnimationFrame(() => {
-      const textarea = document.querySelector('[data-chat-target="input"]');
-      if (textarea) {
-        textarea.focus();
-      }
-    });
-  </script>
 <% end %>