@gitlab/duo-ui 10.22.1 → 10.23.1

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 } from '@gitlab/ui';
+import { GlModal, GlButton, GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import { translate } from '../../../../../utils/i18n';
 
 export const i18n = {
@@ -11,6 +11,11 @@ export const i18n = {
   TOOL_LABEL: translate('AgenticToolApprovalModal.toolLabel', 'Tool:'),
   TOOL_UNKNOWN: translate('AgenticToolApprovalModal.toolUnknown', 'Unknown'),
   APPROVE_TEXT: translate('AgenticToolApprovalModal.approveText', 'Approve'),
+  APPROVE_ONCE_TEXT: translate('AgenticToolApprovalModal.approveOnceText', 'Approve Once'),
+  APPROVE_ALL_TEXT: translate(
+    'AgenticToolApprovalModal.approveAllText',
+    'Always approve this tool'
+  ),
   DENY_TEXT: translate('AgenticToolApprovalModal.denyText', 'Deny'),
 };
 
@@ -18,6 +23,9 @@ export default {
   name: 'AgenticToolApprovalModal',
   components: {
     GlModal,
+    GlButton,
+    GlDropdown,
+    GlDropdownItem,
   },
   props: {
     /**
@@ -48,18 +56,36 @@ export default {
       required: false,
       default: i18n.DEFAULT_DESCRIPTION,
     },
+    approvalOptions: {
+      type: Array,
+      required: false,
+      default: () => [
+        {
+          type: 'approve-tool-once',
+          text: 'Approve',
+          primary: true,
+        },
+      ],
+    },
+  },
+  data() {
+    return {
+      isApprovalAction: false,
+    };
   },
   computed: {
-    approveAction() {
-      return {
-        text: this.$options.i18n.APPROVE_TEXT,
-        attributes: {
-          variant: 'confirm',
-          icon: 'play',
-          size: 'small',
-          'data-testid': 'approve-tool',
-        },
-      };
+    safeApprovalOptions() {
+      return this.approvalOptions || [];
+    },
+    primaryApprovalOption() {
+      const primary = this.safeApprovalOptions.find((option) => option.primary === true);
+      return primary || this.safeApprovalOptions[0] || {};
+    },
+    additionalApprovalOptions() {
+      return this.safeApprovalOptions.filter((option) => option.primary !== true);
+    },
+    showSplitButton() {
+      return this.safeApprovalOptions.length > 1;
     },
     denyAction() {
       return {
@@ -77,11 +103,28 @@ export default {
     },
   },
   methods: {
+    handlePrimaryApprove() {
+      /**
+       * Emitted when the user clicks the primary approve button
+       */
+      this.isApprovalAction = true;
+      this.$emit('approve', { type: this.primaryApprovalOption.type });
+    },
+    handleDropdownSelection(option) {
+      /**
+       * Emitted when the user selects an option from the dropdown
+       * @param {Object} option - The selected dropdown option
+       */
+      this.isApprovalAction = true;
+      this.$emit('approve', { type: option.type });
+    },
     handleApprove() {
       /**
+       * Legacy method for backwards compatibility - defaults to 'approve-tool-once' approval
        * Emitted when the user approves the tool execution
        */
-      this.$emit('approve');
+      this.isApprovalAction = true;
+      this.$emit('approve', { type: 'approve-tool-once' });
     },
     handleDeny() {
       /**
@@ -90,6 +133,12 @@ export default {
       this.$emit('deny');
     },
     handleModalHide(event) {
+      // If the modal is being hidden by an approval action, don't emit deny-force
+      if (this.isApprovalAction) {
+        this.isApprovalAction = false;
+        return;
+      }
+
       // If the modal is being hidden by the X button or ESC key,
       // treat it as a deny-force action
       if (event.trigger !== 'ok' && event.trigger !== 'cancel') {
@@ -106,13 +155,11 @@ export default {
     :visible="visible"
     modal-id="agentic-tool-approval-modal"
     :title="$options.i18n.TITLE"
-    :action-primary="approveAction"
-    :action-cancel="denyAction"
+    :action-primary="null"
+    :action-cancel="null"
     :no-close-on-backdrop="true"
     :no-close-on-esc="true"
     data-testid="agentic-tool-approval-modal"
-    @primary="handleApprove"
-    @canceled="handleDeny"
     @hide="handleModalHide"
   >
     <div class="gl-mb-4">
@@ -134,5 +181,47 @@ export default {
         >
       </div>
     </div>
+
+    <template #modal-footer>
+      <div class="gl-flex gl-justify-end gl-gap-3">
+        <gl-button v-bind="denyAction.attributes" @click="handleDeny">
+          {{ denyAction.text }}
+        </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)"
+          >
+            {{ option.text }}
+          </gl-dropdown-item>
+        </gl-dropdown>
+
+        <!-- Simple button when only one option -->
+        <gl-button
+          v-else
+          variant="confirm"
+          size="small"
+          :disabled="primaryApprovalOption.disabled"
+          data-testid="approve-button"
+          @click="handlePrimaryApprove"
+        >
+          {{ primaryApprovalOption.text }}
+        </gl-button>
+      </div>
+    </template>
   </gl-modal>
 </template>

package/src/components/chat/components/duo_chat_header/duo_chat_header.vue

@@ -3,10 +3,10 @@ import Vue from 'vue';
 import {
   GlAlert,
   GlBadge,
-  GlAvatar,
   GlButton,
   GlDropdown,
   GlDropdownItem,
+  GlExperimentBadge,
   GlSafeHtmlDirective as SafeHtml,
   GlTooltipDirective,
   GlToast,
@@ -43,10 +43,10 @@ export default {
   components: {
     GlAlert,
     GlBadge,
-    GlAvatar,
     GlButton,
     GlDropdown,
     GlDropdownItem,
+    GlExperimentBadge,
     GlDisclosureDropdown,
   },
   directives: {
@@ -140,31 +140,19 @@ export default {
 
 <template>
   <header data-testid="chat-header" class="gl-border-b gl-shrink-0 gl-bg-default gl-p-0">
-    <div class="gl-border-b gl-flex gl-w-full gl-items-center gl-px-5 gl-py-3">
-      <h4
-        v-if="subtitle"
-        class="gl-mb-0 gl-shrink-0 gl-overflow-hidden gl-text-ellipsis gl-whitespace-nowrap gl-pr-3 gl-text-sm gl-font-normal gl-text-subtle"
-        data-testid="chat-subtitle"
-      >
-        {{ subtitle }}
-      </h4>
-      <gl-button
-        category="tertiary"
-        variant="default"
-        icon="close"
-        size="small"
-        class="gl-ml-auto"
-        data-testid="chat-close-button"
-        :aria-label="$options.i18n.CHAT_CLOSE_LABEL"
-        @click="$emit('close')"
-      />
-    </div>
     <div class="drawer-title gl-flex gl-items-center gl-justify-start gl-p-5">
-      <div class="gl-flex gl-flex-1 gl-overflow-hidden">
-        <gl-avatar :size="32" :entity-name="title" shape="circle" class="gl-mr-3" />
+      <div class="gl-flex-1 gl-overflow-hidden">
         <div class="gl-flex gl-items-center">
-          <h3 class="gl-my-0 gl-text-[0.875rem]">{{ title }}</h3>
+          <h3 class="gl-my-0 gl-text-size-h2">{{ title }}</h3>
+          <gl-experiment-badge v-if="badgeType" :type="badgeType" container-id="chat-component" />
         </div>
+        <h4
+          v-if="subtitle"
+          class="gl-mb-0 gl-overflow-hidden gl-text-ellipsis gl-whitespace-nowrap gl-pr-3 gl-text-sm gl-font-normal gl-text-subtle"
+          data-testid="chat-subtitle"
+        >
+          {{ subtitle }}
+        </h4>
       </div>
 
       <div class="gl-flex gl-gap-3">
@@ -254,6 +242,16 @@ export default {
             </span>
           </gl-dropdown-item>
         </gl-dropdown>
+        <gl-button
+          category="tertiary"
+          variant="default"
+          icon="close"
+          size="small"
+          class="gl-ml-auto"
+          data-testid="chat-close-button"
+          :aria-label="$options.i18n.CHAT_CLOSE_LABEL"
+          @click="$emit('close')"
+        />
       </div>
     </div>
 

package/src/components/chat/duo_chat.scss

@@ -141,6 +141,7 @@ $drawer-width: 400px;
   overflow: hidden;
   background: var(--gl-control-background-color-default);
   box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-control-border-color-default);
+  border-radius: px-to-rem(20px);
 
   &:focus-within {
     @include gl-focus($color: var(--gl-control-border-color-focus));
@@ -151,6 +152,7 @@ $drawer-width: 400px;
     resize: none;
     max-height: 240px;
     padding-right: 40px;
+    border-radius: px-to-rem(20px);
   }
 
   &::after {
@@ -158,7 +160,6 @@ $drawer-width: 400px;
     @apply gl-invisible;
     @apply gl-p-4;
     @apply gl-font-regular;
-    @apply gl-absolute;
     padding-right: 40px;
     word-break: break-word;
   }