Skip to content

Focus classic Duo chat input on user interaction only

What does this MR do and why?

Focus classic Duo chat input on user interaction only

In the new UI, we want to avoid the Duo classic chat input stealing the focus. The input now only gets the focos when the user explicitly toggles the chat panel.

References

Screenshots or screen recordings

focus

How to set up and validate locally

If you don't have AI feature enabled locally, the following patch can force Duo chat to appear:

diff --git a/ee/app/assets/javascripts/ai/components/ai_panel.vue b/ee/app/assets/javascripts/ai/components/ai_panel.vue
index 8403beb0042c3d..7e217360af4d59 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 false;
       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 b1bb2dd74c396c..27f737f615d1fb 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 480c017c746c5f..6b82ffe580bba4 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. Expand the Duo chat panel.
  • The text input should be focused automatically.
  1. Refresh the page.
  • The AI panel should still be expanded, but the text 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.

Edited by Paul Gascou-Vaillancourt

Merge request reports

Loading