From 24416c5b870726190ba50d5c68e8ed9bb2178094 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Fri, 13 Jun 2025 17:45:51 -0400
Subject: [PATCH] UX: focus conversation input on route transition and button
 click (#1404)

---
 .../discourse/components/ai-bot-conversations.gjs     | 11 +++++++++--
 .../components/ai-bot-sidebar-new-conversation.gjs    | 10 ++++++++++
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/assets/javascripts/discourse/components/ai-bot-conversations.gjs b/assets/javascripts/discourse/components/ai-bot-conversations.gjs
index 019b915e..1d859a4c 100644
--- a/assets/javascripts/discourse/components/ai-bot-conversations.gjs
+++ b/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 } });
       },
     });
diff --git a/assets/javascripts/discourse/components/ai-bot-sidebar-new-conversation.gjs b/assets/javascripts/discourse/components/ai-bot-sidebar-new-conversation.gjs
index 3af91803..86e19c59 100644
--- a/assets/javascripts/discourse/components/ai-bot-sidebar-new-conversation.gjs
+++ b/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?.();
   }