From fac0f064227ee03542d66c95f6602f6ad9d08543 Mon Sep 17 00:00:00 2001
From: Tomas Bulva <tbulva@gitlab.com>
Date: Tue, 14 Oct 2025 10:46:36 +0200
Subject: [PATCH 1/2] WIP

-- 
GitLab


From 3b70c94f4d2f3a79a5a18676e16d59614f8c4cec Mon Sep 17 00:00:00 2001
From: Tomas Bulva <tbulva@gitlab.com>
Date: Tue, 21 Oct 2025 18:45:28 +0200
Subject: [PATCH 2/2] Move model dropdown to agentic-model slot in Duo Agentic
 Chat

Relocate the model selection dropdown from the footer-controls slot
to a new agentic-model slot in the Duo Agentic Chat component. This
improves the layout structure by separating model selection from
footer controls.

- Move ModelSelectDropdown to agentic-model slot
- Update styling: remove absolute positioning classes, add max-width
- Update test to verify dropdown renders in correct slot

Changelog: changed
EE: true
---
 .../components/duo_agentic_chat.vue           | 39 ++++++++++---------
 .../components/duo_agentic_chat_spec.js       | 12 ++++++
 package.json                                  |  2 +-
 yarn.lock                                     | 15 +++----
 4 files changed, 39 insertions(+), 29 deletions(-)

diff --git a/ee/app/assets/javascripts/ai/duo_agentic_chat/components/duo_agentic_chat.vue b/ee/app/assets/javascripts/ai/duo_agentic_chat/components/duo_agentic_chat.vue
index 4b468abd92a5d9..3a204200a64514 100644
--- a/ee/app/assets/javascripts/ai/duo_agentic_chat/components/duo_agentic_chat.vue
+++ b/ee/app/assets/javascripts/ai/duo_agentic_chat/components/duo_agentic_chat.vue
@@ -767,7 +767,27 @@ export default {
       @thread-selected="onThreadSelected"
       @back-to-list="onBackToList"
       @delete-thread="onDeleteThread"
-      ><template #footer-controls>
+    >
+      <template #agentic-model>
+        <div
+          v-if="userModelSelectionEnabled"
+          v-gl-tooltip
+          :title="modelSelectionDisabledTooltipText"
+          data-testid="model-dropdown-container"
+        >
+          <model-select-dropdown
+            class="gl-max-w-31"
+            with-default-model-tooltip
+            :disabled="isModelSelectionDisabled"
+            :is-loading="$apollo.queries.availableModels.loading"
+            :items="availableModels"
+            :selected-option="currentModel"
+            :placeholder-dropdown-text="s__('ModelSelection|Select a model')"
+            @select="onModelSelect"
+          />
+        </div>
+      </template>
+      <template #footer-controls>
         <div :class="{ 'gl-flex gl-justify-between': userModelSelectionEnabled }">
           <div class="gl-flex gl-px-4 gl-pb-2 gl-pt-5">
             <gl-toggle
@@ -776,23 +796,6 @@ export default {
               label-position="left"
             />
           </div>
-          <div
-            v-if="userModelSelectionEnabled"
-            v-gl-tooltip
-            :title="modelSelectionDisabledTooltipText"
-            class="gl-mb-2 gl-mt-5 gl-block gl-min-w-0"
-            data-testid="model-dropdown-container"
-          >
-            <model-select-dropdown
-              with-default-model-tooltip
-              :disabled="isModelSelectionDisabled"
-              :is-loading="$apollo.queries.availableModels.loading"
-              :items="availableModels"
-              :selected-option="currentModel"
-              :placeholder-dropdown-text="s__('ModelSelection|Select a model')"
-              @select="onModelSelect"
-            />
-          </div>
         </div>
       </template>
     </web-agentic-duo-chat>
diff --git a/ee/spec/frontend/ai/duo_agentic_chat/components/duo_agentic_chat_spec.js b/ee/spec/frontend/ai/duo_agentic_chat/components/duo_agentic_chat_spec.js
index 060bdba22b1c3f..470e5c26c39e60 100644
--- a/ee/spec/frontend/ai/duo_agentic_chat/components/duo_agentic_chat_spec.js
+++ b/ee/spec/frontend/ai/duo_agentic_chat/components/duo_agentic_chat_spec.js
@@ -1462,6 +1462,18 @@ describe('Duo Agentic Chat', () => {
         });
       });
 
+      it('renders `ModelSelectDropdown` in the correct slot', () => {
+        expect(findModelSelectDropdown().exists()).toBe(true);
+        const slot = findDuoChat().vm.$slots['agentic-model'];
+        const vnode = typeof slot === 'function' ? slot()[0] : slot[0];
+
+        const testId = vnode.props
+          ? vnode.props['data-testid'] // Vue 3
+          : vnode.data.attrs['data-testid']; // Vue 2
+
+        expect(testId).toBe('model-dropdown-container');
+      });
+
       it('renders `ModelSelectDropdown`', () => {
         expect(findModelSelectDropdown().exists()).toBe(true);
       });
diff --git a/package.json b/package.json
index 288a1525345741..335ba3216fb08f 100644
--- a/package.json
+++ b/package.json
@@ -62,7 +62,7 @@
     "@gitlab/application-sdk-browser": "^0.3.4",
     "@gitlab/at.js": "1.5.7",
     "@gitlab/cluster-client": "^3.0.0",
-    "@gitlab/duo-ui": "^12.2.0",
+    "@gitlab/duo-ui": "^12.3.3",
     "@gitlab/favicon-overlay": "2.0.0",
     "@gitlab/fonts": "^1.3.1",
     "@gitlab/query-language-rust": "0.20.9",
diff --git a/yarn.lock b/yarn.lock
index e5965e18129c41..255576c9f120da 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1389,10 +1389,10 @@
     core-js "^3.29.1"
     mitt "^3.0.1"
 
-"@gitlab/duo-ui@^12.2.0":
-  version "12.2.0"
-  resolved "https://registry.yarnpkg.com/@gitlab/duo-ui/-/duo-ui-12.2.0.tgz#8c3b79d09d1fe32435f65fc43912cf912fab95cc"
-  integrity sha512-fRM/7Q+cQhQUllAZcKa6JViOoYeQYO/KZTh7Z0cdK7rQ27WowsOoQmHRTSyxb94s4ZFaerJMs1nxd04Eb2Kk7w==
+"@gitlab/duo-ui@^12.3.3":
+  version "12.4.1"
+  resolved "https://registry.yarnpkg.com/@gitlab/duo-ui/-/duo-ui-12.4.1.tgz#4dfa64d86bc4fcfcd2e734001cc5b255c69c08c2"
+  integrity sha512-MRZDzLN4oa6FAoYvQ6zGHwk4cYjvvuZaBJqqR0U9yyLDvSxRTUowRvToHm66HuMxxKW8+7u8Ug5fDp1H75O8lQ==
   dependencies:
     "@floating-ui/dom" "1.7.4"
     diff "^8.0.2"
@@ -1433,7 +1433,7 @@
   resolved "https://registry.yarnpkg.com/@gitlab/fonts/-/fonts-1.3.1.tgz#dd335ed25cb33927abc1d80dfbfa31fc93e9bd15"
   integrity sha512-/7Q5Sy9Q3pmutV/1EgURm3iDZtV0HcE4nTwFpHLCrGDdxQ3pNv6SdujzeJExnfiI5Y+1FGfOvKwOlmiVuyDtzA==
 
-"@gitlab/noop@^1.0.1":
+"@gitlab/noop@^1.0.1", jackspeak@^3.1.2, "jackspeak@npm:@gitlab/noop@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@gitlab/noop/-/noop-1.0.1.tgz#71a831146ee02732b4a61d2d3c11204564753454"
   integrity sha512-s++4wjMYeDvBp9IO59DBrWjy8SE/gFkjTDO5ck2W0S6Vv7OlqgErwL7pHngAnrSmTJAzyUG8wHGqo0ViS4jn5Q==
@@ -9543,11 +9543,6 @@ istanbul-reports@^3.1.3:
     html-escaper "^2.0.0"
     istanbul-lib-report "^3.0.0"
 
-jackspeak@^3.1.2, "jackspeak@npm:@gitlab/noop@1.0.1":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@gitlab/noop/-/noop-1.0.1.tgz#71a831146ee02732b4a61d2d3c11204564753454"
-  integrity sha512-s++4wjMYeDvBp9IO59DBrWjy8SE/gFkjTDO5ck2W0S6Vv7OlqgErwL7pHngAnrSmTJAzyUG8wHGqo0ViS4jn5Q==
-
 jed@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/jed/-/jed-1.1.1.tgz#7a549bbd9ffe1585b0cd0a191e203055bee574b4"
-- 
GitLab