@gitlab/duo-ui 10.19.0 → 10.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/duo-ui",
-  "version": "10.19.0",
+  "version": "10.21.0",
   "description": "Duo UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -93,16 +93,16 @@
   },
   "devDependencies": {
     "@arkweid/lefthook": "0.7.7",
-    "@babel/core": "^7.28.3",
+    "@babel/core": "^7.28.4",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
     "@babel/preset-env": "^7.28.3",
     "@babel/preset-react": "^7.27.1",
-    "@gitlab/eslint-plugin": "21.2.0",
+    "@gitlab/eslint-plugin": "21.2.1",
     "@gitlab/fonts": "^1.3.1",
     "@gitlab/stylelint-config": "6.2.2",
     "@gitlab/svgs": "^3.146.0",
-    "@gitlab/ui": "^121.0.1",
+    "@gitlab/ui": "^122.1.2",
     "@jest/test-sequencer": "^29.7.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",

package/src/components/agentic_chat/agentic_duo_chat.vue

@@ -149,6 +149,12 @@ export default {
         minHeight: 400,
       }),
     },
+    agents: {
+      type: Array,
+
+      required: false,
+      default: () => [],
+    },
     /**
      * The title of the chat/feature.
      */
@@ -489,8 +495,8 @@ export default {
     onGoBack() {
       this.$emit('back-to-list');
     },
-    onNewChat() {
-      this.$emit('new-chat');
+    onNewChat(agent) {
+      this.$emit('new-chat', agent);
 
       this.$nextTick(() => {
         this.focusChatInput();
@@ -802,6 +808,7 @@ export default {
         :should-render-resizable="shouldRenderResizable"
         :badge-type="isMultithreaded ? null : badgeType"
         :session-id="sessionId"
+        :agents="agents"
         @go-back="onGoBack"
         @new-chat="onNewChat"
         @close="hideChat"

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

@@ -10,6 +10,7 @@ import {
   GlSafeHtmlDirective as SafeHtml,
   GlTooltipDirective,
   GlToast,
+  GlDisclosureDropdown,
 } from '@gitlab/ui';
 import { translate } from '../../../../utils/i18n';
 import { VIEW_TYPES } from './constants';
@@ -46,6 +47,7 @@ export default {
     GlDropdown,
     GlDropdownItem,
     GlExperimentBadge,
+    GlDisclosureDropdown,
   },
   directives: {
     SafeHtml,
@@ -96,13 +98,33 @@ export default {
       type: String,
       required: true,
     },
+    agents: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
   },
   computed: {
     VIEW_TYPES() {
       return VIEW_TYPES;
     },
+    hasManyAgents() {
+      return this.agents.length > 1;
+    },
+    hasAgents() {
+      return this.agents.length > 0;
+    },
   },
   methods: {
+    startNewChat(agent) {
+      if (agent) {
+        this.$emit('new-chat', agent);
+      } else if (this.hasAgents) {
+        this.$emit('new-chat', this.agents[0]);
+      } else {
+        this.$emit('new-chat');
+      }
+    },
     async copySessionIdToClipboard() {
       try {
         await navigator.clipboard.writeText(this.sessionId);
@@ -134,18 +156,48 @@ export default {
       </div>
 
       <div class="gl-flex gl-gap-3">
-        <gl-button
-          v-if="isMultithreaded && (activeThreadId || currentView === VIEW_TYPES.LIST)"
-          v-gl-tooltip
-          :title="$options.i18n.CHAT_NEW_TOOLTIP"
-          data-testid="chat-new-button"
-          variant="confirm"
-          category="tertiary"
-          size="small"
-          icon="duo-chat-new"
-          :aria-label="$options.i18n.CHAT_NEW_LABEL"
-          @click="$emit('new-chat')"
-        />
+        <template
+          v-if="
+            isMultithreaded && (activeThreadId || currentView === VIEW_TYPES.LIST || hasManyAgents)
+          "
+        >
+          <gl-disclosure-dropdown
+            v-if="hasManyAgents"
+            :title="$options.i18n.CHAT_NEW_TOOLTIP"
+            :toggle-text="$options.i18n.CHAT_NEW_TOOLTIP"
+            :items="agents"
+            data-testid="chat-new-button"
+            variant="confirm"
+            category="tertiary"
+            size="small"
+            icon="duo-chat-new"
+            text-sr-only
+            :aria-label="$options.i18n.CHAT_NEW_LABEL"
+            no-caret
+            @action="startNewChat"
+          >
+            <template #list-item="{ item }">
+              <span class="gl-flex gl-flex-col">
+                <span clas="gl-block">{{ item.name }}</span>
+                <span class="gl-overflow-hidden gl-text-ellipsis gl-whitespace-nowrap gl-text-sm">{{
+                  item.description
+                }}</span>
+              </span>
+            </template>
+          </gl-disclosure-dropdown>
+          <gl-button
+            v-else
+            v-gl-tooltip
+            :title="$options.i18n.CHAT_NEW_TOOLTIP"
+            data-testid="chat-new-button"
+            variant="confirm"
+            category="tertiary"
+            size="small"
+            icon="duo-chat-new"
+            :aria-label="$options.i18n.CHAT_NEW_LABEL"
+            @click="startNewChat"
+          />
+        </template>
         <gl-button
           v-if="isMultithreaded && currentView === VIEW_TYPES.CHAT"
           v-gl-tooltip

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>