discourse/discourse-ai
1
0
Fork 0
mirror of https://github.com/discourse/discourse-ai.git synced 2025-07-08 07:12:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Kris 2025-06-13 17:45:51 -04:00 committed by GitHub
parent b5e8277083
commit 24416c5b87
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 19 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
assets/javascripts/discourse/components/ai-bot-conversations.gjs
View File

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

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

@ -4,6 +4,8 @@ import { service } from "@ember/service";
import DButton from "discourse/components/d-button"; import DButton from "discourse/components/d-button";
import { AI_CONVERSATIONS_PANEL } from "../services/ai-conversations-sidebar-manager"; import { AI_CONVERSATIONS_PANEL } from "../services/ai-conversations-sidebar-manager";
const TEXTAREA_ID = "ai-bot-conversations-input";
export default class AiBotSidebarNewConversation extends Component { export default class AiBotSidebarNewConversation extends Component {
@service appEvents; @service appEvents;
@service router; @service router;
@ -13,13 +15,21 @@ export default class AiBotSidebarNewConversation extends Component {
return this.sidebarState.isCurrentPanel(AI_CONVERSATIONS_PANEL); return this.sidebarState.isCurrentPanel(AI_CONVERSATIONS_PANEL);
} }
@action
focusTextarea() {
document.getElementById(TEXTAREA_ID)?.focus();
}
@action @action
routeTo() { routeTo() {
this.appEvents.trigger("discourse-ai:new-conversation-btn-clicked"); this.appEvents.trigger("discourse-ai:new-conversation-btn-clicked");
if (this.router.currentRouteName !== "discourse-ai-bot-conversations") { if (this.router.currentRouteName !== "discourse-ai-bot-conversations") {
this.router.transitionTo("/discourse-ai/ai-bot/conversations"); this.router.transitionTo("/discourse-ai/ai-bot/conversations");
} else {
this.focusTextarea();
} }
this.args.outletArgs?.toggleNavigationMenu?.(); this.args.outletArgs?.toggleNavigationMenu?.();
} }