@gitlab/duo-ui 11.1.2 → 11.2.1

package/src/components/agentic_chat/web_agentic_duo_chat.vue

@@ -450,6 +450,13 @@ export default {
     activeThreadTitleForView() {
       return (this.currentView === VIEW_TYPES.CHAT && this.activeThreadTitle) || '';
     },
+    hasFooterControls() {
+      return (
+        this.$scopedSlots?.['footer-controls'] &&
+        typeof this.$scopedSlots['footer-controls'] === 'function' &&
+        this.$scopedSlots['footer-controls']()
+      );
+    },
   },
   watch: {
     multiThreadedView(newView) {
@@ -866,7 +873,7 @@ export default {
         </div>
 
         <div
-          class="duo-chat-input gl-min-h-8 gl-max-w-full gl-grow gl-flex-col gl-rounded-bl-[12px] gl-rounded-br-[18px] gl-rounded-tl-[12px] gl-rounded-tr-[12px] gl-align-top"
+          class="duo-chat-input web-only gl-relative gl-min-h-8 gl-max-w-full gl-grow gl-flex-col gl-rounded-bl-[12px] gl-rounded-br-[18px] gl-rounded-tl-[12px] gl-rounded-tr-[12px] gl-align-top"
         >
           <div
             class="gl-flex gl-justify-between gl-border-0 gl-border-b-1 gl-border-solid gl-border-strong gl-px-4 gl-py-4"
@@ -874,7 +881,7 @@ export default {
             <div>{{ $options.i18n.CHAT_MODEL_PLACEHOLDER }}</div>
             <div><slot name="agentic-switch"></slot></div>
           </div>
-          <div :data-value="prompt" class="gl-h-[40px] gl-grow">
+          <div :data-value="prompt" class="gl-h-[80px] gl-grow">
             <gl-card
               v-if="shouldShowSlashCommands"
               ref="commands"
@@ -929,25 +936,34 @@ export default {
               <template #remaining-character-count-text="{ count }">
                 <span
                   v-if="count <= promptLengthWarningCount"
-                  class="gl-absolute gl-bottom-[-25px] gl-right-px gl-pr-3"
+                  class="gl-absolute gl-right-px gl-mt-3 gl-pr-3 gl-text-sm"
+                  :class="{
+                    'gl-bottom-[-5rem]': hasFooterControls,
+                    'gl-bottom-[-1.6rem]': !hasFooterControls,
+                  }"
                 >
                   {{ remainingCharacterCountMessage(count) }}
                 </span>
               </template>
               <template #character-count-over-limit-text="{ count }">
-                <span class="gl-absolute gl-bottom-[-25px] gl-right-px gl-pr-3">{{
-                  overLimitCharacterCountMessage(count)
-                }}</span>
+                <span
+                  class="gl-absolute gl-bottom-[-1.6rem] gl-right-0 gl-mt-3 gl-pr-3 gl-text-sm"
+                  :class="{
+                    'gl-bottom-[-5rem]': hasFooterControls,
+                    'gl-bottom-[-1.6rem]': !hasFooterControls,
+                  }"
+                  >{{ overLimitCharacterCountMessage(count) }}</span
+                >
               </template>
             </gl-form-textarea>
           </div>
-          <div class="gl-flex gl-justify-end gl-px-3 gl-pb-3">
+          <div class="gl-absolute gl-bottom-0 gl-right-0 gl-px-3 gl-pb-3">
             <gl-button
               v-if="canSubmit"
               icon="paper-airplane"
               category="primary"
               variant="confirm"
-              class="gl-bottom-2 gl-right-2 gl-ml-auto !gl-rounded-full"
+              class="!gl-rounded-full"
               type="submit"
               :disabled="isPromptEmpty || !hasValidPrompt"
               data-testid="chat-prompt-submit-button"
@@ -958,7 +974,7 @@ export default {
               icon="stop"
               category="primary"
               variant="default"
-              class="gl-bottom-2 gl-right-2 !gl-rounded-full"
+              class="!gl-rounded-full"
               data-testid="chat-prompt-cancel-button"
               :aria-label="$options.i18n.CHAT_CANCEL_LABEL"
               @click="cancelPrompt"

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

@@ -1,7 +1,8 @@
 <script>
 import { GlIcon, GlLink } from '@gitlab/ui';
 import { translate } from '../../../../../utils/i18n';
-import MessageToolCommandOutput from '../../duo_chat_message_tool_command_output/message_tool_command_output.vue';
+import MessageToolApproval from '../../duo_chat_message_tool_approval/message_tool_approval.vue';
+import { APPROVAL_TOOL_NAMES } from '../../../constants';
 import BaseMessage from './message_base.vue';
 
 export const i18n = {
@@ -19,7 +20,7 @@ export default {
   name: 'DuoToolMessage',
   components: {
     BaseMessage,
-    MessageToolCommandOutput,
+    MessageToolApproval,
     GlIcon,
     GlLink,
   },
@@ -99,6 +100,18 @@ export default {
     toolWorkingDirectory() {
       return this.workingDirectory;
     },
+    requiresApproval() {
+      return [
+        APPROVAL_TOOL_NAMES.runCommand,
+        APPROVAL_TOOL_NAMES.runGitCommand,
+        APPROVAL_TOOL_NAMES.createIssue,
+        APPROVAL_TOOL_NAMES.updateIssue,
+        APPROVAL_TOOL_NAMES.createMergeRequest,
+        APPROVAL_TOOL_NAMES.updateMergeRequest,
+        APPROVAL_TOOL_NAMES.createEpic,
+        APPROVAL_TOOL_NAMES.updateEpic,
+      ].includes(this.toolName);
+    },
   },
   methods: {
     onOpenFilePath(filePath) {
@@ -111,16 +124,15 @@ export default {
 };
 </script>
 <template>
-  <base-message :message="message">
+  <message-tool-approval
+    v-if="requiresApproval"
+    :message="message"
+    :working-directory="workingDirectory"
+    approval-status="approved"
+  />
+  <base-message v-else :message="message">
     <template #message="{ content }">
-      <message-tool-command-output
-        v-if="hasCommandOutput"
-        :command-header="$options.i18n.RAN_TERMINAL_COMMAND"
-        :command-action="toolName"
-        :command-output="toolResponseContent"
-        :working-directory="toolWorkingDirectory"
-      />
-      <div v-else class="gl-flex gl-items-baseline !gl-text-subtle">
+      <div class="gl-flex gl-items-baseline !gl-text-subtle">
         <div class="gl-mr-3 gl-flex-shrink-0">
           <gl-icon :name="iconName" />
         </div>

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

@@ -0,0 +1,55 @@
+<script>
+import { GlAccordion, GlAccordionItem, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
+import { translate } from '../../../../../utils/i18n';
+import PreBlock from './pre_block.vue';
+
+export default {
+  name: 'BaseToolParams',
+  components: {
+    GlAccordion,
+    GlAccordionItem,
+    PreBlock,
+  },
+  directives: {
+    SafeHtml,
+  },
+  props: {
+    message: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    description: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    customAccordionTitle: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  computed: {
+    accordionTitle() {
+      return this.customAccordionTitle || this.$options.i18n.ACCORDION_TITLE;
+    },
+  },
+  i18n: {
+    ACCORDION_TITLE: translate('BaseToolParams.ACCORDION_TITLE', 'Read description'),
+  },
+};
+</script>
+<template>
+  <div class="gl-flex gl-flex-col">
+    <div v-if="message" v-safe-html="message"></div>
+    <slot v-else></slot>
+    <gl-accordion v-if="description" class="-gl-ml-2 gl-mt-3" :header-level="3">
+      <slot name="params-description">
+        <gl-accordion-item :title="accordionTitle">
+          <pre-block>{{ description }}</pre-block>
+        </gl-accordion-item>
+      </slot>
+    </gl-accordion>
+  </div>
+</template>

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

@@ -0,0 +1,112 @@
+<script>
+import { sprintf, translate } from '../../../../../utils/i18n';
+import { APPROVAL_TOOL_NAMES } from '../../../constants';
+import BaseToolParams from './base_tool_params.vue';
+
+export default {
+  name: 'IssuableToolParams',
+  components: {
+    BaseToolParams,
+  },
+  props: {
+    toolName: {
+      type: String,
+      required: true,
+      validator: (toolName) =>
+        [
+          APPROVAL_TOOL_NAMES.createIssue,
+          APPROVAL_TOOL_NAMES.updateIssue,
+          APPROVAL_TOOL_NAMES.createEpic,
+          APPROVAL_TOOL_NAMES.updateEpic,
+          APPROVAL_TOOL_NAMES.createMergeRequest,
+          APPROVAL_TOOL_NAMES.updateMergeRequest,
+        ].includes(toolName),
+    },
+    toolParams: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    project() {
+      return this.toolParams?.projectPath || this.toolParams?.projectId;
+    },
+    title() {
+      return this.toolParams?.title;
+    },
+    labels() {
+      return this.toolParams?.labels;
+    },
+    description() {
+      return this.toolParams?.description;
+    },
+    sourceBranch() {
+      return this.toolParams?.sourceBranch;
+    },
+    targetBranch() {
+      return this.toolParams?.targetBranch;
+    },
+    message() {
+      let message = this.$options.i18n[this.toolName] || '';
+      const labelsMessage = this.$options.i18n.ASSIGN_LABELS_MESSAGE;
+      const branchMessage = this.$options.i18n.BRANCH_MESSAGE;
+
+      if (this.title) {
+        message = `${message} ${this.$options.i18n.TITLE_MESSAGE}`;
+      }
+
+      if (this.sourceBranch && this.targetBranch) {
+        message = `${message} ${branchMessage}`;
+      }
+
+      if (this.labels) {
+        message = `${message} ${labelsMessage}`;
+      }
+
+      return sprintf(message, { project: this.project, ...this.toolParams });
+    },
+  },
+  i18n: {
+    [APPROVAL_TOOL_NAMES.createIssue]: translate(
+      'IssuableToolParams.CREATE_ISSUE',
+      'Open an issue in project <code>%{project}</code>.'
+    ),
+    [APPROVAL_TOOL_NAMES.updateIssue]: translate(
+      'IssuableToolParams.UPDATE_ISSUE',
+      'Update issue <code>%{issueIid}</code> in project <code>%{project}</code>.'
+    ),
+    [APPROVAL_TOOL_NAMES.createEpic]: translate(
+      'IssuableToolParams.CREATE_EPIC',
+      'Create an epic in group <code>%{groupId}</code>.'
+    ),
+    [APPROVAL_TOOL_NAMES.updateEpic]: translate(
+      'IssuableToolParams.UPDATE_EPIC',
+      'Update epic <code>%{epicId}</code> in group <code>%{groupId}</code>.'
+    ),
+    [APPROVAL_TOOL_NAMES.createMergeRequest]: translate(
+      'IssuableToolParams.CREATE_MERGE_REQUEST',
+      'Open a merge request in project <code>%{project}</code>.'
+    ),
+    [APPROVAL_TOOL_NAMES.updateMergeRequest]: translate(
+      'IssuableToolParams.UPDATE_MERGE_REQUEST',
+      'Update merge request <code>%{mergeRequestIid}</code> in project <code>%{project}</code>.'
+    ),
+    TITLE_MESSAGE: translate(
+      'IssuableToolParams.TITLE_MESSAGE',
+      'Set the title "<em>%{title}</em>".'
+    ),
+    BRANCH_MESSAGE: translate(
+      'IssuableToolParams.BRANCH_MESSAGE',
+      'From branch <code>%{sourceBranch}</code> to branch <code>%{targetBranch}</code>.'
+    ),
+    ASSIGN_LABELS_MESSAGE: translate(
+      'CreateIssueToolParams.ASSIGN_LABELS_MESSAGE',
+      'Assign the labels <code>%{labels}</code>.'
+    ),
+    ACCORDION_TITLE: translate('CreateIssueToolParams.ACCORDION_TITLE', 'Read description'),
+  },
+};
+</script>
+<template>
+  <base-tool-params :message="message" :description="description" />
+</template>

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

@@ -1,30 +1,75 @@
 <script>
 import { GlIcon } from '@gitlab/ui';
+import { translate } from '../../../../../utils/i18n';
+import { APPROVAL_TOOL_NAMES } from '../../../constants';
+import BaseToolParams from './base_tool_params.vue';
 
 export default {
   name: 'RunCommandToolParams',
   components: {
     GlIcon,
+    BaseToolParams,
   },
   props: {
-    program: {
+    toolName: {
       type: String,
       required: true,
     },
+    program: {
+      type: String,
+      required: false,
+      default: '',
+    },
     args: {
       type: String,
-      required: true,
+      required: false,
+      default: '',
+    },
+    command: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    toolResponse: {
+      type: Object,
+      required: false,
+      default: null,
+    },
+    workingDirectory: {
+      type: String,
+      required: false,
+      default: '',
     },
   },
   computed: {
     formattedCommand() {
-      return `${this.program} ${this.args}`;
+      if (this.toolName === APPROVAL_TOOL_NAMES.runCommand) {
+        return this.command?.length ? this.command : `${this.program} ${this.args}`;
+      }
+
+      return `git ${this.command} ${this.args}`;
     },
+    withWorkingDirectory() {
+      return this.workingDirectory?.length
+        ? `${this.workingDirectory}> ${this.formattedCommand}`
+        : this.formattedCommand;
+    },
+    commandOutput() {
+      return this.toolResponse?.content;
+    },
+  },
+  i18n: {
+    SEE_COMMAND_OUTPUT: translate('RunCommandToolParams.ACCORDION_TITLE', 'Expand command output'),
   },
 };
 </script>
 <template>
-  <div class="gl-flex gl-items-center gl-gap-3">
-    <gl-icon name="terminal" /> <code>{{ formattedCommand }}</code>
-  </div>
+  <base-tool-params
+    :description="commandOutput"
+    :custom-accordion-title="$options.i18n.SEE_COMMAND_OUTPUT"
+  >
+    <div class="gl-flex gl-items-center gl-gap-3">
+      <gl-icon name="terminal" /> <code>{{ withWorkingDirectory }}</code>
+    </div>
+  </base-tool-params>
 </template>

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

@@ -10,25 +10,22 @@ import {
 } from '@gitlab/ui';
 import { translate } from '../../../../utils/i18n';
 import { convertKeysToCamelCase } from '../../../../utils/object';
-import { acceptedApproveToolPayloads } from '../../constants';
+import { acceptedApproveToolPayloads, APPROVAL_TOOL_NAMES } from '../../constants';
 import CreateCommitToolParams from './components/create_commit_tool_params.vue';
-import CreateIssueToolParams from './components/create_issue_tool_params.vue';
-import CreateMergeRequestToolParams from './components/create_merge_request_tool_params.vue';
+import IssuableToolParams from './components/issuable_tool_params.vue';
 import RunCommandToolParams from './components/run_command_tool_params.vue';
 
-export const APPROVAL_TOOL_NAMES = {
-  createCommit: 'create_commit',
-  createIssue: 'create_issue',
-  createMergeRequest: 'create_merge_request',
-  runCommand: 'run_command',
-};
-
 export const PROCESSING_STATE = {
   APPROVING: 'approving',
   DENYING: 'denying',
   NONE: null,
 };
 
+export const TOOL_STATUS = {
+  Pending: 'pending',
+  Approved: 'approved',
+};
+
 export const i18n = {
   TOOL_APPROVAL_DESCRIPTION: translate(
     'MessageToolApproval.toolApprovalDescription',
@@ -62,6 +59,18 @@ export const i18n = {
       'MessageToolApproval.createIssue',
       'Duo wants to open an issue.'
     ),
+    [APPROVAL_TOOL_NAMES.updateIssue]: translate(
+      'MessageToolApproval.updateIssue',
+      'Duo wants to update an issue.'
+    ),
+    [APPROVAL_TOOL_NAMES.createEpic]: translate(
+      'MessageToolApproval.createEpic',
+      'Duo wants to create an epic.'
+    ),
+    [APPROVAL_TOOL_NAMES.updateEpic]: translate(
+      'MessageToolApproval.updateEpic',
+      'Duo wants to update an epic.'
+    ),
     [APPROVAL_TOOL_NAMES.createMergeRequest]: translate(
       'MessageToolApproval.createMergeRequest',
       'Duo wants to create a merge request.'
@@ -70,15 +79,33 @@ export const i18n = {
       'MessageToolApproval.runCommand',
       'Duo wants to run a command.'
     ),
+    [APPROVAL_TOOL_NAMES.runGitCommand]: translate(
+      'MessageToolApproval.runGitCommand',
+      'Duo wants to run a git command.'
+    ),
   },
-  TOOL_STATUS: translate('MessageToolApproval.toolStatus', 'Pending'),
+  [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'
+  ),
 };
 
 const TOOL_PARAMS_VIEW_COMPONENTS = {
   [APPROVAL_TOOL_NAMES.createCommit]: 'CreateCommitToolParams',
-  [APPROVAL_TOOL_NAMES.createIssue]: 'CreateIssueToolParams',
-  [APPROVAL_TOOL_NAMES.createMergeRequest]: 'CreateMergeRequestToolParams',
+  [APPROVAL_TOOL_NAMES.createIssue]: 'IssuableToolParams',
+  [APPROVAL_TOOL_NAMES.updateIssue]: 'IssuableToolParams',
+  [APPROVAL_TOOL_NAMES.createEpic]: 'IssuableToolParams',
+  [APPROVAL_TOOL_NAMES.updateEpic]: 'IssuableToolParams',
+  [APPROVAL_TOOL_NAMES.createMergeRequest]: 'IssuableToolParams',
+  [APPROVAL_TOOL_NAMES.updateMergeRequest]: 'IssuableToolParams',
   [APPROVAL_TOOL_NAMES.runCommand]: 'RunCommandToolParams',
+  [APPROVAL_TOOL_NAMES.runGitCommand]: 'RunCommandToolParams',
 };
 
 export default {
@@ -92,8 +119,7 @@ export default {
     GlDropdown,
     GlDropdownItem,
     CreateCommitToolParams,
-    CreateIssueToolParams,
-    CreateMergeRequestToolParams,
+    IssuableToolParams,
     RunCommandToolParams,
   },
   props: {
@@ -101,11 +127,21 @@ export default {
       required: true,
       type: Object,
     },
+    workingDirectory: {
+      type: String,
+      required: false,
+      default: '',
+    },
     isProcessing: {
       type: Boolean,
       required: false,
       default: false,
     },
+    approvalStatus: {
+      type: String,
+      required: false,
+      default: TOOL_STATUS.Pending,
+    },
     /**
      * Array of approval options for multi-approval functionality
      * @property {string} type - The approval type (approve-tool-once, approve-for-session, always-approve-tool)
@@ -137,6 +173,7 @@ export default {
       showDenialReason: false,
       denialReason: '',
       localProcessingState: PROCESSING_STATE.NONE,
+      collapsed: this.approvalStatus === TOOL_STATUS.Approved,
     };
   },
   computed: {
@@ -146,6 +183,9 @@ export default {
     toolParameters() {
       return this.message?.tool_info?.args || {};
     },
+    toolResponse() {
+      return this.message?.tool_info?.tool_response;
+    },
     camelCaseToolParameters() {
       return convertKeysToCamelCase(this.toolParameters);
     },
@@ -153,7 +193,27 @@ export default {
       return Object.keys(this.toolParameters).length > 0;
     },
     toolApprovalTitle() {
-      return i18n.TOOL_APPROVAL_TITLES[this.toolName];
+      return i18n.TOOL_APPROVAL_TITLES[this.toolName] || this.toolName;
+    },
+    toolStatusLabel() {
+      return i18n[this.approvalStatus];
+    },
+    toolStatusVariant() {
+      return {
+        [TOOL_STATUS.Pending]: 'neutral',
+        [TOOL_STATUS.Approved]: 'info',
+      }[this.approvalStatus];
+    },
+    collapsible() {
+      return this.approvalStatus === TOOL_STATUS.Approved;
+    },
+    collapseButtonProps() {
+      return this.collapsed
+        ? { icon: 'chevron-right', title: i18n.TOGGLE_PARAMS_BUTTON_EXPAND }
+        : { icon: 'chevron-down', title: i18n.TOGGLE_PARAMS_BUTTON_COLLAPSE };
+    },
+    isApproved() {
+      return this.approvalStatus === TOOL_STATUS.Approved;
     },
     isApproving() {
       return this.isProcessing && this.localProcessingState === PROCESSING_STATE.APPROVING;
@@ -247,14 +307,25 @@ export default {
 </script>
 
 <template>
-  <gl-card>
+  <gl-card class="gl-w-full" :body-class="{ 'gl-hidden': collapsed }">
     <template #header>
-      <div class="gl-flex gl-items-center gl-justify-between">
+      <div class="gl-flex gl-items-center gl-justify-between gl-gap-3">
         <span>
-          {{ toolApprovalTitle }}
+          <gl-button
+            v-if="collapsible"
+            variant="default"
+            category="tertiary"
+            size="small"
+            data-testid="toggle-details-button"
+            v-bind="collapseButtonProps"
+            @click="collapsed = !collapsed"
+          />
+          <span>
+            {{ toolApprovalTitle }}
+          </span>
         </span>
-        <gl-badge>
-          {{ $options.i18n.TOOL_STATUS }}
+        <gl-badge :variant="toolStatusVariant">
+          {{ toolStatusLabel }}
         </gl-badge>
       </div>
     </template>
@@ -262,6 +333,10 @@ export default {
       :is="toolParamsViewComponent"
       v-if="toolParamsViewComponent"
       class="gl-leading-20"
+      :tool-name="toolName"
+      :tool-params="camelCaseToolParameters"
+      :tool-response="toolResponse"
+      :working-directory="workingDirectory"
       v-bind="camelCaseToolParameters"
     />
     <div
@@ -283,7 +358,7 @@ export default {
         </span>
       </div>
     </div>
-    <template #footer>
+    <template v-if="!isApproved" #footer>
       <div v-if="!showDenialReason" class="gl-flex gl-gap-2">
         <!-- Split button when multiple approval options available -->
         <gl-dropdown

package/src/components/chat/constants.js

@@ -49,3 +49,15 @@ export const acceptedApproveToolPayloads = {
   APPROVE_SESSION,
   APPROVE_ALL_TOOLS,
 };
+
+export const APPROVAL_TOOL_NAMES = {
+  createCommit: 'create_commit',
+  createIssue: 'create_issue',
+  updateIssue: 'update_issue',
+  createEpic: 'create_epic',
+  updateEpic: 'update_epic',
+  createMergeRequest: 'create_merge_request',
+  updateMergeRequest: 'update_merge_request',
+  runCommand: 'run_command',
+  runGitCommand: 'run_git_command',
+};