@gitlab/duo-ui 10.19.0 → 10.21.0

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/mock_data.js

@@ -169,6 +169,105 @@ export const MOCK_REQUEST_MESSAGE_WITH_TOOL_APPROVAL_PARAMS = {
   role: 'request',
 };
 
+export const MOCK_REQUEST_MESSAGE_WITH_TOOL_APPROVAL_CREATE_MERGE_REQUEST = {
+  id: '125',
+  content: 'Tool create_merge_request requires approval. Please confirm if you want to proceed.',
+  message_type: MESSAGE_MODEL_ROLES.request,
+  tool_info: {
+    name: 'create_merge_request',
+    args: {
+      project_id: 123,
+      source_branch: 'rename-all-spec-files',
+      target_branch: 'main',
+      title: 'Rename all the *.spec.ts files to *.test.ts',
+      description:
+        '## What does this MR do?\n\nThis MR updates the `group` field in the `web_ide_language_server` beta feature flag configuration from `group::remote development` to `group:: editor extensions`.\n\n## Related issues\n\nThis change aligns the feature flag with the correct group ownership.\n\n## Changes made\n\n- Updated `config/feature_flags/beta/web_ide_language_server.yml`\n- Changed group field from `group::remote development` to `group:: editor extensions`\n\n## Checklist\n\n- [x] Feature flag configuration updated\n- [x] Group field correctly set to `group:: editor extensions`',
+    },
+  },
+  timestamp: '2025-06-25T19:22:21.290791+00:00',
+  status: 'success',
+  role: 'request',
+};
+
+export const MOCK_REQUEST_MESSAGE_WITH_TOOL_APPROVAL_RUN_COMMAND = {
+  id: '125',
+  content: 'Tool run_command requires approval. Please confirm if you want to proceed.',
+  message_type: MESSAGE_MODEL_ROLES.request,
+  tool_info: {
+    name: 'run_command',
+    args: {
+      program: 'ls',
+      args: '-a | grep package.json',
+    },
+  },
+  timestamp: '2025-06-25T19:22:21.290791+00:00',
+  status: 'success',
+  role: 'request',
+};
+
+export const MOCK_REQUEST_MESSAGE_WITH_TOOL_APPROVAL_CREATE_ISSUE = {
+  id: '125',
+  content: 'Tool run_command requires approval. Please confirm if you want to proceed.',
+  message_type: MESSAGE_MODEL_ROLES.request,
+  tool_info: {
+    name: 'create_issue',
+    args: {
+      project_id: 123,
+      title: 'CSP bug in VSCode Fork prevents loading external web views in Web IDE',
+      description:
+        "## Problem\n\nThe VSCode Fork implementation has a Content Security Policy (CSP) bug that prevents external web views from loading properly in the Web IDE.\n\n## Impact\n\n- External web views fail to load within the Web IDE environment\n- This affects functionality that relies on embedding external content\n- Users may experience broken or non-functional web view components\n\n## Expected Behavior\n\nExternal web views should load successfully within the Web IDE when permitted by security policies.\n\n## Current Behavior\n\nExternal web views are blocked due to CSP restrictions in the VSCode Fork implementation.\n\n## Technical Details\n\nThis appears to be related to how the VSCode Fork handles Content Security Policy headers, which may be overly restrictive for the Web IDE's use case with external web views.\n\n## Next Steps\n\n- [ ] Investigate the specific CSP directives causing the issue\n- [ ] Determine which external domains/resources need to be allowlisted\n- [ ] Implement appropriate CSP modifications in the VSCode Fork\n- [ ] Test the fix with various external web view scenarios\n- [ ] Ensure security implications are properly evaluated",
+      labels: 'bug,web-ide,vscode-fork,csp,security',
+    },
+  },
+  timestamp: '2025-06-25T19:22:21.290791+00:00',
+  status: 'success',
+  role: 'request',
+};
+
+export const MOCK_REQUEST_MESSAGE_WITH_TOOL_APPROVAL_CREATE_COMMIT = {
+  id: '125',
+  content: 'Tool create_commit requires approval. Please confirm if you want to proceed.',
+  message_type: MESSAGE_MODEL_ROLES.request,
+  tool_info: {
+    name: 'create_commit',
+    args: {
+      project_id: 35104827,
+      branch: 'feat/add-web-ide-duo-chat-package',
+      start_branch: 'main',
+      commit_message:
+        'feat: add web-ide-duo-chat package with TypeScript setup\n\n- Create new package @gitlab/web-ide-duo-chat\n- Set up TypeScript configuration following project patterns\n- Add src directory with index.ts entry point\n- Configure package.json with workspace dependencies\n- Add package reference to root tsconfig.json',
+      actions: [
+        {
+          action: 'create',
+          file_path: 'packages/web-ide-duo-chat/package.json',
+          content:
+            '{\n  "name": "@gitlab/web-ide-duo-chat",\n  "version": "0.0.1",\n  "main": "./src/index.ts",\n  "license": "MIT",\n  "packageManager": "yarn@3.2.0",\n  "devDependencies": {\n    "@gitlab/utils-test": "workspace:*"\n  },\n  "dependencies": {\n    "@gitlab/logger": "workspace:*",\n    "@gitlab/web-ide-types": "workspace:*"\n  },\n  "publishConfig": {\n    "main": "./lib/index.js"\n  }\n}\n',
+        },
+        {
+          action: 'create',
+          file_path: 'packages/web-ide-duo-chat/src/types.ts',
+          content:
+            "/**\n * Represents a chat message in the Duo Chat interface\n */\nexport interface ChatMessage {\n  /**\n   * Unique identifier for the message\n   */\n  id: string;\n  /**\n   * The content of the message\n   */\n  content: string;\n  /**\n   * Who sent the message\n   */\n  sender: 'user' | 'assistant';\n  /**\n   * Timestamp when the message was created\n   */\n  timestamp: Date;\n  /**\n   * Optional metadata for the message\n   */\n  metadata?: Record<string, unknown>;\n}\n\n/**\n * Represents a chat conversation\n */\nexport interface ChatConversation {\n  /**\n   * Unique identifier for the conversation\n   */\n  id: string;\n  /**\n   * Title of the conversation\n   */\n  title: string;\n  /**\n   * Messages in the conversation\n   */\n  messages: ChatMessage[];\n  /**\n   * When the conversation was created\n   */\n  createdAt: Date;\n  /**\n   * When the conversation was last updated\n   */\n  updatedAt: Date;\n}\n\n/**\n * Event types for Duo Chat\n */\nexport type DuoChatEvent = \n  | { type: 'message-sent'; payload: ChatMessage }\n  | { type: 'message-received'; payload: ChatMessage }\n  | { type: 'conversation-started'; payload: ChatConversation }\n  | { type: 'conversation-ended'; payload: { conversationId: string } }\n  | { type: 'error'; payload: { error: Error; context?: string } };\n\n/**\n * Callback function for handling Duo Chat events\n */\nexport type DuoChatEventHandler = (event: DuoChatEvent) => void;\n\n/**\n * Interface for Duo Chat service providers\n */\nexport interface DuoChatProvider {\n  /**\n   * Send a message and get a response\n   */\n  sendMessage(message: string, conversationId?: string): Promise<ChatMessage>;\n  /**\n   * Start a new conversation\n   */\n  startConversation(title?: string): Promise<ChatConversation>;\n  /**\n   * Get conversation history\n   */\n  getConversation(conversationId: string): Promise<ChatConversation | null>;\n  /**\n   * List all conversations\n   */\n  listConversations(): Promise<ChatConversation[]>;\n}\n",
+        },
+        {
+          action: 'update',
+          file_path: 'tsconfig.json',
+          content:
+            '{\n  "extends": "./tsconfig.base.json",\n  "references": [\n    { "path": "./packages/example" },\n    { "path": "./packages/gitlab-api-client" },\n    { "path": "./packages/gitlab-api-client-factory" },\n    { "path": "./packages/logger" },\n    { "path": "./packages/oauth-client" },\n    { "path": "./packages/utils-crypto" },\n    { "path": "./packages/utils-escape" },\n    { "path": "./packages/utils-test" },\n    { "path": "./packages/utils-path" },\n    { "path": "./packages/vscode-bootstrap" },\n    { "path": "./packages/vscode-mediator-commands" },\n    { "path": "./packages/web-ide" },\n    { "path": "./packages/web-ide-duo-chat" },\n    { "path": "./packages/web-ide-fs" },\n    { "path": "./packages/web-ide-types" },\n    { "path": "./packages/web-ide-interop" },\n    { "path": "./packages/vscode-extension-web-ide" },\n    { "path": "./packages/cross-origin-channel" },\n    { "path": "./packages/cloudflare" }\n  ],\n  "files": []\n}\n',
+        },
+        {
+          action: 'move',
+          file_path: 'yarn.lock',
+          previous_path: 'yarn.lock.bkp',
+        },
+      ],
+    },
+  },
+  timestamp: '2025-06-25T19:22:21.290791+00:00',
+  status: 'success',
+  role: 'assistant',
+};
+
 export const MOCK_WORKFLOW_END_MESSAGE = {
   id: '123',
   content: "Search for 'duo.*chat.*message' in directory",

package/src/utils/object.js

@@ -0,0 +1,4 @@
+import mapKeys from 'lodash/mapKeys';
+import camelCase from 'lodash/camelCase';
+
+export const convertKeysToCamelCase = (obj = {}) => mapKeys(obj, (value, key) => camelCase(key));

package/translations.js

@@ -33,6 +33,25 @@ export default {
   'AgenticToolRejectionModal.placeholder': "Explain why you're rejecting this tool execution...",
   'AgenticToolRejectionModal.submitText': 'Submit Rejection',
   'AgenticToolRejectionModal.title': 'Provide Rejection Reason',
+  'CreateCommitToolParams.actionWithNoContent': 'This action does not have any content.',
+  'CreateCommitToolParams.actionsCountMessage': null,
+  'CreateCommitToolParams.chmodFileActionLabel': 'Change permissions for file %{filePath}',
+  'CreateCommitToolParams.commitSummaryMessage':
+    'Create a commit in the branch %{branch} and project %{project}.',
+  'CreateCommitToolParams.createFileActionLabel': 'Create file %{filePath}',
+  'CreateCommitToolParams.deleteFileActionLabel': 'Delete file %{filePath}',
+  'CreateCommitToolParams.expandFileChanges': 'Expand file changes',
+  'CreateCommitToolParams.moveFileActionLabel': 'Move file %{filePath}',
+  'CreateCommitToolParams.readCommitMessage': 'Read commit message',
+  'CreateCommitToolParams.unknownFileActionLabel': 'Modify file %{filePath}',
+  'CreateCommitToolParams.updateFileActionLabel': 'Update file %{filePath}',
+  'CreateIssueToolParams.ACCORDION_TITLE': 'Read description',
+  'CreateIssueToolParams.ISSUE_SUMMARY_MESSAGE_BASE':
+    'Open an issue with title "%{title}" in project %{project}.',
+  'CreateIssueToolParams.ISSUE_SUMMARY_MESSAGE_WITH_LABELS': 'Assign the labels %{labels}.',
+  'CreateMergeRequestToolParams.ACCORDION_TITLE': 'Read description',
+  'CreateMergeRequestToolParams.MERGE_REQUEST_SUMMARY_MESSAGE':
+    'Open a merge request with title "%{title}" in project %{project} from branch %{sourceBranch} to branch %{targetBranch}.',
   'DuoChat.chatBackLabel': 'Back to history',
   'DuoChat.chatBackToChatToolTip': 'Back to chat',
   'DuoChat.chatCancelLabel': 'Cancel',
@@ -105,6 +124,9 @@ export default {
   'MessageToolApproval.approveText': 'Approve',
   'MessageToolApproval.approvingText': 'Approving...',
   'MessageToolApproval.cancelText': 'Cancel',
+  'MessageToolApproval.createCommit': 'Duo wants to push a commit.',
+  'MessageToolApproval.createIssue': 'Duo wants to open an issue.',
+  'MessageToolApproval.createMergeRequest': 'Duo wants to create a merge request.',
   'MessageToolApproval.denialReasonLabel': 'Rejection reason',
   'MessageToolApproval.denialReasonPlaceholder':
     "Tell Duo why you're rejecting this tool execution...",
@@ -112,10 +134,10 @@ export default {
   'MessageToolApproval.denyingText': 'Denying...',
   'MessageToolApproval.noParametersText': 'No parameters will be sent with this request.',
   'MessageToolApproval.parametersText': 'Request',
+  'MessageToolApproval.runCommand': 'Duo wants to run a command.',
   'MessageToolApproval.toolApprovalDescription':
     'GitLab Duo Agentic Chat wants to execute a tool. Do you want to proceed?',
-  'MessageToolApproval.toolApprovalTitle':
-    'Duo would like to execute a tool. Do you want to proceed?',
   'MessageToolApproval.toolLabel': 'Tool:',
+  'MessageToolApproval.toolStatus': 'Pending',
   'MessageToolApproval.toolUnknown': 'Unknown',
 };