UX: focus conversation input on route transition and button click (#1404)

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";
@@ -164,6 +165,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
@@ -199,7 +206,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,
@@ -216,7 +223,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

@@ -4,6 +4,8 @@ import { service } from "@ember/service";
 import DButton from "discourse/components/d-button";
 import { AI_CONVERSATIONS_PANEL } from "../services/ai-conversations-sidebar-manager";
 
+const TEXTAREA_ID = "ai-bot-conversations-input";
+
 export default class AiBotSidebarNewConversation extends Component {
   @service appEvents;
   @service router;
@@ -13,13 +15,21 @@ export default class AiBotSidebarNewConversation extends Component {
     return this.sidebarState.isCurrentPanel(AI_CONVERSATIONS_PANEL);
   }
 
+  @action
+  focusTextarea() {
+    document.getElementById(TEXTAREA_ID)?.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?.();
   }