@gitlab/duo-ui 10.20.0 → 10.22.0

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

@@ -0,0 +1,155 @@
+<script>
+import { GlSprintf, GlAccordion, GlAccordionItem } from '@gitlab/ui';
+import { translate, translatePlural, sprintf } from '../../../../../utils/i18n';
+import PreBlock from './pre_block.vue';
+
+export default {
+  name: 'CreateCommitToolParams',
+  components: {
+    GlSprintf,
+    GlAccordion,
+    GlAccordionItem,
+    PreBlock,
+  },
+  props: {
+    projectId: {
+      type: [String, Number],
+      required: true,
+    },
+    projectPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    branch: {
+      type: String,
+      required: true,
+    },
+    startBranch: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    commitMessage: {
+      type: String,
+      required: true,
+    },
+    actions: {
+      type: Array,
+      required: true,
+    },
+  },
+  computed: {
+    actionsCount() {
+      return this.actions.length;
+    },
+    actionsCountMessage() {
+      return sprintf(
+        translatePlural(
+          'CreateCommitToolParams.actionsCountMessage',
+          'The commit contains %{count} file change.',
+          'The commit contains %{count} file changes.'
+        )(this.actionsCount),
+        {
+          count: this.actionsCount,
+        }
+      );
+    },
+  },
+  methods: {
+    getActionTitle({ action, file_path: filePath, previous_path: previousPath }) {
+      switch (action) {
+        case 'create':
+          return sprintf(this.$options.i18n.CREATE_FILE_ACTION_LABEL, { filePath });
+        case 'update':
+          return sprintf(this.$options.i18n.UPDATE_FILE_ACTION_LABEL, { filePath });
+        case 'delete':
+          return sprintf(this.$options.i18n.DELETE_FILE_ACTION_LABEL, { filePath });
+        case 'move':
+          return sprintf(this.$options.i18n.MOVE_FILE_ACTION_LABEL, { filePath: previousPath });
+        case 'chmod':
+          return sprintf(this.$options.i18n.CHMOD_FILE_ACTION_LABEL, { filePath });
+        default:
+          return sprintf(this.$options.i18n.UNKNOWN_FILE_ACTION_LABEL, { filePath });
+      }
+    },
+    getActionContent({ action, content, encoding }) {
+      if (!['create', 'update'].includes(action)) {
+        return this.$options.i18n.ACTION_WITH_NO_CONTENT;
+      }
+
+      return (!encoding || encoding === 'text') && content ? content : '';
+    },
+  },
+  i18n: {
+    COMMIT_SUMMARY_MESSAGE: translate(
+      'CreateCommitToolParams.commitSummaryMessage',
+      'Create a commit in the branch %{branch} and project %{project}.'
+    ),
+    READ_COMMIT_MESSAGE: translate(
+      'CreateCommitToolParams.readCommitMessage',
+      'Read commit message'
+    ),
+    CREATE_FILE_ACTION_LABEL: translate(
+      'CreateCommitToolParams.createFileActionLabel',
+      'Create file %{filePath}'
+    ),
+    UPDATE_FILE_ACTION_LABEL: translate(
+      'CreateCommitToolParams.updateFileActionLabel',
+      'Update file %{filePath}'
+    ),
+    DELETE_FILE_ACTION_LABEL: translate(
+      'CreateCommitToolParams.deleteFileActionLabel',
+      'Delete file %{filePath}'
+    ),
+    MOVE_FILE_ACTION_LABEL: translate(
+      'CreateCommitToolParams.moveFileActionLabel',
+      'Move file %{filePath}'
+    ),
+    CHMOD_FILE_ACTION_LABEL: translate(
+      'CreateCommitToolParams.chmodFileActionLabel',
+      'Change permissions for file %{filePath}'
+    ),
+    UNKNOWN_FILE_ACTION_LABEL: translate(
+      'CreateCommitToolParams.unknownFileActionLabel',
+      'Modify file %{filePath}'
+    ),
+    ACTION_WITH_NO_CONTENT: translate(
+      'CreateCommitToolParams.actionWithNoContent',
+      'This action does not have any content.'
+    ),
+    EXPAND_CHANGES: translate('CreateCommitToolParams.expandFileChanges', 'Expand file changes'),
+  },
+};
+</script>
+<template>
+  <div class="gl-flex gl-flex-col">
+    <div>
+      <gl-sprintf :message="$options.i18n.COMMIT_SUMMARY_MESSAGE">
+        <template #project>
+          <code>{{ projectPath || projectId }}</code>
+        </template>
+        <template #branch>
+          <code>{{ branch }}</code>
+        </template>
+      </gl-sprintf>
+      {{ actionsCountMessage }}
+    </div>
+    <gl-accordion class="-gl-ml-2 gl-mt-3" :header-level="3">
+      <gl-accordion-item :title="$options.i18n.READ_COMMIT_MESSAGE">
+        <pre-block>{{ commitMessage }}</pre-block>
+      </gl-accordion-item>
+      <gl-accordion-item :title="$options.i18n.EXPAND_CHANGES">
+        <gl-accordion :header-level="4">
+          <gl-accordion-item
+            v-for="(action, index) in actions"
+            :key="index"
+            :title="getActionTitle(action)"
+          >
+            <pre-block>{{ getActionContent(action) }}</pre-block>
+          </gl-accordion-item>
+        </gl-accordion>
+      </gl-accordion-item>
+    </gl-accordion>
+  </div>
+</template>

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

@@ -0,0 +1,80 @@
+<script>
+import { GlSprintf, GlAccordion, GlAccordionItem } from '@gitlab/ui';
+import { translate } from '../../../../../utils/i18n';
+import PreBlock from './pre_block.vue';
+
+export default {
+  name: 'CreateIssueToolParams',
+  components: {
+    GlSprintf,
+    GlAccordion,
+    GlAccordionItem,
+    PreBlock,
+  },
+  props: {
+    projectId: {
+      type: [String, Number],
+      required: true,
+    },
+    projectPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    title: {
+      type: String,
+      required: true,
+    },
+    description: {
+      type: String,
+      required: true,
+    },
+    labels: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  computed: {
+    issueMessage() {
+      const baseMessage = this.$options.i18n.ISSUE_SUMMARY_MESSAGE_BASE;
+      const labelsMessage = this.$options.i18n.ISSUE_SUMMARY_MESSAGE_WITH_LABELS;
+
+      return this.labels ? `${baseMessage} ${labelsMessage}` : baseMessage;
+    },
+  },
+  i18n: {
+    ISSUE_SUMMARY_MESSAGE_BASE: translate(
+      'CreateIssueToolParams.ISSUE_SUMMARY_MESSAGE_BASE',
+      'Open an issue with title "%{title}" in project %{project}.'
+    ),
+    ISSUE_SUMMARY_MESSAGE_WITH_LABELS: translate(
+      'CreateIssueToolParams.ISSUE_SUMMARY_MESSAGE_WITH_LABELS',
+      'Assign the labels %{labels}.'
+    ),
+    ACCORDION_TITLE: translate('CreateIssueToolParams.ACCORDION_TITLE', 'Read description'),
+  },
+};
+</script>
+<template>
+  <div class="gl-flex gl-flex-col">
+    <div>
+      <gl-sprintf :message="issueMessage">
+        <template #title>
+          <em>{{ title }}</em>
+        </template>
+        <template #project>
+          <code>{{ projectPath || projectId }}</code>
+        </template>
+        <template #labels>
+          <code>{{ labels }}</code>
+        </template>
+      </gl-sprintf>
+    </div>
+    <gl-accordion class="-gl-ml-2 gl-mt-3" :header-level="3">
+      <gl-accordion-item :title="$options.i18n.ACCORDION_TITLE">
+        <pre-block>{{ description }}</pre-block>
+      </gl-accordion-item>
+    </gl-accordion>
+  </div>
+</template>

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

@@ -0,0 +1,74 @@
+<script>
+import { GlSprintf, GlAccordion, GlAccordionItem } from '@gitlab/ui';
+import { translate } from '../../../../../utils/i18n';
+import PreBlock from './pre_block.vue';
+
+export default {
+  name: 'CreateMergeRequestToolParams',
+  components: {
+    GlSprintf,
+    GlAccordion,
+    GlAccordionItem,
+    PreBlock,
+  },
+  props: {
+    projectId: {
+      type: [String, Number],
+      required: true,
+    },
+    projectPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    title: {
+      type: String,
+      required: true,
+    },
+    sourceBranch: {
+      type: String,
+      required: true,
+    },
+    targetBranch: {
+      type: String,
+      required: true,
+    },
+    description: {
+      type: String,
+      required: true,
+    },
+  },
+  i18n: {
+    MERGE_REQUEST_SUMMARY_MESSAGE: translate(
+      'CreateMergeRequestToolParams.MERGE_REQUEST_SUMMARY_MESSAGE',
+      'Open a merge request with title "%{title}" in project %{project} from branch %{sourceBranch} to branch %{targetBranch}.'
+    ),
+    ACCORDION_TITLE: translate('CreateMergeRequestToolParams.ACCORDION_TITLE', 'Read description'),
+  },
+};
+</script>
+<template>
+  <div class="gl-flex gl-flex-col">
+    <div>
+      <gl-sprintf :message="$options.i18n.MERGE_REQUEST_SUMMARY_MESSAGE">
+        <template #title>
+          <em>{{ title }}</em>
+        </template>
+        <template #project>
+          <code>{{ projectPath || projectId }}</code>
+        </template>
+        <template #sourceBranch>
+          <code>{{ sourceBranch }}</code>
+        </template>
+        <template #targetBranch>
+          <code>{{ targetBranch }}</code>
+        </template>
+      </gl-sprintf>
+    </div>
+    <gl-accordion class="-gl-ml-2 gl-mt-3" :header-level="3">
+      <gl-accordion-item :title="$options.i18n.ACCORDION_TITLE">
+        <pre-block>{{ description }}</pre-block>
+      </gl-accordion-item>
+    </gl-accordion>
+  </div>
+</template>

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

@@ -0,0 +1,5 @@
+<template>
+  <pre
+    class="gl-border gl-grid gl-text-pretty gl-rounded-lg gl-border-strong gl-bg-strong gl-p-5 gl-font-monospace"
+  ><code><slot></slot></code></pre>
+</template>

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

@@ -0,0 +1,30 @@
+<script>
+import { GlIcon } from '@gitlab/ui';
+
+export default {
+  name: 'RunCommandToolParams',
+  components: {
+    GlIcon,
+  },
+  props: {
+    program: {
+      type: String,
+      required: true,
+    },
+    args: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    formattedCommand() {
+      return `${this.program} ${this.args}`;
+    },
+  },
+};
+</script>
+<template>
+  <div class="gl-flex gl-items-center gl-gap-3">
+    <gl-icon name="terminal" /> <code>{{ formattedCommand }}</code>
+  </div>
+</template>

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

@@ -1,6 +1,18 @@
 <script>
-import { GlButton, GlIcon, GlFormTextarea, GlFormGroup } from '@gitlab/ui';
+import { GlButton, GlFormTextarea, GlFormGroup, GlCard, GlBadge } from '@gitlab/ui';
 import { translate } from '../../../../utils/i18n';
+import { convertKeysToCamelCase } from '../../../../utils/object';
+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 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',
@@ -9,10 +21,6 @@ export const PROCESSING_STATE = {
 };
 
 export const i18n = {
-  TOOL_APPROVAL_TITLE: translate(
-    'MessageToolApproval.toolApprovalTitle',
-    'Duo would like to execute a tool. Do you want to proceed?'
-  ),
   TOOL_APPROVAL_DESCRIPTION: translate(
     'MessageToolApproval.toolApprovalDescription',
     'GitLab Duo Agentic Chat wants to execute a tool. Do you want to proceed?'
@@ -34,15 +42,46 @@ export const i18n = {
     "Tell Duo why you're rejecting this tool execution..."
   ),
   CANCEL_TEXT: translate('MessageToolApproval.cancelText', 'Cancel'),
+  TOOL_APPROVAL_TITLES: {
+    [APPROVAL_TOOL_NAMES.createCommit]: translate(
+      'MessageToolApproval.createCommit',
+      'Duo wants to push a commit.'
+    ),
+    [APPROVAL_TOOL_NAMES.createIssue]: translate(
+      'MessageToolApproval.createIssue',
+      'Duo wants to open an issue.'
+    ),
+    [APPROVAL_TOOL_NAMES.createMergeRequest]: translate(
+      'MessageToolApproval.createMergeRequest',
+      'Duo wants to create a merge request.'
+    ),
+    [APPROVAL_TOOL_NAMES.runCommand]: translate(
+      'MessageToolApproval.runCommand',
+      'Duo wants to run a command.'
+    ),
+  },
+  TOOL_STATUS: translate('MessageToolApproval.toolStatus', 'Pending'),
+};
+
+const TOOL_PARAMS_VIEW_COMPONENTS = {
+  [APPROVAL_TOOL_NAMES.createCommit]: 'CreateCommitToolParams',
+  [APPROVAL_TOOL_NAMES.createIssue]: 'CreateIssueToolParams',
+  [APPROVAL_TOOL_NAMES.createMergeRequest]: 'CreateMergeRequestToolParams',
+  [APPROVAL_TOOL_NAMES.runCommand]: 'RunCommandToolParams',
 };
 
 export default {
   name: 'MessageToolApproval',
   components: {
     GlButton,
-    GlIcon,
+    GlCard,
     GlFormTextarea,
     GlFormGroup,
+    GlBadge,
+    CreateCommitToolParams,
+    CreateIssueToolParams,
+    CreateMergeRequestToolParams,
+    RunCommandToolParams,
   },
   props: {
     message: {
@@ -69,9 +108,15 @@ export default {
     toolParameters() {
       return this.message?.tool_info?.args || {};
     },
+    camelCaseToolParameters() {
+      return convertKeysToCamelCase(this.toolParameters);
+    },
     hasToolParameters() {
       return Object.keys(this.toolParameters).length > 0;
     },
+    toolApprovalTitle() {
+      return i18n.TOOL_APPROVAL_TITLES[this.toolName];
+    },
     isApproving() {
       return this.isProcessing && this.localProcessingState === PROCESSING_STATE.APPROVING;
     },
@@ -87,6 +132,9 @@ export default {
     denyButtonText() {
       return this.isDenying ? this.$options.i18n.DENYING_TEXT : this.$options.i18n.DENY_TEXT;
     },
+    toolParamsViewComponent() {
+      return TOOL_PARAMS_VIEW_COMPONENTS[this.toolName];
+    },
   },
   watch: {
     // Reset local state when processing completes
@@ -127,104 +175,111 @@ export default {
     },
   },
   i18n,
+  APPROVAL_TOOL_NAMES,
 };
 </script>
 
 <template>
-  <div
-    class="md gl-border gl-rounded-bl-none gl-border-1 gl-border-solid gl-border-transparent gl-bg-subtle gl-p-4 gl-leading-20 gl-text-default gl-break-anywhere"
-  >
-    <p class="gl-mb-3 gl-text-gray-700">
-      {{ $options.i18n.TOOL_APPROVAL_TITLE }}
-    </p>
-
-    <div class="gl-mb-3 gl-flex gl-items-center gl-gap-2">
-      <gl-icon name="work-item-maintenance" class="gl-text-gray-500" />
-      <strong>{{ toolName }}</strong>
-    </div>
-
-    <div class="gl-border gl-mb-4 gl-rounded-base gl-border-gray-200 gl-bg-gray-50 gl-p-3">
-      <p class="gl-mb-1 gl-text-sm gl-text-gray-500">
-        {{ $options.i18n.REQUEST_TEXT }}
-      </p>
-      <code
-        v-if="hasToolParameters"
-        class="gl-whitespace-pre-wrap gl-text-sm gl-text-default gl-font-monospace"
-        data-testid="tool-parameters"
-        >{{ JSON.stringify(toolParameters, null, 2) }}</code
-      >
-      <span v-else class="gl-text-sm gl-text-gray-500" data-testid="no-parameters-message">
-        {{ $options.i18n.NO_PARAMETERS_TEXT }}
-      </span>
-    </div>
-
-    <div v-if="!showDenialReason" class="gl-flex gl-justify-between">
-      <gl-button
-        variant="danger"
-        size="small"
-        icon="cancel"
-        data-testid="deny-tool-inline"
-        :disabled="buttonsDisabled"
-        :loading="isDenying"
-        @click="handleDeny"
-      >
-        {{ denyButtonText }}
-      </gl-button>
-
-      <gl-button
-        variant="confirm"
-        size="small"
-        icon="play"
-        data-testid="approve-tool-inline"
-        :disabled="buttonsDisabled"
-        :loading="isApproving"
-        @click="handleApprove"
-      >
-        {{ approveButtonText }}
-      </gl-button>
+  <gl-card>
+    <template #header>
+      <div class="gl-flex gl-items-center gl-justify-between">
+        <span>
+          {{ toolApprovalTitle }}
+        </span>
+        <gl-badge>
+          {{ $options.i18n.TOOL_STATUS }}
+        </gl-badge>
+      </div>
+    </template>
+    <component
+      :is="toolParamsViewComponent"
+      v-if="toolParamsViewComponent"
+      class="gl-leading-20"
+      v-bind="camelCaseToolParameters"
+    />
+    <div
+      v-else
+      class="md gl-border gl-rounded-bl-none gl-border-1 gl-border-solid gl-border-transparent gl-bg-subtle gl-p-4 gl-leading-20 gl-text-default gl-break-anywhere"
+    >
+      <div class="gl-border gl-mb-4 gl-rounded-base gl-border-gray-200 gl-bg-gray-50 gl-p-3">
+        <p class="gl-mb-1 gl-text-sm gl-text-gray-500">
+          {{ $options.i18n.REQUEST_TEXT }}
+        </p>
+        <code
+          v-if="hasToolParameters"
+          class="gl-whitespace-pre-wrap gl-text-sm gl-text-default gl-font-monospace"
+          data-testid="tool-parameters"
+          >{{ JSON.stringify(toolParameters, null, 2) }}</code
+        >
+        <span v-else class="gl-text-sm gl-text-gray-500" data-testid="no-parameters-message">
+          {{ $options.i18n.NO_PARAMETERS_TEXT }}
+        </span>
+      </div>
     </div>
-    <div v-else class="gl-mt-3">
-      <gl-form-group
-        :label="$options.i18n.DENIAL_REASON_LABEL"
-        label-for="inline-rejection-reason"
-        :optional="true"
-        class="gl-mb-3"
-      >
-        <gl-form-textarea
-          id="inline-rejection-reason"
-          v-model="denialReason"
-          :placeholder="$options.i18n.DENIAL_REASON_PLACEHOLDER"
-          :rows="2"
-          :no-resize="true"
-          :submit-on-enter="false"
-          :disabled="buttonsDisabled"
-          data-testid="denial-reason-textarea"
-          autofocus
-          @submit="submitDenial"
-        />
-      </gl-form-group>
-
-      <div class="gl-flex gl-gap-3">
+    <template #footer>
+      <div v-if="!showDenialReason" class="gl-flex gl-gap-2">
         <gl-button
+          variant="confirm"
           size="small"
-          data-testid="cancel-denial"
+          data-testid="approve-tool-inline"
           :disabled="buttonsDisabled"
-          @click="cancelDenial"
+          :loading="isApproving"
+          @click="handleApprove"
         >
-          {{ $options.i18n.CANCEL_TEXT }}
+          {{ approveButtonText }}
         </gl-button>
         <gl-button
-          variant="danger"
           size="small"
-          icon="cancel"
-          data-testid="submit-denial"
+          data-testid="deny-tool-inline"
           :disabled="buttonsDisabled"
           :loading="isDenying"
-          @click="submitDenial"
+          @click="handleDeny"
         >
           {{ denyButtonText }}
         </gl-button>
       </div>
-    </div>
-  </div>
+      <div v-else>
+        <gl-form-group
+          :label="$options.i18n.DENIAL_REASON_LABEL"
+          label-for="inline-rejection-reason"
+          :optional="true"
+          class="gl-mb-3"
+        >
+          <gl-form-textarea
+            id="inline-rejection-reason"
+            v-model="denialReason"
+            :placeholder="$options.i18n.DENIAL_REASON_PLACEHOLDER"
+            :rows="2"
+            :no-resize="true"
+            :submit-on-enter="false"
+            :disabled="buttonsDisabled"
+            data-testid="denial-reason-textarea"
+            autofocus
+            @submit="submitDenial"
+          />
+        </gl-form-group>
+
+        <div class="gl-flex gl-gap-3">
+          <gl-button
+            size="small"
+            data-testid="submit-denial"
+            variant="confirm"
+            :disabled="buttonsDisabled"
+            :loading="isDenying"
+            @click="submitDenial"
+          >
+            {{ denyButtonText }}
+          </gl-button>
+          <gl-button
+            size="small"
+            data-testid="cancel-denial"
+            :disabled="buttonsDisabled"
+            @click="cancelDenial"
+          >
+            {{ $options.i18n.CANCEL_TEXT }}
+          </gl-button>
+        </div>
+      </div>
+    </template>
+  </gl-card>
 </template>

package/src/components/chat/duo_chat.scss

@@ -141,7 +141,6 @@ $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));
@@ -152,7 +151,6 @@ $drawer-width: 400px;
     resize: none;
     max-height: 240px;
     padding-right: 40px;
-    border-radius: px-to-rem(20px);
   }
 
   &::after {
@@ -160,6 +158,7 @@ $drawer-width: 400px;
     @apply gl-invisible;
     @apply gl-p-4;
     @apply gl-font-regular;
+    @apply gl-absolute;
     padding-right: 40px;
     word-break: break-word;
   }