Skip to content

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) }
  1. On any given page, interact with the AI navigation rail.
  • When the Current chat or New chat tabs become active, the chat input should get the focus automatically.
  1. With the Current chat or New chat tab 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

Merge request reports

Loading