Focus chat input on manual interaction only
What does this MR do and why?
Focus chat input on manual interaction only
With the new panel design, the AI panel may be expanded on page load. In such case, we don't want the chat to steal the focus. However, we do want the chat to be automatically focused when the user manually opens the AI panel, or navigates between AI tabs.
References
Screenshots or screen recordings
| Before | After |
|---|---|
| focus_before | focus_after |
How to set up and validate locally
If you don't have AI features set up locally, you may force the AI panel to appear by applying the following patch:
diff --git a/ee/app/assets/javascripts/ai/components/ai_panel.vue b/ee/app/assets/javascripts/ai/components/ai_panel.vue
index 8403beb0042c3..63310883b157f 100644
--- a/ee/app/assets/javascripts/ai/components/ai_panel.vue
+++ b/ee/app/assets/javascripts/ai/components/ai_panel.vue
@@ -72,6 +72,7 @@ export default {
return this.duoChatGlobalState.activeTab;
},
isAgenticMode() {
+ return true;
return this.duoChatGlobalState.chatMode === CHAT_MODES.AGENTIC;
},
currentChatComponent() {
diff --git a/ee/app/assets/javascripts/ai/init_duo_panel.js b/ee/app/assets/javascripts/ai/init_duo_panel.js
index b1bb2dd74c396..27f737f615d1f 100644
--- a/ee/app/assets/javascripts/ai/init_duo_panel.js
+++ b/ee/app/assets/javascripts/ai/init_duo_panel.js
@@ -39,7 +39,7 @@ export function initDuoPanel() {
// Configure chat-specific values in a single configuration object
const chatConfiguration = {
- agenticComponent: parseBoolean(agenticAvailable)
+ agenticComponent: parseBoolean('true')
? DuoAgenticChat
: agenticUnavailableMessage || __('Chat is not available.'),
classicComponent: DuoChat,
diff --git a/ee/app/views/layouts/_duo_chat_panel.html.haml b/ee/app/views/layouts/_duo_chat_panel.html.haml
index 480c017c746c5..6b82ffe580bba 100644
--- a/ee/app/views/layouts/_duo_chat_panel.html.haml
+++ b/ee/app/views/layouts/_duo_chat_panel.html.haml
@@ -1,5 +1,5 @@
- amazon_q_enabled = ::Ai::AmazonQ.enabled?
- duo_enabled_for_project_or_group = ::Gitlab::Llm::TanukiBot.show_breadcrumbs_entry_point?(user: current_user)
-- if !amazon_q_enabled && duo_enabled_for_project_or_group
+- if true
#duo-chat-panel.duo-chat-panel{ data: duo_chat_panel_data(current_user, @project, @group) }
- On any given page, interact with the AI navigation rail.
- When the
Current chatorNew chattabs become active, the chat input should get the focus automatically.
- With the
Current chatorNew chattab open, refresh the page.
- The previously opened tab should still be expanded, but the chat input should not have the focus.
MR acceptance checklist
Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.
Related to #575660 (closed)
Edited by Paul Gascou-Vaillancourt