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
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) }
- Expand the Duo chat panel.
- The text input should be focused automatically.
- 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