UX: focus conversation input on route transition and button click

Author: awesomerobot

assets/javascripts/discourse/components/ai-bot-conversations.gjs

@@ -5,6 +5,7 @@ import { on } from "@ember/modifier";
 import { action } from "@ember/object";
 import { getOwner } from "@ember/owner";
 import didInsert from "@ember/render-modifiers/modifiers/did-insert";
+import { scheduleOnce } from "@ember/runloop";
 import { service } from "@ember/service";
 import { TrackedArray } from "@ember-compat/tracked-built-ins";
 import $ from "jquery";
@@ -163,6 +164,12 @@ export default class AiBotConversations extends Component {
   setTextArea(element) {
     this.textarea = element;
     this.setupAutocomplete(element);
+    scheduleOnce("afterRender", this, this.focusTextarea);
+  }
+
+  @action
+  focusTextarea() {
+    this.textarea?.focus();
   }
 
   @action
@@ -198,7 +205,7 @@ export default class AiBotConversations extends Component {
       transformComplete: (obj) => obj.username || obj.name,
       afterComplete: (text) => {
         this.textarea.value = text;
-        this.textarea.focus();
+        this.focusTextarea();
         this.updateInputValue({ target: { value: text } });
       },
       onClose: destroyUserStatuses,
@@ -215,7 +222,7 @@ export default class AiBotConversations extends Component {
       treatAsTextarea: true,
       afterComplete: (text) => {
         this.textarea.value = text;
-        this.textarea.focus();
+        this.focusTextarea();
         this.updateInputValue({ target: { value: text } });
       },
     });

assets/javascripts/discourse/components/ai-bot-sidebar-new-conversation.gjs

@@ -13,13 +13,21 @@ export default class AiBotSidebarNewConversation extends Component {
     return this.sidebarState.isCurrentPanel(AI_CONVERSATIONS_PANEL);
   }
 
+  @action
+  focusTextarea() {
+    document.getElementById("ai-bot-conversations-input")?.focus();
+  }
+
   @action
   routeTo() {
     this.appEvents.trigger("discourse-ai:new-conversation-btn-clicked");
 
     if (this.router.currentRouteName !== "discourse-ai-bot-conversations") {
       this.router.transitionTo("/discourse-ai/ai-bot/conversations");
+    } else {
+      this.focusTextarea();
     }
+
     this.args.outletArgs?.toggleNavigationMenu?.();
   }