@gitlab/duo-ui 13.10.1 → 13.10.2

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## [13.10.2](https://gitlab.com/gitlab-org/duo-ui/compare/v13.10.1...v13.10.2) (2025-11-10)
+
+
+### Bug Fixes
+
+* **DuoChat:** Accept both Object and Array for messages prop ([ee52b96](https://gitlab.com/gitlab-org/duo-ui/commit/ee52b96ffc2bf03488e3037165124993ef59ac8f))
+* **DuoChat:** Display all tools in multi-tool approval requests ([49a4bfc](https://gitlab.com/gitlab-org/duo-ui/commit/49a4bfccecf83fe6cfb7b0757a3b00a38140201a))
+
 ## [13.10.1](https://gitlab.com/gitlab-org/duo-ui/compare/v13.10.0...v13.10.1) (2025-11-10)
 
 

package/dist/components/chat/components/duo_chat_conversation/duo_chat_conversation.js

@@ -80,17 +80,37 @@ var script = {
     }
   },
   computed: {
-    isAwaitingToolApproval() {
-      const lastMessage = this.messages[this.messages.length - 1];
-      return Boolean(lastMessage && lastMessage.message_type === 'request' && lastMessage.tool_info);
+    /**
+     * Checks if the last message in the conversation is a tool approval request
+     * @returns {boolean} True if last message is awaiting tool approval
+     */
+    isLastMessageToolApproval() {
+      const lastMsg = this.messages[this.messages.length - 1];
+      return (lastMsg === null || lastMsg === void 0 ? void 0 : lastMsg.message_type) === 'request' && Boolean(lastMsg === null || lastMsg === void 0 ? void 0 : lastMsg.tool_info);
+    },
+    /**
+     * Collects all consecutive tool approval requests at the end of the messages array.
+     * @returns {Array} Array of all pending tool approval requests
+     */
+    pendingToolApprovals() {
+      // Early return if last message isn't a tool request
+      if (!this.isLastMessageToolApproval) {
+        return [];
+      }
+
+      // Find the last non-tool message
+      const lastNonToolIndex = this.messages.findLastIndex(msg => msg.message_type !== 'request' || !msg.tool_info);
+
+      // Slice from after the last non-tool message to the end
+      return this.messages.slice(lastNonToolIndex + 1);
     },
-    lastMessage() {
-      return this.messages[this.messages.length - 1];
+    hasPendingToolApprovals() {
+      return this.pendingToolApprovals.length > 0;
     },
     toolApprovalOptions() {
-      var _this$lastMessage;
-      // Extract approval options from the last message's data
-      return (_this$lastMessage = this.lastMessage) === null || _this$lastMessage === void 0 ? void 0 : _this$lastMessage.approvalOptions;
+      var _this$pendingToolAppr;
+      const lastIndex = this.pendingToolApprovals.length - 1;
+      return (_this$pendingToolAppr = this.pendingToolApprovals[lastIndex]) === null || _this$pendingToolAppr === void 0 ? void 0 : _this$pendingToolAppr.approvalOptions;
     }
   },
   methods: {
@@ -132,7 +152,7 @@ const __vue_script__ = script;
 /* template */
 var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:[
     'gl-flex gl-flex-col gl-justify-end gl-gap-6',
-    { 'insert-code-hidden': !_vm.enableCodeInsertion } ]},[(_vm.showDelimiter)?_c('div',{staticClass:"gl-my-5 gl-flex gl-items-center gl-gap-4 gl-text-gray-500",attrs:{"data-testid":"conversation-delimiter"}},[_c('hr',{staticClass:"gl-grow"}),_vm._v(" "),_c('span',[_vm._v(_vm._s(_vm.$options.i18n.CONVERSATION_NEW_CHAT))]),_vm._v(" "),_c('hr',{staticClass:"gl-grow"})]):_vm._e(),_vm._v(" "),_vm._l((_vm.messages),function(msg,index){return _c('duo-chat-message',{key:((msg.role) + "-" + index),attrs:{"message":msg,"trusted-urls":_vm.trustedUrls,"is-cancelled":_vm.canceledRequestIds.includes(msg.requestId),"with-feedback":_vm.withFeedback,"working-directory":_vm.workingDirectory},on:{"track-feedback":_vm.onTrackFeedback,"insert-code-snippet":_vm.onInsertCodeSnippet,"copy-code-snippet":_vm.onCopyCodeSnippet,"copy-message":_vm.onCopyMessage,"get-context-item-content":_vm.onGetContextItemContent,"open-file-path":_vm.onOpenFilePath}})}),_vm._v(" "),(_vm.isAwaitingToolApproval)?_c('duo-chat-message-tool-approval',{attrs:{"message":_vm.lastMessage,"is-processing":_vm.isToolApprovalProcessing,"approval-options":_vm.toolApprovalOptions},on:{"approve-tool":_vm.onApproveToolCall,"deny-tool":_vm.onDenyToolCall}}):_vm._e()],2)};
+    { 'insert-code-hidden': !_vm.enableCodeInsertion } ]},[(_vm.showDelimiter)?_c('div',{staticClass:"gl-my-5 gl-flex gl-items-center gl-gap-4 gl-text-gray-500",attrs:{"data-testid":"conversation-delimiter"}},[_c('hr',{staticClass:"gl-grow"}),_vm._v(" "),_c('span',[_vm._v(_vm._s(_vm.$options.i18n.CONVERSATION_NEW_CHAT))]),_vm._v(" "),_c('hr',{staticClass:"gl-grow"})]):_vm._e(),_vm._v(" "),_vm._l((_vm.messages),function(msg,index){return _c('duo-chat-message',{key:((msg.role) + "-" + index),attrs:{"message":msg,"trusted-urls":_vm.trustedUrls,"is-cancelled":_vm.canceledRequestIds.includes(msg.requestId),"with-feedback":_vm.withFeedback,"working-directory":_vm.workingDirectory},on:{"track-feedback":_vm.onTrackFeedback,"insert-code-snippet":_vm.onInsertCodeSnippet,"copy-code-snippet":_vm.onCopyCodeSnippet,"copy-message":_vm.onCopyMessage,"get-context-item-content":_vm.onGetContextItemContent,"open-file-path":_vm.onOpenFilePath}})}),_vm._v(" "),(_vm.hasPendingToolApprovals)?_c('duo-chat-message-tool-approval',{attrs:{"messages":_vm.pendingToolApprovals,"is-processing":_vm.isToolApprovalProcessing,"approval-options":_vm.toolApprovalOptions},on:{"approve-tool":_vm.onApproveToolCall,"deny-tool":_vm.onDenyToolCall}}):_vm._e()],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/chat/components/duo_chat_message/message_types/message_tool.js

@@ -177,9 +177,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('base-message',{attrs:{"message":_vm.message},scopedSlots:_vm._u([{key:"message",fn:function(ref){
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.requiresApproval)?_c('message-tool-approval',{attrs:{"messages":[_vm.message],"working-directory":_vm.workingDirectory,"approval-status":"approved"}}):_c('base-message',{attrs:{"message":_vm.message},scopedSlots:_vm._u([{key:"message",fn:function(ref){
 var content = ref.content;
-return [(_vm.requiresApproval)?_c('message-tool-approval',{attrs:{"message":_vm.message,"working-directory":_vm.workingDirectory,"approval-status":"approved"}}):_c('div',{staticClass:"gl-border gl-flex-col gl-rounded-lg gl-border-default gl-p-4"},[_c('div',{staticClass:"gl-flex gl-flex-col gl-gap-2 gl-text-base gl-text-subtle"},[_c('div',{staticClass:"gl-flex gl-items-start gl-gap-x-3"},[_c('div',{staticClass:"gl-mt-1 gl-flex gl-flex-shrink-0"},[_c('gl-icon',{attrs:{"name":_vm.iconName}})],1),_vm._v(" "),_c('div',{staticClass:"gl-flex gl-min-w-0 gl-grow gl-flex-wrap gl-items-center gl-gap-x-2"},[_c('span',{attrs:{"data-testid":"tool-message-content"}},[_vm._v(_vm._s(content))]),_vm._v(" "),(_vm.shouldShowFilePath)?_c('gl-link',{staticClass:"file-path-link gl-min-w-0 gl-break-all gl-font-monospace",attrs:{"data-testid":"tool-message-file-path-link"},on:{"click":function($event){$event.preventDefault();return _vm.onOpenFilePath(_vm.messageFilePath)}}},[_c('code',{staticClass:"gl-rounded-base gl-px-2 gl-py-1 gl-text-default"},[_vm._v(_vm._s(_vm.messageFilePath))])]):_vm._e()],1),_vm._v(" "),(_vm.shouldShowDetails)?_c('gl-button',{staticClass:"-gl-mt-1",attrs:{"category":"tertiary","size":"small","icon":_vm.collapseIconName,"aria-label":_vm.isDetailsOpen ? _vm.$options.i18n.COLLAPSE_DETAILS : _vm.$options.i18n.EXPAND_DETAILS,"data-testid":"tool-message-toggle-button"},on:{"click":_vm.toggleDetails}}):_vm._e()],1),_vm._v(" "),(_vm.hasMetadataToShow)?_c('div',{staticClass:"gl-ml-5 gl-flex gl-flex-wrap gl-gap-2 gl-text-sm"},[(_vm.shouldShowProjectId)?_c('div',{staticClass:"gl-flex gl-min-w-0 gl-gap-x-2 gl-rounded-full gl-bg-strong gl-px-3",attrs:{"data-testid":"tool-message-project-info"}},[_c('span',{staticClass:"gl-whitespace-nowrap"},[_vm._v(_vm._s(_vm.$options.i18n.PROJECT_LABEL)+":")]),_vm._v(" "),_c('span',{staticClass:"gl-truncate",attrs:{"data-testid":"tool-message-project-id"}},[_vm._v(_vm._s(_vm.projectId))])]):_vm._e(),_vm._v(" "),(_vm.shouldShowBranch)?_c('div',{staticClass:"gl-flex gl-min-w-0 gl-gap-x-2 gl-rounded-full gl-bg-strong gl-px-3",attrs:{"data-testid":"tool-message-branch-info"}},[_c('span',{staticClass:"gl-whitespace-nowrap"},[_vm._v(_vm._s(_vm.$options.i18n.BRANCH_LABEL)+":")]),_vm._v(" "),_c('span',{staticClass:"gl-truncate",attrs:{"data-testid":"tool-message-branch-name"}},[_vm._v(_vm._s(_vm.branchName))])]):_vm._e(),_vm._v(" "),(_vm.shouldShowStartBranch)?_c('div',{staticClass:"gl-flex gl-min-w-0 gl-gap-x-2 gl-rounded-full gl-bg-strong gl-px-3",attrs:{"data-testid":"tool-message-start-branch-info"}},[_c('span',{staticClass:"gl-whitespace-nowrap"},[_vm._v(_vm._s(_vm.$options.i18n.START_BRANCH_LABEL)+":")]),_vm._v(" "),_c('span',{staticClass:"gl-truncate",attrs:{"data-testid":"tool-message-start-branch-name"}},[_vm._v(_vm._s(_vm.startBranch))])]):_vm._e()]):_vm._e()]),_vm._v(" "),(_vm.shouldShowDetails)?_c('gl-collapse',{staticClass:"gl-overflow-hidden",attrs:{"visible":_vm.isDetailsOpen}},[_c('message-tool-details',{attrs:{"message":_vm.message,"is-expanded":_vm.isDetailsOpen},on:{"copy-code-snippet":_vm.onCopyCodeSnippet}})],1):_vm._e()],1)]}}])})};
+return [_c('div',{staticClass:"gl-border gl-flex-col gl-rounded-lg gl-border-default gl-p-4"},[_c('div',{staticClass:"gl-flex gl-flex-col gl-gap-2 gl-text-base gl-text-subtle"},[_c('div',{staticClass:"gl-flex gl-items-start gl-gap-x-3"},[_c('div',{staticClass:"gl-mt-1 gl-flex gl-flex-shrink-0"},[_c('gl-icon',{attrs:{"name":_vm.iconName}})],1),_vm._v(" "),_c('div',{staticClass:"gl-flex gl-min-w-0 gl-grow gl-flex-wrap gl-items-center gl-gap-x-2"},[_c('span',{attrs:{"data-testid":"tool-message-content"}},[_vm._v(_vm._s(content))]),_vm._v(" "),(_vm.shouldShowFilePath)?_c('gl-link',{staticClass:"file-path-link gl-min-w-0 gl-break-all gl-font-monospace",attrs:{"data-testid":"tool-message-file-path-link"},on:{"click":function($event){$event.preventDefault();return _vm.onOpenFilePath(_vm.messageFilePath)}}},[_c('code',{staticClass:"gl-rounded-base gl-px-2 gl-py-1 gl-text-default"},[_vm._v(_vm._s(_vm.messageFilePath))])]):_vm._e()],1),_vm._v(" "),(_vm.shouldShowDetails)?_c('gl-button',{staticClass:"-gl-mt-1",attrs:{"category":"tertiary","size":"small","icon":_vm.collapseIconName,"aria-label":_vm.isDetailsOpen ? _vm.$options.i18n.COLLAPSE_DETAILS : _vm.$options.i18n.EXPAND_DETAILS,"data-testid":"tool-message-toggle-button"},on:{"click":_vm.toggleDetails}}):_vm._e()],1),_vm._v(" "),(_vm.hasMetadataToShow)?_c('div',{staticClass:"gl-ml-5 gl-flex gl-flex-wrap gl-gap-2 gl-text-sm"},[(_vm.shouldShowProjectId)?_c('div',{staticClass:"gl-flex gl-min-w-0 gl-gap-x-2 gl-rounded-full gl-bg-strong gl-px-3",attrs:{"data-testid":"tool-message-project-info"}},[_c('span',{staticClass:"gl-whitespace-nowrap"},[_vm._v(_vm._s(_vm.$options.i18n.PROJECT_LABEL)+":")]),_vm._v(" "),_c('span',{staticClass:"gl-truncate",attrs:{"data-testid":"tool-message-project-id"}},[_vm._v(_vm._s(_vm.projectId))])]):_vm._e(),_vm._v(" "),(_vm.shouldShowBranch)?_c('div',{staticClass:"gl-flex gl-min-w-0 gl-gap-x-2 gl-rounded-full gl-bg-strong gl-px-3",attrs:{"data-testid":"tool-message-branch-info"}},[_c('span',{staticClass:"gl-whitespace-nowrap"},[_vm._v(_vm._s(_vm.$options.i18n.BRANCH_LABEL)+":")]),_vm._v(" "),_c('span',{staticClass:"gl-truncate",attrs:{"data-testid":"tool-message-branch-name"}},[_vm._v(_vm._s(_vm.branchName))])]):_vm._e(),_vm._v(" "),(_vm.shouldShowStartBranch)?_c('div',{staticClass:"gl-flex gl-min-w-0 gl-gap-x-2 gl-rounded-full gl-bg-strong gl-px-3",attrs:{"data-testid":"tool-message-start-branch-info"}},[_c('span',{staticClass:"gl-whitespace-nowrap"},[_vm._v(_vm._s(_vm.$options.i18n.START_BRANCH_LABEL)+":")]),_vm._v(" "),_c('span',{staticClass:"gl-truncate",attrs:{"data-testid":"tool-message-start-branch-name"}},[_vm._v(_vm._s(_vm.startBranch))])]):_vm._e()]):_vm._e()]),_vm._v(" "),(_vm.shouldShowDetails)?_c('gl-collapse',{staticClass:"gl-overflow-hidden",attrs:{"visible":_vm.isDetailsOpen}},[_c('message-tool-details',{attrs:{"message":_vm.message,"is-expanded":_vm.isDetailsOpen},on:{"copy-code-snippet":_vm.onCopyCodeSnippet}})],1):_vm._e()],1)]}}])})};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -50,7 +50,8 @@ const i18n = {
   [TOOL_STATUS.Pending]: translate('MessageToolApproval.toolStatusPending', 'Pending'),
   [TOOL_STATUS.Approved]: translate('MessageToolApproval.toolStatusApproved', 'Approved'),
   TOGGLE_PARAMS_BUTTON_EXPAND: translate('MessageToolApproval.collapseButtonCollapsed', 'Display tool details'),
-  TOGGLE_PARAMS_BUTTON_COLLAPSE: translate('MessageToolApproval.collapseButtonExpanded', 'Hide tool details')
+  TOGGLE_PARAMS_BUTTON_COLLAPSE: translate('MessageToolApproval.collapseButtonExpanded', 'Hide tool details'),
+  MULTI_TOOL_TITLE: translate('MessageToolApproval.multiToolTitle', 'Duo wants to execute %{count} tools.')
 };
 const TOOL_PARAMS_VIEW_COMPONENTS = {
   [APPROVAL_TOOL_NAMES.createCommit]: 'CreateCommitToolParams',
@@ -84,9 +85,9 @@ var script = {
     PreBlock
   },
   props: {
-    message: {
+    messages: {
       required: true,
-      type: Object
+      type: Array
     },
     workingDirectory: {
       type: String,
@@ -134,17 +135,23 @@ var script = {
     };
   },
   computed: {
+    multipleApprovalsNeeded() {
+      return this.messages.length > 1;
+    },
+    primaryMessage() {
+      return this.messages[0] || null;
+    },
     toolName() {
-      var _this$message, _this$message$tool_in;
-      return ((_this$message = this.message) === null || _this$message === void 0 ? void 0 : (_this$message$tool_in = _this$message.tool_info) === null || _this$message$tool_in === void 0 ? void 0 : _this$message$tool_in.name) || this.$options.i18n.TOOL_UNKNOWN;
+      var _this$primaryMessage, _this$primaryMessage$;
+      return ((_this$primaryMessage = this.primaryMessage) === null || _this$primaryMessage === void 0 ? void 0 : (_this$primaryMessage$ = _this$primaryMessage.tool_info) === null || _this$primaryMessage$ === void 0 ? void 0 : _this$primaryMessage$.name) || this.$options.i18n.TOOL_UNKNOWN;
     },
     toolParameters() {
-      var _this$message2, _this$message2$tool_i;
-      return ((_this$message2 = this.message) === null || _this$message2 === void 0 ? void 0 : (_this$message2$tool_i = _this$message2.tool_info) === null || _this$message2$tool_i === void 0 ? void 0 : _this$message2$tool_i.args) || {};
+      var _this$primaryMessage2, _this$primaryMessage3;
+      return ((_this$primaryMessage2 = this.primaryMessage) === null || _this$primaryMessage2 === void 0 ? void 0 : (_this$primaryMessage3 = _this$primaryMessage2.tool_info) === null || _this$primaryMessage3 === void 0 ? void 0 : _this$primaryMessage3.args) || {};
     },
     toolResponse() {
-      var _this$message3, _this$message3$tool_i;
-      return (_this$message3 = this.message) === null || _this$message3 === void 0 ? void 0 : (_this$message3$tool_i = _this$message3.tool_info) === null || _this$message3$tool_i === void 0 ? void 0 : _this$message3$tool_i.tool_response;
+      var _this$primaryMessage4, _this$primaryMessage5;
+      return (_this$primaryMessage4 = this.primaryMessage) === null || _this$primaryMessage4 === void 0 ? void 0 : (_this$primaryMessage5 = _this$primaryMessage4.tool_info) === null || _this$primaryMessage5 === void 0 ? void 0 : _this$primaryMessage5.tool_response;
     },
     camelCaseToolParameters() {
       return convertKeysToCamelCase(this.toolParameters);
@@ -153,6 +160,12 @@ var script = {
       return Object.keys(this.toolParameters).length > 0;
     },
     toolApprovalTitle() {
+      // Multiple tools: show generic count message
+      if (this.multipleApprovalsNeeded) {
+        return this.$options.i18n.MULTI_TOOL_TITLE.replace('%{count}', this.messages.length);
+      }
+
+      // Single tool: show specific tool message
       return i18n.TOOL_APPROVAL_TITLES[this.toolName] || this.toolName;
     },
     toolStatusLabel() {
@@ -262,6 +275,12 @@ var script = {
       this.localProcessingState = PROCESSING_STATE.NONE;
       this.showDenialReason = false;
       this.denialReason = '';
+    },
+    convertKeysToCamelCase(obj) {
+      return convertKeysToCamelCase(obj);
+    },
+    getToolParamsComponent(toolName) {
+      return TOOL_PARAMS_VIEW_COMPONENTS[toolName];
     }
   },
   i18n,
@@ -272,7 +291,11 @@ 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',[(_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.toolParamsViewComponent)?_c(_vm.toolParamsViewComponent,_vm._b({tag:"component",staticClass:"gl-leading-20",attrs:{"tool-name":_vm.toolName,"tool-params":_vm.camelCaseToolParameters,"tool-response":_vm.toolResponse,"working-directory":_vm.workingDirectory}},'component',_vm.camelCaseToolParameters,false)):_c('figure',{staticClass:"gl-m-0 gl-flex gl-flex-col gl-gap-2"},[_c('figcaption',{staticClass:"gl-text-subtle"},[_vm._v("\n      "+_vm._s(_vm.$options.i18n.REQUEST_TEXT)+"\n    ")]),_vm._v(" "),(_vm.hasToolParameters)?_c('pre-block',{attrs:{"data-testid":"tool-parameters"}},[_vm._v(_vm._s(JSON.stringify(_vm.toolParameters, null, 2)))]):_c('span',{staticClass:"gl-text-sm gl-text-gray-500",attrs:{"data-testid":"no-parameters-message"}},[_vm._v("\n      "+_vm._s(_vm.$options.i18n.NO_PARAMETERS_TEXT)+"\n    ")])],1)],1)};
+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',[(_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},[(_vm.getToolParamsComponent(toolMsg.tool_info && toolMsg.tool_info.name))?_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)):_c('figure',{staticClass:"gl-m-0 gl-flex gl-flex-col gl-gap-2",class:{ 'gl-border-t gl-mt-3 gl-border-gray-100 gl-pt-3': index > 0 }},[_c('figcaption',{staticClass:"gl-text-subtle"},[_vm._v("\n        "+_vm._s(_vm.$options.i18n.REQUEST_TEXT)+"\n      ")]),_vm._v(" "),(
+          toolMsg.tool_info &&
+          toolMsg.tool_info.args &&
+          Object.keys(toolMsg.tool_info.args).length > 0
+        )?_c('pre-block',{attrs:{"data-testid":"tool-parameters"}},[_vm._v(_vm._s(JSON.stringify(toolMsg.tool_info.args, null, 2)))]):_c('span',{staticClass:"gl-text-sm gl-text-gray-500",attrs:{"data-testid":"no-parameters-message"}},[_vm._v("\n        "+_vm._s(_vm.$options.i18n.NO_PARAMETERS_TEXT)+"\n      ")])],1)],1)})],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/package.json

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

package/src/components/chat/components/duo_chat_conversation/duo_chat_conversation.vue

@@ -82,18 +82,38 @@ export default {
     },
   },
   computed: {
-    isAwaitingToolApproval() {
-      const lastMessage = this.messages[this.messages.length - 1];
-      return Boolean(
-        lastMessage && lastMessage.message_type === 'request' && lastMessage.tool_info
+    /**
+     * Checks if the last message in the conversation is a tool approval request
+     * @returns {boolean} True if last message is awaiting tool approval
+     */
+    isLastMessageToolApproval() {
+      const lastMsg = this.messages[this.messages.length - 1];
+      return lastMsg?.message_type === 'request' && Boolean(lastMsg?.tool_info);
+    },
+    /**
+     * Collects all consecutive tool approval requests at the end of the messages array.
+     * @returns {Array} Array of all pending tool approval requests
+     */
+    pendingToolApprovals() {
+      // Early return if last message isn't a tool request
+      if (!this.isLastMessageToolApproval) {
+        return [];
+      }
+
+      // Find the last non-tool message
+      const lastNonToolIndex = this.messages.findLastIndex(
+        (msg) => msg.message_type !== 'request' || !msg.tool_info
       );
+
+      // Slice from after the last non-tool message to the end
+      return this.messages.slice(lastNonToolIndex + 1);
     },
-    lastMessage() {
-      return this.messages[this.messages.length - 1];
+    hasPendingToolApprovals() {
+      return this.pendingToolApprovals.length > 0;
     },
     toolApprovalOptions() {
-      // Extract approval options from the last message's data
-      return this.lastMessage?.approvalOptions;
+      const lastIndex = this.pendingToolApprovals.length - 1;
+      return this.pendingToolApprovals[lastIndex]?.approvalOptions;
     },
   },
   methods: {
@@ -161,8 +181,8 @@ export default {
       @open-file-path="onOpenFilePath"
     />
     <duo-chat-message-tool-approval
-      v-if="isAwaitingToolApproval"
-      :message="lastMessage"
+      v-if="hasPendingToolApprovals"
+      :messages="pendingToolApprovals"
       :is-processing="isToolApprovalProcessing"
       :approval-options="toolApprovalOptions"
       @approve-tool="onApproveToolCall"

package/src/components/chat/components/duo_chat_message/message_types/message_tool.vue

@@ -171,15 +171,15 @@ export default {
 };
 </script>
 <template>
-  <base-message :message="message">
+  <message-tool-approval
+    v-if="requiresApproval"
+    :messages="[message]"
+    :working-directory="workingDirectory"
+    approval-status="approved"
+  />
+  <base-message v-else :message="message">
     <template #message="{ content }">
-      <message-tool-approval
-        v-if="requiresApproval"
-        :message="message"
-        :working-directory="workingDirectory"
-        approval-status="approved"
-      />
-      <div v-else class="gl-border gl-flex-col gl-rounded-lg gl-border-default gl-p-4">
+      <div class="gl-border gl-flex-col gl-rounded-lg gl-border-default gl-p-4">
         <div class="gl-flex gl-flex-col gl-gap-2 gl-text-base gl-text-subtle">
           <div class="gl-flex gl-items-start gl-gap-x-3">
             <div class="gl-mt-1 gl-flex gl-flex-shrink-0">

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

@@ -115,6 +115,10 @@ export const i18n = {
     'MessageToolApproval.collapseButtonExpanded',
     'Hide tool details'
   ),
+  MULTI_TOOL_TITLE: translate(
+    'MessageToolApproval.multiToolTitle',
+    'Duo wants to execute %{count} tools.'
+  ),
 };
 
 const TOOL_PARAMS_VIEW_COMPONENTS = {
@@ -150,9 +154,9 @@ export default {
     PreBlock,
   },
   props: {
-    message: {
+    messages: {
       required: true,
-      type: Object,
+      type: Array,
     },
     workingDirectory: {
       type: String,
@@ -204,14 +208,20 @@ export default {
     };
   },
   computed: {
+    multipleApprovalsNeeded() {
+      return this.messages.length > 1;
+    },
+    primaryMessage() {
+      return this.messages[0] || null;
+    },
     toolName() {
-      return this.message?.tool_info?.name || this.$options.i18n.TOOL_UNKNOWN;
+      return this.primaryMessage?.tool_info?.name || this.$options.i18n.TOOL_UNKNOWN;
     },
     toolParameters() {
-      return this.message?.tool_info?.args || {};
+      return this.primaryMessage?.tool_info?.args || {};
     },
     toolResponse() {
-      return this.message?.tool_info?.tool_response;
+      return this.primaryMessage?.tool_info?.tool_response;
     },
     camelCaseToolParameters() {
       return convertKeysToCamelCase(this.toolParameters);
@@ -220,6 +230,12 @@ export default {
       return Object.keys(this.toolParameters).length > 0;
     },
     toolApprovalTitle() {
+      // Multiple tools: show generic count message
+      if (this.multipleApprovalsNeeded) {
+        return this.$options.i18n.MULTI_TOOL_TITLE.replace('%{count}', this.messages.length);
+      }
+
+      // Single tool: show specific tool message
       return i18n.TOOL_APPROVAL_TITLES[this.toolName] || this.toolName;
     },
     toolStatusLabel() {
@@ -327,6 +343,12 @@ export default {
       this.showDenialReason = false;
       this.denialReason = '';
     },
+    convertKeysToCamelCase(obj) {
+      return convertKeysToCamelCase(obj);
+    },
+    getToolParamsComponent(toolName) {
+      return TOOL_PARAMS_VIEW_COMPONENTS[toolName];
+    },
   },
   i18n,
   APPROVAL_TOOL_NAMES,
@@ -361,27 +383,39 @@ export default {
         </gl-badge>
       </div>
     </template>
-    <component
-      :is="toolParamsViewComponent"
-      v-if="toolParamsViewComponent"
-      class="gl-leading-20"
-      :tool-name="toolName"
-      :tool-params="camelCaseToolParameters"
-      :tool-response="toolResponse"
-      :working-directory="workingDirectory"
-      v-bind="camelCaseToolParameters"
-    />
-    <figure v-else class="gl-m-0 gl-flex gl-flex-col gl-gap-2">
-      <figcaption class="gl-text-subtle">
-        {{ $options.i18n.REQUEST_TEXT }}
-      </figcaption>
-      <pre-block v-if="hasToolParameters" data-testid="tool-parameters">{{
-        JSON.stringify(toolParameters, null, 2)
-      }}</pre-block>
-      <span v-else class="gl-text-sm gl-text-gray-500" data-testid="no-parameters-message">
-        {{ $options.i18n.NO_PARAMETERS_TEXT }}
-      </span>
-    </figure>
+    <div v-for="(toolMsg, index) in messages" :key="toolMsg.id || index">
+      <component
+        :is="getToolParamsComponent(toolMsg.tool_info && toolMsg.tool_info.name)"
+        v-if="getToolParamsComponent(toolMsg.tool_info && toolMsg.tool_info.name)"
+        :class="['gl-leading-20', { 'gl-border-t gl-mt-3 gl-border-gray-100 gl-pt-3': index > 0 }]"
+        :tool-name="toolMsg.tool_info && toolMsg.tool_info.name"
+        :tool-params="convertKeysToCamelCase((toolMsg.tool_info && toolMsg.tool_info.args) || {})"
+        v-bind="convertKeysToCamelCase((toolMsg.tool_info && toolMsg.tool_info.args) || {})"
+        :tool-response="toolMsg.tool_info && toolMsg.tool_info.tool_response"
+        :working-directory="workingDirectory"
+      />
+      <figure
+        v-else
+        class="gl-m-0 gl-flex gl-flex-col gl-gap-2"
+        :class="{ 'gl-border-t gl-mt-3 gl-border-gray-100 gl-pt-3': index > 0 }"
+      >
+        <figcaption class="gl-text-subtle">
+          {{ $options.i18n.REQUEST_TEXT }}
+        </figcaption>
+        <pre-block
+          v-if="
+            toolMsg.tool_info &&
+            toolMsg.tool_info.args &&
+            Object.keys(toolMsg.tool_info.args).length > 0
+          "
+          data-testid="tool-parameters"
+          >{{ JSON.stringify(toolMsg.tool_info.args, null, 2) }}</pre-block
+        >
+        <span v-else class="gl-text-sm gl-text-gray-500" data-testid="no-parameters-message">
+          {{ $options.i18n.NO_PARAMETERS_TEXT }}
+        </span>
+      </figure>
+    </div>
     <template v-if="!isApproved" #footer>
       <div v-if="!showDenialReason" class="gl-flex gl-gap-2">
         <!-- Split button when multiple approval options available -->

package/translations.js

@@ -163,6 +163,7 @@ export default {
     "Tell Duo why you're rejecting this tool execution...",
   'MessageToolApproval.denyText': 'Deny',
   'MessageToolApproval.denyingText': 'Denying...',
+  'MessageToolApproval.multiToolTitle': 'Duo wants to execute %{count} tools.',
   'MessageToolApproval.noParametersText': 'No parameters will be sent with this request.',
   'MessageToolApproval.parametersText': 'Request parameters',
   'MessageToolApproval.runCommand': 'Duo wants to run a command.',