@gitlab/duo-ui 15.19.0 → 15.19.1

package/dist/components/agentic_chat/components/agentic_tool_approval_flow/agentic_tool_approval_flow.js

@@ -58,6 +58,7 @@ var script = {
      * @property {string} text - Display text for button/dropdown
      * @property {boolean} primary - Mark as primary action (exactly one required)
      * @property {boolean} disabled - Disable this option (passed through to GitLab UI)
+     * @property {string} [secondaryText] - Secondary text shown below the option (e.g., reason for disabled state)
      */
     approvalOptions: {
       type: Array,
@@ -88,6 +89,9 @@ var script = {
           if (option.primary === true && option.disabled === true) {
             return false;
           }
+          if ('secondaryText' in option && typeof option.secondaryText !== 'string') {
+            return false;
+          }
           return true;
         });
       }

package/dist/components/agentic_chat/components/agentic_tool_approval_flow/agentic_tool_approval_modal/agentic_tool_approval_modal.js

@@ -1,4 +1,4 @@
-import { GlModal, GlButton, GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { GlModal, GlButton, GlButtonGroup, GlDisclosureDropdown } from '@gitlab/ui';
 import { translate } from '../../../../../utils/i18n';
 import { acceptedApproveToolPayloads } from '../../../../chat/constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
@@ -18,8 +18,8 @@ var script = {
   components: {
     GlModal,
     GlButton,
-    GlDropdown,
-    GlDropdownItem
+    GlButtonGroup,
+    GlDisclosureDropdown
   },
   props: {
     /**
@@ -79,6 +79,25 @@ var script = {
     showSplitButton() {
       return this.safeApprovalOptions.length > 1;
     },
+    approvalDropdownItems() {
+      return this.additionalApprovalOptions.map(option => ({
+        text: option.text,
+        ...(option.secondaryText ? {
+          secondaryText: option.secondaryText
+        } : {}),
+        extraAttrs: {
+          ...(option.disabled ? {
+            disabled: true
+          } : {}),
+          'data-testid': 'approve-dropdown-item'
+        },
+        action: () => {
+          var _this$$refs$approvalD;
+          (_this$$refs$approvalD = this.$refs.approvalDropdown) === null || _this$$refs$approvalD === void 0 ? void 0 : _this$$refs$approvalD.close();
+          this.handleDropdownSelection(option);
+        }
+      }));
+    },
     denyAction() {
       return {
         text: this.$options.i18n.DENY_TEXT,
@@ -152,7 +171,9 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-modal',{attrs:{"visible":_vm.visible,"modal-id":"agentic-tool-approval-modal","title":_vm.$options.i18n.TITLE,"action-primary":null,"action-cancel":null,"no-close-on-backdrop":true,"no-close-on-esc":true,"data-testid":"agentic-tool-approval-modal"},on:{"hide":_vm.handleModalHide},scopedSlots:_vm._u([{key:"modal-footer",fn:function(){return [_c('div',{staticClass:"gl-flex gl-justify-end gl-gap-3"},[_c('gl-button',_vm._b({on:{"click":_vm.handleDeny}},'gl-button',_vm.denyAction.attributes,false),[_vm._v("\n        "+_vm._s(_vm.denyAction.text)+"\n      ")]),_vm._v(" "),(_vm.showSplitButton)?_c('gl-dropdown',{attrs:{"variant":"confirm","size":"small","split":"","text":_vm.primaryApprovalOption.text,"disabled":_vm.primaryApprovalOption.disabled,"right":"","data-testid":"approve-dropdown"},on:{"click":_vm.handlePrimaryApprove}},_vm._l((_vm.additionalApprovalOptions),function(option){return _c('gl-dropdown-item',{key:option.type,attrs:{"disabled":option.disabled},on:{"click":function($event){return _vm.handleDropdownSelection(option)}}},[_vm._v("\n          "+_vm._s(option.text)+"\n        ")])}),1):_c('gl-button',{attrs:{"variant":"confirm","size":"small","disabled":_vm.primaryApprovalOption.disabled,"data-testid":"approve-button"},on:{"click":_vm.handlePrimaryApprove}},[_vm._v("\n        "+_vm._s(_vm.primaryApprovalOption.text)+"\n      ")])],1)]},proxy:true}])},[_c('div',{staticClass:"gl-mb-4"},[_c('p',{staticClass:"gl-mb-3",attrs:{"data-testid":"approval-description"}},[_vm._v("\n      "+_vm._s(_vm.description)+"\n    ")]),_vm._v(" "),(_vm.toolDetails)?_c('div',{staticClass:"gl-mb-3 gl-rounded-base gl-bg-gray-10 gl-p-3",attrs:{"data-testid":"tool-details"}},[_c('strong',[_vm._v(_vm._s(_vm.$options.i18n.TOOL_LABEL)+" "+_vm._s(_vm.toolName))]),_vm._v(" "),(_vm.toolDetails.parameters)?_c('pre',{staticClass:"gl-mb-0 gl-mt-2 gl-text-inherit",attrs:{"data-testid":"tool-parameters"}},[_vm._v(_vm._s(JSON.stringify(_vm.toolDetails.parameters, null, 2)))]):_vm._e()]):_vm._e()])])};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-modal',{attrs:{"visible":_vm.visible,"modal-id":"agentic-tool-approval-modal","title":_vm.$options.i18n.TITLE,"action-primary":null,"action-cancel":null,"no-close-on-backdrop":true,"no-close-on-esc":true,"data-testid":"agentic-tool-approval-modal"},on:{"hide":_vm.handleModalHide},scopedSlots:_vm._u([{key:"modal-footer",fn:function(){return [_c('div',{staticClass:"gl-flex gl-justify-end gl-gap-3"},[_c('gl-button',_vm._b({on:{"click":_vm.handleDeny}},'gl-button',_vm.denyAction.attributes,false),[_vm._v("\n        "+_vm._s(_vm.denyAction.text)+"\n      ")]),_vm._v(" "),(_vm.showSplitButton)?_c('gl-button-group',{attrs:{"data-testid":"approve-dropdown"}},[_c('gl-button',{attrs:{"variant":"confirm","size":"small","disabled":_vm.primaryApprovalOption.disabled,"data-testid":"approve-dropdown-primary"},on:{"click":_vm.handlePrimaryApprove}},[_vm._v("\n          "+_vm._s(_vm.primaryApprovalOption.text)+"\n        ")]),_vm._v(" "),_c('gl-disclosure-dropdown',{ref:"approvalDropdown",attrs:{"variant":"confirm","category":"primary","size":"small","no-caret":"","icon":"chevron-down","toggle-text":"More approval options","text-sr-only":"","placement":"bottom-end","disabled":_vm.primaryApprovalOption.disabled,"items":_vm.approvalDropdownItems},scopedSlots:_vm._u([{key:"list-item",fn:function(ref){
+var item = ref.item;
+return [_c('span',[_vm._v(_vm._s(item.text))]),_vm._v(" "),(item.secondaryText)?_c('span',{staticClass:"gl-block gl-text-sm gl-text-subtle"},[_vm._v("\n              "+_vm._s(item.secondaryText)+"\n            ")]):_vm._e()]}}],null,false,1049862671)})],1):_c('gl-button',{attrs:{"variant":"confirm","size":"small","disabled":_vm.primaryApprovalOption.disabled,"data-testid":"approve-button"},on:{"click":_vm.handlePrimaryApprove}},[_vm._v("\n        "+_vm._s(_vm.primaryApprovalOption.text)+"\n      ")])],1)]},proxy:true}])},[_c('div',{staticClass:"gl-mb-4"},[_c('p',{staticClass:"gl-mb-3",attrs:{"data-testid":"approval-description"}},[_vm._v("\n      "+_vm._s(_vm.description)+"\n    ")]),_vm._v(" "),(_vm.toolDetails)?_c('div',{staticClass:"gl-mb-3 gl-rounded-base gl-bg-gray-10 gl-p-3",attrs:{"data-testid":"tool-details"}},[_c('strong',[_vm._v(_vm._s(_vm.$options.i18n.TOOL_LABEL)+" "+_vm._s(_vm.toolName))]),_vm._v(" "),(_vm.toolDetails.parameters)?_c('pre',{staticClass:"gl-mb-0 gl-mt-2 gl-text-inherit",attrs:{"data-testid":"tool-parameters"}},[_vm._v(_vm._s(JSON.stringify(_vm.toolDetails.parameters, null, 2)))]):_vm._e()]):_vm._e()])])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/chat/components/duo_chat_message_tool_approval/message_tool_approval.js

@@ -1,4 +1,4 @@
-import { GlButton, GlCard, GlFormTextarea, GlFormGroup, GlBadge, GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { GlButton, GlButtonGroup, GlCard, GlFormTextarea, GlFormGroup, GlBadge, GlDisclosureDropdown } from '@gitlab/ui';
 import { capitalize, startCase } from 'lodash-es';
 import { translate } from '../../../../utils/i18n';
 import { convertKeysToCamelCase } from '../../../../utils/object';
@@ -48,12 +48,12 @@ var script = {
   name: 'MessageToolApproval',
   components: {
     GlButton,
+    GlButtonGroup,
     GlCard,
     GlFormTextarea,
     GlFormGroup,
     GlBadge,
-    GlDropdown,
-    GlDropdownItem,
+    GlDisclosureDropdown,
     CreateCommitToolParams,
     DefaultToolParams,
     RunCommandToolParams
@@ -84,6 +84,7 @@ var script = {
      * @property {string} text - The display text for the option
      * @property {boolean} primary - Whether this is the primary option (appears as main button)
      * @property {boolean} disabled - Whether this option is disabled
+     * @property {string} [secondaryText] - Secondary text shown below the option (e.g., reason for disabled state)
      */
     approvalOptions: {
       type: Array,
@@ -96,7 +97,15 @@ var script = {
       validator(value) {
         if (!Array.isArray(value)) return false;
         // Must have at least one approve-tool-once option
-        return value.some(option => option.type === acceptedApproveToolPayloads.APPROVE_TOOL_ONCE);
+        if (!value.some(option => option.type === acceptedApproveToolPayloads.APPROVE_TOOL_ONCE)) {
+          return false;
+        }
+        return value.every(option => {
+          if ('secondaryText' in option && typeof option.secondaryText !== 'string') {
+            return false;
+          }
+          return true;
+        });
       }
     }
   },
@@ -202,6 +211,25 @@ var script = {
     },
     showSplitButton() {
       return this.safeApprovalOptions.length > 1;
+    },
+    approvalDropdownItems() {
+      return this.additionalApprovalOptions.map(option => ({
+        text: option.text,
+        ...(option.secondaryText ? {
+          secondaryText: option.secondaryText
+        } : {}),
+        extraAttrs: {
+          ...(option.disabled ? {
+            disabled: true
+          } : {}),
+          'data-testid': 'approve-dropdown-item'
+        },
+        action: () => {
+          var _this$$refs$approvalD;
+          (_this$$refs$approvalD = this.$refs.approvalDropdown) === null || _this$$refs$approvalD === void 0 ? void 0 : _this$$refs$approvalD.close();
+          this.handleDropdownSelection(option);
+        }
+      }));
     }
   },
   watch: {
@@ -265,7 +293,9 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-card',{staticClass:"gl-w-full",class:{ 'message-tool-approval-collapsed': _vm.collapsed },attrs:{"header-class":{ 'message-tool-approval-collapsed-header': _vm.collapsed },"body-class":{ 'gl-hidden': _vm.collapsed }},scopedSlots:_vm._u([{key:"header",fn:function(){return [_c('div',{staticClass:"gl-flex gl-items-center gl-justify-between gl-gap-3"},[_c('span',{staticClass:"gl-inline-flex gl-items-center gl-gap-2"},[(_vm.collapsible)?_c('gl-button',_vm._b({attrs:{"variant":"default","category":"tertiary","size":"small","data-testid":"toggle-details-button"},on:{"click":function($event){_vm.collapsed = !_vm.collapsed;}}},'gl-button',_vm.collapseButtonProps,false)):_vm._e(),_vm._v(" "),_c('span',[_vm._v("\n          "+_vm._s(_vm.toolApprovalTitle)+"\n        ")])],1),_vm._v(" "),_c('gl-badge',{attrs:{"variant":_vm.toolStatusVariant}},[_vm._v("\n        "+_vm._s(_vm.toolStatusLabel)+"\n      ")])],1)]},proxy:true},(!_vm.isApproved)?{key:"footer",fn:function(){return [(!_vm.showDenialReason)?_c('div',{staticClass:"gl-flex gl-gap-2"},[(_vm.showSplitButton)?_c('gl-dropdown',{attrs:{"variant":"confirm","size":"small","split":"","text":_vm.primaryApprovalOption.text,"disabled":_vm.buttonsDisabled || _vm.primaryApprovalOption.disabled,"loading":_vm.isApproving,"data-testid":"approve-dropdown"},on:{"click":_vm.handlePrimaryApprove}},_vm._l((_vm.additionalApprovalOptions),function(option){return _c('gl-dropdown-item',{key:option.type,attrs:{"disabled":option.disabled,"data-testid":"approve-dropdown-item"},on:{"click":function($event){return _vm.handleDropdownSelection(option)}}},[_vm._v("\n          "+_vm._s(option.text)+"\n        ")])}),1):_c('gl-button',{attrs:{"variant":"confirm","size":"small","data-testid":"approve-tool-inline","disabled":_vm.buttonsDisabled || _vm.primaryApprovalOption.disabled,"loading":_vm.isApproving},on:{"click":_vm.handlePrimaryApprove}},[_vm._v("\n        "+_vm._s(_vm.primaryApprovalOption.text)+"\n      ")]),_vm._v(" "),_c('gl-button',{attrs:{"size":"small","data-testid":"deny-tool-inline","disabled":_vm.buttonsDisabled,"loading":_vm.isDenying},on:{"click":_vm.handleDeny}},[_vm._v("\n        "+_vm._s(_vm.denyButtonText)+"\n      ")])],1):_c('div',[_c('gl-form-group',{staticClass:"gl-mb-3",attrs:{"label":_vm.$options.i18n.DENIAL_REASON_LABEL,"label-for":"inline-rejection-reason","optional":true}},[_c('gl-form-textarea',{attrs:{"id":"inline-rejection-reason","placeholder":_vm.$options.i18n.DENIAL_REASON_PLACEHOLDER,"rows":2,"no-resize":true,"submit-on-enter":false,"disabled":_vm.buttonsDisabled,"data-testid":"denial-reason-textarea","autofocus":""},on:{"submit":_vm.submitDenial},model:{value:(_vm.denialReason),callback:function ($$v) {_vm.denialReason=$$v;},expression:"denialReason"}})],1),_vm._v(" "),_c('div',{staticClass:"gl-flex gl-gap-3"},[_c('gl-button',{attrs:{"size":"small","data-testid":"submit-denial","variant":"confirm","disabled":_vm.buttonsDisabled,"loading":_vm.isDenying},on:{"click":_vm.submitDenial}},[_vm._v("\n          "+_vm._s(_vm.denyButtonText)+"\n        ")]),_vm._v(" "),_c('gl-button',{attrs:{"size":"small","data-testid":"cancel-denial","disabled":_vm.buttonsDisabled},on:{"click":_vm.cancelDenial}},[_vm._v("\n          "+_vm._s(_vm.$options.i18n.CANCEL_TEXT)+"\n        ")])],1)],1)]},proxy:true}:null],null,true)},[_vm._v(" "),_vm._l((_vm.messages),function(toolMsg,index){return _c('div',{key:toolMsg.id || index},[_c(_vm.getToolParamsComponent(toolMsg.tool_info && toolMsg.tool_info.name),_vm._b({tag:"component",class:['gl-leading-20', { 'gl-border-t gl-mt-3 gl-border-gray-100 gl-pt-3': index > 0 }],attrs:{"tool-name":toolMsg.tool_info && toolMsg.tool_info.name,"tool-params":_vm.convertKeysToCamelCase((toolMsg.tool_info && toolMsg.tool_info.args) || {}),"tool-response":toolMsg.tool_info && toolMsg.tool_info.tool_response,"working-directory":_vm.workingDirectory}},'component',_vm.convertKeysToCamelCase((toolMsg.tool_info && toolMsg.tool_info.args) || {}),false))],1)})],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-card',{staticClass:"gl-w-full",class:{ 'message-tool-approval-collapsed': _vm.collapsed },attrs:{"header-class":{ 'message-tool-approval-collapsed-header': _vm.collapsed },"body-class":{ 'gl-hidden': _vm.collapsed }},scopedSlots:_vm._u([{key:"header",fn:function(){return [_c('div',{staticClass:"gl-flex gl-items-center gl-justify-between gl-gap-3"},[_c('span',{staticClass:"gl-inline-flex gl-items-center gl-gap-2"},[(_vm.collapsible)?_c('gl-button',_vm._b({attrs:{"variant":"default","category":"tertiary","size":"small","data-testid":"toggle-details-button"},on:{"click":function($event){_vm.collapsed = !_vm.collapsed;}}},'gl-button',_vm.collapseButtonProps,false)):_vm._e(),_vm._v(" "),_c('span',[_vm._v("\n          "+_vm._s(_vm.toolApprovalTitle)+"\n        ")])],1),_vm._v(" "),_c('gl-badge',{attrs:{"variant":_vm.toolStatusVariant}},[_vm._v("\n        "+_vm._s(_vm.toolStatusLabel)+"\n      ")])],1)]},proxy:true},(!_vm.isApproved)?{key:"footer",fn:function(){return [(!_vm.showDenialReason)?_c('div',{staticClass:"gl-flex gl-gap-2"},[(_vm.showSplitButton)?_c('gl-button-group',{attrs:{"data-testid":"approve-dropdown"}},[_c('gl-button',{attrs:{"variant":"confirm","size":"small","disabled":_vm.buttonsDisabled || _vm.primaryApprovalOption.disabled,"loading":_vm.isApproving,"data-testid":"approve-dropdown-primary"},on:{"click":_vm.handlePrimaryApprove}},[_vm._v("\n          "+_vm._s(_vm.primaryApprovalOption.text)+"\n        ")]),_vm._v(" "),_c('gl-disclosure-dropdown',{ref:"approvalDropdown",attrs:{"variant":"confirm","category":"primary","size":"small","no-caret":"","icon":"chevron-down","toggle-text":"More approval options","text-sr-only":"","placement":"bottom-end","disabled":_vm.buttonsDisabled || _vm.primaryApprovalOption.disabled,"items":_vm.approvalDropdownItems},scopedSlots:_vm._u([{key:"list-item",fn:function(ref){
+var item = ref.item;
+return [_c('span',[_vm._v(_vm._s(item.text))]),_vm._v(" "),(item.secondaryText)?_c('span',{staticClass:"gl-block gl-text-sm gl-text-subtle"},[_vm._v("\n              "+_vm._s(item.secondaryText)+"\n            ")]):_vm._e()]}}],null,false,1049862671)})],1):_c('gl-button',{attrs:{"variant":"confirm","size":"small","data-testid":"approve-tool-inline","disabled":_vm.buttonsDisabled || _vm.primaryApprovalOption.disabled,"loading":_vm.isApproving},on:{"click":_vm.handlePrimaryApprove}},[_vm._v("\n        "+_vm._s(_vm.primaryApprovalOption.text)+"\n      ")]),_vm._v(" "),_c('gl-button',{attrs:{"size":"small","data-testid":"deny-tool-inline","disabled":_vm.buttonsDisabled,"loading":_vm.isDenying},on:{"click":_vm.handleDeny}},[_vm._v("\n        "+_vm._s(_vm.denyButtonText)+"\n      ")])],1):_c('div',[_c('gl-form-group',{staticClass:"gl-mb-3",attrs:{"label":_vm.$options.i18n.DENIAL_REASON_LABEL,"label-for":"inline-rejection-reason","optional":true}},[_c('gl-form-textarea',{attrs:{"id":"inline-rejection-reason","placeholder":_vm.$options.i18n.DENIAL_REASON_PLACEHOLDER,"rows":2,"no-resize":true,"submit-on-enter":false,"disabled":_vm.buttonsDisabled,"data-testid":"denial-reason-textarea","autofocus":""},on:{"submit":_vm.submitDenial},model:{value:(_vm.denialReason),callback:function ($$v) {_vm.denialReason=$$v;},expression:"denialReason"}})],1),_vm._v(" "),_c('div',{staticClass:"gl-flex gl-gap-3"},[_c('gl-button',{attrs:{"size":"small","data-testid":"submit-denial","variant":"confirm","disabled":_vm.buttonsDisabled,"loading":_vm.isDenying},on:{"click":_vm.submitDenial}},[_vm._v("\n          "+_vm._s(_vm.denyButtonText)+"\n        ")]),_vm._v(" "),_c('gl-button',{attrs:{"size":"small","data-testid":"cancel-denial","disabled":_vm.buttonsDisabled},on:{"click":_vm.cancelDenial}},[_vm._v("\n          "+_vm._s(_vm.$options.i18n.CANCEL_TEXT)+"\n        ")])],1)],1)]},proxy:true}:null],null,true)},[_vm._v(" "),_vm._l((_vm.messages),function(toolMsg,index){return _c('div',{key:toolMsg.id || index},[_c(_vm.getToolParamsComponent(toolMsg.tool_info && toolMsg.tool_info.name),_vm._b({tag:"component",class:['gl-leading-20', { 'gl-border-t gl-mt-3 gl-border-gray-100 gl-pt-3': index > 0 }],attrs:{"tool-name":toolMsg.tool_info && toolMsg.tool_info.name,"tool-params":_vm.convertKeysToCamelCase((toolMsg.tool_info && toolMsg.tool_info.args) || {}),"tool-response":toolMsg.tool_info && toolMsg.tool_info.tool_response,"working-directory":_vm.workingDirectory}},'component',_vm.convertKeysToCamelCase((toolMsg.tool_info && toolMsg.tool_info.args) || {}),false))],1)})],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/duo-ui",
-  "version": "15.19.0",
+  "version": "15.19.1",
   "description": "Duo UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/agentic_chat/components/agentic_tool_approval_flow/agentic_tool_approval_flow.vue

@@ -66,6 +66,7 @@ export default {
      * @property {string} text - Display text for button/dropdown
      * @property {boolean} primary - Mark as primary action (exactly one required)
      * @property {boolean} disabled - Disable this option (passed through to GitLab UI)
+     * @property {string} [secondaryText] - Secondary text shown below the option (e.g., reason for disabled state)
      */
     approvalOptions: {
       type: Array,
@@ -99,6 +100,9 @@ export default {
           if (option.primary === true && option.disabled === true) {
             return false;
           }
+          if ('secondaryText' in option && typeof option.secondaryText !== 'string') {
+            return false;
+          }
           return true;
         });
       },

package/src/components/agentic_chat/components/agentic_tool_approval_flow/agentic_tool_approval_modal/agentic_tool_approval_modal.vue

@@ -1,5 +1,5 @@
 <script>
-import { GlModal, GlButton, GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { GlModal, GlButton, GlButtonGroup, GlDisclosureDropdown } from '@gitlab/ui';
 import { translate } from '../../../../../utils/i18n';
 import { acceptedApproveToolPayloads } from '../../../../chat/constants';
 
@@ -25,8 +25,8 @@ export default {
   components: {
     GlModal,
     GlButton,
-    GlDropdown,
-    GlDropdownItem,
+    GlButtonGroup,
+    GlDisclosureDropdown,
   },
   props: {
     /**
@@ -88,6 +88,20 @@ export default {
     showSplitButton() {
       return this.safeApprovalOptions.length > 1;
     },
+    approvalDropdownItems() {
+      return this.additionalApprovalOptions.map((option) => ({
+        text: option.text,
+        ...(option.secondaryText ? { secondaryText: option.secondaryText } : {}),
+        extraAttrs: {
+          ...(option.disabled ? { disabled: true } : {}),
+          'data-testid': 'approve-dropdown-item',
+        },
+        action: () => {
+          this.$refs.approvalDropdown?.close();
+          this.handleDropdownSelection(option);
+        },
+      }));
+    },
     denyAction() {
       return {
         text: this.$options.i18n.DENY_TEXT,
@@ -190,26 +204,37 @@ export default {
         </gl-button>
 
         <!-- Split button when multiple options available -->
-        <gl-dropdown
-          v-if="showSplitButton"
-          variant="confirm"
-          size="small"
-          split
-          :text="primaryApprovalOption.text"
-          :disabled="primaryApprovalOption.disabled"
-          right
-          data-testid="approve-dropdown"
-          @click="handlePrimaryApprove"
-        >
-          <gl-dropdown-item
-            v-for="option in additionalApprovalOptions"
-            :key="option.type"
-            :disabled="option.disabled"
-            @click="handleDropdownSelection(option)"
+        <gl-button-group v-if="showSplitButton" data-testid="approve-dropdown">
+          <gl-button
+            variant="confirm"
+            size="small"
+            :disabled="primaryApprovalOption.disabled"
+            data-testid="approve-dropdown-primary"
+            @click="handlePrimaryApprove"
+          >
+            {{ primaryApprovalOption.text }}
+          </gl-button>
+          <gl-disclosure-dropdown
+            ref="approvalDropdown"
+            variant="confirm"
+            category="primary"
+            size="small"
+            no-caret
+            icon="chevron-down"
+            toggle-text="More approval options"
+            text-sr-only
+            placement="bottom-end"
+            :disabled="primaryApprovalOption.disabled"
+            :items="approvalDropdownItems"
           >
-            {{ option.text }}
-          </gl-dropdown-item>
-        </gl-dropdown>
+            <template #list-item="{ item }">
+              <span>{{ item.text }}</span>
+              <span v-if="item.secondaryText" class="gl-block gl-text-sm gl-text-subtle">
+                {{ item.secondaryText }}
+              </span>
+            </template>
+          </gl-disclosure-dropdown>
+        </gl-button-group>
 
         <!-- Simple button when only one option -->
         <gl-button

package/src/components/chat/components/duo_chat_message_tool_approval/message_tool_approval.vue

@@ -1,12 +1,12 @@
 <script>
 import {
   GlButton,
+  GlButtonGroup,
   GlFormTextarea,
   GlFormGroup,
   GlCard,
   GlBadge,
-  GlDropdown,
-  GlDropdownItem,
+  GlDisclosureDropdown,
 } from '@gitlab/ui';
 import { startCase, capitalize } from 'lodash-es';
 import { translate } from '../../../../utils/i18n';
@@ -79,12 +79,12 @@ export default {
   name: 'MessageToolApproval',
   components: {
     GlButton,
+    GlButtonGroup,
     GlCard,
     GlFormTextarea,
     GlFormGroup,
     GlBadge,
-    GlDropdown,
-    GlDropdownItem,
+    GlDisclosureDropdown,
     CreateCommitToolParams,
     DefaultToolParams,
     RunCommandToolParams,
@@ -115,6 +115,7 @@ export default {
      * @property {string} text - The display text for the option
      * @property {boolean} primary - Whether this is the primary option (appears as main button)
      * @property {boolean} disabled - Whether this option is disabled
+     * @property {string} [secondaryText] - Secondary text shown below the option (e.g., reason for disabled state)
      */
     approvalOptions: {
       type: Array,
@@ -129,9 +130,17 @@ export default {
       validator(value) {
         if (!Array.isArray(value)) return false;
         // Must have at least one approve-tool-once option
-        return value.some(
-          (option) => option.type === acceptedApproveToolPayloads.APPROVE_TOOL_ONCE
-        );
+        if (
+          !value.some((option) => option.type === acceptedApproveToolPayloads.APPROVE_TOOL_ONCE)
+        ) {
+          return false;
+        }
+        return value.every((option) => {
+          if ('secondaryText' in option && typeof option.secondaryText !== 'string') {
+            return false;
+          }
+          return true;
+        });
       },
     },
   },
@@ -231,6 +240,20 @@ export default {
     showSplitButton() {
       return this.safeApprovalOptions.length > 1;
     },
+    approvalDropdownItems() {
+      return this.additionalApprovalOptions.map((option) => ({
+        text: option.text,
+        ...(option.secondaryText ? { secondaryText: option.secondaryText } : {}),
+        extraAttrs: {
+          ...(option.disabled ? { disabled: true } : {}),
+          'data-testid': 'approve-dropdown-item',
+        },
+        action: () => {
+          this.$refs.approvalDropdown?.close();
+          this.handleDropdownSelection(option);
+        },
+      }));
+    },
   },
   watch: {
     approvalStatus(newVal) {
@@ -333,27 +356,38 @@ export default {
     <template v-if="!isApproved" #footer>
       <div v-if="!showDenialReason" class="gl-flex gl-gap-2">
         <!-- Split button when multiple approval options available -->
-        <gl-dropdown
-          v-if="showSplitButton"
-          variant="confirm"
-          size="small"
-          split
-          :text="primaryApprovalOption.text"
-          :disabled="buttonsDisabled || primaryApprovalOption.disabled"
-          :loading="isApproving"
-          data-testid="approve-dropdown"
-          @click="handlePrimaryApprove"
-        >
-          <gl-dropdown-item
-            v-for="option in additionalApprovalOptions"
-            :key="option.type"
-            :disabled="option.disabled"
-            data-testid="approve-dropdown-item"
-            @click="handleDropdownSelection(option)"
+        <gl-button-group v-if="showSplitButton" data-testid="approve-dropdown">
+          <gl-button
+            variant="confirm"
+            size="small"
+            :disabled="buttonsDisabled || primaryApprovalOption.disabled"
+            :loading="isApproving"
+            data-testid="approve-dropdown-primary"
+            @click="handlePrimaryApprove"
+          >
+            {{ primaryApprovalOption.text }}
+          </gl-button>
+          <gl-disclosure-dropdown
+            ref="approvalDropdown"
+            variant="confirm"
+            category="primary"
+            size="small"
+            no-caret
+            icon="chevron-down"
+            toggle-text="More approval options"
+            text-sr-only
+            placement="bottom-end"
+            :disabled="buttonsDisabled || primaryApprovalOption.disabled"
+            :items="approvalDropdownItems"
           >
-            {{ option.text }}
-          </gl-dropdown-item>
-        </gl-dropdown>
+            <template #list-item="{ item }">
+              <span>{{ item.text }}</span>
+              <span v-if="item.secondaryText" class="gl-block gl-text-sm gl-text-subtle">
+                {{ item.secondaryText }}
+              </span>
+            </template>
+          </gl-disclosure-dropdown>
+        </gl-button-group>
 
         <!-- Simple button when only one approval option -->
         <gl-button